@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/dist/components/navigation/index.cjs

@@ -29,15 +29,15 @@
 
 
 
-var _chunkXVAVQ4BKcjs = require('../../chunk-XVAVQ4BK.cjs');
+var _chunkA7FSNBNVcjs = require('../../chunk-A7FSNBNV.cjs');
 
 
 
 
 
 
-var _chunk4JZDJ34Ecjs = require('../../chunk-4JZDJ34E.cjs');
-require('../../chunk-U5VQFKRZ.cjs');
+var _chunkD46WFWWIcjs = require('../../chunk-D46WFWWI.cjs');
+require('../../chunk-LDGR5VCK.cjs');
 
 
 
@@ -52,31 +52,30 @@ require('../../chunk-U5VQFKRZ.cjs');
 
 
 
-var _chunkHXLOCZMGcjs = require('../../chunk-HXLOCZMG.cjs');
-require('../../chunk-KLTUTZBO.cjs');
-require('../../chunk-R6BKQKIF.cjs');
-require('../../chunk-SIDDZZKL.cjs');
+var _chunkODZ5XGWAcjs = require('../../chunk-ODZ5XGWA.cjs');
+require('../../chunk-YEJWNHD3.cjs');
+require('../../chunk-4XDYSGRL.cjs');
+require('../../chunk-UONQCE5N.cjs');
 require('../../chunk-HQQE74RO.cjs');
 require('../../chunk-DEY6XXGO.cjs');
-require('../../chunk-5PK22JP7.cjs');
+require('../../chunk-ZV6RQNXE.cjs');
 require('../../chunk-VXAKQRV7.cjs');
 require('../../chunk-24I6RFVU.cjs');
 require('../../chunk-A6P6DHEZ.cjs');
 require('../../chunk-MZ4KBSH7.cjs');
-require('../../chunk-WCSWWVPF.cjs');
-require('../../chunk-C42WIUH6.cjs');
+require('../../chunk-SMEX3BWO.cjs');
 
 
 
-var _chunkS3YDUX2Icjs = require('../../chunk-S3YDUX2I.cjs');
+var _chunkHLZUBJPLcjs = require('../../chunk-HLZUBJPL.cjs');
 
 
 
-var _chunkTZP7PSPGcjs = require('../../chunk-TZP7PSPG.cjs');
-require('../../chunk-LBGAHB6X.cjs');
-require('../../chunk-KKAY6GPU.cjs');
-require('../../chunk-XEYL6AFZ.cjs');
-require('../../chunk-LELS4XMX.cjs');
+var _chunkFWJ5YECNcjs = require('../../chunk-FWJ5YECN.cjs');
+require('../../chunk-T7SDYBST.cjs');
+require('../../chunk-QD7SKYCQ.cjs');
+require('../../chunk-AKCBLZAO.cjs');
+require('../../chunk-VZKAAXU3.cjs');
 require('../../chunk-ZOZR3QI2.cjs');
 require('../../chunk-OMV5S5PI.cjs');
 require('../../chunk-KHPX3KU4.cjs');
@@ -1865,21 +1864,21 @@ require('../../chunk-LMBYZITR.cjs');
 require('../../chunk-TMVC7S2R.cjs');
 require('../../chunk-IYHH5EIO.cjs');
 require('../../chunk-XIBCMGBW.cjs');
-require('../../chunk-JB2SEF6Q.cjs');
+require('../../chunk-3IHGS44W.cjs');
 require('../../chunk-OJZBZH56.cjs');
-require('../../chunk-64KBI5MI.cjs');
+require('../../chunk-2OYKOHFK.cjs');
 require('../../chunk-JKX2C3I2.cjs');
 require('../../chunk-7DNL734S.cjs');
 require('../../chunk-WWUSFOJ7.cjs');
 require('../../chunk-SKI6NKOE.cjs');
 require('../../chunk-EWPR7662.cjs');
-require('../../chunk-LGNJTSKB.cjs');
-require('../../chunk-CGQ7CL62.cjs');
-require('../../chunk-MQPTOJMF.cjs');
-require('../../chunk-3ZLPYEL5.cjs');
-require('../../chunk-SETFUCZA.cjs');
-require('../../chunk-BEMGJDXI.cjs');
-require('../../chunk-BNUZKBNV.cjs');
+require('../../chunk-JHDPEYZH.cjs');
+require('../../chunk-OHXB6HUX.cjs');
+require('../../chunk-JQWYXC2E.cjs');
+require('../../chunk-Q7HXTF2C.cjs');
+require('../../chunk-HTSRCFXP.cjs');
+require('../../chunk-RYIWADIB.cjs');
+require('../../chunk-AFJEUBDS.cjs');
 require('../../chunk-S5C3OZCO.cjs');
 require('../../chunk-32ASZMTV.cjs');
 require('../../chunk-OOYBIS7D.cjs');
@@ -1888,26 +1887,26 @@ require('../../chunk-6VOOPMP5.cjs');
 require('../../chunk-ORO54HDF.cjs');
 require('../../chunk-RUHKTWGB.cjs');
 require('../../chunk-BLH2SFOO.cjs');
-require('../../chunk-3LW5TD54.cjs');
+require('../../chunk-DJTPDK3W.cjs');
 require('../../chunk-7PNRXJX2.cjs');
 require('../../chunk-NTPX5GXI.cjs');
 require('../../chunk-AQXKXZWB.cjs');
 require('../../chunk-V4FXUIMH.cjs');
 require('../../chunk-SZHDXXMK.cjs');
-require('../../chunk-TUAATMUE.cjs');
+require('../../chunk-IYU2ZH2J.cjs');
 require('../../chunk-5GJM7VRR.cjs');
-require('../../chunk-E76ONBKF.cjs');
+require('../../chunk-3VINTJPE.cjs');
 require('../../chunk-UJ7AXHRZ.cjs');
-require('../../chunk-YXDHVHB2.cjs');
-require('../../chunk-FL2RMEDX.cjs');
-require('../../chunk-XIFEZ2JT.cjs');
+require('../../chunk-KWV23THO.cjs');
+require('../../chunk-T4ZVKEDP.cjs');
+require('../../chunk-L4XOCV7S.cjs');
 require('../../chunk-Z74QE57T.cjs');
 require('../../chunk-XZJCBIYR.cjs');
