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

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

@@ -1,98 +1,136 @@
-import { jsxs as c, jsx as d } from "react/jsx-runtime";
-import l from "../../../../../external/classnames/index.es.js";
-import n from "react";
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import t from "../../../../../external/classnames/index.es.js";
+import o from "react";
+import { Icon as ee } from "../../base/icon/icon.es.js";
 import { FeedbackText as q } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as v } from "../form-label/form-label.es.js";
-import e from "./radio.module.scss.es.js";
-import { Row as E } from "../../layout/grid/row.es.js";
-import { Col as N } from "../../layout/grid/col.es.js";
-const K = (C) => {
-  const {
-    id: o,
+import { FormLabel as ae } from "../form-label/form-label.es.js";
+import a from "./radio.module.scss.es.js";
+import { RadioGroupContext as ie } from "./radio-group/radio-group-context.es.js";
+import { useBreakpointProps as de } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { Row as re } from "../../layout/grid/row.es.js";
+import { Col as V } from "../../layout/grid/col.es.js";
+const te = (k) => {
+  const e = o.useContext(ie), { getCurrentBreakpointProps: $ } = de(k.defaultServerBreakpoint), {
+    id: L,
     label: m,
-    value: p,
-    className: g,
-    disabled: s,
-    onChange: a,
-    hideLabel: y,
+    value: s,
+    className: y,
+    onChange: c,
+    hideLabel: C,
     helper: r,
-    checked: t,
-    defaultChecked: R,
-    hover: x,
-    name: j,
-    tooltip: h,
-    labelProps: w,
-    size: f = "default",
-    invalid: I,
-    required: u,
-    ...L
-  } = C, [_, $] = n.useState(R || !1), b = n.useRef(null), z = n.useMemo(() => a && typeof t < "u" ? t : _, [a, _, t]), B = (i) => {
-    typeof t > "u" && $(i == null ? void 0 : i.target.checked), a == null || a(p, i == null ? void 0 : i.target.checked);
-  }, k = r ? r.id ?? `${o}-helper` : void 0, F = h ? `${o}-tooltip` : void 0, M = l(e["tedi-radio__label"], { [e["tedi-radio--disabled"]]: s });
-  return /* @__PURE__ */ c(
+    checked: p,
+    defaultChecked: j,
+    hover: E,
+    name: D,
+    tooltip: P,
+    description: b,
+    icon: _,
+    labelProps: F,
+    size: G,
+    variant: M,
+    cardVariant: S,
+    disabled: H,
+    invalid: T,
+    required: I,
+    ...w
+  } = $(k), u = G ?? (e == null ? void 0 : e.size) ?? "default", B = M ?? (e == null ? void 0 : e.variant) ?? "default", U = S ?? (e == null ? void 0 : e.cardVariant) ?? "primary", h = H ?? (e == null ? void 0 : e.disabled) ?? !1, A = T ?? (e == null ? void 0 : e.invalid), J = I ?? (e == null ? void 0 : e.required);
+  B === "card" && P && console.warn('Radio: `tooltip` is not supported with `variant="card"` and will be ignored. Use `description`.');
+  const K = o.useId(), n = L ?? K, O = D ?? (e == null ? void 0 : e.name), [x, Q] = o.useState(j || !1), N = e !== null, W = o.useMemo(() => N ? (e == null ? void 0 : e.value) === s : c && typeof p < "u" ? p : x, [N, e, s, c, p, x]), X = (d) => {
+    N ? e == null || e.onValueChange(s) : typeof p > "u" && Q(d == null ? void 0 : d.target.checked), c == null || c(s, d == null ? void 0 : d.target.checked);
+  }, f = r ? r.id ?? `${n}-helper` : void 0, Y = f, z = /* @__PURE__ */ i(
+    "input",
+    {
+      id: n,
+      value: s,
+      name: O,
+      type: "radio",
+      disabled: h,
+      checked: W,
+      required: J,
+      onChange: X,
+      className: a["tedi-radio__input"],
+      "aria-describedby": Y
+    }
+  ), v = /* @__PURE__ */ i(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: t(
+        a["tedi-radio__indicator"],
+        { [a["tedi-radio__indicator--hover"]]: E },
+        { [a[`tedi-radio__indicator--size-${u}`]]: u },
+        { [a["tedi-radio__indicator--invalid"]]: A }
+      ),
+      "data-testid": "radio-indicator"
+    }
+  );
+  if (B === "card") {
+    const d = `${n}-label`, R = b ? `${n}-description` : void 0, g = [R, f].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ l(
+      "label",
+      {
+        "data-name": "radio",
+        className: t(
+          a["tedi-radio"],
+          a["tedi-radio--card"],
+          a[`tedi-radio--card-${U}`],
+          { [a["tedi-radio--card-with-icon"]]: !!_ },
+          { [a["tedi-radio--disabled"]]: h },
+          y
+        ),
+        ...w,
+        children: [
+          /* @__PURE__ */ l("span", { className: a["tedi-radio__card-control"], children: [
+            o.cloneElement(z, {
+              "aria-labelledby": m ? d : void 0,
+              "aria-describedby": g
+            }),
+            v,
+            _ && /* @__PURE__ */ i(ee, { name: _, size: u === "default" ? 18 : 24, className: a["tedi-radio__card-icon"] }),
+            /* @__PURE__ */ i("span", { id: d, className: t(a["tedi-radio__card-label"], { "sr-only": C }), children: m })
+          ] }),
+          b && /* @__PURE__ */ i("span", { id: R, className: a["tedi-radio__card-description"], children: b }),
+          r && /* @__PURE__ */ i(q, { id: f, ...r, className: t(a["tedi-radio__helper"], r.className) })
+        ]
+      }
+    );
+  }
+  const Z = t(a["tedi-radio__label"], { [a["tedi-radio--disabled"]]: h });
+  return /* @__PURE__ */ l(
     "div",
     {
-      className: l(e["tedi-radio"], { [e["tedi-radio--disabled"]]: s }),
+      className: t(a["tedi-radio"], { [a["tedi-radio--disabled"]]: h }),
       "data-name": "radio",
-      ...L,
+      ...w,
       children: [
-        /* @__PURE__ */ c(E, { gutter: 0, children: [
-          /* @__PURE__ */ d(N, { width: "auto", children: /* @__PURE__ */ c("div", { className: e["tedi-radio__outer-indicator-wrapper"], children: [
-            /* @__PURE__ */ d(
-              "input",
-              {
-                id: o,
-                value: p,
-                name: j,
-                type: "radio",
-                disabled: s,
-                checked: z,
-                onChange: B,
-                className: e["tedi-radio__input"],
-                "aria-describedby": [k, F].filter(Boolean).join(" "),
-                required: u
-              }
-            ),
-            /* @__PURE__ */ d(
-              "div",
-              {
-                "aria-hidden": "true",
-                onClick: () => {
-                  var i;
-                  return (i = b.current) == null ? void 0 : i.click();
-                },
-                className: l(
-                  e["tedi-radio__indicator"],
-                  { [e["tedi-radio__indicator--hover"]]: x },
-                  { [e[`tedi-radio__indicator--size-${f}`]]: f },
-                  { [e["tedi-radio__indicator--invalid"]]: I },
-                  g
-                ),
-                "data-testid": "radio-indicator"
-              }
-            )
+        /* @__PURE__ */ l(re, { gutter: 0, children: [
+          /* @__PURE__ */ i(V, { width: "auto", children: /* @__PURE__ */ l("div", { className: a["tedi-radio__outer-indicator-wrapper"], children: [
+            z,
+            o.cloneElement(v, {
+              className: t(v.props.className, y)
+            })
           ] }) }),
-          m && /* @__PURE__ */ d(N, { children: /* @__PURE__ */ d(
-            v,
+          m && /* @__PURE__ */ i(V, { children: /* @__PURE__ */ i(
+            ae,
             {
-              ref: b,
-              className: M,
-              id: o,
+              className: Z,
+              id: n,
               "data-testid": "radio-label",
-              hideLabel: y,
+              hideLabel: C,
               label: m,
-              tooltip: h,
-              required: u,
-              labelProps: w
+              tooltip: P,
+              required: I,
+              labelProps: F
             }
           ) })
         ] }),
-        r && /* @__PURE__ */ d(q, { id: k, ...r, className: l(e["tedi-radio__helper"], r.className) })
+        r && /* @__PURE__ */ i(q, { id: f, ...r, className: t(a["tedi-radio__helper"], r.className) })
       ]
     }
   );
 };
+te.displayName = "Radio";
 export {
-  K as Radio,
-  K as default
+  te as Radio,
+  te as default
 };

package/src/tedi/components/form/radio/radio.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i={"tedi-radio":"tedi-radio-c814e478","tedi-radio--disabled":"tedi-radio--disabled-fb9dbcd0","tedi-radio__input":"tedi-radio__input-62863a92","tedi-radio__indicator":"tedi-radio__indicator-c6e05a3f","tedi-radio__indicator--size-default":"tedi-radio__indicator--size-default-dd9e104b","tedi-radio__indicator--size-large":"tedi-radio__indicator--size-large-c5c7d068","tedi-radio__indicator--invalid":"tedi-radio__indicator--invalid-d5a930d7","tedi-radio__indicator--hover":"tedi-radio__indicator--hover-6e11a48a","tedi-radio__outer-indicator-wrapper":"tedi-radio__outer-indicator-wrapper-7c0ad4cd","tedi-radio__helper":"tedi-radio__helper-266c7814"};exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d={"tedi-radio":"tedi-radio-c814e478","tedi-radio--disabled":"tedi-radio--disabled-fb9dbcd0","tedi-radio__input":"tedi-radio__input-62863a92","tedi-radio__indicator":"tedi-radio__indicator-c6e05a3f","tedi-radio__indicator--size-default":"tedi-radio__indicator--size-default-dd9e104b","tedi-radio__indicator--size-large":"tedi-radio__indicator--size-large-c5c7d068","tedi-radio__indicator--invalid":"tedi-radio__indicator--invalid-d5a930d7","tedi-radio__indicator--hover":"tedi-radio__indicator--hover-6e11a48a","tedi-radio__outer-indicator-wrapper":"tedi-radio__outer-indicator-wrapper-7c0ad4cd","tedi-radio__helper":"tedi-radio__helper-266c7814","tedi-radio--card":"tedi-radio--card-f10f7b18","tedi-radio__card-control":"tedi-radio__card-control-d010324f","tedi-radio__card-label":"tedi-radio__card-label-19b7c642","tedi-radio__card-icon":"tedi-radio__card-icon-fa03c66c","tedi-radio__card-description":"tedi-radio__card-description-69c958cf","tedi-radio--card-with-icon":"tedi-radio--card-with-icon-0735f37d","tedi-radio--card-primary":"tedi-radio--card-primary-f05b3587","tedi-radio--card-secondary":"tedi-radio--card-secondary-9a5fbafe"};exports.default=d;

package/src/tedi/components/form/radio/radio.module.scss.es.js

@@ -1,4 +1,4 @@
-const i = {
+const d = {
   "tedi-radio": "tedi-radio-c814e478",
   "tedi-radio--disabled": "tedi-radio--disabled-fb9dbcd0",
   "tedi-radio__input": "tedi-radio__input-62863a92",
@@ -8,8 +8,16 @@ const i = {
   "tedi-radio__indicator--invalid": "tedi-radio__indicator--invalid-d5a930d7",
   "tedi-radio__indicator--hover": "tedi-radio__indicator--hover-6e11a48a",
   "tedi-radio__outer-indicator-wrapper": "tedi-radio__outer-indicator-wrapper-7c0ad4cd",
-  "tedi-radio__helper": "tedi-radio__helper-266c7814"
+  "tedi-radio__helper": "tedi-radio__helper-266c7814",
+  "tedi-radio--card": "tedi-radio--card-f10f7b18",
+  "tedi-radio__card-control": "tedi-radio__card-control-d010324f",
+  "tedi-radio__card-label": "tedi-radio__card-label-19b7c642",
+  "tedi-radio__card-icon": "tedi-radio__card-icon-fa03c66c",
+  "tedi-radio__card-description": "tedi-radio__card-description-69c958cf",
+  "tedi-radio--card-with-icon": "tedi-radio--card-with-icon-0735f37d",
+  "tedi-radio--card-primary": "tedi-radio--card-primary-f05b3587",
+  "tedi-radio--card-secondary": "tedi-radio--card-secondary-9a5fbafe"
 };
 export {
-  i as default
+  d as default
 };

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

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

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

package/src/tedi/index.d.ts

@@ -49,14 +49,14 @@ export * from './components/form/number-field/number-field';
 export * from './components/form/toggle/toggle';
 export * from './components/form/feedback-text/feedback-text';
 export * from './components/form/search';
-export * from './components/form/radio/radio';
+export * from './components/form/radio';
 export * from './components/form/choice-group';
 export * from './components/form/file-upload/file-upload';
 export * from './components/form/file-dropzone/file-dropzone';
 export * from './components/form/select/select';
 export * from './components/form/time-field/time-field';
 export * from './components/form/time-picker/time-picker';
-export * from './components/form/checkbox/checkbox';
+export * from './components/form/checkbox';
 export * from './components/form/slider/slider';
 export * from './components/form/date-field/date-field';
 export * from './components/filter/filter';