@tedi-design-system/react 18.0.0-rc.6 → 18.0.0-rc.8

package/package.json

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

package/src/tedi/components/layout/mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),v=require("../../../../../../../external/classnames/index.cjs.js"),N=require("../../../../base/icon/icon.cjs.js"),h=require("../../../../buttons/button/button.cjs.js"),q=require("../../../../buttons/floating-button/floating-button.cjs.js"),l=require("./mobile-nav-toggle.module.scss.cjs.js"),x=require("../../../../../providers/label-provider/use-labels.cjs.js"),n=({menuOpen:e,toggleMenu:i,referenceRef:c,getReferenceProps:d=()=>({}),variant:o="mobile",showLabel:m=!1,label:t,className:_})=>{const{getLabel:y}=x.useLabels(),u=t!==void 0?typeof t=="function"?t(e):t:y("header.toggle",e),g=o==="collapse"?e?"right_panel_open":"left_panel_open":e?"close":"menu",r=m&&o==="mobile",b=v.default(l.default["tedi-mobile-nav-toggle"],{[l.default["tedi-mobile-nav-toggle--open"]]:e,[l.default[`tedi-mobile-nav-toggle--${o}`]]:!0,[l.default["tedi-mobile-nav-toggle--with-label"]]:r},_),f=a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),i(!e))};if(r)return s.jsxs("button",{...d(),ref:c,type:"button","aria-expanded":e,className:b,onClick:()=>i(!e),onKeyDown:f,children:[s.jsx(N.Icon,{name:g,size:24,className:l.default["tedi-mobile-nav-toggle__icon"],color:"inherit"}),s.jsx("span",{className:l.default["tedi-mobile-nav-toggle__label"],children:u})]});const p=o==="collapse"?q.FloatingButton:h.Button;return s.jsx(p,{...d(),ref:c,icon:{name:g,className:l.default["tedi-mobile-nav-toggle__icon"],size:o==="collapse"?18:24},visualType:o==="collapse"?"secondary":"primary",className:b,onClick:()=>i(!e),onKeyDown:f,position:o==="collapse"?"absolute":"static",size:o==="collapse"?"small":"",children:u})},T=n;exports.MobileNavToggle=n;exports.SidenavToggle=T;exports.default=n;

package/src/tedi/components/layout/mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+import { UnknownType } from '../../../../../types/commonTypes';
+export type MobileNavToggleVariant = 'mobile' | 'collapse';
+export type MobileNavToggleProps = {
+    /**
+     * Is the menu open (for mobile) or expanded (for collapse)
+     */
+    menuOpen: boolean;
+    /**
+     * Toggle open/collapse state
+     */
+    toggleMenu: (open: boolean) => void;
+    /**
+     * Optional ref to attach to button (for floating UI etc.)
+     */
+    referenceRef?: React.Ref<UnknownType>;
+    /**
+     * Optional props passed from floating UI
+     */
+    getReferenceProps?: () => UnknownType;
+    /**
+     * Variant of toggle (mobile overlay or collapse control)
+     */
+    variant?: MobileNavToggleVariant;
+    /**
+     * Show the open/close label visibly below the icon (mobile variant only).
+     * The label text comes from the `header.toggle` i18n key by default — pass
+     * `label` to override it. When `false` (default), the button renders
+     * icon-only and the label is still exposed as accessible text.
+     * @default false
+     */
+    showLabel?: boolean;
+    /**
+     * Override the toggle's label text. Accepts a static `ReactNode` (used for
+     * both states) or a function that returns a `ReactNode` for the current
+     * `menuOpen` state (e.g. `(open) => open ? 'Sulge' : 'Menüü'`). When
+     * omitted, the label falls back to the `header.toggle` i18n value.
+     */
+    label?: React.ReactNode | ((menuOpen: boolean) => React.ReactNode);
+    /**
+     * Add custom class to override styles
+     */
+    className?: string;
+};
+export declare const MobileNavToggle: ({ menuOpen, toggleMenu, referenceRef, getReferenceProps, variant, showLabel, label, className, }: MobileNavToggleProps) => import("react/jsx-runtime").JSX.Element;
+/** @deprecated Use `MobileNavToggle` — same component, vendor-neutral name. */
+export declare const SidenavToggle: ({ menuOpen, toggleMenu, referenceRef, getReferenceProps, variant, showLabel, label, className, }: MobileNavToggleProps) => import("react/jsx-runtime").JSX.Element;
+/** @deprecated Use `MobileNavToggleProps`. */
+export type SidenavToggleProps = MobileNavToggleProps;
+/** @deprecated Use `MobileNavToggleVariant`. */
+export type SidenavToggleVariant = MobileNavToggleVariant;
+export default MobileNavToggle;

