@tedi-design-system/react 18.0.0-rc.3 → 18.0.0-rc.30

package/src/tedi/components/cards/card/card.d.ts

@@ -85,6 +85,6 @@ export interface CardProps extends BreakpointSupport<CardBreakpointProps> {
 export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
     Content: (props: CardContentProps) => JSX.Element;
     Header: (props: CardContentProps) => JSX.Element;
-    Notification: (props: import('./card-notification/card-notification').CardNotificationProps) => JSX.Element;
+    Notification: (props: import('.').CardNotificationProps) => JSX.Element;
 };
 export default Card;

package/src/tedi/components/cards/card/card.es.js

@@ -31,6 +31,5 @@ const z = Object.assign(i, {
   Notification: h
 });
 export {
-  z as Card,
-  z as default
+  z as Card
 };

package/src/tedi/components/content/accordion/accordion-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext(null),o=()=>t.useContext(e);exports.AccordionContext=e;exports.useAccordionContext=o;

package/src/tedi/components/content/accordion/accordion-context.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export interface AccordionContextValue {
+    /**
+     * Whether the accordion allows multiple items to be expanded at the same time.
+     */
+    allowMultiple: boolean;
+    /**
+     * Group-level default for items' initial expanded state. Items use this value
+     * when they don't specify their own `defaultExpanded`. Per-item overrides
+     * (including explicit `false`) take precedence.
+     */
+    defaultExpanded: boolean;
+    /**
+     * Called by an AccordionItem after it has updated its expanded state to `true`.
+     * In single-expand mode the Accordion will collapse all other registered items.
+     */
+    notifyExpanded: (id: string) => void;
+    /**
+     * Allows AccordionItem to register itself so that the Accordion can collapse it
+     * when another item is expanded (single-expand mode).
+     *
+     * Returns an unregister callback.
+     */
+    register: (id: string, setExpanded: (value: boolean) => void) => () => void;
+}
+export declare const AccordionContext: React.Context<AccordionContextValue | null>;
+export declare const useAccordionContext: () => AccordionContextValue | null;

package/src/tedi/components/content/accordion/accordion-context.es.js

@@ -0,0 +1,6 @@
+import t from "react";
+const o = t.createContext(null), n = () => t.useContext(o);
+export {
+  o as AccordionContext,
+  n as useAccordionContext
+};

package/src/tedi/components/content/accordion/accordion-item/accordion-item-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),o=t.createContext(null),r=n=>{const e=t.useContext(o);if(!e)throw new Error(`<${n}> must be rendered inside an <Accordion.Item>.`);return e};exports.AccordionItemContext=o;exports.useAccordionItemContext=r;

package/src/tedi/components/content/accordion/accordion-item/accordion-item-context.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+/**
+ * Context exposed by `AccordionItem` to its `Header` and `Content` sub-components.
+ *
+ * The item owns the expanded state, the shared layout flags (`showIconCard`, `selected`)
+ * and the ARIA wiring (`headerId`, `contentId`). Header and content only render
+ * appearance and project user content.
+ */
+export interface AccordionItemContextValue {
+    /** ID of the element acting as the header trigger (used for `aria-labelledby` on content). */
+    headerId: string;
+    /** ID of the content panel (used for `aria-controls` on the trigger). */
+    contentId: string;
+    /** Whether the item is currently expanded. */
+    expanded: boolean;
+    /** Toggles the expanded state. No-op when the item is disabled. */
+    toggle: () => void;
+    /** Whether the icon-card layout is active for this item. */
+    showIconCard: boolean;
+    /** Whether the item is disabled (header is non-interactive, state can't be toggled by user). */
+    disabled: boolean;
+}
+export declare const AccordionItemContext: React.Context<AccordionItemContextValue | null>;
+export declare const useAccordionItemContext: (componentName: string) => AccordionItemContextValue;

package/src/tedi/components/content/accordion/accordion-item/accordion-item-context.es.js

