@tedi-design-system/react 19.0.0-rc.2 → 19.0.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.0.0-rc.2",
+  "version": "19.0.0-rc.4",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/tedi/components/navigation/breadcrumbs/breadcrumbs.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),I=require("../../base/icon/icon.cjs.js"),M=require("../../buttons/button/button.cjs.js"),t=require("./breadcrumbs.module.scss.cjs.js"),P=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),S=require("../../../providers/label-provider/use-labels.cjs.js"),d=require("../../overlays/dropdown/dropdown.cjs.js"),N=n=>{const l=[];return o.Children.forEach(n,a=>{if(o.isValidElement(a)){if(a.type===o.Fragment){l.push(...N(a.props.children));return}l.push(a)}}),l},D=e.jsx(I.Icon,{name:"chevron_right",size:16,color:"brand"}),k=n=>{const{children:l,ariaLabel:a,showMoreLabel:w,separator:B=D,className:h}=n,{getCurrentBreakpointProps:C}=P.useBreakpointProps(n.defaultServerBreakpoint),{variant:q="long",maxItems:p,itemsBeforeCollapse:v=1,itemsAfterCollapse:y=1}=C(n),{getLabel:f}=S.useLabels(),x=a??f("breadcrumbs"),L=w??f("breadcrumbs.show-more"),s=N(l);if(s.length===0)return null;if(q==="short"){if(s.length<2)return null;const r=s[s.length-2],i=r.props,c=typeof r.type!="string"&&i.iconLeft===void 0?o.cloneElement(r,{iconLeft:"arrow_back"}):r;return e.jsx("nav",{"aria-label":x,className:b.default(t.default["tedi-breadcrumbs"],h),children:e.jsx("ol",{className:t.default["tedi-breadcrumbs__list"],children:e.jsx("li",{className:t.default["tedi-breadcrumbs__item"],children:c})})})}const u=Math.max(0,v),m=Math.max(1,y),g=p!==void 0&&s.length>p&&s.length>u+m?[...s.slice(0,u).map(r=>({kind:"item",element:r})),{kind:"ellipsis",hidden:s.slice(u,s.length-m)},...s.slice(s.length-m).map(r=>({kind:"item",element:r}))]:s.map(r=>({kind:"item",element:r})),j=g.length-1;return e.jsx("nav",{"aria-label":x,className:b.default(t.default["tedi-breadcrumbs"],h),children:e.jsx("ol",{className:t.default["tedi-breadcrumbs__list"],children:g.map((r,i)=>e.jsxs(o.Fragment,{children:[r.kind==="item"?e.jsx("li",{className:b.default(t.default["tedi-breadcrumbs__item"],{[t.default["tedi-breadcrumbs__current"]]:i===j}),children:r.element}):e.jsx("li",{className:t.default["tedi-breadcrumbs__item"],children:e.jsxs(d.Dropdown,{children:[e.jsx(d.Dropdown.Trigger,{children:e.jsxs(M.Button,{noStyle:!0,className:t.default["tedi-breadcrumbs__ellipsis"],children:[e.jsx("span",{"aria-hidden":"true",children:"…"}),e.jsx("span",{className:"sr-only",children:L})]})}),e.jsx(d.Dropdown.Content,{children:r.hidden.map((c,_)=>e.jsx(d.Dropdown.Item,{index:_,asChild:!0,children:c},c.key??_))})]})}),i<j&&e.jsx("li",{className:t.default["tedi-breadcrumbs__separator"],"aria-hidden":"true",children:B})]},i))})})};k.displayName="Breadcrumbs";exports.Breadcrumbs=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),S=require("../../base/icon/icon.cjs.js"),M=require("../../buttons/button/button.cjs.js"),t=require("./breadcrumbs.module.scss.cjs.js"),P=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),D=require("../../../providers/label-provider/use-labels.cjs.js"),d=require("../../overlays/dropdown/dropdown.cjs.js"),y=i=>{const o=[];return l.Children.forEach(i,a=>{if(l.isValidElement(a)){if(a.type===l.Fragment){o.push(...y(a.props.children));return}o.push(a)}}),o},E=e.jsx(S.Icon,{name:"chevron_right",size:16,color:"brand"}),N=i=>{const{children:o,ariaLabel:a,showMoreLabel:k,separator:w=E,className:p}=i,{getCurrentBreakpointProps:B}=P.useBreakpointProps(i.defaultServerBreakpoint),{variant:q="long",maxItems:h,itemsBeforeCollapse:v=1,itemsAfterCollapse:C=1}=B(i),{getLabel:f}=D.useLabels(),x=a??f("breadcrumbs"),L=k??f("breadcrumbs.show-more"),s=y(o);if(s.length===0)return null;if(q==="short"){if(s.length<2)return null;const r=s[s.length-2],c=r.props,n=typeof r.type!="string"&&c.iconLeft===void 0?l.cloneElement(r,{iconLeft:"arrow_back"}):r;return e.jsx("nav",{"aria-label":x,className:b.default(t.default["tedi-breadcrumbs"],p),children:e.jsx("ol",{className:t.default["tedi-breadcrumbs__list"],children:e.jsx("li",{className:t.default["tedi-breadcrumbs__item"],children:n})})})}const u=Math.max(0,v),m=Math.max(1,C),g=h!==void 0&&s.length>h&&s.length>u+m?[...s.slice(0,u).map(r=>({kind:"item",element:r})),{kind:"ellipsis",hidden:s.slice(u,s.length-m)},...s.slice(s.length-m).map(r=>({kind:"item",element:r}))]:s.map(r=>({kind:"item",element:r})),j=g.length-1;return e.jsx("nav",{"aria-label":x,className:b.default(t.default["tedi-breadcrumbs"],p),children:e.jsx("ol",{className:t.default["tedi-breadcrumbs__list"],children:g.map((r,c)=>e.jsxs(l.Fragment,{children:[r.kind==="item"?e.jsx("li",{className:b.default(t.default["tedi-breadcrumbs__item"],{[t.default["tedi-breadcrumbs__current"]]:c===j}),children:r.element}):e.jsx("li",{className:t.default["tedi-breadcrumbs__item"],children:e.jsxs(d.Dropdown,{children:[e.jsx(d.Dropdown.Trigger,{children:e.jsxs(M.Button,{noStyle:!0,className:t.default["tedi-breadcrumbs__ellipsis"],children:[e.jsx("span",{"aria-hidden":"true",children:"…"}),e.jsx("span",{className:"sr-only",children:L})]})}),e.jsx(d.Dropdown.Content,{children:r.hidden.map((n,_)=>{const I=typeof n.type!="string"?l.cloneElement(n,{noStyle:!0}):n;return e.jsx(d.Dropdown.Item,{index:_,asChild:!0,children:I},n.key??_)})})]})}),c<j&&e.jsx("li",{className:t.default["tedi-breadcrumbs__separator"],"aria-hidden":"true",children:w})]},c))})})};N.displayName="Breadcrumbs";exports.Breadcrumbs=N;

