@tedi-design-system/react 18.0.0-rc.15 → 18.0.0-rc.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.0.0-rc.15",
+  "version": "18.0.0-rc.17",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/community/components/accordion/accordion-item/accordion-item.d.ts

@@ -32,5 +32,8 @@ export interface IAccordionItemContext {
     id: string;
 }
 export declare const AccordionItemContext: React.Context<IAccordionItemContext>;
+/**
+ * @deprecated Use `<Accordion.Item>` from the TEDI-Ready Accordion (`@tedi-design-system/react/tedi`) instead.
+ */
 export declare const AccordionItem: (props: AccordionItemProps) => JSX.Element;
 export default AccordionItem;

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

@@ -1,4 +1,7 @@
 import { CardContentProps } from '../../card';
 export type AccordionItemContentProps = CardContentProps;
+/**
+ * @deprecated Use `<Accordion.Item.Content>` from the TEDI-Ready Accordion (`@tedi-design-system/react/tedi`) instead.
+ */
 export declare const AccordionItemContent: (props: AccordionItemContentProps) => JSX.Element;
 export default AccordionItemContent;

package/src/community/components/accordion/accordion-item-header/accordion-item-header.d.ts

@@ -15,5 +15,8 @@ export interface AccordionItemHeaderProps extends Omit<CardHeaderProps, 'id' | '
      */
     background?: 'primary' | 'white/primary' | 'muted/primary' | CardHeaderBackground;
 }
+/**
+ * @deprecated Use `<Accordion.Item.Header>` from the TEDI-Ready Accordion (`@tedi-design-system/react/tedi`) instead.
+ */
 export declare const AccordionItemHeader: (props: AccordionItemHeaderProps) => JSX.Element;
 export default AccordionItemHeader;

package/src/community/components/accordion/accordion.d.ts

@@ -34,5 +34,8 @@ export interface IAccordionContext {
     onToggle: (id: string) => void;
 }
 export declare const AccordionContext: React.Context<IAccordionContext>;
