@tedi-design-system/react 19.1.0-rc.5 → 19.1.0-rc.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.1.0-rc.5",
+  "version": "19.1.0-rc.7",
   "description": "TEDI Design System React component library — accessible, reusable UI components. Docs & live examples: https://storybook.tedi.ee/react/rc/",
   "type": "module",
   "sideEffects": false,
@@ -47,7 +47,7 @@
     "@mui/material": "^5.15.13",
     "@mui/x-date-pickers": "^5.0.20",
     "@tanstack/react-table": "^8.13.2",
-    "@tedi-design-system/core": "^6.8.1",
+    "@tedi-design-system/core": "^6.9.0",
     "classnames": "^2.5.1",
     "draft-js": "^0.11.7",
     "draftjs-md-converter": "^1.5.2",

package/src/tedi/components/content/card/card.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r={"tedi-card":"tedi-card-46f8f767","tedi-card--background--accent":"tedi-card--background--accent-930871c7","tedi-card--border--accent":"tedi-card--border--accent-90f35e66","tedi-card--background--brand-primary":"tedi-card--background--brand-primary-01c89a1e","tedi-card--border--brand-primary":"tedi-card--border--brand-primary-987cfd48","tedi-card--background--brand-secondary":"tedi-card--background--brand-secondary-52a2d6ee","tedi-card--border--brand-secondary":"tedi-card--border--brand-secondary-155df9fc","tedi-card--background--brand-tertiary":"tedi-card--background--brand-tertiary-6e531e52","tedi-card--border--brand-tertiary":"tedi-card--border--brand-tertiary-90e59b2f","tedi-card--background--brand-quaternary":"tedi-card--background--brand-quaternary-302574ef","tedi-card--border--brand-quaternary":"tedi-card--border--brand-quaternary-8fecab3d","tedi-card--background--primary":"tedi-card--background--primary-97377456","tedi-card--border--primary":"tedi-card--border--primary-6fb38184","tedi-card--background--secondary":"tedi-card--background--secondary-03bafe87","tedi-card--border--secondary":"tedi-card--border--secondary-a2efb368","tedi-card--background--tertiary":"tedi-card--background--tertiary-9aaed047","tedi-card--border--tertiary":"tedi-card--border--tertiary-36ed56dc","tedi-card--background--info-primary":"tedi-card--background--info-primary-a447d86c","tedi-card--border--info-primary":"tedi-card--border--info-primary-3a459b1a","tedi-card--background--info-secondary":"tedi-card--background--info-secondary-ccb381f3","tedi-card--border--info-secondary":"tedi-card--border--info-secondary-b177e078","tedi-card--background--neutral-primary":"tedi-card--background--neutral-primary-e8462085","tedi-card--border--neutral-primary":"tedi-card--border--neutral-primary-0e494a3a","tedi-card--background--neutral-secondary":"tedi-card--background--neutral-secondary-78f69323","tedi-card--border--neutral-secondary":"tedi-card--border--neutral-secondary-2eacfcf2","tedi-card--background--success-primary":"tedi-card--background--success-primary-74cc128e","tedi-card--border--success-primary":"tedi-card--border--success-primary-ad13f6a9","tedi-card--background--success-secondary":"tedi-card--background--success-secondary-2e51dbc2","tedi-card--border--success-secondary":"tedi-card--border--success-secondary-d2d310bf","tedi-card--background--danger-primary":"tedi-card--background--danger-primary-24f9b394","tedi-card--border--danger-primary":"tedi-card--border--danger-primary-ca67a077","tedi-card--background--danger-secondary":"tedi-card--background--danger-secondary-d7d418a7","tedi-card--border--danger-secondary":"tedi-card--border--danger-secondary-58c75b3c","tedi-card--background--warning-primary":"tedi-card--background--warning-primary-0c9bdb9e","tedi-card--border--warning-primary":"tedi-card--border--warning-primary-67735d46","tedi-card--background--warning-secondary":"tedi-card--background--warning-secondary-ade88bae","tedi-card--border--warning-secondary":"tedi-card--border--warning-secondary-04a1f223","tedi-card--border-left":"tedi-card--border-left-55222a12","tedi-card--border-top":"tedi-card--border-top-4a483c06","tedi-card--borderless":"tedi-card--borderless-66eb216d","tedi-card--no-radius-tl":"tedi-card--no-radius-tl-fc11f3e6","tedi-card__header":"tedi-card__header-e3ceedf1","tedi-card__content":"tedi-card__content-79613a61","tedi-card--no-radius-tr":"tedi-card--no-radius-tr-89903519","tedi-card--no-radius-br":"tedi-card--no-radius-br-06b8b7e4","tedi-card--no-radius-bl":"tedi-card--no-radius-bl-b5a6dd25","tedi-card__content--separator":"tedi-card__content--separator-2fb649b6"};exports.default=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r={"tedi-card":"tedi-card-46f8f767","tedi-card__header":"tedi-card__header-e3ceedf1","tedi-card__content":"tedi-card__content-79613a61","tedi-card__notification-content":"tedi-card__notification-content-b8dbce7e","tedi-card--background--accent":"tedi-card--background--accent-930871c7","tedi-card--border--accent":"tedi-card--border--accent-90f35e66","tedi-card--background--brand-primary":"tedi-card--background--brand-primary-01c89a1e","tedi-card--border--brand-primary":"tedi-card--border--brand-primary-987cfd48","tedi-card--background--brand-secondary":"tedi-card--background--brand-secondary-52a2d6ee","tedi-card--border--brand-secondary":"tedi-card--border--brand-secondary-155df9fc","tedi-card--background--brand-tertiary":"tedi-card--background--brand-tertiary-6e531e52","tedi-card--border--brand-tertiary":"tedi-card--border--brand-tertiary-90e59b2f","tedi-card--background--brand-quaternary":"tedi-card--background--brand-quaternary-302574ef","tedi-card--border--brand-quaternary":"tedi-card--border--brand-quaternary-8fecab3d","tedi-card--background--primary":"tedi-card--background--primary-97377456","tedi-card--border--primary":"tedi-card--border--primary-6fb38184","tedi-card--background--secondary":"tedi-card--background--secondary-03bafe87","tedi-card--border--secondary":"tedi-card--border--secondary-a2efb368","tedi-card--background--tertiary":"tedi-card--background--tertiary-9aaed047","tedi-card--border--tertiary":"tedi-card--border--tertiary-36ed56dc","tedi-card--background--info-primary":"tedi-card--background--info-primary-a447d86c","tedi-card--border--info-primary":"tedi-card--border--info-primary-3a459b1a","tedi-card--background--info-secondary":"tedi-card--background--info-secondary-ccb381f3","tedi-card--border--info-secondary":"tedi-card--border--info-secondary-b177e078","tedi-card--background--neutral-primary":"tedi-card--background--neutral-primary-e8462085","tedi-card--border--neutral-primary":"tedi-card--border--neutral-primary-0e494a3a","tedi-card--background--neutral-secondary":"tedi-card--background--neutral-secondary-78f69323","tedi-card--border--neutral-secondary":"tedi-card--border--neutral-secondary-2eacfcf2","tedi-card--background--success-primary":"tedi-card--background--success-primary-74cc128e","tedi-card--border--success-primary":"tedi-card--border--success-primary-ad13f6a9","tedi-card--background--success-secondary":"tedi-card--background--success-secondary-2e51dbc2","tedi-card--border--success-secondary":"tedi-card--border--success-secondary-d2d310bf","tedi-card--background--danger-primary":"tedi-card--background--danger-primary-24f9b394","tedi-card--border--danger-primary":"tedi-card--border--danger-primary-ca67a077","tedi-card--background--danger-secondary":"tedi-card--background--danger-secondary-d7d418a7","tedi-card--border--danger-secondary":"tedi-card--border--danger-secondary-58c75b3c","tedi-card--background--warning-primary":"tedi-card--background--warning-primary-0c9bdb9e","tedi-card--border--warning-primary":"tedi-card--border--warning-primary-67735d46","tedi-card--background--warning-secondary":"tedi-card--background--warning-secondary-ade88bae","tedi-card--border--warning-secondary":"tedi-card--border--warning-secondary-04a1f223","tedi-card--border-left":"tedi-card--border-left-55222a12","tedi-card--border-top":"tedi-card--border-top-4a483c06","tedi-card--borderless":"tedi-card--borderless-66eb216d","tedi-card--no-radius-tl":"tedi-card--no-radius-tl-fc11f3e6","tedi-card--no-radius-tr":"tedi-card--no-radius-tr-89903519","tedi-card--no-radius-br":"tedi-card--no-radius-br-06b8b7e4","tedi-card--no-radius-bl":"tedi-card--no-radius-bl-b5a6dd25","tedi-card__content--separator":"tedi-card__content--separator-2fb649b6"};exports.default=r;