@@ -0,0 +1,11 @@
+import e from "react";
+const n = e.createContext(null), c = (o) => {
+  const t = e.useContext(n);
+  if (!t)
+    throw new Error(`<${o}> must be rendered inside an <Accordion.Item>.`);
+  return t;
+};
+export {
+  n as AccordionItemContext,
+  c as useAccordionItemContext
+};

package/src/tedi/components/content/accordion/accordion-item/accordion-item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),M=require("../../../../../../external/classnames/index.cjs.js"),a=require("react"),i=require("../accordion.module.scss.cjs.js"),N=require("../accordion-context.cjs.js"),O=require("../accordion-item-content/accordion-item-content.cjs.js"),S=require("../accordion-item-header/accordion-item-header.cjs.js"),$=require("./accordion-item-context.cjs.js"),L=u=>typeof u.expanded=="boolean",_=u=>{const{children:w,id:r,defaultExpanded:A,expanded:f,onToggle:t,showIconCard:l=!1,selected:b=!1,iconCard:q,disabled:d=!1,openOnHashMatch:p=!1}=u,v=a.useId(),c=r??v,h=`${c}-header`,I=`${c}-content`,e=N.useAccordionContext(),y=A??(e==null?void 0:e.defaultExpanded)??!1,o=L(u),[j,m]=a.useState(y),s=o?f:j;a.useEffect(()=>{if(!e)return;const n=E=>{o?t==null||t(E):m(E)};return e.register(c,n)},[e,c,o,t]);const C=a.useCallback(()=>{if(d)return;const n=!s;o||m(n),t==null||t(n),n&&(e==null||e.notifyExpanded(c))},[e,c,o,d,s,t]);a.useEffect(()=>{if(!p||!r||d||typeof window>"u")return;const n=()=>{window.location.hash===`#${r}`&&(o?f||t==null||t(!0):m(!0),e==null||e.notifyExpanded(r))};return n(),window.addEventListener("hashchange",n),()=>window.removeEventListener("hashchange",n)},[p,r,d,o,f,t]);const H=a.useMemo(()=>({headerId:h,contentId:I,expanded:s,toggle:C,showIconCard:l,disabled:d}),[h,I,s,C,l,d]),P=M.default(i.default["tedi-accordion__item"],{[i.default["tedi-accordion__item--selected"]]:b,[i.default["tedi-accordion__item--expanded"]]:s,[i.default["tedi-accordion__item--disabled"]]:d,[i.default["tedi-accordion__item--with-icon-card"]]:l});return x.jsx($.AccordionItemContext.Provider,{value:H,children:x.jsxs("div",{"data-name":"accordion-item","data-testid":"tedi-accordion-item",className:P,children:[l&&x.jsx("span",{"data-name":"accordion-icon-card",className:i.default["tedi-accordion__icon-card"],children:q}),w]})})};_.displayName="AccordionItem";const R=Object.assign(_,{Header:S.AccordionItemHeader,Content:O.AccordionItemContent});exports.AccordionItem=R;

package/src/tedi/components/content/accordion/accordion-item/accordion-item.d.ts

