@tedi-design-system/react 18.0.0-rc.2 → 18.0.0-rc.20

package/src/tedi/components/loaders/progress-bar/progress-bar.d.ts

@@ -0,0 +1,65 @@
+import { BreakpointSupport } from '../../../helpers';
+import { FeedbackTextProps } from '../../form/feedback-text/feedback-text';
+export type ProgressBarLabelPosition = 'top' | 'horizontal';
+export type ProgressBarValuePosition = 'horizontal' | 'bottom';
+type ProgressBarBreakpointProps = {
+    /**
+     * Use the 4px bar height instead of the 8px default.
+     * @default false
+     */
+    small?: boolean;
+    /**
+     * Label placement. Ignored without `label`.
+     * @default top
+     */
+    labelPosition?: ProgressBarLabelPosition;
+    /**
+     * Show the percentage value.
+     * @default true
+     */
+    showValue?: boolean;
+    /**
+     * Where the percentage sits relative to the bar / hint row.
+     * @default horizontal
+     */
+    valuePosition?: ProgressBarValuePosition;
+    /**
+     * Override the rendered value text (e.g. `"1 / 5"`) without affecting the fill.
+     */
+    valueLabel?: string;
+    /**
+     * Hint or error text rendered below the bar via `FeedbackText`.
+     */
+    helper?: FeedbackTextProps;
+    /** Class on the root wrapper. */
+    className?: string;
+};
+export interface ProgressBarProps extends BreakpointSupport<ProgressBarBreakpointProps> {
+    /**
+     * Id forwarded to the bar element so external `<label htmlFor>` can target it.
+     */
+    id?: string;
+    /**
+     * Progress value, clamped to `0..100`. `NaN` is treated as `0`.
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Label rendered above or inline with the bar.
+     */
+    label?: string;
+    /**
+     * Renders a required indicator on the label. Ignored without `label`.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Accessible name. Falls back to `label`.
+     */
+    ariaLabel?: string;
+}
+export declare const ProgressBar: {
+    (props: ProgressBarProps): JSX.Element;
+    displayName: string;
+};
+export default ProgressBar;

package/src/tedi/components/loaders/progress-bar/progress-bar.es.js

