laif-ds 0.2.90 → 0.2.92

package/dist/CHANGELOG.md

@@ -5,6 +5,32 @@ All notable technical changes to the laif-ds core will be documented in this fil
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [laif-ds@0.2.92]
+
+### 🐛 Fixed
+
+- **Badge / Alert**: Fixed `variant="success"` and `variant="warning"` rendering with insufficient text contrast — the `bg-d-success-background` and `bg-d-warning-background` utilities were painting the foreground (text) color as the background instead of the intended surface color, collapsing contrast against the paired `-foreground` text. Contrast now resolves correctly to surface + on-surface in both light and dark themes
+
+## [laif-ds@0.2.91]
+
+### 🚀 Added
+
+- **AppSidebar**: Added `collapsible` prop (`"offcanvas" | "icon" | "none"`, default `"offcanvas"`, forwarded to `Sidebar`) to support an icon-only collapsed rail instead of sliding the sidebar fully off-screen
+- **AppSidebar**: In icon mode, top-level items show a tooltip with their title (suppressed while expanded and on mobile), and items with `subItems` open a click-triggered dropdown anchored to the icon with one entry per sub-item; items without `iconName` fall back to showing the initial of their title instead of a blank square
+- **Sheet**: `SheetContent` `side` accepts `"full"`, a viewport-covering sheet that fades and scales up (`zoom-in-95`) instead of sliding in from an edge
+
+### 🔧 Changed
+
+- **AppSidebar**: Items whose own `isActive` or one of whose `subItems` is active now start expanded at mount (in both `navigation` and `navigationFooter`); manually collapsing such an item is remembered and not re-expanded on re-render
+- **AppSidebar**: Expansion state is now keyed by group + url + title, so items with duplicate titles in different groups track their expanded state independently
+- **AppSidebar**: `NavItem.url` is now ignored on items that have `subItems` — the button toggles the submenu/dropdown instead of navigating; only sub-items' own `url`s are used
+- **AppSidebar**: Menu buttons for items with `subItems` no longer render an `<a>` inside a `<button>`
+- **Sidebar**: The mobile sidebar now covers the full screen instead of a ~18rem panel, and opens with a fade + scale-up rather than sliding in from the side; since no page content stays visible behind it, its close button is now shown (with a 44px hit area) and the header reserves room for it
+
+### 🐛 Fixed
+
+- **Sidebar**: In icon collapse mode (`collapsible="icon"`), navigation taller than the viewport is now reachable — content was previously clipped on both axes, not just the horizontal axis intended to hide overflowing labels on the collapsed rail, so vertical scrolling is now allowed
+
 ## [laif-ds@0.2.90]
 
 ### 🐛 Fixed

package/dist/_virtual/index3.js

@@ -1,8 +1,8 @@
 "use client";
-import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as e } from "../node_modules/style-to-js/cjs/index.js";
-var t = e();
-const a = /* @__PURE__ */ r(t);
+import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
+import { __require as t } from "../node_modules/eventemitter3/index2.js";
+var r = t();
+const m = /* @__PURE__ */ e(r);
 export {
-  a as default
+  m as default
 };

package/dist/_virtual/index4.js

@@ -1,8 +1,8 @@
 "use client";
-import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
-import { __require as r } from "../node_modules/extend/index.js";
-var t = r();
-const x = /* @__PURE__ */ e(t);
+import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
+import { __require as e } from "../node_modules/style-to-js/cjs/index.js";
+var t = e();
+const a = /* @__PURE__ */ r(t);
 export {
-  x as default
+  a as default
 };

package/dist/_virtual/index5.js

@@ -1,8 +1,8 @@
 "use client";
 import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
-import { __require as t } from "../node_modules/eventemitter3/index2.js";
-var r = t();
-const m = /* @__PURE__ */ e(r);
+import { __require as r } from "../node_modules/extend/index.js";
+var t = r();
+const x = /* @__PURE__ */ e(t);
 export {
-  m as default
+  x as default
 };

package/dist/agent-docs/adoption-report.json

