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

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),j=require("../../../../../external/classnames/index.cjs.js"),N=require("react"),u=require("../../base/icon/icon.cjs.js"),S=require("../../base/typography/text/text.cjs.js"),e=require("./vertical-stepper.module.scss.cjs.js"),q=require("../../../providers/label-provider/use-labels.cjs.js"),m=N.forwardRef((b,_)=>{const{getLabel:a}=q.useLabels(),{title:v,state:s="default",current:l=!1,href:r,onClick:c,as:f,endSlot:n,className:x}=b,d=!(s==="disabled"||s==="informative")&&(r!==void 0||c!==void 0),i=f??(r?"a":"button"),h=j.default(e.default["tedi-vertical-stepper__sub-item"],e.default[`tedi-vertical-stepper__sub-item--${s}`],{[e.default["tedi-vertical-stepper__sub-item--current"]]:l},x),o=t.jsxs(S.Text,{element:"span",className:e.default["tedi-vertical-stepper__label"],children:[t.jsx("span",{className:e.default["tedi-vertical-stepper__label-text"],children:v}),s==="completed"&&t.jsx(u.Icon,{name:"check",color:"success",size:16,display:"inline",label:a("stepper.completed"),className:e.default["tedi-vertical-stepper__label-icon"]}),s==="error"&&t.jsx(u.Icon,{name:"error",color:"danger",size:16,display:"inline",label:a("stepper.error"),className:e.default["tedi-vertical-stepper__label-icon"]}),s==="disabled"&&t.jsxs("span",{className:"visually-hidden",children:[" (",a("stepper.disabled"),")"]})]}),p=l?"step":void 0;return t.jsxs("li",{ref:_,"aria-current":d?void 0:p,className:h,children:[t.jsx("span",{className:e.default["tedi-vertical-stepper__sub-indicator"],"aria-hidden":"true",children:t.jsx("span",{className:e.default["tedi-vertical-stepper__sub-dot"]})}),t.jsxs("span",{className:e.default["tedi-vertical-stepper__content"],children:[d?t.jsx(i,{href:i==="a"?r:void 0,type:i==="button"?"button":void 0,onClick:c,"aria-current":p,className:e.default["tedi-vertical-stepper__link"],children:o}):o,n&&t.jsx("div",{className:e.default["tedi-vertical-stepper__end-slot"],children:n})]})]})});m.displayName="VerticalStepperSubItem";exports.VerticalStepperSubItem=m;

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

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+export type VerticalStepperSubItemState = 'default' | 'completed' | 'error' | 'disabled' | 'informative';
+export interface VerticalStepperSubItemProps {
+    /**
+     * Sub-step label.
+     */
+    title: React.ReactNode;
+    /**
+     * Visual / semantic state of the sub-step.
+     * - `completed` — green dot, trailing check icon
+     * - `error` — red dot, trailing error icon
+     * - `disabled` — muted, non-interactive
+     * - `informative` — read-only row (no link), e.g. "filled in by an official"
+     * @default default
+     */
+    state?: VerticalStepperSubItemState;
+    /**
+     * Marks the sub-step as the active one — blue ring dot, bold blue label and
+     * `aria-current="step"`. Independent from `state`.
+     * @default false
+     */
+    current?: boolean;
+    /**
+     * Navigates when set; renders the label as an anchor. Mutually usable with `onClick`.
+     */
+    href?: string;
+    /**
+     * Click handler. Without `href` the label renders as a `<button>`.
+     */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+    /**
+     * Element used for the interactive label. Defaults to `'a'` when `href` is set,
+     * otherwise `'button'`. Ignored for `disabled` / `informative` rows (rendered as text).
+     */
+    as?: 'a' | 'button';
+    /**
+     * Content rendered at the end of the sub-item, below the label — a `StatusBadge`,
+     * `Link`, `Button`, `Text`, etc. (Figma: "related assets".)
+     */
+    endSlot?: React.ReactNode;
+    /**
+     * Additional class name applied to the `<li>`.
+     */
+    className?: string;
+}
+export declare const VerticalStepperSubItem: React.ForwardRefExoticComponent<VerticalStepperSubItemProps & React.RefAttributes<HTMLLIElement>>;
+export default VerticalStepperSubItem;

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