@@ -0,0 +1,75 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import N from "../../../../../external/classnames/index.es.js";
+import { useId as j } from "react";
+import { FeedbackText as F } from "../../form/feedback-text/feedback-text.es.js";
+import { FormLabel as R } from "../../form/form-label/form-label.es.js";
+import e from "./progress-bar.module.scss.es.js";
+import { useBreakpointProps as q } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const A = (r) => r === void 0 || Number.isNaN(r) || r < 0 ? 0 : r > 100 ? 100 : r, C = (r) => {
+  const { getCurrentBreakpointProps: f } = q(r.defaultServerBreakpoint), {
+    id: w,
+    value: x,
+    small: y = !1,
+    label: l,
+    labelPosition: n = "top",
+    required: B = !1,
+    showValue: c = !0,
+    valuePosition: p = "horizontal",
+    valueLabel: b,
+    ariaLabel: m,
+    helper: s,
+    className: I
+  } = f(r), L = j(), o = w ?? `tedi-progress-bar-${L.replace(/[^a-zA-Z0-9-]/g, "")}`, t = `${o}__label`, u = s ? s.id ?? `${o}__helper` : void 0, d = A(x), _ = b ?? `${Math.round(d)}%`, v = l ? /* @__PURE__ */ a(
+    R,
+    {
+      id: o,
+      label: l,
+      required: B,
+      renderWithoutLabel: !0,
+      className: e["tedi-progress-bar__label"]
+    }
+  ) : null, P = c && p === "horizontal" ? /* @__PURE__ */ a("span", { className: e["tedi-progress-bar__value"], children: _ }) : null, V = /* @__PURE__ */ a(
+    "div",
+    {
+      id: o,
+      role: "progressbar",
+      "aria-valuenow": d,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuetext": b,
+      "aria-labelledby": l && !m ? t : void 0,
+      "aria-label": m || void 0,
+      "aria-describedby": u,
+      className: e["tedi-progress-bar__track"],
+      children: /* @__PURE__ */ a("div", { className: e["tedi-progress-bar__fill"], style: { width: `${d}%` } })
+    }
+  ), g = c && p === "bottom", k = /* @__PURE__ */ i("div", { className: e["tedi-progress-bar__row"], children: [
+    V,
+    P
+  ] }), $ = s || g ? /* @__PURE__ */ i("div", { className: e["tedi-progress-bar__hint-row"], children: [
+    s ? /* @__PURE__ */ a(F, { ...s, id: u, className: N(e["tedi-progress-bar__hint"], s.className) }) : null,
+    g ? /* @__PURE__ */ a("span", { className: e["tedi-progress-bar__value"], children: _ }) : null
+  ] }) : null, h = /* @__PURE__ */ i("div", { className: e["tedi-progress-bar__group"], children: [
+    k,
+    $
+  ] }), z = l && n === "horizontal";
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: N(e["tedi-progress-bar"], { [e["tedi-progress-bar--small"]]: y }, I),
+      "data-name": "progress-bar",
+      children: [
+        l && n === "top" ? /* @__PURE__ */ a("div", { id: t, className: e["tedi-progress-bar__label-wrapper"], children: v }) : null,
+        z ? /* @__PURE__ */ i("div", { className: e["tedi-progress-bar__main"], children: [
+          /* @__PURE__ */ a("div", { id: t, className: e["tedi-progress-bar__inline-label"], children: v }),
+          h
+        ] }) : h
+      ]
+    }
+  );
+};
+C.displayName = "ProgressBar";
+export {
+  C as ProgressBar,
+  C as default
+};

package/src/tedi/components/loaders/progress-bar/progress-bar.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r={"tedi-progress-bar":"tedi-progress-bar-770f14b0","tedi-progress-bar__main":"tedi-progress-bar__main-e6d028ee","tedi-progress-bar__inline-label":"tedi-progress-bar__inline-label-92e2bcb6","tedi-progress-bar__group":"tedi-progress-bar__group-03a58869","tedi-progress-bar__row":"tedi-progress-bar__row-89a78ec6","tedi-progress-bar__label":"tedi-progress-bar__label-af2d533b","tedi-progress-bar__track":"tedi-progress-bar__track-519efc0e","tedi-progress-bar__fill":"tedi-progress-bar__fill-5eaa3943","tedi-progress-bar__value":"tedi-progress-bar__value-f105b0d1","tedi-progress-bar__hint-row":"tedi-progress-bar__hint-row-7e6ce05b","tedi-progress-bar__hint":"tedi-progress-bar__hint-886a36f5","tedi-progress-bar--small":"tedi-progress-bar--small-fbdb4f60"};exports.default=r;

package/src/tedi/components/loaders/progress-bar/progress-bar.module.scss.es.js

@@ -0,0 +1,17 @@
+const r = {
+  "tedi-progress-bar": "tedi-progress-bar-770f14b0",
+  "tedi-progress-bar__main": "tedi-progress-bar__main-e6d028ee",
+  "tedi-progress-bar__inline-label": "tedi-progress-bar__inline-label-92e2bcb6",
+  "tedi-progress-bar__group": "tedi-progress-bar__group-03a58869",
+  "tedi-progress-bar__row": "tedi-progress-bar__row-89a78ec6",
+  "tedi-progress-bar__label": "tedi-progress-bar__label-af2d533b",
+  "tedi-progress-bar__track": "tedi-progress-bar__track-519efc0e",
+  "tedi-progress-bar__fill": "tedi-progress-bar__fill-5eaa3943",
+  "tedi-progress-bar__value": "tedi-progress-bar__value-f105b0d1",
+  "tedi-progress-bar__hint-row": "tedi-progress-bar__hint-row-7e6ce05b",
+  "tedi-progress-bar__hint": "tedi-progress-bar__hint-886a36f5",
+  "tedi-progress-bar--small": "tedi-progress-bar--small-fbdb4f60"
+};
+export {
+  r as default
+};

