@stackone/malachite 2.65.0 → 2.66.0

package/COMPONENTS.md

@@ -61,7 +61,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`Tabs`** — Tabbed navigation switching between content panels. `trailing` puts content on the same row, settled against its end — a count, a scope picker, the state the tabs are showing — inside the rule this component already draws. Without it a consumer had to redraw that rule to carry it past the tabs, and the tab list, which cannot wrap, would not yield any width to what sat beside it. The tabs hold their width and the trailing content gives ground; the `tablist` role stays on the tabs alone, so the extra content is not announced as one. _Key props:_ `TabItem[]`, `activeKey`, `onChange`, `trailing`, `className`, `style`.
 - **`Breadcrumbs`** — Breadcrumb trail with caret separators, an optional back button (shown only when there is more than one crumb AND the parent — the second-to-last — carries a `url` to target) and a right-aligned `actions` row. A lone crumb marked `isRoot` switches to title mode: plain emphasised text, no trail chrome, but the `actions` row still renders. Renders as a `nav`/`ol` with `aria-current="page"` on the last crumb. Pass `renderLink` to route crumbs through the app's own router instead of a plain `<a>`. Used by `PageLayout`, but standalone too. _Key props:_ `links[]` (`name`, `url`, `isRoot`), `actions[]`, `renderLink`, `className`, `style`.
 - **`ActionMenu`** — Dropdown menu of actions (kebab/overflow style). The trigger is an icon-only `Button` by default, so `size` draws exactly the square a `Button` of that size draws beside it: `xsmall` is Figma's 20px "Button Element - Square (X-Small)", `small` the 28px rung above it. Both squares are fixed rather than read off the `controlHeights` tokens, so re-theming those does not resize the trigger. A supplied `triggerIcon` is held to the tier's glyph size — 11px at `xsmall`, 16px at `small`. At 20px the `xsmall` trigger meets WCAG 2.5.8 through the *Spacing* exception rather than the 24px minimum, so keep at least 4px between adjacent triggers. `showLabel` draws `label` beside the icon instead of leaving it to the accessible name — for a menu that is the point of its corner rather than an overflow for a row that already says what it acts on — and `variant` puts the trigger on any `Button` variant, so a menu handing work to the assistant can wear the assistant ground rather than the overflow-kebab outline. An item's `icon` leads its label: every caller's names the action itself — copy, open, delete — and an icon that is part of an item's identity belongs where the eye starts rather than right-aligned, where it reads as a status column. The menu is Figma's `Dropdown Component - Options List`: a fixed sized to its widest item between a 180px floor and the 280px Figma draws, by default under the trigger's right edge, 14px below it, flipping above or clamping sideways when the viewport has no room, rounding at the library's 12px and padding wider (8px) than the menu a `Dropdown` opens. Items read in the primary text colour, or the secondary one with `tone="muted"` (e.g. a sidebar's menus); destructive ones in red; `danger: 'hover'` keeps an item in its normal colour and turns it destructive (red text on a light red ground) only on hover or keyboard focus, for an action like signing out. A ceiling rather than a flat width: taken literally it gave a menu of four short verbs 130px of air and made every kebab in an app the same width whatever it held. `minWidth` only raises it above that ceiling, so it is the one way to go past 280px, and a label too long for the box truncates rather than wrapping. _Key props:_ `ActionMenuItem[]`, `size`, `label`, `triggerIcon`, `minWidth`, `showLabel`, `variant`, `tone` (`default` | `muted`), `trigger` (your own control in place of the kebab, cloned with the menu's ref and aria state), `placement` (`bottom-end` default | `bottom-start` | `right-start` | `top-start` | `top-center`), `offset` (`small` 8px | `medium` 12px | `large` 14px; applies to every placement; without it the default `bottom-end` keeps the options menu's 14px and the others use 8px). An item's `tag` (e.g. an "Early access" `Tag`) follows its label in a lazily loaded shadow host of its own, since the menu renders into `document.body`, and joins its accessible name; `current: true` marks the item for the page the user is on (`aria-current="page"` and the selected row paint; a `danger` item keeps its red text). An item with an `href` is a link: Cmd/Ctrl-click or a middle click opens it in a new tab and closes the menu, while a plain click runs `onClick` in its place when one is given (so a router can navigate in-app); Enter and Space both activate it. `target: '_blank'` opens it in a new tab, adds `noopener noreferrer` and tells screen readers it opens a new tab. An item with `type: 'text'` is context rather than an action (an account's email above its actions): secondary text the arrow keys skip. Opened from the keyboard, focus lands on the first item; Up/Down/Home/End move through enabled items, Tab closes the menu and moves on as usual; Escape or a picked item returns focus to the trigger.
-- **`NavItem`** — A row in an app's side navigation. Idle rows read secondary and take the list hover; the `active` row wears the accent tint and sets `aria-current="page"` on a link. `collapsed` shrinks it to a 36px icon tile whose label becomes the accessible name and a right-hand tooltip, with any `badge` pinned to the tile's corner. `variant="subitem"` indents a child row behind a dot instead of an icon; `disclosure` makes a group header button with `aria-expanded` and a rotating chevron, and `hasActiveChild` colours its text while a child is current. Renders an `<a>` with `href`, the element passed with `asChild` (a router `Link`), or a `<button>`, and forwards its ref and extra attributes so it can be a `Popover` or `ActionMenu` trigger. _Key props:_ `label`, `icon`, `active`, `hasActiveChild`, `collapsed`, `variant` (`item` | `subitem`), `danger`, `trailing`, `badge`, `disclosure` (`expanded` | `collapsed`), `tooltip`, `accessibleLabel` (overrides the accessible name; collapsed it defaults to the tooltip text plus `badgeLabel`), `href`, `target`, `rel`, `onClick`, `asChild` + `children`, `className`, `size` (`medium` | `small`, the tighter row for lists inside a popover), `tag` (beside the label, e.g. early access), `badgeLabel` (read in place of the badge and added to the collapsed name). A passed `aria-expanded` (e.g. from a `Popover`) wins over `disclosure`, and a button row forwards a passed `aria-current`.
+- **`NavItem`** — A row in an app's side navigation. Idle rows read secondary and take the list hover; the `active` row wears the accent tint and sets `aria-current="page"` on a link. `collapsed` shrinks it to a 36px icon tile whose label becomes the accessible name and a right-hand tooltip, with any `badge` pinned to the tile's corner. `variant="subitem"` indents a child row behind a dot instead of an icon; `disclosure` makes a group header button with `aria-expanded` and a rotating chevron, and `hasActiveChild` colours its text while a child is current. Renders an `<a>` with `href`, the element passed with `asChild` (a router `Link`), or a `<button>`, and forwards its ref and extra attributes so it can be a `Popover` or `ActionMenu` trigger. `disabled` keeps the row a tab stop with `aria-disabled`, drops its hover and pointer, and ignores clicks, Enter and Space; a `Popover` or `ActionMenu` it triggers stays shut on press, hover, focus and arrow keys, while other keys still reach a passed `onKeyDown` so arrow navigation through a list keeps working; a disabled `href` row renders as a button so it cannot be followed. `disabledReason` explains it in a right-hand tooltip on hover and focus and is the row's accessible description from the first focus. Not with `asChild`, whose child would still navigate. _Key props:_ `label`, `icon`, `active`, `hasActiveChild`, `collapsed`, `variant` (`item` | `subitem`), `danger`, `trailing`, `badge`, `disclosure` (`expanded` | `collapsed`), `tooltip`, `accessibleLabel` (overrides the accessible name; collapsed it defaults to the tooltip text plus `badgeLabel`), `href`, `target`, `rel`, `onClick`, `asChild` + `children`, `className`, `size` (`medium` | `small`, the tighter row for lists inside a popover), `tag` (beside the label, e.g. early access), `badgeLabel` (read in place of the badge and added to the collapsed name), `disabled`, `disabledReason`. A passed `aria-expanded` (e.g. from a `Popover`) wins over `disclosure`, and a button row forwards a passed `aria-current`.
 - **`Sidebar`** — An app's left navigation shell, pinned to the viewport's left edge: 260px wide, 60px `collapsed`, on the sunken page background. Composed from `Sidebar.Header` (a 56px band for `Sidebar.Switcher`, the logo + workspace + parent trigger), `Sidebar.Body` (the part that scrolls), `Sidebar.Notices`, `Sidebar.Search`, `Sidebar.Section` (rows of `NavItem`s at the gutter), `Sidebar.Group` + `Sidebar.GroupItems` (a disclosure header and its sub-items), `Sidebar.Divider`, `Sidebar.Usage` (a `UsageCard` placed at the sidebar's gutter) and `Sidebar.Footer` holding `Sidebar.Account`. Popovers opened from it (with `padding="none"`) wrap their body in `Sidebar.Panel`, sized so the popover comes to `SIDEBAR_POPOVER_WIDTH_PX`, and build it from the `Popover` parts. `onToggleCollapse` adds the edge toggle, shown in CSS while the pointer is over the sidebar or a keyboard focus is inside it, and always on a touch screen, which has no hover to reveal it. A workspace, organization or account name cut off in the expanded sidebar shows in full on hover. Notices, the divider and the usage card hide while collapsed. Render it inside `<MalachiteContext layer="sidebar">`, or the page paints over the edge toggle. _Key props:_ `collapsed`, `onToggleCollapse`, `expandLabel`, `collapseLabel`, `aria-label`; `Sidebar.Switcher`: `logo`, `title`, `subtitle`, `titleTooltip`/`subtitleTooltip` (shown when the name is cut off, the name by default; pass a node to wrap it, e.g. to keep it out of session recordings) + button attributes; `Sidebar.Account`: `avatar` or `initials` (a small chip when there is no photo), `name`, `tooltip` (on the collapsed rail, and expanded when the name is cut off; `name` by default; pass a node to wrap it) + button attributes; `Sidebar.Usage`: the `UsageCard` props; `Sidebar.Notices`: `aria-label` (required). `useSidebarCollapsed()` reads the state from inside; `SIDEBAR_WIDTH_PX` gives the page its offset beside the sidebar; `SIDEBAR_TOOLTIP_DELAY_S` is the 0.2s delay its name and rail tooltips use, for tooltips a consumer adds inside it.
 - **`SearchTrigger`** — A button drawn as a filled search field, for opening a command palette or search dialog from app chrome such as a sidebar. It is not an input — typing happens in what it opens. `shortcut` draws flat `<kbd>` chips at the end (not `Keycap`, whose raised shadow reads as a second button inside a filled field), kept out of the accessible name; `iconOnly` makes a 36px icon tile matching a collapsed `NavItem`, named by `label`. _Key props:_ `label` (default `Search`), `shortcut` (`ReactNode[]`), `iconOnly`, `aria-label`, `className`, plus native button attributes (`onClick`, `aria-haspopup`, `aria-expanded`, `aria-keyshortcuts`).
 - **`FooterNav`** — Footer navigation bar of links. _Key props:_ `FooterNavLink[]`.

package/dist/components/NavItem.js

@@ -1,162 +1,201 @@
-import { jsx as e, jsxs as b, Fragment as w } from "react/jsx-runtime";
-import U, { forwardRef as W } from "react";
-import V from "./CustomIcons/CaretRightIcon.js";
-import X from "./Tooltip.js";
-import { isExpanded as Y } from "./ariaState.js";
-import { paintOnChild as q } from "./asChild.js";
-import { chainHandler as J, composeRefs as M, elementRef as Q } from "./composeRefs.js";
-import { FOCUS_RING_INSET as Z } from "./focusRing.js";
-import { resolveRel as ee } from "./linkRel.js";
-import { safeHref as ae } from "./safeHref.js";
-import { SIDEBAR_TOOLTIP_DELAY_S as re } from "./sidebarContext.js";
-const te = "group relative flex items-center box-border no-underline border-0 m-0 cursor-pointer select-none text-left font-sans font-medium text-[length:var(--malachite-font-size-small,13px)] leading-[17px] rounded-[var(--malachite-radius-xl,12px)] transition-[background-color,color] duration-200", I = {
+import { jsx as e, jsxs as h, Fragment as C } from "react/jsx-runtime";
+import Q, { forwardRef as Z, useId as ee } from "react";
+import ae from "./CustomIcons/CaretRightIcon.js";
+import te from "./Tooltip.js";
+import { isExpanded as re } from "./ariaState.js";
+import { paintOnChild as ne } from "./asChild.js";
+import { chainHandler as oe, composeRefs as ie, elementRef as se } from "./composeRefs.js";
+import { FOCUS_RING_INSET as ce } from "./focusRing.js";
+import { resolveRel as le } from "./linkRel.js";
+import { safeHref as de } from "./safeHref.js";
+import { SIDEBAR_TOOLTIP_DELAY_S as me } from "./sidebarContext.js";
+const pe = "group relative flex items-center box-border no-underline border-0 m-0 select-none text-left font-sans font-medium text-[length:var(--malachite-font-size-small,13px)] leading-[17px] rounded-[var(--malachite-radius-xl,12px)] transition-[background-color,color] duration-200", K = {
   item: "w-full min-h-[37px] gap-3 py-[10px] px-3",
   compact: "w-full min-h-9 gap-3 py-2 px-3",
   subitem: "w-full gap-3 py-2 pr-3 pl-9",
   collapsed: "w-9 h-[37px] shrink-0 justify-center p-0"
-}, ie = "bg-[var(--malachite-accent-background-glass,rgba(0,175,102,0.08))] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-accent-background,rgb(0,175,102))_12%,transparent)]", ne = {
+}, he = "bg-[var(--malachite-accent-background-glass,rgba(0,175,102,0.08))] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-accent-background,rgb(0,175,102))_12%,transparent)]", ge = {
   idle: "bg-transparent text-[var(--malachite-text-secondary,rgb(123,123,123))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))]",
-  active: `${ie} text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]`,
+  active: `${he} text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]`,
   activeChild: "bg-transparent text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]",
-  danger: "bg-transparent text-[var(--malachite-text-destructive,rgb(237,53,54))] hover:bg-[var(--malachite-error-background-glass,rgba(197,63,63,0.08))] hover:text-[var(--malachite-text-destructive,rgb(237,53,54))]"
-}, oe = {
+  danger: "bg-transparent text-[var(--malachite-text-destructive,rgb(237,53,54))] hover:bg-[var(--malachite-error-background-glass,rgba(197,63,63,0.08))] hover:text-[var(--malachite-text-destructive,rgb(237,53,54))]",
+  disabled: "bg-transparent text-[var(--malachite-text-dimmed,rgb(161,161,161))]"
+}, be = {
   idle: "bg-[var(--malachite-text-placeholder,rgb(187,187,187))] group-hover:bg-[var(--malachite-text-primary,rgb(10,10,10))]",
   active: "bg-[var(--malachite-accent-foreground,rgb(2,122,66))]",
   activeChild: "bg-[var(--malachite-accent-foreground,rgb(2,122,66))]",
-  danger: "bg-[var(--malachite-text-destructive,rgb(237,53,54))]"
-}, $ = "inline-flex shrink-0 items-center justify-center size-4 [&_svg]:size-4!", se = {
+  danger: "bg-[var(--malachite-text-destructive,rgb(237,53,54))]",
+  disabled: "bg-[var(--malachite-text-placeholder,rgb(187,187,187))]"
+}, L = "inline-flex shrink-0 items-center justify-center size-4 [&_svg]:size-4!", z = "var(--malachite-ctx-navitem-ground, var(--malachite-card-background, #ffffff))", ue = {
   "--malachite-ctx-tag-cursor": "pointer",
-  "--malachite-ctx-tag-ground": "var(--malachite-ctx-navitem-ground, var(--malachite-card-background, #ffffff))"
-}, le = W((j, f) => {
+  "--malachite-ctx-tag-ground": z
+}, fe = {
+  "--malachite-ctx-tag-cursor": "not-allowed",
+  "--malachite-ctx-tag-ground": z
+}, ve = (t) => {
+  t.preventDefault(), t.stopPropagation();
+}, xe = [
+  "onPointerDown",
+  "onMouseDown",
+  "onPointerEnter",
+  "onPointerOver",
+  "onMouseEnter",
+  "onMouseOver"
+], Ne = /* @__PURE__ */ new Set(["Enter", " "]), ye = /* @__PURE__ */ new Set(["Enter", " ", "ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"]), we = (t) => {
+  const c = t["aria-haspopup"] !== void 0 || t["aria-expanded"] !== void 0, l = c ? ye : Ne, { onKeyDown: o } = t, i = { ...t };
+  for (const d of xe)
+    delete i[d];
+  return c && delete i.onFocus, i.onKeyDown = o ? (d) => {
+    l.has(d.key) || o(d);
+  } : void 0, i;
+}, B = { display: "block" }, Oe = Z((t, c) => {
   const {
     label: l,
-    icon: c,
-    active: O = !1,
-    hasActiveChild: A = !1,
-    collapsed: d = !1,
-    variant: u = "item",
-    size: z = "medium",
-    danger: S = !1,
-    trailing: _,
-    badge: t,
-    badgeLabel: r,
-    tag: T,
-    disclosure: m,
-    tooltip: L,
-    accessibleLabel: D,
-    className: H = "",
-    asChild: B,
-    ...v
-  } = j, E = S ? "danger" : O ? "active" : A ? "activeChild" : "idle", G = u === "subitem", K = d ? I.collapsed : I[u === "item" && z === "small" ? "compact" : u], x = `${te} ${K} ${ne[E]} ${Z} ${H}`.trim(), p = d ? L ?? (typeof l == "string" ? l : void 0) : void 0, P = p ? [p, r].filter(Boolean).join(", ") : void 0, i = D ?? (d ? P : void 0), k = v, R = O ? "page" : k["aria-current"], N = d ? /* @__PURE__ */ b(w, { children: [
-    c && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: $, children: c }),
-    !i && /* @__PURE__ */ b("span", { className: "sr-only", children: [
+    icon: o,
+    active: i = !1,
+    hasActiveChild: d = !1,
+    collapsed: N = !1,
+    variant: E = "item",
+    size: G = "medium",
+    danger: H = !1,
+    trailing: k,
+    badge: g,
+    badgeLabel: m,
+    tag: R,
+    disclosure: y,
+    tooltip: U,
+    accessibleLabel: F,
+    className: M = "",
+    asChild: V,
+    disabled: r = !1,
+    disabledReason: D,
+    ..._
+  } = t, I = ee(), p = r && D ? D : void 0, S = r && "disabled" || H && "danger" || i && "active" || d && "activeChild" || "idle", Y = E === "subitem", W = N ? K.collapsed : K[E === "item" && G === "small" ? "compact" : E], T = `${pe} ${r ? "cursor-not-allowed" : "cursor-pointer"} ${W} ${ge[S]} ${ce} ${M}`.trim(), b = N ? U ?? (typeof l == "string" ? l : void 0) : void 0, X = b ? [b, m].filter(Boolean).join(", ") : void 0, u = F ?? (N ? X : void 0), P = _, $ = i ? "page" : P["aria-current"], w = N ? /* @__PURE__ */ h(C, { children: [
+    o && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: L, children: o }),
+    !u && /* @__PURE__ */ h("span", { className: "sr-only", children: [
       l,
-      r && `, ${r}`
+      m && `, ${m}`
     ] }),
-    t && /* @__PURE__ */ e(
+    g && /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": "true",
         className: "pointer-events-none absolute top-1 right-1 flex",
-        children: t
+        children: g
       }
     )
-  ] }) : /* @__PURE__ */ b(w, { children: [
-    G ? /* @__PURE__ */ e(
+  ] }) : /* @__PURE__ */ h(C, { children: [
+    Y ? /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": "true",
-        className: `absolute left-[14px] top-1/2 -mt-[2px] size-1 rounded-full transition-colors duration-200 ${oe[E]}`
+        className: `absolute left-[14px] top-1/2 -mt-[2px] size-1 rounded-full transition-colors duration-200 ${be[S]}`
       }
-    ) : c && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: $, children: c }),
-    /* @__PURE__ */ b("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+    ) : o && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: L, children: o }),
+    /* @__PURE__ */ h("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
       /* @__PURE__ */ e("span", { className: "min-w-0 truncate", children: l }),
-      T && /* @__PURE__ */ e("span", { className: "flex shrink-0", style: se, children: T })
+      R && /* @__PURE__ */ e(
+        "span",
+        {
+          className: "flex shrink-0",
+          style: r ? fe : ue,
+          children: R
+        }
+      )
     ] }),
-    t && /* @__PURE__ */ e("span", { "aria-hidden": r ? !0 : void 0, className: "flex shrink-0", children: t }),
-    t && r && !i && /* @__PURE__ */ e("span", { className: "sr-only", children: r }),
-    _ && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: _ }),
-    m && /* @__PURE__ */ e(
+    g && /* @__PURE__ */ e("span", { "aria-hidden": m ? !0 : void 0, className: "flex shrink-0", children: g }),
+    g && m && !u && /* @__PURE__ */ e("span", { className: "sr-only", children: m }),
+    k && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: k }),
+    y && /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": "true",
         className: "flex shrink-0 items-center",
         style: {
-          transform: m === "expanded" ? "rotate(90deg)" : void 0,
+          transform: y === "expanded" ? "rotate(90deg)" : void 0,
           transition: "transform 0.2s"
         },
-        children: /* @__PURE__ */ e(V, { size: 14 })
+        children: /* @__PURE__ */ e(ae, { size: 14 })
       }
     )
-  ] });
-  let h;
-  if (B) {
-    const { children: n, ...o } = v, y = q(n, x, void 0, N), a = n.props, g = Object.fromEntries(
-      Object.entries(o).map(
-        ([s, C]) => s.startsWith("on") && typeof C == "function" && typeof a[s] == "function" ? [
-          s,
-          J(
-            a[s],
-            C
+  ] }), q = p ? /* @__PURE__ */ h(C, { children: [
+    w,
+    /* @__PURE__ */ e("span", { id: I, hidden: !0, children: p })
+  ] }) : w;
+  let O;
+  if (V) {
+    const { children: f, ...v } = _, A = ne(f, T, void 0, w), s = f.props, a = Object.fromEntries(
+      Object.entries(v).map(
+        ([n, x]) => n.startsWith("on") && typeof x == "function" && typeof s[n] == "function" ? [
+          n,
+          oe(
+            s[n],
+            x
           )
-        ] : [s, C]
+        ] : [n, x]
       )
     );
-    h = U.cloneElement(y, {
-      ...g,
-      ref: M(Q(n), f),
-      "aria-current": R ?? a["aria-current"],
-      "aria-label": i ?? o["aria-label"] ?? a["aria-label"]
+    O = Q.cloneElement(A, {
+      ...a,
+      ref: ie(se(f), c),
+      "aria-current": $ ?? s["aria-current"],
+      "aria-label": u ?? v["aria-label"] ?? s["aria-label"]
     });
   } else {
     const {
-      href: n,
-      target: o,
-      rel: y,
-      ...a
-    } = v, g = ae(n);
-    h = g !== void 0 ? /* @__PURE__ */ e(
+      href: f,
+      target: v,
+      rel: A,
+      ...s
+    } = _, a = r ? we(s) : s, n = r ? void 0 : de(f), x = [a["aria-describedby"], p && I].filter(Boolean).join(" ") || void 0;
+    O = n !== void 0 ? /* @__PURE__ */ e(
       "a",
       {
         ...a,
-        ref: f,
-        href: g,
-        target: o,
-        rel: ee(y, o),
-        "aria-current": R,
-        "aria-label": i ?? a["aria-label"],
-        className: x,
-        children: N
+        ref: c,
+        href: n,
+        target: v,
+        rel: le(A, v),
+        "aria-current": $,
+        "aria-label": u ?? a["aria-label"],
+        className: T,
+        children: w
       }
     ) : /* @__PURE__ */ e(
       "button",
       {
         ...a,
-        ref: f,
+        ref: c,
         type: "button",
-        "aria-expanded": a["aria-expanded"] ?? (m ? m === "expanded" : void 0),
-        "aria-label": i ?? a["aria-label"],
-        className: x,
-        children: N
+        "aria-expanded": a["aria-expanded"] ?? (y ? y === "expanded" : void 0),
+        "aria-label": u ?? a["aria-label"],
+        "aria-disabled": r || a["aria-disabled"],
+        "aria-describedby": x,
+        onClick: r ? ve : a.onClick,
+        className: T,
+        children: q
       }
     );
   }
-  const F = Y(k["aria-expanded"]);
-  return p ? /* @__PURE__ */ e(
-    X,
+  const J = re(P["aria-expanded"]), j = b && p ? /* @__PURE__ */ h(C, { children: [
+    /* @__PURE__ */ e("span", { style: B, children: b }),
+    /* @__PURE__ */ e("span", { style: B, children: p })
+  ] }) : b ?? p;
+  return j ? /* @__PURE__ */ e(
+    te,
     {
-      text: p,
+      text: j,
       placement: "right",
-      delay: re,
+      delay: me,
       describesTrigger: !1,
-      suppressed: F,
-      children: h
+      suppressed: J,
+      children: O
     }
-  ) : h;
+  ) : O;
 });
-le.displayName = "NavItem";
+Oe.displayName = "NavItem";
 export {
-  le as NavItem,
-  le as default
+  Oe as NavItem,
+  Oe as default
 };
 //# sourceMappingURL=NavItem.js.map

package/dist/components/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../../src/components/NavItem.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport Tooltip from './Tooltip';\nimport { isExpanded } from './ariaState';\nimport { paintOnChild } from './asChild';\nimport { chainHandler, composeRefs, elementRef } from './composeRefs';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { resolveRel } from './linkRel';\nimport { safeHref } from './safeHref';\nimport { SIDEBAR_TOOLTIP_DELAY_S } from './sidebarContext';\n\ntype NativeProps = Omit<\n    React.HTMLAttributes<HTMLElement>,\n    'children' | 'className' | 'style' | 'color' | 'title'\n>;\n\ninterface NavItemBaseProps extends NativeProps {\n    label: React.ReactNode;\n    icon?: React.ReactNode;\n    active?: boolean;\n    hasActiveChild?: boolean;\n    collapsed?: boolean;\n    variant?: 'item' | 'subitem';\n    size?: 'medium' | 'small';\n    danger?: boolean;\n    trailing?: React.ReactNode;\n    badge?: React.ReactNode;\n    badgeLabel?: string;\n    tag?: React.ReactNode;\n    disclosure?: 'expanded' | 'collapsed';\n    tooltip?: string;\n    accessibleLabel?: string;\n    className?: string;\n}\n\nexport interface NavItemLinkProps extends NavItemBaseProps {\n    asChild?: false;\n    href?: string;\n    target?: string;\n    rel?: string;\n    onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport interface NavItemAsChildProps extends NavItemBaseProps {\n    asChild: true;\n    children: React.ReactElement;\n    href?: never;\n    target?: never;\n    rel?: never;\n    disclosure?: never;\n}\n\nexport type NavItemProps = NavItemLinkProps | NavItemAsChildProps;\n\nconst ROW =\n    'group relative flex items-center box-border no-underline border-0 m-0 cursor-pointer select-none text-left font-sans font-medium text-[length:var(--malachite-font-size-small,13px)] leading-[17px] rounded-[var(--malachite-radius-xl,12px)] transition-[background-color,color] duration-200';\n\nconst SHAPE = {\n    item: 'w-full min-h-[37px] gap-3 py-[10px] px-3',\n    compact: 'w-full min-h-9 gap-3 py-2 px-3',\n    subitem: 'w-full gap-3 py-2 pr-3 pl-9',\n    collapsed: 'w-9 h-[37px] shrink-0 justify-center p-0',\n} as const;\n\nconst ACTIVE_BACKGROUND =\n    'bg-[var(--malachite-accent-background-glass,rgba(0,175,102,0.08))] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-accent-background,rgb(0,175,102))_12%,transparent)]';\n\nconst TONE = {\n    idle: 'bg-transparent text-[var(--malachite-text-secondary,rgb(123,123,123))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))]',\n    active: `${ACTIVE_BACKGROUND} text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]`,\n    activeChild:\n        'bg-transparent text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    danger: 'bg-transparent text-[var(--malachite-text-destructive,rgb(237,53,54))] hover:bg-[var(--malachite-error-background-glass,rgba(197,63,63,0.08))] hover:text-[var(--malachite-text-destructive,rgb(237,53,54))]',\n} as const;\n\nconst DOT_TONE = {\n    idle: 'bg-[var(--malachite-text-placeholder,rgb(187,187,187))] group-hover:bg-[var(--malachite-text-primary,rgb(10,10,10))]',\n    active: 'bg-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    activeChild: 'bg-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    danger: 'bg-[var(--malachite-text-destructive,rgb(237,53,54))]',\n} as const;\n\nconst ICON = 'inline-flex shrink-0 items-center justify-center size-4 [&_svg]:size-4!';\n\n/*\n * What a `Tag` on the row reads: the pointer every row shows (`inherit` would not do, since a\n * custom property set to it inherits itself), and the ground the row rests on, so the tag keeps\n * one colour while the row is hovered or current. `--malachite-ctx-navitem-ground` is a context\n * channel the container sets (`Sidebar` does), not a theme token; elsewhere, a card.\n */\nconst TAG_CONTEXT = {\n    '--malachite-ctx-tag-cursor': 'pointer',\n    '--malachite-ctx-tag-ground':\n        'var(--malachite-ctx-navitem-ground, var(--malachite-card-background, #ffffff))',\n} as React.CSSProperties;\n\nconst NavItem = forwardRef<HTMLElement, NavItemProps>((props, ref) => {\n    const {\n        label,\n        icon,\n        active = false,\n        hasActiveChild = false,\n        collapsed = false,\n        variant = 'item',\n        size = 'medium',\n        danger = false,\n        trailing,\n        badge,\n        badgeLabel,\n        tag,\n        disclosure,\n        tooltip,\n        accessibleLabel,\n        className = '',\n        asChild,\n        ...rest\n    } = props;\n\n    const tone = danger ? 'danger' : active ? 'active' : hasActiveChild ? 'activeChild' : 'idle';\n    const isSubitem = variant === 'subitem';\n    const shapeKey = variant === 'item' && size === 'small' ? 'compact' : variant;\n    const shape = collapsed ? SHAPE.collapsed : SHAPE[shapeKey];\n    const rowClass = `${ROW} ${shape} ${TONE[tone]} ${FOCUS_RING_INSET} ${className}`.trim();\n\n    const tooltipText = collapsed\n        ? (tooltip ?? (typeof label === 'string' ? label : undefined))\n        : undefined;\n    const collapsedName = tooltipText\n        ? [tooltipText, badgeLabel].filter(Boolean).join(', ')\n        : undefined;\n    const ariaLabel = accessibleLabel ?? (collapsed ? collapsedName : undefined);\n    const native = rest as NativeProps;\n    const ariaCurrent = active ? 'page' : native['aria-current'];\n\n    const content = collapsed ? (\n        <>\n            {icon && (\n                <span aria-hidden=\"true\" className={ICON}>\n                    {icon}\n                </span>\n            )}\n            {!ariaLabel && (\n                <span className=\"sr-only\">\n                    {label}\n                    {badgeLabel && `, ${badgeLabel}`}\n                </span>\n            )}\n            {badge && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute top-1 right-1 flex\"\n                >\n                    {badge}\n                </span>\n            )}\n        </>\n    ) : (\n        <>\n            {isSubitem ? (\n                <span\n                    aria-hidden=\"true\"\n                    className={`absolute left-[14px] top-1/2 -mt-[2px] size-1 rounded-full transition-colors duration-200 ${DOT_TONE[tone]}`}\n                />\n            ) : (\n                icon && (\n                    <span aria-hidden=\"true\" className={ICON}>\n                        {icon}\n                    </span>\n                )\n            )}\n            <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n                <span className=\"min-w-0 truncate\">{label}</span>\n                {tag && (\n                    <span className=\"flex shrink-0\" style={TAG_CONTEXT}>\n                        {tag}\n                    </span>\n                )}\n            </span>\n            {badge && (\n                <span aria-hidden={badgeLabel ? true : undefined} className=\"flex shrink-0\">\n                    {badge}\n                </span>\n            )}\n            {badge && badgeLabel && !ariaLabel && <span className=\"sr-only\">{badgeLabel}</span>}\n            {trailing && <span className=\"flex shrink-0 items-center\">{trailing}</span>}\n            {disclosure && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"flex shrink-0 items-center\"\n                    style={{\n                        transform: disclosure === 'expanded' ? 'rotate(90deg)' : undefined,\n                        transition: 'transform 0.2s',\n                    }}\n                >\n                    <CaretRightIcon size={14} />\n                </span>\n            )}\n        </>\n    );\n\n    let element: React.ReactElement;\n    if (asChild) {\n        const { children, ...childNative } = rest as NativeProps & {\n            children: React.ReactElement<Record<string, unknown>>;\n        };\n        const painted = paintOnChild(children, rowClass, undefined, content);\n        const childProps = children.props;\n        const chained = Object.fromEntries(\n            Object.entries(childNative).map(([key, value]) =>\n                key.startsWith('on') &&\n                typeof value === 'function' &&\n                typeof childProps[key] === 'function'\n                    ? [\n                          key,\n                          chainHandler(\n                              childProps[key] as (event: React.SyntheticEvent) => void,\n                              value as (event: React.SyntheticEvent) => void,\n                          ),\n                      ]\n                    : [key, value],\n            ),\n        );\n        element = React.cloneElement(painted, {\n            ...chained,\n            ref: composeRefs(elementRef<HTMLElement>(children), ref),\n            'aria-current': ariaCurrent ?? childProps['aria-current'],\n            'aria-label': ariaLabel ?? childNative['aria-label'] ?? childProps['aria-label'],\n        } as Record<string, unknown>);\n    } else {\n        const {\n            href: rawHref,\n            target,\n            rel,\n            ...linkNative\n        } = rest as NativeProps & Pick<NavItemLinkProps, 'href' | 'target' | 'rel'>;\n        const href = safeHref(rawHref);\n        element =\n            href !== undefined ? (\n                <a\n                    {...linkNative}\n                    ref={ref as React.Ref<HTMLAnchorElement>}\n                    href={href}\n                    target={target}\n                    rel={resolveRel(rel, target)}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel ?? linkNative['aria-label']}\n                    className={rowClass}\n                >\n                    {content}\n                </a>\n            ) : (\n                <button\n                    {...linkNative}\n                    ref={ref as React.Ref<HTMLButtonElement>}\n                    type=\"button\"\n                    aria-expanded={\n                        linkNative['aria-expanded'] ??\n                        (disclosure ? disclosure === 'expanded' : undefined)\n                    }\n                    aria-label={ariaLabel ?? linkNative['aria-label']}\n                    className={rowClass}\n                >\n                    {content}\n                </button>\n            );\n    }\n\n    const popupOpen = isExpanded(native['aria-expanded']);\n\n    return tooltipText ? (\n        <Tooltip\n            text={tooltipText}\n            placement=\"right\"\n            delay={SIDEBAR_TOOLTIP_DELAY_S}\n            describesTrigger={false}\n            suppressed={popupOpen}\n        >\n            {element}\n        </Tooltip>\n    ) : (\n        element\n    );\n});\n\nNavItem.displayName = 'NavItem';\n\nexport { NavItem };\nexport default NavItem;\n"],"names":["ROW","SHAPE","ACTIVE_BACKGROUND","TONE","DOT_TONE","ICON","TAG_CONTEXT","NavItem","forwardRef","props","ref","label","icon","active","hasActiveChild","collapsed","variant","size","danger","trailing","badge","badgeLabel","tag","disclosure","tooltip","accessibleLabel","className","asChild","rest","tone","isSubitem","shape","rowClass","FOCUS_RING_INSET","tooltipText","collapsedName","ariaLabel","native","ariaCurrent","content","jsxs","Fragment","jsx","CaretRightIcon","element","children","childNative","painted","paintOnChild","childProps","chained","key","value","chainHandler","React","composeRefs","elementRef","rawHref","target","rel","linkNative","href","safeHref","resolveRel","popupOpen","isExpanded","Tooltip","SIDEBAR_TOOLTIP_DELAY_S"],"mappings":"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"}
+{"version":3,"file":"NavItem.js","sources":["../../src/components/NavItem.tsx"],"sourcesContent":["import React, { forwardRef, useId } from 'react';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport Tooltip from './Tooltip';\nimport { isExpanded } from './ariaState';\nimport { paintOnChild } from './asChild';\nimport { chainHandler, composeRefs, elementRef } from './composeRefs';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { resolveRel } from './linkRel';\nimport { safeHref } from './safeHref';\nimport { SIDEBAR_TOOLTIP_DELAY_S } from './sidebarContext';\n\ntype NativeProps = Omit<\n    React.HTMLAttributes<HTMLElement>,\n    'children' | 'className' | 'style' | 'color' | 'title'\n>;\n\ninterface NavItemBaseProps extends NativeProps {\n    label: React.ReactNode;\n    icon?: React.ReactNode;\n    active?: boolean;\n    hasActiveChild?: boolean;\n    collapsed?: boolean;\n    variant?: 'item' | 'subitem';\n    size?: 'medium' | 'small';\n    danger?: boolean;\n    trailing?: React.ReactNode;\n    badge?: React.ReactNode;\n    badgeLabel?: string;\n    tag?: React.ReactNode;\n    disclosure?: 'expanded' | 'collapsed';\n    tooltip?: string;\n    accessibleLabel?: string;\n    className?: string;\n}\n\nexport interface NavItemLinkProps extends NavItemBaseProps {\n    asChild?: false;\n    /** Leaves the row focusable but inert: `aria-disabled`, no hover, no click or navigation. */\n    disabled?: boolean;\n    /** Why a `disabled` row is unavailable: its tooltip and its accessible description. */\n    disabledReason?: string;\n    href?: string;\n    target?: string;\n    rel?: string;\n    onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport interface NavItemAsChildProps extends NavItemBaseProps {\n    asChild: true;\n    children: React.ReactElement;\n    disabled?: never;\n    disabledReason?: never;\n    href?: never;\n    target?: never;\n    rel?: never;\n    disclosure?: never;\n}\n\nexport type NavItemProps = NavItemLinkProps | NavItemAsChildProps;\n\nconst ROW =\n    'group relative flex items-center box-border no-underline border-0 m-0 select-none text-left font-sans font-medium text-[length:var(--malachite-font-size-small,13px)] leading-[17px] rounded-[var(--malachite-radius-xl,12px)] transition-[background-color,color] duration-200';\n\nconst SHAPE = {\n    item: 'w-full min-h-[37px] gap-3 py-[10px] px-3',\n    compact: 'w-full min-h-9 gap-3 py-2 px-3',\n    subitem: 'w-full gap-3 py-2 pr-3 pl-9',\n    collapsed: 'w-9 h-[37px] shrink-0 justify-center p-0',\n} as const;\n\nconst ACTIVE_BACKGROUND =\n    'bg-[var(--malachite-accent-background-glass,rgba(0,175,102,0.08))] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-accent-background,rgb(0,175,102))_12%,transparent)]';\n\nconst TONE = {\n    idle: 'bg-transparent text-[var(--malachite-text-secondary,rgb(123,123,123))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))]',\n    active: `${ACTIVE_BACKGROUND} text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]`,\n    activeChild:\n        'bg-transparent text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    danger: 'bg-transparent text-[var(--malachite-text-destructive,rgb(237,53,54))] hover:bg-[var(--malachite-error-background-glass,rgba(197,63,63,0.08))] hover:text-[var(--malachite-text-destructive,rgb(237,53,54))]',\n    disabled: 'bg-transparent text-[var(--malachite-text-dimmed,rgb(161,161,161))]',\n} as const;\n\nconst DOT_TONE = {\n    idle: 'bg-[var(--malachite-text-placeholder,rgb(187,187,187))] group-hover:bg-[var(--malachite-text-primary,rgb(10,10,10))]',\n    active: 'bg-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    activeChild: 'bg-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    danger: 'bg-[var(--malachite-text-destructive,rgb(237,53,54))]',\n    disabled: 'bg-[var(--malachite-text-placeholder,rgb(187,187,187))]',\n} as const;\n\nconst ICON = 'inline-flex shrink-0 items-center justify-center size-4 [&_svg]:size-4!';\n\n/*\n * What a `Tag` on the row reads: the pointer every row shows (`inherit` would not do, since a\n * custom property set to it inherits itself), and the ground the row rests on, so the tag keeps\n * one colour while the row is hovered or current. `--malachite-ctx-navitem-ground` is a context\n * channel the container sets (`Sidebar` does), not a theme token; elsewhere, a card.\n */\nconst TAG_GROUND = 'var(--malachite-ctx-navitem-ground, var(--malachite-card-background, #ffffff))';\nconst TAG_CONTEXT = {\n    '--malachite-ctx-tag-cursor': 'pointer',\n    '--malachite-ctx-tag-ground': TAG_GROUND,\n} as React.CSSProperties;\nconst DISABLED_TAG_CONTEXT = {\n    '--malachite-ctx-tag-cursor': 'not-allowed',\n    '--malachite-ctx-tag-ground': TAG_GROUND,\n} as React.CSSProperties;\n\nconst swallowClick = (event: React.MouseEvent<HTMLElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n};\n\nconst PRESS_AND_HOVER = [\n    'onPointerDown',\n    'onMouseDown',\n    'onPointerEnter',\n    'onPointerOver',\n    'onMouseEnter',\n    'onMouseOver',\n] as const;\nconst ACTIVATION_KEYS = new Set(['Enter', ' ']);\nconst POPUP_KEYS = new Set(['Enter', ' ', 'ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft']);\n\n// Popover and ActionMenu open from the press, hover, focus and arrow-key handlers they clone on.\nconst inertHandlers = (props: NativeProps): NativeProps => {\n    const isPopupTrigger =\n        props['aria-haspopup'] !== undefined || props['aria-expanded'] !== undefined;\n    const ignored = isPopupTrigger ? POPUP_KEYS : ACTIVATION_KEYS;\n    const { onKeyDown } = props;\n    const inert: NativeProps = { ...props };\n    for (const key of PRESS_AND_HOVER) {\n        delete inert[key];\n    }\n    if (isPopupTrigger) {\n        delete inert.onFocus;\n    }\n    inert.onKeyDown = onKeyDown\n        ? (event) => {\n              if (!ignored.has(event.key)) {\n                  onKeyDown(event);\n              }\n          }\n        : undefined;\n    return inert;\n};\n\n/** Portalled to `document.body`, outside the shadow sheet, so it is laid out inline. */\nconst BLOCK: React.CSSProperties = { display: 'block' };\n\nconst NavItem = forwardRef<HTMLElement, NavItemProps>((props, ref) => {\n    const {\n        label,\n        icon,\n        active = false,\n        hasActiveChild = false,\n        collapsed = false,\n        variant = 'item',\n        size = 'medium',\n        danger = false,\n        trailing,\n        badge,\n        badgeLabel,\n        tag,\n        disclosure,\n        tooltip,\n        accessibleLabel,\n        className = '',\n        asChild,\n        disabled = false,\n        disabledReason,\n        ...rest\n    } = props;\n    const reasonId = useId();\n    const reason = disabled && disabledReason ? disabledReason : undefined;\n\n    const tone =\n        (disabled && 'disabled') ||\n        (danger && 'danger') ||\n        (active && 'active') ||\n        (hasActiveChild && 'activeChild') ||\n        'idle';\n    const isSubitem = variant === 'subitem';\n    const shapeKey = variant === 'item' && size === 'small' ? 'compact' : variant;\n    const shape = collapsed ? SHAPE.collapsed : SHAPE[shapeKey];\n    const cursor = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n    const rowClass =\n        `${ROW} ${cursor} ${shape} ${TONE[tone]} ${FOCUS_RING_INSET} ${className}`.trim();\n\n    const tooltipText = collapsed\n        ? (tooltip ?? (typeof label === 'string' ? label : undefined))\n        : undefined;\n    const collapsedName = tooltipText\n        ? [tooltipText, badgeLabel].filter(Boolean).join(', ')\n        : undefined;\n    const ariaLabel = accessibleLabel ?? (collapsed ? collapsedName : undefined);\n    const native = rest as NativeProps;\n    const ariaCurrent = active ? 'page' : native['aria-current'];\n\n    const content = collapsed ? (\n        <>\n            {icon && (\n                <span aria-hidden=\"true\" className={ICON}>\n                    {icon}\n                </span>\n            )}\n            {!ariaLabel && (\n                <span className=\"sr-only\">\n                    {label}\n                    {badgeLabel && `, ${badgeLabel}`}\n                </span>\n            )}\n            {badge && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute top-1 right-1 flex\"\n                >\n                    {badge}\n                </span>\n            )}\n        </>\n    ) : (\n        <>\n            {isSubitem ? (\n                <span\n                    aria-hidden=\"true\"\n                    className={`absolute left-[14px] top-1/2 -mt-[2px] size-1 rounded-full transition-colors duration-200 ${DOT_TONE[tone]}`}\n                />\n            ) : (\n                icon && (\n                    <span aria-hidden=\"true\" className={ICON}>\n                        {icon}\n                    </span>\n                )\n            )}\n            <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n                <span className=\"min-w-0 truncate\">{label}</span>\n                {tag && (\n                    <span\n                        className=\"flex shrink-0\"\n                        style={disabled ? DISABLED_TAG_CONTEXT : TAG_CONTEXT}\n                    >\n                        {tag}\n                    </span>\n                )}\n            </span>\n            {badge && (\n                <span aria-hidden={badgeLabel ? true : undefined} className=\"flex shrink-0\">\n                    {badge}\n                </span>\n            )}\n            {badge && badgeLabel && !ariaLabel && <span className=\"sr-only\">{badgeLabel}</span>}\n            {trailing && <span className=\"flex shrink-0 items-center\">{trailing}</span>}\n            {disclosure && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"flex shrink-0 items-center\"\n                    style={{\n                        transform: disclosure === 'expanded' ? 'rotate(90deg)' : undefined,\n                        transition: 'transform 0.2s',\n                    }}\n                >\n                    <CaretRightIcon size={14} />\n                </span>\n            )}\n        </>\n    );\n    // The tooltip mounts only once shown, so the first focus needs the reason in its own node.\n    const described = reason ? (\n        <>\n            {content}\n            <span id={reasonId} hidden>\n                {reason}\n            </span>\n        </>\n    ) : (\n        content\n    );\n\n    let element: React.ReactElement;\n    if (asChild) {\n        const { children, ...childNative } = rest as NativeProps & {\n            children: React.ReactElement<Record<string, unknown>>;\n        };\n        const painted = paintOnChild(children, rowClass, undefined, content);\n        const childProps = children.props;\n        const chained = Object.fromEntries(\n            Object.entries(childNative).map(([key, value]) =>\n                key.startsWith('on') &&\n                typeof value === 'function' &&\n                typeof childProps[key] === 'function'\n                    ? [\n                          key,\n                          chainHandler(\n                              childProps[key] as (event: React.SyntheticEvent) => void,\n                              value as (event: React.SyntheticEvent) => void,\n                          ),\n                      ]\n                    : [key, value],\n            ),\n        );\n        element = React.cloneElement(painted, {\n            ...chained,\n            ref: composeRefs(elementRef<HTMLElement>(children), ref),\n            'aria-current': ariaCurrent ?? childProps['aria-current'],\n            'aria-label': ariaLabel ?? childNative['aria-label'] ?? childProps['aria-label'],\n        } as Record<string, unknown>);\n    } else {\n        const {\n            href: rawHref,\n            target,\n            rel,\n            ...forwarded\n        } = rest as NativeProps & Pick<NavItemLinkProps, 'href' | 'target' | 'rel'>;\n        const linkNative = disabled ? inertHandlers(forwarded) : forwarded;\n        const href = disabled ? undefined : safeHref(rawHref);\n        const describedBy =\n            [linkNative['aria-describedby'], reason && reasonId].filter(Boolean).join(' ') ||\n            undefined;\n        element =\n            href !== undefined ? (\n                <a\n                    {...linkNative}\n                    ref={ref as React.Ref<HTMLAnchorElement>}\n                    href={href}\n                    target={target}\n                    rel={resolveRel(rel, target)}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel ?? linkNative['aria-label']}\n                    className={rowClass}\n                >\n                    {content}\n                </a>\n            ) : (\n                <button\n                    {...linkNative}\n                    ref={ref as React.Ref<HTMLButtonElement>}\n                    type=\"button\"\n                    aria-expanded={\n                        linkNative['aria-expanded'] ??\n                        (disclosure ? disclosure === 'expanded' : undefined)\n                    }\n                    aria-label={ariaLabel ?? linkNative['aria-label']}\n                    aria-disabled={disabled || linkNative['aria-disabled']}\n                    aria-describedby={describedBy}\n                    onClick={disabled ? swallowClick : linkNative.onClick}\n                    className={rowClass}\n                >\n                    {described}\n                </button>\n            );\n    }\n\n    const popupOpen = isExpanded(native['aria-expanded']);\n    const tooltipContent =\n        tooltipText && reason ? (\n            <>\n                <span style={BLOCK}>{tooltipText}</span>\n                <span style={BLOCK}>{reason}</span>\n            </>\n        ) : (\n            (tooltipText ?? reason)\n        );\n\n    return tooltipContent ? (\n        <Tooltip\n            text={tooltipContent}\n            placement=\"right\"\n            delay={SIDEBAR_TOOLTIP_DELAY_S}\n            describesTrigger={false}\n            suppressed={popupOpen}\n        >\n            {element}\n        </Tooltip>\n    ) : (\n        element\n    );\n});\n\nNavItem.displayName = 'NavItem';\n\nexport { NavItem };\nexport default NavItem;\n"],"names":["ROW","SHAPE","ACTIVE_BACKGROUND","TONE","DOT_TONE","ICON","TAG_GROUND","TAG_CONTEXT","DISABLED_TAG_CONTEXT","swallowClick","event","PRESS_AND_HOVER","ACTIVATION_KEYS","POPUP_KEYS","inertHandlers","props","isPopupTrigger","ignored","onKeyDown","inert","key","BLOCK","NavItem","forwardRef","ref","label","icon","active","hasActiveChild","collapsed","variant","size","danger","trailing","badge","badgeLabel","tag","disclosure","tooltip","accessibleLabel","className","asChild","disabled","disabledReason","rest","reasonId","useId","reason","tone","isSubitem","shape","rowClass","FOCUS_RING_INSET","tooltipText","collapsedName","ariaLabel","native","ariaCurrent","content","jsxs","Fragment","jsx","CaretRightIcon","described","element","children","childNative","painted","paintOnChild","childProps","chained","value","chainHandler","React","composeRefs","elementRef","rawHref","target","rel","forwarded","linkNative","href","safeHref","describedBy","resolveRel","popupOpen","isExpanded","tooltipContent","Tooltip","SIDEBAR_TOOLTIP_DELAY_S"],"mappings":"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"}

package/dist/index.d.ts

@@ -3677,6 +3677,8 @@ export declare const NavItem: default_2.ForwardRefExoticComponent<NavItemProps &
 export declare interface NavItemAsChildProps extends NavItemBaseProps {
     asChild: true;
     children: default_2.ReactElement;
+    disabled?: never;
+    disabledReason?: never;
     href?: never;
     target?: never;
     rel?: never;
@@ -3704,6 +3706,10 @@ declare interface NavItemBaseProps extends NativeProps {
 
 export declare interface NavItemLinkProps extends NavItemBaseProps {
     asChild?: false;
+    /** Leaves the row focusable but inert: `aria-disabled`, no hover, no click or navigation. */
+    disabled?: boolean;
+    /** Why a `disabled` row is unavailable: its tooltip and its accessible description. */
+    disabledReason?: string;
     href?: string;
     target?: string;
     rel?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackone/malachite",
-  "version": "2.65.0",
+  "version": "2.66.0",
   "description": "StackOne's themeable React component library — Shadow DOM isolated, scoped Tailwind, theme-token driven.",
   "license": "MIT",
   "author": "StackOne",