+/**
+ * @deprecated Use the TEDI-Ready `Accordion` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Accordion: (props: AccordionProps) => JSX.Element;
 export default Accordion;

package/src/tedi/components/buttons/collapse-button/collapse-button.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),L=require("../../../../../external/classnames/index.cjs.js"),T=require("react"),c=require("../../base/icon/icon.cjs.js"),e=require("./collapse-button.module.scss.cjs.js"),z=require("../../../providers/label-provider/use-labels.cjs.js"),p=T.forwardRef((b,m)=>{const{open:a,onOpenChange:s,openText:_,closeText:x,hideText:t=!1,arrowType:o="default",size:y="default",inverted:h=!1,underline:j=!0,className:N,onClick:n,"aria-label":d,...q}=b,{getLabel:u}=z.useLabels(),i=a?x??u("close"):_??u("open"),C=t?d??i:d,v=r=>{n==null||n(r),!r.defaultPrevented&&(s==null||s(!a))},B=L.default(e.default["tedi-collapse-button"],{[e.default["tedi-collapse-button--open"]]:a,[e.default["tedi-collapse-button--small"]]:y==="small",[e.default["tedi-collapse-button--inverted"]]:h&&o!=="secondary",[e.default["tedi-collapse-button--icon-only"]]:t,[e.default["tedi-collapse-button--neutral"]]:t&&o!=="secondary",[e.default["tedi-collapse-button--secondary"]]:t&&o==="secondary",[e.default["tedi-collapse-button--no-underline"]]:!t&&!j},N);return l.jsxs("button",{ref:m,type:"button",...q,className:B,onClick:v,"aria-expanded":a,"aria-label":C,children:[!t&&l.jsx("span",{className:e.default["tedi-collapse-button__text"],children:i}),t?o==="secondary"?l.jsx("span",{className:e.default["tedi-collapse-button__icon-wrapper"],children:l.jsx(c.Icon,{className:e.default["tedi-collapse-button__icon"],name:"expand_more",color:"inherit",filled:!0,size:24})}):l.jsx(c.Icon,{className:e.default["tedi-collapse-button__icon"],name:"expand_more",color:"inherit",filled:!0,size:24}):l.jsx("span",{className:e.default["tedi-collapse-button__icon-pad"],children:l.jsx(c.Icon,{className:e.default["tedi-collapse-button__icon"],name:"expand_more",color:"inherit",size:16})})]})});p.displayName="CollapseButton";const f=p;exports.CollapseButton=f;exports.default=f;

package/src/tedi/components/buttons/collapse-button/collapse-button.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+export type CollapseButtonArrowType = 'default' | 'secondary';
+export type CollapseButtonSize = 'default' | 'small';
+export interface CollapseButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'onChange' | 'children'> {
+    /**
+     * Current open state. Bind alongside `onOpenChange` to keep in sync.
+     */
+    open: boolean;
+    /**
+     * Called when the user toggles the button. Receives the next open state.
+     * Standard native `onClick` still fires too; if it calls `preventDefault`
+     * the toggle is suppressed.
+     */
+    onOpenChange?: (next: boolean) => void;
+    /**
+     * Label shown when collapsed. Rendered literally — translate at the call
+     * site if needed. When omitted, falls back to the `LabelProvider`'s
+     * translated `'open'` label.
+     */
+    openText?: string;
+    /**
+     * Label shown when expanded. Rendered literally — translate at the call
+     * site if needed. When omitted, falls back to the `LabelProvider`'s
+     * translated `'close'` label.
+     */
+    closeText?: string;
+    /**
+     * Hide the label and render the chevron only.
+     * @default false
+     */
+    hideText?: boolean;
+    /**
+     * Chevron style. Only takes effect with `hideText` (icon-only mode).
+     * @default default
+     */
+    arrowType?: CollapseButtonArrowType;
+    /**
+     * Visual size.
+     * @default default
+     */
+    size?: CollapseButtonSize;
+    /**
+     * Light text and icon for placement on a dark / brand background. Ignored
+     * when `arrowType` is `secondary` (no inverted form in the design).
+     * @default false
+     */
+    inverted?: boolean;
+    /**
+     * Underline the text label. Set `false` in contexts where the chevron is
+     * the sole affordance (e.g. inside an accordion header). Has no effect in
+     * icon-only mode.
+     * @default true
+     */
+    underline?: boolean;
+    /**
+     * Accessible label. Required when `hideText` is `true`.
+     */
+    'aria-label'?: string;
+}
+export declare const CollapseButton: React.ForwardRefExoticComponent<CollapseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default CollapseButton;

package/src/tedi/components/buttons/collapse-button/collapse-button.es.js

@@ -0,0 +1,68 @@
+import { jsxs as v, jsx as o } from "react/jsx-runtime";
+import w from "../../../../../external/classnames/index.es.js";
+import B from "react";
+import { Icon as r } from "../../base/icon/icon.es.js";
+import e from "./collapse-button.module.scss.es.js";
+import { useLabels as j } from "../../../providers/label-provider/use-labels.es.js";
+const u = B.forwardRef((m, b) => {
+  const {
+    open: l,
+    onOpenChange: s,
+    openText: f,
+    closeText: _,
+    hideText: t = !1,
+    arrowType: a = "default",
+    size: x = "default",
+    inverted: y = !1,
+    underline: N = !0,
+    className: h,
+    onClick: n,
+    "aria-label": i,
+    ...C
+  } = m, { getLabel: c } = j(), d = l ? _ ?? c("close") : f ?? c("open"), z = t ? i ?? d : i, L = (p) => {
+    n == null || n(p), !p.defaultPrevented && (s == null || s(!l));
+  }, T = w(
+    e["tedi-collapse-button"],
+    {
+      [e["tedi-collapse-button--open"]]: l,
+      [e["tedi-collapse-button--small"]]: x === "small",
+      [e["tedi-collapse-button--inverted"]]: y && a !== "secondary",
+      [e["tedi-collapse-button--icon-only"]]: t,
+      [e["tedi-collapse-button--neutral"]]: t && a !== "secondary",
+      [e["tedi-collapse-button--secondary"]]: t && a === "secondary",
+      [e["tedi-collapse-button--no-underline"]]: !t && !N
+    },
+    h
+  );
+  return /* @__PURE__ */ v(
+    "button",
+    {
+      ref: b,
+      type: "button",
+      ...C,
+      className: T,
+      onClick: L,
+      "aria-expanded": l,
+      "aria-label": z,
+      children: [
+        !t && /* @__PURE__ */ o("span", { className: e["tedi-collapse-button__text"], children: d }),
+        t ? a === "secondary" ? /* @__PURE__ */ o("span", { className: e["tedi-collapse-button__icon-wrapper"], children: /* @__PURE__ */ o(
+          r,
+          {
+            className: e["tedi-collapse-button__icon"],
+            name: "expand_more",
+            color: "inherit",
+            filled: !0,
+            size: 24
+          }
+        ) }) : /* @__PURE__ */ o(r, { className: e["tedi-collapse-button__icon"], name: "expand_more", color: "inherit", filled: !0, size: 24 }) : /* @__PURE__ */ o("span", { className: e["tedi-collapse-button__icon-pad"], children: /* @__PURE__ */ o(r, { className: e["tedi-collapse-button__icon"], name: "expand_more", color: "inherit", size: 16 }) })
+      ]
+    }
+  );
+});
+u.displayName = "CollapseButton";
+const q = u;
+export {
+  q as CollapseButton,
+  q as default
+};

