@tedi-design-system/react 19.0.0-rc.1 → 19.0.0-rc.3

package/package.json

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

package/src/tedi/components/misc/timeline/components/timeline-description/timeline-description.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../../../../../../external/classnames/index.cjs.js"),l=require("../../timeline.module.scss.cjs.js"),i=({children:t,color:e="tertiary",className:n})=>r.jsx("div",{className:s.default(l.default["tedi-timeline-description"],{[`tedi-text--${e}`]:e!=="inherit"},n),children:t});i.displayName="TimelineDescription";exports.TimelineDescription=i;

package/src/tedi/components/misc/timeline/components/timeline-description/timeline-description.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { TextColor } from '../../../../base/typography/text/text';
+export interface TimelineDescriptionProps {
+    /**
+     * Description content, shown below the title in a muted style.
+     */
+    children?: ReactNode;
+    /**
+     * Text color, using the shared typography colors. Defaults to `tertiary`.
+     * Pass `'inherit'` to inherit the surrounding color instead.
+     * @default tertiary
+     */
+    color?: TextColor | 'inherit';
+    /**
+     * Additional class name.
+     */
+    className?: string;
+}
+export declare const TimelineDescription: {
+    ({ children, color, className, }: TimelineDescriptionProps): JSX.Element;
+    displayName: string;
+};
+export default TimelineDescription;

package/src/tedi/components/misc/timeline/components/timeline-description/timeline-description.es.js

@@ -0,0 +1,12 @@
+import { jsx as s } from "react/jsx-runtime";
+import m from "../../../../../../../external/classnames/index.es.js";
+import r from "../../timeline.module.scss.es.js";
+const o = ({
+  children: e,
+  color: i = "tertiary",
+  className: t
+}) => /* @__PURE__ */ s("div", { className: m(r["tedi-timeline-description"], { [`tedi-text--${i}`]: i !== "inherit" }, t), children: e });
+o.displayName = "TimelineDescription";
+export {
+  o as TimelineDescription
+};

package/src/tedi/components/misc/timeline/components/timeline-item/timeline-item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("../../../../../../../external/classnames/index.cjs.js"),f=require("react"),p=require("../../../../../helpers/hooks/use-breakpoint.cjs.js"),_=require("../../../separator/separator.cjs.js"),t=require("../../timeline.module.scss.cjs.js"),x=require("../timeline-description/timeline-description.cjs.js"),T=require("../timeline-title/timeline-title.cjs.js"),j=({children:y,timings:h=[],timingsBottom:l,state:n="future",isLast:v=!1})=>{const N=p.default(),s=p.isBreakpointBelow(N,"lg"),o=f.Children.toArray(y),r=(e,a)=>f.isValidElement(e)&&e.type===a,q=o.find(e=>r(e,T.TimelineTitle)),b=o.find(e=>r(e,x.TimelineDescription)),d=o.filter(e=>!r(e,T.TimelineTitle)&&!r(e,x.TimelineDescription)),g=n==="future"?"secondary":"accent",S=n==="past"?"accent":"secondary",c=l!=null&&typeof l!="boolean",m=c&&i.jsx("div",{className:t.default["tedi-timeline__timings-bottom"],children:l});return i.jsxs("div",{className:u.default(t.default["tedi-timeline-item"],{[t.default["tedi-timeline__item--has-bottom"]]:s&&c}),children:[i.jsxs("div",{className:t.default["tedi-timeline__timings"],children:[h.map((e,a)=>i.jsx("span",{className:t.default["tedi-timeline__time"],children:e},`${e}-${a}`)),!s&&m]}),i.jsxs("div",{className:u.default(t.default["tedi-timeline__marker"],{[t.default["tedi-timeline__marker--large"]]:n==="current"}),children:[i.jsx(_.Separator,{variant:"dot-only",color:g,dotSize:n==="current"?"large":"medium",dotStyle:n==="future"?"outlined":"filled"}),!v&&i.jsx(_.Separator,{axis:"vertical",color:S})]}),i.jsxs("div",{className:t.default["tedi-timeline__info"],children:[i.jsxs("div",{children:[q,b]}),d.length>0&&i.jsx("div",{className:t.default["tedi-timeline__content"],children:d})]}),s&&m]})};j.displayName="TimelineItem";exports.TimelineItem=j;

