@tedi-design-system/react 17.1.0 → 18.0.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "17.1.0",
+  "version": "18.0.0-rc.1",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/community/components/layout/breadcrumbs/breadcrumbs.d.ts

@@ -17,6 +17,9 @@ type ConditionalTypes<C extends React.ElementType> = {
     linkAs?: never;
     crumbs: CrumbProps<IntentionalAny>[];
 };
+/**
+ * @deprecated Use Breadcrumbs from `@tedi-design-system/react/tedi` instead.
+ */
 export type BreadcrumbsProps<C extends React.ElementType = 'a'> = ConditionalTypes<C> & {
     /**
      * Additional custom class.
@@ -29,5 +32,8 @@ export type BreadcrumbsProps<C extends React.ElementType = 'a'> = ConditionalTyp
      */
     showMinimalCrumbs?: boolean | Layouts;
 };
+/**
+ * @deprecated Use Breadcrumbs from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Breadcrumbs: <C extends React.ElementType = "a">(props: BreadcrumbsProps<C>) => JSX.Element | null;
 export default Breadcrumbs;

package/src/community/components/layout/breadcrumbs/crumb/crumb.d.ts

@@ -1,5 +1,8 @@
 import { default as React } from 'react';
 import { AnchorProps } from '../../../anchor/anchor';
+/**
+ * @deprecated Use Breadcrumbs from `@tedi-design-system/react/tedi` instead.
+ */
 export type CrumbProps<C extends React.ElementType = 'a'> = {
     /**
      * If crumb is last/current page;
@@ -7,6 +10,9 @@ export type CrumbProps<C extends React.ElementType = 'a'> = {
      */
     isLast?: boolean;
 } & AnchorProps<C>;
+/**
+ * @deprecated Use Breadcrumbs from `@tedi-design-system/react/tedi` instead.
+ */
 declare const Crumb: <C extends React.ElementType = "a">(props: CrumbProps<C> & {
     singleCrumb?: boolean;
 }) => JSX.Element;