@@ -0,0 +1,65 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import S from "../../../../../external/classnames/index.es.js";
+import { forwardRef as y } from "react";
+import { Icon as _ } from "../../base/icon/icon.es.js";
+import { Text as x } from "../../base/typography/text/text.es.js";
+import e from "./vertical-stepper.module.scss.es.js";
+import { useLabels as I } from "../../../providers/label-provider/use-labels.es.js";
+const k = y((b, u) => {
+  const { getLabel: a } = I(), { title: v, state: r = "default", current: c = !1, href: i, onClick: n, as: f, endSlot: p, className: N } = b, o = !(r === "disabled" || r === "informative") && (i !== void 0 || n !== void 0), l = f ?? (i ? "a" : "button"), h = S(
+    e["tedi-vertical-stepper__sub-item"],
+    e[`tedi-vertical-stepper__sub-item--${r}`],
+    { [e["tedi-vertical-stepper__sub-item--current"]]: c },
+    N
+  ), d = /* @__PURE__ */ s(x, { element: "span", className: e["tedi-vertical-stepper__label"], children: [
+    /* @__PURE__ */ t("span", { className: e["tedi-vertical-stepper__label-text"], children: v }),
+    r === "completed" && /* @__PURE__ */ t(
+      _,
+      {
+        name: "check",
+        color: "success",
+        size: 16,
+        display: "inline",
+        label: a("stepper.completed"),
+        className: e["tedi-vertical-stepper__label-icon"]
+      }
+    ),
+    r === "error" && /* @__PURE__ */ t(
+      _,
+      {
+        name: "error",
+        color: "danger",
+        size: 16,
+        display: "inline",
+        label: a("stepper.error"),
+        className: e["tedi-vertical-stepper__label-icon"]
+      }
+    ),
+    r === "disabled" && /* @__PURE__ */ s("span", { className: "visually-hidden", children: [
+      " (",
+      a("stepper.disabled"),
+      ")"
+    ] })
+  ] }), m = c ? "step" : void 0;
+  return /* @__PURE__ */ s("li", { ref: u, "aria-current": o ? void 0 : m, className: h, children: [
+    /* @__PURE__ */ t("span", { className: e["tedi-vertical-stepper__sub-indicator"], "aria-hidden": "true", children: /* @__PURE__ */ t("span", { className: e["tedi-vertical-stepper__sub-dot"] }) }),
+    /* @__PURE__ */ s("span", { className: e["tedi-vertical-stepper__content"], children: [
+      o ? /* @__PURE__ */ t(
+        l,
+        {
+          href: l === "a" ? i : void 0,
+          type: l === "button" ? "button" : void 0,
+          onClick: n,
+          "aria-current": m,
+          className: e["tedi-vertical-stepper__link"],
+          children: d
+        }
+      ) : d,
+      p && /* @__PURE__ */ t("div", { className: e["tedi-vertical-stepper__end-slot"], children: p })
+    ] })
+  ] });
+});
+k.displayName = "VerticalStepperSubItem";
+export {
+  k as VerticalStepperSubItem
+};

package/src/tedi/components/navigation/vertical-stepper/vertical-stepper.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"),t=require("react"),l=require("./vertical-stepper.module.scss.cjs.js"),b=require("./vertical-stepper-context.cjs.js"),c=require("./vertical-stepper-item.cjs.js"),v=require("./vertical-stepper-sub-item.cjs.js"),n=t.forwardRef((p,s)=>{const{children:o,compact:a=!1,"aria-label":u,className:m}=p;let i=0;const d=t.Children.map(o,e=>t.isValidElement(e)&&e.type===c.VerticalStepperItem?(i+=1,t.cloneElement(e,{index:i})):e);return r.jsx(b.VerticalStepperContext.Provider,{value:{compact:a},children:r.jsx("nav",{"aria-label":u,children:r.jsx("ol",{ref:s,className:S.default(l.default["tedi-vertical-stepper"],{[l.default["tedi-vertical-stepper--compact"]]:a},m),children:d})})})});n.displayName="VerticalStepper";const V=Object.assign(n,{Item:c.VerticalStepperItem,SubItem:v.VerticalStepperSubItem});exports.VerticalStepper=V;

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

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { VerticalStepperItemProps } from './vertical-stepper-item';
+export interface VerticalStepperProps {
+    /**
+     * `VerticalStepper.Item` elements (and optional `Separator`s between them).
+     * Items are auto-numbered in source order.
+     */
+    children: React.ReactNode;
+    /**
+     * Compact density — smaller indicators and tighter rows. Completed / error
+     * steps show their state icon inside the indicator instead of the number.
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * Accessible name for the `<nav>` landmark.
+     */
+    'aria-label'?: string;
+    /**
+     * Additional class name applied to the `<ol>`.
+     */
+    className?: string;
+}
+export declare const VerticalStepper: React.ForwardRefExoticComponent<VerticalStepperProps & React.RefAttributes<HTMLOListElement>> & {
+    Item: React.ForwardRefExoticComponent<VerticalStepperItemProps & React.RefAttributes<HTMLLIElement>>;
+    SubItem: React.ForwardRefExoticComponent<import('./vertical-stepper-sub-item').VerticalStepperSubItemProps & React.RefAttributes<HTMLLIElement>>;
+};
+export default VerticalStepper;

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