package/src/tedi/components/navigation/breadcrumbs/breadcrumbs.es.js

@@ -1,37 +1,37 @@
 import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import h from "../../../../../external/classnames/index.es.js";
-import { cloneElement as E, Fragment as k, Children as P, isValidElement as S } from "react";
-import { Icon as j } from "../../base/icon/icon.es.js";
-import { Button as A } from "../../buttons/button/button.es.js";
+import u from "../../../../../external/classnames/index.es.js";
+import { cloneElement as k, Fragment as C, Children as P, isValidElement as j } from "react";
+import { Icon as A } from "../../base/icon/icon.es.js";
+import { Button as T } from "../../buttons/button/button.es.js";
 import s from "./breadcrumbs.module.scss.es.js";
-import { useBreakpointProps as T } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as z } from "../../../providers/label-provider/use-labels.es.js";
+import { useBreakpointProps as z } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as D } from "../../../providers/label-provider/use-labels.es.js";
 import { Dropdown as c } from "../../overlays/dropdown/dropdown.es.js";
 const v = (l) => {
-  const n = [];
+  const i = [];
   return P.forEach(l, (a) => {
-    if (S(a)) {
-      if (a.type === k) {
-        n.push(...v(a.props.children));
+    if (j(a)) {
+      if (a.type === C) {
+        i.push(...v(a.props.children));
         return;
       }
-      n.push(a);
+      i.push(a);
     }
-  }), n;
-}, D = /* @__PURE__ */ r(j, { name: "chevron_right", size: 16, color: "brand" }), F = (l) => {
-  const { children: n, ariaLabel: a, showMoreLabel: y, separator: B = D, className: u } = l, { getCurrentBreakpointProps: L } = T(l.defaultServerBreakpoint), {
-    variant: w = "long",
+  }), i;
+}, F = /* @__PURE__ */ r(A, { name: "chevron_right", size: 16, color: "brand" }), V = (l) => {
+  const { children: i, ariaLabel: a, showMoreLabel: B, separator: L = F, className: h } = l, { getCurrentBreakpointProps: w } = z(l.defaultServerBreakpoint), {
+    variant: x = "long",
     maxItems: b,
-    itemsBeforeCollapse: x = 1,
-    itemsAfterCollapse: I = 1
-  } = L(l), { getLabel: f } = z(), _ = a ?? f("breadcrumbs"), M = y ?? f("breadcrumbs.show-more"), t = v(n);
+    itemsBeforeCollapse: I = 1,
+    itemsAfterCollapse: M = 1
+  } = w(l), { getLabel: f } = D(), _ = a ?? f("breadcrumbs"), S = B ?? f("breadcrumbs.show-more"), t = v(i);
   if (t.length === 0) return null;
-  if (w === "short") {
+  if (x === "short") {
     if (t.length < 2) return null;
-    const e = t[t.length - 2], i = e.props, o = typeof e.type != "string" && i.iconLeft === void 0 ? E(e, { iconLeft: "arrow_back" }) : e;
-    return /* @__PURE__ */ r("nav", { "aria-label": _, className: h(s["tedi-breadcrumbs"], u), children: /* @__PURE__ */ r("ol", { className: s["tedi-breadcrumbs__list"], children: /* @__PURE__ */ r("li", { className: s["tedi-breadcrumbs__item"], children: o }) }) });
+    const e = t[t.length - 2], o = e.props, n = typeof e.type != "string" && o.iconLeft === void 0 ? k(e, { iconLeft: "arrow_back" }) : e;
+    return /* @__PURE__ */ r("nav", { "aria-label": _, className: u(s["tedi-breadcrumbs"], h), children: /* @__PURE__ */ r("ol", { className: s["tedi-breadcrumbs__list"], children: /* @__PURE__ */ r("li", { className: s["tedi-breadcrumbs__item"], children: n }) }) });
   }
-  const m = Math.max(0, x), d = Math.max(1, I), g = b !== void 0 && t.length > b && t.length > m + d ? [
+  const m = Math.max(0, I), d = Math.max(1, M), g = b !== void 0 && t.length > b && t.length > m + d ? [
     ...t.slice(0, m).map((e) => ({ kind: "item", element: e })),
     {
       kind: "ellipsis",
@@ -39,26 +39,29 @@ const v = (l) => {
     },
     ...t.slice(t.length - d).map((e) => ({ kind: "item", element: e }))
   ] : t.map((e) => ({ kind: "item", element: e })), N = g.length - 1;
-  return /* @__PURE__ */ r("nav", { "aria-label": _, className: h(s["tedi-breadcrumbs"], u), children: /* @__PURE__ */ r("ol", { className: s["tedi-breadcrumbs__list"], children: g.map((e, i) => /* @__PURE__ */ p(k, { children: [
+  return /* @__PURE__ */ r("nav", { "aria-label": _, className: u(s["tedi-breadcrumbs"], h), children: /* @__PURE__ */ r("ol", { className: s["tedi-breadcrumbs__list"], children: g.map((e, o) => /* @__PURE__ */ p(C, { children: [
     e.kind === "item" ? /* @__PURE__ */ r(
       "li",
       {
-        className: h(s["tedi-breadcrumbs__item"], {
-          [s["tedi-breadcrumbs__current"]]: i === N
+        className: u(s["tedi-breadcrumbs__item"], {
+          [s["tedi-breadcrumbs__current"]]: o === N
         }),
         children: e.element
       }
     ) : /* @__PURE__ */ r("li", { className: s["tedi-breadcrumbs__item"], children: /* @__PURE__ */ p(c, { children: [
-      /* @__PURE__ */ r(c.Trigger, { children: /* @__PURE__ */ p(A, { noStyle: !0, className: s["tedi-breadcrumbs__ellipsis"], children: [
+      /* @__PURE__ */ r(c.Trigger, { children: /* @__PURE__ */ p(T, { noStyle: !0, className: s["tedi-breadcrumbs__ellipsis"], children: [
         /* @__PURE__ */ r("span", { "aria-hidden": "true", children: "…" }),
-        /* @__PURE__ */ r("span", { className: "sr-only", children: M })
+        /* @__PURE__ */ r("span", { className: "sr-only", children: S })
       ] }) }),
-      /* @__PURE__ */ r(c.Content, { children: e.hidden.map((o, C) => /* @__PURE__ */ r(c.Item, { index: C, asChild: !0, children: o }, o.key ?? C)) })
+      /* @__PURE__ */ r(c.Content, { children: e.hidden.map((n, y) => {
+        const E = typeof n.type != "string" ? k(n, { noStyle: !0 }) : n;
+        return /* @__PURE__ */ r(c.Item, { index: y, asChild: !0, children: E }, n.key ?? y);
+      }) })
     ] }) }),
-    i < N && /* @__PURE__ */ r("li", { className: s["tedi-breadcrumbs__separator"], "aria-hidden": "true", children: B })
-  ] }, i)) }) });
+    o < N && /* @__PURE__ */ r("li", { className: s["tedi-breadcrumbs__separator"], "aria-hidden": "true", children: L })
+  ] }, o)) }) });
 };
-F.displayName = "Breadcrumbs";
+V.displayName = "Breadcrumbs";
 export {
-  F as Breadcrumbs
+  V as Breadcrumbs
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),M=require("../../../../../../../external/classnames/index.cjs.js"),n=require("react"),C=require("../../../../base/typography/text/text.cjs.js"),T=require("../../../../buttons/collapse-button/collapse-button.cjs.js"),u=require("../../table-of-contents.cjs.js"),t=require("../../table-of-contents.module.scss.cjs.js"),L=require("../table-of-contents-list/table-of-contents-list.cjs.js"),y=require("../../../../../providers/label-provider/use-labels.cjs.js"),i=require("../../../../overlays/modal/modal.cjs.js"),g=j=>{const{children:f,heading:b,activeId:o,showIcons:x=!1,numbered:h=!1,sticky:_=!0,className:O}=j,{getLabel:s}=y.useLabels(),[l,a]=n.useState(!1),m=n.useRef(null);n.useEffect(()=>{const d=m.current;if(!l||!d)return;const v=N=>{N.target.closest("a, button")&&a(!1)};return d.addEventListener("click",v),()=>d.removeEventListener("click",v)},[l]);const c=n.useMemo(()=>u.childrenToNodes(f),[f]),p=n.useMemo(()=>u.buildActiveTrail(c,o),[c,o]),q=n.useMemo(()=>({activeId:o,showIcons:x,numbered:h,activeTrail:p}),[o,x,h,p]),r=(b===void 0?s("table-of-contents.title"):b)??s("table-of-contents.title");return e.jsxs(u.TableOfContentsContext.Provider,{value:q,children:[e.jsxs("div",{className:M.default(t.default["tedi-table-of-contents__bar"],{[t.default["tedi-table-of-contents__bar--static"]]:!_},O),children:[e.jsx(C.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:r}),e.jsx(T.CollapseButton,{open:l,onOpenChange:a,openText:s("open"),closeText:s("close"),underline:!1,"aria-haspopup":"dialog"})]}),e.jsx(i.Modal,{open:l,onToggle:a,children:e.jsxs(i.Modal.Content,{position:"bottom",fullscreen:"edge","aria-label":r,className:t.default["tedi-table-of-contents__sheet"],children:[e.jsx(i.Modal.Header,{closeButton:!1,children:e.jsxs("div",{className:t.default["tedi-table-of-contents__sheet-header"],children:[e.jsx(C.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:r}),e.jsx(T.CollapseButton,{open:l,onOpenChange:a,openText:s("open"),closeText:s("close"),underline:!1})]})}),e.jsx(i.Modal.Body,{children:e.jsx("div",{ref:m,className:t.default["tedi-table-of-contents"],children:e.jsx(L.TableOfContentsList,{nodes:c,heading:null})})})]})})]})};g.displayName="TableOfContentsCollapsible";exports.TableOfContentsCollapsible=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),M=require("../../../../../../../external/classnames/index.cjs.js"),n=require("react"),C=require("../../../../base/typography/text/text.cjs.js"),T=require("../../../../buttons/collapse-button/collapse-button.cjs.js"),u=require("../../table-of-contents.cjs.js"),t=require("../../table-of-contents.module.scss.cjs.js"),y=require("../table-of-contents-list/table-of-contents-list.cjs.js"),B=require("../../../../../providers/label-provider/use-labels.cjs.js"),c=require("../../../../overlays/modal/modal.cjs.js"),g=j=>{const{children:f,heading:b,ariaLabel:_,activeId:o,numbered:x=!1,sticky:O=!0,className:q}=j,{getLabel:s}=B.useLabels(),[l,a]=n.useState(!1),h=n.useRef(null);n.useEffect(()=>{const d=h.current;if(!l||!d)return;const v=N=>{N.target.closest("a, button")&&a(!1)};return d.addEventListener("click",v),()=>d.removeEventListener("click",v)},[l]);const i=(b===void 0?s("table-of-contents.title"):b)??s("table-of-contents.title"),m=_||i,r=n.useMemo(()=>u.childrenToNodes(f),[f]),p=n.useMemo(()=>u.buildActiveTrail(r,o),[r,o]),L=n.useMemo(()=>({activeId:o,numbered:x,ariaLabel:m,activeTrail:p}),[o,x,m,p]);return e.jsxs(u.TableOfContentsContext.Provider,{value:L,children:[e.jsxs("div",{className:M.default(t.default["tedi-table-of-contents__bar"],{[t.default["tedi-table-of-contents__bar--static"]]:!O},q),children:[e.jsx(C.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:i}),e.jsx(T.CollapseButton,{open:l,onOpenChange:a,openText:s("open"),closeText:s("close"),underline:!1,"aria-haspopup":"dialog"})]}),e.jsx(c.Modal,{open:l,onToggle:a,children:e.jsxs(c.Modal.Content,{position:"bottom",fullscreen:"edge","aria-label":i,className:t.default["tedi-table-of-contents__sheet"],children:[e.jsx(c.Modal.Header,{closeButton:!1,children:e.jsxs("div",{className:t.default["tedi-table-of-contents__sheet-header"],children:[e.jsx(C.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:i}),e.jsx(T.CollapseButton,{open:l,onOpenChange:a,openText:s("open"),closeText:s("close"),underline:!1})]})}),e.jsx(c.Modal.Body,{children:e.jsx("div",{ref:h,className:t.default["tedi-table-of-contents"],children:e.jsx(y.TableOfContentsList,{nodes:r,heading:null})})})]})})]})};g.displayName="TableOfContentsCollapsible";exports.TableOfContentsCollapsible=g;

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

@@ -1,5 +1,5 @@
 import { TableOfContentsProps } from '../../table-of-contents';
-export interface TableOfContentsCollapsibleProps extends Pick<TableOfContentsProps, 'children' | 'heading' | 'activeId' | 'showIcons' | 'numbered' | 'className'> {
+export interface TableOfContentsCollapsibleProps extends Pick<TableOfContentsProps, 'children' | 'heading' | 'ariaLabel' | 'activeId' | 'numbered' | 'className'> {
     /**
      * Pin the bar to the bottom of the viewport. Set `false` to render it inline.
      * @default true

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

@@ -1,43 +1,43 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import y from "../../../../../../../external/classnames/index.es.js";
-import { useState as k, useRef as B, useEffect as E, useMemo as f } from "react";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import k from "../../../../../../../external/classnames/index.es.js";
+import { useState as B, useRef as E, useEffect as H, useMemo as f } from "react";
 import { Text as T } from "../../../../base/typography/text/text.es.js";
 import { CollapseButton as _ } from "../../../../buttons/collapse-button/collapse-button.es.js";
-import { childrenToNodes as H, buildActiveTrail as j, TableOfContentsContext as I } from "../../table-of-contents.es.js";
+import { childrenToNodes as j, buildActiveTrail as M, TableOfContentsContext as R } from "../../table-of-contents.es.js";
 import t from "../../table-of-contents.module.scss.es.js";
-import { TableOfContentsList as M } from "../table-of-contents-list/table-of-contents-list.es.js";
-import { useLabels as R } from "../../../../../providers/label-provider/use-labels.es.js";
-import { Modal as i } from "../../../../overlays/modal/modal.es.js";
-const w = (C) => {
-  const { children: m, heading: b, activeId: s, showIcons: p = !1, numbered: u = !1, sticky: N = !0, className: x } = C, { getLabel: o } = R(), [n, l] = k(!1), h = B(null);
-  E(() => {
-    const d = h.current;
+import { TableOfContentsList as A } from "../table-of-contents-list/table-of-contents-list.es.js";
+import { useLabels as I } from "../../../../../providers/label-provider/use-labels.es.js";
+import { Modal as r } from "../../../../overlays/modal/modal.es.js";
+const P = (C) => {
+  const { children: m, heading: b, ariaLabel: N, activeId: l, numbered: p = !1, sticky: x = !0, className: L } = C, { getLabel: o } = I(), [n, s] = B(!1), u = E(null);
+  H(() => {
+    const d = u.current;
     if (!n || !d) return;
-    const g = (L) => {
-      L.target.closest("a, button") && l(!1);
+    const g = (y) => {
+      y.target.closest("a, button") && s(!1);
     };
     return d.addEventListener("click", g), () => d.removeEventListener("click", g);
   }, [n]);
-  const r = f(() => H(m), [m]), v = f(() => j(r, s), [r, s]), O = f(
-    () => ({ activeId: s, showIcons: p, numbered: u, activeTrail: v }),
-    [s, p, u, v]
-  ), c = (b === void 0 ? o("table-of-contents.title") : b) ?? o("table-of-contents.title");
-  return /* @__PURE__ */ a(I.Provider, { value: O, children: [
-    /* @__PURE__ */ a(
+  const a = (b === void 0 ? o("table-of-contents.title") : b) ?? o("table-of-contents.title"), h = N || a, c = f(() => j(m), [m]), v = f(() => M(c, l), [c, l]), O = f(
+    () => ({ activeId: l, numbered: p, ariaLabel: h, activeTrail: v }),
+    [l, p, h, v]
+  );
+  return /* @__PURE__ */ i(R.Provider, { value: O, children: [
+    /* @__PURE__ */ i(
       "div",
       {
-        className: y(
+        className: k(
           t["tedi-table-of-contents__bar"],
-          { [t["tedi-table-of-contents__bar--static"]]: !N },
-          x
+          { [t["tedi-table-of-contents__bar--static"]]: !x },
+          L
         ),
         children: [
-          /* @__PURE__ */ e(T, { modifiers: "bold", className: t["tedi-table-of-contents__bar-title"], children: c }),
+          /* @__PURE__ */ e(T, { modifiers: "bold", className: t["tedi-table-of-contents__bar-title"], children: a }),
           /* @__PURE__ */ e(
             _,
             {
               open: n,
-              onOpenChange: l,
+              onOpenChange: s,
               openText: o("open"),
               closeText: o("close"),
               underline: !1,
@@ -47,34 +47,34 @@ const w = (C) => {
         ]
       }
     ),
-    /* @__PURE__ */ e(i, { open: n, onToggle: l, children: /* @__PURE__ */ a(
-      i.Content,
+    /* @__PURE__ */ e(r, { open: n, onToggle: s, children: /* @__PURE__ */ i(
+      r.Content,
       {
         position: "bottom",
         fullscreen: "edge",
-        "aria-label": c,
+        "aria-label": a,
         className: t["tedi-table-of-contents__sheet"],
         children: [
-          /* @__PURE__ */ e(i.Header, { closeButton: !1, children: /* @__PURE__ */ a("div", { className: t["tedi-table-of-contents__sheet-header"], children: [
-            /* @__PURE__ */ e(T, { modifiers: "bold", className: t["tedi-table-of-contents__bar-title"], children: c }),
+          /* @__PURE__ */ e(r.Header, { closeButton: !1, children: /* @__PURE__ */ i("div", { className: t["tedi-table-of-contents__sheet-header"], children: [
+            /* @__PURE__ */ e(T, { modifiers: "bold", className: t["tedi-table-of-contents__bar-title"], children: a }),
             /* @__PURE__ */ e(
               _,
               {
                 open: n,
-                onOpenChange: l,
+                onOpenChange: s,
                 openText: o("open"),
                 closeText: o("close"),
                 underline: !1
               }
             )
           ] }) }),
-          /* @__PURE__ */ e(i.Body, { children: /* @__PURE__ */ e("div", { ref: h, className: t["tedi-table-of-contents"], children: /* @__PURE__ */ e(M, { nodes: r, heading: null }) }) })
+          /* @__PURE__ */ e(r.Body, { children: /* @__PURE__ */ e("div", { ref: u, className: t["tedi-table-of-contents"], children: /* @__PURE__ */ e(A, { nodes: c, heading: null }) }) })
         ]
       }
     ) })
   ] });
 };
-w.displayName = "TableOfContentsCollapsible";
+P.displayName = "TableOfContentsCollapsible";
 export {
-  w as TableOfContentsCollapsible
+  P as TableOfContentsCollapsible
 };

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

@@ -11,20 +11,10 @@ export interface TableOfContentsItemProps {
      * `TableOfContents.Item` children, which become this item's sub-items.
      */
     children?: React.ReactNode;
-    /**
-     * Validation state for multistep-form usage (only rendered with `showIcons`
-     * on the parent): `true` = valid, `false` = invalid, `undefined` = not yet
-     * validated.
-     */
-    isValid?: boolean;
     /**
      * Render a separator below the item.
      */
     separator?: boolean;
-    /**
-     * Hide the validation glyph for this item even when `showIcons` is on.
-     */
-    hideIcon?: boolean;
 }
 export declare const TableOfContentsItem: {
     (_props: TableOfContentsItemProps): JSX.Element | null;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../../../../../../external/classnames/index.cjs.js"),a=require("react"),f=require("../../../../base/typography/heading/heading.cjs.js"),m=require("../../table-of-contents.cjs.js"),s=require("../../table-of-contents.module.scss.cjs.js"),C=require("../table-of-contents-row/table-of-contents-row.cjs.js"),O=require("../../../../../providers/label-provider/use-labels.cjs.js"),i=({nodes:r,heading:t})=>{const{numbered:c}=a.useContext(m.TableOfContentsContext),{getLabel:d}=O.useLabels(),n=a.useId(),u=c?"ol":"ul";return e.jsxs(e.Fragment,{children:[t&&e.jsx(f.Heading,{element:"h3",modifiers:"h4",id:n,className:s.default["tedi-table-of-contents__heading"],children:t}),e.jsx("nav",{"aria-labelledby":t?n:void 0,"aria-label":t?void 0:d("table-of-contents.title"),children:e.jsx(u,{className:b.default(s.default["tedi-table-of-contents__list"],{[s.default["tedi-table-of-contents__list--headless"]]:!t}),children:r.map((l,o)=>e.jsx(C.TableOfContentsRow,{node:l,depth:1,index:o},l.id??o))})})]})};i.displayName="TableOfContentsList";exports.TableOfContentsList=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../../../../../../external/classnames/index.cjs.js"),i=require("react"),C=require("../../../../base/typography/heading/heading.cjs.js"),h=require("../../table-of-contents.cjs.js"),s=require("../../table-of-contents.module.scss.cjs.js"),L=require("../table-of-contents-row/table-of-contents-row.cjs.js"),O=require("../../../../../providers/label-provider/use-labels.cjs.js"),r=({nodes:d,heading:t})=>{const{numbered:c,headingLevel:u="h3",ariaLabel:n}=i.useContext(h.TableOfContentsContext),{getLabel:b}=O.useLabels(),l=i.useId(),f=c?"ol":"ul";return e.jsxs(e.Fragment,{children:[t&&e.jsx(C.Heading,{element:u,modifiers:"h4",id:l,className:s.default["tedi-table-of-contents__heading"],children:t}),e.jsx("nav",{"aria-labelledby":!n&&t?l:void 0,"aria-label":n||(t?void 0:b("table-of-contents.title")),children:e.jsx(f,{className:m.default(s.default["tedi-table-of-contents__list"],{[s.default["tedi-table-of-contents__list--headless"]]:!t}),children:d.map((a,o)=>e.jsx(L.TableOfContentsRow,{node:a,depth:1,index:o},a.id??o))})})]})};r.displayName="TableOfContentsList";exports.TableOfContentsList=r;

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

@@ -1,34 +1,43 @@
-import { jsxs as f, Fragment as c, jsx as e } from "react/jsx-runtime";
-import d from "../../../../../../../external/classnames/index.es.js";
-import { useContext as b, useId as p } from "react";
-import { Heading as h } from "../../../../base/typography/heading/heading.es.js";
-import { TableOfContentsContext as u } from "../../table-of-contents.es.js";
+import { jsxs as c, Fragment as b, jsx as e } from "react/jsx-runtime";
+import p from "../../../../../../../external/classnames/index.es.js";
+import { useContext as h, useId as L } from "react";
+import { Heading as u } from "../../../../base/typography/heading/heading.es.js";
+import { TableOfContentsContext as C } from "../../table-of-contents.es.js";
 import o from "../../table-of-contents.module.scss.es.js";
-import { TableOfContentsRow as C } from "../table-of-contents-row/table-of-contents-row.es.js";
-import { useLabels as _ } from "../../../../../providers/label-provider/use-labels.es.js";
-const L = ({ nodes: i, heading: t }) => {
-  const { numbered: r } = b(u), { getLabel: a } = _(), s = p(), m = r ? "ol" : "ul";
-  return /* @__PURE__ */ f(c, { children: [
-    t && /* @__PURE__ */ e(h, { element: "h3", modifiers: "h4", id: s, className: o["tedi-table-of-contents__heading"], children: t }),
+import { TableOfContentsRow as _ } from "../table-of-contents-row/table-of-contents-row.es.js";
+import { useLabels as v } from "../../../../../providers/label-provider/use-labels.es.js";
+const x = ({ nodes: n, heading: t }) => {
+  const { numbered: r, headingLevel: m = "h3", ariaLabel: s } = h(C), { getLabel: d } = v(), l = L(), f = r ? "ol" : "ul";
+  return /* @__PURE__ */ c(b, { children: [
+    t && /* @__PURE__ */ e(
+      u,
+      {
+        element: m,
+        modifiers: "h4",
+        id: l,
+        className: o["tedi-table-of-contents__heading"],
+        children: t
+      }
+    ),
     /* @__PURE__ */ e(
       "nav",
       {
-        "aria-labelledby": t ? s : void 0,
-        "aria-label": t ? void 0 : a("table-of-contents.title"),
+        "aria-labelledby": !s && t ? l : void 0,
+        "aria-label": s || (t ? void 0 : d("table-of-contents.title")),
         children: /* @__PURE__ */ e(
-          m,
+          f,
           {
-            className: d(o["tedi-table-of-contents__list"], {
+            className: p(o["tedi-table-of-contents__list"], {
               [o["tedi-table-of-contents__list--headless"]]: !t
             }),
-            children: i.map((l, n) => /* @__PURE__ */ e(C, { node: l, depth: 1, index: n }, l.id ?? n))
+            children: n.map((a, i) => /* @__PURE__ */ e(_, { node: a, depth: 1, index: i }, a.id ?? i))
           }
         )
       }
     )
   ] });
 };
-L.displayName = "TableOfContentsList";
+x.displayName = "TableOfContentsList";
 export {
-  L as TableOfContentsList
+  x as TableOfContentsList
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../../../../../../external/classnames/index.cjs.js"),R=require("react"),$=require("../../../../base/icon/icon.cjs.js"),y=require("../../../../misc/separator/separator.cjs.js"),S=require("../../table-of-contents.cjs.js"),t=require("../../table-of-contents.module.scss.cjs.js"),I=require("../../../../../providers/label-provider/use-labels.cjs.js"),r=({node:p,depth:i,index:d,numberPrefix:o})=>{const{activeId:_,showIcons:h,numbered:l,activeTrail:x}=R.useContext(S.TableOfContentsContext),{getLabel:j}=I.useLabels(),{id:s,content:v,children:a,isValid:n,separator:C,hideIcon:q}=p,O=!!(a!=null&&a.length),u=!!s&&s===_,g=O&&!!s&&x.has(s),w=Math.min(i,2),c=o?`${o}.${d+1}`:`${d+1}`,N=o?c:`${c}.`,T=l?"ol":"ul";return e.jsxs("li",{"aria-current":u?"true":void 0,className:m.default(t.default["tedi-table-of-contents__item"],{[t.default["tedi-table-of-contents__item--selected"]]:u}),children:[e.jsxs("span",{className:m.default(t.default["tedi-table-of-contents__row"],t.default[`tedi-table-of-contents__row--level-${w}`]),children:[h&&!q&&e.jsx($.Icon,{className:t.default["tedi-table-of-contents__icon"],name:n===!1?"warning":n===!0?"check":"circle",color:n===!1?"danger":n===!0?"success":"tertiary",label:j(n===!1?"table-of-contents.step-invalid":n===!0?"table-of-contents.step-valid":"table-of-contents.step-incomplete"),size:18}),l&&e.jsx("span",{className:t.default["tedi-table-of-contents__number"],"aria-hidden":"true",children:N}),e.jsx("span",{className:t.default["tedi-table-of-contents__content"],children:v})]}),g&&e.jsx(T,{className:t.default["tedi-table-of-contents__group"],children:a.map((f,b)=>e.jsx(r,{node:f,depth:i+1,index:b,numberPrefix:l?c:void 0},f.id??b))}),C&&e.jsx(y.Separator,{})]})};r.displayName="TableOfContentsRow";exports.TableOfContentsRow=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../../../../../../external/classnames/index.cjs.js"),N=require("react"),T=require("../../../../misc/separator/separator.cjs.js"),w=require("../../table-of-contents.cjs.js"),t=require("../../table-of-contents.module.scss.cjs.js"),r=({node:m,depth:c,index:i,numberPrefix:a})=>{const{activeId:_,numbered:o,activeTrail:p}=N.useContext(w.TableOfContentsContext),{id:n,content:x,children:s,separator:j}=m,C=!!(s!=null&&s.length),d=!!n&&n===_,h=C&&!!n&&p.has(n),O=Math.min(c,2),l=a?`${a}.${i+1}`:`${i+1}`,v=a?l:`${l}.`,q=o?"ol":"ul";return e.jsxs("li",{"aria-current":d?"true":void 0,className:b.default(t.default["tedi-table-of-contents__item"],{[t.default["tedi-table-of-contents__item--selected"]]:d}),children:[e.jsxs("span",{className:b.default(t.default["tedi-table-of-contents__row"],t.default[`tedi-table-of-contents__row--level-${O}`]),children:[o&&e.jsx("span",{className:t.default["tedi-table-of-contents__number"],"aria-hidden":"true",children:v}),e.jsx("span",{className:t.default["tedi-table-of-contents__content"],children:x})]}),h&&e.jsx(q,{className:t.default["tedi-table-of-contents__group"],children:s.map((u,f)=>e.jsx(r,{node:u,depth:c+1,index:f,numberPrefix:o?l:void 0},u.id??f))}),j&&e.jsx(T.Separator,{})]})};r.displayName="TableOfContentsRow";exports.TableOfContentsRow=r;

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

@@ -1,54 +1,40 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import b from "../../../../../../../external/classnames/index.es.js";
-import { useContext as j } from "react";
-import { Icon as L } from "../../../../base/icon/icon.es.js";
-import { Separator as R } from "../../../../misc/separator/separator.es.js";
-import { TableOfContentsContext as S } from "../../table-of-contents.es.js";
-import e from "../../table-of-contents.module.scss.es.js";
-import { useLabels as k } from "../../../../../providers/label-provider/use-labels.es.js";
-const _ = ({ node: u, depth: r, index: i, numberPrefix: a }) => {
-  const { activeId: h, showIcons: v, numbered: l, activeTrail: N } = j(S), { getLabel: w } = k(), { id: n, content: C, children: s, isValid: t, separator: g, hideIcon: $ } = u, O = !!(s != null && s.length), m = !!n && n === h, T = O && !!n && N.has(n), x = Math.min(r, 2), c = a ? `${a}.${i + 1}` : `${i + 1}`, y = a ? c : `${c}.`, I = l ? "ol" : "ul";
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import f from "../../../../../../../external/classnames/index.es.js";
+import { useContext as x } from "react";
+import { Separator as g } from "../../../../misc/separator/separator.es.js";
+import { TableOfContentsContext as j } from "../../table-of-contents.es.js";
+import t from "../../table-of-contents.module.scss.es.js";
+const _ = ({ node: b, depth: i, index: l, numberPrefix: s }) => {
+  const { activeId: u, numbered: a, activeTrail: h } = x(j), { id: o, content: N, children: n, separator: v } = b, C = !!(n != null && n.length), c = !!o && o === u, $ = C && !!o && h.has(o), w = Math.min(i, 2), r = s ? `${s}.${l + 1}` : `${l + 1}`, O = s ? r : `${r}.`, T = a ? "ol" : "ul";
   return /* @__PURE__ */ p(
     "li",
     {
-      "aria-current": m ? "true" : void 0,
-      className: b(e["tedi-table-of-contents__item"], {
-        [e["tedi-table-of-contents__item--selected"]]: m
+      "aria-current": c ? "true" : void 0,
+      className: f(t["tedi-table-of-contents__item"], {
+        [t["tedi-table-of-contents__item--selected"]]: c
       }),
       children: [
         /* @__PURE__ */ p(
           "span",
           {
-            className: b(e["tedi-table-of-contents__row"], e[`tedi-table-of-contents__row--level-${x}`]),
+            className: f(t["tedi-table-of-contents__row"], t[`tedi-table-of-contents__row--level-${w}`]),
             children: [
-              v && !$ && /* @__PURE__ */ o(
-                L,
-                {
-                  className: e["tedi-table-of-contents__icon"],
-                  name: t === !1 ? "warning" : t === !0 ? "check" : "circle",
-                  color: t === !1 ? "danger" : t === !0 ? "success" : "tertiary",
-                  label: w(
-                    t === !1 ? "table-of-contents.step-invalid" : t === !0 ? "table-of-contents.step-valid" : "table-of-contents.step-incomplete"
-                  ),
-                  size: 18
-                }
-              ),
-              l && /* @__PURE__ */ o("span", { className: e["tedi-table-of-contents__number"], "aria-hidden": "true", children: y }),
-              /* @__PURE__ */ o("span", { className: e["tedi-table-of-contents__content"], children: C })
+              a && /* @__PURE__ */ e("span", { className: t["tedi-table-of-contents__number"], "aria-hidden": "true", children: O }),
+              /* @__PURE__ */ e("span", { className: t["tedi-table-of-contents__content"], children: N })
             ]
           }
         ),
-        T && /* @__PURE__ */ o(I, { className: e["tedi-table-of-contents__group"], children: s.map((d, f) => /* @__PURE__ */ o(
+        $ && /* @__PURE__ */ e(T, { className: t["tedi-table-of-contents__group"], children: n.map((m, d) => /* @__PURE__ */ e(
           _,
           {
-            node: d,
-            depth: r + 1,
-            index: f,
-            numberPrefix: l ? c : void 0
+            node: m,
+            depth: i + 1,
+            index: d,
+            numberPrefix: a ? r : void 0
           },
-          d.id ?? f
+          m.id ?? d
         )) }),
-        g && /* @__PURE__ */ o(R, {})
+        v && /* @__PURE__ */ e(g, {})
       ]
     }
   );

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

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

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

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 import { TableOfContentsItemProps } from './components/table-of-contents-item/table-of-contents-item';
+/** Semantic level of the `TableOfContents` heading element. */
+export type TableOfContentsHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export interface TableOfContentsProps {
     /**
      * `TableOfContents.Item` elements. An item's non-`Item` children are its
@@ -12,6 +14,19 @@ export interface TableOfContentsProps {
      * the navigation keeps an accessible name via `aria-label`).
      */
     heading?: string | null;
+    /**
+     * Configurable semantic heading level (`h1`–`h6`); the visual style stays H4 regardless. Set it
+     * to match the surrounding page's heading outline and avoid skipped heading levels (WCAG 1.3.1).
+     * Ignored when the list is headless.
+     * @default h3
+     */
+    headingLevel?: TableOfContentsHeadingLevel;
+    /**
+     * Override the navigation landmark's accessible name. When empty, the `<nav>` falls back to the
+     * heading (via `aria-labelledby`), or the localised title when headless. Use it to disambiguate
+     * multiple tables of contents on the same page.
+     */
+    ariaLabel?: string;
     /**
      * Visual variant:
      * - `default` — rendered inside a bordered `Card`.
@@ -32,13 +47,6 @@ export interface TableOfContentsProps {
      * children.
      */
     activeId?: string;
-    /**
-     * Show a validation glyph before each item (multistep-form usage). Each state uses a distinct
-     * icon shape (not colour alone) with a localised text alternative: a check for `isValid === true`,
-     * an empty circle for `undefined` (not completed), and a warning for `isValid === false`.
-     * @default false
-     */
-    showIcons?: boolean;
     /**
      * Render the list as an ordered list with auto-generated hierarchical numbers
      * (`1.`, `2.`, `2.1`, …) shown before each item.
@@ -60,14 +68,13 @@ export interface TableOfContentsNode {
     id?: string;
     content: ReactNode;
     children?: TableOfContentsNode[];
-    isValid?: boolean;
     separator?: boolean;
-    hideIcon?: boolean;
 }
 interface TableOfContentsContextValue {
     activeId?: string;
-    showIcons?: boolean;
     numbered?: boolean;
+    headingLevel?: TableOfContentsHeadingLevel;
+    ariaLabel?: string;
     activeTrail: Set<string>;
 }
 export declare const TableOfContentsContext: import('react').Context<TableOfContentsContextValue>;