@tedi-design-system/react 19.0.1-rc.2 → 19.1.0-rc.2

package/src/tedi/components/navigation/card-stepper/card-stepper.d.ts

@@ -0,0 +1,130 @@
+import { default as React } from 'react';
+import { CardStepperStepProps } from './card-stepper-step';
+/**
+ * Per-instance label overrides. When omitted, each label comes from the
+ * `LabelProvider` (`stepper.previous`, `stepper.next`, `stepper.open-steps`,
+ * `stepper.steps`, `stepper.status`).
+ */
+export interface CardStepperLabels {
+    /** Accessible label for the previous-step button. Defaults to the `stepper.previous` label. */
+    previous?: string;
+    /** Accessible label for the next-step button. Defaults to the `stepper.next` label. */
+    next?: string;
+    /** Accessible label for the button that opens the step list. Defaults to the `stepper.open-steps` label. */
+    openSteps?: string;
+    /** Heading of the step-list modal. Defaults to the `stepper.steps` label. */
+    modalHeading?: string;
+    /**
+     * Screen-reader phrasing for the `N / M` counter (the visible "N / M" is hidden
+     * from assistive tech, since "N slash M" reads poorly). Defaults to the
+     * `stepper.status` label.
+     */
+    status?: (current: number, total: number) => string;
+}
+export interface CardStepperProps {
+    /**
+     * `CardStepper.Step` elements (compound API) — the active step shows on the
+     * card, all steps in the modal. Alternative to the `steps` data prop.
+     */
+    children?: React.ReactNode;
+    /**
+     * Steps as data (alternative to `CardStepper.Step` children). Ignored when
+     * `children` contains `CardStepper.Step` elements.
+     */
+    steps?: CardStepperStepProps[];
+    /**
+     * Active step index (0-based), controlled. Pair with `onStepChange`.
+     */
+    activeStep?: number;
+    /**
+     * Initial active step index for uncontrolled usage.
+     * @default 0
+     */
+    defaultActiveStep?: number;
+    /**
+     * Fired with the new index when the user navigates (arrows) or picks a step
+     * in the modal.
+     */
+    onStepChange?: (index: number) => void;
+    /**
+     * Show the active step's number in a ring indicator on the left. Ignored when
+     * `showNavigation` is set — the back arrow occupies the left slot instead.
+     * @default true
+     */
+    showStepNumber?: boolean;
+    /**
+     * Show a status icon next to the active step's title — a success check when the
+     * step's `state` is `'completed'`, a danger icon when it's `'error'`. Nothing is
+     * shown for other states.
+     * @default false
+     */
+    showStatusIcon?: boolean;
+    /**
+     * Where the active step's `description` sits relative to its title:
+     * - `'bottom'` (default) — below the title.
+     * - `'top'` — above the title, as a small secondary line.
+     * @default bottom
+     */
+    descriptionPosition?: 'top' | 'bottom';
+    /**
+     * Where the `N / M` step counter sits:
+     * - `'inline'` (default) — in the trailing controls, next to the list / next button.
+     * - `'top'` — above the title (and removed from the trailing controls).
+     * @default inline
+     */
+    counterPosition?: 'inline' | 'top';
+    /**
+     * Show the segmented progress bar below the row.
+     * @default true
+     */
+    showProgress?: boolean;
+    /**
+     * Show previous / next arrow buttons on the edges. They move sequentially and
+     * skip `disabled` steps.
+     * @default false
+     */
+    showNavigation?: boolean;
+    /**
+     * Show the list button and the step-list modal. Turn off for a read-only
+     * progress tracker or an arrows-only flow.
+     * @default true
+     */
+    showStepList?: boolean;
+    /**
+     * Which steps can be jumped to from the step-list modal:
+     * - `true` — any step
+     * - `false` — none (the list is read-only)
+     * - `'completed'` — only completed steps
+     * - `'completed-or-next'` — completed steps and the one immediately after the active step
+     *
+     * A per-step `disabled` always wins. The prev/next arrows are sequential and are
+     * **not** gated by this.
+     * @default true
+     */
+    allowJump?: boolean | 'completed' | 'completed-or-next';
+    /**
+     * Heading element for the active step's title — set it to fit the surrounding
+     * page's heading hierarchy. The visual size is unchanged.
+     * @default h4
+     */
+    headingElement?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Accessible label overrides. Otherwise sourced from the `LabelProvider`.
+     */
+    labels?: CardStepperLabels;
+    /**
+     * Accessible name for the card region.
+     */
+    'aria-label'?: string;
+    /**
+     * Additional class name applied to the card root.
+     */
+    className?: string;
+}
+export declare const CardStepper: React.ForwardRefExoticComponent<CardStepperProps & React.RefAttributes<HTMLDivElement>> & {
+    Step: {
+        (_props: CardStepperStepProps): null;
+        displayName: string;
+    };
+};
+export default CardStepper;

