@tedi-design-system/react 18.0.0-rc.2 → 18.0.0-rc.20

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

@@ -1,57 +1,58 @@
-import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { jsx as t, jsxs as h } from "react/jsx-runtime";
 import n from "../../../../../external/classnames/index.es.js";
-import h from "react";
-import q from "../../../../../external/react-animate-height/dist/esm/index.es.js";
-import { usePrint as F } from "../../../providers/printing-provider/printing-provider.es.js";
-import { Icon as G } from "../../base/icon/icon.es.js";
-import { Text as J } from "../../base/typography/text/text.es.js";
-import { Print as Q } from "../../misc/print/print.es.js";
+import f from "react";
+import G from "../../../../../external/react-animate-height/dist/esm/index.es.js";
+import { usePrint as J } from "../../../providers/printing-provider/printing-provider.es.js";
+import { Icon as Q } from "../../base/icon/icon.es.js";
+import { Text as U } from "../../base/typography/text/text.es.js";
+import { Print as V } from "../../misc/print/print.es.js";
 import e from "./collapse.module.scss.es.js";
-import { useBreakpointProps as U } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as V } from "../../../providers/label-provider/use-labels.es.js";
-import { Row as k } from "../../layout/grid/row.es.js";
+import { useBreakpointProps as W } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as X } from "../../../providers/label-provider/use-labels.es.js";
+import { Row as P } from "../../layout/grid/row.es.js";
 import { Col as s } from "../../layout/grid/col.es.js";