package/src/tedi/components/content/card/card.module.scss.es.js

@@ -1,5 +1,8 @@
 const r = {
   "tedi-card": "tedi-card-46f8f767",
+  "tedi-card__header": "tedi-card__header-e3ceedf1",
+  "tedi-card__content": "tedi-card__content-79613a61",
+  "tedi-card__notification-content": "tedi-card__notification-content-b8dbce7e",
   "tedi-card--background--accent": "tedi-card--background--accent-930871c7",
   "tedi-card--border--accent": "tedi-card--border--accent-90f35e66",
   "tedi-card--background--brand-primary": "tedi-card--background--brand-primary-01c89a1e",
@@ -40,8 +43,6 @@ const r = {
   "tedi-card--border-top": "tedi-card--border-top-4a483c06",
   "tedi-card--borderless": "tedi-card--borderless-66eb216d",
   "tedi-card--no-radius-tl": "tedi-card--no-radius-tl-fc11f3e6",
-  "tedi-card__header": "tedi-card__header-e3ceedf1",
-  "tedi-card__content": "tedi-card__content-79613a61",
   "tedi-card--no-radius-tr": "tedi-card--no-radius-tr-89903519",
   "tedi-card--no-radius-br": "tedi-card--no-radius-br-06b8b7e4",
   "tedi-card--no-radius-bl": "tedi-card--no-radius-bl-b5a6dd25",

package/src/tedi/components/misc/affix/affix.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),q=require("react"),b=require("../../../../../external/react-sticky-box/dist/index.cjs.js"),e=require("./affix.module.scss.cjs.js"),g=require("../../../../community/components/layout/layout-context.cjs.js"),$=require("../../../helpers/hooks/use-element-size.cjs.js"),j=c=>{const{children:n,relative:l=["header"],className:x,position:f="sticky",top:t=1.5,bottom:i,right:a,left:d}=c,{headerBottomElement:p}=q.useContext(g.LayoutContext),o=$.useElementSize(p),r=h.default(e.default["tedi-affix"],x,e.default[`tedi-affix--${f}`],{[e.default[`tedi-affix--top-${t}`.replace(".","-")]]:typeof t<"u"&&f==="fixed",[e.default[`tedi-affix--bottom-${i}`.replace(".","-")]]:typeof i<"u",[e.default[`tedi-affix--left-${d}`.replace(".","-")]]:typeof d<"u",[e.default[`tedi-affix--right-${a}`.replace(".","-")]]:typeof a<"u"});if(f==="fixed")return u.jsx("div",{className:r,children:n});const s=(typeof t=="number"?t:0)*16,m=l.includes("header")?s+((o==null?void 0:o.height)||0):s,y=(typeof i=="number"?i:0)*16;return u.jsx(b.default,{offsetTop:m,offsetBottom:y,className:r,children:n})};exports.Affix=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),$=require("../../../../../external/classnames/index.cjs.js"),b=require("react"),h=require("../../../../../external/react-sticky-box/dist/index.cjs.js"),e=require("./affix.module.scss.cjs.js"),q=require("../../../../community/components/layout/layout-context.cjs.js"),g=require("../../../helpers/hooks/use-element-size.cjs.js"),j=x=>{const{children:n,relative:p=["header"],className:m,position:i="sticky",top:t=1.5,bottom:f,right:s,left:a}=x,{headerBottomElement:y}=b.useContext(q.LayoutContext),o=g.useElementSize(y),d=$.default(e.default["tedi-affix"],m,e.default[`tedi-affix--${i}`],{[e.default[`tedi-affix--top-${t}`.replace(".","-")]]:typeof t<"u"&&i==="fixed",[e.default[`tedi-affix--bottom-${f}`.replace(".","-")]]:typeof f<"u",[e.default[`tedi-affix--left-${a}`.replace(".","-")]]:typeof a<"u",[e.default[`tedi-affix--right-${s}`.replace(".","-")]]:typeof s<"u"});if(i==="fixed")return l.jsx("div",{className:d,children:n});const r=(typeof t=="number"?t:0)*16,u=p.includes("header")?r+((o==null?void 0:o.height)||0):r,c=(typeof f=="number"?f:0)*16;return l.jsx(h.default,{offsetTop:u,offsetBottom:c,className:d,style:{"--tedi-affix-offset-top":`${u}px`,"--tedi-affix-offset-bottom":`${c}px`},children:n})};exports.Affix=j;

