@stihl-design-system/components 1.0.0-RC.41 → 1.0.0-RC.43

package/chunks/Toast.Ck4woVuy.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as C, jsxs as j } from "react/jsx-runtime";
+import { d as E } from "./index.cKLI89Eg.js";
+import { c as W } from "./index.DQOqod3i.js";
+import { forwardRef as L } from "react";
+import { D as M } from "./Button.BdqkFovu.js";
+import { D as O } from "./Icon.BoxUJQDT.js";
+import '../assets/Toast.CGl8z6mX.css';const P = "ds-toast_root_1k9pu_5", z = "ds-toast_root--closing_1k9pu_15", A = "ds-toast_root--success_1k9pu_66", R = "ds-toast_root--info_1k9pu_70", $ = "ds-toast_root--warning_1k9pu_74", q = "ds-toast_content_1k9pu_79", F = "ds-toast_content--hide-icon_1k9pu_86", G = "ds-toast_icon_1k9pu_90", J = "ds-toast_message_1k9pu_94", s = {
+  root: P,
+  rootClosing: z,
+  rootSuccess: A,
+  rootInfo: R,
+  rootWarning: $,
+  content: q,
+  contentHideIcon: F,
+  icon: G,
+  message: J
+}, K = {
+  success: "circle-check-colored",
+  warning: "triangle-exclamationmark-colored",
+  info: "circle-info-colored"
+}, Q = L((D, b) => {
+  const o = E.c(44);
+  let e, n, t, c, a, l, i, k, h;
+  o[0] !== D ? ({
+    message: t,
+    className: e,
+    closeButtonProps: n,
+    hideIcon: k,
+    variant: h,
+    onClick: c,
+    onMouseEnter: a,
+    onMouseLeave: l,
+    ...i
+  } = D, o[0] = D, o[1] = e, o[2] = n, o[3] = t, o[4] = c, o[5] = a, o[6] = l, o[7] = i, o[8] = k, o[9] = h) : (e = o[1], n = o[2], t = o[3], c = o[4], a = o[5], l = o[6], i = o[7], k = o[8], h = o[9]);
+  const r = k === void 0 ? !1 : k, d = h === void 0 ? "info" : h;
+  let m;
+  o[10] !== n ? (m = n || {}, o[10] = n, o[11] = m) : m = o[11];
+  let _, v;
+  o[12] !== m ? ({
+    label: v,
+    ..._
+  } = m, o[12] = m, o[13] = _, o[14] = v) : (_ = o[13], v = o[14]);
+  const x = v === void 0 ? "Close toast" : v, w = d === "success", T = d === "warning", y = d === "info";
+  let I;
+  o[15] !== e || o[16] !== w || o[17] !== T || o[18] !== y ? (I = W(s.root, e, {
+    [s.rootSuccess]: w,
+    [s.rootWarning]: T,
+    [s.rootInfo]: y
+  }), o[15] = e, o[16] = w, o[17] = T, o[18] = y, o[19] = I) : I = o[19];
+  const B = I;
+  let N;
+  o[20] !== r ? (N = W(s.content, {
+    [s.contentHideIcon]: r
+  }), o[20] = r, o[21] = N) : N = o[21];
+  const H = N;
+  let u;
+  o[22] !== r || o[23] !== d ? (u = !r && /* @__PURE__ */ C(O, { name: K[d], className: s.icon, "aria-hidden": "true" }), o[22] = r, o[23] = d, o[24] = u) : u = o[24];
+  let f;
+  o[25] !== t ? (f = /* @__PURE__ */ C("div", { className: s.message, children: t }), o[25] = t, o[26] = f) : f = o[26];
+  let p;
+  o[27] !== x || o[28] !== c || o[29] !== _ ? (p = /* @__PURE__ */ C(M, { ..._, hideLabel: !0, iconName: "cross", size: "small", variant: "ghost", onClick: c, type: "button", children: x }), o[27] = x, o[28] = c, o[29] = _, o[30] = p) : p = o[30];
+  let g;
+  o[31] !== H || o[32] !== u || o[33] !== f || o[34] !== p ? (g = /* @__PURE__ */ j("div", { className: H, children: [
+    u,
+    f,
+    p
+  ] }), o[31] = H, o[32] = u, o[33] = f, o[34] = p, o[35] = g) : g = o[35];
+  let S;
+  return o[36] !== t || o[37] !== a || o[38] !== l || o[39] !== b || o[40] !== i || o[41] !== B || o[42] !== g ? (S = /* @__PURE__ */ C("aside", { className: B, ref: b, popover: "manual", "data-ds-toast": !0, onMouseEnter: a, onMouseLeave: l, "aria-label": t, ...i, children: g }), o[36] = t, o[37] = a, o[38] = l, o[39] = b, o[40] = i, o[41] = B, o[42] = g, o[43] = S) : S = o[43], S;
+});
+Q.displayName = "DSToast";
+export {
+  Q as D,
+  s
+};