package/src/tedi/components/form/number-field/number-field.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),J=require("../../base/typography/text/text.cjs.js"),K=require("../../buttons/button/button.cjs.js"),Q=require("../feedback-text/feedback-text.cjs.js"),X=require("../form-label/form-label.cjs.js"),n=require("./number-field.module.scss.cjs.js"),Y=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Z=require("../../../providers/label-provider/use-labels.cjs.js"),y=I=>{const{getCurrentBreakpointProps:P}=Y.useBreakpointProps(I.defaultServerBreakpoint),{id:x,label:S,hideLabel:U,required:q,className:j,size:_,inputMode:E="numeric",decimalPlaces:k,min:i,max:u,step:c=1,defaultValue:$,value:B,onChange:a,suffix:h,fullWidth:z=!1,disabled:m=!1,invalid:F=!1,helper:d,input:f}=P(I),{getLabel:M}=Z.useLabels(),b=o.useRef(null),[L,T]=o.useState(""),[V,g]=o.useState($??0),s=o.useMemo(()=>a&&typeof B<"u"?B:V,[a,B,V]),w=d?`${x}-helper`:void 0,C=o.useCallback(e=>{const t=i!==void 0&&e<i,r=u!==void 0&&e>u;return F||t||r||(d==null?void 0:d.type)==="error"},[F,d,u,i]),N=e=>Math.min(u??1/0,Math.max(i??-1/0,e)),R=e=>{const t=M("numberField.quantityUpdated",e);T(t),setTimeout(()=>{T("")},5e3)},W=e=>k!==void 0?parseFloat(e.toFixed(k)):e,A=e=>{let t=s;e==="increment"&&(t=t+c),e==="decrement"&&(t=t-c),t=N(t),t=W(t),R(t),a==null||a(t),g(t)},D=({currentTarget:{value:e}})=>{a==null||a(N(+e)),g(N(+e))},O=e=>{const t=e==="increment"?u!==void 0&&s>=u:i!==void 0&&s<=i,r=v.default(n.default["tedi-number-field__button"],n.default[`tedi-number-field__button--${e}`],{[n.default["tedi-number-field__button--disabled"]]:t||m}),p=M(`numberField.${e}`,c);return l.jsx(K.Button,{"aria-label":p,onClick:()=>A(e),disabled:t||m,visualType:"secondary",className:r,icon:{name:e==="increment"?"add":"remove"},size:_==="small"?"small":void 0,children:e==="increment"?"+":"-"})},G=()=>{const e=v.default(n.default["tedi-number-field__input-wrapper"],{[n.default["tedi-number-field__input-wrapper--with-suffix"]]:h,[n.default["tedi-number-field__input-wrapper--full-width"]]:z}),t=v.default(n.default["tedi-number-field__input"],f==null?void 0:f.className),r=()=>{var p;return(p=b==null?void 0:b.current)==null?void 0:p.focus()};return l.jsxs("div",{className:e,onClick:r,children:[l.jsx("input",{ref:b,id:x,"aria-describedby":w,"aria-invalid":C(s)?"true":"false",type:"number",inputMode:E,value:s,min:i,max:u,required:q,step:c,disabled:m,onChange:D,className:t,...f}),h&&l.jsx(J.Text,{element:"span",modifiers:"small",color:"tertiary",className:n.default["tedi-number-field__suffix"],children:h})]})},H=v.default(n.default["tedi-number-field"],{[n.default["tedi-number-field--invalid"]]:C(s)},{[n.default["tedi-number-field--disabled"]]:m},{[n.default["tedi-number-field--small"]]:_==="small"},j);return l.jsxs("div",{"data-name":"number-field",className:j,children:[l.jsx(X.FormLabel,{id:x,label:S,required:q,hideLabel:U,size:_}),l.jsxs("div",{className:H,children:[O("decrement"),G(),O("increment")]}),d&&l.jsx(Q.FeedbackText,{className:n.default["tedi-number-field__feedback"],...d,id:w}),L&&l.jsx("div",{"aria-live":"polite",className:"sr-only",children:L})]})};y.displayName="NumberField";exports.NumberField=y;exports.default=y;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),B=require("../../../../../external/classnames/index.cjs.js"),u=require("react"),le=require("../../base/typography/text/text.cjs.js"),re=require("../../buttons/button/button.cjs.js"),se=require("../feedback-text/feedback-text.cjs.js"),ue=require("../form-label/form-label.cjs.js"),n=require("./number-field.module.scss.cjs.js"),de=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),oe=require("../../../providers/label-provider/use-labels.cjs.js"),S=L=>{const{getCurrentBreakpointProps:C}=de.useBreakpointProps(L.defaultServerBreakpoint),{getLabel:T,locale:D}=oe.useLabels(),W=D==="en"?".":",",{id:N,label:A,hideLabel:G,required:V,className:g,size:y,inputMode:H,decimalPlaces:p,decimalSeparator:F=W,min:d,max:o,step:I=1,defaultValue:w,value:c,onChange:a,suffix:h,fullWidth:J=!1,disabled:b=!1,invalid:k=!1,helper:i,input:v}=C(L),K=H??(p&&p>0||F===","?"decimal":"numeric"),m=u.useCallback(e=>e===void 0?"":F===","?String(e).replace(".",","):String(e),[F]),x=u.useRef(null),q=u.useRef(!1),[E,O]=u.useState(""),[Q,M]=u.useState(w),[X,_]=u.useState(()=>m(c??w)),l=a&&typeof c<"u"?c:Q;u.useEffect(()=>{!q.current&&typeof c<"u"&&_(m(c))},[c,m]);const P=i?`${N}-helper`:void 0,U=u.useCallback(e=>{if(e===void 0)return k||(i==null?void 0:i.type)==="error";const t=d!==void 0&&e<d,s=o!==void 0&&e>o;return k||t||s||(i==null?void 0:i.type)==="error"},[k,i,o,d]),R=e=>Math.min(o??1/0,Math.max(d??-1/0,e)),Y=e=>{const t=T("numberField.quantityUpdated",e);O(t),setTimeout(()=>{O("")},5e3)},$=e=>p!==void 0?parseFloat(e.toFixed(p)):e,Z=e=>{let t=l??0;e==="increment"&&(t=t+I),e==="decrement"&&(t=t-I),t=R(t),t=$(t),Y(t),a==null||a(t),M(t),_(m(t))},ee=({currentTarget:{value:e}})=>{if(_(e),e===""){l!==void 0&&(a==null||a(void 0),M(void 0));return}const t=e.replace(",",".");if(!/^-?(\d+(\.\d*)?|\.\d+)$/.test(t))return;const s=parseFloat(t);if(Number.isNaN(s))return;const f=R(s),j=$(f);j!==l&&(a==null||a(j),M(j))},te=()=>{q.current=!0},ne=()=>{q.current=!1,_(m(l))},z=e=>{const t=l!==void 0&&(e==="increment"?o!==void 0&&l>=o:d!==void 0&&l<=d),s=B.default(n.default["tedi-number-field__button"],n.default[`tedi-number-field__button--${e}`],{[n.default["tedi-number-field__button--disabled"]]:t||b}),f=T(`numberField.${e}`,I);return r.jsx(re.Button,{"aria-label":f,onClick:()=>Z(e),disabled:t||b,visualType:"secondary",className:s,icon:{name:e==="increment"?"add":"remove"},size:y==="small"?"small":void 0,children:e==="increment"?"+":"-"})},ae=()=>{const e=B.default(n.default["tedi-number-field__input-wrapper"],{[n.default["tedi-number-field__input-wrapper--with-suffix"]]:h,[n.default["tedi-number-field__input-wrapper--full-width"]]:J}),t=B.default(n.default["tedi-number-field__input"],v==null?void 0:v.className),s=()=>{var f;return(f=x==null?void 0:x.current)==null?void 0:f.focus()};return r.jsxs("div",{className:e,onClick:s,children:[r.jsx("input",{ref:x,id:N,role:"spinbutton","aria-valuemin":d,"aria-valuemax":o,"aria-valuenow":l,"aria-describedby":P,"aria-invalid":U(l)?"true":"false",type:"text",inputMode:K,value:X,required:V,disabled:b,onChange:ee,onFocus:te,onBlur:ne,className:t,...v}),h&&r.jsx(le.Text,{element:"span",modifiers:"small",color:"tertiary",className:n.default["tedi-number-field__suffix"],children:h})]})},ie=B.default(n.default["tedi-number-field"],{[n.default["tedi-number-field--invalid"]]:U(l)},{[n.default["tedi-number-field--disabled"]]:b},{[n.default["tedi-number-field--small"]]:y==="small"},g);return r.jsxs("div",{"data-name":"number-field",className:g,children:[r.jsx(ue.FormLabel,{id:N,label:A,required:V,hideLabel:G,size:y}),r.jsxs("div",{className:ie,children:[z("decrement"),ae(),z("increment")]}),i&&r.jsx(se.FeedbackText,{className:n.default["tedi-number-field__feedback"],...i,id:P}),E&&r.jsx("div",{"aria-live":"polite",className:"sr-only",children:E})]})};S.displayName="NumberField";exports.NumberField=S;exports.default=S;

