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

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/form/textarea/textarea.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),O=require("../textfield/textfield.cjs.js"),d=require("./textarea.module.scss.cjs.js"),N=a.forwardRef((_,o)=>{const{className:b,helper:p=[],characterLimit:s,onChange:n,onChangeEvent:g,value:l,defaultValue:q,autoGrow:t=!1,minRows:u=3,maxRows:y=12,height:H="7.5rem",maxHeight:i,...F}=_,[T,A]=a.useState(q??""),c=a.useRef(null),[v,E]=a.useState("auto"),j=a.useCallback(e=>{!l&&!(n||g)&&A(e),n==null||n(e)},[l,n,g]),m=a.useMemo(()=>l??T,[l,T]),r=a.useCallback(()=>{if(!t||!c.current)return;const e=c.current,$=e.style.overflow;e.style.overflow="hidden";const f=window.getComputedStyle(e);let h=parseFloat(f.lineHeight);isNaN(h)&&(h=(parseFloat(f.fontSize)||16)*1.5);const S=parseFloat(f.paddingTop),R=parseFloat(f.paddingBottom),B=e.scrollHeight-S-R;let x=Math.ceil(B/h);x=Math.min(Math.max(x,u),y);const M=`${x*h+S+R}px`;e.style.height=M,E(M),e.style.overflow=$,e.style.overflowY=e.scrollHeight>e.clientHeight?"auto":"hidden"},[t,u,y]);a.useEffect(()=>{t&&requestAnimationFrame(()=>{r()})},[m,t,r]),a.useEffect(()=>{t&&c.current&&r()},[t,r]);const k=a.useCallback(e=>{o&&(typeof o=="function"?o(e):o.current=e),e!=null&&e.input&&e.input instanceof HTMLTextAreaElement&&(c.current=e.input,t&&setTimeout(r,0))},[o,t,r]),z=a.useMemo(()=>t?{rows:u,style:{...i?{maxHeight:i}:{},overflow:"hidden",height:v}}:{style:{height:H,...i?{maxHeight:i}:{},overflow:"auto"}},[t,u,i,H,v]),C=m.length,I=s?`${C}/${s}`:"",V=[...Array.isArray(p)?p:[p],...s?[{type:C>s?"error":"hint",text:I,position:"right",className:w.default(d.default["tedi-textarea__character-count"])}]:[]];return L.jsx(O.TextField,{...F,ref:k,"data-name":"textarea",inputClassName:w.default(d.default["tedi-textarea__input"],{[d.default["tedi-textarea__input--auto-grow"]]:t}),isTextArea:!0,className:w.default(d.default["tedi-textarea"],b),value:m,onChange:j,onChangeEvent:g,helper:V,input:z})});N.displayName="Textarea";exports.Textarea=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react/jsx-runtime"),b=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),L=require("../textfield/textfield.cjs.js"),m=require("./textarea.module.scss.cjs.js"),M=a.forwardRef((N,i)=>{const{className:_,helper:w=[],characterLimit:d,onChange:l,onChangeEvent:y,value:h,defaultValue:q,autoGrow:t=!1,minRows:f=3,maxRows:v=12,height:T="7.5rem",maxHeight:c,...z}=N,[C,A]=a.useState(q??""),u=a.useRef(null),[R,E]=a.useState("auto"),O=a.useCallback(e=>{!h&&!(l||y)&&A(e),l==null||l(e)},[h,l,y]),H=a.useMemo(()=>h??C,[h,C]),r=a.useCallback(()=>{if(!t||!u.current)return;const e=u.current,p=e.style.overflow;e.style.overflow="hidden";const o=window.getComputedStyle(e);let n=parseFloat(o.lineHeight);isNaN(n)&&(n=(parseFloat(o.fontSize)||16)*1.5);const s=parseFloat(o.paddingTop),g=parseFloat(o.paddingBottom),x=o.boxSizing==="border-box"?(parseFloat(o.borderTopWidth)||0)+(parseFloat(o.borderBottomWidth)||0):0;e.style.height="auto";const I=e.scrollHeight-s-g,V=Math.ceil((I-1)/n),F=`${Math.min(Math.max(V,f),v)*n+s+g+x}px`;e.style.height=F,E(F),e.style.overflow=p,e.style.overflowY=e.scrollHeight-e.clientHeight>1?"auto":"hidden"},[t,f,v]);a.useEffect(()=>{t&&requestAnimationFrame(()=>{r()})},[H,t,r]),a.useEffect(()=>{t&&u.current&&r()},[t,r]),a.useEffect(()=>{const e=u.current;if(!t||!e||typeof ResizeObserver>"u")return;let p=e.clientWidth;const o=new ResizeObserver(n=>{var x;const s=((x=n[0])==null?void 0:x.contentRect.width)??0,g=s!==p;p=s,s>0&&g&&r()});return o.observe(e),()=>o.disconnect()},[t,r]);const W=a.useCallback(e=>{i&&(typeof i=="function"?i(e):i.current=e),e!=null&&e.input&&e.input instanceof HTMLTextAreaElement&&(u.current=e.input,t&&setTimeout(r,0))},[i,t,r]),j=a.useMemo(()=>t?{rows:f,style:{...c?{maxHeight:c}:{},overflow:"hidden",height:R}}:{style:{height:T,...c?{maxHeight:c}:{},overflow:"auto"}},[t,f,c,T,R]),S=H.length,k=d?`${S}/${d}`:"",B=[...Array.isArray(w)?w:[w],...d?[{type:S>d?"error":"hint",text:k,position:"right",className:b.default(m.default["tedi-textarea__character-count"])}]:[]];return $.jsx(L.TextField,{...z,ref:W,"data-name":"textarea",inputClassName:b.default(m.default["tedi-textarea__input"],{[m.default["tedi-textarea__input--auto-grow"]]:t}),isTextArea:!0,className:b.default(m.default["tedi-textarea"],_),value:H,onChange:O,onChangeEvent:y,helper:B,input:j})});M.displayName="Textarea";exports.Textarea=M;

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

