Merge branch 'main' into user-items

Author: jnptk

README.md

@@ -149,7 +149,6 @@ To ensure your website gets the greatest exposure, add it both to [Awesome Volto
 - [Industrial Emissions portal for Europe](https://industry.eea.europa.eu) (Thematic website focusing on European industrial emissions, developed by [Eau de Web](https://eaudeweb.ro/), 2020)
 - [Interpretare.ro](https://www.interpretare.ro) (Romanian medical imaging interpretation service allowing patients to submit MRI, CT, and other diagnostic imaging for professional evaluation by medical specialists, 2022)
 - [iTlent - Basque Institute of Talent in VET](https://www.itlent.eus/en) (developed by [CodeSyntax](https://www.codesyntax.com/en), 2024)
-- [Jobfamilie MEDICE](https://jobfamilie.medice.de/de) (Career website for MEDICE Arzneimittel Pütter GmbH & Co. KG, developed by [Werkbank GmbH](https://werkbank.de/), 2020)
 - [Lanku](https://www.lanku.eus) (Website for Lanku Kultur Zerbitzuak, a company offering cultural services and improvised Basque verse singing sessions across the Basque Country, developed by [CodeSyntax](https://www.codesyntax.com/en), 2023)
 - [Leibniz Institute for Science and Mathematics Education (IPN)](https://www.leibniz-ipn.de/de) (Website of the IPN, a research institute dedicated to issues related to learning and teaching of science, mathematics and computer science in and outside of schools, developed by [Starzel](https://www.starzel.de), 2023)
 - [Nuova Voce Ecologista](https://nuovavoceecologista.it) (Website of Nuova Voce Ecologista, an Italian green Party, 2020)

docs/source/release-notes/index.md

@@ -17,6 +17,28 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 19.0.0-alpha.26 (2026-02-20)
+
+### Breaking
+
+- Created a new `VideoEmbed` component for usage in a video block, helping to fix accessibility issues with the Semantic UI one. @jackahl @iRohitSingh [#6359](https://github.com/plone/volto/issues/6359)
+- Table block is now responsive and can scroll horizontally for non-fixed tables. @sneridagh [#7916](https://github.com/plone/volto/issues/7916)
+
+### Feature
+
+- Allow other sources, including Peertube instances, in the Video block via blocks configuration. @ionlizarazu [#6870](https://github.com/plone/volto/issues/6870)
+
+### Bugfix
+
+- Fix ContentTypeSchema error toast to display only error message instead of stringified JSON object. @Shyam-Raghuwanshi [#7692](https://github.com/plone/volto/issues/7692)
+- Fix missing i18n and a11y id for facet widget of Search block. @IFlameing 
+
+### Internal
+
+- Added Vitest coverage for `.well-known` public asset handling and corrected a test import path in volto-razzle. @Kathrina-dev [#7868](https://github.com/plone/volto/issues/7868)
+- Use `getSlateEditorAndType` in `03-block-slate.js` to make the test more robust. @wesleybl [#7924](https://github.com/plone/volto/issues/7924)
+- Add CI check for volto-razzle changelog. @davisagli 
+
 ## 19.0.0-alpha.25 (2026-02-13)
 
 ### Feature

packages/components/CHANGELOG.md

@@ -8,6 +8,25 @@
 
 <!-- towncrier release notes start -->
 
+## 4.0.0-alpha.6 (2026-02-20)
+
+### Feature
+
+- Added Spinner component. @sneridagh [#7918](https://github.com/plone/volto/issues/7918)
+- Added width (layout) icon components (and related SVGs). @sneridagh
+
+## 4.0.0-alpha.5 (2025-12-23)
+
+### Feature
+
+- Quanta, Tailwind styled `Toolbar` component. @sneridagh [#7549](https://github.com/plone/volto/issues/7549)
+
+### Internal
+
+- Include other *.md files in the repo root for link checking, fix redirecting links, and remove non-responsive server. @stevepiercy [#7712](https://github.com/plone/volto/issues/7712)
+- Add storybook for lots of items with custom separator. @iFlameing
+- Fixed update to RAC 1.14.0 DTS problems. @sneridagh
+
 ## 4.0.0-alpha.4 (2025-11-19)
 
 ### Bugfix
@@ -18,7 +37,7 @@
 
 ### Bugfix
 
-- Fixed `Icon` component return type since it was breaking in some builds. @sneridagh 
+- Fixed `Icon` component return type since it was breaking in some builds. @sneridagh
 
 ## 4.0.0-alpha.2 (2025-11-12)
 
@@ -27,7 +46,7 @@
 - Added ESlint Tailwind plugin for prettifying and wrapping up the classNames in components.
   Amended components classNames by applying the plugin. @sneridagh [#7434](https://github.com/plone/volto/issues/7434)
 - Added `Radio` component to basic set of components, proxied from RAC. @sneridagh [#7555](https://github.com/plone/volto/issues/7555)
-- Added RSC compatibility. @pnicolli 
+- Added RSC compatibility. @pnicolli
 
 ### Bugfix
 
@@ -162,7 +181,7 @@
 
 ### Internal
 
-- Improve packaging and bring back the export for `src` folder. @sneridagh 
+- Improve packaging and bring back the export for `src` folder. @sneridagh
 
 ## 2.1.0 (2024-11-05)
 
@@ -174,7 +193,7 @@
 
 ### Internal
 
-- Release 2.0.0 @sneridagh 
+- Release 2.0.0 @sneridagh
 
 ## 2.0.0-alpha.16 (2024-10-18)
 

packages/components/README.md

@@ -5,7 +5,7 @@
 [![Build Status](https://github.com/plone/components/actions/workflows/unit.yml/badge.svg)](https://github.com/plone/components/actions)
 [![Build Status](https://app.readthedocs.org/projects/plone-components/badge/?version=latest)](https://plone-components.readthedocs.io/latest/)
 
-This package contains React components for using Plone as a headless CMS.
+This package contains ReactJS components for using Plone as a headless CMS.
 
 The purpose of this package is to provide an agnostic set of baseline components to build sites upon.
 

packages/components/package.json

@@ -8,7 +8,7 @@
     }
   ],
   "license": "MIT",
-  "version": "4.0.0-alpha.4",
+  "version": "4.0.0-alpha.6",
   "repository": {
     "type": "git",
     "url": "http://github.com/plone/volto.git",

packages/components/src/components/Spinner/Spinner.quanta.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Spinner } from './Spinner.quanta';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+  title: 'Quanta/Spinner',
+  component: Spinner,
+  parameters: {
+    layout: 'centered',
+    backgrounds: { disable: true },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Loading content',
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4" aria-label="Spinner sizes">
+      <Spinner size="xs" />
+      <Spinner size="sm" />
+      <Spinner size="lg" />
+      <Spinner size={40} />
+    </div>
+  ),
+};
+
+export const Decorative: Story = {
+  args: {
+    isDecorative: true,
+  },
+};

packages/components/src/components/Spinner/Spinner.quanta.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import clsx from 'clsx';
+import { tv } from 'tailwind-variants';
+
+type SpinnerSize = 'xs' | 'sm' | 'lg';
+
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: SpinnerSize | number | string;
+  label?: string | null;
+  isDecorative?: boolean;
+}
+
+const wrapperStyles = tv({
+  base: 'inline-flex items-center gap-2 text-quanta-iron',
+});
+
+const spinnerStyles = tv({
+  base: `
+    animate-spin
+    motion-reduce:animate-none
+  `,
+  variants: {
+    size: {
+      xs: 'size-4',
+      sm: 'size-6',
+      lg: 'size-8',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+});
+
+function isPresetSize(size: SpinnerProps['size']): size is SpinnerSize {
+  return size === 'xs' || size === 'sm' || size === 'lg';
+}
+
+function resolveCustomSize(size: SpinnerProps['size']) {
+  if (typeof size === 'number') return `${size}px`;
+  if (typeof size === 'string' && !isPresetSize(size)) {
+    return size;
+  }
+  return undefined;
+}
+
+export function Spinner({
+  size = 'sm',
+  label = null,
+  isDecorative = false,
+  className,
+  style,
+  'aria-label': ariaLabelProp,
+  ...props
+}: SpinnerProps) {
+  const hasLabel =
+    !isDecorative && typeof label === 'string' && label.length > 0;
+  const ariaLabel = isDecorative
+    ? undefined
+    : ariaLabelProp ??
+      (typeof label === 'string' && label.length > 0 ? label : 'Loading');
+  const customSize = resolveCustomSize(size);
+  const presetSize = isPresetSize(size) ? size : 'sm';
+
+  return (
+    <div
+      {...props}
+      className={wrapperStyles({ className: clsx(className) })}
+      style={style}
+      aria-label={ariaLabel}
+      {...(isDecorative
+        ? { 'aria-hidden': true }
+        : { role: 'status', 'aria-live': 'polite' })}
+    >
+      <svg
+        className={spinnerStyles({ size: presetSize })}
+        style={
+          customSize
+            ? ({ width: customSize, height: customSize } as React.CSSProperties)
+            : undefined
+        }
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+      >
+        <circle
+          cx="12"
+          cy="12"
+          r="9"
+          stroke="currentColor"
+          strokeWidth="3"
+          opacity="0.2"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r="9"
+          stroke="currentColor"
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeDasharray="42 57"
+        />
+      </svg>
+      {hasLabel && <span className="text-sm">{label}</span>}
+    </div>
+  );
+}

packages/components/src/components/Spinner/Spinner.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Spinner } from './Spinner';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof Spinner> = {
+  title: 'Basic/Spinner',
+  component: Spinner,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Loading content',
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div
+      style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}
+      aria-label="Spinner sizes"
+    >
+      <Spinner size="xs" />
+      <Spinner size="sm" />
+      <Spinner size="lg" />
+      <Spinner size={40} />
+    </div>
+  ),
+};
+
+export const Decorative: Story = {
+  args: {
+    isDecorative: true,
+  },
+};

packages/components/src/components/Spinner/Spinner.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { Spinner } from './Spinner';
+
+expect.extend(toHaveNoViolations);
+
+it('Spinner basic a11y test', async () => {
+  const { container } = render(<Spinner />);
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+  expect(screen.getByRole('status')).toBeInTheDocument();
+});
+
+it('Spinner decorative mode is hidden from assistive tech', () => {
+  render(<Spinner isDecorative data-testid="spinner" />);
+  expect(screen.getByTestId('spinner')).toHaveAttribute('aria-hidden', 'true');
+});