@tedi-design-system/react 19.1.0-rc.6 → 19.1.0-rc.8

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

@@ -1,10 +1,18 @@
 import { TableOfContentsProps } from '../../table-of-contents';
-export interface TableOfContentsCollapsibleProps extends Pick<TableOfContentsProps, 'children' | 'heading' | 'ariaLabel' | 'activeId' | 'numbered' | 'className'> {
+export interface TableOfContentsCollapsibleProps extends Pick<TableOfContentsProps, 'children' | 'heading' | 'ariaLabel' | 'activeId' | 'numbered' | 'bordered' | 'defaultOpen' | 'className'> {
     /**
      * Pin the bar to the bottom of the viewport. Set `false` to render it inline.
      * @default true
      */
     sticky?: boolean;
+    /**
+     * Mobile-only behaviour of this `TableOfContents.Collapsible` bar — there is no desktop equivalent.
+     * When the bar is pinned (`sticky`), auto-hide it while the page scrolls down and reveal it again on
+     * scroll up, so it stays out of the way while reading but is one gesture away. No effect when
+     * `sticky` is `false`.
+     * @default false
+     */
+    hideOnScroll?: boolean;
 }
 /**
  * Mobile variant of `TableOfContents`: a bottom bar that opens the list in a bottom-sheet overlay.

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

@@ -1,58 +1,97 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import k from "../../../../../../../external/classnames/index.es.js";
-import { useState as v, useEffect as y, useMemo as c } from "react";
-import { Text as g } from "../../../../base/typography/text/text.es.js";
-import { CollapseButton as _ } from "../../../../buttons/collapse-button/collapse-button.es.js";
-import { Sheet as j } from "../../../../overlays/sheet/sheet.es.js";
-import { childrenToNodes as H, buildActiveTrail as S, TableOfContentsContext as A } from "../../table-of-contents.es.js";
-import t from "../../table-of-contents.module.scss.es.js";
-import { TableOfContentsList as B } from "../table-of-contents-list/table-of-contents-list.es.js";
-import { useLabels as I } from "../../../../../providers/label-provider/use-labels.es.js";
-const M = (N) => {
-  const { children: d, heading: m, ariaLabel: C, activeId: n, numbered: f = !1, sticky: L = !0, className: T } = N, { getLabel: b } = I(), [o, a] = v(!1), [s, O] = v(null);
-  y(() => {
-    if (!o || !s) return;
-    const u = (E) => {
-      E.target.closest("a, button") && a(!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 s.addEventListener("click", u), () => s.removeEventListener("click", u);
-  }, [o, s]);
-  const l = (m === void 0 ? b("table-of-contents.title") : m) ?? b("table-of-contents.title"), p = C || l, i = c(() => H(d), [d]), h = c(() => S(i, n), [i, n]), x = c(
-    () => ({ activeId: n, numbered: f, ariaLabel: p, activeTrail: h }),
-    [n, f, p, h]
+    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__ */ r(A.Provider, { value: x, children: [
-    /* @__PURE__ */ r(
+  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"]]: !L },
-          T
+        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(g, { modifiers: "bold", className: t["tedi-table-of-contents__bar-title"], children: l }),
-          /* @__PURE__ */ e(_, { open: o, onOpenChange: a, 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(
-      j,
+    /* @__PURE__ */ n(
+      q,
       {
         open: o,
         onToggle: a,
-        ariaLabel: l,
-        className: t["tedi-table-of-contents__sheet"],
-        header: /* @__PURE__ */ r("div", { className: t["tedi-table-of-contents__sheet-header"], children: [
-          /* @__PURE__ */ e(g, { modifiers: "bold", className: t["tedi-table-of-contents__bar-title"], children: l }),
-          /* @__PURE__ */ e(_, { open: o, onOpenChange: a, underline: !1 })
+        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__ */ e("div", { ref: O, className: t["tedi-table-of-contents"], children: /* @__PURE__ */ e(B, { nodes: i, heading: null }) })
+        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 })
+          }
+        )
       }
     )
   ] });
 };
-M.displayName = "TableOfContentsCollapsible";
+D.displayName = "TableOfContentsCollapsible";
 export {
-  M 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"