@tedi-design-system/react 19.1.2-rc.3 → 19.1.2-rc.4

package/package.json

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

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

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

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

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

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

@@ -1 +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;
+"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","tedi-breadcrumbs__dropdown-link":"tedi-breadcrumbs__dropdown-link-a476c274"};exports.default=e;

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

@@ -4,7 +4,8 @@ const e = {
   "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"
+  "tedi-breadcrumbs__ellipsis": "tedi-breadcrumbs__ellipsis-0b4cdcac",
+  "tedi-breadcrumbs__dropdown-link": "tedi-breadcrumbs__dropdown-link-a476c274"
 };
 export {
   e as default

package/src/tedi/components/overlays/dropdown/dropdown-context.d.ts

@@ -15,6 +15,14 @@ export type DropdownContextValue = {
     setContent: (content: React.ReactNode) => void;
     divided?: boolean;
     variant?: 'default' | 'tree';
+    /**
+     * Navigation mode: the dropdown holds links rather than menu commands. Disables the
+     * `menu`/`menuitem` roles and roving tabindex so items are announced as links and are
+     * natural Tab stops.
+     */
+    navigation?: boolean;
+    /** Id applied to the floating content; referenced by the trigger's `aria-controls` in navigation mode. */
+    contentId?: string;
 };
 export declare const DropdownContext: React.Context<DropdownContextValue | null>;
 export declare const useDropdownContext: () => DropdownContextValue;

package/src/tedi/components/overlays/dropdown/dropdown-item/dropdown-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react/jsx-runtime"),U=require("../../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),D=require("../../../../../../external/classnames/index.cjs.js"),m=require("react"),z=require("../dropdown-context.cjs.js"),u=require("./dropdown-item.module.scss.cjs.js"),g=(n,t)=>r=>{n==null||n(r),r.defaultPrevented||t==null||t(r)},A=({children:n,onClick:t,disabled:r,active:x,index:d,indent:p,asChild:s=!1,closeOnSelect:f=!0,isParent:I=!1,className:b,role:y,...q})=>{const{getItemProps:R,listItemsRef:P,setOpen:a,activeIndex:k,divided:E,variant:l}=z.useDropdownContext(),K=s?"div":"button",c=s&&f!==!1&&m.isValidElement(n),w=e=>{typeof d=="number"&&(P.current[d]=e)},N=m.isValidElement(n)?n.ref:void 0,T=U.useMergeRefs([w,N]),j=e=>typeof e!="number"||e<=0?{}:{"--dropdown-indent-level":e,"--dropdown-indent":`${e}rem`},V=e=>{if(r){e.preventDefault();return}const o=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');if(o){o.click();return}t==null||t(e),(!s||c)&&f&&a(!1)},M=e=>{if(r){(e.key==="Enter"||e.key===" ")&&e.preventDefault();return}if(e.key==="Enter"||e.key===" "){const o=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');if(o){e.preventDefault(),o.click(),!s&&f&&a(!1);return}if(c){e.preventDefault(),e.currentTarget.click();return}e.preventDefault(),t==null||t(e),!s&&f&&a(!1)}},_={ref:w,tabIndex:k===d?0:-1,className:D.default(u.default["tedi-dropdown__item"],{[u.default["tedi-dropdown__item--active"]]:x,[u.default["tedi-dropdown__item--disabled"]]:r,[u.default["tedi-dropdown__item--divided"]]:E,[u.default["tedi-dropdown__item--indent"]]:p,[u.default["tedi-dropdown__item--tree-item"]]:l==="tree"&&p,[u.default["tedi-dropdown__item--tree-parent"]]:l==="tree"&&I},b),style:j(p),onClick:V,onKeyDown:M,...q},v=s&&f===!1?{..._,role:y}:R({role:y??"menuitem",disabled:s?void 0:r,..._});if(c){const e=n,o=e.props,i=v;return m.cloneElement(e,{...i,ref:T,className:D.default(i.className,o.className),style:{...i.style,...o.style},"aria-disabled":r||void 0,tabIndex:r?-1:i.tabIndex,onClick:g(i.onClick,o.onClick),onKeyDown:g(i.onKeyDown,o.onKeyDown)})}return S.jsx(K,{...v,children:n})};exports.DropdownItem=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const U=require("react/jsx-runtime"),z=require("../../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),D=require("../../../../../../external/classnames/index.cjs.js"),w=require("react"),A=require("../dropdown-context.cjs.js"),u=require("./dropdown-item.module.scss.cjs.js"),g=(n,o)=>t=>{n==null||n(t),t.defaultPrevented||o==null||o(t)},B=({children:n,onClick:o,disabled:t,active:x,index:a,indent:d,asChild:s=!1,closeOnSelect:f=!0,isParent:I=!1,className:b,role:p,...q})=>{const{getItemProps:R,listItemsRef:K,setOpen:c,activeIndex:P,divided:k,variant:l,navigation:E}=A.useDropdownContext(),N=s?"div":"button",m=s&&f!==!1&&w.isValidElement(n),v=e=>{typeof a=="number"&&(K.current[a]=e)},T=w.isValidElement(n)?n.ref:void 0,j=z.useMergeRefs([v,T]),V=e=>typeof e!="number"||e<=0?{}:{"--dropdown-indent-level":e,"--dropdown-indent":`${e}rem`},M=e=>{if(t){e.preventDefault();return}const r=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');if(r){r.click();return}o==null||o(e),(!s||m)&&f&&c(!1)},S=e=>{if(t){(e.key==="Enter"||e.key===" ")&&e.preventDefault();return}if(e.key==="Enter"||e.key===" "){const r=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');if(r){e.preventDefault(),r.click(),!s&&f&&c(!1);return}if(m){e.preventDefault(),e.currentTarget.click();return}e.preventDefault(),o==null||o(e),!s&&f&&c(!1)}},y={ref:v,tabIndex:P===a?0:-1,className:D.default(u.default["tedi-dropdown__item"],{[u.default["tedi-dropdown__item--active"]]:x,[u.default["tedi-dropdown__item--disabled"]]:t,[u.default["tedi-dropdown__item--divided"]]:k,[u.default["tedi-dropdown__item--indent"]]:d,[u.default["tedi-dropdown__item--tree-item"]]:l==="tree"&&d,[u.default["tedi-dropdown__item--tree-parent"]]:l==="tree"&&I},b),style:V(d),onClick:M,onKeyDown:S,...q},_=E?{...y,onKeyDown:void 0,tabIndex:t?-1:0,role:p}:s&&f===!1?{...y,role:p}:R({role:p??"menuitem",disabled:s?void 0:t,...y});if(m){const e=n,r=e.props,i=_;return w.cloneElement(e,{...i,ref:j,className:D.default(i.className,r.className),style:{...i.style,...r.style},"aria-disabled":t||void 0,tabIndex:t?-1:i.tabIndex,onClick:g(i.onClick,r.onClick),onKeyDown:g(i.onKeyDown,r.onKeyDown)})}return U.jsx(N,{..._,children:n})};exports.DropdownItem=B;

package/src/tedi/components/overlays/dropdown/dropdown-item/dropdown-item.es.js

@@ -1,32 +1,32 @@
-import { jsx as $ } from "react/jsx-runtime";
-import { useMergeRefs as z } from "../../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { jsx as z } from "react/jsx-runtime";
+import { useMergeRefs as A } from "../../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
 import D from "../../../../../../external/classnames/index.es.js";
-import { isValidElement as I, cloneElement as A } from "react";
-import { useDropdownContext as B } from "../dropdown-context.es.js";
+import { isValidElement as I, cloneElement as B } from "react";
+import { useDropdownContext as F } from "../dropdown-context.es.js";
 import p from "./dropdown-item.module.scss.es.js";
-const b = (n, e) => (o) => {
-  n == null || n(o), o.defaultPrevented || e == null || e(o);
-}, W = ({
+const g = (n, o) => (e) => {
+  n == null || n(e), e.defaultPrevented || o == null || o(e);
+}, X = ({
   children: n,
-  onClick: e,
-  disabled: o,
-  active: g,
+  onClick: o,
+  disabled: e,
+  active: x,
   index: m,
   indent: u,
   asChild: s = !1,
   closeOnSelect: i = !0,
-  isParent: l = !1,
-  className: x,
-  role: d,
+  isParent: b = !1,
+  className: K,
+  role: a,
   ...k
 }) => {
-  const { getItemProps: K, listItemsRef: N, setOpen: a, activeIndex: P, divided: R, variant: y } = B(), E = s ? "div" : "button", c = s && i !== !1 && I(n), w = (t) => {
+  const { getItemProps: l, listItemsRef: N, setOpen: c, activeIndex: P, divided: R, variant: w, navigation: E } = F(), T = s ? "div" : "button", d = s && i !== !1 && I(n), v = (t) => {
     typeof m == "number" && (N.current[m] = t);
-  }, T = I(n) ? n.ref : void 0, q = z([w, T]), V = (t) => typeof t != "number" || t <= 0 ? {} : {
+  }, q = I(n) ? n.ref : void 0, V = A([v, q]), j = (t) => typeof t != "number" || t <= 0 ? {} : {
     "--dropdown-indent-level": t,
     "--dropdown-indent": `${t}rem`
-  }, j = (t) => {
-    if (o) {
+  }, M = (t) => {
+    if (e) {
       t.preventDefault();
       return;
     }
@@ -37,9 +37,9 @@ const b = (n, e) => (o) => {
       r.click();
       return;
     }
-    e == null || e(t), (!s || c) && i && a(!1);
-  }, M = (t) => {
-    if (o) {
+    o == null || o(t), (!s || d) && i && c(!1);
+  }, $ = (t) => {
+    if (e) {
       (t.key === "Enter" || t.key === " ") && t.preventDefault();
       return;
     }
@@ -48,54 +48,54 @@ const b = (n, e) => (o) => {
         'input[type="checkbox"], input[type="radio"]'
       );
       if (r) {
-        t.preventDefault(), r.click(), !s && i && a(!1);
+        t.preventDefault(), r.click(), !s && i && c(!1);
         return;
       }
-      if (c) {
+      if (d) {
         t.preventDefault(), t.currentTarget.click();
         return;
       }
-      t.preventDefault(), e == null || e(t), !s && i && a(!1);
+      t.preventDefault(), o == null || o(t), !s && i && c(!1);
     }
-  }, v = {
-    ref: w,
+  }, y = {
+    ref: v,
     tabIndex: P === m ? 0 : -1,
     className: D(
       p["tedi-dropdown__item"],
       {
-        [p["tedi-dropdown__item--active"]]: g,
-        [p["tedi-dropdown__item--disabled"]]: o,
+        [p["tedi-dropdown__item--active"]]: x,
+        [p["tedi-dropdown__item--disabled"]]: e,
         [p["tedi-dropdown__item--divided"]]: R,
         [p["tedi-dropdown__item--indent"]]: u,
-        [p["tedi-dropdown__item--tree-item"]]: y === "tree" && u,
-        [p["tedi-dropdown__item--tree-parent"]]: y === "tree" && l
+        [p["tedi-dropdown__item--tree-item"]]: w === "tree" && u,
+        [p["tedi-dropdown__item--tree-parent"]]: w === "tree" && b
       },
-      x
+      K
     ),
-    style: V(u),
-    onClick: j,
-    onKeyDown: M,
+    style: j(u),
+    onClick: M,
+    onKeyDown: $,
     ...k
-  }, _ = s && i === !1 ? { ...v, role: d } : K({
-    role: d ?? "menuitem",
-    disabled: s ? void 0 : o,
-    ...v
+  }, _ = E ? { ...y, onKeyDown: void 0, tabIndex: e ? -1 : 0, role: a } : s && i === !1 ? { ...y, role: a } : l({
+    role: a ?? "menuitem",
+    disabled: s ? void 0 : e,
+    ...y
   });
-  if (c) {
+  if (d) {
     const t = n, r = t.props, f = _;
-    return A(t, {
+    return B(t, {
       ...f,
-      ref: q,
+      ref: V,
       className: D(f.className, r.className),
       style: { ...f.style, ...r.style },
-      "aria-disabled": o || void 0,
-      tabIndex: o ? -1 : f.tabIndex,
-      onClick: b(f.onClick, r.onClick),
-      onKeyDown: b(f.onKeyDown, r.onKeyDown)
+      "aria-disabled": e || void 0,
+      tabIndex: e ? -1 : f.tabIndex,
+      onClick: g(f.onClick, r.onClick),
+      onKeyDown: g(f.onKeyDown, r.onKeyDown)
     });
   }
-  return /* @__PURE__ */ $(E, { ..._, children: n });
+  return /* @__PURE__ */ z(T, { ..._, children: n });
 };
 export {
-  W as DropdownItem
+  X as DropdownItem
 };

package/src/tedi/components/overlays/dropdown/dropdown-trigger/dropdown-trigger.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),c=require("react"),g=require("../../../../helpers/get-element-ref.cjs.js"),f=require("../dropdown-context.cjs.js"),i=({children:e})=>{const{refs:r,getReferenceProps:t}=f.useDropdownContext(),o=g.getElementRef(e),n=s.useMergeRefs([r.setReference,o]);return c.cloneElement(e,t({...e.props,ref:n}))};exports.DropdownTrigger=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("../../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),d=require("react"),f=require("../../../../helpers/get-element-ref.cjs.js"),p=require("../dropdown-context.cjs.js"),u=({children:e})=>{const{refs:t,getReferenceProps:r,navigation:n,open:o,contentId:s}=p.useDropdownContext(),i=f.getElementRef(e),c=g.useMergeRefs([t.setReference,i]),a=n?{"aria-expanded":o,"aria-controls":o?s:void 0}:void 0;return d.cloneElement(e,r({...e.props,...a,ref:c}))};exports.DropdownTrigger=u;

package/src/tedi/components/overlays/dropdown/dropdown-trigger/dropdown-trigger.es.js

@@ -1,13 +1,14 @@
 import { useMergeRefs as m } from "../../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import { cloneElement as n } from "react";
-import { getElementRef as s } from "../../../../helpers/get-element-ref.es.js";
-import { useDropdownContext as p } from "../dropdown-context.es.js";
+import { cloneElement as a } from "react";
+import { getElementRef as c } from "../../../../helpers/get-element-ref.es.js";
+import { useDropdownContext as g } from "../dropdown-context.es.js";
 const u = ({ children: e }) => {
-  const { refs: o, getReferenceProps: r } = p(), t = s(e), f = m([o.setReference, t]);
-  return n(
+  const { refs: r, getReferenceProps: t, navigation: n, open: o, contentId: s } = g(), p = c(e), f = m([r.setReference, p]), i = n ? { "aria-expanded": o, "aria-controls": o ? s : void 0 } : void 0;
+  return a(
     e,
-    r({
+    t({
       ...e.props,
+      ...i,
       ref: f
     })
   );

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),e=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),A=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),v=require("./dropdown.module.scss.cjs.js"),z=require("./dropdown-content/dropdown-content.cjs.js"),G=require("./dropdown-context.cjs.js"),J=require("./dropdown-helpers.cjs.js"),K=require("./dropdown-item/dropdown-item.cjs.js"),Q=require("./dropdown-separator/dropdown-separator.cjs.js"),V=require("./dropdown-trigger/dropdown-trigger.cjs.js"),X=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Y=require("../../../providers/label-provider/use-labels.cjs.js"),Z=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),x=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),ee=4,a=h=>{var O;const{getCurrentBreakpointProps:b}=X.useBreakpointProps(h.defaultServerBreakpoint),{children:F,modal:q=!1,divided:P=!1,width:R="auto",variant:p="default",open:f,defaultOpen:y=!1,onOpenChange:l,defaultActiveIndex:n,placement:g="bottom-start",maxHeight:c,className:j}=b(h),{getLabel:N}=Y.useLabels(),_=e.useFloatingNodeId(),D=t.useRef([]),[u,m]=t.useState(n??null),[w,k]=t.useState(null),[B,T]=t.useState(y),o=f??B;t.useEffect(()=>{o||m(n??null)},[o,n]);const I=t.useCallback(i=>{f===void 0&&T(i),l==null||l(i)},[f,l]),U=e.useFloating({nodeId:_,open:o,placement:g,onOpenChange:I,middleware:[x.offset(ee),x.flip(),x.shift()],whileElementsMounted:Z.autoUpdate}),{context:r,refs:s,x:H,y:L,strategy:M}=U,C=e.useInteractions([e.useClick(r),e.useRole(r,{role:"menu"}),e.useDismiss(r),e.useListNavigation(r,{listRef:D,activeIndex:u,onNavigate:m,loop:!0,selectedIndex:n??null,focusItemOnOpen:n!==null?!0:"auto"})]),W={open:o,setOpen:I,refs:s,listItemsRef:D,activeIndex:u,setActiveIndex:m,placement:g,content:w,setContent:k,divided:P,variant:p,...C},E=(O=s.reference.current)==null?void 0:O.getBoundingClientRect().width,$=t.useMemo(()=>{const i=s.reference.current;if(!i)return;const S=i.offsetParent;if(S)return S.getBoundingClientRect().width},[s.reference.current]);return d.jsxs(G.DropdownContext.Provider,{value:W,children:[F,d.jsx(e.FloatingPortal,{children:o&&d.jsx(e.FloatingFocusManager,{context:r,modal:q,visuallyHiddenDismiss:q?N("close"):!1,children:d.jsx("div",{...C.getFloatingProps({ref:s.setFloating,className:A.default(v.default["tedi-dropdown"],{[v.default[`tedi-dropdown--${p}`]]:p==="tree"},j),style:{position:M,left:H??0,top:L??0,width:J.resolveDropdownWidth(R,E,$)},role:"menu","aria-orientation":"vertical","aria-activedescendant":u!==null?`dropdown-item-${u}`:void 0}),"data-placement":g,"data-state":o?"open":"closed",children:c!==void 0?d.jsx("div",{className:v.default["tedi-dropdown__scroll"],role:"group",tabIndex:0,style:{maxHeight:typeof c=="number"?`${c}px`:c},children:w}):w})})})]})};a.Trigger=V.DropdownTrigger;a.Content=z.DropdownContent;a.Item=K.DropdownItem;a.Separator=Q.DropdownSeparator;exports.Dropdown=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),e=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),G=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),x=require("./dropdown.module.scss.cjs.js"),J=require("./dropdown-content/dropdown-content.cjs.js"),K=require("./dropdown-context.cjs.js"),Q=require("./dropdown-helpers.cjs.js"),V=require("./dropdown-item/dropdown-item.cjs.js"),X=require("./dropdown-separator/dropdown-separator.cjs.js"),Y=require("./dropdown-trigger/dropdown-trigger.cjs.js"),Z=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),ee=require("../../../providers/label-provider/use-labels.cjs.js"),te=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),h=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),ne=4,a=q=>{var S;const{getCurrentBreakpointProps:P}=Z.useBreakpointProps(q.defaultServerBreakpoint),{children:R,modal:I=!1,divided:y=!1,width:j="auto",variant:f="default",open:g,defaultOpen:N=!1,onOpenChange:l,defaultActiveIndex:o,placement:m="bottom-start",maxHeight:c,navigation:u=!1,className:_}=P(q),{getLabel:k}=ee.useLabels(),B=e.useFloatingNodeId(),D=t.useId(),b=t.useRef([]),[p,w]=t.useState(o??null),[v,T]=t.useState(null),[U,H]=t.useState(N),n=g??U;t.useEffect(()=>{n||w(o??null)},[n,o]);const C=t.useCallback(i=>{g===void 0&&H(i),l==null||l(i)},[g,l]),L=e.useFloating({nodeId:B,open:n,placement:m,onOpenChange:C,middleware:[h.offset(ne),h.flip(),h.shift()],whileElementsMounted:te.autoUpdate}),{context:r,refs:s,x:M,y:W,strategy:E}=L,O=e.useInteractions([e.useClick(r),e.useRole(r,{role:"menu",enabled:!u}),e.useDismiss(r),e.useListNavigation(r,{listRef:b,activeIndex:p,onNavigate:w,loop:!0,selectedIndex:o??null,focusItemOnOpen:o!==null?!0:"auto",enabled:!u})]),$={open:n,setOpen:C,refs:s,listItemsRef:b,activeIndex:p,setActiveIndex:w,placement:m,content:v,setContent:T,divided:y,variant:f,navigation:u,contentId:D,...O},A=(S=s.reference.current)==null?void 0:S.getBoundingClientRect().width,z=t.useMemo(()=>{const i=s.reference.current;if(!i)return;const F=i.offsetParent;if(F)return F.getBoundingClientRect().width},[s.reference.current]);return d.jsxs(K.DropdownContext.Provider,{value:$,children:[R,d.jsx(e.FloatingPortal,{children:n&&d.jsx(e.FloatingFocusManager,{context:r,modal:I,visuallyHiddenDismiss:I?k("close"):!1,children:d.jsx("div",{...O.getFloatingProps({ref:s.setFloating,className:G.default(x.default["tedi-dropdown"],{[x.default[`tedi-dropdown--${f}`]]:f==="tree"},_),style:{position:E,left:M??0,top:W??0,width:Q.resolveDropdownWidth(j,A,z)},...u?{id:D}:{role:"menu","aria-orientation":"vertical","aria-activedescendant":p!==null?`dropdown-item-${p}`:void 0}}),"data-placement":m,"data-state":n?"open":"closed",children:c!==void 0?d.jsx("div",{className:x.default["tedi-dropdown__scroll"],role:"group",tabIndex:0,style:{maxHeight:typeof c=="number"?`${c}px`:c},children:v}):v})})})]})};a.Trigger=Y.DropdownTrigger;a.Content=J.DropdownContent;a.Item=V.DropdownItem;a.Separator=X.DropdownSeparator;exports.Dropdown=a;

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

@@ -78,6 +78,14 @@ export interface DropdownProps extends BreakpointSupport<DropdownBreakpointProps
      * the user has to press an arrow key to start navigating.
      */
     defaultActiveIndex?: number;
+    /**
+     * Navigation mode — use when the dropdown lists **links** (e.g. collapsed breadcrumbs) rather than
+     * menu commands. Drops the `menu` / `menuitem` roles, `aria-haspopup="menu"` and roving tabindex, so
+     * screen readers announce the items as links and each is a normal Tab stop. Keep it `false` (default)
+     * for action menus.
+     * @default false
+     */
+    navigation?: boolean;
     className?: string;
 }
 export declare const Dropdown: {

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

@@ -1,131 +1,139 @@
-import { jsxs as A, jsx as d } from "react/jsx-runtime";
-import { useFloatingNodeId as U, useFloating as q, useInteractions as z, useClick as G, useRole as J, useDismiss as K, useListNavigation as Q, FloatingPortal as V, FloatingFocusManager as X } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import Y from "../../../../../external/classnames/index.es.js";
+import { jsxs as q, jsx as c } from "react/jsx-runtime";
+import { useFloatingNodeId as z, useFloating as G, useInteractions as J, useClick as K, useRole as Q, useDismiss as V, useListNavigation as X, FloatingPortal as Y, FloatingFocusManager as Z } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import ee from "../../../../../external/classnames/index.es.js";
 import e from "react";
-import v from "./dropdown.module.scss.es.js";
-import { DropdownContent as Z } from "./dropdown-content/dropdown-content.es.js";
-import { DropdownContext as ee } from "./dropdown-context.es.js";
-import { resolveDropdownWidth as te } from "./dropdown-helpers.es.js";
-import { DropdownItem as oe } from "./dropdown-item/dropdown-item.es.js";
-import { DropdownSeparator as ne } from "./dropdown-separator/dropdown-separator.es.js";
-import { DropdownTrigger as re } from "./dropdown-trigger/dropdown-trigger.es.js";
-import { useBreakpointProps as ie } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as se } from "../../../providers/label-provider/use-labels.es.js";
-import { autoUpdate as ae } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as le, flip as de, shift as ce } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-const me = 4, c = (h) => {
-  var O;
-  const { getCurrentBreakpointProps: F } = ie(h.defaultServerBreakpoint), {
-    children: N,
-    modal: w = !1,
-    divided: R = !1,
-    width: y = "auto",
-    variant: m = "default",
+import h from "./dropdown.module.scss.es.js";
+import { DropdownContent as te } from "./dropdown-content/dropdown-content.es.js";
+import { DropdownContext as oe } from "./dropdown-context.es.js";
+import { resolveDropdownWidth as ne } from "./dropdown-helpers.es.js";
+import { DropdownItem as re } from "./dropdown-item/dropdown-item.es.js";
+import { DropdownSeparator as ie } from "./dropdown-separator/dropdown-separator.es.js";
+import { DropdownTrigger as se } from "./dropdown-trigger/dropdown-trigger.es.js";
+import { useBreakpointProps as ae } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as le } from "../../../providers/label-provider/use-labels.es.js";
+import { autoUpdate as de } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as ce, flip as me, shift as ue } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+const pe = 4, m = (w) => {
+  var F;
+  const { getCurrentBreakpointProps: N } = ae(w.defaultServerBreakpoint), {
+    children: R,
+    modal: I = !1,
+    divided: y = !1,
+    width: P = "auto",
+    variant: u = "default",
     open: p,
-    defaultOpen: P = !1,
+    defaultOpen: S = !1,
     onOpenChange: s,
     defaultActiveIndex: o,
-    placement: u = "bottom-start",
+    placement: f = "bottom-start",
     maxHeight: a,
-    className: S
-  } = F(h), { getLabel: b } = se(), k = U(), x = e.useRef([]), [l, f] = e.useState(o ?? null), [g, B] = e.useState(null), [_, W] = e.useState(P), t = p ?? _;
+    navigation: l = !1,
+    className: k
+  } = N(w), { getLabel: B } = le(), _ = z(), x = e.useId(), D = e.useRef([]), [d, g] = e.useState(o ?? null), [v, W] = e.useState(null), [E, H] = e.useState(S), t = p ?? E;
   e.useEffect(() => {
-    t || f(o ?? null);
+    t || g(o ?? null);
   }, [t, o]);
-  const I = e.useCallback(
+  const O = e.useCallback(
     (i) => {
-      p === void 0 && W(i), s == null || s(i);
+      p === void 0 && H(i), s == null || s(i);
     },
     [p, s]
-  ), E = q({
-    nodeId: k,
+  ), L = G({
+    nodeId: _,
     open: t,
-    placement: u,
-    onOpenChange: I,
-    middleware: [le(me), de(), ce()],
-    whileElementsMounted: ae
-  }), { context: n, refs: r, x: H, y: L, strategy: M } = E, D = z([
-    G(n),
-    J(n, { role: "menu" }),
+    placement: f,
+    onOpenChange: O,
+    middleware: [ce(pe), me(), ue()],
+    whileElementsMounted: de
+  }), { context: n, refs: r, x: M, y: T, strategy: $ } = L, C = J([
     K(n),
-    Q(n, {
-      listRef: x,
-      activeIndex: l,
-      onNavigate: f,
+    // In navigation mode the popup is a list of links, not a menu — disable the menu role and the
+    // roving-tabindex list navigation so items stay plain, tabbable links.
+    Q(n, { role: "menu", enabled: !l }),
+    V(n),
+    X(n, {
+      listRef: D,
+      activeIndex: d,
+      onNavigate: g,
       loop: !0,
       selectedIndex: o ?? null,
-      focusItemOnOpen: o !== null ? !0 : "auto"
+      focusItemOnOpen: o !== null ? !0 : "auto",
+      enabled: !l
     })
-  ]), T = {
+  ]), j = {
     open: t,
-    setOpen: I,
+    setOpen: O,
     refs: r,
-    listItemsRef: x,
-    activeIndex: l,
-    setActiveIndex: f,
-    placement: u,
-    content: g,
-    setContent: B,
-    divided: R,
-    variant: m,
-    ...D
-  }, $ = (O = r.reference.current) == null ? void 0 : O.getBoundingClientRect().width, j = e.useMemo(() => {
+    listItemsRef: D,
+    activeIndex: d,
+    setActiveIndex: g,
+    placement: f,
+    content: v,
+    setContent: W,
+    divided: y,
+    variant: u,
+    navigation: l,
+    contentId: x,
+    ...C
+  }, A = (F = r.reference.current) == null ? void 0 : F.getBoundingClientRect().width, U = e.useMemo(() => {
     const i = r.reference.current;
     if (!i) return;
-    const C = i.offsetParent;
-    if (C)
-      return C.getBoundingClientRect().width;
+    const b = i.offsetParent;
+    if (b)
+      return b.getBoundingClientRect().width;
   }, [r.reference.current]);
-  return /* @__PURE__ */ A(ee.Provider, { value: T, children: [
-    N,
-    /* @__PURE__ */ d(V, { children: t && /* @__PURE__ */ d(
-      X,
+  return /* @__PURE__ */ q(oe.Provider, { value: j, children: [
+    R,
+    /* @__PURE__ */ c(Y, { children: t && /* @__PURE__ */ c(
+      Z,
       {
         context: n,
-        modal: w,
-        visuallyHiddenDismiss: w ? b("close") : !1,
-        children: /* @__PURE__ */ d(
+        modal: I,
+        visuallyHiddenDismiss: I ? B("close") : !1,
+        children: /* @__PURE__ */ c(
           "div",
           {
-            ...D.getFloatingProps({
+            ...C.getFloatingProps({
               ref: r.setFloating,
-              className: Y(
-                v["tedi-dropdown"],
-                { [v[`tedi-dropdown--${m}`]]: m === "tree" },
-                S
+              className: ee(
+                h["tedi-dropdown"],
+                { [h[`tedi-dropdown--${u}`]]: u === "tree" },
+                k
               ),
               style: {
-                position: M,
-                left: H ?? 0,
-                top: L ?? 0,
-                width: te(y, $, j)
+                position: $,
+                left: M ?? 0,
+                top: T ?? 0,
+                width: ne(P, A, U)
               },
-              role: "menu",
-              "aria-orientation": "vertical",
-              "aria-activedescendant": l !== null ? `dropdown-item-${l}` : void 0
+              ...l ? { id: x } : {
+                role: "menu",
+                "aria-orientation": "vertical",
+                "aria-activedescendant": d !== null ? `dropdown-item-${d}` : void 0
+              }
             }),
-            "data-placement": u,
+            "data-placement": f,
             "data-state": t ? "open" : "closed",
-            children: a !== void 0 ? /* @__PURE__ */ d(
+            children: a !== void 0 ? /* @__PURE__ */ c(
               "div",
               {
-                className: v["tedi-dropdown__scroll"],
+                className: h["tedi-dropdown__scroll"],
                 role: "group",
                 tabIndex: 0,
                 style: { maxHeight: typeof a == "number" ? `${a}px` : a },
-                children: g
+                children: v
               }
-            ) : g
+            ) : v
           }
         )
       }
     ) })
   ] });
 };
-c.Trigger = re;
-c.Content = Z;
-c.Item = oe;
-c.Separator = ne;
+m.Trigger = se;
+m.Content = te;
+m.Item = re;
+m.Separator = ie;
 export {
-  c as Dropdown
+  m as Dropdown
 };