package/src/tedi/components/misc/option-content/option-content.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),l=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),f=require("../../base/icon/icon.cjs.js"),e=require("./option-content.module.scss.cjs.js"),s=o.forwardRef(({children:t,className:n,id:i},c)=>a.jsx("span",{ref:c,id:i,className:l.default(e.default["tedi-option-content__label"],n),children:t}));s.displayName="OptionContentLabel";const _=o.forwardRef(({children:t,className:n},i)=>a.jsx("span",{ref:i,className:l.default(e.default["tedi-option-content__meta"],n),children:t}));_.displayName="OptionContentMeta";const M=(t,n)=>{const i=typeof t=="string"?{name:t}:t;return a.jsx(f.Icon,{size:18,...i,className:l.default(n,i.className)})},k=o.forwardRef(({children:t,type:n="default",layout:i="horizontal",selected:c=!1,indeterminate:r=!1,disabled:u=!1,icon:m,indicatorSemantics:N="presentation",className:j},O)=>{const b=o.useId(),p=N==="control",x=p&&n!=="default"&&o.Children.toArray(t).some(d=>o.isValidElement(d)&&d.type===s),h=x?b:void 0,v=p?{role:"checkbox","aria-checked":r?"mixed":c,"aria-disabled":u||void 0,"aria-labelledby":h}:{"aria-hidden":!0},y=p?{role:"radio","aria-checked":c,"aria-disabled":u||void 0,"aria-labelledby":h}:{"aria-hidden":!0},I=x?o.Children.map(t,d=>o.isValidElement(d)&&d.type===s?o.cloneElement(d,{id:b}):d):t;return a.jsxs("div",{ref:O,className:l.default(e.default["tedi-option-content"],e.default[`tedi-option-content--${i}`],{[e.default["tedi-option-content--checkbox"]]:n==="checkbox",[e.default["tedi-option-content--radio"]]:n==="radio",[e.default["tedi-option-content--disabled"]]:u},j),children:[n==="checkbox"&&a.jsx("span",{...v,className:l.default(e.default["tedi-option-content__indicator"],e.default["tedi-option-content__checkbox"],{[e.default["tedi-option-content__checkbox--checked"]]:c||r}),children:r?a.jsx(f.Icon,{name:"remove",size:16,className:e.default["tedi-option-content__check-icon"]}):c?a.jsx(f.Icon,{name:"check",size:16,className:e.default["tedi-option-content__check-icon"]}):null}),n==="radio"&&a.jsx("span",{...y,className:l.default(e.default["tedi-option-content__indicator"],e.default["tedi-option-content__radio"],{[e.default["tedi-option-content__radio--checked"]]:c})}),m&&M(m,e.default["tedi-option-content__icon"]),a.jsx("div",{className:e.default["tedi-option-content__content"],children:I})]})});k.displayName="OptionContent";const C=Object.assign(k,{Label:s,Meta:_});exports.OptionContent=C;exports.OptionContentLabel=s;exports.OptionContentMeta=_;exports.default=C;

package/src/tedi/components/misc/option-content/option-content.d.ts