-require('../../chunk-WEANWBJH.cjs');
-require('../../chunk-XFRBEXQN.cjs');
-require('../../chunk-TF5D5MNO.cjs');
+require('../../chunk-63OCO2G5.cjs');
+require('../../chunk-YNDH72VU.cjs');
+require('../../chunk-CDBFQVPA.cjs');
+require('../../chunk-N6YCOBLK.cjs');
 require('../../chunk-V45KLJQP.cjs');
-require('../../chunk-65VVJSQZ.cjs');
 require('../../chunk-KHKPLOU4.cjs');
 
 
@@ -1960,4 +1959,4 @@ require('../../chunk-KHKPLOU4.cjs');
 
 
 
-exports.ASK_AI_OPEN_EVENT = _chunkTZP7PSPGcjs.ASK_AI_OPEN_EVENT; exports.ASK_AI_OPEN_WITH_REF_EVENT = _chunkTZP7PSPGcjs.ASK_AI_OPEN_WITH_REF_EVENT; exports.AppHeader = _chunkXVAVQ4BKcjs.AppHeader; exports.AppLayout = _chunkXVAVQ4BKcjs.AppLayout; exports.AppLayoutDrawer = _chunkHXLOCZMGcjs.AppLayoutDrawerRoot; exports.AppLayoutDrawerBody = _chunkHXLOCZMGcjs.AppLayoutDrawerBody; exports.AppLayoutDrawerClose = _chunkHXLOCZMGcjs.AppLayoutDrawerClose; exports.AppLayoutDrawerContent = _chunkHXLOCZMGcjs.AppLayoutDrawerContent; exports.AppLayoutDrawerDescription = _chunkHXLOCZMGcjs.AppLayoutDrawerDescription; exports.AppLayoutDrawerFooter = _chunkHXLOCZMGcjs.AppLayoutDrawerFooter; exports.AppLayoutDrawerHeader = _chunkHXLOCZMGcjs.AppLayoutDrawerHeader; exports.AppLayoutDrawerTitle = _chunkHXLOCZMGcjs.AppLayoutDrawerTitle; exports.AppLayoutDrawerTrigger = _chunkHXLOCZMGcjs.AppLayoutDrawerTrigger; exports.HeaderButton = _chunkHXLOCZMGcjs.HeaderButton; exports.HeaderGlobalSearch = _chunkXVAVQ4BKcjs.HeaderGlobalSearch; exports.HeaderMingoButton = _chunkXVAVQ4BKcjs.HeaderMingoButton; exports.HeaderOrganizationFilter = _chunkXVAVQ4BKcjs.HeaderOrganizationFilter; exports.MOBILE_NAV_SHEET_ID = _chunkXVAVQ4BKcjs.MOBILE_NAV_SHEET_ID; exports.MingoAiButton = _chunkS3YDUX2Icjs.MingoAiButton; exports.MobileBurgerMenu = _chunkXVAVQ4BKcjs.MobileBurgerMenu; exports.MobileNavSheet = _chunkXVAVQ4BKcjs.MobileNavSheet; exports.MobileNavigationDropdown = _chunk4JZDJ34Ecjs.MobileNavigationDropdown; exports.MultiLevelNavigation = _chunk4JZDJ34Ecjs.MultiLevelNavigation; exports.NAVIGATION_SIDEBAR_WIDTH_VAR = _chunkXVAVQ4BKcjs.NAVIGATION_SIDEBAR_WIDTH_VAR; exports.NavItemRow = _chunkXVAVQ4BKcjs.NavItemRow; exports.NavPanel = _chunkXVAVQ4BKcjs.NavPanel; exports.NavigationItemBadge = _chunkXVAVQ4BKcjs.NavigationItemBadge; exports.NavigationSidebar = _chunkXVAVQ4BKcjs.NavigationSidebar; exports.PAGE_ANCHOR_GAP_PX = _chunkXVAVQ4BKcjs.PAGE_ANCHOR_GAP_PX; exports.PAGE_ANCHOR_SCOPE_CLASS = _chunkXVAVQ4BKcjs.PAGE_ANCHOR_SCOPE_CLASS; exports.PAGE_ANCHOR_SCROLL_MARGIN_CLASS = _chunkXVAVQ4BKcjs.PAGE_ANCHOR_SCROLL_MARGIN_CLASS; exports.PageSectionBar = _chunkXVAVQ4BKcjs.PageSectionBar; exports.SECTION_BAR_HEIGHT_PX = _chunkXVAVQ4BKcjs.SECTION_BAR_HEIGHT_PX; exports.SIDE_PANEL_FRAME_WIDTH = _chunkXVAVQ4BKcjs.SIDE_PANEL_FRAME_WIDTH; exports.SiteFooter = _chunkXVAVQ4BKcjs.SiteFooter; exports.SiteHeader = _chunkXVAVQ4BKcjs.SiteHeader; exports.SlidingSidebar = _chunkXVAVQ4BKcjs.SlidingSidebar; exports.StickySectionNav = _chunk4JZDJ34Ecjs.StickySectionNav; exports.TicketAlertsButton = _chunkXVAVQ4BKcjs.TicketAlertsButton; exports.TopNavigation = _chunkXVAVQ4BKcjs.TopNavigation; exports.UnreadCountBadge = _chunkHXLOCZMGcjs.UnreadCountBadge; exports.UnreadDot = _chunkHXLOCZMGcjs.UnreadDot; exports.defaultRenderSiteNavLink = _chunkXVAVQ4BKcjs.defaultRenderSiteNavLink; exports.isMegaMenu = _chunkXVAVQ4BKcjs.isMegaMenu; exports.navLinkLabel = _chunkXVAVQ4BKcjs.navLinkLabel; exports.openAskAi = _chunkS3YDUX2Icjs.openAskAi; exports.siteNavHasMobileMenus = _chunkXVAVQ4BKcjs.siteNavHasMobileMenus; exports.useAppLayoutDrawerContainer = _chunkHXLOCZMGcjs.useAppLayoutDrawerContainer; exports.useScrollSpy = _chunk4JZDJ34Ecjs.useScrollSpy; exports.useSectionNavigation = _chunk4JZDJ34Ecjs.useSectionNavigation;
+exports.ASK_AI_OPEN_EVENT = _chunkFWJ5YECNcjs.ASK_AI_OPEN_EVENT; exports.ASK_AI_OPEN_WITH_REF_EVENT = _chunkFWJ5YECNcjs.ASK_AI_OPEN_WITH_REF_EVENT; exports.AppHeader = _chunkA7FSNBNVcjs.AppHeader; exports.AppLayout = _chunkA7FSNBNVcjs.AppLayout; exports.AppLayoutDrawer = _chunkODZ5XGWAcjs.AppLayoutDrawerRoot; exports.AppLayoutDrawerBody = _chunkODZ5XGWAcjs.AppLayoutDrawerBody; exports.AppLayoutDrawerClose = _chunkODZ5XGWAcjs.AppLayoutDrawerClose; exports.AppLayoutDrawerContent = _chunkODZ5XGWAcjs.AppLayoutDrawerContent; exports.AppLayoutDrawerDescription = _chunkODZ5XGWAcjs.AppLayoutDrawerDescription; exports.AppLayoutDrawerFooter = _chunkODZ5XGWAcjs.AppLayoutDrawerFooter; exports.AppLayoutDrawerHeader = _chunkODZ5XGWAcjs.AppLayoutDrawerHeader; exports.AppLayoutDrawerTitle = _chunkODZ5XGWAcjs.AppLayoutDrawerTitle; exports.AppLayoutDrawerTrigger = _chunkODZ5XGWAcjs.AppLayoutDrawerTrigger; exports.HeaderButton = _chunkODZ5XGWAcjs.HeaderButton; exports.HeaderGlobalSearch = _chunkA7FSNBNVcjs.HeaderGlobalSearch; exports.HeaderMingoButton = _chunkA7FSNBNVcjs.HeaderMingoButton; exports.HeaderOrganizationFilter = _chunkA7FSNBNVcjs.HeaderOrganizationFilter; exports.MOBILE_NAV_SHEET_ID = _chunkA7FSNBNVcjs.MOBILE_NAV_SHEET_ID; exports.MingoAiButton = _chunkHLZUBJPLcjs.MingoAiButton; exports.MobileBurgerMenu = _chunkA7FSNBNVcjs.MobileBurgerMenu; exports.MobileNavSheet = _chunkA7FSNBNVcjs.MobileNavSheet; exports.MobileNavigationDropdown = _chunkD46WFWWIcjs.MobileNavigationDropdown; exports.MultiLevelNavigation = _chunkD46WFWWIcjs.MultiLevelNavigation; exports.NAVIGATION_SIDEBAR_WIDTH_VAR = _chunkA7FSNBNVcjs.NAVIGATION_SIDEBAR_WIDTH_VAR; exports.NavItemRow = _chunkA7FSNBNVcjs.NavItemRow; exports.NavPanel = _chunkA7FSNBNVcjs.NavPanel; exports.NavigationItemBadge = _chunkA7FSNBNVcjs.NavigationItemBadge; exports.NavigationSidebar = _chunkA7FSNBNVcjs.NavigationSidebar; exports.PAGE_ANCHOR_GAP_PX = _chunkA7FSNBNVcjs.PAGE_ANCHOR_GAP_PX; exports.PAGE_ANCHOR_SCOPE_CLASS = _chunkA7FSNBNVcjs.PAGE_ANCHOR_SCOPE_CLASS; exports.PAGE_ANCHOR_SCROLL_MARGIN_CLASS = _chunkA7FSNBNVcjs.PAGE_ANCHOR_SCROLL_MARGIN_CLASS; exports.PageSectionBar = _chunkA7FSNBNVcjs.PageSectionBar; exports.SECTION_BAR_HEIGHT_PX = _chunkA7FSNBNVcjs.SECTION_BAR_HEIGHT_PX; exports.SIDE_PANEL_FRAME_WIDTH = _chunkA7FSNBNVcjs.SIDE_PANEL_FRAME_WIDTH; exports.SiteFooter = _chunkA7FSNBNVcjs.SiteFooter; exports.SiteHeader = _chunkA7FSNBNVcjs.SiteHeader; exports.SlidingSidebar = _chunkA7FSNBNVcjs.SlidingSidebar; exports.StickySectionNav = _chunkD46WFWWIcjs.StickySectionNav; exports.TicketAlertsButton = _chunkA7FSNBNVcjs.TicketAlertsButton; exports.TopNavigation = _chunkA7FSNBNVcjs.TopNavigation; exports.UnreadCountBadge = _chunkODZ5XGWAcjs.UnreadCountBadge; exports.UnreadDot = _chunkODZ5XGWAcjs.UnreadDot; exports.defaultRenderSiteNavLink = _chunkA7FSNBNVcjs.defaultRenderSiteNavLink; exports.isMegaMenu = _chunkA7FSNBNVcjs.isMegaMenu; exports.navLinkLabel = _chunkA7FSNBNVcjs.navLinkLabel; exports.openAskAi = _chunkHLZUBJPLcjs.openAskAi; exports.siteNavHasMobileMenus = _chunkA7FSNBNVcjs.siteNavHasMobileMenus; exports.useAppLayoutDrawerContainer = _chunkODZ5XGWAcjs.useAppLayoutDrawerContainer; exports.useScrollSpy = _chunkD46WFWWIcjs.useScrollSpy; exports.useSectionNavigation = _chunkD46WFWWIcjs.useSectionNavigation;