package/src/tedi/components/navigation/card-stepper/card-stepper.es.js

@@ -0,0 +1,200 @@
+import { jsx as s, Fragment as le, jsxs as c } from "react/jsx-runtime";
+import _ from "../../../../../external/classnames/index.es.js";
+import D, { forwardRef as me, useState as F, useId as ue } from "react";
+import { Icon as he } from "../../base/icon/icon.es.js";
+import { Text as V } from "../../base/typography/text/text.es.js";
+import { Button as y } from "../../buttons/button/button.es.js";
+import { Sheet as _e } from "../../overlays/sheet/sheet.es.js";
+import { VerticalStepper as I } from "../vertical-stepper/vertical-stepper.es.js";
+import t from "./card-stepper.module.scss.es.js";
+import { CardStepperStep as z } from "./card-stepper-step.es.js";
+import { useLabels as fe } from "../../../providers/label-provider/use-labels.es.js";
+const J = me((q, G) => {
+  const {
+    children: K,
+    steps: Q,
+    activeStep: k,
+    defaultActiveStep: U = 0,
+    onStepChange: N,
+    showStepNumber: W = !0,
+    showStatusIcon: X = !1,
+    descriptionPosition: w = "bottom",
+    counterPosition: b = "inline",
+    showProgress: T = !0,
+    showNavigation: f = !1,
+    showStepList: L = !0,
+    allowJump: C = !0,
+    headingElement: Y = "h4",
+    labels: a,
+    "aria-label": Z,
+    className: $
+  } = q, { getLabel: m } = fe(), u = {
+    previous: (a == null ? void 0 : a.previous) ?? m("stepper.previous"),
+    next: (a == null ? void 0 : a.next) ?? m("stepper.next"),
+    openSteps: (a == null ? void 0 : a.openSteps) ?? m("stepper.open-steps"),
+    modalHeading: (a == null ? void 0 : a.modalHeading) ?? m("stepper.steps"),
+    status: (a == null ? void 0 : a.status) ?? ((e, r) => m("stepper.status", e, r))
+  }, x = D.Children.toArray(K).filter(
+    (e) => D.isValidElement(e) && e.type === z
+  ).map((e) => e.props), n = x.length > 0 ? x : Q ?? [], j = k !== void 0, [ee, te] = F(U), h = n.length, d = Math.min(Math.max(j ? k : ee, 0), Math.max(h - 1, 0)), [A, v] = F(!1), re = ue(), o = n[d], E = W && !f, se = f || E, S = (e) => {
+    var r;
+    e < 0 || e >= h || e === d || (r = n[e]) != null && r.disabled || (j || te(e), N == null || N(e));
+  }, ae = (e) => {
+    const r = n[e];
+    return !r || r.disabled ? !1 : C === !0 ? !0 : C === !1 ? !1 : C === "completed" ? r.state === "completed" : r.state === "completed" || e === d + 1;
+  }, H = (e, r) => {
+    for (let p = e; p >= 0 && p < h; p += r)
+      if (!n[p].disabled) return p;
+    return -1;
+  }, M = H(d - 1, -1), O = H(d + 1, 1);
+  if (!o) return /* @__PURE__ */ s(le, {});
+  const oe = T && !o.bottomSlot, P = /* @__PURE__ */ c("span", { className: t["tedi-card-stepper__counter"], children: [
+    /* @__PURE__ */ c("span", { "aria-hidden": "true", children: [
+      d + 1,
+      " / ",
+      h
+    ] }),
+    /* @__PURE__ */ s("span", { className: "visually-hidden", children: u.status(d + 1, h) })
+  ] }), g = o.description ? /* @__PURE__ */ s(V, { modifiers: "small", color: "tertiary", className: t["tedi-card-stepper__description"], children: o.description }) : null, R = w === "top" && g, ie = b === "top" || R, de = w === "bottom" && n.some((e) => e.description);
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      ref: G,
+      role: "group",
+      "aria-label": Z,
+      className: _(
+        t["tedi-card-stepper"],
+        {
+          [t["tedi-card-stepper--progress-flush"]]: oe,
+          [t["tedi-card-stepper--reserve-description"]]: de
+        },
+        $
+      ),
+      children: [
+        /* @__PURE__ */ c(
+          "div",
+          {
+            className: _(t["tedi-card-stepper__main"], {
+              [t["tedi-card-stepper__main--no-lead"]]: !se
+            }),
+            children: [
+              f && /* @__PURE__ */ s(
+                y,
+                {
+                  visualType: "neutral",
+                  icon: "arrow_back",
+                  className: _(t["tedi-card-stepper__lead"], t["tedi-card-stepper__nav-prev"]),
+                  disabled: M === -1,
+                  onClick: () => S(M),
+                  children: u.previous
+                }
+              ),
+              E && /* @__PURE__ */ s(
+                "span",
+                {
+                  className: _(t["tedi-card-stepper__indicator"], t["tedi-card-stepper__lead"]),
+                  "aria-hidden": "true",
+                  children: d + 1
+                }
+              ),
+              /* @__PURE__ */ c("div", { className: t["tedi-card-stepper__body"], children: [
+                ie && /* @__PURE__ */ c("div", { className: t["tedi-card-stepper__top"], children: [
+                  b === "top" && P,
+                  R && g
+                ] }),
+                /* @__PURE__ */ c(V, { element: Y, id: re, modifiers: "h4", className: t["tedi-card-stepper__title"], children: [
+                  o.title,
+                  X && (o.state === "completed" || o.state === "error") && /* @__PURE__ */ s(
+                    he,
+                    {
+                      name: o.state === "completed" ? "check" : "error",
+                      color: o.state === "completed" ? "success" : "danger",
+                      size: 18,
+                      display: "block",
+                      label: m(o.state === "completed" ? "stepper.completed" : "stepper.error"),
+                      className: t["tedi-card-stepper__status-icon"]
+                    }
+                  )
+                ] }),
+                w === "bottom" && g && /* @__PURE__ */ s("div", { className: t["tedi-card-stepper__description-bottom"], children: g })
+              ] }),
+              /* @__PURE__ */ c("div", { className: t["tedi-card-stepper__trail"], children: [
+                b === "inline" && P,
+                L && /* @__PURE__ */ s(
+                  y,
+                  {
+                    visualType: "neutral",
+                    icon: "list",
+                    "aria-haspopup": "dialog",
+                    "aria-expanded": A,
+                    onClick: () => v(!0),
+                    children: u.openSteps
+                  }
+                ),
+                f && /* @__PURE__ */ s(
+                  y,
+                  {
+                    visualType: "neutral",
+                    icon: "arrow_forward",
+                    className: t["tedi-card-stepper__nav-next"],
+                    disabled: O === -1,
+                    onClick: () => S(O),
+                    children: u.next
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        T && /* @__PURE__ */ s("ol", { className: t["tedi-card-stepper__progress"], "aria-hidden": "true", children: n.map((e, r) => /* @__PURE__ */ s(
+          "li",
+          {
+            className: _(t["tedi-card-stepper__segment"], {
+              [t["tedi-card-stepper__segment--done"]]: r <= d
+            })
+          },
+          e.id ?? r
+        )) }),
+        o.bottomSlot && /* @__PURE__ */ s("div", { className: t["tedi-card-stepper__bottom-slot"], children: o.bottomSlot }),
+        L && /* @__PURE__ */ s(_e, { open: A, onToggle: v, title: u.modalHeading, children: /* @__PURE__ */ s(I, { "aria-label": u.modalHeading, children: n.map((e, r) => {
+          const p = ae(r), l = e.subSteps, ne = !!(l != null && l.some((i) => i.current));
+          return /* @__PURE__ */ s(
+            I.Item,
+            {
+              title: e.title,
+              description: e.description,
+              state: e.disabled ? "disabled" : e.state,
+              current: r === d && !ne,
+              onClick: p ? () => {
+                S(r), v(!1);
+              } : void 0,
+              defaultOpen: l ? e.defaultExpanded ?? r === d : void 0,
+              children: l == null ? void 0 : l.map((i, ce) => /* @__PURE__ */ s(
+                I.SubItem,
+                {
+                  title: i.title,
+                  state: i.disabled ? "disabled" : i.state,
+                  current: i.current,
+                  href: i.href,
+                  onClick: i.onClick ? (pe) => {
+                    var B;
+                    (B = i.onClick) == null || B.call(i, pe), v(!1);
+                  } : void 0
+                },
+                i.id ?? ce
+              ))
+            },
+            e.id ?? r
+          );
+        }) }) })
+      ]
+    }
+  );
+});
+J.displayName = "CardStepper";
+const xe = Object.assign(J, {
+  Step: z
+});
+export {
+  xe as CardStepper
+};

package/src/tedi/components/navigation/card-stepper/card-stepper.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-card-stepper":"tedi-card-stepper-990b287a","tedi-card-stepper--progress-flush":"tedi-card-stepper--progress-flush-23f58416","tedi-card-stepper__main":"tedi-card-stepper__main-ab70da77","tedi-card-stepper__main--no-lead":"tedi-card-stepper__main--no-lead-f358c4e9","tedi-card-stepper__body":"tedi-card-stepper__body-0df6ee92","tedi-card-stepper__trail":"tedi-card-stepper__trail-010e8317","tedi-card-stepper__lead":"tedi-card-stepper__lead-da7d326b","tedi-card-stepper__nav-prev":"tedi-card-stepper__nav-prev-274e6ce5","tedi-card-stepper__nav-next":"tedi-card-stepper__nav-next-697bbe17","tedi-card-stepper__indicator":"tedi-card-stepper__indicator-11d120ee","tedi-card-stepper__title":"tedi-card-stepper__title-93be7e94","tedi-card-stepper__status-icon":"tedi-card-stepper__status-icon-97374a76","tedi-card-stepper__top":"tedi-card-stepper__top-e92ed5ba","tedi-card-stepper__description":"tedi-card-stepper__description-f836d668","tedi-card-stepper__description-bottom":"tedi-card-stepper__description-bottom-c12f5c13","tedi-card-stepper--reserve-description":"tedi-card-stepper--reserve-description-ba59f2f8","tedi-card-stepper__bottom-slot":"tedi-card-stepper__bottom-slot-289c98d6","tedi-card-stepper__counter":"tedi-card-stepper__counter-6790f2c1","tedi-card-stepper__progress":"tedi-card-stepper__progress-05cbf5f8","tedi-card-stepper__segment":"tedi-card-stepper__segment-8303dffb","tedi-card-stepper__segment--done":"tedi-card-stepper__segment--done-332dd1fd"};exports.default=e;

package/src/tedi/components/navigation/card-stepper/card-stepper.module.scss.es.js

@@ -0,0 +1,26 @@
+const e = {
+  "tedi-card-stepper": "tedi-card-stepper-990b287a",
+  "tedi-card-stepper--progress-flush": "tedi-card-stepper--progress-flush-23f58416",
+  "tedi-card-stepper__main": "tedi-card-stepper__main-ab70da77",
+  "tedi-card-stepper__main--no-lead": "tedi-card-stepper__main--no-lead-f358c4e9",
+  "tedi-card-stepper__body": "tedi-card-stepper__body-0df6ee92",
+  "tedi-card-stepper__trail": "tedi-card-stepper__trail-010e8317",
+  "tedi-card-stepper__lead": "tedi-card-stepper__lead-da7d326b",
+  "tedi-card-stepper__nav-prev": "tedi-card-stepper__nav-prev-274e6ce5",
+  "tedi-card-stepper__nav-next": "tedi-card-stepper__nav-next-697bbe17",
+  "tedi-card-stepper__indicator": "tedi-card-stepper__indicator-11d120ee",
+  "tedi-card-stepper__title": "tedi-card-stepper__title-93be7e94",
+  "tedi-card-stepper__status-icon": "tedi-card-stepper__status-icon-97374a76",
+  "tedi-card-stepper__top": "tedi-card-stepper__top-e92ed5ba",
+  "tedi-card-stepper__description": "tedi-card-stepper__description-f836d668",
+  "tedi-card-stepper__description-bottom": "tedi-card-stepper__description-bottom-c12f5c13",
+  "tedi-card-stepper--reserve-description": "tedi-card-stepper--reserve-description-ba59f2f8",
+  "tedi-card-stepper__bottom-slot": "tedi-card-stepper__bottom-slot-289c98d6",
+  "tedi-card-stepper__counter": "tedi-card-stepper__counter-6790f2c1",
+  "tedi-card-stepper__progress": "tedi-card-stepper__progress-05cbf5f8",
+  "tedi-card-stepper__segment": "tedi-card-stepper__segment-8303dffb",
+  "tedi-card-stepper__segment--done": "tedi-card-stepper__segment--done-332dd1fd"
+};
+export {
+  e as default
+};

package/src/tedi/components/navigation/card-stepper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './card-stepper';
+export * from './card-stepper-step';

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

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

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

package/src/tedi/components/navigation/vertical-stepper/index.d.ts

@@ -0,0 +1,3 @@
+export * from './vertical-stepper';
+export * from './vertical-stepper-item';
+export * from './vertical-stepper-sub-item';

package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({compact:!1}),r=()=>e.useContext(t);exports.VerticalStepperContext=t;exports.useVerticalStepperContext=r;

package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-context.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface VerticalStepperContextValue {
+    /**
+     * Compact density — smaller indicators and tighter rows. Provided by the
+     * parent `VerticalStepper` so items and sub-items render in the same size.
+     */
+    compact: boolean;
+}
+export declare const VerticalStepperContext: React.Context<VerticalStepperContextValue>;
+export declare const useVerticalStepperContext: () => VerticalStepperContextValue;

package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-context.es.js

@@ -0,0 +1,8 @@
+import t from "react";
+const e = t.createContext({
+  compact: !1
+}), c = () => t.useContext(e);
+export {
+  e as VerticalStepperContext,
+  c as useVerticalStepperContext
+};

package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),D=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),l=require("../../base/icon/icon.cjs.js"),O=require("../../base/typography/text/text.cjs.js"),P=require("../../buttons/collapse-button/collapse-button.cjs.js"),t=require("./vertical-stepper.module.scss.cjs.js"),A=require("./vertical-stepper-context.cjs.js"),G=require("../../../providers/label-provider/use-labels.cjs.js"),z=r.forwardRef((T,k)=>{const{getLabel:i}=G.useLabels(),{compact:a}=A.useVerticalStepperContext(),{title:n,description:m,state:s="default",current:_=!1,href:c,onClick:v,as:L,endSlot:h,children:x,open:f,defaultOpen:V,onToggle:d,className:$,index:w}=T,o=`tedi-vertical-stepper-sublist-${r.useId()}`,b=r.Children.count(x)>0,j=s==="disabled",N=!j&&(c!==void 0||v!==void 0),p=L??(c?"a":"button"),[B,R]=r.useState(V??!1),u=f??B,E=()=>{const C=!u;f===void 0&&R(C),d==null||d(C)},F=D.default(t.default["tedi-vertical-stepper__item"],t.default[`tedi-vertical-stepper__item--${s}`],{[t.default["tedi-vertical-stepper__item--current"]]:_,[t.default["tedi-vertical-stepper__item--has-children"]]:b},$),M=e.jsx("span",{className:t.default["tedi-vertical-stepper__indicator"],children:a?s==="completed"?e.jsx(l.Icon,{name:"check",size:16,color:"white",label:i("stepper.completed")}):s==="error"?e.jsx(l.Icon,{name:"priority_high",size:16,color:"white",label:i("stepper.error")}):null:e.jsx("span",{className:t.default["tedi-vertical-stepper__number"],children:w})}),g=e.jsxs(O.Text,{element:"span",className:t.default["tedi-vertical-stepper__label"],children:[e.jsx("span",{className:t.default["tedi-vertical-stepper__label-text"],children:n}),!a&&s==="completed"&&e.jsx(l.Icon,{name:"check",color:"success",size:16,display:"inline",label:i("stepper.completed"),className:t.default["tedi-vertical-stepper__label-icon"]}),!a&&s==="error"&&e.jsx(l.Icon,{name:"error",color:"danger",size:16,display:"inline",label:i("stepper.error"),className:t.default["tedi-vertical-stepper__label-icon"]}),j&&e.jsxs("span",{className:"visually-hidden",children:[" (",i("stepper.disabled"),")"]})]}),I=m&&e.jsx(O.Text,{element:"span",modifiers:"small",color:"tertiary",className:t.default["tedi-vertical-stepper__description"],children:m}),S=h&&e.jsx("div",{className:t.default["tedi-vertical-stepper__end-slot"],children:h}),y=_?"step":void 0,q=N?e.jsx(p,{href:p==="a"?c:void 0,type:p==="button"?"button":void 0,onClick:v,"aria-current":y,className:t.default["tedi-vertical-stepper__link"],children:g}):g;return e.jsxs("li",{ref:k,"aria-current":N?void 0:y,className:F,children:[M,e.jsx("div",{className:t.default["tedi-vertical-stepper__content"],children:b?e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:t.default["tedi-vertical-stepper__toggle"],children:[q,e.jsx(P.CollapseButton,{id:`${o}-toggle`,hideText:!0,size:"small",open:u,onOpenChange:E,"aria-controls":o,"aria-label":typeof n=="string"?n:void 0,className:t.default["tedi-vertical-stepper__toggle-button"]})]}),I,S,e.jsx("ul",{id:o,hidden:!u,className:t.default["tedi-vertical-stepper__sub-list"],children:x})]}):e.jsxs(e.Fragment,{children:[q,I,S]})})]})});z.displayName="VerticalStepperItem";exports.VerticalStepperItem=z;