@@ -0,0 +1,71 @@
+import { IconProps } from '../../base/icon/icon';
+export type OptionContentType = 'default' | 'checkbox' | 'radio';
+export type OptionContentLayout = 'horizontal' | 'vertical';
+export interface OptionContentSlotProps {
+    children?: React.ReactNode;
+    /** Additional class name. */
+    className?: string;
+    /** @internal id wired up by `OptionContent` to link the indicator's `aria-labelledby`. */
+    id?: string;
+}
+export declare const OptionContentLabel: import('react').ForwardRefExoticComponent<OptionContentSlotProps & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const OptionContentMeta: import('react').ForwardRefExoticComponent<OptionContentSlotProps & import('react').RefAttributes<HTMLSpanElement>>;
+export interface OptionContentProps {
+    /**
+     * Content of the value row — typically `OptionContent.Label` and
+     * optionally `OptionContent.Meta`, but any node is allowed.
+     */
+    children?: React.ReactNode;
+    /**
+     * Selection-indicator type:
+     * - `default` — no indicator
+     * - `checkbox` — checkbox indicator (multi-select)
+     * - `radio` — radio indicator (single-select listbox)
+     * @default default
+     */
+    type?: OptionContentType;
+    /**
+     * Arrange the label and meta side-by-side (`horizontal`) or stacked
+     * (`vertical`, e.g. a title with a description below).
+     * @default horizontal
+     */
+    layout?: OptionContentLayout;
+    /**
+     * Whether the indicator renders as selected (checked).
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether the checkbox indicator renders as indeterminate. Ignored for other types.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Whether the row renders as disabled (dims the indicator and text).
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Leading icon, rendered before the content. Accepts an icon name or full `IconProps`.
+     */
+    icon?: string | IconProps;
+    /**
+     * How the selection indicator is exposed to assistive tech:
+     * - `presentation` (default) — the indicator is `aria-hidden`; the interactive
+     *   parent owns selection (menu pattern: `aria-checked` on the `DropdownItem`).
+     * - `control` — the indicator itself carries `role="checkbox"`/`"radio"`,
+     *   `aria-checked` and is named via `aria-labelledby` from `OptionContent.Label`
+     *   (listbox pattern, e.g. inside a `Select` option). Requires a `Label` child.
+     * @default presentation
+     */
+    indicatorSemantics?: 'presentation' | 'control';
+    /**
+     * Additional class name.
+     */
+    className?: string;
+}
+export declare const OptionContent: import('react').ForwardRefExoticComponent<OptionContentProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Label: import('react').ForwardRefExoticComponent<OptionContentSlotProps & import('react').RefAttributes<HTMLSpanElement>>;
+    Meta: import('react').ForwardRefExoticComponent<OptionContentSlotProps & import('react').RefAttributes<HTMLSpanElement>>;
+};
+export default OptionContent;

package/src/tedi/components/misc/option-content/option-content.es.js