@@ -0,0 +1,76 @@
+import { default as React } from 'react';
+export interface AccordionItemProps {
+    /**
+     * Inner content. Must include `Accordion.Item.Header` and `Accordion.Item.Content`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Stable id used for the header/content ARIA wiring. Auto-generated if omitted.
+     */
+    id?: string;
+    /**
+     * Whether the accordion item is expanded initially (uncontrolled).
+     * Does not control the expanded state after initialization.
+     *
+     * When omitted, falls back to the parent `Accordion`'s `defaultExpanded` (or `false`).
+     * Pass an explicit boolean to override the group default — including `false` to
+     * keep an individual item collapsed when the group default is `true`.
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Controlled expanded state. When provided the item operates in controlled mode
+     * and `onToggle` should be used to react to user-driven toggles.
+     */
+    expanded?: boolean;
+    /**
+     * Called whenever the user toggles the item. Receives the next expanded state.
+     */
+    onToggle?: (expanded: boolean) => void;
+    /**
+     * Enables the icon-card layout variant. Affects both header and content styling,
+     * which is why it lives on the item.
+     * @default false
+     */
+    showIconCard?: boolean;
+    /**
+     * Marks the accordion item as selected (applies a visual 'selected' state).
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Icon card content rendered as a sibling of the header/content (only when `showIconCard` is true).
+     */
+    iconCard?: React.ReactNode;
+    /**
+     * Disables the item — the header trigger becomes non-interactive (`disabled`) and the
+     * item's expanded state can no longer be toggled by user interaction. The current
+     * state is preserved (e.g. a disabled item that's `defaultExpanded` stays open).
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * When `true`, the item auto-expands if `window.location.hash` matches its `id`
+     * (e.g. `https://example.com/page#my-item`). Also re-runs on `hashchange`, so
+     * navigating between in-page links updates which item is open.
+     *
+     * Requires an explicit `id` prop — the auto-generated React id isn't stable enough
+     * for deep-linking. No-op when `id` is omitted.
+     * @default false
+     */
+    openOnHashMatch?: boolean;
+}
+export declare const AccordionItem: {
+    (props: AccordionItemProps): JSX.Element;
+    displayName: string;
+} & {
+    Header: {
+        (props: import('..').AccordionItemHeaderProps): JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: import('..').AccordionItemContentProps): JSX.Element;
+        displayName: string;
+    };
+};
+export default AccordionItem;

package/src/tedi/components/content/accordion/accordion-item/accordion-item.es.js

@@ -0,0 +1,69 @@
+import { jsx as E, jsxs as M } from "react/jsx-runtime";
+import $ from "../../../../../../external/classnames/index.es.js";
+import i from "react";
+import r from "../accordion.module.scss.es.js";
+import { useAccordionContext as L } from "../accordion-context.es.js";
+import { AccordionItemContent as O } from "../accordion-item-content/accordion-item-content.es.js";
+import { AccordionItemHeader as k } from "../accordion-item-header/accordion-item-header.es.js";
+import { AccordionItemContext as D } from "./accordion-item-context.es.js";
+const F = (m) => typeof m.expanded == "boolean", w = (m) => {
+  const {
+    children: C,
+    id: c,
+    defaultExpanded: A,
+    expanded: l,
+    onToggle: t,
+    showIconCard: f = !1,
+    selected: b = !1,
+    iconCard: v,
+    disabled: d = !1,
+    openOnHashMatch: u = !1
+  } = m, y = i.useId(), a = c ?? y, x = `${a}-header`, h = `${a}-content`, e = L(), H = A ?? (e == null ? void 0 : e.defaultExpanded) ?? !1, o = F(m), [N, p] = i.useState(H), s = o ? l : N;
+  i.useEffect(() => {
+    if (!e) return;
+    const n = (_) => {
+      o ? t == null || t(_) : p(_);
+    };
+    return e.register(a, n);
+  }, [e, a, o, t]);
+  const I = i.useCallback(() => {
+    if (d) return;
+    const n = !s;
+    o || p(n), t == null || t(n), n && (e == null || e.notifyExpanded(a));
+  }, [e, a, o, d, s, t]);
+  i.useEffect(() => {
+    if (!u || !c || d || typeof window > "u") return;
+    const n = () => {
+      window.location.hash === `#${c}` && (o ? l || t == null || t(!0) : p(!0), e == null || e.notifyExpanded(c));
+    };
+    return n(), window.addEventListener("hashchange", n), () => window.removeEventListener("hashchange", n);
+  }, [u, c, d, o, l, t]);
+  const P = i.useMemo(
+    () => ({
+      headerId: x,
+      contentId: h,
+      expanded: s,
+      toggle: I,
+      showIconCard: f,
+      disabled: d
+    }),
+    [x, h, s, I, f, d]
+  ), j = $(r["tedi-accordion__item"], {
+    [r["tedi-accordion__item--selected"]]: b,
+    [r["tedi-accordion__item--expanded"]]: s,
+    [r["tedi-accordion__item--disabled"]]: d,
+    [r["tedi-accordion__item--with-icon-card"]]: f
+  });
+  return /* @__PURE__ */ E(D.Provider, { value: P, children: /* @__PURE__ */ M("div", { "data-name": "accordion-item", "data-testid": "tedi-accordion-item", className: j, children: [
+    f && /* @__PURE__ */ E("span", { "data-name": "accordion-icon-card", className: r["tedi-accordion__icon-card"], children: v }),
+    C
+  ] }) });
+};
+w.displayName = "AccordionItem";
+const K = Object.assign(w, {
+  Header: k,
+  Content: O
+});
+export {
+  K as AccordionItem
+};