@@ -1,93 +1,102 @@
-import { jsx as q } from "react/jsx-runtime";
-import w from "../../../../../external/classnames/index.es.js";
-import a, { forwardRef as G, useRef as O, useEffect as S } from "react";
+import { jsx as j } from "react/jsx-runtime";
+import v from "../../../../../external/classnames/index.es.js";
+import a, { forwardRef as q, useRef as G, useEffect as b } from "react";
 import { TextField as P } from "../textfield/textfield.es.js";
-import p from "./textarea.module.scss.es.js";
-const Y = G((F, r) => {
+import x from "./textarea.module.scss.es.js";
+const Y = q((_, i) => {
   const {
-    className: M,
-    helper: f = [],
-    characterLimit: i,
-    onChange: s,
-    onChangeEvent: g,
-    value: l,
-    defaultValue: A,
+    className: z,
+    helper: w = [],
+    characterLimit: h,
+    onChange: l,
+    onChangeEvent: y,
+    value: p,
+    defaultValue: M,
     autoGrow: e = !1,
-    minRows: c = 3,
-    maxRows: H = 12,
-    height: y = "7.5rem",
-    maxHeight: n,
-    ...b
-  } = F, [v, k] = a.useState(A ?? ""), u = O(null), [C, z] = a.useState("auto"), E = a.useCallback(
+    minRows: f = 3,
+    maxRows: C = 12,
+    height: R = "7.5rem",
+    maxHeight: c,
+    ...A
+  } = _, [T, W] = a.useState(M ?? ""), u = G(null), [F, k] = a.useState("auto"), B = a.useCallback(
     (t) => {
-      !l && !(s || g) && k(t), s == null || s(t);
+      !p && !(l || y) && W(t), l == null || l(t);
     },
-    [l, s, g]
-  ), x = a.useMemo(() => l ?? v, [l, v]), o = a.useCallback(() => {
+    [p, l, y]
+  ), H = a.useMemo(() => p ?? T, [p, T]), r = a.useCallback(() => {
     if (!e || !u.current) return;
-    const t = u.current, L = t.style.overflow;
+    const t = u.current, d = t.style.overflow;
     t.style.overflow = "hidden";
-    const h = window.getComputedStyle(t);
-    let m = parseFloat(h.lineHeight);
-    isNaN(m) && (m = (parseFloat(h.fontSize) || 16) * 1.5);
-    const N = parseFloat(h.paddingTop), _ = parseFloat(h.paddingBottom), j = t.scrollHeight - N - _;
-    let d = Math.ceil(j / m);
-    d = Math.min(Math.max(d, c), H);
-    const R = `${d * m + N + _}px`;
-    t.style.height = R, z(R), t.style.overflow = L, t.style.overflowY = t.scrollHeight > t.clientHeight ? "auto" : "hidden";
-  }, [e, c, H]);
-  S(() => {
+    const o = window.getComputedStyle(t);
+    let n = parseFloat(o.lineHeight);
+    isNaN(n) && (n = (parseFloat(o.fontSize) || 16) * 1.5);
+    const s = parseFloat(o.paddingTop), m = parseFloat(o.paddingBottom), g = o.boxSizing === "border-box" ? (parseFloat(o.borderTopWidth) || 0) + (parseFloat(o.borderBottomWidth) || 0) : 0;
+    t.style.height = "auto";
+    const $ = t.scrollHeight - s - m, L = Math.ceil(($ - 1) / n), S = `${Math.min(Math.max(L, f), C) * n + s + m + g}px`;
+    t.style.height = S, k(S), t.style.overflow = d, t.style.overflowY = t.scrollHeight - t.clientHeight > 1 ? "auto" : "hidden";
+  }, [e, f, C]);
+  b(() => {
     e && requestAnimationFrame(() => {
-      o();
+      r();
     });
-  }, [x, e, o]), S(() => {
-    e && u.current && o();
-  }, [e, o]);
-  const I = a.useCallback(
+  }, [H, e, r]), b(() => {
+    e && u.current && r();
+  }, [e, r]), b(() => {
+    const t = u.current;
+    if (!e || !t || typeof ResizeObserver > "u") return;
+    let d = t.clientWidth;
+    const o = new ResizeObserver((n) => {
+      var g;
+      const s = ((g = n[0]) == null ? void 0 : g.contentRect.width) ?? 0, m = s !== d;
+      d = s, s > 0 && m && r();
+    });
+    return o.observe(t), () => o.disconnect();
+  }, [e, r]);
+  const E = a.useCallback(
     (t) => {
-      r && (typeof r == "function" ? r(t) : r.current = t), t != null && t.input && t.input instanceof HTMLTextAreaElement && (u.current = t.input, e && setTimeout(o, 0));
+      i && (typeof i == "function" ? i(t) : i.current = t), t != null && t.input && t.input instanceof HTMLTextAreaElement && (u.current = t.input, e && setTimeout(r, 0));
     },
-    [r, e, o]
-  ), V = a.useMemo(() => e ? {
-    rows: c,
+    [i, e, r]
+  ), I = a.useMemo(() => e ? {
+    rows: f,
     style: {
-      ...n ? { maxHeight: n } : {},
+      ...c ? { maxHeight: c } : {},
       overflow: "hidden",
-      height: C
+      height: F
     }
   } : {
     style: {
-      height: y,
-      ...n ? { maxHeight: n } : {},
+      height: R,
+      ...c ? { maxHeight: c } : {},
       overflow: "auto"
     }
-  }, [e, c, n, y, C]), T = x.length, $ = i ? `${T}/${i}` : "", B = [
-    ...Array.isArray(f) ? f : [f],
-    ...i ? [
+  }, [e, f, c, R, F]), N = H.length, O = h ? `${N}/${h}` : "", V = [
+    ...Array.isArray(w) ? w : [w],
+    ...h ? [
       {
-        type: T > i ? "error" : "hint",
-        text: $,
+        type: N > h ? "error" : "hint",
+        text: O,
         position: "right",
-        className: w(p["tedi-textarea__character-count"])
+        className: v(x["tedi-textarea__character-count"])
       }
     ] : []
   ];
-  return /* @__PURE__ */ q(
+  return /* @__PURE__ */ j(
     P,
     {
-      ...b,
-      ref: I,
+      ...A,
+      ref: E,
       "data-name": "textarea",
-      inputClassName: w(p["tedi-textarea__input"], {
-        [p["tedi-textarea__input--auto-grow"]]: e
+      inputClassName: v(x["tedi-textarea__input"], {
+        [x["tedi-textarea__input--auto-grow"]]: e
       }),
       isTextArea: !0,
-      className: w(p["tedi-textarea"], M),
-      value: x,
-      onChange: E,
-      onChangeEvent: g,
-      helper: B,
-      input: V
+      className: v(x["tedi-textarea"], z),
+      value: H,
+      onChange: B,
+      onChangeEvent: y,
+      helper: V,
+      input: I
     }
   );
 });

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