@@ -0,0 +1,92 @@
+import { jsx as a, jsxs as j } from "react/jsx-runtime";
+import s from "../../../../../external/classnames/index.es.js";
+import { forwardRef as _, useId as A, Children as N, isValidElement as x, cloneElement as M } from "react";
+import { Icon as m } from "../../base/icon/icon.es.js";
+import o from "./option-content.module.scss.es.js";
+const r = _(
+  ({ children: t, className: n, id: e }, i) => /* @__PURE__ */ a("span", { ref: i, id: e, className: s(o["tedi-option-content__label"], n), children: t })
+);
+r.displayName = "OptionContentLabel";
+const u = _(({ children: t, className: n }, e) => /* @__PURE__ */ a("span", { ref: e, className: s(o["tedi-option-content__meta"], n), children: t }));
+u.displayName = "OptionContentMeta";
+const g = (t, n) => {
+  const e = typeof t == "string" ? { name: t } : t;
+  return /* @__PURE__ */ a(m, { size: 18, ...e, className: s(n, e.className) });
+}, C = _(
+  ({
+    children: t,
+    type: n = "default",
+    layout: e = "horizontal",
+    selected: i = !1,
+    indeterminate: d = !1,
+    disabled: l = !1,
+    icon: b,
+    indicatorSemantics: O = "presentation",
+    className: y
+  }, v) => {
+    const h = A(), p = O === "control", f = p && n !== "default" && N.toArray(t).some((c) => x(c) && c.type === r), k = f ? h : void 0, I = p ? {
+      role: "checkbox",
+      "aria-checked": d ? "mixed" : i,
+      "aria-disabled": l || void 0,
+      "aria-labelledby": k
+    } : { "aria-hidden": !0 }, z = p ? {
+      role: "radio",
+      "aria-checked": i,
+      "aria-disabled": l || void 0,
+      "aria-labelledby": k
+    } : { "aria-hidden": !0 }, L = f ? N.map(
+      t,
+      (c) => x(c) && c.type === r ? M(c, { id: h }) : c
+    ) : t;
+    return /* @__PURE__ */ j(
+      "div",
+      {
+        ref: v,
+        className: s(
+          o["tedi-option-content"],
+          o[`tedi-option-content--${e}`],
+          {
+            [o["tedi-option-content--checkbox"]]: n === "checkbox",
+            [o["tedi-option-content--radio"]]: n === "radio",
+            [o["tedi-option-content--disabled"]]: l
+          },
+          y
+        ),
+        children: [
+          n === "checkbox" && /* @__PURE__ */ a(
+            "span",
+            {
+              ...I,
+              className: s(o["tedi-option-content__indicator"], o["tedi-option-content__checkbox"], {
+                [o["tedi-option-content__checkbox--checked"]]: i || d
+              }),
+              children: d ? /* @__PURE__ */ a(m, { name: "remove", size: 16, className: o["tedi-option-content__check-icon"] }) : i ? /* @__PURE__ */ a(m, { name: "check", size: 16, className: o["tedi-option-content__check-icon"] }) : null
+            }
+          ),
+          n === "radio" && /* @__PURE__ */ a(
+            "span",
+            {
+              ...z,
+              className: s(o["tedi-option-content__indicator"], o["tedi-option-content__radio"], {
+                [o["tedi-option-content__radio--checked"]]: i
+              })
+            }
+          ),
+          b && g(b, o["tedi-option-content__icon"]),
+          /* @__PURE__ */ a("div", { className: o["tedi-option-content__content"], children: L })
+        ]
+      }
+    );
+  }
+);
+C.displayName = "OptionContent";
+const $ = Object.assign(C, {
+  Label: r,
+  Meta: u
+});
+export {
+  $ as OptionContent,
+  r as OptionContentLabel,
+  u as OptionContentMeta,
+  $ as default
+};

package/src/tedi/components/misc/option-content/option-content.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-option-content":"tedi-option-content-a433cd53","tedi-option-content--radio":"tedi-option-content--radio-63324c27","tedi-option-content--vertical":"tedi-option-content--vertical-f90f3336","tedi-option-content--checkbox":"tedi-option-content--checkbox-6d08b76f","tedi-option-content__indicator":"tedi-option-content__indicator-cbae42a3","tedi-option-content__icon":"tedi-option-content__icon-919cf745","tedi-option-content--disabled":"tedi-option-content--disabled-947cc3ca","tedi-option-content__label":"tedi-option-content__label-db712a00","tedi-option-content__meta":"tedi-option-content__meta-22706c1d","tedi-option-content__checkbox":"tedi-option-content__checkbox-114cba52","tedi-option-content__checkbox--checked":"tedi-option-content__checkbox--checked-dc7bff22","tedi-option-content__check-icon":"tedi-option-content__check-icon-2c8a9173","tedi-option-content__radio":"tedi-option-content__radio-05184514","tedi-option-content__radio--checked":"tedi-option-content__radio--checked-1980c552","tedi-option-content__content":"tedi-option-content__content-202040f6","tedi-option-content--horizontal":"tedi-option-content--horizontal-292043e8"};exports.default=t;

package/src/tedi/components/misc/option-content/option-content.module.scss.es.js

