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

package/dist/components/navigation/index.cjs

@@ -29,15 +29,15 @@
 
 
 
-var _chunkYFTQ2ALUcjs = require('../../chunk-YFTQ2ALU.cjs');
+var _chunkA7FSNBNVcjs = require('../../chunk-A7FSNBNV.cjs');
 
 
 
 
 
 
-var _chunk3V27UHSHcjs = require('../../chunk-3V27UHSH.cjs');
-require('../../chunk-WAQPW4CB.cjs');
+var _chunkD46WFWWIcjs = require('../../chunk-D46WFWWI.cjs');
+require('../../chunk-LDGR5VCK.cjs');
 
 
 
@@ -52,31 +52,30 @@ require('../../chunk-WAQPW4CB.cjs');
 
 
 
-var _chunkXN6LXMH5cjs = require('../../chunk-XN6LXMH5.cjs');
-require('../../chunk-LJT2KRE2.cjs');
-require('../../chunk-RB7VLVMD.cjs');
-require('../../chunk-V3W56L2D.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-E64HPPRH.cjs');
-require('../../chunk-2JRSYWFP.cjs');
+require('../../chunk-ZV6RQNXE.cjs');
+require('../../chunk-VXAKQRV7.cjs');
 require('../../chunk-24I6RFVU.cjs');
 require('../../chunk-A6P6DHEZ.cjs');
 require('../../chunk-MZ4KBSH7.cjs');
-require('../../chunk-LNCBN4BL.cjs');
-require('../../chunk-C42WIUH6.cjs');
+require('../../chunk-SMEX3BWO.cjs');
 
 
 
-var _chunkNWZSYG4Scjs = require('../../chunk-NWZSYG4S.cjs');
+var _chunkHLZUBJPLcjs = require('../../chunk-HLZUBJPL.cjs');
 
 
 