@@ -0,0 +1,32 @@
+import { jsx as r } from "react/jsx-runtime";
+import u from "../../../../../external/classnames/index.es.js";
+import t, { forwardRef as b } from "react";
+import l from "./vertical-stepper.module.scss.es.js";
+import { VerticalStepperContext as S } from "./vertical-stepper-context.es.js";
+import { VerticalStepperItem as p } from "./vertical-stepper-item.es.js";
+import { VerticalStepperSubItem as V } from "./vertical-stepper-sub-item.es.js";
+const m = b((o, c) => {
+  const { children: n, compact: a = !1, "aria-label": s, className: d } = o;
+  let i = 0;
+  const f = t.Children.map(n, (e) => t.isValidElement(e) && e.type === p ? (i += 1, t.cloneElement(e, { index: i })) : e);
+  return /* @__PURE__ */ r(S.Provider, { value: { compact: a }, children: /* @__PURE__ */ r("nav", { "aria-label": s, children: /* @__PURE__ */ r(
+    "ol",
+    {
+      ref: c,
+      className: u(
+        l["tedi-vertical-stepper"],
+        { [l["tedi-vertical-stepper--compact"]]: a },
+        d
+      ),
+      children: f
+    }
+  ) }) });
+});
+m.displayName = "VerticalStepper";
+const j = Object.assign(m, {
+  Item: p,
+  SubItem: V
+});
+export {
+  j as VerticalStepper
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-vertical-stepper":"tedi-vertical-stepper-cc48e08e","tedi-vertical-stepper__item":"tedi-vertical-stepper__item-5359847f","tedi-vertical-stepper__item--has-children":"tedi-vertical-stepper__item--has-children-83e7ee73","tedi-vertical-stepper__indicator":"tedi-vertical-stepper__indicator-041dc249","tedi-vertical-stepper__number":"tedi-vertical-stepper__number-a8243903","tedi-vertical-stepper__content":"tedi-vertical-stepper__content-0be415df","tedi-vertical-stepper__link":"tedi-vertical-stepper__link-fe115434","tedi-vertical-stepper__label-text":"tedi-vertical-stepper__label-text-173ed5d2","tedi-vertical-stepper__item--default":"tedi-vertical-stepper__item--default-a0855686","tedi-vertical-stepper__item--completed":"tedi-vertical-stepper__item--completed-6afeb234","tedi-vertical-stepper__item--error":"tedi-vertical-stepper__item--error-ffa453e0","tedi-vertical-stepper__toggle":"tedi-vertical-stepper__toggle-5f7111e6","tedi-vertical-stepper__toggle-button":"tedi-vertical-stepper__toggle-button-f9acf14c","tedi-vertical-stepper__label":"tedi-vertical-stepper__label-b58a742d","tedi-vertical-stepper__label-icon":"tedi-vertical-stepper__label-icon-4dc08a47","tedi-vertical-stepper__description":"tedi-vertical-stepper__description-13aceaa3","tedi-vertical-stepper__end-slot":"tedi-vertical-stepper__end-slot-9333f737","tedi-vertical-stepper__item--disabled":"tedi-vertical-stepper__item--disabled-bd12c124","tedi-vertical-stepper__item--current":"tedi-vertical-stepper__item--current-959ca498","tedi-vertical-stepper__sub-list":"tedi-vertical-stepper__sub-list-4d058866","tedi-vertical-stepper__sub-item":"tedi-vertical-stepper__sub-item-a036a2cd","tedi-vertical-stepper__sub-indicator":"tedi-vertical-stepper__sub-indicator-49af9ca3","tedi-vertical-stepper__sub-dot":"tedi-vertical-stepper__sub-dot-2bf34163","tedi-vertical-stepper__sub-item--completed":"tedi-vertical-stepper__sub-item--completed-91a65a8a","tedi-vertical-stepper__sub-item--error":"tedi-vertical-stepper__sub-item--error-488deabe","tedi-vertical-stepper__sub-item--informative":"tedi-vertical-stepper__sub-item--informative-6efb4c22","tedi-vertical-stepper__sub-item--disabled":"tedi-vertical-stepper__sub-item--disabled-fa41df61","tedi-vertical-stepper__sub-item--current":"tedi-vertical-stepper__sub-item--current-4b39be16","tedi-vertical-stepper--compact":"tedi-vertical-stepper--compact-9310cb8d"};exports.default=e;

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

@@ -0,0 +1,34 @@
+const e = {
+  "tedi-vertical-stepper": "tedi-vertical-stepper-cc48e08e",
+  "tedi-vertical-stepper__item": "tedi-vertical-stepper__item-5359847f",
+  "tedi-vertical-stepper__item--has-children": "tedi-vertical-stepper__item--has-children-83e7ee73",
+  "tedi-vertical-stepper__indicator": "tedi-vertical-stepper__indicator-041dc249",
+  "tedi-vertical-stepper__number": "tedi-vertical-stepper__number-a8243903",
+  "tedi-vertical-stepper__content": "tedi-vertical-stepper__content-0be415df",
+  "tedi-vertical-stepper__link": "tedi-vertical-stepper__link-fe115434",
+  "tedi-vertical-stepper__label-text": "tedi-vertical-stepper__label-text-173ed5d2",
+  "tedi-vertical-stepper__item--default": "tedi-vertical-stepper__item--default-a0855686",
+  "tedi-vertical-stepper__item--completed": "tedi-vertical-stepper__item--completed-6afeb234",
+  "tedi-vertical-stepper__item--error": "tedi-vertical-stepper__item--error-ffa453e0",
+  "tedi-vertical-stepper__toggle": "tedi-vertical-stepper__toggle-5f7111e6",
+  "tedi-vertical-stepper__toggle-button": "tedi-vertical-stepper__toggle-button-f9acf14c",
+  "tedi-vertical-stepper__label": "tedi-vertical-stepper__label-b58a742d",
+  "tedi-vertical-stepper__label-icon": "tedi-vertical-stepper__label-icon-4dc08a47",
+  "tedi-vertical-stepper__description": "tedi-vertical-stepper__description-13aceaa3",
+  "tedi-vertical-stepper__end-slot": "tedi-vertical-stepper__end-slot-9333f737",
+  "tedi-vertical-stepper__item--disabled": "tedi-vertical-stepper__item--disabled-bd12c124",
+  "tedi-vertical-stepper__item--current": "tedi-vertical-stepper__item--current-959ca498",
+  "tedi-vertical-stepper__sub-list": "tedi-vertical-stepper__sub-list-4d058866",
+  "tedi-vertical-stepper__sub-item": "tedi-vertical-stepper__sub-item-a036a2cd",
+  "tedi-vertical-stepper__sub-indicator": "tedi-vertical-stepper__sub-indicator-49af9ca3",
+  "tedi-vertical-stepper__sub-dot": "tedi-vertical-stepper__sub-dot-2bf34163",
+  "tedi-vertical-stepper__sub-item--completed": "tedi-vertical-stepper__sub-item--completed-91a65a8a",
+  "tedi-vertical-stepper__sub-item--error": "tedi-vertical-stepper__sub-item--error-488deabe",
+  "tedi-vertical-stepper__sub-item--informative": "tedi-vertical-stepper__sub-item--informative-6efb4c22",
+  "tedi-vertical-stepper__sub-item--disabled": "tedi-vertical-stepper__sub-item--disabled-fa41df61",
+  "tedi-vertical-stepper__sub-item--current": "tedi-vertical-stepper__sub-item--current-4b39be16",
+  "tedi-vertical-stepper--compact": "tedi-vertical-stepper--compact-9310cb8d"
+};
+export {
+  e as default
+};

package/src/tedi/components/overlays/sheet/sheet.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),b=require("../../base/typography/text/text.cjs.js"),f=require("../../buttons/closing-button/closing-button.cjs.js"),t=require("../modal/modal.cjs.js"),d=require("./sheet.module.scss.cjs.js"),i=({open:r,onToggle:a,defaultOpen:n,title:s,header:l,closeButton:c=!0,ariaLabel:u,className:h,children:x})=>{const o=m.useId();return e.jsx(t.Modal,{open:r,onToggle:a,defaultOpen:n,children:e.jsxs(t.Modal.Content,{position:"bottom",fullscreen:"edge","aria-label":u,"aria-labelledby":!l&&s!==void 0&&s!==null?o:void 0,className:j.default(d.default["tedi-sheet"],h),children:[l?e.jsx(t.Modal.Header,{children:l}):e.jsx(t.Modal.Header,{children:e.jsxs("div",{className:d.default["tedi-sheet__header"],children:[e.jsx(b.Text,{id:o,modifiers:"bold",color:"secondary",className:d.default["tedi-sheet__title"],children:s}),c&&e.jsx(t.Modal.Closer,{children:e.jsx(f.ClosingButton,{size:"small"})})]})}),e.jsx(t.Modal.Body,{children:x})]})})};i.displayName="Sheet";exports.Sheet=i;