package/dist/components/navigation/mobile-burger-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-burger-menu.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/mobile-burger-menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,uBAAuB,EAAyB,MAAM,wBAAwB,CAAC;AAU7F,MAAM,WAAW,qBAAqB;IACpC,+BAA+B;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,iCAAiC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,4BAA4B;IAC5B,MAAM,EAAE,uBAAuB,CAAC;IAChC,oCAAoC;IACpC,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,mDAiO3B,CAAC"}
+{"version":3,"file":"mobile-burger-menu.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/mobile-burger-menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,uBAAuB,EAAyB,MAAM,wBAAwB,CAAC;AAU7F,MAAM,WAAW,qBAAqB;IACpC,+BAA+B;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,iCAAiC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,4BAA4B;IAC5B,MAAM,EAAE,uBAAuB,CAAC;IAChC,oCAAoC;IACpC,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,mDAgN3B,CAAC"}

package/dist/components/navigation/mobile-burger-menu.js

@@ -38,22 +38,13 @@ const MobileBurgerMenu = React.memo(function MobileBurgerMenuImpl({
   const renderNavigationItem = (item, isGridItem = false) => {
     const isActive = item.isActive ?? false;
     return /* @__PURE__ */ jsxs(
-      "button",
+      Button,
       {
+        variant: "row",
         onClick: () => handleItemClick(item),
         disabled,
-        className: cn(
-          "relative flex items-center gap-1 p-3",
-          "focus:outline-none focus-visible:outline-none",
-          "transition-colors duration-200",
-          "rounded-md border border-ods-border bg-ods-card",
-          !disabled && "hover:bg-ods-bg-hover",
-          isGridItem ? "w-full min-w-0" : "w-full",
-          // Active state
-          isActive && !disabled && "border-ods-accent",
-          // Disabled state
-          disabled && "cursor-not-allowed opacity-50"
-        ),
+        "data-state": isActive && !disabled ? "active" : void 0,
+        className: isGridItem ? "min-w-0" : void 0,
         "aria-current": isActive ? "page" : void 0,
         "aria-label": item.badge ? `${item.label} (${item.badge})` : void 0,
         children: [
@@ -154,22 +145,10 @@ const MobileBurgerMenu = React.memo(function MobileBurgerMenuImpl({
           config.topSlot?.({ minimized: false }),
           /* @__PURE__ */ jsx("nav", { "aria-label": "Primary navigation", children: renderNavigationGrid(primaryItems) }),
           secondaryItems.length > 0 && /* @__PURE__ */ jsx("nav", { "aria-label": "Secondary navigation", className: "flex flex-col gap-3", children: secondaryItems.map((item) => /* @__PURE__ */ jsx(React.Fragment, { children: renderNavigationItem(item, false) }, item.id)) }),
-          onLogout && /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: onLogout,
-              disabled,
-              className: cn(
-                "flex w-full items-center gap-1 rounded-md border border-ods-border bg-ods-card p-3 transition-colors",
-                !disabled && "hover:bg-ods-bg-hover",
-                disabled && "cursor-not-allowed opacity-50"
-              ),
-              children: [
-                /* @__PURE__ */ jsx(Logout02Icon, { className: "size-4 text-ods-error" }),
-                /* @__PURE__ */ jsx("span", { className: "flex-1 text-left text-ods-text-primary text-h6", children: "Log Out" })
-              ]
-            }
-          )
+          onLogout && /* @__PURE__ */ jsxs(Button, { variant: "row", onClick: onLogout, disabled, children: [
+            /* @__PURE__ */ jsx(Logout02Icon, { className: "size-4 text-ods-error" }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 text-left text-ods-text-primary text-h6", children: "Log Out" })
+          ] })
         ] })
       }
     )

package/dist/components/navigation/multi-level-navigation.d.ts

@@ -32,16 +32,6 @@ interface MultiLevelNavigationProps {
  */
 export declare const MULTI_LEVEL_NAVIGATION_SKELETON_ROWS = 17;
 export declare const MOBILE_NAVIGATION_SKELETON_ROWS = 17;
-/** The documentation tree while it is read: its rows' frames, each with an icon box and a bar of its name. */
-export declare function MultiLevelNavigationSkeleton({ rows, className, }: {
-    rows?: number;
-    className?: string;
-}): import("react").JSX.Element;
-/** The mobile documentation dropdown while it is read: the same rows at the dropdown's height. */
-export declare function MobileNavigationDropdownSkeleton({ rows, className, }: {
-    rows?: number;
-    className?: string;
-}): import("react").JSX.Element;
 export declare function MultiLevelNavigation({ nodes, selectedPath, expandedNodes, onNodeClick, onToggleExpand, isLoading, className, folderIndexFile, }: MultiLevelNavigationProps): import("react").JSX.Element;
 export declare function MobileNavigationDropdown({ nodes, selectedPath, expandedNodes, onNodeClick, onToggleExpand, isLoading, className, folderIndexFile, }: MultiLevelNavigationProps): import("react").JSX.Element;
 export {};

package/dist/components/navigation/multi-level-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-level-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/multi-level-navigation.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,YAAY,CAAC,EAAE,UAAU,GAAG,KAAK,GAAG,cAAc,GAAG,OAAO,GAAG,MAAM,CAAC;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,yBAAyB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC3B,WAAW,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;sBAEkB;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA0BD;;;;;;;GAOG;AACH,eAAO,MAAM,oCAAoC,KAAK,CAAC;AACvD,eAAO,MAAM,+BAA+B,KAAK,CAAC;AA0DlD,8GAA8G;AAC9G,wBAAgB,4BAA4B,CAAC,EAC3C,IAA2C,EAC3C,SAAS,GACV,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BASA;AAED,kGAAkG;AAClG,wBAAgB,gCAAgC,CAAC,EAC/C,IAAsC,EACtC,SAAS,GACV,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BASA;AA0CD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAW,EACX,cAAc,EACd,SAAS,EACT,SAAS,EACT,eAA2C,GAC5C,EAAE,yBAAyB,+BAmB3B;AAqHD,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAW,EACX,cAAc,EACd,SAAS,EACT,SAAS,EACT,eAA2C,GAC5C,EAAE,yBAAyB,+BAmB3B"}
+{"version":3,"file":"multi-level-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/multi-level-navigation.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,YAAY,CAAC,EAAE,UAAU,GAAG,KAAK,GAAG,cAAc,GAAG,OAAO,GAAG,MAAM,CAAC;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,yBAAyB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC3B,WAAW,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;sBAEkB;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAwBD;;;;;;;GAOG;AACH,eAAO,MAAM,oCAAoC,KAAK,CAAC;AACvD,eAAO,MAAM,+BAA+B,KAAK,CAAC;AAsIlD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAW,EACX,cAAc,EACd,SAAS,EACT,SAAS,EACT,eAA2C,GAC5C,EAAE,yBAAyB,+BAmB3B;AAgHD,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAW,EACX,cAAc,EACd,SAAS,EACT,SAAS,EACT,eAA2C,GAC5C,EAAE,yBAAyB,+BAmB3B"}

package/dist/components/navigation/multi-level-navigation.js

@@ -4,16 +4,17 @@ import { ChevronDown, ChevronUp, FileText, Folder, FolderOpen } from "lucide-rea
 import { cn } from "../../utils/cn.js";
 import { DEFAULT_FOLDER_INDEX_FILE as CANONICAL_FOLDER_INDEX_FILE } from "../../utils/doc-tree-nav.js";
 import { MediaSkeleton, TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { BUTTON_KIND_CLASS, Button } from "../ui/button/index.js";
 import { useLoadingScope } from "../ui/loading-scope.js";
 const DEFAULT_FOLDER_INDEX_FILE = CANONICAL_FOLDER_INDEX_FILE;
 const NAV_LIST_CLASS = "space-y-2";
 const NAV_ITEM_CLASS = "space-y-1";
 const NAV_ROW_FRAME_CLASS = "relative w-full rounded-lg border transition-all duration-150";
-const NAV_ROW_CONTENT_CLASS = "flex w-full items-center rounded-lg px-2 text-h6";
+const NAV_ROW_LAYOUT_CLASS = "min-w-0 flex-1";
 const NAV_ROW_PAD_CLASS = "px-2";
 const NAV_ROW_HEIGHT = {
-  desktop: { row: "h-12", toggle: "h-12 w-12", toggleRoom: "pr-12" },
-  mobile: { row: "h-11", toggle: "h-11 w-11", toggleRoom: "pr-11" }
+  desktop: "h-12",
+  mobile: "h-11"
 };
 const MULTI_LEVEL_NAVIGATION_SKELETON_ROWS = 17;
 const MOBILE_NAVIGATION_SKELETON_ROWS = 17;
@@ -25,7 +26,7 @@ function NavigationRowSkeleton({
   rowHeightClass,
   indentClass
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn(NAV_ROW_PAD_CLASS, indentClass), children: /* @__PURE__ */ jsx("div", { className: cn(NAV_ROW_FRAME_CLASS, "border-ods-border bg-ods-card"), children: /* @__PURE__ */ jsxs("div", { className: cn(NAV_ROW_CONTENT_CLASS, rowHeightClass), children: [
+  return /* @__PURE__ */ jsx("div", { className: cn(NAV_ROW_PAD_CLASS, indentClass), children: /* @__PURE__ */ jsx("div", { className: cn(NAV_ROW_FRAME_CLASS, "border-ods-border bg-ods-card"), children: /* @__PURE__ */ jsxs("div", { className: cn(BUTTON_KIND_CLASS.row, rowHeightClass), children: [
     /* @__PURE__ */ jsx(MediaSkeleton.Icon, { size: "sm", className: "mr-2 flex-shrink-0" }),
     /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: NAV_SKELETON_LABEL_WIDTHS[index % NAV_SKELETON_LABEL_WIDTHS.length] })
   ] }) }) });
@@ -49,7 +50,7 @@ function MultiLevelNavigationSkeleton({
     NavigationTreeSkeleton,
     {
       rows,
-      rowHeightClass: NAV_ROW_HEIGHT.desktop.row,
+      rowHeightClass: NAV_ROW_HEIGHT.desktop,
       indentClass: NAV_INDENT_CLASS.desktop,
       className
     }
@@ -63,7 +64,7 @@ function MobileNavigationDropdownSkeleton({
     NavigationTreeSkeleton,
     {
       rows,
-      rowHeightClass: NAV_ROW_HEIGHT.mobile.row,
+      rowHeightClass: NAV_ROW_HEIGHT.mobile,
       indentClass: NAV_INDENT_CLASS.mobile,
       className
     }
@@ -133,15 +134,11 @@ function NavigationItem({
         children: [
           /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
             /* @__PURE__ */ jsxs(
-              "button",
+              Button,
               {
-                className: cn(
-                  NAV_ROW_CONTENT_CLASS,
-                  NAV_ROW_HEIGHT.desktop.row,
-                  "text-ods-text-primary transition-all duration-150",
-                  !isSelected && "hover:bg-ods-bg-hover",
-                  hasChildren && NAV_ROW_HEIGHT.desktop.toggleRoom
-                ),
+                variant: "row",
+                "data-state": isSelected ? "active" : void 0,
+                className: cn(NAV_ROW_LAYOUT_CLASS, NAV_ROW_HEIGHT.desktop),
                 onClick: () => onNodeClick(node),
                 "aria-label": `${isSelected ? "Selected" : "Select"} ${node.name}`,
                 children: [
@@ -152,12 +149,11 @@ function NavigationItem({
               }
             ),
             hasChildren && /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
-                className: cn(
-                  "absolute right-0 top-0 flex items-center justify-center text-ods-text-secondary transition-colors duration-150 hover:text-ods-text-primary",
-                  NAV_ROW_HEIGHT.desktop.toggle
-                ),
+                variant: "transparent",
+                size: "icon-sm",
+                className: "mr-[var(--spacing-system-xxs)] shrink-0",
                 onClick: (e) => {
                   e.stopPropagation();
                   if (onToggleExpand) {
@@ -167,7 +163,7 @@ function NavigationItem({
                   }
                 },
                 "aria-label": `${isExpanded ? "Collapse" : "Expand"} ${node.name}`,
-                children: isExpanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+                children: isExpanded ? /* @__PURE__ */ jsx(ChevronUp, {}) : /* @__PURE__ */ jsx(ChevronDown, {})
               }
             )
           ] }),
@@ -239,15 +235,11 @@ function MobileNavigationItem({
         children: [
           /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
             /* @__PURE__ */ jsxs(
-              "button",
+              Button,
               {
-                className: cn(
-                  NAV_ROW_CONTENT_CLASS,
-                  NAV_ROW_HEIGHT.mobile.row,
-                  "text-ods-text-primary transition-all duration-150",
-                  !isSelected && "hover:bg-ods-bg-hover",
-                  hasChildren && NAV_ROW_HEIGHT.mobile.toggleRoom
-                ),
+                variant: "row",
+                "data-state": isSelected ? "active" : void 0,
+                className: cn(NAV_ROW_LAYOUT_CLASS, NAV_ROW_HEIGHT.mobile),
                 onClick: () => onNodeClick(node),
                 children: [
                   /* @__PURE__ */ jsx("span", { className: "mr-2 flex-shrink-0", children: node.type === "folder" ? isExpanded ? /* @__PURE__ */ jsx(FolderOpen, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Folder, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" }) }),
@@ -257,12 +249,11 @@ function MobileNavigationItem({
               }
             ),
             hasChildren && /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
-                className: cn(
-                  "absolute right-0 top-0 flex items-center justify-center text-ods-text-secondary transition-colors duration-150 hover:text-ods-text-primary",
-                  NAV_ROW_HEIGHT.mobile.toggle
-                ),
+                variant: "transparent",
+                size: "icon-sm",
+                className: "mr-[var(--spacing-system-xxs)] shrink-0",
                 onClick: (e) => {
                   e.stopPropagation();
                   if (onToggleExpand) {
@@ -272,7 +263,7 @@ function MobileNavigationItem({
                   }
                 },
                 "aria-label": `${isExpanded ? "Collapse" : "Expand"} ${node.name}`,
-                children: isExpanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
+                children: isExpanded ? /* @__PURE__ */ jsx(ChevronUp, {}) : /* @__PURE__ */ jsx(ChevronDown, {})
               }
             )
           ] }),
@@ -299,7 +290,5 @@ export {
   MOBILE_NAVIGATION_SKELETON_ROWS,
   MULTI_LEVEL_NAVIGATION_SKELETON_ROWS,
   MobileNavigationDropdown,
-  MobileNavigationDropdownSkeleton,
-  MultiLevelNavigation,
-  MultiLevelNavigationSkeleton
+  MultiLevelNavigation
 };

package/dist/components/navigation/navigation-sidebar-item.d.ts

@@ -1,6 +1,6 @@
 import { type MouseEvent } from 'react';
 import type { NavigationSidebarItem } from '../../types/navigation';
-export interface NavigationSidebarItemButtonProps {
+interface LoadedNavigationSidebarItemButtonProps {
     item: NavigationSidebarItem;
     /** "You are on this page" — pathname-derived, and the only thing that carries `aria-current`. */
     isActive: boolean;
@@ -14,6 +14,16 @@ export interface NavigationSidebarItemButtonProps {
     disabled: boolean;
     onClick: (item: NavigationSidebarItem, event?: MouseEvent) => void;
 }
+/**
+ * The entry and its handlers, or `loading` while the navigation is read (`NavigationSidebarConfig.loading`): the
+ * row then draws its own loading form (also in a loading scope). `showLabel` is the sidebar's minimized state.
+ */
+export type NavigationSidebarItemButtonProps = (LoadedNavigationSidebarItemButtonProps & {
+    loading?: boolean;
+}) | (Partial<LoadedNavigationSidebarItemButtonProps> & {
+    loading: true;
+    showLabel: boolean;
+});
 /**
  * One sidebar entry.
  *
@@ -29,17 +39,5 @@ export interface NavigationSidebarItemButtonProps {
  * express.
  */
 export declare const NavigationSidebarItemButton: import("react").NamedExoticComponent<NavigationSidebarItemButtonProps>;
-/**
- * One placeholder entry, for `NavigationSidebarConfig.loading`.
- *
- * Deliberately in this file, beside `NavigationSidebarItemButton`: the two must
- * agree on `h-14`, the `p-[var(--spacing-system-m)]` inset, the 24px icon box and
- * the label column, or the nav resizes on the handoff.
- *
- * `showLabel` is the sidebar's own minimized state, so the caller passes what it
- * already passes the real row — no separate width handling.
- */
-export declare function NavigationSidebarItemSkeleton({ showLabel }: {
-    showLabel: boolean;
-}): import("react").JSX.Element;
+export {};
 //# sourceMappingURL=navigation-sidebar-item.d.ts.map

package/dist/components/navigation/navigation-sidebar-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-sidebar-item.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/navigation-sidebar-item.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAyD,KAAK,UAAU,EAAE,MAAM,OAAO,CAAC;AAE/F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAWpE,MAAM,WAAW,gCAAgC;IAC/C,IAAI,EAAE,qBAAqB,CAAC;IAC5B,iGAAiG;IACjG,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,CAAC,IAAI,EAAE,qBAAqB,EAAE,KAAK,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACpE;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,2BAA2B,wEA2GtC,CAAC;AAEH;;;;;;;;;GASG;AACH,wBAAgB,6BAA6B,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,+BASlF"}
+{"version":3,"file":"navigation-sidebar-item.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/navigation-sidebar-item.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAyD,KAAK,UAAU,EAAE,MAAM,OAAO,CAAC;AAE/F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAgBpE,UAAU,sCAAsC;IAC9C,IAAI,EAAE,qBAAqB,CAAC;IAC5B,iGAAiG;IACjG,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,CAAC,IAAI,EAAE,qBAAqB,EAAE,KAAK,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACpE;AAED;;;GAGG;AACH,MAAM,MAAM,gCAAgC,GACxC,CAAC,sCAAsC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,GAChE,CAAC,OAAO,CAAC,sCAAsC,CAAC,GAAG;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAE9F;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,2BAA2B,wEAMtC,CAAC"}

package/dist/components/navigation/navigation-sidebar-item.js

@@ -4,9 +4,16 @@ import { cloneElement, memo } from "react";
 import Link from "../../embed-shims/next-link.js";
 import { cn } from "../../utils/index.js";
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { BUTTON_KIND_CLASS, Button } from "../ui/button/index.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { NavigationItemBadge } from "./navigation-item-badge.js";
 import { UnreadDot } from "./unread-dot.js";
-const NavigationSidebarItemButton = memo(function NavigationSidebarItemButtonImpl({
+const NAV_SIDEBAR_ROW_LAYOUT_CLASS = "h-14";
+const NavigationSidebarItemButton = memo(function NavigationSidebarItemButtonSwitch(props) {
+  if (useLoadingScope() || props.loading) return /* @__PURE__ */ jsx(NavigationSidebarItemSkeleton, { showLabel: props.showLabel });
+  return /* @__PURE__ */ jsx(LoadedNavigationSidebarItemButton, { ...props });
+});
+function LoadedNavigationSidebarItemButton({
   item,
   isActive,
   isPending,
@@ -17,41 +24,6 @@ const NavigationSidebarItemButton = memo(function NavigationSidebarItemButtonImp
   const unreadCount = item.unreadCount ?? 0;
   const hasUnread = unreadCount > 0;
   const name = item.badge ? `${item.label} (${item.badge})` : item.label;
-  const className = cn(
-    // `isolate` scopes the hover layer's negative z-index to this row, so it
-    // paints over the row's own background and under its content instead of
-    // sliding behind the sidebar.
-    "relative isolate flex w-full items-center justify-start",
-    "h-14 p-[var(--spacing-system-m)]",
-    // The hover/pending wash is its own LAYER, and that separation is the whole
-    // point. Hover and active both want the row's background-color, so a
-    // `transition-colors` that smooths hover necessarily smooths the accent too
-    // — and it runs on the OUTGOING row as well as the incoming one. Measured on
-    // a real navigation: for 150ms two rows carried the accent background AND
-    // the accent bar, mid-fade, with nothing to say which one was the page you
-    // were actually on. Shortening it (300ms -> 150ms) only shortened the lie.
-    //
-    // Split apart, each gets the timing its meaning calls for: the wash fades,
-    // because it is decoration reacting to a cursor; the accent switches in a
-    // single frame, because it is a statement of fact — exactly one row is the
-    // current page, at every instant, including the instant the route commits.
-    "after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-ods-bg-hover after:opacity-0 after:transition-opacity after:duration-150 after:content-['']",
-    "before:absolute before:bottom-0 before:left-0 before:top-0 before:w-1 before:content-['']",
-    // Pending borrows the HOVER weight and nothing else — no accent bar, no
-    // accent text, no `aria-current`. It says "this row is working", not "this
-    // is where you are", and it reads as the row staying pressed under the
-    // cursor, which is exactly what happened.
-    !isActive && !disabled && "text-ods-text-primary hover:after:opacity-100 [&_svg]:fill-ods-text-secondary",
-    !isActive && !disabled && isPending && "after:opacity-100",
-    !isActive && disabled && "text-ods-text-secondary [&_svg]:fill-ods-text-secondary",
-    isActive && !disabled && [
-      "bg-[var(--ods-open-yellow-light)] text-ods-accent",
-      "[&_svg]:fill-ods-accent",
-      "before:bg-ods-accent"
-    ],
-    isActive && disabled && "text-ods-text-secondary [&_svg]:fill-ods-text-secondary",
-    disabled && "cursor-not-allowed opacity-50"
-  );
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "relative flex flex-shrink-0 items-center justify-center", children: [
       cloneElement(item.icon, {
@@ -76,23 +48,36 @@ const NavigationSidebarItemButton = memo(function NavigationSidebarItemButtonImp
     hasUnread && showLabel && /* @__PURE__ */ jsx("span", { className: "ml-[var(--spacing-system-xs)] flex h-6 min-w-6 flex-shrink-0 items-center justify-center rounded-md bg-ods-accent px-[var(--spacing-system-xsf)]", children: /* @__PURE__ */ jsx("span", { className: "text-ods-text-on-accent text-h5", children: unreadCount > 99 ? "99+" : unreadCount }) })
   ] });
   const shared = {
-    className,
     title: !showLabel ? name : void 0,
     "aria-label": name,
-    "aria-current": isActive ? "page" : void 0
+    "aria-current": isActive ? "page" : void 0,
+    // A row whose route is still committing: announced, never drawn as the current page.
+    "aria-busy": isPending || void 0
   };
+  const rowState = isActive && !disabled ? "active" : void 0;
   if (disabled || !item.path || item.onClick) {
-    return /* @__PURE__ */ jsx("button", { type: "button", onClick: (event) => onClick(item, event), disabled, ...shared, children: content });
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "row",
+        type: "button",
+        onClick: (event) => onClick(item, event),
+        disabled,
+        "data-state": rowState,
+        className: NAV_SIDEBAR_ROW_LAYOUT_CLASS,
+        ...shared,
+        children: content
+      }
+    );
   }
-  return /* @__PURE__ */ jsx(Link, { href: item.path, onClick: (event) => onClick(item, event), ...shared, children: content });
-});
+  return /* @__PURE__ */ jsx(Button, { asChild: true, variant: "row", "data-state": rowState, className: NAV_SIDEBAR_ROW_LAYOUT_CLASS, children: /* @__PURE__ */ jsx(Link, { href: item.path, onClick: (event) => onClick(item, event), ...shared, children: content }) });
+}
 function NavigationSidebarItemSkeleton({ showLabel }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-14 w-full items-center justify-start p-[var(--spacing-system-m)]", "aria-hidden": "true", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(BUTTON_KIND_CLASS.row, NAV_SIDEBAR_ROW_LAYOUT_CLASS), "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx("div", { className: "relative flex flex-shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-6 rounded" }) }),
     showLabel && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "ml-[var(--spacing-system-xs)] h-4 flex-1 rounded" })
   ] });
 }
 export {
-  NavigationSidebarItemButton,
-  NavigationSidebarItemSkeleton
+  NavigationSidebarItemButton
 };

package/dist/components/navigation/navigation-sidebar-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-sidebar-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/navigation-sidebar-toggle.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,4BAA4B;IAC3C,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,uBAAuB,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,4BAA4B,+BAwCvG"}
+{"version":3,"file":"navigation-sidebar-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/navigation-sidebar-toggle.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,4BAA4B;IAC3C,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,uBAAuB,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,4BAA4B,+BAoCvG"}

package/dist/components/navigation/navigation-sidebar-toggle.js

@@ -2,18 +2,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/index.js";
 import { Chevrons03LeftIcon } from "../icons-v2-generated/index.js";
+import { Button } from "../ui/button/index.js";
 function NavigationSidebarToggle({ minimized, showLabel, onToggle }) {
   return /* @__PURE__ */ jsx("div", { className: "border-t border-ods-border", children: /* @__PURE__ */ jsxs(
-    "button",
+    Button,
     {
+      variant: "row",
       onClick: onToggle,
-      className: cn(
-        "relative flex w-full items-center justify-start",
-        "h-14 p-[var(--spacing-system-m)]",
-        "transition-colors duration-300",
-        "[&_svg]:transition-colors [&_svg]:duration-300",
-        "text-ods-text-primary hover:bg-ods-bg-hover"
-      ),
+      className: "h-14",
       title: minimized ? "Hide Menu" : void 0,
       "aria-label": "Hide Menu",
       children: [

package/dist/components/navigation/navigation-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/navigation-sidebar.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,uBAAuB,EAAyB,MAAM,wBAAwB,CAAC;AAU7F;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,4BAA4B,kCAAkC,CAAC;AAmF5E,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,uBAAuB,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAgB,EAAE,YAAoB,EAAE,EAAE,sBAAsB,+BA0R3G"}
+{"version":3,"file":"navigation-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/navigation-sidebar.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,uBAAuB,EAAyB,MAAM,wBAAwB,CAAC;AAU7F;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,4BAA4B,kCAAkC,CAAC;AAmF5E,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,uBAAuB,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAgB,EAAE,YAAoB,EAAE,EAAE,sBAAsB,+BA8R3G"}

package/dist/components/navigation/navigation-sidebar.js

@@ -7,7 +7,7 @@ import { useLocalStorage } from "../../hooks/ui/use-local-storage.js";
 import { useLgUp, useMdUp } from "../../hooks/ui/use-media-query.js";
 import { cn } from "../../utils/index.js";
 import { NavigationSidebarHeader } from "./navigation-sidebar-header.js";
-import { NavigationSidebarItemButton, NavigationSidebarItemSkeleton } from "./navigation-sidebar-item.js";
+import { NavigationSidebarItemButton } from "./navigation-sidebar-item.js";
 import { NavigationSidebarToggle } from "./navigation-sidebar-toggle.js";
 const MINIMIZED_WIDTH = 56;
 const EXPANDED_WIDTH = 224;
@@ -161,7 +161,7 @@ function NavigationSidebar({ config, disabled = false, pushOnTablet = false }) {
           /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col justify-between overflow-y-auto py-4", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
               config.topSlot?.({ minimized }),
-              /* @__PURE__ */ jsx("nav", { className: "flex flex-col", "aria-label": "Primary navigation", "aria-busy": !!loadingRows, children: loadingRows ? loadingRows.primary.map((key) => /* @__PURE__ */ jsx(NavigationSidebarItemSkeleton, { showLabel }, key)) : primaryItems.map((item) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("nav", { className: "flex flex-col", "aria-label": "Primary navigation", "aria-busy": !!loadingRows, children: loadingRows ? loadingRows.primary.map((key) => /* @__PURE__ */ jsx(NavigationSidebarItemButton, { loading: true, showLabel }, key)) : primaryItems.map((item) => /* @__PURE__ */ jsx(
                 NavigationSidebarItemButton,
                 {
                   item,
@@ -174,7 +174,7 @@ function NavigationSidebar({ config, disabled = false, pushOnTablet = false }) {
                 item.id
               )) })
             ] }),
-            (loadingRows ? loadingRows.secondary.length > 0 : secondaryItems.length > 0) && /* @__PURE__ */ jsx("nav", { className: "flex flex-col", "aria-label": "Secondary navigation", "aria-busy": !!loadingRows, children: loadingRows ? loadingRows.secondary.map((key) => /* @__PURE__ */ jsx(NavigationSidebarItemSkeleton, { showLabel }, key)) : secondaryItems.map((item) => /* @__PURE__ */ jsx(
+            (loadingRows ? loadingRows.secondary.length > 0 : secondaryItems.length > 0) && /* @__PURE__ */ jsx("nav", { className: "flex flex-col", "aria-label": "Secondary navigation", "aria-busy": !!loadingRows, children: loadingRows ? loadingRows.secondary.map((key) => /* @__PURE__ */ jsx(NavigationSidebarItemButton, { loading: true, showLabel }, key)) : secondaryItems.map((item) => /* @__PURE__ */ jsx(
               NavigationSidebarItemButton,
               {
                 item,

package/dist/components/navigation/sticky-section-nav.d.ts

@@ -34,13 +34,6 @@ interface StickySectionNavProps {
  * Used in vendor detail pages, knowledge base, documentation, etc.
  */
 export declare function StickySectionNav({ sections, activeSection, onSectionClick, className, ribbonPosition, ribbonColor, orientation, brand, action, label, }: StickySectionNavProps): React.JSX.Element;
-/**
- * The section navigation while its sections are read: the same bar (horizontal: its brand and action as given,
- * the sections as pill boxes) or list (vertical: its rail, each row a bar of its label).
- */
-export declare function StickySectionNavSkeleton({ orientation, count, brand, action, ribbonPosition, className, }: Pick<StickySectionNavProps, 'orientation' | 'brand' | 'action' | 'ribbonPosition' | 'className'> & {
-    count?: number;
-}): React.JSX.Element;
 /**
  * SIMPLEST POSSIBLE IMPLEMENTATION - Just make it work
  */