package/src/tedi/components/form/number-field/number-field.d.ts

@@ -36,18 +36,31 @@ export interface NumberFieldProps extends BreakpointSupport<NumberFieldBreakpoin
      */
     value?: number;
     /**
-     * Callback fired when the input value changes.
+     * Callback fired when the input value changes. Emits `undefined` when the
+     * field is cleared so consumers can distinguish *"user explicitly entered
+     * zero"* from *"field is empty"* — important for required-field validation
+     * and for fields where `0` is a meaningful selection.
      */
-    onChange?: (value: number) => void;
+    onChange?: (value: number | undefined) => void;
     /**
      * Specifies the input mode for the field (e.g., numeric or decimal).
-     * @default numeric
+     * Defaults to `'decimal'` when `decimalPlaces > 0` or `decimalSeparator === ','`,
+     * otherwise numeric.
      */
     inputMode?: 'numeric' | 'decimal';
     /**
      * Number of decimal places for rounding calculations.
      */
     decimalPlaces?: number;
+    /**
+     * Character used as the decimal separator when displaying the value.
+     * Both `.` and `,` are always accepted as input regardless of this setting.
+     *
+     * Defaults are derived from `<LabelProvider locale>`: `en` → `.`, `et` / `ru`
+     * → `,`. Pass the prop explicitly to override the locale-derived default for
+     * a single field.
+     */
+    decimalSeparator?: '.' | ',';
     /**
      * Minimum allowed value. Disables decrementing below this value and restricts manual input.
      */

package/src/tedi/components/form/number-field/number-field.es.js

@@ -1,122 +1,146 @@
-import { jsxs as N, jsx as d } from "react/jsx-runtime";
-import b from "../../../../../external/classnames/index.es.js";
-import { useRef as K, useState as O, useMemo as Q, useCallback as R } from "react";
-import { Text as X } from "../../base/typography/text/text.es.js";
-import { Button as Y } from "../../buttons/button/button.es.js";
-import { FeedbackText as Z } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as ee } from "../form-label/form-label.es.js";
+import { jsxs as L, jsx as c } from "react/jsx-runtime";
+import _ from "../../../../../external/classnames/index.es.js";
+import { useCallback as D, useRef as W, useState as S, useEffect as se } from "react";
+import { Text as de } from "../../base/typography/text/text.es.js";
+import { Button as oe } from "../../buttons/button/button.es.js";
+import { FeedbackText as ue } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as ce } from "../form-label/form-label.es.js";
 import n from "./number-field.module.scss.es.js";