package/src/tedi/components/content/accordion/accordion-item-content/accordion-item-content.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),m=require("../../../../../../external/classnames/index.cjs.js"),t=require("../accordion.module.scss.cjs.js"),u=require("../accordion-item/accordion-item-context.cjs.js"),o=c=>{const{children:i,contentClass:d}=c,{headerId:r,contentId:a,expanded:e,showIconCard:s}=u.useAccordionItemContext("Accordion.Item.Content"),l=m.default(t.default["tedi-accordion-item-content"],{[t.default["tedi-accordion-item-content--with-icon-card"]]:s},d);return n.jsx("div",{"data-name":"accordion-item-content",id:a,className:l,role:e?"region":void 0,"aria-labelledby":r,"aria-hidden":!e,inert:e?void 0:"",children:n.jsx("div",{className:t.default["tedi-accordion-item-content__inner"],children:i})})};o.displayName="AccordionItemContent";exports.AccordionItemContent=o;

package/src/tedi/components/content/accordion/accordion-item-content/accordion-item-content.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export interface AccordionItemContentProps {
+    /**
+     * Collapsible content.
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom CSS class for the accordion content.
+     */
+    contentClass?: string;
+}
+export declare const AccordionItemContent: {
+    (props: AccordionItemContentProps): JSX.Element;
+    displayName: string;
+};
+export default AccordionItemContent;

package/src/tedi/components/content/accordion/accordion-item-content/accordion-item-content.es.js

@@ -0,0 +1,30 @@
+import { jsx as e } from "react/jsx-runtime";
+import m from "../../../../../../external/classnames/index.es.js";
+import t from "../accordion.module.scss.es.js";
+import { useAccordionItemContext as l } from "../accordion-item/accordion-item-context.es.js";
+const h = (n) => {
+  const { children: i, contentClass: c } = n, { headerId: d, contentId: r, expanded: o, showIconCard: a } = l("Accordion.Item.Content"), s = m(
+    t["tedi-accordion-item-content"],
+    {
+      [t["tedi-accordion-item-content--with-icon-card"]]: a
+    },
+    c
+  );
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-name": "accordion-item-content",
+      id: r,
+      className: s,
+      role: o ? "region" : void 0,
+      "aria-labelledby": d,
+      "aria-hidden": !o,
+      inert: o ? void 0 : "",
+      children: /* @__PURE__ */ e("div", { className: t["tedi-accordion-item-content__inner"], children: i })
+    }
+  );
+};
+h.displayName = "AccordionItemContent";
+export {
+  h as AccordionItemContent
+};