package/src/tedi/components/misc/timeline/components/timeline-item/timeline-item.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { TimelineItemState } from '../../timeline';
+export interface TimelineItemProps {
+    /**
+     * Item content. `Timeline.Title` and `Timeline.Description` are rendered in the
+     * info area; any other content is rendered below them.
+     */
+    children?: ReactNode;
+    /**
+     * Timing labels shown before the item (e.g. `['2024', '16. detsember']`). On desktop
+     * they stack in the left column (first line larger); on mobile they sit inline.
+     */
+    timings?: string[];
+    /**
+     * Content pinned to the bottom of the timings column on desktop and rendered after the
+     * item content on mobile — e.g. a "last modified" note.
+     */
+    timingsBottom?: ReactNode;
+    /**
+     * Current / past / future state. Injected by `Timeline` from its `activeIndex`.
+     * @internal
+     */
+    state?: TimelineItemState;
+    /**
+     * Whether this is the last item (hides the connecting line). Injected by `Timeline`.
+     * @internal
+     */
+    isLast?: boolean;
+}
+export declare const TimelineItem: {
+    ({ children, timings, timingsBottom, state, isLast, }: TimelineItemProps): JSX.Element;
+    displayName: string;
+};
+export default TimelineItem;

package/src/tedi/components/misc/timeline/components/timeline-item/timeline-item.es.js

@@ -0,0 +1,63 @@
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import f from "../../../../../../../external/classnames/index.es.js";
+import { Children as B, isValidElement as C } from "react";
+import S, { isBreakpointBelow as j } from "../../../../../helpers/hooks/use-breakpoint.es.js";
+import { Separator as _ } from "../../../separator/separator.es.js";
+import i from "../../timeline.module.scss.es.js";
+import { TimelineDescription as u } from "../timeline-description/timeline-description.es.js";
+import { TimelineTitle as h } from "../timeline-title/timeline-title.es.js";
+const A = ({
+  children: y,
+  timings: v = [],
+  timingsBottom: r,
+  state: t = "future",
+  isLast: N = !1
+}) => {
+  const T = S(), m = j(T, "lg"), s = B.toArray(y), l = (e, c) => C(e) && e.type === c, k = s.find((e) => l(e, h)), b = s.find((e) => l(e, u)), a = s.filter((e) => !l(e, h) && !l(e, u)), g = t === "future" ? "secondary" : "accent", x = t === "past" ? "accent" : "secondary", d = r != null && typeof r != "boolean", p = d && /* @__PURE__ */ n("div", { className: i["tedi-timeline__timings-bottom"], children: r });
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: f(i["tedi-timeline-item"], {
+        [i["tedi-timeline__item--has-bottom"]]: m && d
+      }),
+      children: [
+        /* @__PURE__ */ o("div", { className: i["tedi-timeline__timings"], children: [
+          v.map((e, c) => /* @__PURE__ */ n("span", { className: i["tedi-timeline__time"], children: e }, `${e}-${c}`)),
+          !m && p
+        ] }),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: f(i["tedi-timeline__marker"], {
+              [i["tedi-timeline__marker--large"]]: t === "current"
+            }),
+            children: [
+              /* @__PURE__ */ n(
+                _,
+                {
+                  variant: "dot-only",
+                  color: g,
+                  dotSize: t === "current" ? "large" : "medium",
+                  dotStyle: t === "future" ? "outlined" : "filled"
+                }
+              ),
+              !N && /* @__PURE__ */ n(_, { axis: "vertical", color: x })
+            ]
+          }
+        ),
+        /* @__PURE__ */ o("div", { className: i["tedi-timeline__info"], children: [
+          /* @__PURE__ */ o("div", { children: [
+            k,
+            b
+          ] }),
+          a.length > 0 && /* @__PURE__ */ n("div", { className: i["tedi-timeline__content"], children: a })
+        ] }),
+        m && p
+      ]
+    }
+  );
+};
+A.displayName = "TimelineItem";
+export {
+  A as TimelineItem
+};

package/src/tedi/components/misc/timeline/components/timeline-title/timeline-title.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),s=require("../../../../../../../external/classnames/index.cjs.js"),d=require("../../timeline.module.scss.cjs.js"),i=({children:t,color:e="secondary",className:l})=>n.jsx("div",{className:s.default(d.default["tedi-timeline-title"],{[`tedi-text--${e}`]:e!=="inherit"},l),children:t});i.displayName="TimelineTitle";exports.TimelineTitle=i;