@@ -1,9 +1,9 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-08-19T08:50:48.383Z",
+  "generatedAt": "2026-08-20T15:52:41.132Z",
   "package": {
     "name": "laif-ds",
-    "version": "0.2.90"
+    "version": "0.2.92"
   },
   "summary": {
     "scannedFiles": 398,
@@ -352,7 +352,7 @@
     "repeatedClassNames": [
       {
         "className": "flex items-center gap-2",
-        "occurrences": 36,
+        "occurrences": 35,
         "files": [
           "src/components/stories/app-checkbox.stories.tsx",
           "src/components/stories/app-dialog.stories.tsx",
@@ -368,7 +368,6 @@
           "src/components/stories/truncated-cell.stories.tsx",
           "src/components/ui/app-form.tsx",
           "src/components/ui/app-kanban.tsx",
-          "src/components/ui/app-sidebar.tsx",
           "src/components/ui/file-previewer.tsx",
           "src/components/ui/weekly-calendar/calendar-header.tsx"
         ]
@@ -498,20 +497,6 @@
           "src/components/stories/theme-switcher.stories.tsx"
         ]
       },
-      {
-        "className": "text-d-muted-foreground",
-        "occurrences": 8,
-        "files": [
-          "src/components/stories/app-dialog.stories.tsx",
-          "src/components/stories/app-time-picker.stories.tsx",
-          "src/components/ui/app-form.tsx",
-          "src/components/ui/app-multiple-select-dropdown.tsx",
-          "src/components/ui/app-select.tsx",
-          "src/components/ui/app-sidebar.tsx",
-          "src/components/ui/date-picker.tsx",
-          "src/components/ui/weekly-calendar/calendar-header.tsx"
-        ]
-      },
       {
         "className": "text-muted-foreground text-xs",
         "occurrences": 8,
@@ -535,6 +520,19 @@
           "src/components/ui/multiple-selector.tsx"
         ]
       },
+      {
+        "className": "text-d-muted-foreground",
+        "occurrences": 7,
+        "files": [
+          "src/components/stories/app-dialog.stories.tsx",
+          "src/components/stories/app-time-picker.stories.tsx",
+          "src/components/ui/app-form.tsx",
+          "src/components/ui/app-multiple-select-dropdown.tsx",
+          "src/components/ui/app-select.tsx",
+          "src/components/ui/date-picker.tsx",
+          "src/components/ui/weekly-calendar/calendar-header.tsx"
+        ]
+      },
       {
         "className": "bg-muted/50 rounded p-4 text-sm",
         "occurrences": 7,
@@ -579,6 +577,14 @@
           "src/components/stories/playground.stories.tsx"
         ]
       },
+      {
+        "className": "flex h-full overflow-hidden",
+        "occurrences": 6,
+        "files": [
+          "src/components/stories/app-sidebar.stories.tsx",
+          "src/components/stories/sidebar.stories.tsx"
+        ]
+      },
       {
         "className": "mb-2 text-sm font-medium",
         "occurrences": 6,
@@ -604,14 +610,6 @@
           "src/components/stories/data-table-no-utils-example.stories.tsx",
           "src/components/stories/data-table-utils-example.stories.tsx"
         ]
-      },
-      {
-        "className": "flex min-h-0 min-w-0 flex-1",
-        "occurrences": 6,
-        "files": [
-          "src/components/stories/data-table-no-utils-example.stories.tsx",
-          "src/components/stories/data-table-utils-example.stories.tsx"
-        ]
       }
     ]
   }

package/dist/agent-docs/components/AppSidebar.md

@@ -8,17 +8,18 @@ High-level app sidebar built on top of `Sidebar` primitives. Renders navigation
 
 ## Props
 