package/src/tedi/components/content/accordion/accordion-item-header/accordion-item-header.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("../../../../../../external/classnames/index.cjs.js"),G=require("../../../base/icon/icon.cjs.js"),j=require("../../../base/typography/text/text.cjs.js"),J=require("../../../buttons/collapse-button/collapse-button.cjs.js"),e=require("../accordion.module.scss.cjs.js"),K=require("../accordion-item/accordion-item-context.cjs.js"),Q=require("../../../../providers/label-provider/use-labels.cjs.js"),v=I=>{const{headerClickable:o=!0,titleLayout:T="hug",openText:c,closeText:s,showExpandLabel:a=!0,showDefaultExpandAction:l=!0,expandActionPosition:u="end",expandActionArrowType:w="default",expandActionSize:C,expandActionInverted:N=!1,expandActionUnderline:q=!1,headerClass:y,title:r,beforeTitle:E,afterTitle:L,startAction:H,endAction:S,startDescription:h,endDescription:z,headingLevel:m}=I,{headerId:x,contentId:p,expanded:n,toggle:f,showIconCard:B,disabled:d}=K.useAccordionItemContext("Accordion.Item.Header"),{getLabel:_}=Q.useLabels(),D=c??_("open"),O=s??_("close"),k=n?O:D,P=l&&u==="start",F=l&&u==="end",M=C??(a?"default":"small"),R=i.default(e.default["tedi-accordion-item-header"],{[e.default["tedi-accordion-item-header--hoverable"]]:o&&!d,[e.default["tedi-accordion-item-header--expanded"]]:n,[e.default["tedi-accordion-item-header--with-icon-card"]]:B,[e.default["tedi-accordion-item-header--disabled"]]:d},y),U=()=>t.jsx(G.Icon,{name:"expand_more",color:"inherit",size:16,className:i.default(e.default["tedi-accordion-item-header__icon"],{[e.default["tedi-accordion-item-header__icon--expanded"]]:n,[e.default["tedi-accordion-item-header__icon--no-label"]]:!a})}),g=()=>o?t.jsxs("span",{className:i.default(e.default["tedi-accordion-item-header__expand-indicator"],{[e.default["tedi-accordion-item-header__expand-indicator--with-label"]]:a}),children:[t.jsx(j.Text,{element:"span",modifiers:"normal",children:a?k:null}),U()]}):t.jsx(J.CollapseButton,{open:n,onOpenChange:()=>f(),openText:c,closeText:s,hideText:!a,arrowType:w,size:M,inverted:N,underline:q,disabled:d,"aria-controls":p,"aria-disabled":d||void 0,tabIndex:d?-1:void 0}),b=t.jsxs(t.Fragment,{children:[t.jsxs("span",{className:e.default["tedi-accordion-item-header__start"],children:[H,E,t.jsxs("span",{className:i.default(e.default["tedi-accordion-item-header__title"],{[e.default["tedi-accordion-item-header__title--grow"]]:T==="fill",[e.default["tedi-accordion-item-header__title--with-description"]]:h}),children:[t.jsxs("span",{className:e.default["tedi-accordion-item-header__title-main"],children:[P&&g(),r!=null&&t.jsx(j.Text,{element:"span",color:"secondary",modifiers:"normal",children:r})]}),h]}),L]}),z,F&&g(),S]}),A=o?t.jsx("button",{type:"button",id:x,className:e.default["tedi-accordion-item-header__trigger"],onClick:f,disabled:d,"aria-expanded":n,"aria-controls":p,children:b}):t.jsx("div",{id:x,className:e.default["tedi-accordion-item-header__trigger"],children:b}),W=(()=>{if(!m)return A;const $=`h${m}`;return t.jsx($,{className:e.default["tedi-accordion-item-header__heading-wrapper"],children:A})})();return t.jsx("div",{"data-name":"accordion-item-header",className:R,children:W})};v.displayName="AccordionItemHeader";exports.AccordionItemHeader=v;

package/src/tedi/components/content/accordion/accordion-item-header/accordion-item-header.d.ts