package/chunks/battery-return.tBu7C6Q7.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const h = ({
+  title: t,
+  titleId: l,
+  ...a
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": l, ...a }, t ? /* @__PURE__ */ e.createElement("title", { id: l }, t) : null, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { d: "M14 2h2v14h-4v-2h2V4h-4v2.035H8V2h2V0h4z" }), /* @__PURE__ */ e.createElement("path", { d: "m5.428 9.39-1.62 1.62 5.197-.005v-.997L7 9.995V8l4 .013V13l-7.191.005 1.619 1.597L4 16l-4.01-3.992L4 8z" })));
+export {
+  h as default
+};

package/chunks/cookie.U09gK6it.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const m = ({
+  title: a,
+  titleId: t,
+  ...l
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...l }, a ? /* @__PURE__ */ e.createElement("title", { id: t }, a) : null, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { d: "M7.854.023a3.726 3.726 0 0 0 5.11 3.458 3.726 3.726 0 0 0 2.986 3.633q.049.435.05.884A8.001 8.001 0 1 1 7.854 0zM6.3 2.243A6.001 6.001 0 0 0 8 14a6 6 0 0 0 5.977-5.496 5.74 5.74 0 0 1-2.54-2.759A5.73 5.73 0 0 1 6.3 2.243m.035 7.205a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3.785-1.097a1 1 0 1 1 0 2 1 1 0 0 1 0-2M5.75 5.68a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m9.414-2.931a.75.75 0 1 1-.001 1.501.75.75 0 0 1 .001-1.501M10.75 0a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m2.914 0a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5" })));
+export {
+  m as default
+};

