@tedi-design-system/react 18.0.0-rc.9 → 18.1.0-rc.1

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

@@ -5,7 +5,7 @@ import { Icon as a } from "../../base/icon/icon.es.js";
 import { Button as k } from "../button/button.es.js";
 import r from "./button-group.module.scss.es.js";
 import { useLabels as D } from "../../../providers/label-provider/use-labels.es.js";
-import { useBreakpoint as E, isBreakpointBelow as T } from "../../../helpers/hooks/use-breakpoint.es.js";
+import E, { isBreakpointBelow as T } from "../../../helpers/hooks/use-breakpoint.es.js";
 import { Dropdown as d } from "../../overlays/dropdown/dropdown.es.js";
 const P = (N) => {
   const { getLabel: _ } = D(), {
@@ -107,6 +107,5 @@ const P = (N) => {
   );
 };
 export {
-  P as ButtonGroup,
-  P as default
+  P as ButtonGroup
 };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),m=require("./card-button.module.scss.cjs.js"),n=l.forwardRef((o,r)=>{const{as:a,children:u,className:s,...t}=o,e=a||"button",c=e==="button";return d.jsx(e,{"data-name":"card-button",...t,...c?{type:t.type??"button"}:{},ref:r,className:i.default(m.default["tedi-card-button"],s),children:u})});n.displayName="CardButton";const b=n;exports.CardButton=b;

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

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { PolymorphicComponentPropWithRef } from '../../../helpers/polymorphic/types';
+export interface CardButtonBaseProps {
+    /**
+     * A single `<Card>` to render as the interactive surface. The host element provides the
+     * interaction semantics and applies the hover / active / focus / disabled states to the
+     * card and its blocks. Keep it to one card and avoid nested interactive elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class name on the host element.
+     */
+    className?: string;
+}
+export type CardButtonProps<C extends React.ElementType = 'button'> = PolymorphicComponentPropWithRef<C, CardButtonBaseProps>;
+export declare const CardButton: <C extends React.ElementType = "button">(props: CardButtonProps<C>) => React.ReactElement | null;
+export default CardButton;

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

@@ -0,0 +1,25 @@
+import { jsx as c } from "react/jsx-runtime";
+import u from "../../../../../external/classnames/index.es.js";
+import { forwardRef as d } from "react";
+import i from "./card-button.module.scss.es.js";
+const n = d(
+  (r, s) => {
+    const { as: a, children: e, className: m, ...t } = r, o = a || "button";
+    return /* @__PURE__ */ c(
+      o,
+      {
+        "data-name": "card-button",
+        ...t,
+        ...o === "button" ? { type: t.type ?? "button" } : {},
+        ref: s,
+        className: u(i["tedi-card-button"], m),
+        children: e
+      }
+    );
+  }
+);
+n.displayName = "CardButton";
+const y = n;
+export {
+  y as CardButton
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-card-button":"tedi-card-button-57ad7420"};exports.default=e;

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

@@ -0,0 +1,6 @@
+const t = {
+  "tedi-card-button": "tedi-card-button-57ad7420"
+};
+export {
+  t as default
+};

package/src/tedi/components/buttons/card-button/index.d.ts

@@ -0,0 +1 @@
+export * from './card-button';

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

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

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,84 @@
+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 i } 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((b, f) => {
+  const {
+    open: l,
+    onOpenChange: s,
+    openText: _,
+    closeText: x,
+    hideText: t = !1,
+    arrowType: a = "default",
+    size: n = "default",
+    inverted: y = !1,
+    underline: N = !0,
+    className: h,
+    onClick: r,
+    "aria-label": c,
+    ...C
+  } = b, { getLabel: d } = j(), p = l ? x ?? d("close") : _ ?? d("open"), z = t ? c ?? p : c, L = (m) => {
+    r == null || r(m), !m.defaultPrevented && (s == null || s(!l));
+  }, T = w(
+    e["tedi-collapse-button"],
+    {
+      [e["tedi-collapse-button--open"]]: l,
+      [e["tedi-collapse-button--small"]]: n === "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: f,
+      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: p }),
+        t ? a === "secondary" ? /* @__PURE__ */ o("span", { className: e["tedi-collapse-button__icon-wrapper"], children: /* @__PURE__ */ o(
+          i,
+          {
+            className: e["tedi-collapse-button__icon"],
+            name: "expand_more",
+            color: "inherit",
+            filled: !0,
+            size: 24
+          }
+        ) }) : /* @__PURE__ */ o(
+          i,
+          {
+            className: e["tedi-collapse-button__icon"],
+            name: "expand_more",
+            color: "inherit",
+            filled: !0,
+            size: n === "small" ? 18 : 24
+          }
+        ) : /* @__PURE__ */ o("span", { className: e["tedi-collapse-button__icon-pad"], children: /* @__PURE__ */ o(
+          i,
+          {
+            className: e["tedi-collapse-button__icon"],
+            name: "expand_more",
+            color: "inherit",
+            size: n === "small" ? 16 : 18
+          }
+        ) })
+      ]
+    }
+  );
+});
+u.displayName = "CollapseButton";
+const q = u;
+export {
+  q as CollapseButton
+};

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.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;