@@ -0,0 +1,134 @@
+import { default as React } from 'react';
+import { CollapseButtonArrowType, CollapseButtonSize } from '../../../buttons/collapse-button/collapse-button';
+export type AccordionItemHeaderTitleLayout = 'hug' | 'fill';
+export type AccordionItemHeaderExpandActionPosition = 'start' | 'end';
+export type AccordionItemHeaderHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface AccordionItemHeaderProps {
+    /**
+     * If false, disables header toggling and enables using interactive elements in the
+     * accordion header. The default expand action is still rendered alongside it unless
+     * `showDefaultExpandAction` is also set to `false`.
+     * @default true
+     */
+    headerClickable?: boolean;
+    /**
+     * Sets how the accordion title stretches horizontally.
+     *
+     * `hug` — wraps tightly around content.
+     *
+     * `fill` — expands to available space and pushes trailing elements to the end.
+     * @default hug
+     */
+    titleLayout?: AccordionItemHeaderTitleLayout;
+    /**
+     * Text shown when the accordion is collapsed. Rendered literally —
+     * translate at the call site if needed. When omitted, falls back to the
+     * `LabelProvider`'s translated `'open'` label.
+     */
+    openText?: string;
+    /**
+     * Text shown when the accordion is expanded. Rendered literally —
+     * translate at the call site if needed. When omitted, falls back to the
+     * `LabelProvider`'s translated `'close'` label.
+     */
+    closeText?: string;
+    /**
+     * Controls whether the expand/collapse label is shown.
+     * @default true
+     */
+    showExpandLabel?: boolean;
+    /**
+     * Controls whether the default expand/collapse action is shown.
+     * @default true
+     */
+    showDefaultExpandAction?: boolean;
+    /**
+     * Position of the expand action relative to the header content.
+     * @default end
+     */
+    expandActionPosition?: AccordionItemHeaderExpandActionPosition;
+    /**
+     * Chevron style of the default expand action.
+     * Only effective when `headerClickable` is `false` (otherwise the
+     * default expand action isn't a `CollapseButton`) and `showExpandLabel`
+     * is `false` (only icon-only mode honours `arrowType` — see the
+     * `CollapseButton` docs).
+     * @default 'default'
+     */
+    expandActionArrowType?: CollapseButtonArrowType;
+    /**
+     * Visual size of the default expand action. Only effective when
+     * `headerClickable` is `false`.
+     *
+     * When omitted, the size is derived from `showExpandLabel`:
+     * - `showExpandLabel === true`  → `'default'`
+     * - `showExpandLabel === false` → `'small'` (icon-only mode reads
+     *   better at the smaller chevron size).
+     *
+     * Pass an explicit value to override the derived default.
+     */
+    expandActionSize?: CollapseButtonSize;
+    /**
+     * Use the inverted (light-on-dark) palette for the default expand
+     * action, for placement on a dark or brand background. Only effective
+     * when `headerClickable` is `false`.
+     * @default false
+     */
+    expandActionInverted?: boolean;
+    /**
+     * Whether the default expand action's label is underlined. Defaults to
+     * `false` so the chevron stays the sole affordance — an underlined
+     * label inside the accordion header reads as a stray link. Set to
+     * `true` for contexts that want link-style styling. Only effective
+     * when `headerClickable` is `false` and the expand action is not in
+     * icon-only mode (i.e. `showExpandLabel` is `true`).
+     * @default false
+     */
+    expandActionUnderline?: boolean;
+    /**
+     * Custom CSS class for the accordion header.
+     */
+    headerClass?: string;
+    /**
+     * The accordion title content. Renders inside the header's title slot.
+     * Use a string for plain text, or a node for richer content.
+     */
+    title?: React.ReactNode;
+    /**
+     * Custom content rendered before the title.
+     */
+    beforeTitle?: React.ReactNode;
+    /**
+     * Custom content rendered after the title.
+     */
+    afterTitle?: React.ReactNode;
+    /**
+     * Custom action elements rendered at the start of the header.
+     */
+    startAction?: React.ReactNode;
+    /**
+     * Custom action elements rendered at the end of the header.
+     */
+    endAction?: React.ReactNode;
+    /**
+     * Custom description content rendered below the title (start of the header).
+     */
+    startDescription?: React.ReactNode;
+    /**
+     * Custom description content rendered at the end of the header.
+     */
+    endDescription?: React.ReactNode;
+    /**
+     * When set, wraps the header trigger in a semantic `<h1>`–`<h6>` element
+     * following the WAI-ARIA Accordion Pattern. Improves accessibility for
+     * documents with a heading hierarchy (FAQ pages, docs). The wrapper uses
+     * `display: contents` so it doesn't affect the visual layout — it only adds
+     * semantic information for assistive technologies and TOC tools.
+     */
+    headingLevel?: AccordionItemHeaderHeadingLevel;
+}
+export declare const AccordionItemHeader: {
+    (props: AccordionItemHeaderProps): JSX.Element;
+    displayName: string;
+};
+export default AccordionItemHeader;

package/src/tedi/components/content/accordion/accordion-item-header/accordion-item-header.es.js