-| Prop               | Type                       | Default      | Description                               |
-| ------------------ | -------------------------- | ------------ | ----------------------------------------- |
-| `navigation`       | `NavGroup[]`               | **required** | Main navigation groups.                   |
-| `navigationFooter` | `NavGroup[]`               | `undefined`  | Footer navigation groups.                 |
-| `versions`         | `string[]`                 | `undefined`  | Optional versions list.                   |
-| `defaultVersion`   | `string`                   | `undefined`  | Default selected version.                 |
-| `headerContent`    | `React.ReactNode`          | `undefined`  | Custom content at the top.                |
-| `footerContent`    | `React.ReactNode`          | `undefined`  | Custom content at the bottom.             |
-| `showRail`         | `boolean`                  | `true`       | Show the draggable sidebar rail.          |
-| `linkComponent`    | `React.ComponentType<any>` | `undefined`  | Custom link component for items.          |
-| `linkProps`        | `Record<string, any>`      | `{}`         | Extra props passed to the link component. |
+| Prop               | Type                              | Default       | Description                                |
+| ------------------ | --------------------------------- | ------------- | ------------------------------------------ |
+| `navigation`       | `NavGroup[]`                      | **required**  | Main navigation groups.                    |
+| `navigationFooter` | `NavGroup[]`                      | `undefined`   | Footer navigation groups.                  |
+| `versions`         | `string[]`                        | `undefined`   | Optional versions list.                    |
+| `defaultVersion`   | `string`                          | `undefined`   | Default selected version.                  |
+| `headerContent`    | `React.ReactNode`                 | `undefined`   | Custom content at the top.                 |
+| `footerContent`    | `React.ReactNode`                 | `undefined`   | Custom content at the bottom.              |
+| `showRail`         | `boolean`                         | `true`        | Show the draggable sidebar rail.           |
+| `collapsible`      | `"offcanvas" \| "icon" \| "none"` | `"offcanvas"` | Collapse behavior, forwarded to `Sidebar`. |
+| `linkComponent`    | `React.ComponentType<any>`        | `undefined`   | Custom link component for items.           |
+| `linkProps`        | `Record<string, any>`             | `{}`          | Extra props passed to the link component.  |
 
 `NavGroup` → `{ title: string; url?: string; items: NavItem[] }`
 
@@ -26,6 +27,10 @@ High-level app sidebar built on top of `Sidebar` primitives. Renders navigation
 
 `NavSubItem` → `{ title: string; url: string; isActive?: boolean; iconName?: IconName }`
 
+`NavItem.url` is **ignored when the item has `subItems`**: that button toggles the
+submenu (or opens the icon-mode dropdown) instead of navigating. Only the
+sub-items' own `url`s are used.
+
 Inherits other props from `Sidebar` via `React.ComponentProps<typeof Sidebar>`.
 
 ---
@@ -33,9 +38,43 @@ Inherits other props from `Sidebar` via `React.ComponentProps<typeof Sidebar>`.
 ## Behavior
 
 - **Collapsible groups**: Clicking items with `subItems` toggles nested lists.
-- **Active state**: `isActive` highlights and expands relevant items/groups.
+- **Active state**: `isActive` highlights the item. An item whose own `isActive`
+  or one of whose `subItems` is active starts already expanded at mount, in
+  `navigation` and `navigationFooter` alike. Auto-expansion applies once per
+  item: collapsing it by hand is remembered and never undone by a re-render.
+- **Duplicate titles are safe**: expansion state is keyed by group + url + title,
+  so the same label in two groups keeps two independent states.
 - **Links**: Use `linkComponent` for framework routers (e.g., Next.js `Link`).
 - **Rail**: `showRail` displays a thin draggable handle to collapse/expand.
+- **No interactive nesting**: the menu button _is_ the link (`asChild`), so there
+  is no `<a>` inside a `<button>`.
+
+---
+
+## Icon mode (`collapsible="icon"`)
+
+The default stays `"offcanvas"` (the sidebar slides out of view when collapsed).
+Pass `collapsible="icon"` to keep a 3rem icon-only rail instead:
+
+```tsx
+<AppSidebar collapsible="icon" navigation={navigation} />
+```
+
+Behavior when collapsed on desktop:
+
+- **Labels hide**, they are never squashed or half-clipped: icon and label are
+  direct children of the menu button, which the `Sidebar` primitive shrinks to
+  `size-8` / `p-2`.
+- **Tooltips**: every top-level item shows a tooltip with its title on the right.
+  Tooltips are suppressed while the sidebar is expanded and on mobile.
+- **Items with `subItems`** open a dropdown on **click**, anchored to the right of
+  the icon, with one entry per sub-item (`url` preserved). Clicking outside
+  closes it. The inline vertical submenu is used only in expanded mode.
+- **Items without `iconName`** fall back to the initial of their title, so they
+  are never a blank square. The full title stays in the accessibility tree and in
+  the tooltip.
+- **Mobile** is unaffected: the sidebar renders in a full-screen `Sheet`, so items
+  keep labels and inline expansion.
 
 ---
 