package/src/tedi/components/overlays/sheet/sheet.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+interface SheetBaseProps {
+    /** Controlled open state. Pair with `onToggle`; omit for uncontrolled use with `defaultOpen`. */
+    open?: boolean;
+    /** Called when the sheet opens or closes. */
+    onToggle?: (open: boolean) => void;
+    /**
+     * Initial open state in uncontrolled mode. Ignored when `open` is provided.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Whether the close button is shown next to the `title`. Only applies to the
+     * `title` layout — a custom `header` owns its own controls.
+     * @default true
+     */
+    closeButton?: boolean;
+    /** Extra class name applied to the sheet container. */
+    className?: string;
+    /** Sheet body content. */
+    children: ReactNode;
+}
+/**
+ * The dialog must always have an accessible name (WCAG 4.1.2). A plain `title` names it via
+ * `aria-labelledby`; when no title is rendered (a custom `header`, or no title at all) an explicit
+ * `ariaLabel` is required — the type enforces one of these.
+ */
+export type SheetProps = SheetBaseProps & ({
+    /**
+     * Plain header title, rendered as the sheet's bold heading (with a close button per
+     * `closeButton`) and wired to the dialog's `aria-labelledby`.
+     */
+    title: ReactNode;
+    header?: never;
+    /** Optional — the rendered `title` already names the dialog. */
+    ariaLabel?: string;
+} | {
+    /**
+     * Accessible name for the dialog. Required here because no plain `title` is rendered
+     * (a custom `header`, or no title).
+     */
+    ariaLabel: string;
+    /** Plain header title. Ignored when `header` is set. */
+    title?: ReactNode;
+    /**
+     * Full header override (custom controls, layout, …), rendered as `Modal.Header` children —
+     * replaces the default title/close-button layout, so the consumer owns any close control.
+     * Takes precedence over `title`.
+     */
+    header?: ReactNode;
+});
+/**
+ * ⚠️ Internal, temporary component — **not exported publicly**.
+ *
+ * A bottom-sheet overlay built on `Modal` (`position="bottom"` +
+ * `fullscreen="edge"`), so the sheet sits flush to the screen edges with no
+ * outer margin. It centralises that configuration for the mobile variants that
+ * need a sheet (e.g. `TableOfContents.Collapsible`, `CardStepper`) until a real
+ * `Sheet` component exists — at which point these usages migrate to it.
+ */
+export declare const Sheet: {
+    ({ open, onToggle, defaultOpen, title, header, closeButton, ariaLabel, className, children, }: SheetProps): JSX.Element;
+    displayName: string;
+};
+export default Sheet;