@@ -0,0 +1,126 @@
+import { jsxs as a, Fragment as K, jsx as t } from "react/jsx-runtime";
+import d from "../../../../../../external/classnames/index.es.js";
+import { Icon as M } from "../../../base/icon/icon.es.js";
+import { Text as w } from "../../../base/typography/text/text.es.js";
+import { CollapseButton as Q } from "../../../buttons/collapse-button/collapse-button.es.js";
+import e from "../accordion.module.scss.es.js";
+import { useAccordionItemContext as R } from "../accordion-item/accordion-item-context.es.js";
+import { useLabels as V } from "../../../../providers/label-provider/use-labels.es.js";
+const X = (C) => {
+  const {
+    headerClickable: r = !0,
+    titleLayout: I = "hug",
+    openText: s,
+    closeText: l,
+    showExpandLabel: o = !0,
+    showDefaultExpandAction: m = !0,
+    expandActionPosition: h = "end",
+    expandActionArrowType: N = "default",
+    expandActionSize: T,
+    expandActionInverted: y = !1,
+    expandActionUnderline: E = !1,
+    headerClass: L,
+    title: c,
+    beforeTitle: H,
+    afterTitle: z,
+    startAction: D,
+    endAction: S,
+    startDescription: p,
+    endDescription: j,
+    headingLevel: x
+  } = C, { headerId: _, contentId: u, expanded: n, toggle: f, showIconCard: k, disabled: i } = R("Accordion.Item.Header"), { getLabel: g } = V(), B = s ?? g("open"), O = l ?? g("close"), F = n ? O : B, P = m && h === "start", U = m && h === "end", W = T ?? (o ? "default" : "small"), $ = d(
+    e["tedi-accordion-item-header"],
+    {
+      [e["tedi-accordion-item-header--hoverable"]]: r && !i,
+      [e["tedi-accordion-item-header--expanded"]]: n,
+      [e["tedi-accordion-item-header--with-icon-card"]]: k,
+      [e["tedi-accordion-item-header--disabled"]]: i
+    },
+    L
+  ), q = () => /* @__PURE__ */ t(
+    M,
+    {
+      name: "expand_more",
+      color: "inherit",
+      size: 16,
+      className: d(e["tedi-accordion-item-header__icon"], {
+        [e["tedi-accordion-item-header__icon--expanded"]]: n,
+        [e["tedi-accordion-item-header__icon--no-label"]]: !o
+      })
+    }
+  ), A = () => r ? /* @__PURE__ */ a(
+    "span",
+    {
+      className: d(e["tedi-accordion-item-header__expand-indicator"], {
+        [e["tedi-accordion-item-header__expand-indicator--with-label"]]: o
+      }),
+      children: [
+        /* @__PURE__ */ t(w, { element: "span", modifiers: "normal", children: o ? F : null }),
+        q()
+      ]
+    }
+  ) : /* @__PURE__ */ t(
+    Q,
+    {
+      open: n,
+      onOpenChange: () => f(),
+      openText: s,
+      closeText: l,
+      hideText: !o,
+      arrowType: N,
+      size: W,
+      inverted: y,
+      underline: E,
+      disabled: i,
+      "aria-controls": u,
+      "aria-disabled": i || void 0,
+      tabIndex: i ? -1 : void 0
+    }
+  ), b = /* @__PURE__ */ a(K, { children: [
+    /* @__PURE__ */ a("span", { className: e["tedi-accordion-item-header__start"], children: [
+      D,
+      H,
+      /* @__PURE__ */ a(
+        "span",
+        {
+          className: d(e["tedi-accordion-item-header__title"], {
+            [e["tedi-accordion-item-header__title--grow"]]: I === "fill",
+            [e["tedi-accordion-item-header__title--with-description"]]: p
+          }),
+          children: [
+            /* @__PURE__ */ a("span", { className: e["tedi-accordion-item-header__title-main"], children: [
+              P && A(),
+              c != null && /* @__PURE__ */ t(w, { element: "span", color: "secondary", modifiers: "normal", children: c })
+            ] }),
+            p
+          ]
+        }
+      ),
+      z
+    ] }),
+    j,
+    U && A(),
+    S
+  ] }), v = r ? /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      id: _,
+      className: e["tedi-accordion-item-header__trigger"],
+      onClick: f,
+      disabled: i,
+      "aria-expanded": n,
+      "aria-controls": u,
+      children: b
+    }
+  ) : /* @__PURE__ */ t("div", { id: _, className: e["tedi-accordion-item-header__trigger"], children: b }), G = (() => {
+    if (!x) return v;
+    const J = `h${x}`;
+    return /* @__PURE__ */ t(J, { className: e["tedi-accordion-item-header__heading-wrapper"], children: v });
+  })();
+  return /* @__PURE__ */ t("div", { "data-name": "accordion-item-header", className: $, children: G });
+};
+X.displayName = "AccordionItemHeader";
+export {
+  X as AccordionItemHeader
+};