package/dist/agent-docs/components/Sheet.md

@@ -11,7 +11,10 @@ Side sheet/dialog component with overlay, animated content, header/footer and cl
 - `Sheet`, `SheetTrigger`, `SheetClose`, `SheetContent`
 - `SheetHeader`, `SheetFooter`, `SheetTitle`, `SheetDescription`
 
-`SheetContent` prop `side` supports: `"top" | "right" | "bottom" | "left"` (default: `"right"`).
+`SheetContent` prop `side` supports: `"top" | "right" | "bottom" | "left" | "full"` (default: `"right"`).
+
+`"full"` covers the whole viewport (used by the mobile `Sidebar`). Having no edge to
+slide in from, it fades and scales up (`zoom-in-95`) instead of sliding.
 
 ---
 

package/dist/agent-docs/components/Sidebar.md

@@ -23,7 +23,8 @@ Low-level primitives to build responsive sidebars with desktop/offcanvas modes,
 
 ## Behavior
 
-- **Mobile**: Offcanvas via `Sheet` when on mobile; desktop uses fixed panel.
+- **Mobile**: full-screen `Sheet` (`side="full"`) that fades and scales in, with its
+  close button visible — nothing of the page shows behind it; desktop uses a fixed panel.
 - **Collapsible**: `icon` mode shows only icons and tooltips; `offcanvas` moves panel off-screen.
 - **Keyboard**: Toggle with ⌘/Ctrl + B.
 - **Tooltips**: Menu buttons show tooltips only when collapsed on desktop.

package/dist/agent-docs/components-list.md

@@ -47,7 +47,7 @@ This document provides a complete mapping of all components available in the lai
 
 - **Accordion** - Collapsible content panels for organizing information hierarchically
 - **AppCard** - Enhanced card component with variant styles, semantic states, size control, and loading skeleton support
-- **AppSidebar** - Application sidebar navigation component
+- **AppSidebar** - Application sidebar navigation component, with optional icon-only collapse (`collapsible="icon"`: tooltips on top-level items, dropdown for sub-items)
 - **AppStepper** - Step-by-step progress indicator for multi-step processes
 - **AspectRatio** - Container that maintains a specific aspect ratio for responsive layouts
 - **Breadcrumb** - Breadcrumb navigation component for hierarchical navigation

package/dist/agent-docs/manifest.json

@@ -1,9 +1,9 @@
 {
   "schemaVersion": "1.1.0",
-  "generatedAt": "2026-08-19T08:50:48.109Z",
+  "generatedAt": "2026-08-20T15:52:40.662Z",
   "package": {
     "name": "laif-ds",
-    "version": "0.2.90"
+    "version": "0.2.92"
   },
   "stats": {
     "documentedComponentCount": 93,
@@ -930,6 +930,10 @@
             "title": "Behavior",
             "slug": "behavior"
           },
+          {
+            "title": "Icon mode (`collapsible=\"icon\"`)",
+            "slug": "icon-mode-collapsible-icon"
+          },
           {
             "title": "Examples",
             "slug": "examples"
@@ -952,10 +956,10 @@
       },
       "metadata": {
         "props": {
-          "totalProps": 9,
+          "totalProps": 10,
           "requiredPropsCount": 1,
-          "typedPropsCount": 9,
-          "describedPropsCount": 9
+          "typedPropsCount": 10,
+          "describedPropsCount": 10
         },
         "accessibility": {
           "hasCoverage": true
@@ -6172,5 +6176,5 @@
       ]
     }
   ],
-  "checksum": "bd04a8acdf716cfa1271b8896b1f84d31c5b873787e57ff77578dfa88f346c43"
+  "checksum": "45a413c2a13515169ecf8186102b81f4397185b855629c059394297c6c9c3303"
 }

package/dist/components/ui/app-sidebar.js

@@ -1,106 +1,210 @@
 "use client";
-import { jsxs as c, jsx as t, Fragment as I } from "react/jsx-runtime";
-import * as v from "react";
+import { jsxs as n, jsx as t, Fragment as R } from "react/jsx-runtime";
+import * as s from "react";
+import { designTokens as J } from "../design-tokens.js";
+import { DropdownMenu as Q, DropdownMenuTrigger as U, DropdownMenuContent as V, DropdownMenuItem as W } from "./dropdown-menu.js";
 import { Icon as h } from "./icon.js";
