@tedi-design-system/react 18.0.0-rc.3 → 18.0.0-rc.30

package/src/tedi/components/layout/{sidenav/components/sidenav-mobile/sidenav-mobile.es.js → mobile-nav/mobile-nav.es.js}

@@ -1,13 +1,13 @@
 import { jsxs as r, jsx as i } from "react/jsx-runtime";
-import { FloatingOverlay as q } from "../../../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import l from "../../../../../../../external/classnames/index.es.js";
+import { FloatingOverlay as q } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import l from "../../../../../external/classnames/index.es.js";
 import D, { useState as J, useEffect as K } from "react";
-import { Icon as d } from "../../../../base/icon/icon.es.js";
-import { Button as v } from "../../../../buttons/button/button.es.js";
-import n from "../../sidenav.module.scss.es.js";
-import { SideNavItem as M } from "../sidenav-item/sidenav-item.es.js";
-import { useLabels as Q } from "../../../../../providers/label-provider/use-labels.es.js";
-const ne = ({
+import { Icon as d } from "../../base/icon/icon.es.js";
+import { Button as v } from "../../buttons/button/button.es.js";
+import { SideNavItem as w } from "../sidenav/components/sidenav-item/sidenav-item.es.js";
+import n from "../sidenav/sidenav.module.scss.es.js";
+import { useLabels as Q } from "../../../providers/label-provider/use-labels.es.js";
+const U = ({
   navItems: _,
   ariaLabel: x,
   linkAs: b,
@@ -17,12 +17,12 @@ const ne = ({
   id: R,
   className: B
 }) => {
-  var f, I, C, L, S, y, w;
+  var f, I, C, L, S, y, M;
   const { getLabel: p } = Q(), [s, c] = J([{ items: _ }]);
   K(() => {
     c([{ items: _ }]);
   }, [_]);
-  const t = s[s.length - 1], j = s.length === 1, k = (e) => {
+  const t = s[s.length - 1], j = s.length === 1, N = (e) => {
     var u;
     const a = !!(e.subItems || e.subItemGroups), m = !!(e.href || e.to);
     if (!a) {
@@ -42,8 +42,8 @@ const ne = ({
     c(s.slice(0, -1));
   }, F = () => {
     c([s[0]]);
-  }, T = ((I = (f = t.parent) == null ? void 0 : f.subItems) == null ? void 0 : I.length) ?? ((L = (C = t.parent) == null ? void 0 : C.subItemGroups) == null ? void 0 : L.length), E = s.length > 1 && !(t.renderParentLink && T), N = (e, a) => a === 1 ? !(e.subItems || e.subItemGroups) ? /* @__PURE__ */ i(
-    M,
+  }, T = ((I = (f = t.parent) == null ? void 0 : f.subItems) == null ? void 0 : I.length) ?? ((L = (C = t.parent) == null ? void 0 : C.subItemGroups) == null ? void 0 : L.length), E = s.length > 1 && !(t.renderParentLink && T), k = (e, a) => a === 1 ? !(e.subItems || e.subItemGroups) ? /* @__PURE__ */ i(
+    w,
     {
       ...e,
       as: b,
@@ -51,7 +51,7 @@ const ne = ({
       onItemClick: o,
       className: l(n["tedi-sidenav__item--mobile"], e.className)
     }
-  ) : /* @__PURE__ */ i("li", { className: l(n["tedi-sidenav__item"], n["tedi-sidenav__item--mobile"]), children: /* @__PURE__ */ r("button", { onClick: () => k(e), className: n["tedi-sidenav__link"], children: [
+  ) : /* @__PURE__ */ i("li", { className: l(n["tedi-sidenav__item"], n["tedi-sidenav__item--mobile"]), children: /* @__PURE__ */ r("button", { onClick: () => N(e), className: n["tedi-sidenav__link"], children: [
     e.icon && /* @__PURE__ */ i(
       d,
       {
@@ -65,7 +65,7 @@ const ne = ({
   ] }) }) : H(e, a), H = (e, a) => {
     const m = !!(e.href || e.to), h = !!(e.subItems || e.subItemGroups);
     return m ? /* @__PURE__ */ i(
-      M,
+      w,
       {
         ...e,
         as: b,
@@ -78,7 +78,7 @@ const ne = ({
       v,
       {
         noStyle: !0,
-        onClick: () => h ? k(e) : o(),
+        onClick: () => h ? N(e) : o(),
         className: n["tedi-sidenav__link"],
         children: [
           /* @__PURE__ */ i("span", { className: n["tedi-sidenav__title"], children: e.children }),
@@ -120,10 +120,10 @@ const ne = ({
             }
           )
         ] }) }),
-        E && /* @__PURE__ */ i("div", { className: l(n["tedi-sidenav__subheading"], n["tedi-sidenav__subheading--mobile"]), children: (w = t.parent) == null ? void 0 : w.children }),
+        E && /* @__PURE__ */ i("div", { className: l(n["tedi-sidenav__subheading"], n["tedi-sidenav__subheading--mobile"]), children: (M = t.parent) == null ? void 0 : M.children }),
         /* @__PURE__ */ r("ul", { className: n["tedi-sidenav__list"], role: "menubar", children: [
-          t.renderParentLink && t.parent && /* @__PURE__ */ i("li", { className: n["tedi-sidenav__list-item"], children: /* @__PURE__ */ i("div", { className: l(n["tedi-sidenav__collapse"]), children: N(t.parent, s.length) }) }),
-          !t.renderParentLink && t.items.map((e, a) => /* @__PURE__ */ i(D.Fragment, { children: N(e, s.length) }, e.id || a))
+          t.renderParentLink && t.parent && /* @__PURE__ */ i("li", { className: n["tedi-sidenav__list-item"], children: /* @__PURE__ */ i("div", { className: l(n["tedi-sidenav__collapse"]), children: k(t.parent, s.length) }) }),
+          !t.renderParentLink && t.items.map((e, a) => /* @__PURE__ */ i(D.Fragment, { children: k(e, s.length) }, e.id || a))
         ] })
       ]
     }
@@ -140,7 +140,8 @@ const ne = ({
       children: g
     }
   ) : g : null;
-};
+}, ie = U;
 export {
-  ne as SideNavMobile
+  U as MobileNav,
+  ie as SideNavMobile
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),d=require("../../../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),k=require("../../../../../../../external/classnames/index.cjs.js"),m=require("react"),D=require("../../../../navigation/link/link.cjs.js"),a=require("./sidenav-dropdown.module.scss.cjs.js"),q=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"),F=require("../../../../../providers/label-provider/use-labels.cjs.js"),S=({trigger:b,groups:g,onOpenChange:u,as:x})=>{const{getLabel:_}=F.useLabels(),[r,l]=m.useState(!1),{refs:c,floatingStyles:j,context:f}=d.useFloating({open:r,middleware:[h.offset({mainAxis:8}),h.flip()],whileElementsMounted:q.autoUpdate,placement:"right-start",onOpenChange:e=>{l(e),u==null||u(e)},strategy:"fixed"}),{getReferenceProps:w,getFloatingProps:y}=d.useInteractions([d.useClick(f),d.useDismiss(f)]),p=e=>{var v;const n=e.subItemGroups||e.subItems,t=e.key||e.href||((v=e.children)==null?void 0:v.toString());return s.jsxs("li",{role:"none",className:k.default(a.default["tedi-sidenav-dropdown__item"],n&&a.default["tedi-sidenav-dropdown__item--has-children"]),children:[s.jsxs(D.Link,{...e,role:"menuitem","aria-haspopup":n?"true":void 0,"aria-expanded":n?r:void 0,"aria-controls":n?`${t}-submenu`:void 0,className:a.default["tedi-sidenav-dropdown__link"],"data-active":e.isActive,"aria-current":e.isActive?"page":void 0,noStyle:!0,onClick:i=>{var o;(o=e.onClick)==null||o.call(e,i),l(!1)},as:e.as??x,children:[e.children,n&&s.jsx("span",{className:a.default["tedi-sidenav__bullet"]})]}),n&&s.jsx("ul",{id:`${t}-submenu`,className:a.default["tedi-sidenav-dropdown__list"],role:"menu","aria-label":_("sidenav.submenu"),children:(e.subItemGroups??(e.subItems?[{subItems:e.subItems}]:[])).map((i,o)=>s.jsxs(m.Fragment,{children:[i.subHeading&&s.jsx("div",{className:a.default["tedi-sidenav-dropdown__heading"],role:"presentation",children:i.subHeading}),i.subItems.map(N=>p(N))]},o))})]},t)},I=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),l(n=>!n)),e.key==="Escape"&&(e.preventDefault(),l(!1),c.setReference(null))};return s.jsxs(s.Fragment,{children:[s.jsx("div",{ref:c.setReference,...w(),role:"button",tabIndex:-1,"aria-haspopup":"menu","aria-expanded":r,onKeyDown:I,children:b}),r&&s.jsx(d.FloatingOverlay,{children:s.jsx(d.FloatingPortal,{children:s.jsx(d.FloatingFocusManager,{context:f,modal:!1,children:s.jsx("div",{ref:c.setFloating,style:j,className:a.default["tedi-sidenav-dropdown"],role:"menu",...y(),children:g.map((e,n)=>s.jsxs("div",{className:a.default["tedi-sidenav-dropdown__group"],children:[e.subHeading&&s.jsx("div",{className:a.default["tedi-sidenav-dropdown__heading"],role:"presentation",children:e.subHeading}),s.jsx("ul",{className:a.default["tedi-sidenav-dropdown__list"],role:"menu",children:e.subItems.map(t=>p(t))})]},n))})})})})]})};exports.SideNavDropdown=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),d=require("../../../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),k=require("../../../../../../../external/classnames/index.cjs.js"),m=require("react"),D=require("../../../../navigation/link/link.cjs.js"),a=require("./sidenav-dropdown.module.scss.cjs.js"),q=require("../../../../../providers/label-provider/use-labels.cjs.js"),F=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"),S=({trigger:b,groups:g,onOpenChange:u,as:x})=>{const{getLabel:_}=q.useLabels(),[r,l]=m.useState(!1),{refs:c,floatingStyles:j,context:f}=d.useFloating({open:r,middleware:[h.offset({mainAxis:8}),h.flip()],whileElementsMounted:F.autoUpdate,placement:"right-start",onOpenChange:e=>{l(e),u==null||u(e)},strategy:"fixed"}),{getReferenceProps:w,getFloatingProps:y}=d.useInteractions([d.useClick(f),d.useDismiss(f)]),p=e=>{var v;const n=e.subItemGroups||e.subItems,t=e.key||e.href||((v=e.children)==null?void 0:v.toString());return s.jsxs("li",{role:"none",className:k.default(a.default["tedi-sidenav-dropdown__item"],n&&a.default["tedi-sidenav-dropdown__item--has-children"]),children:[s.jsxs(D.Link,{...e,role:"menuitem","aria-haspopup":n?"true":void 0,"aria-expanded":n?r:void 0,"aria-controls":n?`${t}-submenu`:void 0,className:a.default["tedi-sidenav-dropdown__link"],"data-active":e.isActive,"aria-current":e.isActive?"page":void 0,noStyle:!0,onClick:i=>{var o;(o=e.onClick)==null||o.call(e,i),l(!1)},as:e.as??x,children:[e.children,n&&s.jsx("span",{className:a.default["tedi-sidenav__bullet"]})]}),n&&s.jsx("ul",{id:`${t}-submenu`,className:a.default["tedi-sidenav-dropdown__list"],role:"menu","aria-label":_("sidenav.submenu"),children:(e.subItemGroups??(e.subItems?[{subItems:e.subItems}]:[])).map((i,o)=>s.jsxs(m.Fragment,{children:[i.subHeading&&s.jsx("div",{className:a.default["tedi-sidenav-dropdown__heading"],role:"presentation",children:i.subHeading}),i.subItems.map(N=>p(N))]},o))})]},t)},I=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),l(n=>!n)),e.key==="Escape"&&(e.preventDefault(),l(!1),c.setReference(null))};return s.jsxs(s.Fragment,{children:[s.jsx("div",{ref:c.setReference,...w(),role:"button",tabIndex:-1,"aria-haspopup":"menu","aria-expanded":r,onKeyDown:I,children:b}),r&&s.jsx(d.FloatingOverlay,{children:s.jsx(d.FloatingPortal,{children:s.jsx(d.FloatingFocusManager,{context:f,modal:!1,children:s.jsx("div",{ref:c.setFloating,style:j,className:a.default["tedi-sidenav-dropdown"],role:"menu",...y(),children:g.map((e,n)=>s.jsxs("div",{className:a.default["tedi-sidenav-dropdown__group"],children:[e.subHeading&&s.jsx("div",{className:a.default["tedi-sidenav-dropdown__heading"],role:"presentation",children:e.subHeading}),s.jsx("ul",{className:a.default["tedi-sidenav-dropdown__list"],role:"menu",children:e.subItems.map(t=>p(t))})]},n))})})})})]})};exports.SideNavDropdown=S;

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

@@ -4,19 +4,19 @@ import E from "../../../../../../../external/classnames/index.es.js";
 import L, { useState as P } from "react";
 import { Link as j } from "../../../../navigation/link/link.es.js";
 import n from "./sidenav-dropdown.module.scss.es.js";
-import { autoUpdate as G } from "../../../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as K, flip as M } from "../../../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-import { useLabels as $ } from "../../../../../providers/label-provider/use-labels.es.js";
+import { useLabels as G } from "../../../../../providers/label-provider/use-labels.es.js";
+import { autoUpdate as K } from "../../../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as M, flip as $ } from "../../../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
 const W = ({
   trigger: v,
   groups: h,
   onOpenChange: c,
   as: b
 }) => {
-  const { getLabel: _ } = $(), [o, t] = P(!1), { refs: u, floatingStyles: g, context: m } = F({
+  const { getLabel: _ } = G(), [o, t] = P(!1), { refs: u, floatingStyles: g, context: m } = F({
     open: o,
-    middleware: [K({ mainAxis: 8 }), M()],
-    whileElementsMounted: G,
+    middleware: [M({ mainAxis: 8 }), $()],
+    whileElementsMounted: K,
     placement: "right-start",
     onOpenChange: (e) => {
       t(e), c == null || c(e);

package/src/tedi/components/layout/sidenav/index.d.ts

@@ -1,5 +1,5 @@
 export * from './sidenav';
 export * from './components/sidenav-dropdown/sidenav-dropdown';
 export * from './components/sidenav-item/sidenav-item';
-export * from './components/sidenav-toggle/sidenav-toggle';
-export * from './components/sidenav-mobile/sidenav-mobile';
+export * from '../mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle';
+export * from '../mobile-nav/mobile-nav';

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

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

package/src/tedi/components/layout/sidenav/sidenav.d.ts

@@ -80,7 +80,7 @@ export type SideNavProps<C extends React.ElementType = 'a'> = ConditionalTypes<C
     sideNavItemSize?: SideNavItemSize;
 };
 export declare const SideNav: (<C extends React.ElementType = "a">(props: SideNavProps<C>) => React.ReactElement | null) & {
-    Toggle: ({ menuOpen, toggleMenu, referenceRef, getReferenceProps, variant, className, }: import('./components/sidenav-toggle/sidenav-toggle').SidenavToggleProps) => import("react/jsx-runtime").JSX.Element;
+    Toggle: ({ menuOpen, toggleMenu, referenceRef, getReferenceProps, variant, showLabel, label, className, }: import('.').MobileNavToggleProps) => import("react/jsx-runtime").JSX.Element;
     Item: <C extends React.ElementType = "a">(props: SideNavItemProps<C> & {
         onItemClick?: () => void;
         level?: number;
@@ -95,15 +95,6 @@ export declare const SideNav: (<C extends React.ElementType = "a">(props: SideNa
         onOpenChange?: (isOpen: boolean) => void;
         as?: C | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    Mobile: <C extends React.ElementType = "a">({ navItems, ariaLabel, linkAs, isOpen, onClose, showOverlay, id, className, }: {
-        navItems: SideNavItemProps<C>[];
-        ariaLabel: string;
-        linkAs?: C | undefined;
-        isOpen: boolean;
-        onClose: () => void;
-        showOverlay?: boolean;
-        id?: string;
-        className?: string;
-    }) => import("react/jsx-runtime").JSX.Element | null;
+    Mobile: <C extends React.ElementType = "a">({ navItems, ariaLabel, linkAs, isOpen, onClose, showOverlay, id, className, }: import('.').MobileNavProps<C>) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default SideNav;

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("../../../../../../../external/classnames/index.cjs.js"),p=require("../../../../base/icon/icon.cjs.js"),o=require("../../top-nav.module.scss.cjs.js"),a=({title:s,children:r,icon:e,headingLevel:i="h3",className:u})=>{const n=i;return t.jsxs("section",{className:l.default(o.default["tedi-top-nav__group"],u),children:[s&&t.jsxs(n,{className:o.default["tedi-top-nav__group-title"],children:[e&&t.jsx(p.Icon,{className:o.default["tedi-top-nav__group-icon"],...typeof e=="string"?{name:e}:e,size:typeof e=="string"?16:e.size??16,color:"inherit"}),s]}),t.jsx("ul",{className:o.default["tedi-top-nav__group-list"],children:r})]})};a.displayName="TopNav.Group";exports.TopNavGroup=a;

package/src/tedi/components/layout/top-nav/components/top-nav-group/top-nav-group.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { IconWithoutBackgroundProps } from '../../../../base/icon/icon';
+export interface TopNavGroupProps {
+    /**
+     * Uppercase section title rendered above the link list. When omitted, the
+     * heading is not rendered — useful for a single-column mega-menu that only
+     * lists links.
+     */
+    title?: React.ReactNode;
+    /**
+     * `TopNav.SubItem` children. Anything else is ignored.
+     */
+    children: React.ReactNode;
+    /**
+     * Optional leading icon rendered next to the title — material-symbol name or
+     * full `IconWithoutBackgroundProps`. Ignored when `title` is omitted.
+     */
+    icon?: string | IconWithoutBackgroundProps;
+    /**
+     * HTML heading level used for the title — pick the value that keeps the
+     * document outline correct on the host page.
+     * @default h3
+     */
+    headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Additional class name applied to the column.
+     */
+    className?: string;
+}
+export declare const TopNavGroup: {
+    ({ title, children, icon, headingLevel, className, }: TopNavGroupProps): JSX.Element;
+    displayName: string;
+};
+export default TopNavGroup;

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

@@ -0,0 +1,32 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import l from "../../../../../../../external/classnames/index.es.js";
+import { Icon as n } from "../../../../base/icon/icon.es.js";
+import s from "../../top-nav.module.scss.es.js";
+const c = ({
+  title: t,
+  children: a,
+  icon: o,
+  headingLevel: p = "h3",
+  className: i
+}) => {
+  const m = p;
+  return /* @__PURE__ */ e("section", { className: l(s["tedi-top-nav__group"], i), children: [
+    t && /* @__PURE__ */ e(m, { className: s["tedi-top-nav__group-title"], children: [
+      o && /* @__PURE__ */ r(
+        n,
+        {
+          className: s["tedi-top-nav__group-icon"],
+          ...typeof o == "string" ? { name: o } : o,
+          size: typeof o == "string" ? 16 : o.size ?? 16,
+          color: "inherit"
+        }
+      ),
+      t
+    ] }),
+    /* @__PURE__ */ r("ul", { className: s["tedi-top-nav__group-list"], children: a })
+  ] });
+};
+c.displayName = "TopNav.Group";
+export {
+  c as TopNavGroup
+};

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

@@ -0,0 +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;

package/src/tedi/components/layout/top-nav/components/top-nav-item/top-nav-item.d.ts

@@ -0,0 +1,66 @@
+import { default as React } from 'react';
+import { PolymorphicComponentPropWithRef } from '../../../../../helpers/polymorphic/types';
+import { IconWithoutBackgroundProps } from '../../../../base/icon/icon';
+type TopNavItemLinkProps = {
+    /**
+     * Submenu content — typically a fragment of `TopNav.Group` elements.
+     * When provided and `isActive` is `true`, the parent `TopNav` renders
+     * the submenu inside the mega-menu panel below the bar, and a
+     * `keyboard_arrow_down` chevron is added next to the label.
+     *
+     * A mega-menu item is a toggle, not a link, so `href` is **not** allowed
+     * alongside `submenu` — the two are mutually exclusive.
+     */
+    submenu: React.ReactNode;
+    href?: never;
+} | {
+    /**
+     * Destination URL. Omit when the item only opens a submenu.
+     */
+    href?: string;
+    submenu?: never;
+};
+type TopNavItemOwnProps = {
+    /**
+     * Bar label. Pass a string or any ReactNode that renders inline.
+     */
+    children: React.ReactNode;
+    /**
+     * Optional leading icon — material-symbol name or full `IconWithoutBackgroundProps`.
+     */
+    icon?: string | IconWithoutBackgroundProps;
+    /**
+     * Marks this item as the current page. Renders `aria-current="page"`,
+     * applies the active visual, and (when the item has a submenu) surfaces
+     * the mega-menu panel below the bar.
+     * @default false
+     */
+    isActive?: boolean;
+    /**
+     * Disables interaction. For a link, sets `aria-disabled` and removes the
+     * `href`. For a toggle-only parent (`<button>`), sets the native `disabled`
+     * attribute.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Click handler. Receives the original mouse / keyboard event.
+     */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Additional class name applied to the trigger element.
+     */
+    className?: string;
+    /** @internal Set by the parent to indicate the item carries submenu content. */
+    hasSubmenu?: boolean;
+    /** @internal When true and the submenu is open, render the submenu inside this `<li>` instead of as a full-width panel. */
+    renderSubmenuInline?: boolean;
+    /** @internal Parent-controlled submenu visibility. Defaults to `isActive` when undefined (standalone use / link items). */
+    isSubmenuOpen?: boolean;
+    /** @internal Shared id used to link the toggle button (`aria-controls`) to the submenu panel (`id`). */
+    panelId?: string;
+};
+type TopNavItemBaseProps = TopNavItemOwnProps & TopNavItemLinkProps;
+export type TopNavItemProps<C extends React.ElementType = 'a'> = PolymorphicComponentPropWithRef<C, TopNavItemBaseProps>;
+export declare const TopNavItem: <C extends React.ElementType = "a">(props: TopNavItemProps<C>) => React.ReactElement | null;
+export default TopNavItem;

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

@@ -0,0 +1,100 @@
+import { jsxs as _, jsx as i } from "react/jsx-runtime";
+import t from "../../../../../../../external/classnames/index.es.js";
+import { forwardRef as P } from "react";
+import { Icon as v } from "../../../../base/icon/icon.es.js";
+import e from "../../top-nav.module.scss.es.js";
+const b = P(
+  (f, h) => {
+    const {
+      children: N,
+      href: p,
+      icon: n,
+      isActive: s = !1,
+      hasSubmenu: r = !1,
+      disabled: o = !1,
+      onClick: m,
+      as: I,
+      className: y,
+      submenu: g,
+      renderSubmenuInline: k = !1,
+      isSubmenuOpen: w,
+      panelId: l,
+      ...x
+    } = f, c = !p && r, C = I ?? (c ? "button" : "a"), a = w ?? s, d = k && a && r, S = (u) => {
+      if (o) {
+        u.preventDefault();
+        return;
+      }
+      m == null || m(u);
+    }, T = t(
+      e["tedi-top-nav__link"],
+      {
+        [e["tedi-top-nav__link--active"]]: s || a
+      },
+      y
+    ), z = {
+      ...x,
+      ref: h,
+      className: T,
+      onClick: S,
+      ...c ? {
+        type: "button",
+        disabled: o,
+        "aria-haspopup": !0,
+        "aria-expanded": a,
+        "aria-controls": l
+      } : {
+        href: o ? void 0 : p,
+        "aria-current": s ? "page" : void 0,
+        "aria-disabled": o || void 0
+      }
+    };
+    return /* @__PURE__ */ _(
+      "li",
+      {
+        className: t(e["tedi-top-nav__item"], {
+          [e["tedi-top-nav__item--has-inline-submenu"]]: d
+        }),
+        children: [
+          /* @__PURE__ */ _(C, { ...z, children: [
+            n && /* @__PURE__ */ i(
+              v,
+              {
+                className: e["tedi-top-nav__icon"],
+                ...typeof n == "string" ? { name: n } : n,
+                size: typeof n == "string" ? 18 : n.size ?? 18,
+                color: "inherit"
+              }
+            ),
+            N,
+            r && /* @__PURE__ */ i(
+              v,
+              {
+                className: t(e["tedi-top-nav__icon"], e["tedi-top-nav__chevron"], {
+                  [e["tedi-top-nav__chevron--open"]]: a
+                }),
+                name: "keyboard_arrow_down",
+                size: 18,
+                color: "inherit"
+              }
+            )
+          ] }),
+          d && /* @__PURE__ */ i(
+            "div",
+            {
+              id: l,
+              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 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+b.displayName = "TopNav.Item";
+const B = b;
+export {
+  B as TopNavItem
+};

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

@@ -0,0 +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;

package/src/tedi/components/layout/top-nav/components/top-nav-separator/top-nav-separator.d.ts

@@ -0,0 +1,11 @@
+export interface TopNavSeparatorProps {
+    /**
+     * Additional class name applied to the separator list item.
+     */
+    className?: string;
+}
+export declare const TopNavSeparator: {
+    ({ className }: TopNavSeparatorProps): JSX.Element;
+    displayName: string;
+};
+export default TopNavSeparator;

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

@@ -0,0 +1,8 @@
+import { jsx as a } from "react/jsx-runtime";
+import o 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" }) });
+t.displayName = "TopNav.Separator";
+export {
+  t as TopNavSeparator
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),f=require("../../../../../../../external/classnames/index.cjs.js"),S=require("react"),o=require("../../top-nav.module.scss.cjs.js"),_=require("../../top-nav-context.cjs.js"),a=S.forwardRef((i,c)=>{const{children:r,href:u,isActive:n=!1,onClick:e,as:l,className:m,...d}=i,p=l||"a",t=_.useTopNavContext(),v=N=>{e==null||e(N),t==null||t.closeSubmenu()},b={...d,ref:c,className:f.default(o.default["tedi-top-nav__subitem-link"],{[o.default["tedi-top-nav__subitem-link--active"]]:n},m),href:u,"aria-current":n?"page":void 0,onClick:v};return s.jsx("li",{className:o.default["tedi-top-nav__subitem"],children:s.jsx(p,{...b,children:r})})});a.displayName="TopNav.SubItem";const x=a;exports.TopNavSubItem=x;

package/src/tedi/components/layout/top-nav/components/top-nav-subitem/top-nav-subitem.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { PolymorphicComponentPropWithRef } from '../../../../../helpers/polymorphic/types';
+type TopNavSubItemBaseProps = {
+    /**
+     * Link label.
+     */
+    children: React.ReactNode;
+    /**
+     * Destination URL.
+     */
+    href?: string;
+    /**
+     * Marks this submenu item as the current page.
+     * @default false
+     */
+    isActive?: boolean;
+    /**
+     * Click handler. Receives the original mouse / keyboard event.
+     */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Additional class name applied to the link element.
+     */
+    className?: string;
+};
+export type TopNavSubItemProps<C extends React.ElementType = 'a'> = PolymorphicComponentPropWithRef<C, TopNavSubItemBaseProps>;
+export declare const TopNavSubItem: <C extends React.ElementType = "a">(props: TopNavSubItemProps<C>) => React.ReactElement | null;
+export default TopNavSubItem;

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

@@ -0,0 +1,29 @@
+import { jsx as a } from "react/jsx-runtime";
+import b from "../../../../../../../external/classnames/index.es.js";
+import { forwardRef as _ } from "react";
+import t from "../../top-nav.module.scss.es.js";
+import { useTopNavContext as h } from "../../top-nav-context.es.js";
+const m = _(
+  (n, i) => {
+    const { children: r, href: c, isActive: s = !1, onClick: e, as: p, className: l, ...u } = n, d = p || "a", o = h(), f = (N) => {
+      e == null || e(N), o == null || o.closeSubmenu();
+    }, v = {
+      ...u,
+      ref: i,
+      className: b(
+        t["tedi-top-nav__subitem-link"],
+        { [t["tedi-top-nav__subitem-link--active"]]: s },
+        l
+      ),
+      href: c,
+      "aria-current": s ? "page" : void 0,
+      onClick: f
+    };
+    return /* @__PURE__ */ a("li", { className: t["tedi-top-nav__subitem"], children: /* @__PURE__ */ a(d, { ...v, children: r }) });
+  }
+);
+m.displayName = "TopNav.SubItem";
+const I = m;
+export {
+  I as TopNavSubItem
+};