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

package/src/tedi/components/form/time-field/time-field.es.js

@@ -1,129 +1,131 @@
-import { jsxs as G, jsx as i, Fragment as xe } from "react/jsx-runtime";
-import { useFloating as ve, useClick as Ce, useDismiss as _e, useRole as Fe, useInteractions as Pe, FloatingPortal as Ie, FloatingFocusManager as Te } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { jsxs as G, jsx as o, Fragment as ve } from "react/jsx-runtime";
+import { useFloating as Ce, useClick as Pe, useDismiss as _e, useRole as Fe, useInteractions as Ie, FloatingPortal as Te, FloatingFocusManager as we } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
 import O from "../../../../../external/classnames/index.es.js";
-import we, { useState as M, useEffect as H } from "react";
+import Be, { useState as M, useEffect as H } from "react";
 import { TextField as J } from "../textfield/textfield.es.js";
-import { TimePicker as Be } from "../time-picker/time-picker.es.js";
+import { TimePicker as ye } from "../time-picker/time-picker.es.js";
 import d from "./time-field.module.scss.es.js";
-import { normalizeTime as ye, TIMEPICKER_OFFSET as Ne } from "./time-field-helpers.es.js";
-import { TimePickerModal as Oe } from "./time-picker-modal/time-picker-modal.es.js";
-import { useBreakpointProps as Me } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as Re } from "../../../providers/label-provider/use-labels.es.js";
-import Ve, { isBreakpointBelow as Ee } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { normalizeTime as Ne, TIMEPICKER_OFFSET as Oe } from "./time-field-helpers.es.js";
+import { TimePickerModal as Me } from "./time-picker-modal/time-picker-modal.es.js";
+import { useBreakpointProps as Re } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as Ve } from "../../../providers/label-provider/use-labels.es.js";
+import Ee, { isBreakpointBelow as Ue } from "../../../helpers/hooks/use-breakpoint.es.js";
 import { Dropdown as v } from "../../overlays/dropdown/dropdown.es.js";