package/src/tedi/components/layout/mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.es.js

@@ -0,0 +1,68 @@
+import { jsxs as _, jsx as a } from "react/jsx-runtime";
+import h from "../../../../../../../external/classnames/index.es.js";
+import { Icon as N } from "../../../../base/icon/icon.es.js";
+import { Button as u } from "../../../../buttons/button/button.es.js";
+import { FloatingButton as v } from "../../../../buttons/floating-button/floating-button.es.js";
+import l from "./mobile-nav-toggle.module.scss.es.js";
+import { useLabels as L } from "../../../../../providers/label-provider/use-labels.es.js";
+const k = ({
+  menuOpen: o,
+  toggleMenu: s,
+  referenceRef: c,
+  getReferenceProps: n = () => ({}),
+  variant: e = "mobile",
+  showLabel: b = !1,
+  label: t,
+  className: f
+}) => {
+  const { getLabel: y } = L(), m = t !== void 0 ? typeof t == "function" ? t(o) : t : y("header.toggle", o), r = e === "collapse" ? o ? "right_panel_open" : "left_panel_open" : o ? "close" : "menu", g = b && e === "mobile", d = h(
+    l["tedi-mobile-nav-toggle"],
+    {
+      [l["tedi-mobile-nav-toggle--open"]]: o,
+      [l[`tedi-mobile-nav-toggle--${e}`]]: !0,
+      [l["tedi-mobile-nav-toggle--with-label"]]: g
+    },
+    f
+  ), p = (i) => {
+    (i.key === "Enter" || i.key === " ") && (i.preventDefault(), s(!o));
+  };
+  return g ? /* @__PURE__ */ _(
+    "button",
+    {
+      ...n(),
+      ref: c,
+      type: "button",
+      "aria-expanded": o,
+      className: d,
+      onClick: () => s(!o),
+      onKeyDown: p,
+      children: [
+        /* @__PURE__ */ a(N, { name: r, size: 24, className: l["tedi-mobile-nav-toggle__icon"], color: "inherit" }),
+        /* @__PURE__ */ a("span", { className: l["tedi-mobile-nav-toggle__label"], children: m })
+      ]
+    }
+  ) : /* @__PURE__ */ a(
+    e === "collapse" ? v : u,
+    {
+      ...n(),
+      ref: c,
+      icon: {
+        name: r,
+        className: l["tedi-mobile-nav-toggle__icon"],
+        size: e === "collapse" ? 18 : 24
+      },
+      visualType: e === "collapse" ? "secondary" : "primary",
+      className: d,
+      onClick: () => s(!o),
+      onKeyDown: p,
+      position: e === "collapse" ? "absolute" : "static",
+      size: e === "collapse" ? "small" : "",
+      children: m
+    }
+  );
+}, j = k;
+export {
+  k as MobileNavToggle,
+  j as SidenavToggle,
+  k as default
+};

package/src/tedi/components/layout/mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-mobile-nav-toggle":"tedi-mobile-nav-toggle-923946d1","tedi-mobile-nav-toggle--collapse":"tedi-mobile-nav-toggle--collapse-4434a2d6","tedi-mobile-nav-toggle--with-label":"tedi-mobile-nav-toggle--with-label-703a307f","tedi-mobile-nav-toggle__label":"tedi-mobile-nav-toggle__label-9cd8a16e"};exports.default=e;

package/src/tedi/components/layout/mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.module.scss.es.js

@@ -0,0 +1,9 @@
+const e = {
+  "tedi-mobile-nav-toggle": "tedi-mobile-nav-toggle-923946d1",
+  "tedi-mobile-nav-toggle--collapse": "tedi-mobile-nav-toggle--collapse-4434a2d6",
+  "tedi-mobile-nav-toggle--with-label": "tedi-mobile-nav-toggle--with-label-703a307f",
+  "tedi-mobile-nav-toggle__label": "tedi-mobile-nav-toggle__label-9cd8a16e"
+};
+export {
+  e as default
+};

package/src/tedi/components/layout/mobile-nav/index.d.ts