package/src/tedi/components/misc/affix/affix.es.js

@@ -1,21 +1,33 @@
-import { jsx as p } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import h from "../../../../../external/classnames/index.es.js";
 import { useContext as $ } from "react";
 import b from "../../../../../external/react-sticky-box/dist/index.es.js";
 import e from "./affix.module.scss.es.js";
 import { LayoutContext as g } from "../../../../community/components/layout/layout-context.es.js";
 import { useElementSize as N } from "../../../helpers/hooks/use-element-size.es.js";
-const L = (d) => {
-  const { children: r, relative: c = ["header"], className: l, position: f = "sticky", top: t = 1.5, bottom: o, right: n, left: s } = d, { headerBottomElement: u } = $(g), i = N(u), m = h(e["tedi-affix"], l, e[`tedi-affix--${f}`], {
+const L = (l) => {
+  const { children: r, relative: x = ["header"], className: u, position: f = "sticky", top: t = 1.5, bottom: o, right: s, left: n } = l, { headerBottomElement: y } = $(g), i = N(y), p = h(e["tedi-affix"], u, e[`tedi-affix--${f}`], {
     [e[`tedi-affix--top-${t}`.replace(".", "-")]]: typeof t < "u" && f === "fixed",
     [e[`tedi-affix--bottom-${o}`.replace(".", "-")]]: typeof o < "u",
-    [e[`tedi-affix--left-${s}`.replace(".", "-")]]: typeof s < "u",
-    [e[`tedi-affix--right-${n}`.replace(".", "-")]]: typeof n < "u"
+    [e[`tedi-affix--left-${n}`.replace(".", "-")]]: typeof n < "u",
+    [e[`tedi-affix--right-${s}`.replace(".", "-")]]: typeof s < "u"
   });
   if (f === "fixed")
-    return /* @__PURE__ */ p("div", { className: m, children: r });
-  const a = (typeof t == "number" ? t : 0) * 16, x = c.includes("header") ? a + ((i == null ? void 0 : i.height) || 0) : a, y = (typeof o == "number" ? o : 0) * 16;
-  return /* @__PURE__ */ p(b, { offsetTop: x, offsetBottom: y, className: m, children: r });
+    return /* @__PURE__ */ c("div", { className: p, children: r });
+  const a = (typeof t == "number" ? t : 0) * 16, m = x.includes("header") ? a + ((i == null ? void 0 : i.height) || 0) : a, d = (typeof o == "number" ? o : 0) * 16;
+  return /* @__PURE__ */ c(
+    b,
+    {
+      offsetTop: m,
+      offsetBottom: d,
+      className: p,
+      style: {
+        "--tedi-affix-offset-top": `${m}px`,
+        "--tedi-affix-offset-bottom": `${d}px`
+      },
+      children: r
+    }
+  );
 };
 export {
   L as Affix

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),N=require("../../../../../../../external/classnames/index.cjs.js"),s=require("react"),x=require("../../../../base/typography/text/text.cjs.js"),C=require("../../../../buttons/collapse-button/collapse-button.cjs.js"),E=require("../../../../overlays/sheet/sheet.cjs.js"),c=require("../../table-of-contents.cjs.js"),t=require("../../table-of-contents.module.scss.cjs.js"),S=require("../table-of-contents-list/table-of-contents-list.cjs.js"),y=require("../../../../../providers/label-provider/use-labels.cjs.js"),p=g=>{const{children:d,heading:u,ariaLabel:_,activeId:l,numbered:b=!1,sticky:j=!0,className:L}=g,{getLabel:f}=y.useLabels(),[n,a]=s.useState(!1),[o,O]=s.useState(null);s.useEffect(()=>{if(!n||!o)return;const v=q=>{q.target.closest("a, button")&&a(!1)};return o.addEventListener("click",v),()=>o.removeEventListener("click",v)},[n,o]);const i=(u===void 0?f("table-of-contents.title"):u)??f("table-of-contents.title"),h=_||i,r=s.useMemo(()=>c.childrenToNodes(d),[d]),m=s.useMemo(()=>c.buildActiveTrail(r,l),[r,l]),T=s.useMemo(()=>({activeId:l,numbered:b,ariaLabel:h,activeTrail:m}),[l,b,h,m]);return e.jsxs(c.TableOfContentsContext.Provider,{value:T,children:[e.jsxs("div",{className:N.default(t.default["tedi-table-of-contents__bar"],{[t.default["tedi-table-of-contents__bar--static"]]:!j},L),children:[e.jsx(x.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:i}),e.jsx(C.CollapseButton,{open:n,onOpenChange:a,underline:!1,"aria-haspopup":"dialog"})]}),e.jsx(E.Sheet,{open:n,onToggle:a,ariaLabel:i,className:t.default["tedi-table-of-contents__sheet"],header:e.jsxs("div",{className:t.default["tedi-table-of-contents__sheet-header"],children:[e.jsx(x.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:i}),e.jsx(C.CollapseButton,{open:n,onOpenChange:a,underline:!1})]}),children:e.jsx("div",{ref:O,className:t.default["tedi-table-of-contents"],children:e.jsx(S.TableOfContentsList,{nodes:r,heading:null})})})]})};p.displayName="TableOfContentsCollapsible";exports.TableOfContentsCollapsible=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("../../../../../../../external/classnames/index.cjs.js"),n=require("react"),T=require("../../../../base/typography/text/text.cjs.js"),q=require("../../../../buttons/collapse-button/collapse-button.cjs.js"),H=require("../../../../overlays/sheet/sheet.cjs.js"),b=require("../../table-of-contents.cjs.js"),t=require("../../table-of-contents.module.scss.cjs.js"),Y=require("../table-of-contents-list/table-of-contents-list.cjs.js"),F=require("../../../../../providers/label-provider/use-labels.cjs.js"),N=E=>{const{children:m,heading:h,ariaLabel:S,activeId:o,numbered:v=!1,bordered:y=!1,defaultOpen:p=!0,sticky:c=!0,hideOnScroll:x=!1,className:M}=E,{getLabel:C}=F.useLabels(),[l,i]=n.useState(!1),[k,_]=n.useState(!1),[r,A]=n.useState(null);n.useEffect(()=>{if(!x||!c){_(!1);return}let a=window.scrollY,s=0;const O=()=>{s||(s=window.requestAnimationFrame(()=>{s=0;const f=window.scrollY,j=f-a;Math.abs(j)>4&&(_(j>0&&f>0),a=f)}))};return window.addEventListener("scroll",O,{passive:!0}),()=>{window.removeEventListener("scroll",O),s&&window.cancelAnimationFrame(s)}},[x,c]),n.useEffect(()=>{if(!l||!r)return;const a=s=>{s.target.closest("a, button")&&i(!1)};return r.addEventListener("click",a),()=>r.removeEventListener("click",a)},[l,r]);const d=(h===void 0?C("table-of-contents.title"):h)??C("table-of-contents.title"),g=S||d,u=n.useMemo(()=>b.childrenToNodes(m),[m]),L=n.useMemo(()=>b.buildActiveTrail(u,o),[u,o]),B=n.useMemo(()=>({activeId:o,numbered:v,ariaLabel:g,activeTrail:L,defaultOpen:p}),[o,v,g,L,p]);return e.jsxs(b.TableOfContentsContext.Provider,{value:B,children:[e.jsxs("div",{className:w.default(t.default["tedi-table-of-contents__bar"],{[t.default["tedi-table-of-contents__bar--static"]]:!c,[t.default["tedi-table-of-contents__bar--hidden"]]:k&&!l},M),children:[e.jsx(T.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:d}),e.jsx(q.CollapseButton,{open:l,onOpenChange:i,underline:!1,"aria-haspopup":"dialog"})]}),e.jsx(H.Sheet,{open:l,onToggle:i,ariaLabel:d,className:t.default["tedi-table-of-contents__sheet"],header:e.jsxs("div",{className:t.default["tedi-table-of-contents__sheet-header"],children:[e.jsx(T.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:d}),e.jsx(q.CollapseButton,{open:l,onOpenChange:i,underline:!1})]}),children:e.jsx("div",{ref:A,className:w.default(t.default["tedi-table-of-contents"],{[t.default["tedi-table-of-contents--bordered"]]:y}),children:e.jsx(Y.TableOfContentsList,{nodes:u,heading:null})})})]})};N.displayName="TableOfContentsCollapsible";exports.TableOfContentsCollapsible=N;

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[];