package/src/tedi/components/misc/timeline/components/timeline-title/timeline-title.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { TextColor } from '../../../../base/typography/text/text';
+export interface TimelineTitleProps {
+    /**
+     * Title content. Wrap it in a heading element if you need heading semantics —
+     * nested typography inherits the title's size / weight.
+     */
+    children?: ReactNode;
+    /**
+     * Text color, using the shared typography colors. Defaults to `secondary`.
+     * Pass `'inherit'` to inherit the surrounding color instead.
+     * @default secondary
+     */
+    color?: TextColor | 'inherit';
+    /**
+     * Additional class name.
+     */
+    className?: string;
+}
+export declare const TimelineTitle: {
+    ({ children, color, className }: TimelineTitleProps): JSX.Element;
+    displayName: string;
+};
+export default TimelineTitle;

package/src/tedi/components/misc/timeline/components/timeline-title/timeline-title.es.js

@@ -0,0 +1,8 @@
+import { jsx as m } from "react/jsx-runtime";
+import s from "../../../../../../../external/classnames/index.es.js";
+import l from "../../timeline.module.scss.es.js";
+const r = ({ children: i, color: e = "secondary", className: t }) => /* @__PURE__ */ m("div", { className: s(l["tedi-timeline-title"], { [`tedi-text--${e}`]: e !== "inherit" }, t), children: i });
+r.displayName = "TimelineTitle";
+export {
+  r as TimelineTitle
+};

package/src/tedi/components/misc/timeline/index.d.ts

@@ -0,0 +1,4 @@
+export * from './timeline';
+export * from './components/timeline-item/timeline-item';
+export * from './components/timeline-title/timeline-title';
+export * from './components/timeline-description/timeline-description';

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react/jsx-runtime"),y=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),I=require("./components/timeline-description/timeline-description.cjs.js"),d=require("./components/timeline-item/timeline-item.cjs.js"),g=require("./components/timeline-title/timeline-title.cjs.js"),u=require("./timeline.module.scss.cjs.js"),c=e=>n.isValidElement(e)&&e.type===d.TimelineItem,j=(e,t)=>t===void 0?"future":e===t?"current":e<t?"past":"future",i=({children:e,activeIndex:t,variant:l="default",cardPadding:s,className:a})=>{const f=n.Children.toArray(e).filter(c).length;let m=-1;const T=n.Children.map(e,r=>{if(!c(r))return r;m+=1;const o=m;return n.cloneElement(r,{state:j(o,t),isLast:o===f-1})}),p=l==="card"&&s!==void 0?{"--tedi-timeline-card-padding":`${s}rem`}:void 0;return q.jsx("div",{className:y.default(u.default["tedi-timeline"],{[u.default["tedi-timeline--card"]]:l==="card"},a),style:p,children:T})};i.displayName="Timeline";i.Item=d.TimelineItem;i.Title=g.TimelineTitle;i.Description=I.TimelineDescription;exports.Timeline=i;

package/src/tedi/components/misc/timeline/timeline.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { TimelineItemProps } from './components/timeline-item/timeline-item';
+export type TimelineVariant = 'default' | 'card';
+export type TimelineItemState = 'current' | 'past' | 'future';
+export interface TimelineProps {
+    /**
+     * `Timeline.Item` elements.
+     */
+    children: ReactNode;
+    /**
+     * Index of the active (current) item. Items before it render as completed (past),
+     * items after it as upcoming (future). When omitted, all items are future.
+     */
+    activeIndex?: number;
+    /**
+     * Visual variant. `card` wraps the timeline in card borders and padding.
+     * @default default
+     */
+    variant?: TimelineVariant;
+    /**
+     * Vertical padding of each item in the `card` variant, in rem (same scale as
+     * `Card`). Both the gaps between items and the card's top/bottom edges resolve
+     * to twice this value. Horizontal item padding is fixed at the card default.
+     * @default 0.5
+     */
+    cardPadding?: number;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+}
+export declare const Timeline: {
+    ({ children, activeIndex, variant, cardPadding, className, }: TimelineProps): JSX.Element;
+    displayName: string;
+    Item: {
+        ({ children, timings, timingsBottom, state, isLast, }: TimelineItemProps): JSX.Element;
+        displayName: string;
+    };
+    Title: {
+        ({ children, color, className }: import('.').TimelineTitleProps): JSX.Element;
+        displayName: string;
+    };
+    Description: {
+        ({ children, color, className, }: import('.').TimelineDescriptionProps): JSX.Element;
+        displayName: string;
+    };
+};
+export default Timeline;

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