@@ -0,0 +1,2 @@
+export * from './mobile-nav';
+export * from './components/mobile-nav-toggle/mobile-nav-toggle';

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),U=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),l=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),d=require("../../base/icon/icon.cjs.js"),f=require("../../buttons/button/button.cjs.js"),M=require("../sidenav/components/sidenav-item/sidenav-item.cjs.js"),n=require("../sidenav/sidenav.module.scss.cjs.js"),D=require("../../../providers/label-provider/use-labels.cjs.js"),q=({navItems:h,ariaLabel:y,linkAs:v,isOpen:w,onClose:r,showOverlay:B=!0,id:G,className:P})=>{var k,g,p,I,S,C,L;const{getLabel:b}=D.useLabels(),[s,c]=m.useState([{items:h}]);m.useEffect(()=>{c([{items:h}])},[h]);const a=s[s.length-1],R=s.length===1,x=e=>{var _;const i=!!(e.subItems||e.subItemGroups),o=!!(e.href||e.to);if(!i){r();return}const u=((_=e.subItemGroups)==null?void 0:_.flatMap(H=>H.subItems))||e.subItems||[];c([...s,{items:u,parent:e,renderParentLink:o}])},T=()=>{c(s.slice(0,-1))},z=()=>{c([s[0]])},F=((g=(k=a.parent)==null?void 0:k.subItems)==null?void 0:g.length)??((I=(p=a.parent)==null?void 0:p.subItemGroups)==null?void 0:I.length),O=s.length>1&&!(a.renderParentLink&&F),N=(e,i)=>i===1?!(e.subItems||e.subItemGroups)?t.jsx(M.SideNavItem,{...e,as:v,level:i,onItemClick:r,className:l.default(n.default["tedi-sidenav__item--mobile"],e.className)}):t.jsx("li",{className:l.default(n.default["tedi-sidenav__item"],n.default["tedi-sidenav__item--mobile"]),children:t.jsxs("button",{onClick:()=>x(e),className:n.default["tedi-sidenav__link"],children:[e.icon&&t.jsx(d.Icon,{name:typeof e.icon=="string"?e.icon:e.icon.name,color:"white",className:n.default["tedi-sidenav__icon"]}),t.jsx("span",{className:n.default["tedi-sidenav__title"],children:e.children}),t.jsx(d.Icon,{name:"expand_more",color:"white",className:n.default["tedi-sidenav__toggle-icon"]})]})}):E(e,i),E=(e,i)=>{const o=!!(e.href||e.to),u=!!(e.subItems||e.subItemGroups);return o?t.jsx(M.SideNavItem,{...e,as:v,level:i,icon:void 0,onItemClick:r,className:l.default(n.default["tedi-sidenav__sub-item"],e.className)}):t.jsx("li",{className:l.default(n.default["tedi-sidenav__item"]),children:t.jsxs(f.Button,{noStyle:!0,onClick:()=>u?x(e):r(),className:n.default["tedi-sidenav__link"],children:[t.jsx("span",{className:n.default["tedi-sidenav__title"],children:e.children}),u?t.jsx(d.Icon,{name:"expand_more",color:"white",className:n.default["tedi-sidenav__toggle-icon"]}):null]})})},j=t.jsxs("nav",{"data-name":"mobile-sidenav",className:l.default(n.default["tedi-sidenav"],n.default["tedi-sidenav--mobile"],P),"aria-label":y,id:G,children:[t.jsx("div",{className:n.default["tedi-sidenav__list"],children:!R&&t.jsxs("div",{className:n.default["tedi-sidenav__back-buttons"],children:[s.length>1&&t.jsxs(f.Button,{noStyle:!0,onClick:z,className:l.default(n.default["tedi-sidenav__link"],n.default["tedi-sidenav__back-button"]),children:[t.jsx(d.Icon,{name:"arrow_back",size:16,color:"white"}),t.jsx("span",{children:b("sidenav.backToMainMenu")})]}),s.length>2&&t.jsxs(f.Button,{noStyle:!0,onClick:T,className:l.default(n.default["tedi-sidenav__link"],n.default["tedi-sidenav__back-button"]),children:[t.jsx(d.Icon,{name:"arrow_back",size:16,color:"white"}),t.jsx("span",{children:((C=(S=s[s.length-1])==null?void 0:S.parent)==null?void 0:C.children)+" "+b("sidenav.backtoMenu")})]})]})}),O&&t.jsx("div",{className:l.default(n.default["tedi-sidenav__subheading"],n.default["tedi-sidenav__subheading--mobile"]),children:(L=a.parent)==null?void 0:L.children}),t.jsxs("ul",{className:n.default["tedi-sidenav__list"],role:"menubar",children:[a.renderParentLink&&a.parent&&t.jsx("li",{className:n.default["tedi-sidenav__list-item"],children:t.jsx("div",{className:l.default(n.default["tedi-sidenav__collapse"]),children:N(a.parent,s.length)})}),!a.renderParentLink&&a.items.map((e,i)=>t.jsx(m.Fragment,{children:N(e,s.length)},e.id||i))]})]});return w?B?t.jsx(U.FloatingOverlay,{style:{top:"0",position:"relative",height:"100%"},className:n.default["tedi-sidenav__overlay"],children:j}):j:null},J=q;exports.MobileNav=q;exports.SideNavMobile=J;