package/src/tedi/components/buttons/collapse-button/collapse-button.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-collapse-button":"tedi-collapse-button-ae05875b","tedi-collapse-button__text":"tedi-collapse-button__text-6763f718","tedi-collapse-button--no-underline":"tedi-collapse-button--no-underline-26e3e8f3","tedi-collapse-button__icon":"tedi-collapse-button__icon-343170a2","tedi-collapse-button__icon-pad":"tedi-collapse-button__icon-pad-352e26ef","tedi-collapse-button__icon-wrapper":"tedi-collapse-button__icon-wrapper-8eda7a8b","tedi-collapse-button--open":"tedi-collapse-button--open-2f66bdca","tedi-collapse-button--small":"tedi-collapse-button--small-2e823f5a","tedi-collapse-button--icon-only":"tedi-collapse-button--icon-only-65e88949","tedi-collapse-button--neutral":"tedi-collapse-button--neutral-16b6a760","tedi-collapse-button--secondary":"tedi-collapse-button--secondary-f3a0b2c7","tedi-collapse-button--inverted":"tedi-collapse-button--inverted-288a9527"};exports.default=t;

package/src/tedi/components/buttons/collapse-button/collapse-button.module.scss.es.js

@@ -0,0 +1,17 @@
+const t = {
+  "tedi-collapse-button": "tedi-collapse-button-ae05875b",
+  "tedi-collapse-button__text": "tedi-collapse-button__text-6763f718",
+  "tedi-collapse-button--no-underline": "tedi-collapse-button--no-underline-26e3e8f3",
+  "tedi-collapse-button__icon": "tedi-collapse-button__icon-343170a2",
+  "tedi-collapse-button__icon-pad": "tedi-collapse-button__icon-pad-352e26ef",
+  "tedi-collapse-button__icon-wrapper": "tedi-collapse-button__icon-wrapper-8eda7a8b",
+  "tedi-collapse-button--open": "tedi-collapse-button--open-2f66bdca",
+  "tedi-collapse-button--small": "tedi-collapse-button--small-2e823f5a",
+  "tedi-collapse-button--icon-only": "tedi-collapse-button--icon-only-65e88949",
+  "tedi-collapse-button--neutral": "tedi-collapse-button--neutral-16b6a760",
+  "tedi-collapse-button--secondary": "tedi-collapse-button--secondary-f3a0b2c7",
+  "tedi-collapse-button--inverted": "tedi-collapse-button--inverted-288a9527"
+};
+export {
+  t as default
+};

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.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react/jsx-runtime"),N=require("../../../../../../external/classnames/index.cjs.js"),a=require("react"),i=require("../accordion.module.scss.cjs.js"),O=require("../accordion-context.cjs.js"),S=require("../accordion-item-content/accordion-item-content.cjs.js"),$=require("../accordion-item-header/accordion-item-header.cjs.js"),L=require("./accordion-item-context.cjs.js"),R=u=>typeof u.expanded=="boolean",E=u=>{const{children:A,id:r,defaultExpanded:b,expanded:f,onToggle:t,showIconCard:l=!1,selected:q=!1,iconCard:v,disabled:d=!1,openOnHashMatch:p=!1}=u,j=a.useId(),c=r??j,h=`${c}-header`,I=`${c}-content`,e=O.useAccordionContext(),y=b??(e==null?void 0:e.defaultExpanded)??!1,o=R(u),[H,m]=a.useState(y),s=o?f:H;a.useEffect(()=>{if(!e)return;const n=C=>{o?t==null||t(C):m(C)};return e.register(c,n)},[e,c,o,t]);const _=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 M=a.useMemo(()=>({headerId:h,contentId:I,expanded:s,toggle:_,showIconCard:l,disabled:d}),[h,I,s,_,l,d]),P=N.default(i.default["tedi-accordion__item"],{[i.default["tedi-accordion__item--selected"]]:q,[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(L.AccordionItemContext.Provider,{value:M,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:v}),A]})})};E.displayName="AccordionItem";const w=Object.assign(E,{Header:$.AccordionItemHeader,Content:S.AccordionItemContent});exports.AccordionItem=w;exports.default=w;

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('../accordion-item-header/accordion-item-header').AccordionItemHeaderProps): JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: import('../accordion-item-content/accordion-item-content').AccordionItemContentProps): JSX.Element;
+        displayName: string;
+    };
+};
+export default AccordionItem;

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