-var _chunkKM2TVQCHcjs = require('../../chunk-KM2TVQCH.cjs');
-require('../../chunk-EHJE3UWZ.cjs');
-require('../../chunk-KKAY6GPU.cjs');
-require('../../chunk-5QP3K2CE.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,20 +1864,21 @@ require('../../chunk-LMBYZITR.cjs');
 require('../../chunk-TMVC7S2R.cjs');
 require('../../chunk-IYHH5EIO.cjs');
 require('../../chunk-XIBCMGBW.cjs');
-require('../../chunk-CZIMISAR.cjs');
-require('../../chunk-XXJL5GY3.cjs');
-require('../../chunk-57B5RUYD.cjs');
+require('../../chunk-3IHGS44W.cjs');
+require('../../chunk-OJZBZH56.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-OJLZ7PGO.cjs');
-require('../../chunk-MYHS4W2H.cjs');
-require('../../chunk-R3JX4MXD.cjs');
-require('../../chunk-SETFUCZA.cjs');
-require('../../chunk-VFUMM6JC.cjs');
-require('../../chunk-HY6BCZH7.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');
@@ -1887,24 +1887,26 @@ require('../../chunk-6VOOPMP5.cjs');
 require('../../chunk-ORO54HDF.cjs');
 require('../../chunk-RUHKTWGB.cjs');
 require('../../chunk-BLH2SFOO.cjs');
-require('../../chunk-3LW5TD54.cjs');
-require('../../chunk-ASMNNSUQ.cjs');
+require('../../chunk-DJTPDK3W.cjs');
+require('../../chunk-7PNRXJX2.cjs');
 require('../../chunk-NTPX5GXI.cjs');
-require('../../chunk-VFZFCRAL.cjs');
-require('../../chunk-5P4TDV7V.cjs');
-require('../../chunk-DGFDBPO7.cjs');
-require('../../chunk-E76ONBKF.cjs');
+require('../../chunk-AQXKXZWB.cjs');
+require('../../chunk-V4FXUIMH.cjs');
+require('../../chunk-SZHDXXMK.cjs');
+require('../../chunk-IYU2ZH2J.cjs');
+require('../../chunk-5GJM7VRR.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');
 
 
@@ -1957,4 +1959,4 @@ require('../../chunk-KHKPLOU4.cjs');
 
 
 
-exports.ASK_AI_OPEN_EVENT = _chunkKM2TVQCHcjs.ASK_AI_OPEN_EVENT; exports.ASK_AI_OPEN_WITH_REF_EVENT = _chunkKM2TVQCHcjs.ASK_AI_OPEN_WITH_REF_EVENT; exports.AppHeader = _chunkYFTQ2ALUcjs.AppHeader; exports.AppLayout = _chunkYFTQ2ALUcjs.AppLayout; exports.AppLayoutDrawer = _chunkXN6LXMH5cjs.AppLayoutDrawerRoot; exports.AppLayoutDrawerBody = _chunkXN6LXMH5cjs.AppLayoutDrawerBody; exports.AppLayoutDrawerClose = _chunkXN6LXMH5cjs.AppLayoutDrawerClose; exports.AppLayoutDrawerContent = _chunkXN6LXMH5cjs.AppLayoutDrawerContent; exports.AppLayoutDrawerDescription = _chunkXN6LXMH5cjs.AppLayoutDrawerDescription; exports.AppLayoutDrawerFooter = _chunkXN6LXMH5cjs.AppLayoutDrawerFooter; exports.AppLayoutDrawerHeader = _chunkXN6LXMH5cjs.AppLayoutDrawerHeader; exports.AppLayoutDrawerTitle = _chunkXN6LXMH5cjs.AppLayoutDrawerTitle; exports.AppLayoutDrawerTrigger = _chunkXN6LXMH5cjs.AppLayoutDrawerTrigger; exports.HeaderButton = _chunkXN6LXMH5cjs.HeaderButton; exports.HeaderGlobalSearch = _chunkYFTQ2ALUcjs.HeaderGlobalSearch; exports.HeaderMingoButton = _chunkYFTQ2ALUcjs.HeaderMingoButton; exports.HeaderOrganizationFilter = _chunkYFTQ2ALUcjs.HeaderOrganizationFilter; exports.MOBILE_NAV_SHEET_ID = _chunkYFTQ2ALUcjs.MOBILE_NAV_SHEET_ID; exports.MingoAiButton = _chunkNWZSYG4Scjs.MingoAiButton; exports.MobileBurgerMenu = _chunkYFTQ2ALUcjs.MobileBurgerMenu; exports.MobileNavSheet = _chunkYFTQ2ALUcjs.MobileNavSheet; exports.MobileNavigationDropdown = _chunk3V27UHSHcjs.MobileNavigationDropdown; exports.MultiLevelNavigation = _chunk3V27UHSHcjs.MultiLevelNavigation; exports.NAVIGATION_SIDEBAR_WIDTH_VAR = _chunkYFTQ2ALUcjs.NAVIGATION_SIDEBAR_WIDTH_VAR; exports.NavItemRow = _chunkYFTQ2ALUcjs.NavItemRow; exports.NavPanel = _chunkYFTQ2ALUcjs.NavPanel; exports.NavigationItemBadge = _chunkYFTQ2ALUcjs.NavigationItemBadge; exports.NavigationSidebar = _chunkYFTQ2ALUcjs.NavigationSidebar; exports.PAGE_ANCHOR_GAP_PX = _chunkYFTQ2ALUcjs.PAGE_ANCHOR_GAP_PX; exports.PAGE_ANCHOR_SCOPE_CLASS = _chunkYFTQ2ALUcjs.PAGE_ANCHOR_SCOPE_CLASS; exports.PAGE_ANCHOR_SCROLL_MARGIN_CLASS = _chunkYFTQ2ALUcjs.PAGE_ANCHOR_SCROLL_MARGIN_CLASS; exports.PageSectionBar = _chunkYFTQ2ALUcjs.PageSectionBar; exports.SECTION_BAR_HEIGHT_PX = _chunkYFTQ2ALUcjs.SECTION_BAR_HEIGHT_PX; exports.SIDE_PANEL_FRAME_WIDTH = _chunkYFTQ2ALUcjs.SIDE_PANEL_FRAME_WIDTH; exports.SiteFooter = _chunkYFTQ2ALUcjs.SiteFooter; exports.SiteHeader = _chunkYFTQ2ALUcjs.SiteHeader; exports.SlidingSidebar = _chunkYFTQ2ALUcjs.SlidingSidebar; exports.StickySectionNav = _chunk3V27UHSHcjs.StickySectionNav; exports.TicketAlertsButton = _chunkYFTQ2ALUcjs.TicketAlertsButton; exports.TopNavigation = _chunkYFTQ2ALUcjs.TopNavigation; exports.UnreadCountBadge = _chunkXN6LXMH5cjs.UnreadCountBadge; exports.UnreadDot = _chunkXN6LXMH5cjs.UnreadDot; exports.defaultRenderSiteNavLink = _chunkYFTQ2ALUcjs.defaultRenderSiteNavLink; exports.isMegaMenu = _chunkYFTQ2ALUcjs.isMegaMenu; exports.navLinkLabel = _chunkYFTQ2ALUcjs.navLinkLabel; exports.openAskAi = _chunkNWZSYG4Scjs.openAskAi; exports.siteNavHasMobileMenus = _chunkYFTQ2ALUcjs.siteNavHasMobileMenus; exports.useAppLayoutDrawerContainer = _chunkXN6LXMH5cjs.useAppLayoutDrawerContainer; exports.useScrollSpy = _chunk3V27UHSHcjs.useScrollSpy; exports.useSectionNavigation = _chunk3V27UHSHcjs.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/nav-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nav-panel.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/nav-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAY,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAIhE,OAAO,EAA4B,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAKrF,mFAAmF;AACnF,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC,GAAG,OAAO,CAE7F;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACrF,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;AAsChE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,sFAuGnB,CAAC"}
+{"version":3,"file":"nav-panel.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/nav-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA+C,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACzF,OAAO,KAAK,EAAY,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAKhE,OAAO,EAA4B,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AA2ErF,mFAAmF;AACnF,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC,GAAG,OAAO,CAE7F;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACrF,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;AAsChE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,sFA4FnB,CAAC"}

package/dist/components/navigation/nav-panel.js

@@ -1,10 +1,54 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useEffect, useSyncExternalStore } from "react";
+import { afterPageLoad } from "../../utils/after-page-load.js";
 import { cn } from "../../utils/cn.js";