@@ -0,0 +1,38 @@
+import { jsx as y } from "react/jsx-runtime";
+import E from "../../../../../external/classnames/index.es.js";
+import { Children as l, cloneElement as N, isValidElement as v } from "react";
+import { TimelineDescription as C } from "./components/timeline-description/timeline-description.es.js";
+import { TimelineItem as a } from "./components/timeline-item/timeline-item.es.js";
+import { TimelineTitle as D } from "./components/timeline-title/timeline-title.es.js";
+import p from "./timeline.module.scss.es.js";
+const f = (e) => v(e) && e.type === a, I = (e, t) => t === void 0 ? "future" : e === t ? "current" : e < t ? "past" : "future", i = ({
+  children: e,
+  activeIndex: t,
+  variant: m = "default",
+  cardPadding: o,
+  className: u
+}) => {
+  const c = l.toArray(e).filter(f).length;
+  let n = -1;
+  const d = l.map(e, (r) => {
+    if (!f(r)) return r;
+    n += 1;
+    const s = n;
+    return N(r, { state: I(s, t), isLast: s === c - 1 });
+  }), T = m === "card" && o !== void 0 ? { "--tedi-timeline-card-padding": `${o}rem` } : void 0;
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      className: E(p["tedi-timeline"], { [p["tedi-timeline--card"]]: m === "card" }, u),
+      style: T,
+      children: d
+    }
+  );
+};
+i.displayName = "Timeline";
+i.Item = a;
+i.Title = D;
+i.Description = C;
+export {
+  i as Timeline
+};

package/src/tedi/components/misc/timeline/timeline.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-timeline":"tedi-timeline-9ae74ae2","tedi-timeline--card":"tedi-timeline--card-a2e3bd66","tedi-timeline-item":"tedi-timeline-item-e902dd23","tedi-timeline__timings":"tedi-timeline__timings-546bfe94","tedi-timeline__info":"tedi-timeline__info-32fd4662","tedi-timeline__timings-bottom":"tedi-timeline__timings-bottom-3f346e9e","tedi-timeline__marker":"tedi-timeline__marker-38b5128b","tedi-timeline__item--has-bottom":"tedi-timeline__item--has-bottom-02d25709","tedi-timeline__time":"tedi-timeline__time-402ebe78","tedi-timeline__marker--large":"tedi-timeline__marker--large-c0c1e1b6","tedi-timeline__content":"tedi-timeline__content-a273bf25","tedi-timeline-title":"tedi-timeline-title-9c5618a5","tedi-timeline-description":"tedi-timeline-description-108c70de"};exports.default=e;

package/src/tedi/components/misc/timeline/timeline.module.scss.es.js

@@ -0,0 +1,18 @@
+const e = {
+  "tedi-timeline": "tedi-timeline-9ae74ae2",
+  "tedi-timeline--card": "tedi-timeline--card-a2e3bd66",
+  "tedi-timeline-item": "tedi-timeline-item-e902dd23",
+  "tedi-timeline__timings": "tedi-timeline__timings-546bfe94",
+  "tedi-timeline__info": "tedi-timeline__info-32fd4662",
+  "tedi-timeline__timings-bottom": "tedi-timeline__timings-bottom-3f346e9e",
+  "tedi-timeline__marker": "tedi-timeline__marker-38b5128b",
+  "tedi-timeline__item--has-bottom": "tedi-timeline__item--has-bottom-02d25709",
+  "tedi-timeline__time": "tedi-timeline__time-402ebe78",
+  "tedi-timeline__marker--large": "tedi-timeline__marker--large-c0c1e1b6",
+  "tedi-timeline__content": "tedi-timeline__content-a273bf25",
+  "tedi-timeline-title": "tedi-timeline-title-9c5618a5",
+  "tedi-timeline-description": "tedi-timeline-description-108c70de"
+};
+export {
+  e as default
+};

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;