package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-item.d.ts

@@ -0,0 +1,74 @@
+import { default as React } from 'react';
+export type VerticalStepperItemState = 'default' | 'completed' | 'error' | 'disabled';
+export interface VerticalStepperItemProps {
+    /**
+     * Step title.
+     */
+    title: React.ReactNode;
+    /**
+     * Optional secondary line rendered under the title.
+     */
+    description?: React.ReactNode;
+    /**
+     * Visual / semantic state of the step.
+     * - `completed` — green indicator + check icon
+     * - `error` — red indicator + error icon
+     * - `disabled` — muted, non-interactive
+     * @default default
+     */
+    state?: VerticalStepperItemState;
+    /**
+     * Marks the step as the active one — blue indicator, bold blue title and
+     * `aria-current="step"`. Independent from `state`.
+     * @default false
+     */
+    current?: boolean;
+    /**
+     * Navigates when set; renders the title as an anchor. Works for steps with
+     * sub-steps too — the title navigates and a separate toggle expands the list.
+     */
+    href?: string;
+    /**
+     * Click handler. Without `href` the title renders as a `<button>`. Works for
+     * steps with sub-steps too (alongside the expand toggle).
+     */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+    /**
+     * Element used for the interactive title. Defaults to `'a'` when `href` is set,
+     * otherwise `'button'`. Ignored for `disabled` steps.
+     */
+    as?: 'a' | 'button';
+    /**
+     * Content rendered at the end of the item, below the title / description — a
+     * `StatusBadge`, `Link`, `Button`, `Text`, etc. (Figma: "related assets".)
+     */
+    endSlot?: React.ReactNode;
+    /**
+     * `VerticalStepper.SubItem` elements. When present the step becomes an
+     * expandable section: the title toggles the (collapsible) sub-step list.
+     */
+    children?: React.ReactNode;
+    /**
+     * Controlled open state of the sub-step list. Use with `onToggle`.
+     */
+    open?: boolean;
+    /**
+     * Initial open state of the sub-step list (uncontrolled).
+     */
+    defaultOpen?: boolean;
+    /**
+     * Fired when the sub-step list is toggled.
+     */
+    onToggle?: (open: boolean) => void;
+    /**
+     * Additional class name applied to the `<li>`.
+     */
+    className?: string;
+    /**
+     * Step number, injected automatically by `VerticalStepper`. Do not set manually.
+     * @internal
+     */
+    index?: number;
+}
+export declare const VerticalStepperItem: React.ForwardRefExoticComponent<VerticalStepperItemProps & React.RefAttributes<HTMLLIElement>>;
+export default VerticalStepperItem;