package/src/tedi/components/layout/mobile-nav/mobile-nav.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { SideNavItemProps } from '../sidenav/components/sidenav-item/sidenav-item';
+export type MobileNavProps<C extends React.ElementType = 'a'> = {
+    navItems: SideNavItemProps<C>[];
+    ariaLabel: string;
+    linkAs?: C;
+    isOpen: boolean;
+    onClose: () => void;
+    showOverlay?: boolean;
+    id?: string;
+    className?: string;
+};
+export declare const MobileNav: <C extends React.ElementType = "a">({ navItems, ariaLabel, linkAs, isOpen, onClose, showOverlay, id, className, }: MobileNavProps<C>) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * @deprecated Use `MobileNav` (same component, vendor-neutral name). Kept for
+ * backward compatibility with the `SideNav.Mobile` sub-component alias.
+ */
+export declare const SideNavMobile: <C extends React.ElementType = "a">({ navItems, ariaLabel, linkAs, isOpen, onClose, showOverlay, id, className, }: MobileNavProps<C>) => import("react/jsx-runtime").JSX.Element | null;
+/** @deprecated Use `MobileNavProps`. */
+export type SideNavMobileProps<C extends React.ElementType = 'a'> = MobileNavProps<C>;

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/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.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),n=require("react"),L=require("../../../../../external/classnames/index.cjs.js"),V=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"),F=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"),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(),s=C.isBreakpointBelow(_,B(j)),t=m!==void 0,[y,f]=n.useState(!s),N=t?m:y,[D,T]=n.useState(w),a=s?!1:D,E="isCollapsed"in o;n.useEffect(()=>{t||f(!s)},[s,t]);const P=e=>{T(e),c==null||c(e)},R=()=>{P(!a)},g=e=>{t||f(e),d==null||d(e)},z=()=>{g(!N)},A=L.default(l.default["tedi-sidenav"],p,{[l.default["tedi-sidenav--has-dividers"]]:h,[l.default["tedi-sidenav--collapsed"]]:a});return s?i.jsx(S.MobileNav,{navItems:u,ariaLabel:r,linkAs:v,isOpen:N,onClose:()=>g(!1),showOverlay:k,className:p,...b}):i.jsx(V.Print,{visibility:"hide",children:i.jsxs("nav",{id:o.id,"data-name":"sidenav",...b,className:A,"aria-label":r,children:[E&&i.jsx(O.MobileNavToggle,{menuOpen:!a,toggleMenu:R,variant:"collapse"}),i.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:z,isCollapsed:a,sideNavItemSize:x}))})]})})},I=Object.assign(G,{Toggle:O.MobileNavToggle,Item:q.SideNavItem,Dropdown:F.SideNavDropdown,Mobile:S.MobileNav});exports.SideNav=I;exports.default=I;

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('../mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle').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('../mobile-nav/mobile-nav').MobileNavProps<C>) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default SideNav;

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

@@ -1,76 +1,76 @@
 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) => {
+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(), 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 l;
   V(() => {
-    s || b(!i);
-  }, [i, s]);
+    i || b(!s);
+  }, [s, i]);
   const _ = (e) => {
     E(e), m == null || m(e);
   }, z = () => {
     _(!t);
   }, C = (e) => {
-    s || b(e), r == null || r(e);
+    i || b(e), r == null || r(e);
   }, 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(
+  return s ? /* @__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
 });

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

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("../../../../../../../external/classnames/index.cjs.js"),C=require("react"),f=require("../../../../base/icon/icon.cjs.js"),e=require("../../top-nav.module.scss.cjs.js"),v=C.forwardRef((b,h)=>{const{children:N,href:d,icon:n,isActive:o=!1,hasSubmenu:u=!1,disabled:s=!1,onClick:l,as:x,className:I,submenu:j,renderSubmenuInline:g=!1,isSubmenuOpen:y,panelId:r,...S}=b,c=!d&&u,T=x??(c?"button":"a"),i=y??o,p=g&&i&&u,k=m=>{if(s){m.preventDefault();return}l==null||l(m)},q=a.default(e.default["tedi-top-nav__link"],{[e.default["tedi-top-nav__link--active"]]:o||i},I),w={...S,ref:h,className:q,onClick:k,...c?{type:"button",disabled:s,"aria-haspopup":!0,"aria-expanded":i,"aria-controls":r}:{href:s?void 0:d,"aria-current":o?"page":void 0,"aria-disabled":s||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(T,{...w,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"}),N,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"]]:i}),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:j})})]})});v.displayName="TopNav.Item";const _=v;exports.TopNavItem=_;exports.default=_;

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;