package/src/tedi/components/overlays/sheet/sheet.es.js

@@ -0,0 +1,41 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import f from "../../../../../external/classnames/index.es.js";
+import { useId as u } from "react";
+import { Text as b } from "../../base/typography/text/text.es.js";
+import { ClosingButton as y } from "../../buttons/closing-button/closing-button.es.js";
+import { Modal as o } from "../modal/modal.es.js";
+import l from "./sheet.module.scss.es.js";
+const N = ({
+  open: d,
+  onToggle: m,
+  defaultOpen: a,
+  title: r,
+  header: i,
+  closeButton: n = !0,
+  ariaLabel: c,
+  className: h,
+  children: p
+}) => {
+  const s = u();
+  return /* @__PURE__ */ e(o, { open: d, onToggle: m, defaultOpen: a, children: /* @__PURE__ */ t(
+    o.Content,
+    {
+      position: "bottom",
+      fullscreen: "edge",
+      "aria-label": c,
+      "aria-labelledby": !i && r !== void 0 && r !== null ? s : void 0,
+      className: f(l["tedi-sheet"], h),
+      children: [
+        i ? /* @__PURE__ */ e(o.Header, { children: i }) : /* @__PURE__ */ e(o.Header, { children: /* @__PURE__ */ t("div", { className: l["tedi-sheet__header"], children: [
+          /* @__PURE__ */ e(b, { id: s, modifiers: "bold", color: "secondary", className: l["tedi-sheet__title"], children: r }),
+          n && /* @__PURE__ */ e(o.Closer, { children: /* @__PURE__ */ e(y, { size: "small" }) })
+        ] }) }),
+        /* @__PURE__ */ e(o.Body, { children: p })
+      ]
+    }
+  ) });
+};
+N.displayName = "Sheet";
+export {
+  N as Sheet
+};

