@tedi-design-system/react 18.0.0-rc.14 → 18.0.0-rc.16

package/src/tedi/components/form/time-picker/components/time-grid/time-grid.es.js

@@ -1,101 +1,84 @@
-import { jsx as c } from "react/jsx-runtime";
-import { useId as A, useRef as C, useEffect as I, createElement as N } from "react";
-import h from "../../../../../../../external/classnames/index.es.js";
-import { Button as $ } from "../../../../buttons/button/button.es.js";
-import { ChoiceGroup as R } from "../../../choice-group/choice-group.es.js";
+import { jsx as l } from "react/jsx-runtime";
+import A from "../../../../../../../external/classnames/index.es.js";
+import { useId as I, useRef as _, useEffect as N } from "react";
+import { ChoiceGroup as $ } from "../../../choice-group/choice-group.es.js";
 import d from "../../time-picker.module.scss.es.js";
-import { useLabels as D } from "../../../../../providers/label-provider/use-labels.es.js";
-import { Row as E } from "../../../../layout/grid/row.es.js";
-import { Col as G } from "../../../../layout/grid/col.es.js";
-const L = ({
-  times: l,
-  value: o,
-  onSelect: u,
-  className: k,
-  colWidth: a = { xs: 6, md: 4 },
-  variant: p = "button",
-  bordered: g = !0
+import { useLabels as v } from "../../../../../providers/label-provider/use-labels.es.js";
+const C = ({
+  times: p,
+  value: n,
+  onSelect: f,
+  className: b,
+  colWidth: s = { xs: 6, md: 4 },
+  variant: m = "button",
+  bordered: y = !0
 }) => {
-  const m = A(), { getLabel: w } = D(), s = C(null);
-  I(() => {
-    if (!o) return;
-    const e = s.current;
+  const c = I(), { getLabel: h } = v(), a = _(null);
+  N(() => {
+    if (!n) return;
+    const e = a.current;
     if (!e) return;
-    const r = e.querySelector(
-      `input[type="radio"][value="${o}"], button[data-time="${o}"]`
-    );
+    const r = e.querySelector(`input[type="radio"][value="${n}"]`);
     r == null || r.focus({ preventScroll: !0 });
   }, []);
-  const _ = (e) => {
-    var b;
-    if (p !== "radio") return;
-    const r = s.current;
+  const k = (e) => {
+    var u;
+    const r = a.current;
     if (!r) return;
     const t = Array.from(r.querySelectorAll('input[type="radio"]:not([disabled])'));
     if (t.length === 0) return;
-    const i = t.findIndex((x) => x === document.activeElement);
-    let n;
+    const o = t.findIndex((x) => x === document.activeElement);
+    let i;
     switch (e.key) {
       case "ArrowDown":
       case "ArrowRight":
-        n = i < 0 || i === t.length - 1 ? 0 : i + 1;
+        i = o < 0 || o === t.length - 1 ? 0 : o + 1;
         break;
       case "ArrowUp":
       case "ArrowLeft":
-        n = i <= 0 ? t.length - 1 : i - 1;
+        i = o <= 0 ? t.length - 1 : o - 1;
         break;
       case "Home":
-        n = 0;
+        i = 0;
         break;
       case "End":
-        n = t.length - 1;
+        i = t.length - 1;
         break;
       default:
         return;
     }
-    e.preventDefault(), (b = t[n]) == null || b.focus();
-  }, f = h(
+    e.preventDefault(), (u = t[i]) == null || u.focus();
+  }, w = A(
     d["tedi-time-picker__grid"],
     {
-      [d["tedi-time-picker__grid--borderless"]]: !g
+      [d["tedi-time-picker__grid--borderless"]]: !y
     },
-    k
-  ), y = typeof a == "object" ? a : { width: a };
-  return p === "radio" ? /* @__PURE__ */ c("div", { ref: s, className: f, onKeyDown: _, children: /* @__PURE__ */ c(
-    R,
+    b
+  ), g = typeof s == "object" ? s : { width: s };
+  return /* @__PURE__ */ l("div", { ref: a, className: w, onKeyDown: k, children: /* @__PURE__ */ l(
+    $,
     {
-      id: `time-picker-group-${m}`,
-      label: w("timePicker.pickTime"),
+      id: `time-picker-group-${c}`,
+      label: h("timePicker.pickTime"),
       inputType: "radio",
-      name: `time-grid-${m}`,
-      value: o,
-      onChange: (e) => u(e),
-      items: l.map((e) => ({
-        id: `time-${m}-${e}`,
-        label: e,
+      name: `time-grid-${c}`,
+      value: n,
+      onChange: (e) => f(e),
+      items: p.map((e) => ({
+        id: `time-${c}-${e}`,
+        label: m === "button" ? /* @__PURE__ */ l("span", { className: d["tedi-time-picker__slot-label"], children: e }) : e,
         value: e,
-        colProps: y
+        colProps: g
       })),
       direction: "row",
       variant: "card",
-      showIndicator: !0,
+      showIndicator: m === "radio",
       color: "secondary",
       hideLabel: !0
     }
-  ) }) : /* @__PURE__ */ c("div", { ref: s, className: f, children: /* @__PURE__ */ c(E, { gutter: 2, children: l.map((e) => /* @__PURE__ */ N(G, { ...y, key: e }, /* @__PURE__ */ c(
-    $,
-    {
-      noStyle: !0,
-      "data-time": e,
-      className: h(d["tedi-time-picker__grid-item"], {
-        [d["tedi-time-picker__grid-item--selected"]]: e === o
-      }),
-      onClick: () => u(e),
-      children: e
-    }
-  ))) }) });
+  ) });
 };
-L.displayName = "TimeGrid";
+C.displayName = "TimeGrid";
 export {
-  L as TimeGrid
+  C as TimeGrid
 };

package/src/tedi/components/form/time-picker/components/time-wheel/time-wheel.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react/jsx-runtime"),j=require("../../../../../../../external/classnames/index.cjs.js"),n=require("react"),t=require("../../../time-field/time-field-helpers.cjs.js"),p=require("../../time-picker.module.scss.cjs.js"),F=({hours:c,minutes:l,selectedHour:a,selectedMinute:s,onChange:x,className:P,bordered:L=!0})=>{const I=n.useId(),i=n.useRef(null),d=n.useRef(null),f=n.useRef(!1),m=n.useRef(!1),g=n.useRef(),k=n.useRef(),v=n.useRef(-1),b=n.useRef(-1),[M,R]=n.useState(null),[C,$]=n.useState(null),N=(r,e)=>Math.max(0,Math.min(e-1,r)),A=(r,e,o)=>{const T=r.current;if(!T||e<0)return;const w=t.getScrollTopForIndex(e);o?f.current=!0:m.current=!0,T.scrollTo({top:w,behavior:"instant"}),requestAnimationFrame(()=>{o?f.current=!1:m.current=!1})};n.useLayoutEffect(()=>{const r=c.indexOf(a),e=l.indexOf(s);r!==v.current&&(v.current=r,A(i,r,!0)),e!==b.current&&(b.current=e,A(d,e,!1)),R(r),$(e)},[c,l,a,s]);const q=n.useRef(()=>{});q.current=()=>{const r=i.current;if(!r||f.current)return;t.clearScrollTimeout(g.current);const e=N(t.snapToNearestItem(r.scrollTop,c.length),c.length);R(e);const o=t.getScrollTopForIndex(e);t.needsScrollCorrection(r.scrollTop,o,8)&&(f.current=!0,t.scrollToIndex(r,e,"instant"),requestAnimationFrame(()=>{f.current=!1})),e!==v.current&&(v.current=e,x(c[e],s))};const y=n.useRef(()=>{});y.current=()=>{const r=d.current;if(!r||m.current)return;t.clearScrollTimeout(k.current);const e=N(t.snapToNearestItem(r.scrollTop,l.length),l.length);$(e);const o=t.getScrollTopForIndex(e);t.needsScrollCorrection(r.scrollTop,o,8)&&(m.current=!0,t.scrollToIndex(r,e,"instant"),requestAnimationFrame(()=>{m.current=!1})),e!==b.current&&(b.current=e,x(a,l[e]))},n.useEffect(()=>{const r=i.current,e=d.current;if(!r||!e)return;const o=()=>q.current(),T=()=>y.current();return r.addEventListener("scrollend",o),e.addEventListener("scrollend",T),()=>{r.removeEventListener("scrollend",o),e.removeEventListener("scrollend",T)}},[]);const H=()=>{if(!i.current||f.current)return;const r=N(t.snapToNearestItem(i.current.scrollTop,c.length),c.length);R(r),t.clearScrollTimeout(g.current),g.current=setTimeout(()=>q.current(),150)},K=()=>{if(!d.current||m.current)return;const r=N(t.snapToNearestItem(d.current.scrollTop,l.length),l.length);$(r),t.clearScrollTimeout(k.current),k.current=setTimeout(()=>y.current(),150)},W=r=>{const e=c[r];!e||!i.current||(t.clearScrollTimeout(g.current),v.current=r,R(r),x(e,s),f.current=!0,t.scrollToIndex(i.current,r,"smooth"),setTimeout(()=>{f.current=!1},300))},U=r=>{const e=l[r];!e||!d.current||(t.clearScrollTimeout(k.current),b.current=r,$(r),x(a,e),m.current=!0,t.scrollToIndex(d.current,r,"smooth"),setTimeout(()=>{m.current=!1},300))},D=(r,e,o,T)=>w=>{const u=e.indexOf(o);if(u===-1)return;let h=-1,_=!1;switch(w.key){case"ArrowDown":h=(u+1)%e.length,_=u===e.length-1;break;case"ArrowUp":h=(u-1+e.length)%e.length,_=u===0;break;case"Home":h=0;break;case"End":h=e.length-1;break;case"PageDown":h=(u+5)%e.length,_=u+5>=e.length;break;case"PageUp":h=(u-5+e.length)%e.length,_=u-5<0;break;case"Enter":case" ":w.preventDefault(),T(e[u]);return;default:return}w.preventDefault();const O=r==="hour"?i.current:d.current,S=O==null?void 0:O.querySelector(`#${CSS.escape(`${I}-${r}-${h}`)}`);S==null||S.focus(),S==null||S.scrollIntoView({block:"center",behavior:_?"auto":"smooth"})};return n.useEffect(()=>()=>{t.clearScrollTimeout(g.current),t.clearScrollTimeout(k.current)},[]),E.jsxs("div",{className:j.default(p.default["tedi-time-picker__wheel"],{[p.default["tedi-time-picker__wheel--borderless"]]:!L},P),children:[E.jsx("div",{ref:i,role:"listbox","aria-label":"Hours",tabIndex:0,"aria-activedescendant":`${I}-hour-${c.indexOf(a)}`,className:p.default["tedi-time-picker__wheel-column"],onScroll:H,onKeyDown:D("hour",c,a,r=>x(r,s)),children:c.map((r,e)=>E.jsx("div",{className:j.default(p.default["tedi-time-picker__wheel-item"],{[p.default["tedi-time-picker__wheel-item--selected"]]:e===(M??c.indexOf(a))}),onClick:()=>W(e),id:`${I}-hour-${e}`,role:"option","aria-selected":r===a,children:r},r))}),E.jsx("div",{ref:d,role:"listbox",className:p.default["tedi-time-picker__wheel-column"],onScroll:K,"aria-label":"Minutes",tabIndex:0,"aria-activedescendant":`${I}-minute-${l.indexOf(s)}`,onKeyDown:D("minute",l,s,r=>x(a,r)),children:l.map((r,e)=>E.jsx("div",{className:j.default(p.default["tedi-time-picker__wheel-item"],{[p.default["tedi-time-picker__wheel-item--selected"]]:e===(C??l.indexOf(s))}),onClick:()=>U(e),id:`${I}-minute-${e}`,role:"option","aria-selected":r===s,children:r},r))})]})};F.displayName="TimeWheel";exports.TimeWheel=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react/jsx-runtime"),j=require("../../../../../../../external/classnames/index.cjs.js"),n=require("react"),t=require("../../../time-field/time-field-helpers.cjs.js"),p=require("../../time-picker.module.scss.cjs.js"),F=({hours:c,minutes:l,selectedHour:s,selectedMinute:a,onChange:x,className:P,bordered:L=!0})=>{const I=n.useId(),i=n.useRef(null),d=n.useRef(null),f=n.useRef(!1),m=n.useRef(!1),g=n.useRef(),k=n.useRef(),v=n.useRef(-1),b=n.useRef(-1),[M,R]=n.useState(null),[C,$]=n.useState(null),N=(r,e)=>Math.max(0,Math.min(e-1,r)),A=(r,e,o)=>{const T=r.current;if(!T||e<0)return;const w=t.getScrollTopForIndex(e);o?f.current=!0:m.current=!0,T.scrollTo({top:w,behavior:"instant"}),requestAnimationFrame(()=>{o?f.current=!1:m.current=!1})};n.useLayoutEffect(()=>{const r=c.indexOf(s),e=l.indexOf(a);r!==v.current&&(v.current=r,A(i,r,!0)),e!==b.current&&(b.current=e,A(d,e,!1)),R(r),$(e)},[c,l,s,a]);const q=n.useRef(()=>{});q.current=()=>{const r=i.current;if(!r||f.current)return;t.clearScrollTimeout(g.current);const e=N(t.snapToNearestItem(r.scrollTop,c.length),c.length);R(e);const o=t.getScrollTopForIndex(e);t.needsScrollCorrection(r.scrollTop,o,8)&&(f.current=!0,t.scrollToIndex(r,e,"instant"),requestAnimationFrame(()=>{f.current=!1})),e!==v.current&&(v.current=e,x(c[e],a))};const y=n.useRef(()=>{});y.current=()=>{const r=d.current;if(!r||m.current)return;t.clearScrollTimeout(k.current);const e=N(t.snapToNearestItem(r.scrollTop,l.length),l.length);$(e);const o=t.getScrollTopForIndex(e);t.needsScrollCorrection(r.scrollTop,o,8)&&(m.current=!0,t.scrollToIndex(r,e,"instant"),requestAnimationFrame(()=>{m.current=!1})),e!==b.current&&(b.current=e,x(s,l[e]))},n.useEffect(()=>{const r=i.current,e=d.current;if(!r||!e)return;const o=()=>q.current(),T=()=>y.current();return r.addEventListener("scrollend",o),e.addEventListener("scrollend",T),()=>{r.removeEventListener("scrollend",o),e.removeEventListener("scrollend",T)}},[]);const H=()=>{if(!i.current||f.current)return;const r=N(t.snapToNearestItem(i.current.scrollTop,c.length),c.length);R(r),t.clearScrollTimeout(g.current),g.current=setTimeout(()=>q.current(),150)},K=()=>{if(!d.current||m.current)return;const r=N(t.snapToNearestItem(d.current.scrollTop,l.length),l.length);$(r),t.clearScrollTimeout(k.current),k.current=setTimeout(()=>y.current(),150)},W=r=>{const e=c[r];!e||!i.current||(t.clearScrollTimeout(g.current),v.current=r,R(r),x(e,a),f.current=!0,t.scrollToIndex(i.current,r,"smooth"),setTimeout(()=>{f.current=!1},300))},U=r=>{const e=l[r];!e||!d.current||(t.clearScrollTimeout(k.current),b.current=r,$(r),x(s,e),m.current=!0,t.scrollToIndex(d.current,r,"smooth"),setTimeout(()=>{m.current=!1},300))},D=(r,e,o,T)=>w=>{const u=e.indexOf(o);if(u===-1)return;let h=-1,_=!1;switch(w.key){case"ArrowDown":h=(u+1)%e.length,_=u===e.length-1;break;case"ArrowUp":h=(u-1+e.length)%e.length,_=u===0;break;case"Home":h=0;break;case"End":h=e.length-1;break;case"PageDown":h=(u+5)%e.length,_=u+5>=e.length;break;case"PageUp":h=(u-5+e.length)%e.length,_=u-5<0;break;case"Enter":case" ":w.preventDefault(),T(e[u]);return;default:return}w.preventDefault();const O=r==="hour"?i.current:d.current,S=O==null?void 0:O.querySelector(`#${CSS.escape(`${I}-${r}-${h}`)}`);S==null||S.focus(),S==null||S.scrollIntoView({block:"center",behavior:_?"instant":"smooth"})};return n.useEffect(()=>()=>{t.clearScrollTimeout(g.current),t.clearScrollTimeout(k.current)},[]),E.jsxs("div",{className:j.default(p.default["tedi-time-picker__wheel"],{[p.default["tedi-time-picker__wheel--borderless"]]:!L},P),children:[E.jsx("div",{ref:i,role:"listbox","aria-label":"Hours",tabIndex:0,"aria-activedescendant":`${I}-hour-${c.indexOf(s)}`,className:p.default["tedi-time-picker__wheel-column"],onScroll:H,onKeyDown:D("hour",c,s,r=>x(r,a)),children:c.map((r,e)=>E.jsx("div",{className:j.default(p.default["tedi-time-picker__wheel-item"],{[p.default["tedi-time-picker__wheel-item--selected"]]:e===(M??c.indexOf(s))}),onClick:()=>W(e),id:`${I}-hour-${e}`,role:"option","aria-selected":r===s,children:r},r))}),E.jsx("div",{ref:d,role:"listbox",className:p.default["tedi-time-picker__wheel-column"],onScroll:K,"aria-label":"Minutes",tabIndex:0,"aria-activedescendant":`${I}-minute-${l.indexOf(a)}`,onKeyDown:D("minute",l,a,r=>x(s,r)),children:l.map((r,e)=>E.jsx("div",{className:j.default(p.default["tedi-time-picker__wheel-item"],{[p.default["tedi-time-picker__wheel-item--selected"]]:e===(C??l.indexOf(a))}),onClick:()=>U(e),id:`${I}-minute-${e}`,role:"option","aria-selected":r===a,children:r},r))})]})};F.displayName="TimeWheel";exports.TimeWheel=F;

package/src/tedi/components/form/time-picker/components/time-wheel/time-wheel.es.js

@@ -107,7 +107,7 @@ const Y = ({
     }
     I.preventDefault();
     const q = r === "hour" ? a.current : s.current, T = q == null ? void 0 : q.querySelector(`#${CSS.escape(`${g}-${r}-${x}`)}`);
-    T == null || T.focus(), T == null || T.scrollIntoView({ block: "center", behavior: b ? "auto" : "smooth" });
+    T == null || T.focus(), T == null || T.scrollIntoView({ block: "center", behavior: b ? "instant" : "smooth" });
   };
   return j(() => () => {
     d(v.current), d(S.current);

package/src/tedi/components/form/time-picker/time-picker.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-time-picker__wheel":"tedi-time-picker__wheel-3c73e157","tedi-time-picker__wheel--borderless":"tedi-time-picker__wheel--borderless-42e8669c","tedi-time-picker__wheel-column":"tedi-time-picker__wheel-column-02048315","tedi-time-picker__wheel-item":"tedi-time-picker__wheel-item-78600fe1","tedi-time-picker__wheel-item--selected":"tedi-time-picker__wheel-item--selected-cc3c7194","tedi-time-picker__grid":"tedi-time-picker__grid-5cf42402","tedi-time-picker__grid--borderless":"tedi-time-picker__grid--borderless-805d6413","tedi-time-picker__grid-item":"tedi-time-picker__grid-item-53c9d41d","tedi-time-picker__grid-item--selected":"tedi-time-picker__grid-item--selected-32fb5e5d"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-time-picker__wheel":"tedi-time-picker__wheel-3c73e157","tedi-time-picker__wheel--borderless":"tedi-time-picker__wheel--borderless-42e8669c","tedi-time-picker__wheel-column":"tedi-time-picker__wheel-column-02048315","tedi-time-picker__wheel-item":"tedi-time-picker__wheel-item-78600fe1","tedi-time-picker__wheel-item--selected":"tedi-time-picker__wheel-item--selected-cc3c7194","tedi-time-picker__grid":"tedi-time-picker__grid-5cf42402","tedi-time-picker__grid--borderless":"tedi-time-picker__grid--borderless-805d6413","tedi-time-picker__slot-label":"tedi-time-picker__slot-label-87a1b0e8"};exports.default=e;

package/src/tedi/components/form/time-picker/time-picker.module.scss.es.js

@@ -6,8 +6,7 @@ const e = {
   "tedi-time-picker__wheel-item--selected": "tedi-time-picker__wheel-item--selected-cc3c7194",
   "tedi-time-picker__grid": "tedi-time-picker__grid-5cf42402",
   "tedi-time-picker__grid--borderless": "tedi-time-picker__grid--borderless-805d6413",
-  "tedi-time-picker__grid-item": "tedi-time-picker__grid-item-53c9d41d",
-  "tedi-time-picker__grid-item--selected": "tedi-time-picker__grid-item--selected-32fb5e5d"
+  "tedi-time-picker__slot-label": "tedi-time-picker__slot-label-87a1b0e8"
 };
 export {
   e as default

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext(0);exports.HorizontalStepperStepNumberContext=t;

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

@@ -0,0 +1,2 @@
+/** @internal Step number provided by the parent `HorizontalStepper` to each item. */
+export declare const HorizontalStepperStepNumberContext: import('react').Context<number>;

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

@@ -0,0 +1,5 @@
+import { createContext as t } from "react";
+const o = t(0);
+export {
+  o as HorizontalStepperStepNumberContext
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),_=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),d=require("../../base/icon/icon.cjs.js"),e=require("./horizontal-stepper.module.scss.cjs.js"),x=require("./horizontal-stepper-context.cjs.js"),j=require("../../../providers/label-provider/use-labels.cjs.js"),l=c=>{const{label:u,description:a,completed:m,error:r,selected:i,disabled:s,onSelect:o,className:h}=c,{getLabel:n}=j.useLabels(),z=f.useContext(x.HorizontalStepperStepNumberContext),p=!!m&&!r,b=()=>{i||s||o==null||o()};return t.jsx("li",{"data-name":"horizontal-stepper-item",className:_.default(e.default["tedi-horizontal-stepper-item"],{[e.default["tedi-horizontal-stepper-item--selected"]]:i,[e.default["tedi-horizontal-stepper-item--completed"]]:p,[e.default["tedi-horizontal-stepper-item--error"]]:r,[e.default["tedi-horizontal-stepper-item--disabled"]]:s},h),children:t.jsxs("button",{type:"button",className:e.default["tedi-horizontal-stepper-item__step"],disabled:s,"aria-current":i?"step":void 0,onClick:b,children:[t.jsx("span",{className:e.default["tedi-horizontal-stepper-item__indicator"],children:p?t.jsx(d.Icon,{name:"check",color:"white",size:18,label:n("stepper.completed")}):r?t.jsx(d.Icon,{name:"priority_high",color:"white",size:18,label:n("stepper.error")}):t.jsx("span",{className:e.default["tedi-horizontal-stepper-item__number"],children:z})}),t.jsxs("span",{className:e.default["tedi-horizontal-stepper-item__content"],children:[t.jsx("span",{className:e.default["tedi-horizontal-stepper-item__label"],children:u}),a&&t.jsx("span",{className:e.default["tedi-horizontal-stepper-item__description"],children:a})]})]})})};l.displayName="HorizontalStepperItem";exports.HorizontalStepperItem=l;exports.default=l;

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

@@ -0,0 +1,45 @@
+export interface HorizontalStepperItemProps {
+    /**
+     * Step label shown next to the indicator.
+     */
+    label: string;
+    /**
+     * Secondary text rendered below the label.
+     */
+    description?: string;
+    /**
+     * Marks the step as completed — the indicator shows a check glyph. Ignored
+     * while `error` is set.
+     */
+    completed?: boolean;
+    /**
+     * Marks the step as invalid — the indicator shows a warning glyph and the
+     * step uses the danger colours. Takes precedence over `completed`.
+     */
+    error?: boolean;
+    /**
+     * Marks the step as the current one. Sets `aria-current="step"` and renders
+     * the selected (filled) treatment; the step is not clickable while selected.
+     */
+    selected?: boolean;
+    /**
+     * Prevents the step from being clicked or focused. Use for future steps the
+     * user shouldn't reach yet (e.g. when validation runs step-by-step). Leave
+     * completed steps enabled so users can navigate back to them.
+     */
+    disabled?: boolean;
+    /**
+     * Fired when the user activates the step. Does not fire when the step is
+     * `selected` (already current) or `disabled`.
+     */
+    onSelect?: () => void;
+    /**
+     * Additional class name on the item's root element.
+     */
+    className?: string;
+}
+export declare const HorizontalStepperItem: {
+    (props: HorizontalStepperItemProps): JSX.Element;
+    displayName: string;
+};
+export default HorizontalStepperItem;

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

@@ -0,0 +1,50 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import N from "../../../../../external/classnames/index.es.js";
+import { useContext as u } from "react";
+import { Icon as m } from "../../base/icon/icon.es.js";
+import e from "./horizontal-stepper.module.scss.es.js";
+import { HorizontalStepperStepNumberContext as f } from "./horizontal-stepper-context.es.js";
+import { useLabels as x } from "../../../providers/label-provider/use-labels.es.js";
+const C = (c) => {
+  const { label: d, description: p, completed: h, error: r, selected: i, disabled: o, onSelect: s, className: z } = c, { getLabel: a } = x(), b = u(f), l = !!h && !r, _ = () => {
+    i || o || s == null || s();
+  };
+  return /* @__PURE__ */ t(
+    "li",
+    {
+      "data-name": "horizontal-stepper-item",
+      className: N(
+        e["tedi-horizontal-stepper-item"],
+        {
+          [e["tedi-horizontal-stepper-item--selected"]]: i,
+          [e["tedi-horizontal-stepper-item--completed"]]: l,
+          [e["tedi-horizontal-stepper-item--error"]]: r,
+          [e["tedi-horizontal-stepper-item--disabled"]]: o
+        },
+        z
+      ),
+      children: /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: e["tedi-horizontal-stepper-item__step"],
+          disabled: o,
+          "aria-current": i ? "step" : void 0,
+          onClick: _,
+          children: [
+            /* @__PURE__ */ t("span", { className: e["tedi-horizontal-stepper-item__indicator"], children: l ? /* @__PURE__ */ t(m, { name: "check", color: "white", size: 18, label: a("stepper.completed") }) : r ? /* @__PURE__ */ t(m, { name: "priority_high", color: "white", size: 18, label: a("stepper.error") }) : /* @__PURE__ */ t("span", { className: e["tedi-horizontal-stepper-item__number"], children: b }) }),
+            /* @__PURE__ */ n("span", { className: e["tedi-horizontal-stepper-item__content"], children: [
+              /* @__PURE__ */ t("span", { className: e["tedi-horizontal-stepper-item__label"], children: d }),
+              p && /* @__PURE__ */ t("span", { className: e["tedi-horizontal-stepper-item__description"], children: p })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+C.displayName = "HorizontalStepperItem";
+export {
+  C as HorizontalStepperItem,
+  C as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),e=require("./horizontal-stepper.module.scss.cjs.js"),S=require("./horizontal-stepper-context.cjs.js"),i=require("./horizontal-stepper-item.cjs.js"),l=a.forwardRef(({children:s,"aria-label":u,background:d="default",compact:r="sm",className:m},z)=>{let n=0;const c=a.Children.map(s,t=>a.isValidElement(t)&&t.type===i.HorizontalStepperItem?(n+=1,o.jsx(S.HorizontalStepperStepNumberContext.Provider,{value:n,children:t})):t);return o.jsx("nav",{ref:z,"aria-label":u,"data-name":"horizontal-stepper",className:f.default(e.default["tedi-horizontal-stepper"],{[e.default["tedi-horizontal-stepper--transparent"]]:d==="transparent",[e.default["tedi-horizontal-stepper--compact"]]:r===!0},typeof r=="string"&&e.default[`tedi-horizontal-stepper--compact-${r}`],m),children:o.jsx("ol",{className:e.default["tedi-horizontal-stepper__list"],children:c})})});l.displayName="HorizontalStepper";const p=Object.assign(l,{Item:i.HorizontalStepperItem});exports.HorizontalStepper=p;exports.default=p;

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

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+export type HorizontalStepperBackground = 'default' | 'transparent';
+export type HorizontalStepperCompact = boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export interface HorizontalStepperProps {
+    /**
+     * `HorizontalStepper.Item` elements, one per step.
+     */
+    children: ReactNode;
+    /**
+     * Accessible name for the navigation landmark.
+     */
+    'aria-label'?: string;
+    /**
+     * Background style of the stepper track.
+     * @default default
+     */
+    background?: HorizontalStepperBackground;
+    /**
+     * Collapse labels so only the indicators plus the selected step's label are
+     * visible. `true` collapses at every width; a breakpoint (`'sm'`, `'md'`,
+     * `'lg'`, `'xl'`, `'xxl'`) collapses only below that breakpoint.
+     * @default sm
+     */
+    compact?: HorizontalStepperCompact;
+    /**
+     * Additional class name on the root element.
+     */
+    className?: string;
+}
+export declare const HorizontalStepper: import('react').ForwardRefExoticComponent<HorizontalStepperProps & import('react').RefAttributes<HTMLElement>> & {
+    Item: {
+        (props: import('./horizontal-stepper-item').HorizontalStepperItemProps): JSX.Element;
+        displayName: string;
+    };
+};
+export default HorizontalStepper;

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

@@ -0,0 +1,38 @@
+import { jsx as o } from "react/jsx-runtime";
+import z from "../../../../../external/classnames/index.es.js";
+import { forwardRef as u, Children as c, isValidElement as h } from "react";
+import e from "./horizontal-stepper.module.scss.es.js";
+import { HorizontalStepperStepNumberContext as N } from "./horizontal-stepper-context.es.js";
+import { HorizontalStepperItem as p } from "./horizontal-stepper-item.es.js";
+const i = u(
+  ({ children: n, "aria-label": s, background: l = "default", compact: r = "sm", className: m }, d) => {
+    let a = 0;
+    const f = c.map(n, (t) => h(t) && t.type === p ? (a += 1, /* @__PURE__ */ o(N.Provider, { value: a, children: t })) : t);
+    return /* @__PURE__ */ o(
+      "nav",
+      {
+        ref: d,
+        "aria-label": s,
+        "data-name": "horizontal-stepper",
+        className: z(
+          e["tedi-horizontal-stepper"],
+          {
+            [e["tedi-horizontal-stepper--transparent"]]: l === "transparent",
+            [e["tedi-horizontal-stepper--compact"]]: r === !0
+          },
+          typeof r == "string" && e[`tedi-horizontal-stepper--compact-${r}`],
+          m
+        ),
+        children: /* @__PURE__ */ o("ol", { className: e["tedi-horizontal-stepper__list"], children: f })
+      }
+    );
+  }
+);
+i.displayName = "HorizontalStepper";
+const C = Object.assign(i, {
+  Item: p
+});
+export {
+  C as HorizontalStepper,
+  C as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-horizontal-stepper":"tedi-horizontal-stepper-36325c11","tedi-horizontal-stepper--transparent":"tedi-horizontal-stepper--transparent-71968b15","tedi-horizontal-stepper--compact":"tedi-horizontal-stepper--compact-82fea631","tedi-horizontal-stepper-item":"tedi-horizontal-stepper-item-3e2a41ca","tedi-horizontal-stepper-item--selected":"tedi-horizontal-stepper-item--selected-490ca638","tedi-horizontal-stepper-item__step":"tedi-horizontal-stepper-item__step-615ed27d","tedi-horizontal-stepper-item__content":"tedi-horizontal-stepper-item__content-8f33417f","tedi-horizontal-stepper--compact-sm":"tedi-horizontal-stepper--compact-sm-326a14fe","tedi-horizontal-stepper--compact-md":"tedi-horizontal-stepper--compact-md-aa582376","tedi-horizontal-stepper--compact-lg":"tedi-horizontal-stepper--compact-lg-1520fc41","tedi-horizontal-stepper--compact-xl":"tedi-horizontal-stepper--compact-xl-242fb9b8","tedi-horizontal-stepper--compact-xxl":"tedi-horizontal-stepper--compact-xxl-c032d0fd","tedi-horizontal-stepper__list":"tedi-horizontal-stepper__list-6cdbd337","tedi-horizontal-stepper-item__indicator":"tedi-horizontal-stepper-item__indicator-ae18c372","tedi-horizontal-stepper-item__number":"tedi-horizontal-stepper-item__number-d8803c85","tedi-horizontal-stepper-item__label":"tedi-horizontal-stepper-item__label-002ac63e","tedi-horizontal-stepper-item__description":"tedi-horizontal-stepper-item__description-3c4a57e8","tedi-horizontal-stepper-item--completed":"tedi-horizontal-stepper-item--completed-e9724250","tedi-horizontal-stepper-item--error":"tedi-horizontal-stepper-item--error-8a7b6bbb"};exports.default=e;

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

@@ -0,0 +1,24 @@
+const t = {
+  "tedi-horizontal-stepper": "tedi-horizontal-stepper-36325c11",
+  "tedi-horizontal-stepper--transparent": "tedi-horizontal-stepper--transparent-71968b15",
+  "tedi-horizontal-stepper--compact": "tedi-horizontal-stepper--compact-82fea631",
+  "tedi-horizontal-stepper-item": "tedi-horizontal-stepper-item-3e2a41ca",
+  "tedi-horizontal-stepper-item--selected": "tedi-horizontal-stepper-item--selected-490ca638",
+  "tedi-horizontal-stepper-item__step": "tedi-horizontal-stepper-item__step-615ed27d",
+  "tedi-horizontal-stepper-item__content": "tedi-horizontal-stepper-item__content-8f33417f",
+  "tedi-horizontal-stepper--compact-sm": "tedi-horizontal-stepper--compact-sm-326a14fe",
+  "tedi-horizontal-stepper--compact-md": "tedi-horizontal-stepper--compact-md-aa582376",
+  "tedi-horizontal-stepper--compact-lg": "tedi-horizontal-stepper--compact-lg-1520fc41",
+  "tedi-horizontal-stepper--compact-xl": "tedi-horizontal-stepper--compact-xl-242fb9b8",
+  "tedi-horizontal-stepper--compact-xxl": "tedi-horizontal-stepper--compact-xxl-c032d0fd",
+  "tedi-horizontal-stepper__list": "tedi-horizontal-stepper__list-6cdbd337",
+  "tedi-horizontal-stepper-item__indicator": "tedi-horizontal-stepper-item__indicator-ae18c372",
+  "tedi-horizontal-stepper-item__number": "tedi-horizontal-stepper-item__number-d8803c85",
+  "tedi-horizontal-stepper-item__label": "tedi-horizontal-stepper-item__label-002ac63e",
+  "tedi-horizontal-stepper-item__description": "tedi-horizontal-stepper-item__description-3c4a57e8",
+  "tedi-horizontal-stepper-item--completed": "tedi-horizontal-stepper-item--completed-e9724250",
+  "tedi-horizontal-stepper-item--error": "tedi-horizontal-stepper-item--error-8a7b6bbb"
+};
+export {
+  t as default
+};

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

@@ -0,0 +1,2 @@
+export * from './horizontal-stepper';
+export * from './horizontal-stepper-item';

package/src/tedi/index.d.ts

@@ -31,6 +31,7 @@ export * from './components/notifications/toast/toast';
 export * from './components/cards/card';
 export * from './components/navigation/breadcrumbs';
 export * from './components/navigation/hash-trigger/hash-trigger';
+export * from './components/navigation/horizontal-stepper';
 export * from './components/navigation/link/link';
 export * from './components/navigation/pagination';
 export * from './components/navigation/tabs';