@tedi-design-system/react 19.0.1-rc.2 → 19.1.0-rc.10

package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-collapsible/table-of-contents-collapsible.es.js

@@ -1,80 +1,97 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import k from "../../../../../../../external/classnames/index.es.js";
-import { useState as B, useRef as E, useEffect as H, useMemo as f } from "react";
-import { Text as T } from "../../../../base/typography/text/text.es.js";
-import { CollapseButton as _ } from "../../../../buttons/collapse-button/collapse-button.es.js";
-import { childrenToNodes as j, buildActiveTrail as M, TableOfContentsContext as R } from "../../table-of-contents.es.js";
-import t from "../../table-of-contents.module.scss.es.js";
-import { TableOfContentsList as A } from "../table-of-contents-list/table-of-contents-list.es.js";
-import { useLabels as I } from "../../../../../providers/label-provider/use-labels.es.js";
-import { Modal as r } from "../../../../overlays/modal/modal.es.js";
-const P = (C) => {
-  const { children: m, heading: b, ariaLabel: N, activeId: l, numbered: p = !1, sticky: x = !0, className: L } = C, { getLabel: o } = I(), [n, s] = B(!1), u = E(null);
-  H(() => {
-    const d = u.current;
-    if (!n || !d) return;
-    const g = (y) => {
-      y.target.closest("a, button") && s(!1);
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import E from "../../../../../../../external/classnames/index.es.js";
+import { useState as b, useEffect as x, useMemo as u } from "react";
+import { Text as y } from "../../../../base/typography/text/text.es.js";
+import { CollapseButton as S } from "../../../../buttons/collapse-button/collapse-button.es.js";
+import { Sheet as q } from "../../../../overlays/sheet/sheet.es.js";
+import { childrenToNodes as B, buildActiveTrail as I, TableOfContentsContext as P } from "../../table-of-contents.es.js";
+import e from "../../table-of-contents.module.scss.es.js";
+import { TableOfContentsList as V } from "../table-of-contents-list/table-of-contents-list.es.js";
+import { useLabels as z } from "../../../../../providers/label-provider/use-labels.es.js";
+const D = (k) => {
+  const {
+    children: h,
+    heading: p,
+    ariaLabel: A,
+    activeId: s,
+    numbered: v = !1,
+    bordered: H = !1,
+    defaultOpen: _ = !0,
+    sticky: d = !0,
+    hideOnScroll: g = !1,
+    className: Y
+  } = k, { getLabel: w } = z(), [o, a] = b(!1), [j, L] = b(!1), [i, F] = b(null);
+  x(() => {
+    if (!g || !d) {
+      L(!1);
+      return;
+    }
+    let l = window.scrollY, t = 0;
+    const O = () => {
+      t || (t = window.requestAnimationFrame(() => {
+        t = 0;
+        const f = window.scrollY, T = f - l;
+        Math.abs(T) > 4 && (L(T > 0 && f > 0), l = f);
+      }));
     };
-    return d.addEventListener("click", g), () => d.removeEventListener("click", g);
-  }, [n]);
-  const a = (b === void 0 ? o("table-of-contents.title") : b) ?? o("table-of-contents.title"), h = N || a, c = f(() => j(m), [m]), v = f(() => M(c, l), [c, l]), O = f(
-    () => ({ activeId: l, numbered: p, ariaLabel: h, activeTrail: v }),
-    [l, p, h, v]
+    return window.addEventListener("scroll", O, { passive: !0 }), () => {
+      window.removeEventListener("scroll", O), t && window.cancelAnimationFrame(t);
+    };
+  }, [g, d]), x(() => {
+    if (!o || !i) return;
+    const l = (t) => {
+      t.target.closest("a, button") && a(!1);
+    };
+    return i.addEventListener("click", l), () => i.removeEventListener("click", l);
+  }, [o, i]);
+  const r = (p === void 0 ? w("table-of-contents.title") : p) ?? w("table-of-contents.title"), N = A || r, c = u(() => B(h), [h]), C = u(() => I(c, s), [c, s]), M = u(
+    () => ({ activeId: s, numbered: v, ariaLabel: N, activeTrail: C, defaultOpen: _ }),
+    [s, v, N, C, _]
   );
-  return /* @__PURE__ */ i(R.Provider, { value: O, children: [
-    /* @__PURE__ */ i(
+  return /* @__PURE__ */ m(P.Provider, { value: M, children: [
+    /* @__PURE__ */ m(
       "div",
       {
-        className: k(
-          t["tedi-table-of-contents__bar"],
-          { [t["tedi-table-of-contents__bar--static"]]: !x },
-          L
+        className: E(
+          e["tedi-table-of-contents__bar"],
+          {
+            [e["tedi-table-of-contents__bar--static"]]: !d,
+            [e["tedi-table-of-contents__bar--hidden"]]: j && !o
+          },
+          Y
         ),
         children: [
-          /* @__PURE__ */ e(T, { modifiers: "bold", className: t["tedi-table-of-contents__bar-title"], children: a }),
-          /* @__PURE__ */ e(
-            _,
-            {
-              open: n,
-              onOpenChange: s,
-              openText: o("open"),
-              closeText: o("close"),
-              underline: !1,
-              "aria-haspopup": "dialog"
-            }
-          )
+          /* @__PURE__ */ n(y, { modifiers: "bold", className: e["tedi-table-of-contents__bar-title"], children: r }),
+          /* @__PURE__ */ n(S, { open: o, onOpenChange: a, underline: !1, "aria-haspopup": "dialog" })
         ]
       }
     ),
-    /* @__PURE__ */ e(r, { open: n, onToggle: s, children: /* @__PURE__ */ i(
-      r.Content,
+    /* @__PURE__ */ n(
+      q,
       {
-        position: "bottom",
-        fullscreen: "edge",
-        "aria-label": a,
-        className: t["tedi-table-of-contents__sheet"],
-        children: [
-          /* @__PURE__ */ e(r.Header, { closeButton: !1, children: /* @__PURE__ */ i("div", { className: t["tedi-table-of-contents__sheet-header"], children: [
-            /* @__PURE__ */ e(T, { modifiers: "bold", className: t["tedi-table-of-contents__bar-title"], children: a }),
-            /* @__PURE__ */ e(
-              _,
-              {
-                open: n,
-                onOpenChange: s,
-                openText: o("open"),
-                closeText: o("close"),
-                underline: !1
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ e(r.Body, { children: /* @__PURE__ */ e("div", { ref: u, className: t["tedi-table-of-contents"], children: /* @__PURE__ */ e(A, { nodes: c, heading: null }) }) })
-        ]
+        open: o,
+        onToggle: a,
+        ariaLabel: r,
+        className: e["tedi-table-of-contents__sheet"],
+        header: /* @__PURE__ */ m("div", { className: e["tedi-table-of-contents__sheet-header"], children: [
+          /* @__PURE__ */ n(y, { modifiers: "bold", className: e["tedi-table-of-contents__bar-title"], children: r }),
+          /* @__PURE__ */ n(S, { open: o, onOpenChange: a, underline: !1 })
+        ] }),
+        children: /* @__PURE__ */ n(
+          "div",
+          {
+            ref: F,
+            className: E(e["tedi-table-of-contents"], {
+              [e["tedi-table-of-contents--bordered"]]: H
+            }),
+            children: /* @__PURE__ */ n(V, { nodes: c, heading: null })
+          }
+        )
       }
-    ) })
+    )
   ] });
 };
-P.displayName = "TableOfContentsCollapsible";
+D.displayName = "TableOfContentsCollapsible";
 export {
-  P as TableOfContentsCollapsible
+  D as TableOfContentsCollapsible
 };

package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-item/table-of-contents-item.d.ts

@@ -15,6 +15,12 @@ export interface TableOfContentsItemProps {
      * Render a separator below the item.
      */
     separator?: boolean;
+    /**
+     * Trailing content shown at the end of the item's row (right-aligned) — e.g. a
+     * count `Tag` or `StatusBadge`. Kept out of the link so it isn't part of the
+     * link's accessible name.
+     */
+    slot?: React.ReactNode;
 }
 export declare const TableOfContentsItem: {
     (_props: TableOfContentsItemProps): JSX.Element | null;

package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-row/table-of-contents-row.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../../../../../../external/classnames/index.cjs.js"),N=require("react"),T=require("../../../../misc/separator/separator.cjs.js"),w=require("../../table-of-contents.cjs.js"),t=require("../../table-of-contents.module.scss.cjs.js"),r=({node:m,depth:c,index:i,numberPrefix:a})=>{const{activeId:_,numbered:o,activeTrail:p}=N.useContext(w.TableOfContentsContext),{id:n,content:x,children:s,separator:j}=m,C=!!(s!=null&&s.length),d=!!n&&n===_,h=C&&!!n&&p.has(n),O=Math.min(c,2),l=a?`${a}.${i+1}`:`${i+1}`,v=a?l:`${l}.`,q=o?"ol":"ul";return e.jsxs("li",{"aria-current":d?"true":void 0,className:b.default(t.default["tedi-table-of-contents__item"],{[t.default["tedi-table-of-contents__item--selected"]]:d}),children:[e.jsxs("span",{className:b.default(t.default["tedi-table-of-contents__row"],t.default[`tedi-table-of-contents__row--level-${O}`]),children:[o&&e.jsx("span",{className:t.default["tedi-table-of-contents__number"],"aria-hidden":"true",children:v}),e.jsx("span",{className:t.default["tedi-table-of-contents__content"],children:x})]}),h&&e.jsx(q,{className:t.default["tedi-table-of-contents__group"],children:s.map((u,f)=>e.jsx(r,{node:u,depth:c+1,index:f,numberPrefix:o?l:void 0},u.id??f))}),j&&e.jsx(T.Separator,{})]})};r.displayName="TableOfContentsRow";exports.TableOfContentsRow=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),_=require("../../../../../../../external/classnames/index.cjs.js"),w=require("react"),R=require("../../../../misc/separator/separator.cjs.js"),$=require("../../table-of-contents.cjs.js"),e=require("../../table-of-contents.module.scss.cjs.js"),r=({node:m,depth:c,index:d,numberPrefix:a})=>{const{activeId:p,numbered:o,activeTrail:x,defaultOpen:j}=w.useContext($.TableOfContentsContext),{id:n,content:v,children:s,separator:h,slot:i}=m,C=!!(s!=null&&s.length),u=!!n&&n===p,O=C&&(j||!!n&&x.has(n)),N=Math.min(c,2),l=a?`${a}.${d+1}`:`${d+1}`,q=a?l:`${l}.`,T=o?"ol":"ul";return t.jsxs("li",{"aria-current":u?"true":void 0,className:_.default(e.default["tedi-table-of-contents__item"],{[e.default["tedi-table-of-contents__item--selected"]]:u}),children:[t.jsxs("div",{className:_.default(e.default["tedi-table-of-contents__row"],e.default[`tedi-table-of-contents__row--level-${N}`]),children:[o&&t.jsx("span",{className:e.default["tedi-table-of-contents__number"],"aria-hidden":"true",children:q}),t.jsx("span",{className:e.default["tedi-table-of-contents__content"],children:v}),i!==void 0&&t.jsx("div",{className:e.default["tedi-table-of-contents__slot"],children:i})]}),O&&t.jsx(T,{className:e.default["tedi-table-of-contents__group"],children:s.map((f,b)=>t.jsx(r,{node:f,depth:c+1,index:b,numberPrefix:o?l:void 0},f.id??b))}),h&&t.jsx(R.Separator,{className:e.default["tedi-table-of-contents__separator"]})]})};r.displayName="TableOfContentsRow";exports.TableOfContentsRow=r;

package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-row/table-of-contents-row.es.js

@@ -1,45 +1,40 @@
 import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import f from "../../../../../../../external/classnames/index.es.js";
-import { useContext as x } from "react";
-import { Separator as g } from "../../../../misc/separator/separator.es.js";
-import { TableOfContentsContext as j } from "../../table-of-contents.es.js";
+import _ from "../../../../../../../external/classnames/index.es.js";
+import { useContext as j } from "react";
+import { Separator as y } from "../../../../misc/separator/separator.es.js";
+import { TableOfContentsContext as R } from "../../table-of-contents.es.js";
 import t from "../../table-of-contents.module.scss.es.js";
-const _ = ({ node: b, depth: i, index: l, numberPrefix: s }) => {
-  const { activeId: u, numbered: a, activeTrail: h } = x(j), { id: o, content: N, children: n, separator: v } = b, C = !!(n != null && n.length), c = !!o && o === u, $ = C && !!o && h.has(o), w = Math.min(i, 2), r = s ? `${s}.${l + 1}` : `${l + 1}`, O = s ? r : `${r}.`, T = a ? "ol" : "ul";
+const b = ({ node: u, depth: r, index: i, numberPrefix: s }) => {
+  const { activeId: h, numbered: a, activeTrail: v, defaultOpen: N } = j(R), { id: o, content: C, children: n, separator: O, slot: c } = u, $ = !!(n != null && n.length), d = !!o && o === h, w = $ && (N || !!o && v.has(o)), T = Math.min(r, 2), l = s ? `${s}.${i + 1}` : `${i + 1}`, x = s ? l : `${l}.`, g = a ? "ol" : "ul";
   return /* @__PURE__ */ p(
     "li",
     {
-      "aria-current": c ? "true" : void 0,
-      className: f(t["tedi-table-of-contents__item"], {
-        [t["tedi-table-of-contents__item--selected"]]: c
+      "aria-current": d ? "true" : void 0,
+      className: _(t["tedi-table-of-contents__item"], {
+        [t["tedi-table-of-contents__item--selected"]]: d
       }),
       children: [
-        /* @__PURE__ */ p(
-          "span",
-          {
-            className: f(t["tedi-table-of-contents__row"], t[`tedi-table-of-contents__row--level-${w}`]),
-            children: [
-              a && /* @__PURE__ */ e("span", { className: t["tedi-table-of-contents__number"], "aria-hidden": "true", children: O }),
-              /* @__PURE__ */ e("span", { className: t["tedi-table-of-contents__content"], children: N })
-            ]
-          }
-        ),
-        $ && /* @__PURE__ */ e(T, { className: t["tedi-table-of-contents__group"], children: n.map((m, d) => /* @__PURE__ */ e(
-          _,
+        /* @__PURE__ */ p("div", { className: _(t["tedi-table-of-contents__row"], t[`tedi-table-of-contents__row--level-${T}`]), children: [
+          a && /* @__PURE__ */ e("span", { className: t["tedi-table-of-contents__number"], "aria-hidden": "true", children: x }),
+          /* @__PURE__ */ e("span", { className: t["tedi-table-of-contents__content"], children: C }),
+          c !== void 0 && /* @__PURE__ */ e("div", { className: t["tedi-table-of-contents__slot"], children: c })
+        ] }),
+        w && /* @__PURE__ */ e(g, { className: t["tedi-table-of-contents__group"], children: n.map((m, f) => /* @__PURE__ */ e(
+          b,
           {
             node: m,
-            depth: i + 1,
-            index: d,
-            numberPrefix: a ? r : void 0
+            depth: r + 1,
+            index: f,
+            numberPrefix: a ? l : void 0
           },
-          m.id ?? d
+          m.id ?? f
         )) }),
-        v && /* @__PURE__ */ e(g, {})
+        O && /* @__PURE__ */ e(y, { className: t["tedi-table-of-contents__separator"] })
       ]
     }
   );
 };
-_.displayName = "TableOfContentsRow";
+b.displayName = "TableOfContentsRow";
 export {
-  _ as TableOfContentsRow
+  b as TableOfContentsRow
 };

package/src/tedi/components/navigation/table-of-contents/table-of-contents.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),S=require("../../misc/affix/affix.cjs.js"),k=require("./components/table-of-contents-collapsible/table-of-contents-collapsible.cjs.js"),y=require("./components/table-of-contents-item/table-of-contents-item.cjs.js"),M=require("./components/table-of-contents-list/table-of-contents-list.cjs.js"),b=require("./table-of-contents.module.scss.cjs.js"),w=require("../../../providers/label-provider/use-labels.cjs.js"),E=require("../../content/card/card.cjs.js"),P=require("../../content/card/card-content/card-content.cjs.js"),q=l.createContext({activeTrail:new Set}),C=n=>l.isValidElement(n)&&n.type===y.TableOfContentsItem,m=n=>l.Children.toArray(n).filter(C).map(c=>{const{id:s,separator:r,children:a}=c.props,o=l.Children.toArray(a),e=o.filter(C),i=o.filter(d=>!C(d));return{id:s,separator:r,content:t.jsx(t.Fragment,{children:i}),children:e.length?m(a):void 0}}),j=(n,c)=>{const s=new Set;if(!c)return s;const r=(a,o)=>{for(const e of a){const i=e.id?[...o,e.id]:o;if(e.id===c||e.children&&r(e.children,i))return i.forEach(d=>s.add(d)),!0}return!1};return r(n,[]),s};function u(n){const{getLabel:c}=w.useLabels(),{children:s,heading:r,headingLevel:a="h3",ariaLabel:o,activeId:e,numbered:i=!1,sticky:d=!0,variant:h="default",padding:p,className:N}=n,L=r===void 0?c("table-of-contents.title"):r,f=l.useMemo(()=>m(s),[s]),v=l.useMemo(()=>j(f,e),[f,e]),A=l.useMemo(()=>({activeId:e,numbered:i,headingLevel:a,ariaLabel:o,activeTrail:v}),[e,i,a,o,v]),I=p!==void 0?{"--tedi-table-of-contents-padding":`${p}rem`}:void 0,x=t.jsx("div",{className:g.default(b.default["tedi-table-of-contents"],{[b.default["tedi-table-of-contents--transparent"]]:h==="transparent"}),style:I,children:t.jsx(M.TableOfContentsList,{nodes:f,heading:L})}),T=g.default({[b.default["tedi-table-of-contents--sticky"]]:d},N),O=h==="transparent"?t.jsx("div",{className:T,children:x}):t.jsx(E.Card,{className:T,children:t.jsx(P.CardContent,{padding:0,children:x})});return t.jsx(q.Provider,{value:A,children:d?t.jsx(S.Affix,{position:"sticky",top:1.5,bottom:1.5,children:O}):O})}u.displayName="TableOfContents";u.Item=y.TableOfContentsItem;u.Collapsible=k.TableOfContentsCollapsible;exports.TableOfContents=u;exports.TableOfContentsContext=q;exports.buildActiveTrail=j;exports.childrenToNodes=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),P=require("../../misc/affix/affix.cjs.js"),S=require("./components/table-of-contents-collapsible/table-of-contents-collapsible.cjs.js"),j=require("./components/table-of-contents-item/table-of-contents-item.cjs.js"),B=require("./components/table-of-contents-list/table-of-contents-list.cjs.js"),f=require("./table-of-contents.module.scss.cjs.js"),M=require("../../../providers/label-provider/use-labels.cjs.js"),w=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),E=require("../../content/card/card.cjs.js"),R=require("../../content/card/card-content/card-content.cjs.js"),y=i.createContext({activeTrail:new Set}),m=t=>i.isValidElement(t)&&t.type===j.TableOfContentsItem,h=t=>i.Children.toArray(t).filter(m).map(l=>{const{id:o,separator:a,slot:c,children:s}=l.props,e=i.Children.toArray(s),n=e.filter(m),d=e.filter(u=>!m(u));return{id:o,separator:a,slot:c,content:r.jsx(r.Fragment,{children:d}),children:n.length?h(s):void 0}}),k=(t,l)=>{const o=new Set;if(!l)return o;const a=(c,s)=>{for(const e of c){const n=e.id?[...s,e.id]:s;if(e.id===l||e.children&&a(e.children,n))return n.forEach(d=>o.add(d)),!0}return!1};return a(t,[]),o};function b(t){const{getLabel:l}=M.useLabels(),{getCurrentBreakpointProps:o}=w.useBreakpointProps(t.defaultServerBreakpoint),{children:a,heading:c,headingLevel:s="h3",ariaLabel:e,activeId:n,defaultOpen:d=!0,numbered:u=!1,sticky:p=!0,variant:x="default",bordered:N=!1,className:L}=o(t),A=c===void 0?l("table-of-contents.title"):c,C=i.useMemo(()=>h(a),[a]),T=i.useMemo(()=>k(C,n),[C,n]),I=i.useMemo(()=>({activeId:n,numbered:u,headingLevel:s,ariaLabel:e,activeTrail:T,defaultOpen:d}),[n,u,s,e,T,d]),v=r.jsx("div",{className:g.default(f.default["tedi-table-of-contents"],{[f.default["tedi-table-of-contents--transparent"]]:x==="transparent",[f.default["tedi-table-of-contents--bordered"]]:N}),children:r.jsx(B.TableOfContentsList,{nodes:C,heading:A})}),O=g.default({[f.default["tedi-table-of-contents--sticky"]]:p},L),q=x==="transparent"?r.jsx("div",{className:O,children:v}):r.jsx(E.Card,{className:O,children:r.jsx(R.CardContent,{padding:0,children:v})});return r.jsx(y.Provider,{value:I,children:p?r.jsx(P.Affix,{position:"sticky",top:1.5,bottom:1.5,children:q}):q})}b.displayName="TableOfContents";b.Item=j.TableOfContentsItem;b.Collapsible=S.TableOfContentsCollapsible;exports.TableOfContents=b;exports.TableOfContentsContext=y;exports.buildActiveTrail=k;exports.childrenToNodes=h;

package/src/tedi/components/navigation/table-of-contents/table-of-contents.d.ts

@@ -1,8 +1,24 @@
 import { ReactNode } from 'react';
+import { BreakpointSupport } from '../../../helpers';
 import { TableOfContentsItemProps } from './components/table-of-contents-item/table-of-contents-item';
-/** Semantic level of the `TableOfContents` heading element. */
 export type TableOfContentsHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export interface TableOfContentsProps {
+type TableOfContentsBreakpointProps = {
+    /**
+     * Visual variant:
+     * - `default` — rendered inside a bordered `Card`.
+     * - `transparent` — no card chrome (border / background); the list sits
+     *   directly on the page, with a continuous grey left rail (the active item's
+     *   segment turns blue).
+     * @default default
+     */
+    variant?: 'default' | 'transparent';
+    /**
+     * Stick the card to the viewport while scrolling.
+     * @default true
+     */
+    sticky?: boolean;
+};
+export interface TableOfContentsProps extends BreakpointSupport<TableOfContentsBreakpointProps> {
     /**
      * `TableOfContents.Item` elements. An item's non-`Item` children are its
      * link / label; nested `TableOfContents.Item` children become its sub-items.
@@ -28,36 +44,29 @@ export interface TableOfContentsProps {
      */
     ariaLabel?: string;
     /**
-     * Visual variant:
-     * - `default` — rendered inside a bordered `Card`.
-     * - `transparent` — no card chrome (border / background); the list sits
-     *   directly on the page, with a continuous grey left rail (the active item's
-     *   segment turns blue).
-     * @default default
+     * Id of the currently active item. The active item gets the left accent bar
+     * and active link colour. When `defaultOpen` is `false`, the branch leading
+     * to it is the only one kept expanded.
      */
-    variant?: 'default' | 'transparent';
+    activeId?: string;
     /**
-     * Inner padding of the container, in rem — the spacing between the card edge and the
-     * heading / items. Defaults to the card's medium padding token.
+     * Draws a divider between items so the list reads as a set of separated rows. The last item has no
+     * divider — the card border closes the list.
+     * @default false
      */
-    padding?: number;
+    bordered?: boolean;
     /**
-     * Id of the currently active item. The active item gets the left accent bar
-     * and active link colour; the branch leading to it auto-expands its nested
-     * children.
+     * Whether every item's sub-items are expanded by default. Set `false` to make the list behave like
+     * an accordion: only the branch leading to `activeId` keeps its nested children visible.
+     * @default true
      */
-    activeId?: string;
+    defaultOpen?: boolean;
     /**
      * Render the list as an ordered list with auto-generated hierarchical numbers
      * (`1.`, `2.`, `2.1`, …) shown before each item.
      * @default false
      */
     numbered?: boolean;
-    /**
-     * Stick the card to the viewport while scrolling.
-     * @default true
-     */
-    sticky?: boolean;
     /**
      * Additional class name on the root element.
      */
@@ -69,6 +78,7 @@ export interface TableOfContentsNode {
     content: ReactNode;
     children?: TableOfContentsNode[];
     separator?: boolean;
+    slot?: ReactNode;
 }
 interface TableOfContentsContextValue {
     activeId?: string;
@@ -76,6 +86,7 @@ interface TableOfContentsContextValue {
     headingLevel?: TableOfContentsHeadingLevel;
     ariaLabel?: string;
     activeTrail: Set<string>;
+    defaultOpen?: boolean;
 }
 export declare const TableOfContentsContext: import('react').Context<TableOfContentsContextValue>;
 export declare const childrenToNodes: (children: ReactNode) => TableOfContentsNode[];

package/src/tedi/components/navigation/table-of-contents/table-of-contents.es.js

@@ -1,70 +1,73 @@
-import { jsx as r, Fragment as w } from "react/jsx-runtime";
-import T from "../../../../../external/classnames/index.es.js";
-import { useMemo as m, createContext as E, Children as N, isValidElement as S } from "react";
-import { Affix as V } from "../../misc/affix/affix.es.js";
-import { TableOfContentsCollapsible as j } from "./components/table-of-contents-collapsible/table-of-contents-collapsible.es.js";
-import { TableOfContentsItem as x } from "./components/table-of-contents-item/table-of-contents-item.es.js";
-import { TableOfContentsList as F } from "./components/table-of-contents-list/table-of-contents-list.es.js";
-import f from "./table-of-contents.module.scss.es.js";
-import { useLabels as H } from "../../../providers/label-provider/use-labels.es.js";
+import { jsx as o, Fragment as B } from "react/jsx-runtime";
+import N from "../../../../../external/classnames/index.es.js";
+import { useMemo as p, createContext as E, Children as k, isValidElement as P } from "react";
+import { Affix as S } from "../../misc/affix/affix.es.js";
+import { TableOfContentsCollapsible as V } from "./components/table-of-contents-collapsible/table-of-contents-collapsible.es.js";
+import { TableOfContentsItem as O } from "./components/table-of-contents-item/table-of-contents-item.es.js";
+import { TableOfContentsList as j } from "./components/table-of-contents-list/table-of-contents-list.es.js";
+import m from "./table-of-contents.module.scss.es.js";
+import { useLabels as F } from "../../../providers/label-provider/use-labels.es.js";
+import { useBreakpointProps as H } from "../../../helpers/hooks/use-breakpoint-props.es.js";
 import { Card as M } from "../../content/card/card.es.js";
-import { CardContent as P } from "../../content/card/card-content/card-content.es.js";
-const $ = E({
+import { CardContent as q } from "../../content/card/card-content/card-content.es.js";
+const z = E({
   activeTrail: /* @__PURE__ */ new Set()
-}), p = (e) => S(e) && e.type === x, O = (e) => N.toArray(e).filter(p).map((l) => {
-  const { id: n, separator: i, children: s } = l.props, o = N.toArray(s), t = o.filter(p), a = o.filter((c) => !p(c));
+}), u = (e) => P(e) && e.type === O, x = (e) => k.toArray(e).filter(u).map((a) => {
+  const { id: i, separator: s, slot: l, children: r } = a.props, t = k.toArray(r), n = t.filter(u), c = t.filter((d) => !u(d));
   return {
-    id: n,
-    separator: i,
-    content: /* @__PURE__ */ r(w, { children: a }),
-    children: t.length ? O(s) : void 0
+    id: i,
+    separator: s,
+    slot: l,
+    content: /* @__PURE__ */ o(B, { children: c }),
+    children: n.length ? x(r) : void 0
   };
-}), q = (e, l) => {
-  const n = /* @__PURE__ */ new Set();
-  if (!l) return n;
-  const i = (s, o) => {
-    for (const t of s) {
-      const a = t.id ? [...o, t.id] : o;
-      if (t.id === l || t.children && i(t.children, a))
-        return a.forEach((c) => n.add(c)), !0;
+}), D = (e, a) => {
+  const i = /* @__PURE__ */ new Set();
+  if (!a) return i;
+  const s = (l, r) => {
+    for (const t of l) {
+      const n = t.id ? [...r, t.id] : r;
+      if (t.id === a || t.children && s(t.children, n))
+        return n.forEach((c) => i.add(c)), !0;
     }
     return !1;
   };
-  return i(e, []), n;
+  return s(e, []), i;
 };
-function h(e) {
-  const { getLabel: l } = H(), {
-    children: n,
-    heading: i,
-    headingLevel: s = "h3",
-    ariaLabel: o,
-    activeId: t,
-    numbered: a = !1,
-    sticky: c = !0,
-    variant: b = "default",
-    padding: u,
-    className: A
-  } = e, L = i === void 0 ? l("table-of-contents.title") : i, d = m(() => O(n), [n]), C = m(() => q(d, t), [d, t]), k = m(
-    () => ({ activeId: t, numbered: a, headingLevel: s, ariaLabel: o, activeTrail: C }),
-    [t, a, s, o, C]
-  ), I = u !== void 0 ? { "--tedi-table-of-contents-padding": `${u}rem` } : void 0, v = /* @__PURE__ */ r(
+function b(e) {
+  const { getLabel: a } = F(), { getCurrentBreakpointProps: i } = H(e.defaultServerBreakpoint), {
+    children: s,
+    heading: l,
+    headingLevel: r = "h3",
+    ariaLabel: t,
+    activeId: n,
+    defaultOpen: c = !0,
+    numbered: d = !1,
+    sticky: h = !0,
+    variant: C = "default",
+    bordered: A = !1,
+    className: L
+  } = i(e), I = l === void 0 ? a("table-of-contents.title") : l, f = p(() => x(s), [s]), v = p(() => D(f, n), [f, n]), w = p(
+    () => ({ activeId: n, numbered: d, headingLevel: r, ariaLabel: t, activeTrail: v, defaultOpen: c }),
+    [n, d, r, t, v, c]
+  ), T = /* @__PURE__ */ o(
     "div",
     {
-      className: T(f["tedi-table-of-contents"], {
-        [f["tedi-table-of-contents--transparent"]]: b === "transparent"
+      className: N(m["tedi-table-of-contents"], {
+        [m["tedi-table-of-contents--transparent"]]: C === "transparent",
+        [m["tedi-table-of-contents--bordered"]]: A
       }),
-      style: I,
-      children: /* @__PURE__ */ r(F, { nodes: d, heading: L })
+      children: /* @__PURE__ */ o(j, { nodes: f, heading: I })
     }
-  ), y = T({ [f["tedi-table-of-contents--sticky"]]: c }, A), g = b === "transparent" ? /* @__PURE__ */ r("div", { className: y, children: v }) : /* @__PURE__ */ r(M, { className: y, children: /* @__PURE__ */ r(P, { padding: 0, children: v }) });
-  return /* @__PURE__ */ r($.Provider, { value: k, children: c ? /* @__PURE__ */ r(V, { position: "sticky", top: 1.5, bottom: 1.5, children: g }) : g });
+  ), g = N({ [m["tedi-table-of-contents--sticky"]]: h }, L), y = C === "transparent" ? /* @__PURE__ */ o("div", { className: g, children: T }) : /* @__PURE__ */ o(M, { className: g, children: /* @__PURE__ */ o(q, { padding: 0, children: T }) });
+  return /* @__PURE__ */ o(z.Provider, { value: w, children: h ? /* @__PURE__ */ o(S, { position: "sticky", top: 1.5, bottom: 1.5, children: y }) : y });
 }
-h.displayName = "TableOfContents";
-h.Item = x;
-h.Collapsible = j;
+b.displayName = "TableOfContents";
+b.Item = O;
+b.Collapsible = V;
 export {
-  h as TableOfContents,
-  $ as TableOfContentsContext,
-  q as buildActiveTrail,
-  O as childrenToNodes
+  b as TableOfContents,
+  z as TableOfContentsContext,
+  D as buildActiveTrail,
+  x as childrenToNodes
 };

package/src/tedi/components/navigation/table-of-contents/table-of-contents.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-table-of-contents":"tedi-table-of-contents-ce55e86d","tedi-table-of-contents--transparent":"tedi-table-of-contents--transparent-067ea2c2","tedi-table-of-contents__list":"tedi-table-of-contents__list-94025876","tedi-table-of-contents--sticky":"tedi-table-of-contents--sticky-1ee87047","tedi-table-of-contents__heading":"tedi-table-of-contents__heading-c6b7a6df","tedi-table-of-contents__group":"tedi-table-of-contents__group-590e4963","tedi-table-of-contents__list--headless":"tedi-table-of-contents__list--headless-99c1bab5","tedi-table-of-contents__item":"tedi-table-of-contents__item-29f072b5","tedi-table-of-contents__row":"tedi-table-of-contents__row-fb686650","tedi-table-of-contents__row--level-2":"tedi-table-of-contents__row--level-2-4fec675b","tedi-table-of-contents__number":"tedi-table-of-contents__number-693b03b7","tedi-table-of-contents__content":"tedi-table-of-contents__content-8a05ad59","tedi-table-of-contents__item--selected":"tedi-table-of-contents__item--selected-632958d1","tedi-table-of-contents__bar":"tedi-table-of-contents__bar-f4daef0b","tedi-table-of-contents__bar--static":"tedi-table-of-contents__bar--static-f919cf73","tedi-table-of-contents__bar-title":"tedi-table-of-contents__bar-title-b82ab4ed","tedi-table-of-contents__sheet":"tedi-table-of-contents__sheet-16e41b54","tedi-table-of-contents__sheet-header":"tedi-table-of-contents__sheet-header-ec904c54"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-table-of-contents":"tedi-table-of-contents-ce55e86d","tedi-table-of-contents--bordered":"tedi-table-of-contents--bordered-90b16d0b","tedi-table-of-contents--transparent":"tedi-table-of-contents--transparent-067ea2c2","tedi-table-of-contents__list":"tedi-table-of-contents__list-94025876","tedi-table-of-contents--sticky":"tedi-table-of-contents--sticky-1ee87047","tedi-table-of-contents__heading":"tedi-table-of-contents__heading-c6b7a6df","tedi-table-of-contents__group":"tedi-table-of-contents__group-590e4963","tedi-table-of-contents__item":"tedi-table-of-contents__item-29f072b5","tedi-table-of-contents__row":"tedi-table-of-contents__row-fb686650","tedi-table-of-contents__row--level-2":"tedi-table-of-contents__row--level-2-4fec675b","tedi-table-of-contents__number":"tedi-table-of-contents__number-693b03b7","tedi-table-of-contents__content":"tedi-table-of-contents__content-8a05ad59","tedi-table-of-contents__slot":"tedi-table-of-contents__slot-53aefc57","tedi-table-of-contents__item--selected":"tedi-table-of-contents__item--selected-632958d1","tedi-table-of-contents__separator":"tedi-table-of-contents__separator-b824eeee","tedi-table-of-contents__bar":"tedi-table-of-contents__bar-f4daef0b","tedi-table-of-contents__bar--static":"tedi-table-of-contents__bar--static-f919cf73","tedi-table-of-contents__bar--hidden":"tedi-table-of-contents__bar--hidden-53dd04a2","tedi-table-of-contents__bar-title":"tedi-table-of-contents__bar-title-b82ab4ed","tedi-table-of-contents__sheet":"tedi-table-of-contents__sheet-16e41b54","tedi-table-of-contents__sheet-header":"tedi-table-of-contents__sheet-header-ec904c54"};exports.default=t;

package/src/tedi/components/navigation/table-of-contents/table-of-contents.module.scss.es.js

@@ -1,19 +1,22 @@
 const t = {
   "tedi-table-of-contents": "tedi-table-of-contents-ce55e86d",
+  "tedi-table-of-contents--bordered": "tedi-table-of-contents--bordered-90b16d0b",
   "tedi-table-of-contents--transparent": "tedi-table-of-contents--transparent-067ea2c2",
   "tedi-table-of-contents__list": "tedi-table-of-contents__list-94025876",
   "tedi-table-of-contents--sticky": "tedi-table-of-contents--sticky-1ee87047",
   "tedi-table-of-contents__heading": "tedi-table-of-contents__heading-c6b7a6df",
   "tedi-table-of-contents__group": "tedi-table-of-contents__group-590e4963",
-  "tedi-table-of-contents__list--headless": "tedi-table-of-contents__list--headless-99c1bab5",
   "tedi-table-of-contents__item": "tedi-table-of-contents__item-29f072b5",
   "tedi-table-of-contents__row": "tedi-table-of-contents__row-fb686650",
   "tedi-table-of-contents__row--level-2": "tedi-table-of-contents__row--level-2-4fec675b",
   "tedi-table-of-contents__number": "tedi-table-of-contents__number-693b03b7",
   "tedi-table-of-contents__content": "tedi-table-of-contents__content-8a05ad59",
+  "tedi-table-of-contents__slot": "tedi-table-of-contents__slot-53aefc57",
   "tedi-table-of-contents__item--selected": "tedi-table-of-contents__item--selected-632958d1",
+  "tedi-table-of-contents__separator": "tedi-table-of-contents__separator-b824eeee",
   "tedi-table-of-contents__bar": "tedi-table-of-contents__bar-f4daef0b",
   "tedi-table-of-contents__bar--static": "tedi-table-of-contents__bar--static-f919cf73",
+  "tedi-table-of-contents__bar--hidden": "tedi-table-of-contents__bar--hidden-53dd04a2",
   "tedi-table-of-contents__bar-title": "tedi-table-of-contents__bar-title-b82ab4ed",
   "tedi-table-of-contents__sheet": "tedi-table-of-contents__sheet-16e41b54",
   "tedi-table-of-contents__sheet-header": "tedi-table-of-contents__sheet-header-ec904c54"

package/src/tedi/components/navigation/vertical-stepper/index.d.ts

@@ -0,0 +1,3 @@
+export * from './vertical-stepper';
+export * from './vertical-stepper-item';
+export * from './vertical-stepper-sub-item';

package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({compact:!1}),r=()=>e.useContext(t);exports.VerticalStepperContext=t;exports.useVerticalStepperContext=r;

package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-context.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface VerticalStepperContextValue {
+    /**
+     * Compact density — smaller indicators and tighter rows. Provided by the
+     * parent `VerticalStepper` so items and sub-items render in the same size.
+     */
+    compact: boolean;
+}
+export declare const VerticalStepperContext: React.Context<VerticalStepperContextValue>;
+export declare const useVerticalStepperContext: () => VerticalStepperContextValue;

package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-context.es.js

@@ -0,0 +1,8 @@
+import t from "react";
+const e = t.createContext({
+  compact: !1
+}), c = () => t.useContext(e);
+export {
+  e as VerticalStepperContext,
+  c as useVerticalStepperContext
+};

package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),D=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),l=require("../../base/icon/icon.cjs.js"),O=require("../../base/typography/text/text.cjs.js"),P=require("../../buttons/collapse-button/collapse-button.cjs.js"),t=require("./vertical-stepper.module.scss.cjs.js"),A=require("./vertical-stepper-context.cjs.js"),G=require("../../../providers/label-provider/use-labels.cjs.js"),z=r.forwardRef((T,k)=>{const{getLabel:i}=G.useLabels(),{compact:a}=A.useVerticalStepperContext(),{title:n,description:m,state:s="default",current:_=!1,href:c,onClick:v,as:L,endSlot:h,children:x,open:f,defaultOpen:V,onToggle:d,className:$,index:w}=T,o=`tedi-vertical-stepper-sublist-${r.useId()}`,b=r.Children.count(x)>0,j=s==="disabled",N=!j&&(c!==void 0||v!==void 0),p=L??(c?"a":"button"),[B,R]=r.useState(V??!1),u=f??B,E=()=>{const C=!u;f===void 0&&R(C),d==null||d(C)},F=D.default(t.default["tedi-vertical-stepper__item"],t.default[`tedi-vertical-stepper__item--${s}`],{[t.default["tedi-vertical-stepper__item--current"]]:_,[t.default["tedi-vertical-stepper__item--has-children"]]:b},$),M=e.jsx("span",{className:t.default["tedi-vertical-stepper__indicator"],children:a?s==="completed"?e.jsx(l.Icon,{name:"check",size:16,color:"white",label:i("stepper.completed")}):s==="error"?e.jsx(l.Icon,{name:"priority_high",size:16,color:"white",label:i("stepper.error")}):null:e.jsx("span",{className:t.default["tedi-vertical-stepper__number"],children:w})}),g=e.jsxs(O.Text,{element:"span",className:t.default["tedi-vertical-stepper__label"],children:[e.jsx("span",{className:t.default["tedi-vertical-stepper__label-text"],children:n}),!a&&s==="completed"&&e.jsx(l.Icon,{name:"check",color:"success",size:16,display:"inline",label:i("stepper.completed"),className:t.default["tedi-vertical-stepper__label-icon"]}),!a&&s==="error"&&e.jsx(l.Icon,{name:"error",color:"danger",size:16,display:"inline",label:i("stepper.error"),className:t.default["tedi-vertical-stepper__label-icon"]}),j&&e.jsxs("span",{className:"visually-hidden",children:[" (",i("stepper.disabled"),")"]})]}),I=m&&e.jsx(O.Text,{element:"span",modifiers:"small",color:"tertiary",className:t.default["tedi-vertical-stepper__description"],children:m}),S=h&&e.jsx("div",{className:t.default["tedi-vertical-stepper__end-slot"],children:h}),y=_?"step":void 0,q=N?e.jsx(p,{href:p==="a"?c:void 0,type:p==="button"?"button":void 0,onClick:v,"aria-current":y,className:t.default["tedi-vertical-stepper__link"],children:g}):g;return e.jsxs("li",{ref:k,"aria-current":N?void 0:y,className:F,children:[M,e.jsx("div",{className:t.default["tedi-vertical-stepper__content"],children:b?e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:t.default["tedi-vertical-stepper__toggle"],children:[q,e.jsx(P.CollapseButton,{id:`${o}-toggle`,hideText:!0,size:"small",open:u,onOpenChange:E,"aria-controls":o,"aria-label":typeof n=="string"?n:void 0,className:t.default["tedi-vertical-stepper__toggle-button"]})]}),I,S,e.jsx("ul",{id:o,hidden:!u,className:t.default["tedi-vertical-stepper__sub-list"],children:x})]}):e.jsxs(e.Fragment,{children:[q,I,S]})})]})});z.displayName="VerticalStepperItem";exports.VerticalStepperItem=z;