package/chunks/credit-card.BmIN7RQ3.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const r = ({
+  title: t,
+  titleId: a,
+  ...l
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": a, ...l }, t ? /* @__PURE__ */ e.createElement("title", { id: a }, t) : null, /* @__PURE__ */ e.createElement("path", { d: "M16 14H0V2h16zM2 12h12V7H2zm6.5-1H3V8.5h5.5zM2 5h12V4H2z" }));
+export {
+  r as default
+};

package/chunks/legal-info.-S9gzFzc.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const h = ({
+  title: l,
+  titleId: a,
+  ...t
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": a, ...t }, l ? /* @__PURE__ */ e.createElement("title", { id: a }, l) : null, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ e.createElement("path", { d: "M13 14v2H3v-2zm-4-1H7V4h2z" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "M8.85 1H15v2h-1l2 5a3.003 3.003 0 0 1-6 0l2-5H4l2 5a3.003 3.003 0 0 1-6 0l2-5H1V1h6.15l.15-1h1.4zM2.072 8H3.82L3 5.5zm10 0h1.747L13 5.5z", clipRule: "evenodd" })));
+export {
+  h as default
+};

package/chunks/legal.CVCmbA3m.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const a = ({
+  title: l,
+  titleId: c,
+  ...t
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": c, ...t }, l ? /* @__PURE__ */ e.createElement("title", { id: c }, l) : null, /* @__PURE__ */ e.createElement("path", { d: "M7.767 15.498c-1.935 0-3.3-.899-4.008-1.935L5.59 12.25c.415.605 1.071 1.14 2.056 1.14 1.002 0 1.295-.38 1.295-.708 0-.398-.276-.605-1.174-1.037l-1.918-.898c-1.52-.708-2.246-1.52-2.246-2.799 0-1.382.83-1.97 1.71-2.28-.466-.553-.725-1.21-.725-2.021 0-1.71 1.261-3.145 3.507-3.145 1.71 0 2.643.76 3.317 1.745l-1.9 1.279c-.484-.743-.899-.933-1.417-.933-.708 0-1.002.484-1.002.915 0 .467.173.778.916 1.123l1.917.881c1.71.795 2.47 1.676 2.47 3.04 0 1.158-.656 1.85-1.64 2.281.466.553.69 1.192.69 1.9 0 1.676-1.364 2.765-3.68 2.765M9.46 9.78c.397-.19.604-.467.604-.864 0-.622-.397-.847-1.14-1.192l-1.917-.881-.415-.208c-.346.139-.657.38-.657.847 0 .518.294.743.899 1.02l1.917.897c.26.121.501.242.709.38" }));
+export {
+  a as default
+};

package/chunks/present.B4ImIJxi.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const h = ({
+  title: l,
+  titleId: t,
+  ...c
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...c }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "M2.857 1.242c.95-1.521 3.264-1.675 4.44-.295l.698.82.698-.819c1.176-1.38 3.49-1.227 4.44.294l.083.144c.478.891.314 1.896-.282 2.614H16v6h-1.005v6h-14v-6H0V4h3.057c-.597-.718-.761-1.724-.283-2.615zM8.995 14h4v-4h-4zm-6 0h4v-4h-4zm6-6.034h5.002V6.034H8.995zm-6.991 0h4.991V6.034H2.004zm3.732-5.884c-.307-.36-.911-.32-1.16.077-.248.398.017.9.508.966l1.577.21.07-.084zm5.678.077c-.249-.397-.853-.437-1.16-.076L9.258 3.25l.071.084 1.577-.21c.492-.065.756-.568.508-.966", clipRule: "evenodd" }));
+export {
+  h as default
+};

package/chunks/return-package.Bt9FUc42.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const n = ({
+  title: l,
+  titleId: t,
+  ...a
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 17 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "m9.36 0 6.65 2.826v7.764l-3.538 1.428V9.89l1.535-.61V5.023l-3.645 1.53V7H8.358v-.446l-3.643-1.53V7H2.71V2.826zm0 4.842 3.13-1.321-3.13-1.322-3.13 1.322z", clipRule: "evenodd" }), /* @__PURE__ */ e.createElement("path", { d: "m4.01 8 1.442 1.379-1.624 1.623L9.011 11v-1H7.034V8h3.977v5.002H3.828l1.624 1.623L4.011 16 0 12.002z" }));
+export {
+  n as default
+};

package/{combobox.DzSEFo_5.js → combobox.zkQtaMOE.js}

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as z } from "react/jsx-runtime";
 import { d as G } from "./chunks/index.cKLI89Eg.js";
-import { v as H, c as J } from "./chunks/CustomReactSelect.DBsnmMPl.js";
+import { v as H, c as J } from "./chunks/CustomReactSelect.Dtf3mXJ_.js";
 import { forwardRef as K } from "react";
 const Q = K((N, S) => {
   const t = G.c(38);

package/components/ActionButton/ActionButton.d.ts

@@ -6,7 +6,7 @@ export interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElemen
     /** Content within the button. */
     children: React.ReactNode;
     /** ARIA attributes to enhance accessibility
-     *  `{'aria-label'? string;`
+     *  `{'aria-label'?: string;`
      *  `'aria-expanded'?: boolean | 'true' | 'false';`
      *  `'aria-pressed'?: boolean | 'true' | 'false' | 'mixed';`
      *  `'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';}`

package/components/ActionCard/ActionCard.d.ts

@@ -0,0 +1,75 @@
+import { AnchorHTMLAttributes, HTMLAttributes, MouseEventHandler, default as React } from 'react';
+import { SelectedAriaAttributes } from '../../types';
+import { ActionCardAriaAttributes } from './ActionCard.utils';
+export interface ActionCardProps extends HTMLAttributes<HTMLElement> {
+    /** ARIA attributes to ensure accessibility. 'aria-labelledby' OR 'aria-label' is required.
+     *
+     *  `{'aria-label'? string;`
+     *  `'aria-labelledby'?: string;}`
+     * */
+    aria: SelectedAriaAttributes<ActionCardAriaAttributes>;
+    /** Child areas to render within the card. */
+    children: React.ReactNode;
+    /** Additional class name to apply to the content wrapper element. */
+    classNameContentWrapper?: string;
+    /**
+     * Sets the orientation of the card.
+     * @default 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Sets the padding for the content inside the card.
+     * @default 'medium'
+     */
+    padding?: 'small' | 'medium';
+}
+/** Props for any "slot" component */
+export interface ActionCardSlotProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Props for the PrimaryAction slot.
+ * Supports both links (href) and buttons (onClick), as well as custom link components
+ * (e.g., react-router Link) via the linkComponent prop.
+ */
+export interface PrimaryActionSlotProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'children'> {
+    /**
+     * Accessible label for the primary action. This is visually hidden but read by screen readers.
+     * Should describe where the link/button navigates to or what action it performs.
+     */
+    children: React.ReactNode;
+    /** Additional class name for styling. */
+    className?: string;
+    /** URL for the primary action when used as a link. */
+    href?: string;
+    /**
+     * Custom link component (e.g., react-router Link, Next.js Link).
+     * When provided, `href` is ignored and the linkComponent handles navigation.
+     */
+    linkComponent?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement> & {
+        onClick?: () => void;
+        to?: string;
+    }>;
+    /** Click handler when used as a button. If provided without href, renders as a button. */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+/** Compound type for ActionCard with its static slots */
+interface ActionCardComponent extends React.FC<ActionCardProps> {
+    Header: React.FC<ActionCardSlotProps>;
+    Content: React.FC<ActionCardSlotProps>;
+    Footer: React.FC<ActionCardSlotProps>;
+    Media: React.FC<ActionCardSlotProps>;
+    PrimaryAction: React.FC<PrimaryActionSlotProps>;
+    Supplementary: React.FC<ActionCardSlotProps>;
+}
+/**
+ * A flexible card component that can display various types of content and media. It renders a semantic `<article>` element as non-clickable container that groups interactive and non-interactive elements.
+ *
+ * - Slot-based structure: configurable slots (media, header, footer & supplementary) that can be customized.
+ * - Internal interactions only: interactive elements (e.g. CTAs) inside the card are clickable and focusable.
+ *
+ * Design in Figma: [Action Card](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/branch/NUiDfjIK57Feko6GSHYeXz/Core-Components-%F0%9F%92%A0?node-id=44233-30708&t=ZEFsgMD8yluu9OXi-11)
+ */
+export declare const DSActionCard: ActionCardComponent;
+export {};

package/components/ActionCard/ActionCard.utils.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { ActionCardProps, ActionCardSlotProps } from './ActionCard';
+export type ActionCardAriaAttributes = 'aria-label' | 'aria-labelledby';
+type ValidationProps = Pick<ActionCardProps, 'aria'> & {
+    cardElement: HTMLElement | null;
+};
+export declare const validateActionCardProps: ({ aria, cardElement, }: ValidationProps) => void;
+/**
+ * Filters a React children collection and returns only elements of a given slot type.
+ *
+ * Why needed: In production builds, `component.type` identity can differ due to
+ * bundling/minification. To stay robust, we match either by strict identity or by
+ * `displayName`/`name` so slot detection works reliably.
+ *
+ * Notes:
+ * - Only valid React elements are considered; primitives (strings, numbers, etc.) are ignored.
+ * - Returns a new array of React elements; original children are not mutated.
+ *
+ * @param sourceChildren React node(s) to search within (usually `children`).
+ * @param target The slot component to match (e.g., `Header`, `Footer`).
+ * @returns An array of matching React elements of the desired slot type.
+ */
+export declare const getChildrenOfType: (sourceChildren: React.ReactNode, target: React.ComponentType<ActionCardSlotProps>) => React.ReactElement[];
+export {};

package/components/AriaLiveRegions/AriaLiveRegions.d.ts

@@ -1,5 +1,26 @@
 import { JSX } from 'react';
+export interface AriaLiveRegionsProps {
+    /**
+     * Enables micro-frontend / Web Component integration mode.
+     *
+     * When `true`, the component:
+     * - Renders nothing in the React tree (returns `null`).
+     * - Synchronously injects the live regions directly under `document.body`.
+     * - No-ops if the regions already exist (idempotent).
+     *
+     * Use this mode when:
+     * - Multiple independent micro-frontends may exist on the same page.
+     * - You cannot guarantee placement close to `<body>` in the React tree.
+     *
+     * The injection happens during React's commit phase (via `useInsertionEffect` or
+     * `useLayoutEffect`), ensuring regions exist before any dependent component's
+     * effects run.
+     *
+     * @default false
+     */
+    microFrontendMode?: boolean;
+}
 /**
  * A component that provides hidden ARIA live regions for accessibility, allowing screen readers to announce changes dynamically.
  */
-export declare const DSAriaLiveRegions: () => JSX.Element;
+export declare const DSAriaLiveRegions: ({ microFrontendMode, }: AriaLiveRegionsProps) => JSX.Element | null;

package/components/AriaLiveRegions/AriaLiveRegions.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/AriaLiveRegions/AriaLiveRegions.utils.d.ts

@@ -3,3 +3,109 @@ export declare const ARIA_LIVE_REGION_STATUS_ID = "ds-status-live-region";
 export declare const getAriaAlertLiveRegionElement: () => HTMLElement | null | undefined;
 export declare const getAriaStatusLiveRegionElement: () => HTMLElement | null | undefined;
 export declare const validateMultipleDSAriaLiveRegionsOnPage: () => void;
+/**
+ * Ensures the two DS live regions exist exactly once on the page, directly under <body>.
+ * - If both exist: no-op.
+ * - If none exist: injects them under document.body.
+ * - If only one exists: throws (broken page state).
+ * - If duplicates exist: throws (existing validation).
+ *
+ * ## Background: Micro-Frontend / AEM Web Component Support
+ *
+ * This function was introduced to support complex hosting environments where React components
+ * are compiled into Web Components and embedded via systems like AEM (Adobe Experience Manager).
+ *
+ * In these setups:
+ * - React components become self-contained widgets, not full SPAs
+ * - Multiple independent micro-frontends may exist on a single page
+ * - Each micro-frontend has its own encapsulated React/VDOM render process
+ * - Web Components render sequentially based on DOM registration order
+ * - Shadow DOM is typically disabled, so elements are detectable across components
+ *
+ * ### The Problem
+ *
+ * The standard `<DSAriaLiveRegions />` placement guideline ("as close to `<body>` as possible")
+ * is impossible to follow when components can only be placed at the root of each Web Component
+ * wrapper, not the actual document body. This creates two failure modes:
+ *
+ * 1. **Missing live regions**: If no static HTML snippet exists and the component isn't rendered,
+ *    dependent components (DSChipGroup, DSToast, etc.) throw errors.
+ * 2. **Duplicate live regions**: Multiple Web Components each rendering their own live regions
+ *    creates invalid HTML (duplicate IDs) and unpredictable screen reader behavior.
+ *
+ * ### Why Placement Matters for Accessibility
+ *
+ * A mode that allows `DSAriaLiveRegions` to render inside arbitrary micro-frontend wrappers
+ * is risky for accessibility. Those wrappers can later become `aria-hidden`, `inert`, `hidden`,
+ * or be moved under a `<dialog>`, and at that point announcements can become intermittent or
+ * stop entirely across screen readers. This is exactly why the requirement to place live regions
+ * as close to `<body>` as possible exists.
+ *
+ * Additionally, treating duplicates as "warn and keep going" is not harmless. As soon as
+ * duplicate IDs exist, `getElementById()` effectively selects one instance based on document
+ * order. If that instance lives in a subtree that later becomes hidden, announcements will
+ * silently break even though "a live region exists somewhere" on the page.
+ *
+ * ### The Solution: `microFrontendMode`
+ *
+ * Instead of rendering where mounted (which could be inside problematic wrappers), this mode:
+ *
+ * 1. **Renders nothing locally** - The component returns `null`
+ * 2. **Injects directly under `document.body`** - Guarantees correct placement regardless of
+ *    where the component is used in the React tree
+ * 3. **Is idempotent** - Whichever MFE instance runs first installs the body-level regions,
+ *    all subsequent calls no-op safely
+ * 4. **Maintains strict validation** - True duplicates remain a hard error
+ *
+ * This provides rollout safety for MFEs and templates without compromising accessibility
+ * correctness. The exact render order doesn't matter as long as the logic is idempotent
+ * and synchronous.
+ *
+ * ### Recommended Integration Pattern
+ *
+ * 1. **Ideal**: Add static HTML live regions to the root `index.html` or AEM page template
+ * 2. **Fallback**: Use `<DSAriaLiveRegions microFrontendMode />` at the root of each
+ *    micro-frontend as a self-healing fallback
+ *
+ * With this pattern:
+ * - If static HTML exists, all `microFrontendMode` instances no-op
+ * - If no static HTML exists, the first MFE to render installs the regions
+ * - Subsequent MFEs detect the existing regions and no-op
+ * - No duplicates, no missing regions, no placement issues
+ */
+export declare const ensureAriaLiveRegions: (srOnlyClassName: string) => void;
+/**
+ * Gets the alert live region element if present on the page and returns it.
+ * Throws an error with the component name if the element is not found.
+ *
+ * @param componentName - The component name for error messages if live region is missing
+ * @returns The alert live region HTMLElement
+ * @throws Error if the alert live region element is not found
+ */
+export declare const getAlertLiveRegionOrThrow: (componentName: string) => HTMLElement;
+/**
+ * Gets the status live region element if present on the page and returns it.
+ * Throws an error with the component name if the element is not found.
+ *
+ * @param componentName - The component name for error messages if live region is missing
+ * @returns The status live region HTMLElement
+ * @throws Error if the status live region element is not found
+ */
+export declare const getStatusLiveRegionOrThrow: (componentName: string) => HTMLElement;
+/**
+ * Sets a message to the alert live region (role="alert", aria-live="assertive").
+ * Use for urgent announcements that should interrupt the user (e.g., warnings, errors).
+ *
+ * @param message - The message to announce
+ * @param componentName - The component name for error messages if live region is missing
+ */
+export declare const setAriaAlertMessage: (message: string, componentName: string) => void;
+/**
+ * Sets a message to the status live region (role="status", aria-live="polite").
+ * Use for non-urgent announcements that should wait for user pause (e.g., status updates, success messages).
+ * The message is automatically cleared after a short delay.
+ *
+ * @param message - The message to announce
+ * @param componentName - The component name for error messages if live region is missing
+ */
+export declare const setAriaStatusMessage: (message: string, componentName: string) => void;

package/components/Breadcrumb/Breadcrumb.d.ts

@@ -14,7 +14,7 @@ export interface BreadcrumbLink {
 export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
     /** ARIA attributes to ensure accessibility
      *
-     *  `{'aria-label'? string;`
+     *  `{'aria-label'?: string;`
      *  `'aria-labelledby'?: string;}`
      * */
     aria: SelectedAriaAttributes<BreadcrumbAriaAttributes>;

package/components/Button/Button.d.ts

@@ -6,7 +6,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Content within the button. */
     children: React.ReactNode;
     /** ARIA attributes to enhance accessibility
-     *  `{'aria-label'? string;`
+     *  `{'aria-label'?: string;`
      *  `'aria-expanded'?: boolean | 'true' | 'false';`
      *  `'aria-pressed'?: boolean | 'true' | 'false' | 'mixed';`
      *  `'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';}`

package/components/ChipGroup/ChipGroup.utils.d.ts

@@ -2,7 +2,6 @@ import { IconName } from '../../types';
 import { ChipGroupProps } from './ChipGroup';
 type ValidationProps = Pick<ChipGroupProps, 'chips' | 'id' | 'label'>;
 export declare const validateChipGroupProps: ({ chips, id, label, }: ValidationProps) => void;
-export declare const validateIsLiveRegionPresent: () => void;
 export interface Chip {
     /** Unique id for the Chip. */
     id: string | number;
@@ -27,6 +26,9 @@ export type ChipGroupAriaTranslations = typeof DS_CHIP_GROUP_TRANSLATIONS_EN;
 export declare const DS_CHIP_GROUP_TRANSLATIONS_EN: {
     disabled: string;
     selected: string;
+    notSelected: string;
+    removed: string;
+    remaining: string;
     selectChip: string;
     unselectAction: string;
     selectAction: string;
@@ -37,22 +39,19 @@ export declare const DS_CHIP_GROUP_TRANSLATIONS_EN: {
     tooltipRemovable: string;
     tooltipDeactivate: string;
     tooltipActivate: string;
+    item_one: string;
+    item_other: string;
+    countSelected: string;
+    countRemaining: string;
 };
-export declare const DS_CHIP_GROUP_TRANSLATIONS_DE: {
-    disabled: string;
-    selected: string;
-    selectChip: string;
-    unselectAction: string;
-    selectAction: string;
-    addToSelection: string;
-    removeFromSelection: string;
-    removeChip: string;
-    tooltipDisabled: string;
-    tooltipRemovable: string;
-    tooltipDeactivate: string;
-    tooltipActivate: string;
-};
+export declare const DS_CHIP_GROUP_TRANSLATIONS_DE: ChipGroupAriaTranslations;
 export declare const DS_CHIP_GROUP_TRANSLATIONS: Record<ChipGroupLanguage, ChipGroupAriaTranslations>;
 export declare const getChipAriaLabel: (t: (key: keyof ChipGroupAriaTranslations, replacements?: string[]) => string, label: string, disabled: boolean | undefined, isSelected: boolean | undefined, selectionMode: ChipGroupSelectionMode, isRemovable: boolean | undefined) => string;
 export declare const getChipTooltip: (t: (key: keyof ChipGroupAriaTranslations, replacements?: string[]) => string, disabled: boolean | undefined, isSelected: boolean | undefined, isRemovable: boolean | undefined) => string;
+/**
+ * Helper to get the correct plural form for item count.
+ * @param count - The number of items
+ * @returns The appropriate plural form (item_one or item_other)
+ */
+export declare const getItemPlural: (t: (key: keyof ChipGroupAriaTranslations, replacements?: string[]) => string, count: number) => string;
 export {};

package/components/Icon/Icon.d.ts

@@ -3,7 +3,7 @@ import { IconName, SelectedAriaAttributes, Theme } from '../../types';
 import { IconAriaAttribute, IconSize } from './Icon.utils';
 export interface IconProps {
     /** ARIA attributes to enhance accessibility.
-     * `{'aria-label'? string;}`
+     * `{'aria-label'?: string;}`
      */
     aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /** Name of the icon to display.

package/components/InputFile/FileList/FileList.d.ts

@@ -0,0 +1,14 @@
+import { JSX } from 'react';
+import { FileWithUploadMeta } from '../InputFile';
+import { InputFileTranslations } from '../InputFile.utils';
+import { ProgressIndicatorVariant } from './ProgressIndicator/ProgressIndicator';
+export interface FileListProps {
+    /**
+     * List of files to display in the file list, each with upload metadata.
+     */
+    files: FileWithUploadMeta[];
+    onRemoveFile: (index: number) => void;
+    t: (key: keyof InputFileTranslations, replacements?: string[]) => string;
+    showProgress?: ProgressIndicatorVariant;
+}
+export declare const FileList: ({ files, onRemoveFile, t, showProgress, }: FileListProps) => JSX.Element;

package/components/InputFile/FileList/FileList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/{FileList → InputFile/FileList}/FileList.utils.d.ts

@@ -10,9 +10,3 @@
  * formatFileSize(10485760); // "10 mb"
  */
 export declare const formatFileSize: (fileSizeInBytes: number) => string;
-export declare const FILE_ICON_EXTENSIONS: {
-    nonDisplayableImages: string[];
-    documents: string[];
-    videos: string[];
-    archives: string[];
-};

package/components/InputFile/FileList/FileList.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/InputFile/FileList/FilePreview/FilePreview.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react';
+import { InputFileTranslations } from '../../InputFile.utils';
+export interface FilePreviewProps {
+    /**
+     * The file object to preview. Used to determine file type and generate preview.
+     */
+    file: File;
+    t: (key: keyof InputFileTranslations, replacements?: string[]) => string;
+}
+/**
+ * Renders a preview for a file based on its type and extension.
+ * For displayable images, shows an actual image preview with error fallback.
+ * For other file types, shows an appropriate icon.
+ */
+export declare const FilePreview: ({ file, t }: FilePreviewProps) => JSX.Element;

package/components/InputFile/FileList/FilePreview/FilePreview.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/InputFile/FileList/FilePreview/FilePreview.utils.d.ts

@@ -0,0 +1,11 @@
+import { IconProps } from '../../../Icon/Icon';
+export declare const FILE_ICON_EXTENSIONS: {
+    nonDisplayableImages: string[];
+    documents: string[];
+    videos: string[];
+    archives: string[];
+};
+/**
+ * Determines the appropriate icon name for a file based on its type and extension.
+ */
+export declare const getFileIconName: (file: File, fileExtension: string) => IconProps["name"];

package/components/InputFile/FileList/FilePreview/FilePreview.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/InputFile/FileList/ProgressIndicator/ProgressIndicator.d.ts

@@ -0,0 +1,34 @@
+import { JSX } from 'react';
+import { InputFileTranslations } from '../../InputFile.utils';
+export type ProgressIndicatorStatus = 'uploading' | 'error';
+export type ProgressIndicatorVariant = 'bar' | 'text';
+export interface ProgressIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    id: string;
+    fileName: string;
+    /**
+     * Upload progress percentage; 'indeterminate' for unknown progress
+     * or a number between 0 and 100
+     * */
+    percent: 'indeterminate' | number;
+    /**
+     * Current status of the progress indicator 'uploading' or 'error'.
+     * Success does not display a progress bar / text but a SystemFeedbackMessage.
+     * */
+    progressStatus: ProgressIndicatorStatus;
+    /**
+     * Variant of the progress indicator to display: 'bar' or 'text'
+     */
+    variant: ProgressIndicatorVariant;
+    t: (key: keyof InputFileTranslations, replacements?: string[]) => string;
+}
+/**
+ * Accessible progress indicator for file uploads.
+ *
+ * A11y decisions:
+ * - The root element carries role="progressbar" per WAI-ARIA Authoring Practices.
+ * - We assume the `percent` prop is always a valid integer between 0 and 100 (validated upstream), so no clamping here.
+ * - `aria-valuemin` and `aria-valuemax` are omitted; defaults (0 and 100) are implicit for a percentage UI.
+ * - `aria-valuenow` reflects the provided percent value.
+ * - Visual percentage text remains for sighted users; screen readers rely on `aria-label` and `aria-valuenow`.
+ */
+export declare const ProgressIndicator: ({ className, fileName, id, percent, progressStatus, variant, t, }: ProgressIndicatorProps) => JSX.Element | null;

package/components/InputFile/FileList/ProgressIndicator/ProgressIndicator.test.d.ts

@@ -0,0 +1 @@
+export {};