-import { Sidebar as y, SidebarHeader as z, SidebarContent as B, SidebarGroup as x, SidebarGroupLabel as A, SidebarGroupContent as N, SidebarMenu as C, SidebarMenuItem as w, SidebarMenuSub as M, SidebarMenuSubItem as E, SidebarRail as F, SidebarMenuButton as j, SidebarMenuSubButton as D } from "./sidebar.js";
-function K({
-  navigation: u,
-  navigationFooter: G,
-  headerContent: f,
-  footerContent: R,
-  showRail: g = !0,
-  linkComponent: d,
-  linkProps: m = {},
-  ...k
+import { useSidebar as X, Sidebar as Y, SidebarHeader as Z, SidebarContent as _, SidebarRail as k, SidebarGroup as P, SidebarGroupLabel as L, SidebarGroupContent as ee, SidebarMenu as re, SidebarMenuItem as x, SidebarMenuButton as M, SidebarMenuSub as te, SidebarMenuSubItem as ie, SidebarMenuSubButton as T } from "./sidebar.js";
+import { Tooltip as ne, TooltipTrigger as ce, TooltipContent as se } from "./tooltip.js";
+import { cn as le } from "../../lib/utils.js";
+const $ = (c, l) => `${c.title} ${l.url} ${l.title}`, D = (c) => `${c.url} ${c.title}`;
+function me({
+  navigation: c,
+  navigationFooter: l,
+  headerContent: w,
+  footerContent: j,
+  showRail: z = !0,
+  collapsible: f,
+  linkComponent: a,
+  linkProps: p = {},
+  ...G
 }) {
-  const [b, o] = v.useState({});
-  v.useEffect(() => {
-    o((e) => {
-      const n = { ...e };
-      return u.forEach((l) => {
-        l.items.some(
-          (r) => r.isActive || r.subItems && r.subItems.some((s) => s.isActive)
-        ) && (n[l.title] = !0);
-      }), n;
+  const { state: K, isMobile: I } = X(), B = s.useId(), m = f === "icon" && K === "collapsed" && !I, [O, y] = s.useState({}), g = s.useMemo(
+    () => [...c, ...l ?? []].flatMap(
+      (e) => e.items.filter(
+        (r) => r.subItems?.length && (r.isActive || r.subItems.some((i) => i.isActive))
+      ).map((r) => $(e, r))
+    ).join("|"),
+    [c, l]
+  );
+  s.useEffect(() => {
+    g && y((e) => {
+      const r = g.split("|").filter((i) => e[i] === void 0);
+      return r.length ? { ...e, ...Object.fromEntries(r.map((i) => [i, !0])) } : e;
     });
-  }, [u]);
-  const S = (e, n, l) => {
-    const i = e.subItems && e.subItems.length > 0, r = /* @__PURE__ */ c(I, { children: [
-      /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
-        e.iconName && /* @__PURE__ */ t(h, { name: e.iconName, size: "sm" }),
-        /* @__PURE__ */ t("span", { children: e.title })
-      ] }),
-      i && /* @__PURE__ */ t("div", { className: "text-d-muted-foreground", children: n ? /* @__PURE__ */ t(h, { name: "ChevronDown", className: "h-4 w-4" }) : /* @__PURE__ */ t(h, { name: "ChevronRight", className: "h-4 w-4" }) })
+  }, [g]);
+  const v = s.useRef(/* @__PURE__ */ new Map()), A = s.useRef(null), N = (e) => (r) => {
+    r ? v.current.set(e, r) : v.current.delete(e);
+  };
+  s.useLayoutEffect(() => {
+    const e = A.current;
+    !e || document.activeElement !== document.body || v.current.get(e)?.focus();
+  }, [m]);
+  const o = (e) => e.iconName ? /* @__PURE__ */ t(h, { name: e.iconName, size: "sm" }) : f !== "icon" ? null : /* @__PURE__ */ t(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "flex size-4 shrink-0 items-center justify-center text-xs font-semibold uppercase opacity-0 transition-opacity group-data-[collapsible=icon]:opacity-100",
+      children: e.title.charAt(0)
+    }
+  ), F = (e) => {
+    const r = /* @__PURE__ */ n(R, { children: [
+      e.iconName && /* @__PURE__ */ t(h, { name: e.iconName, size: "xs" }),
+      /* @__PURE__ */ t("span", { children: e.title })
     ] });
-    return d ? /* @__PURE__ */ t(j, { isActive: e.isActive, children: /* @__PURE__ */ t(
-      d,
+    return a ? /* @__PURE__ */ t(T, { isActive: e.isActive, asChild: !0, children: /* @__PURE__ */ t(
+      a,
       {
-        href: i ? "#" : e.url,
-        className: "flex w-full items-center justify-between gap-2",
-        onClick: i ? l : void 0,
-        ...m,
+        href: e.url,
+        className: "flex w-full items-center gap-2",
+        "aria-current": e.isActive ? "page" : void 0,
+        ...p,
         children: r
       }
-    ) }) : /* @__PURE__ */ t(j, { isActive: e.isActive, children: /* @__PURE__ */ t(
+    ) }) : /* @__PURE__ */ t(T, { isActive: e.isActive, asChild: !0, children: /* @__PURE__ */ t(
       "a",
       {
-        href: i ? "#" : e.url,
-        className: "flex w-full items-center justify-between gap-2",
-        onClick: i ? l : void 0,
+        href: e.url,
+        className: "flex w-full items-center gap-2",
+        "aria-current": e.isActive ? "page" : void 0,
         children: r
       }
     ) });
-  }, p = (e) => {
-    const n = /* @__PURE__ */ c(I, { children: [
+  }, H = (e) => {
+    const r = /* @__PURE__ */ n(R, { children: [
       e.iconName && /* @__PURE__ */ t(h, { name: e.iconName, size: "xs" }),
       /* @__PURE__ */ t("span", { children: e.title })
-    ] });
-    return d ? /* @__PURE__ */ t(D, { isActive: e.isActive, asChild: !0, children: /* @__PURE__ */ t(
-      d,
+    ] }), i = le(
+      "flex w-full items-center gap-2",
+      e.isActive && J.dropdownItem.selected
+    );
+    return /* @__PURE__ */ t(W, { asChild: !0, children: a ? /* @__PURE__ */ t(
+      a,
       {
         href: e.url,
-        className: "flex w-full items-center gap-2",
-        ...m,
-        children: n
+        className: i,
+        "aria-current": e.isActive ? "page" : void 0,
+        ...p,
+        children: r
       }
-    ) }) : /* @__PURE__ */ t(D, { isActive: e.isActive, asChild: !0, children: /* @__PURE__ */ t("a", { href: e.url, className: "flex w-full items-center gap-2", children: n }) });
-  };
-  return /* @__PURE__ */ c(y, { ...k, children: [
-    f && /* @__PURE__ */ t(z, { children: f }),
-    /* @__PURE__ */ t(B, { children: u.map((e) => /* @__PURE__ */ c(x, { children: [
-      e.title && /* @__PURE__ */ t(A, { children: e.title }),
-      /* @__PURE__ */ t(N, { children: /* @__PURE__ */ t(C, { children: e.items.map((n) => {
-        const l = n.subItems && n.subItems.length > 0, i = b[n.title] || !1;
-        return /* @__PURE__ */ c(w, { children: [
-          S(n, i, (s) => {
-            l && (s.preventDefault(), o((a) => ({
-              ...a,
-              [n.title]: !a[n.title]
-            })));
-          }),
-          l && i && /* @__PURE__ */ t(M, { children: n.subItems.map((s) => /* @__PURE__ */ t(E, { children: p(s) }, s.title)) })
-        ] }, n.title);
-      }) }) })
-    ] }, e.title)) }),
-    G?.map((e) => /* @__PURE__ */ c(x, { children: [
-      e.title && /* @__PURE__ */ t(A, { children: e.title }),
-      /* @__PURE__ */ t(N, { children: /* @__PURE__ */ t(C, { children: e.items.map((n) => {
-        const l = n.subItems && n.subItems.length > 0, i = b[n.title] || !1;
-        return /* @__PURE__ */ c(w, { children: [
-          S(n, i, (s) => {
-            l && (s.preventDefault(), o((a) => ({
-              ...a,
-              [n.title]: !a[n.title]
-            })));
-          }),
-          l && i && /* @__PURE__ */ t(M, { children: n.subItems.map((s) => /* @__PURE__ */ t(E, { children: p(s) }, s.title)) })
-        ] }, n.title);
-      }) }) })
-    ] }, e.title)),
-    R,
-    g && /* @__PURE__ */ t(F, {})
+    ) : /* @__PURE__ */ t(
+      "a",
+      {
+        href: e.url,
+        className: i,
+        "aria-current": e.isActive ? "page" : void 0,
+        children: r
+      }
+    ) }, D(e));
+  }, q = (e, r) => {
+    const i = $(e, r), S = r.subItems ?? [], b = O[i] ?? !1, E = `${B}-${i.replace(/[^\w-]+/g, "-")}-submenu`, u = /* @__PURE__ */ t("span", { className: "truncate", children: r.title });
+    return S.length === 0 ? /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(
+      M,
+      {
+        asChild: !0,
+        isActive: r.isActive,
+        tooltip: r.title,
+        children: a ? /* @__PURE__ */ n(
+          a,
+          {
+            href: r.url,
+            "aria-current": r.isActive ? "page" : void 0,
+            ...p,
+            children: [
+              o(r),
+              u
+            ]
+          }
+        ) : /* @__PURE__ */ n(
+          "a",
+          {
+            href: r.url,
+            "aria-current": r.isActive ? "page" : void 0,
+            children: [
+              o(r),
+              u
+            ]
+          }
+        )
+      }
+    ) }, i) : m ? /* @__PURE__ */ t(x, { children: /* @__PURE__ */ n(ne, { children: [
+      /* @__PURE__ */ n(Q, { modal: !1, children: [
+        /* @__PURE__ */ t(U, { asChild: !0, children: /* @__PURE__ */ t(ce, { asChild: !0, children: /* @__PURE__ */ n(
+          M,
+          {
+            ref: N(i),
+            type: "button",
+            isActive: r.isActive,
+            onFocus: () => {
+              A.current = i;
+            },
+            children: [
+              o(r),
+              u
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ t(
+          V,
+          {
+            side: "right",
+            align: "start",
+            sideOffset: 8,
+            className: "min-w-48",
+            children: S.map(H)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(
+        se,
+        {
+          side: "right",
+          align: "center",
+          hidden: !m,
+          children: r.title
+        }
+      )
+    ] }) }, i) : /* @__PURE__ */ n(x, { children: [
+      /* @__PURE__ */ n(
+        M,
+        {
+          ref: N(i),
+          type: "button",
+          isActive: r.isActive,
+          tooltip: r.title,
+          "aria-expanded": b,
+          "aria-controls": E,
+          onFocus: () => {
+            A.current = i;
+          },
+          onClick: () => y((d) => ({ ...d, [i]: !d[i] })),
+          children: [
+            o(r),
+            u,
+            /* @__PURE__ */ t(
+              h,
+              {
+                name: b ? "ChevronDown" : "ChevronRight",
+                className: "text-d-muted-foreground ml-auto size-4 shrink-0 group-data-[collapsible=icon]:hidden"
+              }
+            )
+          ]
+        }
+      ),
+      b && /* @__PURE__ */ t(te, { id: E, children: S.map((d) => /* @__PURE__ */ t(ie, { children: F(d) }, D(d))) })
+    ] }, i);
+  }, C = (e) => /* @__PURE__ */ n(P, { children: [
+    e.title && /* @__PURE__ */ t(L, { children: e.title }),
+    /* @__PURE__ */ t(ee, { children: /* @__PURE__ */ t(re, { children: e.items.map((r) => q(e, r)) }) })
+  ] }, e.title);
+  return /* @__PURE__ */ n(Y, { collapsible: f, ...G, children: [
+    w && /* @__PURE__ */ t(Z, { children: w }),
+    /* @__PURE__ */ t(_, { children: c.map((e) => C(e)) }),
+    l?.map((e) => C(e)),
+    j,
+    z && /* @__PURE__ */ t(k, {})
   ] });
 }
 export {
-  K as AppSidebar
+  me as AppSidebar
 };