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

package/src/tedi/components/layout/sidenav/components/sidenav-item/sidenav-item.es.js

@@ -1,145 +1,142 @@
-import { jsx as i, jsxs as n, Fragment as D } from "react/jsx-runtime";
-import K, { useState as E, createElement as Q } from "react";
+import { jsx as s, jsxs as n, Fragment as D } from "react/jsx-runtime";
+import { useState as E, createElement as K } from "react";
 import d from "../../../../../../../external/classnames/index.es.js";
 import { Icon as M } from "../../../../base/icon/icon.es.js";
 import { Collapse as O } from "../../../../content/collapse/collapse.es.js";
-import { Link as w } from "../../../../navigation/link/link.es.js";
+import { Link as k } from "../../../../navigation/link/link.es.js";
 import e from "../../sidenav.module.scss.es.js";
-import { SideNavDropdown as U } from "../sidenav-dropdown/sidenav-dropdown.es.js";
-import { useLabels as V } from "../../../../../providers/label-provider/use-labels.es.js";
-import { Tooltip as g } from "../../../../overlays/tooltip/tooltip.es.js";
-const X = (B) => {
+import { SideNavDropdown as Q } from "../sidenav-dropdown/sidenav-dropdown.es.js";
+import { useLabels as U } from "../../../../../providers/label-provider/use-labels.es.js";
+import { useSafeId as V } from "../../../../../helpers/hooks/use-safe-id.es.js";
+import { Tooltip as u } from "../../../../overlays/tooltip/tooltip.es.js";
+const X = (R) => {
   const {
     icon: a,
     children: t,
-    isActive: N,
-    onClick: f,
-    subItems: T,
-    subItemGroups: R,
+    isActive: f,
+    onClick: N,
+    subItems: w,
+    subItemGroups: A,
     as: b,
     onItemClick: h,
-    className: j,
-    level: r = 1,
-    isCollapsed: m = !1,
-    isDefaultOpen: z = !1,
-    sideNavItemSize: H = "default",
-    ..._
-  } = B, { getLabel: x } = V(), [o, $] = E(z ?? !1), [S, A] = E(!1), I = K.useId(), p = R ?? (T ? [{ subItems: T }] : null), l = !!p, F = r > 1 && l, G = d(
+    className: B,
+    level: o = 1,
+    isCollapsed: c = !1,
+    isDefaultOpen: j = !1,
+    sideNavItemSize: z = "default",
+    ...m
+  } = R, { getLabel: S } = U(), [_, H] = E(j ?? !1), [T, $] = E(!1), x = V("sidenav-collapse"), p = A ?? (w ? [{ subItems: w }] : null), l = !!p, F = o > 1 && l, G = d(
     e["tedi-sidenav__item"],
-    e[`tedi-sidenav__item--${H}`],
+    e[`tedi-sidenav__item--${z}`],
     {
-      [e[`tedi-sidenav__item--level-${r}`]]: r > 1,
-      [e["tedi-sidenav__item--current"]]: N,
+      [e[`tedi-sidenav__item--level-${o}`]]: o > 1,
+      [e["tedi-sidenav__item--current"]]: f,
       [e["tedi-sidenav__item--has-children"]]: l,
       [e["tedi-sidenav__item--with-tree"]]: F
     },
-    j
-  ), v = (s) => {
-    const c = {
+    B
+  ), v = (i) => {
+    const r = {
       color: "white",
       className: d(e["tedi-sidenav__icon"])
-    }, u = typeof s == "string" ? { ...c, name: s } : {
-      ...c,
-      ...s,
-      className: d(c.className, s == null ? void 0 : s.className)
+    }, g = typeof i == "string" ? { ...r, name: i } : {
+      ...r,
+      ...i,
+      className: d(r.className, i == null ? void 0 : i.className)
     };
-    return /* @__PURE__ */ i(M, { ...u });
-  }, W = (s) => {
-    f == null || f(s), l || h == null || h();
-  }, L = (s) => {
-    $(s);
-  }, q = l && (_.href || _.to), C = {
-    ..._,
+    return /* @__PURE__ */ s(M, { ...g });
+  }, W = (i) => {
+    N == null || N(i), l || h == null || h();
+  }, L = (i) => {
+    H(i);
+  }, q = l && (m.href || m.to), I = {
+    ...m,
     as: b,
     onClick: W,
     className: d(e["tedi-sidenav__link"], q && e["tedi-sidenav__link--has-children-link"]),
     noStyle: !0,
-    role: "menuitem",
-    "aria-current": N ? "page" : void 0,
-    "aria-label": m && typeof t == "string" ? t : void 0,
-    ...l ? {
-      "aria-haspopup": "true",
-      "aria-expanded": o,
-      "aria-controls": I
-    } : {}
-  }, k = () => !m && (p == null ? void 0 : p.map((s, y) => {
-    var c;
+    "aria-current": f ? "page" : void 0,
+    "aria-label": c && typeof t == "string" ? t : void 0
+  }, C = () => !c && (p == null ? void 0 : p.map((i, y) => {
+    var r;
     return /* @__PURE__ */ n("div", { children: [
-      (s == null ? void 0 : s.subHeading) && /* @__PURE__ */ i("div", { className: e["tedi-sidenav__subheading"], children: s.subHeading }),
-      /* @__PURE__ */ i("ul", { className: e["tedi-sidenav__list"], role: "menu", children: (c = s.subItems) == null ? void 0 : c.map((u, J) => /* @__PURE__ */ Q(
+      (i == null ? void 0 : i.subHeading) && /* @__PURE__ */ s("div", { className: e["tedi-sidenav__subheading"], children: i.subHeading }),
+      /* @__PURE__ */ s("ul", { className: e["tedi-sidenav__list"], children: (r = i.subItems) == null ? void 0 : r.map((g, J) => /* @__PURE__ */ K(
         X,
         {
           as: b,
-          ...u,
+          ...g,
           key: J,
-          level: r + 1,
+          level: o + 1,
           onItemClick: h,
-          isCollapsed: m,
-          className: d(e["tedi-sidenav__sub-item"], u.className)
+          isCollapsed: c,
+          className: d(e["tedi-sidenav__sub-item"], g.className)
         }
       )) })
     ] }, y);
-  })), P = /* @__PURE__ */ i("li", { "data-name": "sidenav-item", className: G, children: l && m ? /* @__PURE__ */ i(
-    U,
+  })), P = /* @__PURE__ */ s("li", { "data-name": "sidenav-item", className: G, children: l && c ? /* @__PURE__ */ s(
+    Q,
     {
-      trigger: /* @__PURE__ */ i(g.Trigger, { children: /* @__PURE__ */ n(
+      trigger: /* @__PURE__ */ s(u.Trigger, { children: /* @__PURE__ */ n(
         "span",
         {
-          className: d(e["tedi-sidenav__link"], S && e["tedi-sidenav__link--active"]),
+          className: d(e["tedi-sidenav__link"], T && e["tedi-sidenav__link--active"]),
           children: [
             a && v(a),
-            /* @__PURE__ */ i(
+            /* @__PURE__ */ s(
               M,
               {
-                name: S ? "chevron_right" : "expand_more",
+                name: T ? "chevron_right" : "expand_more",
                 color: "white",
                 className: e["tedi-sidenav__toggle-icon"],
                 size: 18
               }
             ),
-            /* @__PURE__ */ i("span", { className: e["tedi-sidenav__title"], children: t })
+            /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: t })
           ]
         }
       ) }),
       as: b,
       groups: p,
-      onOpenChange: A
+      onOpenChange: $
     }
-  ) : l && r === 1 ? _.href || _.to ? /* @__PURE__ */ n(D, { children: [
-    /* @__PURE__ */ n(w, { ...C, children: [
+  ) : l && o === 1 ? m.href || m.to ? /* @__PURE__ */ n(D, { children: [
+    /* @__PURE__ */ n(k, { ...I, children: [
       a && v(a),
-      /* @__PURE__ */ i("span", { className: e["tedi-sidenav__title"], children: t })
+      /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: t })
     ] }),
-    /* @__PURE__ */ i("div", { className: e["tedi-sidenav__link-collapse-wrapper"], children: /* @__PURE__ */ i(
+    /* @__PURE__ */ s("div", { className: e["tedi-sidenav__link-collapse-wrapper"], children: /* @__PURE__ */ s(
       O,
       {
-        id: I,
+        id: x,
         hideCollapseText: !0,
         inverted: !0,
-        open: o,
+        contentAsRegion: !1,
+        open: _,
         onToggle: L,
-        toggleLabel: x("sidenav.toggleSubmenuChildren", {
-          isCollapsedInternal: o,
+        toggleLabel: S("sidenav.toggleSubmenuChildren", {
+          isCollapsedInternal: _,
           children: t
         }),
         className: e["tedi-sidenav__collapse"],
         titleRowProps: { element: "span" },
-        children: k()
+        children: C()
       }
     ) })
-  ] }) : /* @__PURE__ */ i(
+  ] }) : /* @__PURE__ */ s(
     O,
     {
-      id: I,
+      id: x,
       hideCollapseText: !0,
       inverted: !0,
       fullRowToggle: !0,
-      open: o,
+      contentAsRegion: !1,
+      open: _,
       onToggle: L,
       className: e["tedi-sidenav__collapse"],
       titleRowProps: { element: "span" },
-      toggleLabel: x("sidenav.toggleSubmenuChildren", {
-        isCollapsedInternal: o,
+      toggleLabel: S("sidenav.toggleSubmenuChildren", {
+        isCollapsedInternal: _,
         children: t
       }),
       title: /* @__PURE__ */ n(
@@ -147,30 +144,30 @@ const X = (B) => {
         {
           className: d(
             e["tedi-sidenav__link"],
-            o && e["tedi-sidenav__link--active"]
+            _ && e["tedi-sidenav__link--active"]
           ),
-          "aria-current": N ? "page" : void 0,
+          "aria-current": f ? "page" : void 0,
           children: [
             a && v(a),
-            /* @__PURE__ */ i("span", { className: e["tedi-sidenav__title"], children: t })
+            /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: t })
           ]
         }
       ),
-      children: k()
+      children: C()
     }
   ) : l ? /* @__PURE__ */ n(D, { children: [
-    /* @__PURE__ */ n(w, { ...C, children: [
+    /* @__PURE__ */ n(k, { ...I, children: [
       a && v(a),
-      /* @__PURE__ */ i("span", { className: e["tedi-sidenav__title"], children: t }),
-      /* @__PURE__ */ i("i", { className: e["tedi-sidenav__bullet"] })
+      /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: t }),
+      /* @__PURE__ */ s("i", { className: e["tedi-sidenav__bullet"] })
     ] }),
-    k()
-  ] }) : /* @__PURE__ */ i(g.Trigger, { children: /* @__PURE__ */ n(w, { ...C, children: [
+    C()
+  ] }) : /* @__PURE__ */ s(u.Trigger, { children: /* @__PURE__ */ n(k, { ...I, children: [
     a && v(a),
-    /* @__PURE__ */ i("span", { className: e["tedi-sidenav__title"], children: t })
+    /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: t })
   ] }) }) });
-  return r === 1 && m ? /* @__PURE__ */ n(g, { placement: "right", focusManager: void 0, children: [
-    /* @__PURE__ */ i(g.Content, { maxWidth: "medium", children: t }),
+  return o === 1 && c ? /* @__PURE__ */ n(u, { placement: "right", focusManager: void 0, children: [
+    /* @__PURE__ */ s(u.Content, { maxWidth: "medium", children: t }),
     P
   ] }) : P;
 };

package/src/tedi/components/layout/sidenav/sidenav.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),n=require("react"),A=require("../../../../../external/classnames/index.cjs.js"),L=require("../../misc/print/print.cjs.js"),O=require("../mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.cjs.js"),S=require("../mobile-nav/mobile-nav.cjs.js"),V=require("./components/sidenav-dropdown/sidenav-dropdown.cjs.js"),q=require("./components/sidenav-item/sidenav-item.cjs.js"),l=require("./sidenav.module.scss.cjs.js"),C=require("../../../helpers/hooks/use-breakpoint.cjs.js"),F=o=>{const{navItems:u,ariaLabel:r,linkAs:v,showDividers:I=!0,className:m,mobileBreakpoint:h="tablet",showMobileOverlay:j=!0,isMobileOpen:p,isCollapsed:w=!1,onMenuToggle:d,onCollapseToggle:c,sideNavItemSize:k="default",...b}=o,x=e=>({mobile:"md",tablet:"lg"})[e],B=C.default(),i=C.isBreakpointBelow(B,x(h)),t=p!==void 0,[y,f]=n.useState(!i),N=t?p:y,[D,T]=n.useState(w),a=i?!1:D,E="isCollapsed"in o;n.useEffect(()=>{t||f(!i)},[i,t]);const P=e=>{T(e),c==null||c(e)},_=()=>{P(!a)},g=e=>{t||f(e),d==null||d(e)},R=()=>{g(!N)},z=A.default(l.default["tedi-sidenav"],m,{[l.default["tedi-sidenav--has-dividers"]]:I,[l.default["tedi-sidenav--collapsed"]]:a});return i?s.jsx(S.MobileNav,{navItems:u,ariaLabel:r,linkAs:v,isOpen:N,onClose:()=>g(!1),showOverlay:j,className:m,...b}):s.jsx(L.Print,{visibility:"hide",children:s.jsxs("nav",{id:o.id,"data-name":"sidenav",...b,className:z,"aria-label":r,children:[E&&s.jsx(O.MobileNavToggle,{menuOpen:!a,toggleMenu:_,variant:"collapse"}),s.jsx("ul",{className:l.default["tedi-sidenav__list"],role:"menubar","aria-label":r,children:u.map((e,M)=>n.createElement(q.SideNavItem,{as:v,...e,key:M,onItemClick:R,isCollapsed:a,sideNavItemSize:k}))})]})})},G=Object.assign(F,{Toggle:O.MobileNavToggle,Item:q.SideNavItem,Dropdown:V.SideNavDropdown,Mobile:S.MobileNav});exports.SideNav=G;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("react"),A=require("../../../../../external/classnames/index.cjs.js"),L=require("../../misc/print/print.cjs.js"),O=require("../mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.cjs.js"),S=require("../mobile-nav/mobile-nav.cjs.js"),V=require("./components/sidenav-dropdown/sidenav-dropdown.cjs.js"),q=require("./components/sidenav-item/sidenav-item.cjs.js"),o=require("./sidenav.module.scss.cjs.js"),C=require("../../../helpers/hooks/use-breakpoint.cjs.js"),F=l=>{const{navItems:c,ariaLabel:u,linkAs:v,showDividers:I=!0,className:p,mobileBreakpoint:h="tablet",showMobileOverlay:j=!0,isMobileOpen:m,isCollapsed:w=!1,onMenuToggle:r,onCollapseToggle:d,sideNavItemSize:k="default",...b}=l,x=e=>({mobile:"md",tablet:"lg"})[e],B=C.default(),s=C.isBreakpointBelow(B,x(h)),i=m!==void 0,[y,f]=n.useState(!s),N=i?m:y,[D,T]=n.useState(w),a=s?!1:D,E="isCollapsed"in l;n.useEffect(()=>{i||f(!s)},[s,i]);const P=e=>{T(e),d==null||d(e)},_=()=>{P(!a)},g=e=>{i||f(e),r==null||r(e)},R=()=>{g(!N)},z=A.default(o.default["tedi-sidenav"],p,{[o.default["tedi-sidenav--has-dividers"]]:I,[o.default["tedi-sidenav--collapsed"]]:a});return s?t.jsx(S.MobileNav,{navItems:c,ariaLabel:u,linkAs:v,isOpen:N,onClose:()=>g(!1),showOverlay:j,className:p,...b}):t.jsx(L.Print,{visibility:"hide",children:t.jsxs("nav",{id:l.id,"data-name":"sidenav",...b,className:z,"aria-label":u,children:[E&&t.jsx(O.MobileNavToggle,{menuOpen:!a,toggleMenu:_,variant:"collapse"}),t.jsx("ul",{className:o.default["tedi-sidenav__list"],children:c.map((e,M)=>n.createElement(q.SideNavItem,{as:v,...e,key:M,onItemClick:R,isCollapsed:a,sideNavItemSize:k}))})]})})},G=Object.assign(F,{Toggle:O.MobileNavToggle,Item:q.SideNavItem,Dropdown:V.SideNavDropdown,Mobile:S.MobileNav});exports.SideNav=G;

package/src/tedi/components/layout/sidenav/sidenav.es.js

@@ -8,10 +8,10 @@ import { SideNavDropdown as H } from "./components/sidenav-dropdown/sidenav-drop
 import { SideNavItem as h } from "./components/sidenav-item/sidenav-item.es.js";
 import a from "./sidenav.module.scss.es.js";
 import J, { isBreakpointBelow as K } from "../../../helpers/hooks/use-breakpoint.es.js";
-const Q = (l) => {
+const Q = (n) => {
   const {
-    navItems: d,
-    ariaLabel: n,
+    navItems: m,
+    ariaLabel: d,
     linkAs: p,
     showDividers: k = !0,
     className: c,
@@ -19,34 +19,34 @@ const Q = (l) => {
     showMobileOverlay: I = !0,
     isMobileOpen: v,
     isCollapsed: B = !1,
-    onMenuToggle: r,
-    onCollapseToggle: m,
+    onMenuToggle: l,
+    onCollapseToggle: r,
     sideNavItemSize: S = "default",
     ...f
-  } = l, y = (e) => ({
+  } = n, y = (e) => ({
     mobile: "md",
     tablet: "lg"
-  })[e], j = J(), i = K(j, y(w)), s = v !== void 0, [x, b] = M(!i), u = s ? v : x, [D, E] = M(B), t = i ? !1 : D, P = "isCollapsed" in l;
+  })[e], j = J(), s = K(j, y(w)), i = v !== void 0, [x, b] = M(!s), u = i ? v : x, [D, E] = M(B), t = s ? !1 : D, P = "isCollapsed" in n;
   V(() => {
-    s || b(!i);
-  }, [i, s]);
+    i || b(!s);
+  }, [s, i]);
   const _ = (e) => {
-    E(e), m == null || m(e);
+    E(e), r == null || r(e);
   }, z = () => {
     _(!t);
   }, C = (e) => {
-    s || b(e), r == null || r(e);
+    i || b(e), l == null || l(e);
   }, A = () => {
     C(!u);
   }, L = F(a["tedi-sidenav"], c, {
     [a["tedi-sidenav--has-dividers"]]: k,
     [a["tedi-sidenav--collapsed"]]: t
   });
-  return i ? /* @__PURE__ */ o(
+  return s ? /* @__PURE__ */ o(
     g,
     {
-      navItems: d,
-      ariaLabel: n,
+      navItems: m,
+      ariaLabel: d,
       linkAs: p,
       isOpen: u,
       onClose: () => C(!1),
@@ -54,9 +54,9 @@ const Q = (l) => {
       className: c,
       ...f
     }
-  ) : /* @__PURE__ */ o(G, { visibility: "hide", children: /* @__PURE__ */ T("nav", { id: l.id, "data-name": "sidenav", ...f, className: L, "aria-label": n, children: [
+  ) : /* @__PURE__ */ o(G, { visibility: "hide", children: /* @__PURE__ */ T("nav", { id: n.id, "data-name": "sidenav", ...f, className: L, "aria-label": d, children: [
     P && /* @__PURE__ */ o(O, { menuOpen: !t, toggleMenu: z, variant: "collapse" }),
-    /* @__PURE__ */ o("ul", { className: a["tedi-sidenav__list"], role: "menubar", "aria-label": n, children: d.map((e, N) => /* @__PURE__ */ q(
+    /* @__PURE__ */ o("ul", { className: a["tedi-sidenav__list"], children: m.map((e, N) => /* @__PURE__ */ q(
       h,
       {
         as: p,

package/src/tedi/components/layout/top-nav/components/top-nav-item/top-nav-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("../../../../../../../external/classnames/index.cjs.js"),w=require("react"),f=require("../../../../base/icon/icon.cjs.js"),e=require("../../top-nav.module.scss.cjs.js"),v=w.forwardRef((_,b)=>{const{children:h,href:l,icon:n,isActive:s=!1,hasSubmenu:u=!1,disabled:i=!1,onClick:d,as:N,className:x,submenu:I,renderSubmenuInline:j=!1,isSubmenuOpen:g,panelId:r,...y}=_,c=!l&&u,S=N??(c?"button":"a"),o=g??s,p=j&&o&&u,T=m=>{if(i){m.preventDefault();return}d==null||d(m)},k=a.default(e.default["tedi-top-nav__link"],{[e.default["tedi-top-nav__link--active"]]:s||o},x),q={...y,ref:b,className:k,onClick:T,...c?{type:"button",disabled:i,"aria-haspopup":!0,"aria-expanded":o,"aria-controls":r}:{href:i?void 0:l,"aria-current":s?"page":void 0,"aria-disabled":i||void 0}};return t.jsxs("li",{className:a.default(e.default["tedi-top-nav__item"],{[e.default["tedi-top-nav__item--has-inline-submenu"]]:p}),children:[t.jsxs(S,{...q,children:[n&&t.jsx(f.Icon,{className:e.default["tedi-top-nav__icon"],...typeof n=="string"?{name:n}:n,size:typeof n=="string"?18:n.size??18,color:"inherit"}),h,u&&t.jsx(f.Icon,{className:a.default(e.default["tedi-top-nav__icon"],e.default["tedi-top-nav__chevron"],{[e.default["tedi-top-nav__chevron--open"]]:o}),name:"keyboard_arrow_down",size:18,color:"inherit"})]}),p&&t.jsx("div",{id:r,className:a.default(e.default["tedi-top-nav__submenu"],e.default["tedi-top-nav__submenu--inline"]),"data-name":"top-nav-submenu",children:t.jsx("div",{className:a.default(e.default["tedi-top-nav__submenu-inner"],e.default["tedi-top-nav__submenu-inner--inline"]),children:I})})]})});v.displayName="TopNav.Item";const C=v;exports.TopNavItem=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("../../../../../../../external/classnames/index.cjs.js"),w=require("react"),f=require("../../../../base/icon/icon.cjs.js"),e=require("../../top-nav.module.scss.cjs.js"),v=w.forwardRef((_,b)=>{const{children:h,href:u,icon:n,isActive:s=!1,hasSubmenu:d=!1,disabled:i=!1,onClick:l,as:N,className:x,submenu:I,renderSubmenuInline:j=!1,isSubmenuOpen:g,panelId:r,...y}=_,c=!u&&d,S=N??(c?"button":"a"),o=g??s,m=j&&o&&d,T=p=>{if(i){p.preventDefault();return}l==null||l(p)},k=a.default(e.default["tedi-top-nav__link"],{[e.default["tedi-top-nav__link--active"]]:s||o},x),q={...y,ref:b,className:k,onClick:T,...c?{type:"button",disabled:i,"aria-expanded":o,"aria-controls":r}:{href:i?void 0:u,"aria-current":s?"page":void 0,"aria-disabled":i||void 0}};return t.jsxs("li",{className:a.default(e.default["tedi-top-nav__item"],{[e.default["tedi-top-nav__item--has-inline-submenu"]]:m}),children:[t.jsxs(S,{...q,children:[n&&t.jsx(f.Icon,{className:e.default["tedi-top-nav__icon"],...typeof n=="string"?{name:n}:n,size:typeof n=="string"?18:n.size??18,color:"inherit"}),h,d&&t.jsx(f.Icon,{className:a.default(e.default["tedi-top-nav__icon"],e.default["tedi-top-nav__chevron"],{[e.default["tedi-top-nav__chevron--open"]]:o}),name:"keyboard_arrow_down",size:18,color:"inherit"})]}),m&&t.jsx("div",{id:r,className:a.default(e.default["tedi-top-nav__submenu"],e.default["tedi-top-nav__submenu--inline"]),"data-name":"top-nav-submenu",children:t.jsx("div",{className:a.default(e.default["tedi-top-nav__submenu-inner"],e.default["tedi-top-nav__submenu-inner--inline"]),children:I})})]})});v.displayName="TopNav.Item";const C=v;exports.TopNavItem=C;

package/src/tedi/components/layout/top-nav/components/top-nav-item/top-nav-item.es.js

@@ -7,7 +7,7 @@ const b = P(
   (f, h) => {
     const {
       children: N,
-      href: p,
+      href: l,
       icon: n,
       isActive: s = !1,
       hasSubmenu: r = !1,
@@ -18,9 +18,9 @@ const b = P(
       submenu: g,
       renderSubmenuInline: k = !1,
       isSubmenuOpen: w,
-      panelId: l,
+      panelId: p,
       ...x
-    } = f, c = !p && r, C = I ?? (c ? "button" : "a"), a = w ?? s, d = k && a && r, S = (u) => {
+    } = f, c = !l && r, C = I ?? (c ? "button" : "a"), a = w ?? s, d = k && a && r, S = (u) => {
       if (o) {
         u.preventDefault();
         return;
@@ -40,11 +40,10 @@ const b = P(
       ...c ? {
         type: "button",
         disabled: o,
-        "aria-haspopup": !0,
         "aria-expanded": a,
-        "aria-controls": l
+        "aria-controls": p
       } : {
-        href: o ? void 0 : p,
+        href: o ? void 0 : l,
         "aria-current": s ? "page" : void 0,
         "aria-disabled": o || void 0
       }
@@ -82,7 +81,7 @@ const b = P(
           d && /* @__PURE__ */ i(
             "div",
             {
-              id: l,
+              id: p,
               className: t(e["tedi-top-nav__submenu"], e["tedi-top-nav__submenu--inline"]),
               "data-name": "top-nav-submenu",
               children: /* @__PURE__ */ i("div", { className: t(e["tedi-top-nav__submenu-inner"], e["tedi-top-nav__submenu-inner--inline"]), children: g })

package/src/tedi/components/layout/top-nav/components/top-nav-separator/top-nav-separator.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../../../../../external/classnames/index.cjs.js"),a=require("../../top-nav.module.scss.cjs.js"),r=({className:t})=>e.jsx("li",{role:"separator","aria-orientation":"vertical",className:o.default(a.default["tedi-top-nav__separator"],t),children:e.jsx("span",{className:a.default["tedi-top-nav__separator-line"],"aria-hidden":"true"})});r.displayName="TopNav.Separator";exports.TopNavSeparator=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../../../../../external/classnames/index.cjs.js"),a=require("../../top-nav.module.scss.cjs.js"),t=({className:r})=>e.jsx("li",{className:o.default(a.default["tedi-top-nav__separator"],r),children:e.jsx("span",{role:"separator","aria-orientation":"vertical",className:a.default["tedi-top-nav__separator-line"]})});t.displayName="TopNav.Separator";exports.TopNavSeparator=t;

package/src/tedi/components/layout/top-nav/components/top-nav-separator/top-nav-separator.es.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
-import o from "../../../../../../../external/classnames/index.es.js";
+import e from "../../../../../../../external/classnames/index.es.js";
 import r from "../../top-nav.module.scss.es.js";
-const t = ({ className: e }) => /* @__PURE__ */ a("li", { role: "separator", "aria-orientation": "vertical", className: o(r["tedi-top-nav__separator"], e), children: /* @__PURE__ */ a("span", { className: r["tedi-top-nav__separator-line"], "aria-hidden": "true" }) });
+const t = ({ className: o }) => /* @__PURE__ */ a("li", { className: e(r["tedi-top-nav__separator"], o), children: /* @__PURE__ */ a("span", { role: "separator", "aria-orientation": "vertical", className: r["tedi-top-nav__separator-line"] }) });
 t.displayName = "TopNav.Separator";
 export {
   t as TopNavSeparator

package/src/tedi/components/layout/top-nav/top-nav.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),ne=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),oe=require("../mobile-nav/mobile-nav.cjs.js"),W=require("./components/top-nav-group/top-nav-group.cjs.js"),g=require("./components/top-nav-item/top-nav-item.cjs.js"),G=require("./components/top-nav-separator/top-nav-separator.cjs.js"),R=require("./components/top-nav-subitem/top-nav-subitem.cjs.js"),v=require("./top-nav.module.scss.cjs.js"),se=require("./top-nav-context.cjs.js"),C=require("../../../helpers/hooks/use-breakpoint.cjs.js"),re=n=>{if(!(n===void 0||n==="none"||n===0))return typeof n=="string"&&n!=="xs"&&n in C.BREAKPOINT_WIDTHS?C.BREAKPOINT_WIDTHS[n]:n},L=n=>{const r=[];return t.Children.forEach(n,o=>{if(t.isValidElement(o)){if(o.type===t.Fragment){r.push(...L(o.props.children));return}(o.type===g.TopNavItem||o.type===G.TopNavSeparator)&&r.push(o)}}),r},A=n=>n.type===g.TopNavItem,ie=n=>({children:n.props.children,href:n.props.href,isActive:n.props.isActive,onClick:n.props.onClick}),P=n=>{if(!n)return;const r=[];return t.Children.forEach(n,o=>{if(!t.isValidElement(o))return;if(o.type===t.Fragment){const i=P(o.props.children);i&&r.push(...i);return}if(o.type!==W.TopNavGroup)return;const f=o.props,p=[];t.Children.forEach(f.children,i=>{t.isValidElement(i)&&i.type===R.TopNavSubItem&&p.push(ie(i))}),p.length>0&&r.push({subHeading:f.title,subItems:p})}),r.length>0?r:void 0},l=n=>{const{children:r,ariaLabel:o,mobileBreakpoint:f="md",isMobileOpen:p,onMenuToggle:i,showMobileOverlay:V=!0,className:O,id:D,submenuFit:F="full",maxWidth:H="xxl"}=n,K=C.default(),T=C.isBreakpointBelow(K,f),b=p!==void 0,[$,q]=t.useState(!1),z=b?p:$;t.useEffect(()=>{!b&&!T&&q(!1)},[T,b]);const J=e=>{b||q(e),i==null||i(e)},E=t.useMemo(()=>L(r),[r]),c=t.useMemo(()=>E.filter(A),[E]),k=e=>!e.props.href&&t.Children.count(e.props.submenu)>0,M=t.useMemo(()=>{const e=c.findIndex(s=>k(s)&&s.props.isActive);return e===-1?null:e},[c]),[N,d]=t.useState(M);t.useEffect(()=>{d(M)},[M]);const _=t.useCallback(()=>d(null),[]),Q=t.useMemo(()=>({closeSubmenu:_}),[_]),I=t.useRef(null),h=t.useId();t.useEffect(()=>{if(N===null)return;const e=u=>{I.current&&!I.current.contains(u.target)&&d(null)},s=u=>{var S;if(u.key!=="Escape")return;const m=(S=I.current)==null?void 0:S.querySelector(`[aria-controls="${CSS.escape(h)}"][aria-expanded="true"]`);m==null||m.focus(),d(null)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",s),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",s)}},[N,h]);const w=(e,s)=>k(e)?N===s:!!e.props.isActive,j=t.useMemo(()=>c.find((e,s)=>w(e,s)&&t.Children.count(e.props.submenu)>0),[c,N]),U=t.useMemo(()=>c.map(e=>({children:e.props.children,disabled:e.props.disabled,href:e.props.href,icon:e.props.icon,isActive:e.props.isActive,onClick:e.props.onClick,subItemGroups:P(e.props.submenu)})),[c]);if(T)return a.jsx(oe.MobileNav,{navItems:U,ariaLabel:o,isOpen:z,onClose:()=>J(!1),showOverlay:V,className:O});const B=F==="content",x=re(H);let X=0;return a.jsx(se.TopNavContext.Provider,{value:Q,children:a.jsxs("nav",{ref:I,id:D,className:ne.default(v.default["tedi-top-nav"],O),"aria-label":o,"data-name":"top-nav",children:[a.jsx("div",{className:v.default["tedi-top-nav__bar"],children:a.jsx("ul",{className:v.default["tedi-top-nav__list"],style:x!==void 0?{maxWidth:x}:void 0,children:E.map((e,s)=>{if(A(e)){const u=X++,m=t.Children.count(e.props.submenu)>0,S=k(e),Y=w(e,u),y=e.props.onClick,Z=S?ee=>{y==null||y(ee),d(te=>te===u?null:u)}:y;return t.cloneElement(e,{key:s,hasSubmenu:m,renderSubmenuInline:B,isSubmenuOpen:Y,panelId:h,onClick:Z})}return t.cloneElement(e,{key:s})})})}),!B&&j&&a.jsx("div",{id:h,className:v.default["tedi-top-nav__submenu"],"data-name":"top-nav-submenu",children:a.jsx("div",{className:v.default["tedi-top-nav__submenu-inner"],style:x!==void 0?{maxWidth:x}:void 0,children:j.props.submenu})})]})})};l.displayName="TopNav";l.Item=g.TopNavItem;l.Group=W.TopNavGroup;l.SubItem=R.TopNavSubItem;l.Separator=G.TopNavSeparator;exports.TopNav=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),ne=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),oe=require("../mobile-nav/mobile-nav.cjs.js"),W=require("./components/top-nav-group/top-nav-group.cjs.js"),g=require("./components/top-nav-item/top-nav-item.cjs.js"),G=require("./components/top-nav-separator/top-nav-separator.cjs.js"),R=require("./components/top-nav-subitem/top-nav-subitem.cjs.js"),v=require("./top-nav.module.scss.cjs.js"),se=require("./top-nav-context.cjs.js"),C=require("../../../helpers/hooks/use-breakpoint.cjs.js"),re=require("../../../helpers/hooks/use-safe-id.cjs.js"),ie=n=>{if(!(n===void 0||n==="none"||n===0))return typeof n=="string"&&n!=="xs"&&n in C.BREAKPOINT_WIDTHS?C.BREAKPOINT_WIDTHS[n]:n},L=n=>{const r=[];return t.Children.forEach(n,o=>{if(t.isValidElement(o)){if(o.type===t.Fragment){r.push(...L(o.props.children));return}(o.type===g.TopNavItem||o.type===G.TopNavSeparator)&&r.push(o)}}),r},A=n=>n.type===g.TopNavItem,ue=n=>({children:n.props.children,href:n.props.href,isActive:n.props.isActive,onClick:n.props.onClick}),P=n=>{if(!n)return;const r=[];return t.Children.forEach(n,o=>{if(!t.isValidElement(o))return;if(o.type===t.Fragment){const i=P(o.props.children);i&&r.push(...i);return}if(o.type!==W.TopNavGroup)return;const f=o.props,p=[];t.Children.forEach(f.children,i=>{t.isValidElement(i)&&i.type===R.TopNavSubItem&&p.push(ue(i))}),p.length>0&&r.push({subHeading:f.title,subItems:p})}),r.length>0?r:void 0},l=n=>{const{children:r,ariaLabel:o,mobileBreakpoint:f="md",isMobileOpen:p,onMenuToggle:i,showMobileOverlay:V=!0,className:q,id:D,submenuFit:F="full",maxWidth:H="xxl"}=n,K=C.default(),T=C.isBreakpointBelow(K,f),b=p!==void 0,[$,O]=t.useState(!1),z=b?p:$;t.useEffect(()=>{!b&&!T&&O(!1)},[T,b]);const J=e=>{b||O(e),i==null||i(e)},E=t.useMemo(()=>L(r),[r]),c=t.useMemo(()=>E.filter(A),[E]),k=e=>!e.props.href&&t.Children.count(e.props.submenu)>0,M=t.useMemo(()=>{const e=c.findIndex(s=>k(s)&&s.props.isActive);return e===-1?null:e},[c]),[N,d]=t.useState(M);t.useEffect(()=>{d(M)},[M]);const _=t.useCallback(()=>d(null),[]),Q=t.useMemo(()=>({closeSubmenu:_}),[_]),I=t.useRef(null),h=re.useSafeId("tedi-top-nav-submenu");t.useEffect(()=>{if(N===null)return;const e=u=>{I.current&&!I.current.contains(u.target)&&d(null)},s=u=>{var S;if(u.key!=="Escape")return;const m=(S=I.current)==null?void 0:S.querySelector(`[aria-controls="${CSS.escape(h)}"][aria-expanded="true"]`);m==null||m.focus(),d(null)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",s),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",s)}},[N,h]);const w=(e,s)=>k(e)?N===s:!!e.props.isActive,j=t.useMemo(()=>c.find((e,s)=>w(e,s)&&t.Children.count(e.props.submenu)>0),[c,N]),U=t.useMemo(()=>c.map(e=>({children:e.props.children,disabled:e.props.disabled,href:e.props.href,icon:e.props.icon,isActive:e.props.isActive,onClick:e.props.onClick,subItemGroups:P(e.props.submenu)})),[c]);if(T)return a.jsx(oe.MobileNav,{navItems:U,ariaLabel:o,isOpen:z,onClose:()=>J(!1),showOverlay:V,className:q});const B=F==="content",x=ie(H);let X=0;return a.jsx(se.TopNavContext.Provider,{value:Q,children:a.jsxs("nav",{ref:I,id:D,className:ne.default(v.default["tedi-top-nav"],q),"aria-label":o,"data-name":"top-nav",children:[a.jsx("div",{className:v.default["tedi-top-nav__bar"],children:a.jsx("ul",{className:v.default["tedi-top-nav__list"],style:x!==void 0?{maxWidth:x}:void 0,children:E.map((e,s)=>{if(A(e)){const u=X++,m=t.Children.count(e.props.submenu)>0,S=k(e),Y=w(e,u),y=e.props.onClick,Z=S?ee=>{y==null||y(ee),d(te=>te===u?null:u)}:y;return t.cloneElement(e,{key:s,hasSubmenu:m,renderSubmenuInline:B,isSubmenuOpen:Y,panelId:h,onClick:Z})}return t.cloneElement(e,{key:s})})})}),!B&&j&&a.jsx("div",{id:h,className:v.default["tedi-top-nav__submenu"],"data-name":"top-nav-submenu",children:a.jsx("div",{className:v.default["tedi-top-nav__submenu-inner"],style:x!==void 0?{maxWidth:x}:void 0,children:j.props.submenu})})]})})};l.displayName="TopNav";l.Item=g.TopNavItem;l.Group=W.TopNavGroup;l.SubItem=R.TopNavSubItem;l.Separator=G.TopNavSeparator;exports.TopNav=l;

package/src/tedi/components/layout/top-nav/top-nav.es.js

@@ -1,14 +1,15 @@
 import { jsx as u, jsxs as ae } from "react/jsx-runtime";
 import ue from "../../../../../external/classnames/index.es.js";
-import R, { useState as P, useEffect as g, useMemo as c, useCallback as ce, useRef as le, useId as me, Children as l, isValidElement as w, Fragment as D } from "react";
-import { MobileNav as de } from "../mobile-nav/mobile-nav.es.js";
+import R, { useState as P, useEffect as g, useMemo as c, useCallback as ce, useRef as le, Children as l, isValidElement as w, Fragment as D } from "react";
+import { MobileNav as me } from "../mobile-nav/mobile-nav.es.js";
 import { TopNavGroup as F } from "./components/top-nav-group/top-nav-group.es.js";
 import { TopNavItem as M } from "./components/top-nav-item/top-nav-item.es.js";
 import { TopNavSeparator as H } from "./components/top-nav-separator/top-nav-separator.es.js";
 import { TopNavSubItem as K } from "./components/top-nav-subitem/top-nav-subitem.es.js";
 import f from "./top-nav.module.scss.es.js";
-import { TopNavContext as fe } from "./top-nav-context.es.js";
-import ve, { isBreakpointBelow as be, BREAKPOINT_WIDTHS as V } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { TopNavContext as de } from "./top-nav-context.es.js";
+import fe, { isBreakpointBelow as ve, BREAKPOINT_WIDTHS as V } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { useSafeId as be } from "../../../helpers/hooks/use-safe-id.es.js";
 const he = (n) => {
   if (!(n === void 0 || n === "none" || n === 0))
     return typeof n == "string" && n !== "xs" && n in V ? V[n] : n;
@@ -56,7 +57,7 @@ const he = (n) => {
     id: J,
     submenuFit: Q = "full",
     maxWidth: U = "xxl"
-  } = n, X = ve(), C = be(X, b), h = p !== void 0, [Y, B] = P(!1), Z = h ? p : Y;
+  } = n, X = fe(), C = ve(X, b), h = p !== void 0, [Y, B] = P(!1), Z = h ? p : Y;
   g(() => {
     !h && !C && B(!1);
   }, [C, h]);
@@ -69,7 +70,7 @@ const he = (n) => {
   g(() => {
     m(_);
   }, [_]);
-  const A = ce(() => m(null), []), ne = c(() => ({ closeSubmenu: A }), [A]), x = le(null), y = me();
+  const A = ce(() => m(null), []), ne = c(() => ({ closeSubmenu: A }), [A]), x = le(null), y = be("tedi-top-nav-submenu");
   g(() => {
     if (I === null) return;
     const e = (i) => {
@@ -104,7 +105,7 @@ const he = (n) => {
   );
   if (C)
     return /* @__PURE__ */ u(
-      de,
+      me,
       {
         navItems: oe,
         ariaLabel: o,
@@ -116,7 +117,7 @@ const he = (n) => {
     );
   const G = Q === "content", N = he(U);
   let te = 0;
-  return /* @__PURE__ */ u(fe.Provider, { value: ne, children: /* @__PURE__ */ ae(
+  return /* @__PURE__ */ u(de.Provider, { value: ne, children: /* @__PURE__ */ ae(
     "nav",
     {
       ref: x,

package/src/tedi/components/navigation/card-stepper/card-stepper-step.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=p=>null;e.displayName="CardStepperStep";exports.CardStepperStep=e;

package/src/tedi/components/navigation/card-stepper/card-stepper-step.d.ts

@@ -0,0 +1,86 @@
+import { default as React } from 'react';
+import { VerticalStepperItemState } from '../vertical-stepper/vertical-stepper-item';
+import { VerticalStepperSubItemState } from '../vertical-stepper/vertical-stepper-sub-item';
+export interface CardStepperSubStepProps {
+    /**
+     * Sub-step label.
+     */
+    title: React.ReactNode;
+    /**
+     * Visual / semantic state shown in the step-list modal.
+     * @default default
+     */
+    state?: VerticalStepperSubItemState;
+    /**
+     * Marks the sub-step as the active one.
+     */
+    current?: boolean;
+    /**
+     * Stable key for the sub-step. Falls back to the array index.
+     */
+    id?: string;
+    /**
+     * Renders the sub-step as disabled (non-interactive) in the modal.
+     */
+    disabled?: boolean;
+    /**
+     * Click handler — makes the sub-step navigable in the modal and closes the list when picked.
+     */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+    /**
+     * Navigates when set; renders the sub-step as a link in the modal.
+     */
+    href?: string;
+}
+export interface CardStepperStepProps {
+    /**
+     * Step title.
+     */
+    title: React.ReactNode;
+    /**
+     * Optional secondary line shown under the title (on the card for the active
+     * step, and always in the step-list modal).
+     */
+    description?: React.ReactNode;
+    /**
+     * Visual / semantic state used in the progress bar and the step-list modal.
+     * @default default
+     */
+    state?: VerticalStepperItemState;
+    /**
+     * Stable key for the step. Falls back to the array index.
+     */
+    id?: string;
+    /**
+     * Excludes the step from navigation — not reachable via the arrows or the step
+     * list, and rendered as disabled in the modal.
+     */
+    disabled?: boolean;
+    /**
+     * Custom content rendered at the bottom of the card when this step is active —
+     * e.g. an inline `Alert`, a "read more" link or an action button. Only shown for
+     * the active step. Matches the Figma "with bottom slot" variant.
+     */
+    bottomSlot?: React.ReactNode;
+    /**
+     * Sub-steps shown under this step in the step-list modal. When present the step
+     * becomes a collapsible parent — the title navigates and a chevron expands the
+     * sub-step list.
+     */
+    subSteps?: CardStepperSubStepProps[];
+    /**
+     * Whether the sub-step list starts expanded in the modal. Defaults to expanded
+     * for the active step. Only relevant with `subSteps`.
+     */
+    defaultExpanded?: boolean;
+}
+/**
+ * Declarative step config for `CardStepper`. It renders nothing on its own — the
+ * parent reads its props to build the active card, the progress bar and the
+ * step-list modal. Use it as `CardStepper.Step`.
+ */
+export declare const CardStepperStep: {
+    (_props: CardStepperStepProps): null;
+    displayName: string;
+};
+export default CardStepperStep;

package/src/tedi/components/navigation/card-stepper/card-stepper-step.es.js

@@ -0,0 +1,5 @@
+const p = (e) => null;
+p.displayName = "CardStepperStep";
+export {
+  p as CardStepperStep
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),ce=require("../../base/icon/icon.cjs.js"),R=require("../../base/typography/text/text.cjs.js"),w=require("../../buttons/button/button.cjs.js"),le=require("../../overlays/sheet/sheet.cjs.js"),C=require("../vertical-stepper/vertical-stepper.cjs.js"),r=require("./card-stepper.module.scss.cjs.js"),V=require("./card-stepper-step.cjs.js"),pe=require("../../../providers/label-provider/use-labels.cjs.js"),D=m.forwardRef((F,z)=>{const{children:J,steps:G,activeStep:y,defaultActiveStep:K=0,onStepChange:j,showStepNumber:Q=!0,showStatusIcon:U=!1,descriptionPosition:g="bottom",counterPosition:S="inline",showProgress:q=!0,showNavigation:_=!1,showStepList:I=!0,allowJump:N=!0,headingElement:W="h4",labels:a,"aria-label":X,className:Y}=F,{getLabel:p}=pe.useLabels(),u={previous:(a==null?void 0:a.previous)??p("stepper.previous"),next:(a==null?void 0:a.next)??p("stepper.next"),openSteps:(a==null?void 0:a.openSteps)??p("stepper.open-steps"),modalHeading:(a==null?void 0:a.modalHeading)??p("stepper.steps"),status:(a==null?void 0:a.status)??((e,s)=>p("stepper.status",e,s))},k=m.Children.toArray(J).filter(e=>m.isValidElement(e)&&e.type===V.CardStepperStep).map(e=>e.props),n=k.length>0?k:G??[],T=y!==void 0,[Z,$]=m.useState(K),f=n.length,o=Math.min(Math.max(T?y:Z,0),Math.max(f-1,0)),[L,v]=m.useState(!1),ee=m.useId(),d=n[o],M=Q&&!_,te=_||M,b=e=>{var s;e<0||e>=f||e===o||(s=n[e])!=null&&s.disabled||(T||$(e),j==null||j(e))},re=e=>{const s=n[e];return!s||s.disabled?!1:N===!0?!0:N===!1?!1:N==="completed"?s.state==="completed":s.state==="completed"||e===o+1},O=(e,s)=>{for(let c=e;c>=0&&c<f;c+=s)if(!n[c].disabled)return c;return-1},P=O(o-1,-1),A=O(o+1,1);if(!d)return t.jsx(t.Fragment,{});const se=q&&!d.bottomSlot,B=t.jsxs("span",{className:r.default["tedi-card-stepper__counter"],children:[t.jsxs("span",{"aria-hidden":"true",children:[o+1," / ",f]}),t.jsx("span",{className:"visually-hidden",children:u.status(o+1,f)})]}),x=d.description?t.jsx(R.Text,{modifiers:"small",color:"tertiary",className:r.default["tedi-card-stepper__description"],children:d.description}):null,E=g==="top"&&x,ae=S==="top"||E,de=g==="bottom"&&n.some(e=>e.description);return t.jsxs("div",{ref:z,role:"group","aria-label":X,className:h.default(r.default["tedi-card-stepper"],{[r.default["tedi-card-stepper--progress-flush"]]:se,[r.default["tedi-card-stepper--reserve-description"]]:de},Y),children:[t.jsxs("div",{className:h.default(r.default["tedi-card-stepper__main"],{[r.default["tedi-card-stepper__main--no-lead"]]:!te}),children:[_&&t.jsx(w.Button,{visualType:"neutral",icon:"arrow_back",className:h.default(r.default["tedi-card-stepper__lead"],r.default["tedi-card-stepper__nav-prev"]),disabled:P===-1,onClick:()=>b(P),children:u.previous}),M&&t.jsx("span",{className:h.default(r.default["tedi-card-stepper__indicator"],r.default["tedi-card-stepper__lead"]),"aria-hidden":"true",children:o+1}),t.jsxs("div",{className:r.default["tedi-card-stepper__body"],children:[ae&&t.jsxs("div",{className:r.default["tedi-card-stepper__top"],children:[S==="top"&&B,E&&x]}),t.jsxs(R.Text,{element:W,id:ee,modifiers:"h4",className:r.default["tedi-card-stepper__title"],children:[d.title,U&&(d.state==="completed"||d.state==="error")&&t.jsx(ce.Icon,{name:d.state==="completed"?"check":"error",color:d.state==="completed"?"success":"danger",size:18,display:"block",label:p(d.state==="completed"?"stepper.completed":"stepper.error"),className:r.default["tedi-card-stepper__status-icon"]})]}),g==="bottom"&&x&&t.jsx("div",{className:r.default["tedi-card-stepper__description-bottom"],children:x})]}),t.jsxs("div",{className:r.default["tedi-card-stepper__trail"],children:[S==="inline"&&B,I&&t.jsx(w.Button,{visualType:"neutral",icon:"list","aria-haspopup":"dialog","aria-expanded":L,onClick:()=>v(!0),children:u.openSteps}),_&&t.jsx(w.Button,{visualType:"neutral",icon:"arrow_forward",className:r.default["tedi-card-stepper__nav-next"],disabled:A===-1,onClick:()=>b(A),children:u.next})]})]}),q&&t.jsx("ol",{className:r.default["tedi-card-stepper__progress"],"aria-hidden":"true",children:n.map((e,s)=>t.jsx("li",{className:h.default(r.default["tedi-card-stepper__segment"],{[r.default["tedi-card-stepper__segment--done"]]:s<=o})},e.id??s))}),d.bottomSlot&&t.jsx("div",{className:r.default["tedi-card-stepper__bottom-slot"],children:d.bottomSlot}),I&&t.jsx(le.Sheet,{open:L,onToggle:v,title:u.modalHeading,children:t.jsx(C.VerticalStepper,{"aria-label":u.modalHeading,children:n.map((e,s)=>{const c=re(s),l=e.subSteps,ie=!!(l!=null&&l.some(i=>i.current));return t.jsx(C.VerticalStepper.Item,{title:e.title,description:e.description,state:e.disabled?"disabled":e.state,current:s===o&&!ie,onClick:c?()=>{b(s),v(!1)}:void 0,defaultOpen:l?e.defaultExpanded??s===o:void 0,children:l==null?void 0:l.map((i,oe)=>t.jsx(C.VerticalStepper.SubItem,{title:i.title,state:i.disabled?"disabled":i.state,current:i.current,href:i.href,onClick:i.onClick?ne=>{var H;(H=i.onClick)==null||H.call(i,ne),v(!1)}:void 0},i.id??oe))},e.id??s)})})})]})});D.displayName="CardStepper";const ue=Object.assign(D,{Step:V.CardStepperStep});exports.CardStepper=ue;