-import { useBreakpointProps as te } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as ne } from "../../../providers/label-provider/use-labels.es.js";
-const ie = (y) => {
-  const { getCurrentBreakpointProps: P } = te(y.defaultServerBreakpoint), {
-    id: v,
-    label: $,
-    hideLabel: j,
-    required: x,
-    className: k,
-    size: _,
-    inputMode: q = "numeric",
-    decimalPlaces: F,
-    min: r,
-    max: a,
-    step: u = 1,
-    defaultValue: z,
-    value: h,
+import { useBreakpointProps as me } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as fe } from "../../../providers/label-provider/use-labels.es.js";
+const pe = (T) => {
+  const { getCurrentBreakpointProps: A } = me(T.defaultServerBreakpoint), { getLabel: w, locale: R } = fe(), G = R === "en" ? "." : ",", {
+    id: y,
+    label: H,
+    hideLabel: J,
+    required: E,
+    className: U,
+    size: B,
+    inputMode: K,
+    decimalPlaces: f,
+    decimalSeparator: I = G,
+    min: l,
+    max: s,
+    step: x = 1,
+    defaultValue: O,
+    value: o,
     onChange: i,
-    suffix: B,
-    fullWidth: S = !1,
-    disabled: o = !1,
-    invalid: M = !1,
-    helper: l,
-    input: m
-  } = P(y), { getLabel: V } = ne(), c = K(null), [w, L] = O(""), [T, C] = O(z ?? 0), s = Q(
-    () => i && typeof h < "u" ? h : T,
-    [i, h, T]
-  ), U = l ? `${v}-helper` : void 0, g = R(
+    suffix: h,
+    fullWidth: Q = !1,
+    disabled: p = !1,
+    invalid: F = !1,
+    helper: r,
+    input: b
+  } = A(T), X = K ?? (f && f > 0 || I === "," ? "decimal" : "numeric"), m = D(
+    (e) => e === void 0 ? "" : I === "," ? String(e).replace(".", ",") : String(e),
+    [I]
+  ), v = W(null), M = W(!1), [$, g] = S(""), [Y, k] = S(O), [Z, N] = S(() => m(o ?? O)), a = i && typeof o < "u" ? o : Y;
+  se(() => {
+    !M.current && typeof o < "u" && N(m(o));
+  }, [o, m]);
+  const z = r ? `${y}-helper` : void 0, P = D(
     (e) => {
-      const t = r !== void 0 && e < r, f = a !== void 0 && e > a;
-      return M || t || f || (l == null ? void 0 : l.type) === "error";
+      if (e === void 0)
+        return F || (r == null ? void 0 : r.type) === "error";
+      const t = l !== void 0 && e < l, d = s !== void 0 && e > s;
+      return F || t || d || (r == null ? void 0 : r.type) === "error";
     },
-    [M, l, a, r]
-  ), I = (e) => Math.min(a ?? 1 / 0, Math.max(r ?? -1 / 0, e)), W = (e) => {
-    const t = V("numberField.quantityUpdated", e);
-    L(t), setTimeout(() => {
-      L("");
+    [F, r, s, l]
+  ), j = (e) => Math.min(s ?? 1 / 0, Math.max(l ?? -1 / 0, e)), ee = (e) => {
+    const t = w("numberField.quantityUpdated", e);
+    g(t), setTimeout(() => {
+      g("");
     }, 5e3);
-  }, A = (e) => F !== void 0 ? parseFloat(e.toFixed(F)) : e, D = (e) => {
-    let t = s;
-    e === "increment" && (t = t + u), e === "decrement" && (t = t - u), t = I(t), t = A(t), W(t), i == null || i(t), C(t);
-  }, G = ({ currentTarget: { value: e } }) => {
-    i == null || i(I(+e)), C(I(+e));
-  }, E = (e) => {
-    const t = e === "increment" ? a !== void 0 && s >= a : r !== void 0 && s <= r, f = b(n["tedi-number-field__button"], n[`tedi-number-field__button--${e}`], {
-      [n["tedi-number-field__button--disabled"]]: t || o
-    }), p = V(`numberField.${e}`, u);
-    return /* @__PURE__ */ d(
-      Y,
+  }, q = (e) => f !== void 0 ? parseFloat(e.toFixed(f)) : e, te = (e) => {
+    let t = a ?? 0;
+    e === "increment" && (t = t + x), e === "decrement" && (t = t - x), t = j(t), t = q(t), ee(t), i == null || i(t), k(t), N(m(t));
+  }, ne = ({ currentTarget: { value: e } }) => {
+    if (N(e), e === "") {
+      a !== void 0 && (i == null || i(void 0), k(void 0));
+      return;
+    }
+    const t = e.replace(",", ".");
+    if (!/^-?(\d+(\.\d*)?|\.\d+)$/.test(t))
+      return;
+    const d = parseFloat(t);
+    if (Number.isNaN(d)) return;
+    const u = j(d), V = q(u);
+    V !== a && (i == null || i(V), k(V));
+  }, ie = () => {
+    M.current = !0;
+  }, re = () => {
+    M.current = !1, N(m(a));
+  }, C = (e) => {
+    const t = a !== void 0 && (e === "increment" ? s !== void 0 && a >= s : l !== void 0 && a <= l), d = _(n["tedi-number-field__button"], n[`tedi-number-field__button--${e}`], {
+      [n["tedi-number-field__button--disabled"]]: t || p
+    }), u = w(`numberField.${e}`, x);
+    return /* @__PURE__ */ c(
+      oe,
       {
-        "aria-label": p,
-        onClick: () => D(e),
-        disabled: t || o,
+        "aria-label": u,
+        onClick: () => te(e),
+        disabled: t || p,
         visualType: "secondary",
-        className: f,
+        className: d,
         icon: { name: e === "increment" ? "add" : "remove" },
-        size: _ === "small" ? "small" : void 0,
+        size: B === "small" ? "small" : void 0,
         children: e === "increment" ? "+" : "-"
       }
     );
-  }, H = () => {
-    const e = b(n["tedi-number-field__input-wrapper"], {
-      [n["tedi-number-field__input-wrapper--with-suffix"]]: B,
-      [n["tedi-number-field__input-wrapper--full-width"]]: S
-    }), t = b(n["tedi-number-field__input"], m == null ? void 0 : m.className);
-    return /* @__PURE__ */ N("div", { className: e, onClick: () => {
-      var p;
-      return (p = c == null ? void 0 : c.current) == null ? void 0 : p.focus();
+  }, ae = () => {
+    const e = _(n["tedi-number-field__input-wrapper"], {
+      [n["tedi-number-field__input-wrapper--with-suffix"]]: h,
+      [n["tedi-number-field__input-wrapper--full-width"]]: Q
+    }), t = _(n["tedi-number-field__input"], b == null ? void 0 : b.className);
+    return /* @__PURE__ */ L("div", { className: e, onClick: () => {
+      var u;
+      return (u = v == null ? void 0 : v.current) == null ? void 0 : u.focus();
     }, children: [
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ c(
         "input",
         {
-          ref: c,
-          id: v,
-          "aria-describedby": U,
-          "aria-invalid": g(s) ? "true" : "false",
-          type: "number",
-          inputMode: q,
-          value: s,
-          min: r,
-          max: a,
-          required: x,
-          step: u,
-          disabled: o,
-          onChange: G,
+          ref: v,
+          id: y,
+          role: "spinbutton",
+          "aria-valuemin": l,
+          "aria-valuemax": s,
+          "aria-valuenow": a,
+          "aria-describedby": z,
+          "aria-invalid": P(a) ? "true" : "false",
+          type: "text",
+          inputMode: X,
+          value: Z,
+          required: E,
+          disabled: p,
+          onChange: ne,
+          onFocus: ie,
+          onBlur: re,
           className: t,
-          ...m
+          ...b
         }
       ),
-      B && /* @__PURE__ */ d(X, { element: "span", modifiers: "small", color: "tertiary", className: n["tedi-number-field__suffix"], children: B })
+      h && /* @__PURE__ */ c(de, { element: "span", modifiers: "small", color: "tertiary", className: n["tedi-number-field__suffix"], children: h })
     ] });
-  }, J = b(
+  }, le = _(
     n["tedi-number-field"],
-    { [n["tedi-number-field--invalid"]]: g(s) },
-    { [n["tedi-number-field--disabled"]]: o },
-    { [n["tedi-number-field--small"]]: _ === "small" },
-    k
+    { [n["tedi-number-field--invalid"]]: P(a) },
+    { [n["tedi-number-field--disabled"]]: p },
+    { [n["tedi-number-field--small"]]: B === "small" },
+    U
   );
-  return /* @__PURE__ */ N("div", { "data-name": "number-field", className: k, children: [
-    /* @__PURE__ */ d(ee, { id: v, label: $, required: x, hideLabel: j, size: _ }),
-    /* @__PURE__ */ N("div", { className: J, children: [
-      E("decrement"),
-      H(),
-      E("increment")
+  return /* @__PURE__ */ L("div", { "data-name": "number-field", className: U, children: [
+    /* @__PURE__ */ c(ce, { id: y, label: H, required: E, hideLabel: J, size: B }),
+    /* @__PURE__ */ L("div", { className: le, children: [
+      C("decrement"),
+      ae(),
+      C("increment")
     ] }),
-    l && /* @__PURE__ */ d(Z, { className: n["tedi-number-field__feedback"], ...l, id: U }),
-    w && /* @__PURE__ */ d("div", { "aria-live": "polite", className: "sr-only", children: w })
+    r && /* @__PURE__ */ c(ue, { className: n["tedi-number-field__feedback"], ...r, id: z }),
+    $ && /* @__PURE__ */ c("div", { "aria-live": "polite", className: "sr-only", children: $ })
   ] });
 };
-ie.displayName = "NumberField";
+pe.displayName = "NumberField";
 export {
-  ie as NumberField,
-  ie as default
+  pe as NumberField,
+  pe as default
 };

package/src/tedi/components/navigation/breadcrumbs/breadcrumbs.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),b=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),I=require("../../base/icon/icon.cjs.js"),M=require("../../buttons/button/button.cjs.js"),t=require("./breadcrumbs.module.scss.cjs.js"),P=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),S=require("../../../providers/label-provider/use-labels.cjs.js"),d=require("../../overlays/dropdown/dropdown.cjs.js"),k=n=>{const l=[];return o.Children.forEach(n,a=>{if(o.isValidElement(a)){if(a.type===o.Fragment){l.push(...k(a.props.children));return}l.push(a)}}),l},D=e.jsx(I.Icon,{name:"chevron_right",size:16,color:"brand"}),h=n=>{const{children:l,ariaLabel:a,showMoreLabel:v,separator:w=D,className:p}=n,{getCurrentBreakpointProps:B}=P.useBreakpointProps(n.defaultServerBreakpoint),{variant:C="long",maxItems:f,itemsBeforeCollapse:q=1,itemsAfterCollapse:y=1}=B(n),{getLabel:x}=S.useLabels(),_=a??x("breadcrumbs"),L=v??x("breadcrumbs.show-more"),s=k(l);if(s.length===0)return null;if(C==="short"){if(s.length<2)return null;const r=s[s.length-2],i=r.props,c=typeof r.type!="string"&&i.iconLeft===void 0?o.cloneElement(r,{iconLeft:"arrow_back"}):r;return e.jsx("nav",{"aria-label":_,className:b.default(t.default["tedi-breadcrumbs"],p),children:e.jsx("ol",{className:t.default["tedi-breadcrumbs__list"],children:e.jsx("li",{className:t.default["tedi-breadcrumbs__item"],children:c})})})}const u=Math.max(0,q),m=Math.max(1,y),g=f!==void 0&&s.length>f&&s.length>u+m?[...s.slice(0,u).map(r=>({kind:"item",element:r})),{kind:"ellipsis",hidden:s.slice(u,s.length-m)},...s.slice(s.length-m).map(r=>({kind:"item",element:r}))]:s.map(r=>({kind:"item",element:r})),j=g.length-1;return e.jsx("nav",{"aria-label":_,className:b.default(t.default["tedi-breadcrumbs"],p),children:e.jsx("ol",{className:t.default["tedi-breadcrumbs__list"],children:g.map((r,i)=>e.jsxs(o.Fragment,{children:[r.kind==="item"?e.jsx("li",{className:b.default(t.default["tedi-breadcrumbs__item"],{[t.default["tedi-breadcrumbs__current"]]:i===j}),children:r.element}):e.jsx("li",{className:t.default["tedi-breadcrumbs__item"],children:e.jsxs(d.Dropdown,{children:[e.jsx(d.Dropdown.Trigger,{children:e.jsxs(M.Button,{noStyle:!0,className:t.default["tedi-breadcrumbs__ellipsis"],children:[e.jsx("span",{"aria-hidden":"true",children:"…"}),e.jsx("span",{className:"sr-only",children:L})]})}),e.jsx(d.Dropdown.Content,{children:r.hidden.map((c,N)=>e.jsx(d.Dropdown.Item,{index:N,asChild:!0,children:c},c.key??N))})]})}),i<j&&e.jsx("li",{className:t.default["tedi-breadcrumbs__separator"],"aria-hidden":"true",children:w})]},i))})})};h.displayName="Breadcrumbs";exports.Breadcrumbs=h;exports.default=h;

package/src/tedi/components/navigation/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,66 @@
+import { default as React, ReactNode } from 'react';
+import { BreakpointSupport } from '../../../helpers';
+type BreadcrumbsBreakpointProps = {
+    /**
+     * - `'long'` — full trail of crumbs separated by chevrons.
+     * - `'short'` — only the second-to-last child rendered as a back-link with
+     *   a left-pointing arrow. Useful on narrow viewports. Renders nothing when
+     *   fewer than two crumbs are supplied.
+     * @default long
+     */
+    variant?: 'long' | 'short';
+    /**
+     * Maximum number of crumbs to render before collapsing the middle into an
+     * ellipsis button. Clicking the button opens a dropdown listing the hidden
+     * crumbs. Only applies in the `'long'` variant. When omitted, all crumbs are
+     * rendered.
+     */
+    maxItems?: number;
+    /**
+     * Number of crumbs to keep visible at the start of the trail when collapsed.
+     * @default 1
+     */
+    itemsBeforeCollapse?: number;
+    /**
+     * Number of crumbs to keep visible at the end of the trail when collapsed.
+     * The current page (last crumb) should normally stay visible — keep this ≥ 1.
+     * @default 1
+     */
+    itemsAfterCollapse?: number;
+};
+export interface BreadcrumbsProps extends BreakpointSupport<BreadcrumbsBreakpointProps> {
+    /**
+     * Crumbs in order from the root page to the current page. Each child becomes
+     * one crumb; chevron separators are inserted between them. Use a `Link` (or
+     * any anchor) for navigable crumbs and a plain element (e.g. `<span>`) for
+     * the current page — add `aria-current="page"` to it yourself.
+     */
+    children: React.ReactNode;
+    /**
+     * Accessible label for the wrapping `<nav>` landmark. Falls back to the
+     * `breadcrumbs` entry from `LabelProvider`.
+     */
+    ariaLabel?: string;
+    /**
+     * Accessible label for the ellipsis button that opens the collapsed-crumbs
+     * dropdown. Only used when `maxItems` causes a collapse. Falls back to the
+     * `breadcrumbs.show-more` entry from `LabelProvider`.
+     */
+    showMoreLabel?: string;
+    /**
+     * Node rendered between crumbs. Pass a string (e.g. `'/'`, `'›'`) for text
+     * separators or any React node for custom markup. Hidden from assistive
+     * technology — screen readers announce only the crumbs themselves.
+     * @default <Icon name="chevron_right" size={16} color="brand" />
+     */
+    separator?: ReactNode;
+    /**
+     * Additional class name applied to the `<nav>` element.
+     */
+    className?: string;
+}
+export declare const Breadcrumbs: {
+    (props: BreadcrumbsProps): JSX.Element | null;
+    displayName: string;
+};
+export default Breadcrumbs;

package/src/tedi/components/navigation/breadcrumbs/breadcrumbs.es.js

@@ -0,0 +1,65 @@
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import h from "../../../../../external/classnames/index.es.js";
+import { cloneElement as E, Fragment as k, Children as P, isValidElement as S } from "react";
+import { Icon as j } from "../../base/icon/icon.es.js";
+import { Button as A } from "../../buttons/button/button.es.js";
+import s from "./breadcrumbs.module.scss.es.js";
+import { useBreakpointProps as T } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as z } from "../../../providers/label-provider/use-labels.es.js";
+import { Dropdown as c } from "../../overlays/dropdown/dropdown.es.js";
+const v = (l) => {
+  const n = [];
+  return P.forEach(l, (a) => {
+    if (S(a)) {
+      if (a.type === k) {
+        n.push(...v(a.props.children));
+        return;
+      }
+      n.push(a);
+    }
+  }), n;
+}, D = /* @__PURE__ */ r(j, { name: "chevron_right", size: 16, color: "brand" }), F = (l) => {
+  const { children: n, ariaLabel: a, showMoreLabel: y, separator: B = D, className: u } = l, { getCurrentBreakpointProps: L } = T(l.defaultServerBreakpoint), {
+    variant: w = "long",
+    maxItems: b,
+    itemsBeforeCollapse: x = 1,
+    itemsAfterCollapse: I = 1
+  } = L(l), { getLabel: f } = z(), _ = a ?? f("breadcrumbs"), M = y ?? f("breadcrumbs.show-more"), t = v(n);
+  if (t.length === 0) return null;
+  if (w === "short") {
+    if (t.length < 2) return null;
+    const e = t[t.length - 2], i = e.props, o = typeof e.type != "string" && i.iconLeft === void 0 ? E(e, { iconLeft: "arrow_back" }) : e;
+    return /* @__PURE__ */ r("nav", { "aria-label": _, className: h(s["tedi-breadcrumbs"], u), children: /* @__PURE__ */ r("ol", { className: s["tedi-breadcrumbs__list"], children: /* @__PURE__ */ r("li", { className: s["tedi-breadcrumbs__item"], children: o }) }) });
+  }
+  const m = Math.max(0, x), d = Math.max(1, I), g = b !== void 0 && t.length > b && t.length > m + d ? [
+    ...t.slice(0, m).map((e) => ({ kind: "item", element: e })),
+    {
+      kind: "ellipsis",
+      hidden: t.slice(m, t.length - d)
+    },
+    ...t.slice(t.length - d).map((e) => ({ kind: "item", element: e }))
+  ] : t.map((e) => ({ kind: "item", element: e })), N = g.length - 1;
+  return /* @__PURE__ */ r("nav", { "aria-label": _, className: h(s["tedi-breadcrumbs"], u), children: /* @__PURE__ */ r("ol", { className: s["tedi-breadcrumbs__list"], children: g.map((e, i) => /* @__PURE__ */ p(k, { children: [
+    e.kind === "item" ? /* @__PURE__ */ r(
+      "li",
+      {
+        className: h(s["tedi-breadcrumbs__item"], {
+          [s["tedi-breadcrumbs__current"]]: i === N
+        }),
+        children: e.element
+      }
+    ) : /* @__PURE__ */ r("li", { className: s["tedi-breadcrumbs__item"], children: /* @__PURE__ */ p(c, { children: [
+      /* @__PURE__ */ r(c.Trigger, { children: /* @__PURE__ */ p(A, { noStyle: !0, className: s["tedi-breadcrumbs__ellipsis"], children: [
+        /* @__PURE__ */ r("span", { "aria-hidden": "true", children: "…" }),
+        /* @__PURE__ */ r("span", { className: "sr-only", children: M })
+      ] }) }),
+      /* @__PURE__ */ r(c.Content, { children: e.hidden.map((o, C) => /* @__PURE__ */ r(c.Item, { index: C, asChild: !0, children: o }, o.key ?? C)) })
+    ] }) }),
+    i < N && /* @__PURE__ */ r("li", { className: s["tedi-breadcrumbs__separator"], "aria-hidden": "true", children: B })
+  ] }, i)) }) });
+};
+F.displayName = "Breadcrumbs";
+export {
+  F as Breadcrumbs,
+  F as default
+};

package/src/tedi/components/navigation/breadcrumbs/breadcrumbs.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-breadcrumbs":"tedi-breadcrumbs-0247287c","tedi-breadcrumbs__list":"tedi-breadcrumbs__list-10d5a5f4","tedi-breadcrumbs__item":"tedi-breadcrumbs__item-d8534029","tedi-breadcrumbs__separator":"tedi-breadcrumbs__separator-7f7b6f95","tedi-breadcrumbs__current":"tedi-breadcrumbs__current-db9fd67c","tedi-breadcrumbs__ellipsis":"tedi-breadcrumbs__ellipsis-0b4cdcac"};exports.default=e;

package/src/tedi/components/navigation/breadcrumbs/breadcrumbs.module.scss.es.js

@@ -0,0 +1,11 @@
+const e = {
+  "tedi-breadcrumbs": "tedi-breadcrumbs-0247287c",
+  "tedi-breadcrumbs__list": "tedi-breadcrumbs__list-10d5a5f4",
+  "tedi-breadcrumbs__item": "tedi-breadcrumbs__item-d8534029",
+  "tedi-breadcrumbs__separator": "tedi-breadcrumbs__separator-7f7b6f95",
+  "tedi-breadcrumbs__current": "tedi-breadcrumbs__current-db9fd67c",
+  "tedi-breadcrumbs__ellipsis": "tedi-breadcrumbs__ellipsis-0b4cdcac"
+};
+export {
+  e as default
+};

package/src/tedi/components/navigation/breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export * from './breadcrumbs';

package/src/tedi/index.d.ts

@@ -25,6 +25,7 @@ export * from './components/notifications/alert/alert';
 export * from './components/misc/empty-state';
 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/link/link';
 export * from './components/navigation/pagination';

package/src/tedi/providers/label-provider/label-provider.d.ts

@@ -3,6 +3,11 @@ import { TediLabelEntryRecord, TediLabels, TediLabelValuesRecord, TediLanguage }
 export interface ILabelContext {
     getLabel<TKey extends keyof TediLabels, TArgs extends TediLabels[TKey] extends Record<TediLanguage, infer FuncType> ? FuncType extends (...args: infer P) => string ? P : [] : TediLabels[TKey] extends (...args: infer P) => string ? P : []>(key: TKey, ...args: TArgs): string;
     setLocale: (locale: TediLanguage) => void;
+    /**
+     * Currently active locale. Exposed so components can derive locale-sensitive
+     * formatting defaults (e.g. `NumberField`'s `decimalSeparator`) without
+     * forcing every consumer to repeat the prop on every instance.
+     */
     locale: TediLanguage;
 }
 export declare const LabelContext: React.Context<ILabelContext>;