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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.0.1-rc.2",
+  "version": "19.1.0-rc.1",
   "description": "TEDI Design System React component library — accessible, reusable UI components. Docs & live examples: https://storybook.tedi.ee/react/rc/",
   "type": "module",
   "sideEffects": false,

package/src/community/components/vertical-stepper/step-item/step-item.d.ts

@@ -1,4 +1,7 @@
 import { default as React } from 'react';
+/**
+ * @deprecated Use `VerticalStepper.Item` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface StepItemProps {
     /**
      * SubItems
@@ -26,4 +29,7 @@ export interface StepItemProps {
     /** Called when collapse is toggled */
     onToggle?: (isOpen: boolean) => void;
 }
+/**
+ * @deprecated Use `VerticalStepper.Item` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const StepItem: ({ children, className, isSelected, hasIcon, title, href, onClick, state, info, isOpen, onToggle, }: StepItemProps) => JSX.Element;

package/src/community/components/vertical-stepper/sub-item/sub-item.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Use `VerticalStepper.SubItem` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface SubItemProps {
     /**
      * Additional info components like StatusBadge, Button, Link or Text.
@@ -15,4 +18,7 @@ export interface SubItemProps {
     onClick?: () => void;
     as?: 'a' | 'button';
 }
+/**
+ * @deprecated Use `VerticalStepper.SubItem` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const SubItem: ({ children, className, state, isSelected, hasIcon, title, href, as, onClick, }: SubItemProps) => JSX.Element;

package/src/community/components/vertical-stepper/vertical-stepper.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Use `VerticalStepper` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface VerticalStepperProps {
     /**
      * SubItem or Separator
@@ -10,5 +13,8 @@ export interface VerticalStepperProps {
     /** Compact version of the stepper */
     isCompact?: boolean;
 }
+/**
+ * @deprecated Use `VerticalStepper` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const VerticalStepper: (props: VerticalStepperProps) => JSX.Element;
 export default VerticalStepper;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=p=>null;e.displayName="CardStepperStep";exports.CardStepperStep=e;

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

@@ -0,0 +1,86 @@
+import { default as React } from 'react';
+import { VerticalStepperItemState } from '../vertical-stepper/vertical-stepper-item';
+import { VerticalStepperSubItemState } from '../vertical-stepper/vertical-stepper-sub-item';
+export interface CardStepperSubStepProps {
+    /**
+     * Sub-step label.
+     */
+    title: React.ReactNode;
+    /**
+     * Visual / semantic state shown in the step-list modal.
+     * @default default
+     */
+    state?: VerticalStepperSubItemState;
+    /**
+     * Marks the sub-step as the active one.
+     */
+    current?: boolean;
+    /**
+     * Stable key for the sub-step. Falls back to the array index.
+     */
+    id?: string;
+    /**
+     * Renders the sub-step as disabled (non-interactive) in the modal.
+     */
+    disabled?: boolean;
+    /**
+     * Click handler — makes the sub-step navigable in the modal and closes the list when picked.
+     */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+    /**
+     * Navigates when set; renders the sub-step as a link in the modal.
+     */
+    href?: string;
+}
+export interface CardStepperStepProps {
+    /**
+     * Step title.
+     */
+    title: React.ReactNode;
+    /**
+     * Optional secondary line shown under the title (on the card for the active
+     * step, and always in the step-list modal).
+     */
+    description?: React.ReactNode;
+    /**
+     * Visual / semantic state used in the progress bar and the step-list modal.
+     * @default default
+     */
+    state?: VerticalStepperItemState;
+    /**
+     * Stable key for the step. Falls back to the array index.
+     */
+    id?: string;
+    /**
+     * Excludes the step from navigation — not reachable via the arrows or the step
+     * list, and rendered as disabled in the modal.
+     */
+    disabled?: boolean;
+    /**
+     * Custom content rendered at the bottom of the card when this step is active —
+     * e.g. an inline `Alert`, a "read more" link or an action button. Only shown for
+     * the active step. Matches the Figma "with bottom slot" variant.
+     */
+    bottomSlot?: React.ReactNode;
+    /**
+     * Sub-steps shown under this step in the step-list modal. When present the step
+     * becomes a collapsible parent — the title navigates and a chevron expands the
+     * sub-step list.
+     */
+    subSteps?: CardStepperSubStepProps[];
+    /**
+     * Whether the sub-step list starts expanded in the modal. Defaults to expanded
+     * for the active step. Only relevant with `subSteps`.
+     */
+    defaultExpanded?: boolean;
+}
+/**
+ * Declarative step config for `CardStepper`. It renders nothing on its own — the
+ * parent reads its props to build the active card, the progress bar and the
+ * step-list modal. Use it as `CardStepper.Step`.
+ */
+export declare const CardStepperStep: {
+    (_props: CardStepperStepProps): null;
+    displayName: string;
+};
+export default CardStepperStep;

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

@@ -0,0 +1,5 @@
+const p = (e) => null;
+p.displayName = "CardStepperStep";
+export {
+  p as CardStepperStep
+};

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

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

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;