-const ce = (w) => {
-  const { getCurrentBreakpointProps: O } = U(w.defaultServerBreakpoint), { getLabel: y } = V(), {
+const pe = (w) => {
+  const { getCurrentBreakpointProps: $ } = W(w.defaultServerBreakpoint), { getLabel: y } = X(), {
     id: r,
     children: g,
-    className: P,
-    openText: b = y("open"),
-    closeText: v = y("close"),
-    hideCollapseText: $ = !1,
+    className: B,
+    openText: v = y("open"),
+    closeText: x = y("close"),
+    hideCollapseText: S = !1,
     title: c,
-    titleRowProps: B,
-    defaultOpen: S,
+    titleRowProps: T,
+    defaultOpen: j,
     open: d,
     onToggle: p,
-    arrowType: o = "default",
+    arrowType: a = "default",
     size: i = "default",
-    underline: T = !0,
-    toggleLabel: x,
-    iconOnly: j = !1,
-    inverted: D = !1,
-    ...L
-  } = O(w), m = `${r}__trigger`, u = `${r}__content`, M = `${r}__animate`, [N, R] = h.useState(() => S), _ = F(), a = h.useMemo(
+    underline: D = !0,
+    toggleLabel: b,
+    iconOnly: E = !1,
+    controlsId: C,
+    inverted: L = !1,
+    ...M
+  } = $(w), I = C !== void 0, m = `${r}__trigger`, u = `${r}__content`, R = `${r}__animate`, [N, z] = f.useState(() => j), _ = J(), o = f.useMemo(
     () => _ || (d !== void 0 ? d : N),
     [_, d, N]
-  ), z = j === !0 && !c, E = D && o !== "secondary", K = n(
+  ), K = E === !0 && !c, A = L && a !== "secondary", H = n(
     e["tedi-collapse"],
     i === "small" && e["tedi-collapse--small"],
-    a && e["tedi-collapse--is-open"],
-    z && e["tedi-collapse--icon-only"],
-    E && e["tedi-collapse--inverted"],
-    e[`tedi-collapse--arrow-${o}`],
-    P
-  ), C = () => {
-    const l = !a;
-    R(l), p == null || p(l);
-  }, A = (l) => {
-    (l.key === "Enter" || l.key === " ") && !l.repeat && (l.preventDefault(), C());
-  }, H = x || (a ? v : b), I = h.useMemo(
+    o && e["tedi-collapse--is-open"],
+    K && e["tedi-collapse--icon-only"],
+    A && e["tedi-collapse--inverted"],
+    e[`tedi-collapse--arrow-${a}`],
+    B
+  ), k = () => {
+    const l = !o;
+    z(l), p == null || p(l);
+  }, q = (l) => {
+    (l.key === "Enter" || l.key === " ") && !l.repeat && (l.preventDefault(), k());
+  }, F = b || (o ? x : v), O = f.useMemo(
     () => /* @__PURE__ */ t("div", { id: u, role: "region", "aria-labelledby": m, className: e["tedi-collapse__content"], children: g }),
     [g, u, m]
   );
-  return /* @__PURE__ */ f("div", { "data-name": "collapse", ...L, className: K, children: [
+  return /* @__PURE__ */ h("div", { "data-name": "collapse", ...M, className: H, children: [
     /* @__PURE__ */ t(
       "button",
       {
@@ -59,22 +60,22 @@ const ce = (w) => {
         type: "button",
         "data-name": "collapse-trigger",
         className: e["tedi-collapse__title"],
-        "aria-label": H,
-        "aria-expanded": a,
-        "aria-controls": u,
-        onKeyDown: A,
-        onClick: C,
-        children: /* @__PURE__ */ f(k, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...B, element: "span", children: [
+        "aria-label": F,
+        "aria-expanded": o,
+        "aria-controls": I ? C : u,
+        onKeyDown: q,
+        onClick: k,
+        children: /* @__PURE__ */ h(P, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...T, element: "span", children: [
           c && /* @__PURE__ */ t(s, { "aria-hidden": "true", children: c }),
-          /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ f(k, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
-            /* @__PURE__ */ t(Q, { visibility: "hide", children: /* @__PURE__ */ t(s, { width: "auto", className: n({ "visually-hidden": $ }), children: /* @__PURE__ */ t(
-              J,
+          /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ h(P, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
+            /* @__PURE__ */ t(V, { visibility: "hide", children: /* @__PURE__ */ t(s, { width: "auto", className: n({ "visually-hidden": S }), children: /* @__PURE__ */ t(
+              U,
               {
                 element: "span",
                 className: n(e["tedi-collapse__text"], {
-                  [e["tedi-collapse__text--underline"]]: T
+                  [e["tedi-collapse__text--underline"]]: D
                 }),
-                children: a ? v : b
+                children: o ? x : v
               }
             ) }) }),
             /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ t(
@@ -82,19 +83,20 @@ const ce = (w) => {
               {
                 className: n(
                   e["tedi-collapse__icon-wrapper"],
-                  e[`tedi-collapse__icon-wrapper--${o}`],
+                  e[`tedi-collapse__icon-wrapper--${a}`],
                   i === "small" && e["tedi-collapse__icon-wrapper--small"]
                 ),
                 children: /* @__PURE__ */ t(
-                  G,
+                  Q,
                   {
                     className: n(
                       e["tedi-collapse__icon"],
-                      e[`tedi-collapse__icon--${o}`],
+                      e[`tedi-collapse__icon--${a}`],
                       i === "small" && e["tedi-collapse__icon--small"]
                     ),
                     name: "expand_more",
-                    size: i === "small" || o === "secondary" ? 18 : 24
+                    color: "inherit",
+                    size: i === "small" || a === "secondary" ? 18 : 24
                   }
                 )
               }
@@ -103,10 +105,10 @@ const ce = (w) => {
         ] })
       }
     ),
-    _ ? I : /* @__PURE__ */ t(q, { id: M, duration: 300, height: a ? "auto" : 0, "data-testid": "collapse-inner", children: I })
+    !I && (_ ? O : /* @__PURE__ */ t(G, { id: R, duration: 300, height: o ? "auto" : 0, "data-testid": "collapse-inner", children: O }))
   ] });
 };
 export {
-  ce as Collapse,
-  ce as default
+  pe as Collapse,
+  pe as default
 };

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;