package/src/tedi/components/content/accordion/accordion.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),y=require("../../../../../external/classnames/index.cjs.js"),e=require("react"),A=require("./accordion.module.scss.cjs.js"),C=require("./accordion-context.cjs.js"),R=require("./accordion-item/accordion-item.cjs.js"),b=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),f=c=>{const{getCurrentBreakpointProps:m}=b.useBreakpointProps(c.defaultServerBreakpoint),{children:p,className:x,allowMultiple:t=!1,defaultExpanded:i=!1,itemGap:a,...q}=m(c),v=a!==void 0?{"--tedi-accordion-item-gap":`${a}rem`}:void 0,r=e.useRef(new Map),s=e.useRef(t);s.current=t;const d=e.useCallback((o,n)=>(r.current.set(o,n),()=>{r.current.delete(o)}),[]),u=e.useCallback(o=>{s.current||r.current.forEach((n,k)=>{k!==o&&n(!1)})},[]),g=e.useMemo(()=>({allowMultiple:t,defaultExpanded:i,notifyExpanded:u,register:d}),[t,i,u,d]);return l.jsx(C.AccordionContext.Provider,{value:g,children:l.jsx("div",{"data-name":"accordion","data-testid":"tedi-accordion",...q,className:y.default(A.default["tedi-accordion"],x),style:v,children:p})})};f.displayName="Accordion";const j=Object.assign(f,{Item:R.AccordionItem});exports.Accordion=j;

package/src/tedi/components/content/accordion/accordion.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+import { BreakpointSupport } from '../../../helpers';
+type AccordionBreakpointProps = {
+    /**
+     * Additional class.
+     */
+    className?: string;
+    /**
+     * Whether the accordion allows multiple items to be expanded at the same time.
+     * If false, opening one item will collapse the others automatically.
+     * @default false
+     */
+    allowMultiple?: boolean;
+    /**
+     * Group-level default for items' initial expanded state. Sets the initial
+     * `defaultExpanded` for every child `Accordion.Item` that doesn't specify
+     * its own. Per-item `defaultExpanded` (including an explicit `false`)
+     * takes precedence.
+     *
+     * Typically combined with `allowMultiple` to start with all items open.
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Vertical gap between sibling `Accordion.Item` components in rem
+     * Accepts any number, not limited to a fixed scale.
+     *
+     * Forwarded as the `--tedi-accordion-item-gap` CSS variable, so consumers
+     * can also override it from any ancestor class — or set a px value there
+     * directly when an exact-pixel override is needed.
+     *
+     * When omitted, falls back to the design-token default
+     * (`var(--layout-grid-gutters-08)` = 0.5rem).
+     */
+    itemGap?: number;
+};
+export interface AccordionProps extends BreakpointSupport<AccordionBreakpointProps> {
+    /**
+     * Accordion content. Should be one or more `AccordionItem` components.
+     */
+    children?: React.ReactNode;
+}
+export declare const Accordion: {
+    (props: AccordionProps): JSX.Element;
+    displayName: string;
+} & {
+    Item: {
+        (props: import('.').AccordionItemProps): JSX.Element;
+        displayName: string;
+    } & {
+        Header: {
+            (props: import('.').AccordionItemHeaderProps): JSX.Element;
+            displayName: string;
+        };
+        Content: {
+            (props: import('.').AccordionItemContentProps): JSX.Element;
+            displayName: string;
+        };
+    };
+};
+export default Accordion;