-import { autoUpdate as Ue } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as De, flip as Se, shift as je } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-const Le = (C) => {
-  const { getCurrentBreakpointProps: Q } = Me(C.defaultServerBreakpoint), { getLabel: W } = Re(), {
+import { autoUpdate as De } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as Se, flip as je, shift as Le } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+const qe = (C) => {
+  const { getCurrentBreakpointProps: Q } = Re(C.defaultServerBreakpoint), { getLabel: W } = Ve(), {
     id: X,
     label: Y,
+    labelProps: Z,
     value: m,
-    defaultValue: Z,
-    onChange: _,
-    readOnly: k = !1,
+    defaultValue: $,
+    onChange: P,
+    readOnly: h = !1,
     disabled: l = !1,
-    required: $,
-    placeholder: ee,
-    inputProps: t,
+    required: ee,
+    placeholder: te,
+    inputProps: e,
     stepMinutes: R = 1,
     className: V,
     availableTimes: s,
-    modal: F = !1,
-    modalProps: te
+    modal: _ = !1,
+    modalProps: oe
   } = C, {
     useNativePicker: ie = !1,
-    timePickerTrigger: P = "button",
+    timePickerTrigger: F = "button",
     showPicker: n = !0,
     availableTimesVariant: I = "grid-buttons",
-    clearable: oe = !0
-  } = Q(C), E = m !== void 0, [ne, U] = M(m ?? Z ?? ""), f = E ? m : ne, [T, w] = M(!1), [D, S] = M(!1), u = P === "input", o = ie, re = Ve(), c = !o && n && !k && !l && (F === !0 || typeof F == "string" && Ee(re, F)), ae = ve({
+    clearable: ne = !0
+  } = Q(C), E = m !== void 0, [re, U] = M(m ?? $ ?? ""), u = E ? m : re, [T, w] = M(!1), [D, S] = M(!1), f = F === "input", i = ie, ae = Ee(), c = !i && n && !h && !l && (_ === !0 || typeof _ == "string" && Ue(ae, _)), le = Ce({
     open: T,
     onOpenChange: w,
-    placement: u ? "bottom-start" : "bottom-end",
-    middleware: [De(Ne), Se(), je()],
-    whileElementsMounted: Ue
-  }), { refs: B, context: b, x: le, y: se, strategy: ce } = ae, de = Ce(b), me = _e(b), ue = Fe(b, { role: "listbox" }), j = n && u && !k && !l && !o && !c, L = Pe([...j ? [de] : [], me, ue]), p = (e) => {
-    const r = e.trim();
-    E || U(r), _ == null || _(r);
-  }, fe = (e) => {
+    placement: f ? "bottom-start" : "bottom-end",
+    middleware: [Se(Oe), je(), Le()],
+    whileElementsMounted: De
+  }), { refs: B, context: k, x: se, y: ce, strategy: de } = le, me = Pe(k), fe = _e(k), ue = Fe(k, { role: "listbox" }), j = n && f && !h && !l && !i && !c, L = Ie([...j ? [me] : [], fe, ue]), p = (t) => {
+    const r = t.trim();
+    E || U(r), P == null || P(r);
+  }, pe = (t) => {
     var x;
-    const r = e.target.value ?? "";
-    (x = t == null ? void 0 : t.onBlur) == null || x.call(t, e);
-    const a = ye(r);
+    const r = t.target.value ?? "";
+    (x = e == null ? void 0 : e.onBlur) == null || x.call(e, t);
+    const a = Ne(r);
     a !== null && a !== r && p(a);
   };
   H(() => {
     m !== void 0 && U(m);
   }, [m]);
-  const g = we.useRef(null);
+  const g = Be.useRef(null);
   H(() => {
-    var e;
-    (e = g.current) != null && e.inner && B.setReference(g.current.inner);
+    var t;
+    (t = g.current) != null && t.inner && B.setReference(g.current.inner);
   }, [B]);
-  const pe = () => {
+  const ge = () => {
     var r;
-    const e = (r = g.current) == null ? void 0 : r.input;
-    if (e) {
-      if (typeof e.showPicker == "function") {
-        e.showPicker();
+    const t = (r = g.current) == null ? void 0 : r.input;
+    if (t) {
+      if (typeof t.showPicker == "function") {
+        t.showPicker();
         return;
       }
-      e.focus();
+      t.focus();
     }
-  }, ge = () => w((e) => !e), q = () => S(!0), he = () => {
-    !n || l || (o ? pe() : c ? q() : P === "button" && ge());
-  }, z = c && u && !k ? () => {
+  }, be = () => w((t) => !t), q = () => S(!0), he = () => {
+    !n || l || (i ? ge() : c ? q() : F === "button" && be());
+  }, z = c && f && !h ? () => {
     q();
-  } : void 0, y = !o && n && !l && I === "dropdown" && !!(s != null && s.length), A = c ? "dialog" : "listbox", K = c ? D : T, ke = n && !o && !y && (P === "button" || c), be = n && u && !o && !y, N = {
-    ...t,
+  } : void 0, y = !i && n && !l && I === "dropdown" && !!(s != null && s.length), A = c ? "dialog" : "listbox", K = c ? D : T, ke = n && !i && !y && (F === "button" || c), xe = n && f && !i && !y, N = {
+    ...e,
     id: X,
     label: Y,
-    value: f,
-    placeholder: ee,
-    readOnly: k || !o && u,
-    disabled: l || (t == null ? void 0 : t.disabled),
+    labelProps: Z ?? (e == null ? void 0 : e.labelProps),
+    value: u,
+    placeholder: te,
+    readOnly: h || !i && f,
+    disabled: l || (e == null ? void 0 : e.disabled),
     icon: n ? "schedule" : { name: "schedule", color: "inherit" },
-    isClearable: oe,
-    required: $,
+    isClearable: ne,
+    required: ee,
     onIconClick: n ? he : void 0,
     iconButtonProps: {
       "aria-label": W("time-field.open-picker"),
       ...ke && { "aria-haspopup": A, "aria-expanded": K },
-      ...t == null ? void 0 : t.iconButtonProps
+      ...e == null ? void 0 : e.iconButtonProps
     },
     onChange: p,
-    onBlur: fe,
+    onBlur: pe,
     className: O(
       d["tedi-time-field__textfield"],
       { [d["tedi-time-field__icon--disabled"]]: !n || l },
-      { [d["tedi-time-field__textfield--disabled"]]: l || (t == null ? void 0 : t.disabled) },
-      { [d["tedi-time-field--native"]]: o }
+      { [d["tedi-time-field__textfield--disabled"]]: l || (e == null ? void 0 : e.disabled) },
+      { [d["tedi-time-field--native"]]: i }
     ),
     input: {
-      ...t == null ? void 0 : t.input,
-      ...o && { type: "time" },
+      ...e == null ? void 0 : e.input,
+      ...i && { type: "time" },
       ...z && { onClick: z },
-      ...be && { role: "combobox", "aria-haspopup": A, "aria-expanded": K }
+      ...xe && { role: "combobox", "aria-haspopup": A, "aria-expanded": K }
     }
   };
   if (y) {
-    const e = s.indexOf(f), r = e >= 0 ? e : 0;
+    const t = s.indexOf(u), r = t >= 0 ? t : 0;
     return /* @__PURE__ */ G(v, { width: "trigger", defaultActiveIndex: r, children: [
-      /* @__PURE__ */ i(v.Trigger, { children: /* @__PURE__ */ i(
+      /* @__PURE__ */ o(v.Trigger, { children: /* @__PURE__ */ o(
         "div",
         {
           role: "combobox",
           className: O(d["tedi-time-field__container"], V, {
-            [d["tedi-time-field__container--native"]]: o
+            [d["tedi-time-field__container--native"]]: i
           }),
-          children: /* @__PURE__ */ i(
+          children: /* @__PURE__ */ o(
             J,
             {
               ref: g,
               ...N,
               input: {
                 ...N.input,
-                ...!u && {
+                ...!f && {
                   onClick: (a) => a.stopPropagation()
                 }
               }
@@ -131,46 +133,46 @@ const Le = (C) => {
           )
         }
       ) }),
-      /* @__PURE__ */ i(v.Content, { children: s.map((a, x) => /* @__PURE__ */ i(v.Item, { index: x, active: a === f, onClick: () => p(a), children: a }, a)) })
+      /* @__PURE__ */ o(v.Content, { children: s.map((a, x) => /* @__PURE__ */ o(v.Item, { index: x, active: a === u, onClick: () => p(a), children: a }, a)) })
     ] });
   }
-  const h = {
+  const b = {
     ...j ? L.getReferenceProps() : {}
   };
-  return delete h.role, delete h["aria-haspopup"], delete h["aria-expanded"], delete h["aria-controls"], /* @__PURE__ */ G(xe, { children: [
-    /* @__PURE__ */ i("div", { className: O(d["tedi-time-field__container"], V), ...h, tabIndex: -1, children: /* @__PURE__ */ i(J, { ref: g, ...N }) }),
-    c && /* @__PURE__ */ i(
-      Oe,
+  return delete b.role, delete b["aria-haspopup"], delete b["aria-expanded"], delete b["aria-controls"], /* @__PURE__ */ G(ve, { children: [
+    /* @__PURE__ */ o("div", { className: O(d["tedi-time-field__container"], V), ...b, tabIndex: -1, children: /* @__PURE__ */ o(J, { ref: g, ...N }) }),
+    c && /* @__PURE__ */ o(
+      Me,
       {
         open: D,
         onOpenChange: S,
-        value: f,
+        value: u,
         onConfirm: p,
         stepMinutes: R,
         availableTimes: s,
         gridVariant: I === "grid-radio" ? "radio" : "button",
-        modalProps: te
+        modalProps: oe
       }
     ),
-    !o && n && !l && !c && /* @__PURE__ */ i(Ie, { children: T && /* @__PURE__ */ i(Te, { context: b, modal: !1, initialFocus: -1, children: /* @__PURE__ */ i(
+    !i && n && !l && !c && /* @__PURE__ */ o(Te, { children: T && /* @__PURE__ */ o(we, { context: k, modal: !1, initialFocus: -1, children: /* @__PURE__ */ o(
       "div",
       {
         ref: B.setFloating,
         ...L.getFloatingProps({
           style: {
-            position: ce,
-            top: se ?? 0,
-            left: le ?? 0
+            position: de,
+            top: ce ?? 0,
+            left: se ?? 0
           }
         }),
-        children: /* @__PURE__ */ i(
-          Be,
+        children: /* @__PURE__ */ o(
+          ye,
           {
-            value: f,
+            value: u,
             stepMinutes: R,
             availableTimes: s,
-            onChange: (e) => {
-              p(e), s && w(!1);
+            onChange: (t) => {
+              p(t), s && w(!1);
             },
             gridVariant: I === "grid-radio" ? "radio" : "button",
             className: d["tedi-time-field__picker-wrapper"]
@@ -180,7 +182,7 @@ const Le = (C) => {
     ) }) })
   ] });
 };
-Le.displayName = "TimeField";
+qe.displayName = "TimeField";
 export {
-  Le as TimeField
+  qe as TimeField
 };

package/src/tedi/components/form/toggle/toggle.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),R=require("../../base/icon/icon.cjs.js"),w=require("../../loaders/spinner/spinner.cjs.js"),P=require("../feedback-text/feedback-text.cjs.js"),M=require("../form-label/form-label.cjs.js"),e=require("./toggle.module.scss.cjs.js"),_=m.forwardRef((k,x)=>{const{id:o,label:l,hideLabel:j=!1,labelPosition:N="left",helper:a,className:y,checked:n,defaultChecked:g,onChange:d,size:C,color:q="primary",type:v="filled",icon:u,disabled:f=!1,isLoading:s=!1,tooltip:T,...$}=k,h=a?`${o}-helper`:void 0,[z,S]=m.useState(g??!1),i=typeof n<"u",c=i?n:z,p=C||(u?"large":"default"),L=b=>{s||(i||S(b.target.checked),d==null||d(b.target.checked))},F=r.default(e.default["tedi-toggle"],e.default[`tedi-toggle--${p}`],e.default[`tedi-toggle--${q}-${v}`],{[e.default["tedi-toggle--active"]]:c,[e.default["tedi-toggle--disabled"]]:f||s},y),I=r.default(e.default["tedi-toggle__control"],e.default[`tedi-toggle__control--label-${N}`]);return t.jsxs(t.Fragment,{children:[t.jsxs("div",{className:I,children:[l&&t.jsx(M.FormLabel,{id:o,className:e.default["tedi-toggle__label"],hideLabel:j,label:l,tooltip:T}),t.jsxs("div",{className:F,children:[t.jsx("input",{...$,ref:x,id:o,type:"checkbox",role:"switch","aria-label":typeof l=="string"?l:void 0,"aria-describedby":h,className:e.default["tedi-toggle__input"],checked:i?c:void 0,defaultChecked:i?void 0:g,disabled:f||s,onChange:L}),t.jsx("span",{className:e.default["tedi-toggle__slider"],children:s?t.jsx(w.Spinner,{size:p==="large"?16:10,className:e.default["tedi-toggle__icon"]}):u?t.jsx(R.Icon,{name:c?"lock_open":"lock",size:16,color:"inherit"}):null})]})]}),a&&t.jsx(P.FeedbackText,{id:h,...a,className:r.default(e.default["tedi-toggle__helper"],a.className)})]})});_.displayName="Toggle";exports.Toggle=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),r=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),R=require("../../base/icon/icon.cjs.js"),w=require("../../loaders/spinner/spinner.cjs.js"),M=require("../feedback-text/feedback-text.cjs.js"),O=require("../form-label/form-label.cjs.js"),e=require("./toggle.module.scss.cjs.js"),_=m.forwardRef((k,x)=>{const{id:i,label:t,hideLabel:j=!1,labelPosition:N="left",helper:a,className:y,checked:n,defaultChecked:g,onChange:d,size:C,color:q="primary",type:v="filled",icon:u,disabled:f=!1,isLoading:s=!1,tooltip:T,labelProps:$,...z}=k,h=a?`${i}-helper`:void 0,[S,L]=m.useState(g??!1),o=typeof n<"u",c=o?n:S,p=C||(u?"large":"default"),F=b=>{s||(o||L(b.target.checked),d==null||d(b.target.checked))},I=r.default(e.default["tedi-toggle"],e.default[`tedi-toggle--${p}`],e.default[`tedi-toggle--${q}-${v}`],{[e.default["tedi-toggle--active"]]:c,[e.default["tedi-toggle--disabled"]]:f||s},y),P=r.default(e.default["tedi-toggle__control"],e.default[`tedi-toggle__control--label-${N}`]);return l.jsxs(l.Fragment,{children:[l.jsxs("div",{className:P,children:[t&&l.jsx(O.FormLabel,{id:i,className:e.default["tedi-toggle__label"],hideLabel:j,label:t,tooltip:T,labelProps:$}),l.jsxs("div",{className:I,children:[l.jsx("input",{...z,ref:x,id:i,type:"checkbox",role:"switch","aria-label":typeof t=="string"?t:void 0,"aria-describedby":h,className:e.default["tedi-toggle__input"],checked:o?c:void 0,defaultChecked:o?void 0:g,disabled:f||s,onChange:F}),l.jsx("span",{className:e.default["tedi-toggle__slider"],children:s?l.jsx(w.Spinner,{size:p==="large"?16:10,className:e.default["tedi-toggle__icon"]}):u?l.jsx(R.Icon,{name:c?"lock_open":"lock",size:16,color:"inherit"}):null})]})]}),a&&l.jsx(M.FeedbackText,{id:h,...a,className:r.default(e.default["tedi-toggle__helper"],a.className)})]})});_.displayName="Toggle";exports.Toggle=_;

package/src/tedi/components/form/toggle/toggle.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { FeedbackTextProps } from '../feedback-text/feedback-text';
+import { FormLabelProps } from '../form-label/form-label';
 export interface ToggleProps {
     /**
      * Unique identifier for the toggle input.
@@ -87,6 +88,12 @@ export interface ToggleProps {
      * Useful for providing extra explanation without cluttering the UI.
      */
     tooltip?: string;
+    /**
+     * Additional props forwarded to the underlying `Label` component.
+     * Use `modifiers` to control how the label text wraps or breaks
+     * (e.g. `{ modifiers: 'nowrap' }`).
+     */
+    labelProps?: FormLabelProps['labelProps'];
 }
 export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
 export default Toggle;

package/src/tedi/components/form/toggle/toggle.es.js

@@ -1,12 +1,12 @@
-import { jsxs as c, Fragment as w, jsx as l } from "react/jsx-runtime";
+import { jsxs as c, Fragment as P, jsx as l } from "react/jsx-runtime";
 import n from "../../../../../external/classnames/index.es.js";
-import { forwardRef as P, useState as R } from "react";
-import { Icon as q } from "../../base/icon/icon.es.js";
-import { Spinner as A } from "../../loaders/spinner/spinner.es.js";
-import { FeedbackText as B } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as D } from "../form-label/form-label.es.js";
+import { forwardRef as R, useState as q } from "react";
+import { Icon as A } from "../../base/icon/icon.es.js";
+import { Spinner as B } from "../../loaders/spinner/spinner.es.js";
+import { FeedbackText as D } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as E } from "../form-label/form-label.es.js";
 import e from "./toggle.module.scss.es.js";
-const E = P((k, N) => {
+const G = R((k, N) => {
   const {
     id: a,
     label: t,
@@ -24,36 +24,38 @@ const E = P((k, N) => {
     disabled: f = !1,
     isLoading: i = !1,
     tooltip: $,
-    ...F
-  } = k, h = o ? `${a}-helper` : void 0, [I, L] = R(m ?? !1), s = typeof g < "u", d = s ? g : I, _ = v || (p ? "large" : "default"), S = (b) => {
-    i || (s || L(b.target.checked), r == null || r(b.target.checked));
-  }, T = n(
+    labelProps: F,
+    ...I
+  } = k, h = o ? `${a}-helper` : void 0, [L, S] = q(m ?? !1), s = typeof g < "u", d = s ? g : L, b = v || (p ? "large" : "default"), T = (_) => {
+    i || (s || S(_.target.checked), r == null || r(_.target.checked));
+  }, j = n(
     e["tedi-toggle"],
-    e[`tedi-toggle--${_}`],
+    e[`tedi-toggle--${b}`],
     e[`tedi-toggle--${x}-${z}`],
     {
       [e["tedi-toggle--active"]]: d,
       [e["tedi-toggle--disabled"]]: f || i
     },
     y
-  ), j = n(e["tedi-toggle__control"], e[`tedi-toggle__control--label-${C}`]);
-  return /* @__PURE__ */ c(w, { children: [
-    /* @__PURE__ */ c("div", { className: j, children: [
+  ), w = n(e["tedi-toggle__control"], e[`tedi-toggle__control--label-${C}`]);
+  return /* @__PURE__ */ c(P, { children: [
+    /* @__PURE__ */ c("div", { className: w, children: [
       t && /* @__PURE__ */ l(
-        D,
+        E,
         {
           id: a,
           className: e["tedi-toggle__label"],
           hideLabel: u,
           label: t,
-          tooltip: $
+          tooltip: $,
+          labelProps: F
         }
       ),
-      /* @__PURE__ */ c("div", { className: T, children: [
+      /* @__PURE__ */ c("div", { className: j, children: [
         /* @__PURE__ */ l(
           "input",
           {
-            ...F,
+            ...I,
             ref: N,
             id: a,
             type: "checkbox",
@@ -64,16 +66,16 @@ const E = P((k, N) => {
             checked: s ? d : void 0,
             defaultChecked: s ? void 0 : m,
             disabled: f || i,
-            onChange: S
+            onChange: T
           }
         ),
-        /* @__PURE__ */ l("span", { className: e["tedi-toggle__slider"], children: i ? /* @__PURE__ */ l(A, { size: _ === "large" ? 16 : 10, className: e["tedi-toggle__icon"] }) : p ? /* @__PURE__ */ l(q, { name: d ? "lock_open" : "lock", size: 16, color: "inherit" }) : null })
+        /* @__PURE__ */ l("span", { className: e["tedi-toggle__slider"], children: i ? /* @__PURE__ */ l(B, { size: b === "large" ? 16 : 10, className: e["tedi-toggle__icon"] }) : p ? /* @__PURE__ */ l(A, { name: d ? "lock_open" : "lock", size: 16, color: "inherit" }) : null })
       ] })
     ] }),
-    o && /* @__PURE__ */ l(B, { id: h, ...o, className: n(e["tedi-toggle__helper"], o.className) })
+    o && /* @__PURE__ */ l(D, { id: h, ...o, className: n(e["tedi-toggle__helper"], o.className) })
   ] });
 });
-E.displayName = "Toggle";
+G.displayName = "Toggle";
 export {
-  E as Toggle
+  G as Toggle
 };

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 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"),c=({node:m,depth:i,index:r,numberPrefix:a})=>{const{activeId:p,numbered:o,activeTrail:x,defaultOpen:j}=w.useContext($.TableOfContentsContext),{id:n,content:v,children:s,separator:h,slot:d}=m,C=!!(s!=null&&s.length),u=!!n&&n===p,O=C&&(j||!!n&&x.has(n)),N=Math.min(i,2),l=a?`${a}.${r+1}`:`${r+1}`,q=a?l:`${l}.`,T=o?"ol":"ul";return t.jsxs("li",{"aria-current":u?"location":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}),d!==void 0&&t.jsx("div",{className:e.default["tedi-table-of-contents__slot"],children:d})]}),O&&t.jsx(T,{className:e.default["tedi-table-of-contents__group"],children:s.map((f,b)=>t.jsx(c,{node:f,depth:i+1,index:b,numberPrefix:o?l:void 0},f.id??b))}),h&&t.jsx(R.Separator,{className:e.default["tedi-table-of-contents__separator"]})]})};c.displayName="TableOfContentsRow";exports.TableOfContentsRow=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),x=require("../../../../../../../external/classnames/index.cjs.js"),p=require("react"),D=require("../../../../misc/separator/separator.cjs.js"),G=require("../../table-of-contents.cjs.js"),o=require("../../table-of-contents.module.scss.cjs.js"),H=8,j=n=>{let e=(n==null?void 0:n.parentElement)??null;for(;e&&e!==document.body&&e!==document.documentElement;){const{overflowY:t}=window.getComputedStyle(e);if((t==="auto"||t==="scroll"||t==="overlay")&&e.scrollHeight>e.clientHeight)return e;e=e.parentElement}return null},y=(n,e,t,l,c=H)=>n<t+c?n-t-c:e>l-c?e-l+c:0,m=({node:n,depth:e,index:t,numberPrefix:l})=>{const{activeId:c,numbered:f,activeTrail:O,defaultOpen:N,scrollActiveIntoView:_,activeIdChanged:h}=p.useContext(G.TableOfContentsContext),{id:i,content:q,children:d,separator:M,slot:w}=n,$=!!(d!=null&&d.length),u=!!i&&i===c,A=$&&(N||!!i&&O.has(i)),E=Math.min(e,2),R=p.useRef(null);p.useEffect(()=>{var S;if(!_||!u||!h)return;const a=R.current;if(!a)return;const r=j(a);if(!r||typeof r.scrollBy!="function")return;const v=a.getBoundingClientRect(),C=r.getBoundingClientRect(),g=y(v.top,v.bottom,C.top,C.bottom);if(g===0)return;const I=typeof window<"u"&&((S=window.matchMedia)==null?void 0:S.call(window,"(prefers-reduced-motion: reduce)").matches);r.scrollBy({top:g,behavior:I?"auto":"smooth"})},[_,u,h]);const b=l?`${l}.${t+1}`:`${t+1}`,T=l?b:`${b}.`,B=f?"ol":"ul";return s.jsxs("li",{"aria-current":u?"location":void 0,className:x.default(o.default["tedi-table-of-contents__item"],{[o.default["tedi-table-of-contents__item--selected"]]:u}),children:[s.jsxs("div",{ref:R,className:x.default(o.default["tedi-table-of-contents__row"],o.default[`tedi-table-of-contents__row--level-${E}`]),children:[f&&s.jsx("span",{className:o.default["tedi-table-of-contents__number"],"aria-hidden":"true",children:T}),s.jsx("span",{className:o.default["tedi-table-of-contents__content"],children:q}),w!==void 0&&s.jsx("div",{className:o.default["tedi-table-of-contents__slot"],children:w})]}),A&&s.jsx(B,{className:o.default["tedi-table-of-contents__group"],children:d.map((a,r)=>s.jsx(m,{node:a,depth:e+1,index:r,numberPrefix:f?b:void 0},a.id??r))}),M&&s.jsx(D.Separator,{className:o.default["tedi-table-of-contents__separator"]})]})};m.displayName="TableOfContentsRow";exports.TableOfContentsRow=m;exports.getRowScrollDelta=y;exports.getScrollableAncestor=j;

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

@@ -6,6 +6,18 @@ interface TableOfContentsRowProps {
     /** Parent's number (e.g. `'2'`) for building hierarchical ordinals like `2.1`. */
     numberPrefix?: string;
 }
+/**
+ * Nearest scrollable ancestor that is a real in-page container (never `body` / `documentElement`),
+ * so bringing the active row into view scrolls only the table-of-contents' own scroll area and can
+ * never scroll the whole document. Returns `null` when no such container exists.
+ */
+export declare const getScrollableAncestor: (element: HTMLElement | null) => HTMLElement | null;
+/**
+ * Minimal vertical scroll (with an {@link SCROLL_MARGIN}px margin) to bring the row's
+ * `[top, bottom]` band inside the container's `[top, bottom]` band. Returns `0` when the row is
+ * already visible — "nearest" semantics: scroll up if it's above, down if it's below, else nothing.
+ */
+export declare const getRowScrollDelta: (rowTop: number, rowBottom: number, containerTop: number, containerBottom: number, margin?: number) => number;
 export declare const TableOfContentsRow: {
     ({ node, depth, index, numberPrefix }: TableOfContentsRowProps): JSX.Element;
     displayName: string;

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

@@ -1,40 +1,70 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-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 b = ({ node: u, depth: i, index: r, 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(i, 2), l = s ? `${s}.${r + 1}` : `${r + 1}`, x = s ? l : `${l}.`, g = a ? "ol" : "ul";
-  return /* @__PURE__ */ p(
+import { jsxs as N, jsx as a } from "react/jsx-runtime";
+import g from "../../../../../../../external/classnames/index.es.js";
+import { useContext as G, useRef as H, useEffect as L } from "react";
+import { Separator as T } from "../../../../misc/separator/separator.es.js";
+import { TableOfContentsContext as D } from "../../table-of-contents.es.js";
+import o from "../../table-of-contents.module.scss.es.js";
+const V = 8, Y = (n) => {
+  let t = (n == null ? void 0 : n.parentElement) ?? null;
+  for (; t && t !== document.body && t !== document.documentElement; ) {
+    const { overflowY: e } = window.getComputedStyle(t);
+    if ((e === "auto" || e === "scroll" || e === "overlay") && t.scrollHeight > t.clientHeight) return t;
+    t = t.parentElement;
+  }
+  return null;
+}, k = (n, t, e, s, c = V) => n < e + c ? n - e - c : t > s - c ? t - s + c : 0, y = ({ node: n, depth: t, index: e, numberPrefix: s }) => {
+  const { activeId: c, numbered: f, activeTrail: S, defaultOpen: O, scrollActiveIntoView: p, activeIdChanged: b } = G(D), { id: i, content: $, children: d, separator: E, slot: _ } = n, M = !!(d != null && d.length), u = !!i && i === c, x = M && (O || !!i && S.has(i)), A = Math.min(t, 2), h = H(null);
+  L(() => {
+    var C;
+    if (!p || !u || !b) return;
+    const l = h.current;
+    if (!l) return;
+    const r = Y(l);
+    if (!r || typeof r.scrollBy != "function") return;
+    const w = l.getBoundingClientRect(), v = r.getBoundingClientRect(), R = k(w.top, w.bottom, v.top, v.bottom);
+    if (R === 0) return;
+    const j = typeof window < "u" && ((C = window.matchMedia) == null ? void 0 : C.call(window, "(prefers-reduced-motion: reduce)").matches);
+    r.scrollBy({ top: R, behavior: j ? "auto" : "smooth" });
+  }, [p, u, b]);
+  const m = s ? `${s}.${e + 1}` : `${e + 1}`, B = s ? m : `${m}.`, I = f ? "ol" : "ul";
+  return /* @__PURE__ */ N(
     "li",
     {
-      "aria-current": d ? "location" : void 0,
-      className: _(t["tedi-table-of-contents__item"], {
-        [t["tedi-table-of-contents__item--selected"]]: d
+      "aria-current": u ? "location" : void 0,
+      className: g(o["tedi-table-of-contents__item"], {
+        [o["tedi-table-of-contents__item--selected"]]: u
       }),
       children: [
-        /* @__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,
+        /* @__PURE__ */ N(
+          "div",
           {
-            node: m,
-            depth: i + 1,
-            index: f,
-            numberPrefix: a ? l : void 0
+            ref: h,
+            className: g(o["tedi-table-of-contents__row"], o[`tedi-table-of-contents__row--level-${A}`]),
+            children: [
+              f && /* @__PURE__ */ a("span", { className: o["tedi-table-of-contents__number"], "aria-hidden": "true", children: B }),
+              /* @__PURE__ */ a("span", { className: o["tedi-table-of-contents__content"], children: $ }),
+              _ !== void 0 && /* @__PURE__ */ a("div", { className: o["tedi-table-of-contents__slot"], children: _ })
+            ]
+          }
+        ),
+        x && /* @__PURE__ */ a(I, { className: o["tedi-table-of-contents__group"], children: d.map((l, r) => /* @__PURE__ */ a(
+          y,
+          {
+            node: l,
+            depth: t + 1,
+            index: r,
+            numberPrefix: f ? m : void 0
           },
-          m.id ?? f
+          l.id ?? r
         )) }),
-        O && /* @__PURE__ */ e(y, { className: t["tedi-table-of-contents__separator"] })
+        E && /* @__PURE__ */ a(T, { className: o["tedi-table-of-contents__separator"] })
       ]
     }
   );
 };
-b.displayName = "TableOfContentsRow";
+y.displayName = "TableOfContentsRow";
 export {
-  b as TableOfContentsRow
+  y as TableOfContentsRow,
+  k as getRowScrollDelta,
+  Y as getScrollableAncestor
 };

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

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

@@ -17,6 +17,16 @@ type TableOfContentsBreakpointProps = {
      * @default true
      */
     sticky?: boolean;
+    /**
+     * Keep the active item visible inside a scrollable table of contents. When the `activeId`
+     * changes, the active item's row is scrolled into view within the nearest scroll container
+     * (the sticky card, or a scrollable wrapper you provide) using "nearest" semantics — it only
+     * scrolls when the row is out of view, leaving ~8px of margin. Positions on the row itself,
+     * not its expanded children. Has no effect in non-scrollable layouts and respects
+     * `prefers-reduced-motion`.
+     * @default false
+     */
+    scrollActiveIntoView?: boolean;
 };
 export interface TableOfContentsProps extends BreakpointSupport<TableOfContentsBreakpointProps> {
     /**
@@ -87,6 +97,13 @@ interface TableOfContentsContextValue {
     ariaLabel?: string;
     activeTrail: Set<string>;
     defaultOpen?: boolean;
+    scrollActiveIntoView?: boolean;
+    /**
+     * True only on renders where `activeId` genuinely changed from its previously committed value
+     * (never on the initial render, including Strict Mode's mount-effect replay). Rows use it to
+     * scroll into view only on a real transition — not when a selected child first mounts on load.
+     */
+    activeIdChanged?: boolean;
 }
 export declare const TableOfContentsContext: import('react').Context<TableOfContentsContextValue>;
 export declare const childrenToNodes: (children: ReactNode) => TableOfContentsNode[];