@@ -0,0 +1,21 @@
+const t = {
+  "tedi-option-content": "tedi-option-content-a433cd53",
+  "tedi-option-content--radio": "tedi-option-content--radio-63324c27",
+  "tedi-option-content--vertical": "tedi-option-content--vertical-f90f3336",
+  "tedi-option-content--checkbox": "tedi-option-content--checkbox-6d08b76f",
+  "tedi-option-content__indicator": "tedi-option-content__indicator-cbae42a3",
+  "tedi-option-content__icon": "tedi-option-content__icon-919cf745",
+  "tedi-option-content--disabled": "tedi-option-content--disabled-947cc3ca",
+  "tedi-option-content__label": "tedi-option-content__label-db712a00",
+  "tedi-option-content__meta": "tedi-option-content__meta-22706c1d",
+  "tedi-option-content__checkbox": "tedi-option-content__checkbox-114cba52",
+  "tedi-option-content__checkbox--checked": "tedi-option-content__checkbox--checked-dc7bff22",
+  "tedi-option-content__check-icon": "tedi-option-content__check-icon-2c8a9173",
+  "tedi-option-content__radio": "tedi-option-content__radio-05184514",
+  "tedi-option-content__radio--checked": "tedi-option-content__radio--checked-1980c552",
+  "tedi-option-content__content": "tedi-option-content__content-202040f6",
+  "tedi-option-content--horizontal": "tedi-option-content--horizontal-292043e8"
+};
+export {
+  t 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/components/navigation/pagination/index.d.ts

@@ -1,2 +1,3 @@
 export * from './pagination';
+export * from './pagination-mobile-modal/pagination-mobile-modal';
 export * from './use-pagination';

package/src/tedi/components/navigation/pagination/pagination-mobile-modal/pagination-mobile-modal.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),c=require("../../../../../../external/classnames/index.cjs.js"),u=require("react"),o=require("../../../overlays/modal/modal.cjs.js"),l=require("./pagination-mobile-modal.module.scss.cjs.js"),d=m=>{const{open:n,onOpenChange:s,options:b,selectedValue:f,onSelect:_,ariaLabel:g,title:r,ariaCurrent:p="true"}=m,t=u.useRef(null);u.useEffect(()=>{if(!n)return;const e=requestAnimationFrame(()=>{var i;typeof((i=t.current)==null?void 0:i.scrollIntoView)=="function"&&t.current.scrollIntoView({block:"start"})});return()=>cancelAnimationFrame(e)},[n]);const M=e=>{_(e),s(!1)};return a.jsx(o.Modal,{open:n,onToggle:s,children:a.jsxs(o.Modal.Content,{size:"small",position:"bottom",initialFocus:t,"aria-label":r?void 0:g,className:l.default["tedi-pagination-mobile-modal__content"],children:[a.jsx(o.Modal.Header,{title:r,closeButtonProps:{className:l.default["tedi-pagination-mobile-modal__close"]}}),a.jsx(o.Modal.Body,{children:a.jsx("ul",{className:l.default["tedi-pagination-mobile-modal__list"],children:b.map(e=>{const i=e.value===f;return a.jsx("li",{children:a.jsxs("button",{ref:i?t:void 0,type:"button",className:c.default(l.default["tedi-pagination-mobile-modal__item"],{[l.default["tedi-pagination-mobile-modal__item--selected"]]:i}),"aria-current":i?p:void 0,"aria-label":e.ariaLabel,onClick:()=>M(e.value),children:[a.jsx("span",{className:c.default(l.default["tedi-pagination-mobile-modal__radio"],{[l.default["tedi-pagination-mobile-modal__radio--selected"]]:i}),"aria-hidden":"true"}),a.jsx("span",{className:l.default["tedi-pagination-mobile-modal__label"],children:e.label})]})},e.value)})})})]})})};d.displayName="PaginationMobileModal";exports.PaginationMobileModal=d;exports.default=d;