@@ -0,0 +1,70 @@
+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,
+  K as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),u=require("../../../../../../external/classnames/index.cjs.js"),t=require("../accordion.module.scss.cjs.js"),m=require("../accordion-item/accordion-item-context.cjs.js"),n=c=>{const{children:i,contentClass:d}=c,{headerId:r,contentId:a,expanded:e,showIconCard:s}=m.useAccordionItemContext("Accordion.Item.Content"),l=u.default(t.default["tedi-accordion-item-content"],{[t.default["tedi-accordion-item-content--with-icon-card"]]:s},d);return o.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:o.jsx("div",{className:t.default["tedi-accordion-item-content__inner"],children:i})})};n.displayName="AccordionItemContent";exports.AccordionItemContent=n;exports.default=n;

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,31 @@
+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,
+  h as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),i=require("../../../../../../external/classnames/index.cjs.js"),G=require("../../../base/icon/icon.cjs.js"),v=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"),c=I=>{const{headerClickable:o=!0,titleLayout:T="hug",openText:s,closeText:l,showExpandLabel:a=!0,showDefaultExpandAction:u=!0,expandActionPosition:h="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:m,endDescription:z,headingLevel:x}=I,{headerId:p,contentId:f,expanded:n,toggle:_,showIconCard:B,disabled:d}=K.useAccordionItemContext("Accordion.Item.Header"),{getLabel:g}=Q.useLabels(),D=s??g("open"),O=l??g("close"),k=n?O:D,M=u&&h==="start",P=u&&h==="end",F=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})}),b=()=>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(v.Text,{element:"span",modifiers:"normal",children:a?k:null}),U()]}):t.jsx(J.CollapseButton,{open:n,onOpenChange:()=>_(),openText:s,closeText:l,hideText:!a,arrowType:w,size:F,inverted:N,underline:q,disabled:d,"aria-controls":f,"aria-disabled":d||void 0,tabIndex:d?-1:void 0}),A=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"]]:m}),children:[t.jsxs("span",{className:e.default["tedi-accordion-item-header__title-main"],children:[M&&b(),r!=null&&t.jsx(v.Text,{element:"span",color:"secondary",modifiers:"normal",children:r})]}),m]}),L]}),z,P&&b(),S]}),j=o?t.jsx("button",{type:"button",id:p,className:e.default["tedi-accordion-item-header__trigger"],onClick:_,disabled:d,"aria-expanded":n,"aria-controls":f,children:A}):t.jsx("div",{id:p,className:e.default["tedi-accordion-item-header__trigger"],children:A}),W=(()=>{if(!x)return j;const $=`h${x}`;return t.jsx($,{className:e.default["tedi-accordion-item-header__heading-wrapper"],children:j})})();return t.jsx("div",{"data-name":"accordion-item-header",className:R,children:W})};c.displayName="AccordionItemHeader";exports.AccordionItemHeader=c;exports.default=c;

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;