-import { CaseStudyCard } from "../chat/entity-cards/case-study-card.js";
 import { NavItemRow } from "./nav-item-row.js";
 import { defaultRenderSiteNavLink } from "./site-nav-link.js";
+let featureCard = null;
+let featureCardLoad = null;
+const featureCardListeners = /* @__PURE__ */ new Set();
+function loadFeatureCard() {
+  if (featureCard || featureCardLoad) return;
+  featureCardLoad = import("../chat/entity-cards/case-study-card.js").then((module) => {
+    featureCard = module.CaseStudyCard;
+    for (const listener of featureCardListeners) listener();
+  }).catch(() => void 0).finally(() => {
+    featureCardLoad = null;
+  });
+}
+function subscribeToFeatureCard(listener) {
+  featureCardListeners.add(listener);
+  const cancel = afterPageLoad(loadFeatureCard);
+  return () => {
+    featureCardListeners.delete(listener);
+    cancel();
+  };
+}
+const loadedFeatureCard = () => featureCard;
+const noFeatureCard = () => null;
+function FeatureCards({
+  features,
+  open,
+  onNavigate
+}) {
+  const Card = useSyncExternalStore(subscribeToFeatureCard, loadedFeatureCard, noFeatureCard);
+  useEffect(() => {
+    if (open) loadFeatureCard();
+  }, [open]);
+  if (!Card) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: features.map((feature) => /* @__PURE__ */ jsx("div", { className: "min-h-0 min-w-0 overflow-hidden", children: /* @__PURE__ */ jsx(
+    Card,
+    {
+      size: "menu",
+      study: feature.study,
+      href: feature.href,
+      mediaMounted: open,
+      onNavigate,
+      className: "h-full"
+    }
+  ) }, feature.id)) });
+}
 const TWO_COLUMN_OVER = 4;
 function isMegaMenu(menu) {
   return (menu.columns?.length ?? 0) > 1 || !!menu.features?.length || !!menu.sideLinks?.length;
@@ -82,17 +126,7 @@ const NavPanel = forwardRef(function NavPanelImpl({
                 columns.map((group) => /* @__PURE__ */ jsx(Column, { group, wide: true, rowProps }, group.id)),
                 !!menu.features?.length && // One row of cards, as many as the bar's width holds: a card that
                 // would wrap lands on a zero-height row, where its cell clips it.
-                /* @__PURE__ */ jsx("div", { className: "grid min-w-0 flex-[3] auto-rows-[0px] grid-cols-[repeat(auto-fit,minmax(240px,1fr))] grid-rows-[minmax(0,1fr)] gap-x-[var(--spacing-system-mf)]", children: menu.features.map((feature) => /* @__PURE__ */ jsx("div", { className: "min-h-0 min-w-0 overflow-hidden", children: /* @__PURE__ */ jsx(
-                  CaseStudyCard,
-                  {
-                    size: "menu",
-                    study: feature.study,
-                    href: feature.href,
-                    mediaMounted: open,
-                    onNavigate,
-                    className: "h-full"
-                  }
-                ) }, feature.id)) }),
+                /* @__PURE__ */ jsx("div", { className: "grid min-w-0 flex-[3] auto-rows-[0px] grid-cols-[repeat(auto-fit,minmax(240px,1fr))] grid-rows-[minmax(0,1fr)] gap-x-[var(--spacing-system-mf)]", children: /* @__PURE__ */ jsx(FeatureCards, { features: menu.features, open, onNavigate }) }),
                 !!menu.sideLinks?.length && /* @__PURE__ */ jsxs("div", { className: "flex w-[260px] shrink-0 flex-col gap-0.5 border-l border-ods-border pl-8 pt-5", children: [
                   menu.sideTitle && /* @__PURE__ */ jsx("div", { className: HEADING_CLASS, children: menu.sideTitle }),
                   menu.sideLinks.map((link) => /* @__PURE__ */ jsx(

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
 };