package/src/tedi/components/overlays/sheet/sheet.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-sheet":"tedi-sheet-3174d4b8","tedi-sheet__header":"tedi-sheet__header-39963c05","tedi-sheet__title":"tedi-sheet__title-d67212d8"};exports.default=e;

package/src/tedi/components/overlays/sheet/sheet.module.scss.es.js

@@ -0,0 +1,8 @@
+const e = {
+  "tedi-sheet": "tedi-sheet-3174d4b8",
+  "tedi-sheet__header": "tedi-sheet__header-39963c05",
+  "tedi-sheet__title": "tedi-sheet__title-d67212d8"
+};
+export {
+  e as default
+};

package/src/tedi/helpers/hooks/use-safe-id.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),a=(e="tedi")=>`${e}-${t.useId()}`.replace(/[^a-zA-Z0-9_-]/g,"");exports.useSafeId=a;

package/src/tedi/helpers/hooks/use-safe-id.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Colon-free variant of React's `useId()`. `useId()` returns ids wrapped in colons
+ * (e.g. `:r8m:`) which are valid in the DOM but break CSS-selector resolution — so
+ * selector-based tooling (such as axe resolving an `aria-controls` idref) can't
+ * confirm the referenced element exists and reports it as inconclusive. Use this
+ * whenever the id is written to the DOM and referenced by an `id` / aria idref
+ * attribute (`aria-controls`, `aria-labelledby`, `htmlFor`, …).
+ *
+ * The whole result (prefix included) is stripped of any character that isn't a
+ * letter, digit, `-` or `_`, so a caller-supplied prefix such as `"nav:main"`
+ * can't reintroduce a colon and break the selector-safe contract.
+ *
+ * @param prefix Readable prefix prepended to the id. @default 'tedi'
+ * @returns A stable, unique, selector-safe id (e.g. `tedi-r8m`).
+ */
+export declare const useSafeId: (prefix?: string) => string;

package/src/tedi/helpers/hooks/use-safe-id.es.js

@@ -0,0 +1,5 @@
+import { useId as o } from "react";
+const t = (e = "tedi") => `${e}-${o()}`.replace(/[^a-zA-Z0-9_-]/g, "");
+export {
+  t as useSafeId
+};

package/src/tedi/helpers/index.d.ts

@@ -1,4 +1,5 @@
 export * from './hooks/use-is-mounted';
+export * from './hooks/use-safe-id';
 export * from './hooks/use-breakpoint';
 export * from './hooks/use-breakpoint-props';
 export * from './hooks/use-element-size';

package/src/tedi/index.d.ts

@@ -40,6 +40,8 @@ export * from './components/navigation/link/link';
 export * from './components/navigation/pagination';
 export * from './components/navigation/table-of-contents';
 export * from './components/navigation/tabs';
+export * from './components/navigation/vertical-stepper';
+export * from './components/navigation/card-stepper';
 export * from './components/form/textfield/textfield';
 export * from './components/form/textarea/textarea';
 export * from './components/form/number-field/number-field';