laif-ds 1.0.0 → 1.0.2-app-data-grid.76

package/dist/components/design-tokens.js

@@ -9,6 +9,8 @@ const e = {
     default: "rounded-md",
     sm: "rounded-sm",
     lg: "rounded-lg",
+    xl: "rounded-xl",
+    "2xl": "rounded-2xl",
     full: "rounded-full"
   },
   // Input & Button heights/paddings
@@ -21,9 +23,136 @@ const e = {
     // out at h-10 = 40px, which is fine for a mouse and short for a thumb.
     touch: "min-h-11 px-4 py-2.5 text-sm",
     icon: {
-      default: "size-9"
+      default: "size-9",
+      sm: "size-8",
+      lg: "size-10",
+      // 24px. Below the 32px of `sm`, because a 36px row with `py-1` leaves 28px
+      // of usable space and `sm` does not fit in it. Not a default anywhere:
+      // it exists so a dense row can have a real target instead of a hand-written
+      // `className="size-6"` override.
+      xs: "size-6"
     }
   },
+  // Table geometry, measured on the AppDataGrid mockup rather than declared:
+  // a 36px data row and a 32px header row are what the two-level sticky header
+  // offsets (`top-0` then `top-8`) already assume.
+  table: {
+    rowHeight: 36,
+    rowHeightClass: "h-9",
+    headerHeight: 32,
+    headerHeightClass: "h-8",
+    cellPaddingX: "px-3"
+  },
+  // Stacking order inside a table. A pinned column and a sticky header both win
+  // over body cells, and where they intersect the pinned header cell must win
+  // over both — that intersection is why three levels are needed and not two.
+  tableZ: {
+    pinnedCell: 10,
+    stickyHeader: 20,
+    pinnedHeader: 30,
+    focusLift: 40,
+    overlay: 50,
+    // APPENDED IN R21, and it is the rung the `<thead>` borrows WHILE a resize
+    // handle inside it has the focus — never at rest. It exists because
+    // `focusLift` cannot do the job it was named for once the scrollbar lane
+    // has a z of its own.
+    //
+    // THE MECHANISM, and it is not the one it looks like. The `<thead>` is
+    // `sticky` and carries `stickyHeader`, so it is a positioned element with a
+    // z-index other than auto: it CREATES A STACKING CONTEXT. The resize handle
+    // lives in a leaf `<th>` that is `relative` with NO z of its own, so its
+    // own focus lift is sealed inside the header's context — from outside, the
+    // whole `<thead>` is worth 20. Inside that context the lift still does its
+    // job (it beats the pinned cells at 30, which share the context); against
+    // the scrollbar lane, which lives in the ScrollArea root's context at 40,
+    // no value on the handle can win. RAISING THE HANDLE'S LIFT IS INEFFECTIVE
+    // BY CONSTRUCTION — verified, not assumed. So the CONTEXT is what moves.
+    //
+    // ⚠️ THE VALUE IS MEASURED, not one step above something. Three nodes are
+    // involved and all three were probed in the same run, in the scene that has
+    // all of them: the filter panel body reads 50, the `<thead>` reads 20, the
+    // vertical lane reads 40 — and the stacking-context root of all three is the
+    // DOCUMENT ROOT (walked the ancestors of each: no positioned+z, transform,
+    // filter, will-change, contain:paint, isolation or opacity<1 in between), so
+    // the three numbers really do compare with one another. The order that has
+    // to hold is lane < lifted header < filter panel: an overlay covering the
+    // header is correct, a scrollbar covering a focused control is WCAG 2.2
+    // SC 2.4.11. That leaves 41..49, and 45 is taken because it sits midway —
+    // equidistant headroom if either neighbour is later nudged by a step.
+    // 50 was rejected on the measurement: it TIES with the filter panel, and a
+    // tie is decided by document order, which is not a thing this token can
+    // control.
+    //
+    // ⚠️ Deliberately NOT a Tailwind class, for the same reason as `fullscreen`
+    // right below: neither config emits a step at this number — the v3 bundle
+    // emits only the multiples of ten from 0 to 50 — and the lane's own gate
+    // rejects any class token containing a bracket, variants included. It is
+    // applied INLINE from this token in `parts/grid-table.tsx`, one source.
+    //
+    // ⚠️ AND IT IS TEMPORARY. Applied only while a handle holds the focus, and
+    // removed on blur so the header falls back to its class. A header parked up
+    // here would re-stack every scene in the grid, and the specs that read the
+    // header's z at rest are many.
+    stickyHeaderFocusLift: 45,
+    // ADDED IN P6, and it is the only rung that has to beat things this object
+    // does not describe. A grid promoted to full screen must cover the overlays
+    // the OLD DataTable portals to the body (PIANO §6, row "Fullscreen"), and
+    // those do not read `tableZ` — they carry the z-index of the shared
+    // primitive they are built from. So the number comes from a MEASUREMENT of
+    // what is actually on the page, not from "one step above `overlay`":
+    //
+    //   grep -rhoE 'z-(\[[0-9]+\]|[0-9]+)' src/components | sort -rn | uniq -c
+    //     100  ← ONE site, and it is the frozen table's own horizontal ScrollBar
+    //            (`data-table-body.tsx:386`)
+    //      60  ← `popover.tsx` — the primitive the old table's column-visibility
+    //            and filter popovers are made of
+    //      50  ← `dropdown-menu.tsx`, and `tableZ.overlay`
+    //
+    // 60 was the first choice and it was WRONG: it TIES with `popover.tsx`, and
+    // a tie is decided by document order — a Radix popover portals to the end of
+    // <body>, i.e. always after the grid, so the popover would have won and the
+    // criterion would have failed. 110 clears the measured ceiling (100) with
+    // the smallest clean jump, so the fullscreen grid also covers that
+    // ScrollBar, which belongs to the old table too.
+    //
+    // ⚠️ Deliberately NOT a Tailwind class. Neither config has a step at that number,
+    // and adding one would put the number in two configs PLUS here — three
+    // sources for one scale, which is the defect P4's review found on the
+    // checkbox column width. It is applied INLINE from this token, one source.
+    //
+    // ⚠️ MEASURED LIMIT, not a guess. A `position: fixed` element only competes
+    // with a body-level portal when NO ancestor creates a stacking context.
+    // Probed in Chrome with `document.elementFromPoint`: with a plain ancestor
+    // the fullscreen node wins; give that same ancestor `transform:
+    // translateZ(0)` or `filter: blur(0px)` and the PORTAL wins, because the
+    // fixed node's z-index is then scoped inside the ancestor's context and is
+    // compared against its siblings, not against the body. No number fixes
+    // that — it is a containing-block fact. Documented in AppDataGrid.md.
+    fullscreen: 110,
+    // ADDED IN P6, and it exists because `fullscreen` alone created the MIRROR
+    // of the problem it solved. Raising the grid above the old table's
+    // body-portaled overlays also raised it above ITS OWN: the grid's column
+    // menu is a Radix dropdown portaled to <body> at z-50, so at full screen it
+    // was painted UNDER the grid and became unreachable — taking with it P4's
+    // non-dragging pointer path (WCAG 2.5.7 "widen/narrow") and sorting from the
+    // menu. Measured with `document.elementFromPoint` at the open menu's centre:
+    // "GRID on top — MENU BURIED".
+    //
+    // WHY A NUMBER AND NOT A PORTAL CONTAINER. The right fix architecturally is
+    // to portal the grid's own overlays INTO the grid, but `DropdownMenuContent`
+    // hard-codes its Portal with no `container` passthrough, and that file is
+    // SHARED SURFACE the frozen DataTable renders — this lane does not change it.
+    // So the grid raises its own overlay from its own side instead.
+    //
+    // HOW IT REACHES THE RIGHT ELEMENT (measured, and not obvious): the z-index
+    // that decides is the one on Radix's popper WRAPPER, not on the menu content
+    // — the wrapper is the stacking context. Probed in Chrome: setting the
+    // content's z to 120 after mount left the menu buried, setting the WRAPPER's
+    // to 120 lifted it. Radix copies the content's computed z-index onto the
+    // wrapper at mount, so an inline z on the content does reach the wrapper —
+    // which is why it is applied inline and only while full screen is active.
+    fullscreenOverlay: 120
+  },
   // Text styles for inputs/buttons
   text: {
     base: "text-sm font-medium whitespace-nowrap",
@@ -68,74 +197,17 @@ const e = {
   },
   // Badge specific
   badge: {
-    base: "inline-flex items-center justify-center border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 gap-1"
-  },
-  // Navigation rows (sidebar / menu lists) specific.
-  //
-  // Not `dropdownItem.selected`: that one paints the accent colour *on a 10%
-  // dilution of itself* — measured 1.85:1 in light, 3.28 tangerine, 4.23
-  // claymorphism, 6.62 dark. Fine as a chip inside a dropdown, unreadable as a
-  // row label. Here the tint stays on the surface and the label keeps
-  // full-contrast `text-d-foreground` (12.19 / 10.35 / 9.35 / 10.22).
-  //
-  // The bar is `d-foreground`, not `d-primary`, for the same reason: in the
-  // light theme `--d-primary` is a pale cyan that measures 1.85:1 against the
-  // tinted row, so a primary bar would fail WCAG 1.4.11 (>= 3:1 for a non-text
-  // indicator) in the default theme. Shape and position carry the state; the
-  // tint adds the brand colour on top where the theme can afford it.
-  //
-  // `base` goes on every row so the selected row's 2px does not shift content.
-  navItem: {
-    base: "border-l-2 border-l-transparent",
-    selected: "bg-d-primary/10 border-l-d-foreground text-d-foreground font-semibold",
-    // A bottom bar's cells are columns, not rows, so the left rule has no edge
-    // to run along and the state has to be carried by the cell's own surface: a
-    // pill, no border on any side.
-    //
-    // The pill is the sidebar row's own state, ported: `bg-d-sidebar-accent` +
-    // `text-d-sidebar-accent-foreground` + a bold label, which is exactly what
-    // `sidebarMenuButtonVariants` paints under `data-[active=true]`. One
-    // vocabulary for "you are here" across the two navigations, which is worth
-    // more than either surface being optimal on its own.
-    //
-    // What comes with it is the sidebar's contrast, and it is very low.
-    // `--d-sidebar-accent` is `--colors--surface--tertiary` at 40% alpha, so on
-    // the bar (`d-card`, #fafafa light / #1f1f1f dark) it composites to #efefef
-    // and #2f2f2f — **1.10:1 in light and 1.23:1 in dark**, far under the 3:1 of
-    // WCAG 1.4.11 for a non-text state indicator. That is not a regression
-    // introduced here: the same fill on the sidebar's own surface (#f5f5f5)
-    // measures 1.08:1, so the desktop sidebar has always marked the current row
-    // by *weight*, with the tint as a hint. The label is never at risk either
-    // way — `--d-sidebar-accent-foreground` is `--colors--text--body-primary`,
-    // the colour the inactive cells already use, 11.9:1 on the composited fill.
-    //
-    // `font-bold` and not `semibold`: with a fill this faint the weight is the
-    // state, and it is the sidebar's own value. It costs label width on a cell
-    // that already truncates at 375px — if that has to be bought back,
-    // `font-semibold` is the place to spend it, not the fill.
-    //
-    // Measured alternatives, for whenever the 3:1 floor has to be met.
-    // `bg-d-primary` + `text-d-primary-foreground`: 1.98:1 light / 7.99:1 dark —
-    // the brand fill this replaced, under the floor in light but separating by
-    // hue, which 1.4.11 does not measure. `bg-d-foreground` + `text-d-background`:
-    // 13.01:1 / 12.49:1 — conforming, but it reads as a selected chip rather
-    // than the current tab and leaves the bar with no brand. Not a tint of
-    // primary: /10 is 1.07:1 light, /40 still 1.30:1, solid `bg-d-accent` 1.26:1.
-    //
-    // `rounded-md` (6px, = `radius.default`) and not `radius.sm`: `sm` is 4px in
-    // the v4 build and 2px in the v3 one, and this would be the single place
-    // where the two CSS bundles disagree. Not `rounded-d-md` either — that maps
-    // onto `--d-radius` and becomes 18px under claymorphism, while the dock it
-    // sits inside is a fixed `rounded-t-lg`.
-    //
-    // `basePill` reserves nothing (there is no border to reserve), so activating
-    // a cell cannot shift its content; it is there so every cell shares the
-    // radius and only the fill changes.
-    basePill: "rounded-md",
-    selectedPill: "bg-d-sidebar-accent text-d-sidebar-accent-foreground font-bold"
+    base: "inline-flex items-center justify-center border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 gap-1",
+    sizes: {
+      default: "h-5 px-2.5",
+      // Badges are usually smaller
+      sm: "h-4 px-1.5 text-[10px]",
+      lg: "h-6 px-3"
+    }
   },
   // Dropdown item specific
   dropdownItem: {
+    base: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm text-d-foreground outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
     selected: "bg-d-primary/10 text-d-primary font-medium data-[selected=true]:text-d-primary data-[selected=true]:bg-d-primary/30 hover:text-d-primary hover:bg-d-primary/30",
     hover: "data-[selected=true]:bg-d-accent/50 data-[selected=true]:text-d-accent-foreground hover:bg-d-accent/50 hover:text-d-accent-foreground"
   }

package/dist/components/nav-tokens.js

@@ -0,0 +1,41 @@
+"use client";
+const e = {
+  /**
+   * The state of a navigation item, in the two shapes the surfaces need: a left
+   * rule for a vertical list, a pill for a horizontal bar.
+   */
+  item: {
+    // The bar is `d-foreground`, not `d-primary`: in the light theme
+    // `--d-primary` measures 1.85:1 against the tinted row and a primary bar
+    // would fail WCAG 1.4.11 (>= 3:1 for a non-text indicator).
+    // `base` goes on every row so the selected row's 2px does not shift content.
+    base: "border-l-2 border-l-transparent",
+    selected: "bg-d-primary/10 border-l-d-foreground text-d-foreground font-semibold",
+    // Duplicates what `sidebarMenuButtonVariants` paints under
+    // `data-[active=true]` in `sidebar.tsx` — two copies of "you are here", by
+    // decision. The fill is ~1.1:1, under WCAG 1.4.11's 3:1, so `font-bold`
+    // carries the state and the tint is only a hint. `rounded-md` and not
+    // `radius.sm` (4px in v4, 2px in v3) nor `rounded-d-md` (18px in clay).
+    basePill: "rounded-md",
+    selectedPill: "bg-d-sidebar-accent text-d-sidebar-accent-foreground font-bold"
+  },
+  /**
+   * The icon rail at 3rem, where the glyph carries the whole row. One home for
+   * the geometry because `sidebarMenuButtonVariants`, the two initial-letter
+   * fallbacks in `app-sidebar.tsx` and the group selector must agree on it.
+   */
+  rail: {
+    // The content box is exactly the glyph (`32 - 2*6 = 20`), and that equality
+    // is the centring mechanism: the label stays mounted as a `flex-1` sibling,
+    // so any slack in the box is claimed by the label and pushes every glyph
+    // off-centre. Change one of the three numbers and the other two follow.
+    button: "group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-1.5 group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:[&>svg]:size-5",
+    // Sized to the rail's content box in both states, for the same reason: a
+    // 16px box in the rail's 20px content box leaves 4px for the label to claim
+    // and that row's letter sits left of every glyph above it.
+    fallbackGlyph: "size-4 group-data-[collapsible=icon]:size-5 group-data-[collapsible=icon]:text-sm"
+  }
+};
+export {
+  e as navTokens
+};

package/dist/components/ui/app-bottom-nav.js

@@ -1,159 +1,154 @@
 "use client";
-import { jsx as o, jsxs as y, Fragment as T } from "react/jsx-runtime";
-import * as F from "react";
-import { designTokens as u } from "../design-tokens.js";
-import { Icon as K } from "./icon.js";
-import { useSidebar as R } from "./sidebar.js";
-import { cn as i } from "../../lib/utils.js";
-const I = 6, w = /* @__PURE__ */ new Set(), c = (t) => {
-  w.has(t) || (w.add(t), console.warn(t));
-}, $ = (t) => `${t.url} ${t.title}`, k = (t) => !!t.isActive || !!t.subItems?.some((n) => n.isActive), z = "md:hidden shrink-0 overflow-hidden bg-d-card border-d-border rounded-t-lg border-t pb-[env(safe-area-inset-bottom)]", D = "flex items-stretch p-1", m = i(
+import { jsxs as d, jsx as n, Fragment as J } from "react/jsx-runtime";
+import * as Q from "react";
+import { designTokens as U } from "../design-tokens.js";
+import { navTokens as T } from "../nav-tokens.js";
+import { Icon as V } from "./icon.js";
+import { warnOnce as i, someRowBadged as _, normalizeNavBadge as W, NavBadgeOverlay as Y, NavBadgeDot as w, NavBadgeSrLabel as Z } from "./nav-badge.js";
+import { useSidebar as ee } from "./sidebar.js";
+import { cn as r } from "../../lib/utils.js";
+const O = 6, $ = (a) => `${a.url} ${a.title}`, A = (a) => !!a.isActive || !!a.subItems?.some((o) => o.isActive), te = "md:hidden shrink-0 overflow-hidden bg-d-card border-d-border rounded-t-lg border-t pb-[env(safe-area-inset-bottom)]", ae = "flex items-stretch p-1", g = r(
   // `min-h-11` (44px) written out rather than `sizes.touch`: that token also
-  // carries `px-4`, and 16px of horizontal padding inside a ~61px cell would
-  // leave 29px for the label. `min-h-`, never `h-`: a cell must be able to grow.
-  // `py-1.5` and not `py-2.5`: the bar's breathing room is the `<nav>`'s 4px
-  // inset, and paying for it twice would put the cell at 54px and the bar at
-  // 63px — past the column budget for no legibility gained. It stayed at
-  // `py-1.5` when the icon dropped to 16px, deliberately: `py-2` would have held
-  // the bar at the 59px it had with a 20px glyph, and a lower bar was the point
-  // of the smaller glyph, not a side effect of it. 12px of vertical padding
-  // around 34px of content (16 + 2 + 16) puts the pill at 46px.
+  // carries `px-4` and `text-sm`, and 16px of horizontal padding inside a ~61px
+  // cell would leave 29px for the label. `min-h-`, never `h-`: a cell must be
+  // able to grow. `cursor-pointer` because v4's preflight sets
+  // `cursor: default` on `<button>`, so without it the Menu cell would feel
+  // inert next to the `<a>` cells.
   //
-  // Which leaves this value boxed in from both directions, and tighter than it
-  // was: upwards by the column budget, downwards by the 44px touch floor, now
-  // 2px away instead of 6. Trim `py-1.5`, the icon or the label's line-height
-  // any further and `min-h-11` takes the cell's height over from the padding —
-  // at which point the class list stops describing what renders, silently.
-  // Measure the rendered cell, not the padding.
-  // `cursor-pointer` because the two cell elements must not diverge: v4's
-  // preflight sets `cursor: default` on `<button>`, so without it the Menu cell
-  // would feel inert next to the `<a>` cells on a desktop-narrow window.
-  //
-  // `flex-1 min-w-0` is the equal-width guarantee, and both halves are load
-  // bearing. `flex-1` alone is `1 1 0%`, which distributes the row evenly only
-  // as long as no cell's content forces it wider: a flex item's automatic
-  // minimum size is its min-content width, so a cell whose contents cannot
-  // shrink below the fair share silently takes more than it and every other
-  // cell takes less. Here that floor is 24px — a `shrink-0` 16px icon plus
-  // `px-1` — and the narrowest cell the budget produces is 52px (six cells at
-  // 320px), so today the row is even by arithmetic. `min-w-0` makes it even by
-  // construction instead, at any width and whatever a cell holds, which is what
-  // the row's rhythm actually depends on. The label shrinks in exchange
-  // (`w-full truncate`, whose `overflow-hidden` already floors its own
-  // min-content size at 0) — the label is the right thing to spend.
-  "flex min-h-11 min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 px-1 py-1.5 text-xs",
-  // The radius goes on every cell, not only the marked one: it costs nothing
-  // while the fill is transparent, and it keeps the hover and press surfaces of
-  // an inactive cell the same shape as the pill they can become.
-  u.navItem.basePill,
-  u.focusRing,
-  // `ring-inset` is still right, for a new reason: the cells now touch each
-  // other, not the dock's clipped corners, so a 3px outset ring would not be
-  // shaved — it would spill over the neighbouring cell and read as if two cells
-  // were focused.
+  // `min-w-0` beside `flex-1` is the equal-width guarantee: a flex item's
+  // automatic minimum size is its min-content width, so without it a cell whose
+  // contents cannot shrink below the fair share takes more than it and every
+  // other cell takes less. The label is what gives way instead.
+  "flex min-h-11 min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 px-1 py-2.5 text-xs",
+  // On every cell, not only the marked one: it keeps the hover and press
+  // surfaces of an inactive cell the same shape as the pill they can become.
+  T.item.basePill,
+  U.focusRing,
+  // `ring-inset` because the cells touch each other: an outset ring would spill
+  // over the neighbour and read as if two cells were focused.
   "focus-visible:ring-inset"
-), p = i(
+), h = r(
   "text-d-foreground font-medium",
   "[@media(hover:hover)_and_(pointer:fine)]:hover:bg-d-sidebar-accent [@media(hover:hover)_and_(pointer:fine)]:hover:text-d-sidebar-accent-foreground",
   "active:bg-d-sidebar-accent active:text-d-sidebar-accent-foreground"
-), v = u.navItem.selectedPill, d = (t, n) => /* @__PURE__ */ y(T, { children: [
-  /* @__PURE__ */ o(K, { name: t, size: "xs", className: "shrink-0" }),
-  /* @__PURE__ */ o("span", { className: "w-full truncate text-center", children: n })
+), M = T.item.selectedPill, P = "relative flex size-5 shrink-0 items-center justify-center", c = (a, o) => /* @__PURE__ */ d("span", { className: P, children: [
+  /* @__PURE__ */ n(V, { name: a, size: "sm", className: "shrink-0" }),
+  o
+] }), ne = (a, o) => /* @__PURE__ */ d("span", { className: r(P, "[&>svg]:size-full"), children: [
+  a,
+  o
+] }), oe = "-top-1 -right-1.5", S = "absolute -top-1 -right-1", N = (a, o, m) => /* @__PURE__ */ d(J, { children: [
+  a,
+  /* @__PURE__ */ n("span", { className: "w-full truncate text-center", children: o }),
+  m
 ] });
-function J({
-  items: t,
-  showMenu: n = !0,
-  menuLabel: A = "Menu",
-  ariaLabel: B = "Main navigation",
-  menuIconName: M = "Menu",
-  linkComponent: b,
-  linkProps: S = {},
-  className: _,
-  ...j
+function pe({
+  items: a,
+  showMenu: o = !0,
+  menuLabel: m = "Menu",
+  ariaLabel: j = "Main navigation",
+  menuIcon: p = "Menu",
+  menuBadge: D = !1,
+  linkComponent: x,
+  linkProps: z = {},
+  className: E,
+  ...R
 }) {
-  const { openMobile: f, setOpenMobile: h, mobileNavTarget: L, setMobileNavTarget: g } = R(), s = n ? I - 1 : I, r = t.slice(0, s);
-  if (t.length > s) {
-    const e = t.slice(s).map((a) => `"${a.title}"`).join(", ");
-    c(
-      `AppBottomNav: ${t.length} items passed, ${s} slots available. Dropped: ${e}.`
+  const { openMobile: I, setOpenMobile: B, mobileNavTarget: F, setMobileNavTarget: C } = ee(), u = o ? O - 1 : O, l = a.slice(0, u), v = a.slice(u);
+  if (v.length > 0) {
+    const e = v.map((t) => `"${t.title}"`).join(", ");
+    i(
+      `AppBottomNav: ${a.length} items passed, ${u} slots available. Dropped: ${e}.`
     );
   }
-  const N = /* @__PURE__ */ new Set();
-  for (const e of r) {
-    const a = $(e);
-    N.has(a) && c(
-      `AppBottomNav: duplicate item "${a}" — one of them is ignored.`
-    ), N.add(a);
+  const L = /* @__PURE__ */ new Set();
+  for (const e of l) {
+    const t = $(e);
+    L.has(t) && i(
+      `AppBottomNav: duplicate item "${t}" — one of them is ignored.`
+    ), L.add(t);
   }
-  const l = r.findIndex(k);
-  r.filter(k).length > 1 && c(
-    `AppBottomNav: more than one active item — "${r[l].title}" wins.`
+  const b = l.findIndex(A);
+  l.filter(A).length > 1 && i(
+    `AppBottomNav: more than one active item — "${l[b].title}" wins.`
   );
-  const x = n && l === -1, P = (e, a) => {
-    const C = {
-      className: i(
-        m,
-        a ? v : p
+  const K = D || _(v), G = (() => {
+    const e = K ? /* @__PURE__ */ n(w, { className: S }) : null;
+    if (typeof p == "string") return c(p, e);
+    const t = p();
+    return t == null ? c("Menu", e) : ne(t, e);
+  })(), k = (e) => {
+    const t = W(e.badge, "compact", e.title), s = /* @__PURE__ */ n(Z, { row: e, badge: t });
+    return t?.kind === "text" ? {
+      visual: /* @__PURE__ */ n(Y, { text: t.text, className: oe }),
+      srLabel: s
+    } : t?.kind === "dot" || _(e.subItems) ? { visual: /* @__PURE__ */ n(w, { className: S }), srLabel: s } : { visual: null, srLabel: s };
+  }, X = (e, t) => {
+    const s = {
+      className: r(
+        g,
+        t ? M : h
       ),
       "data-slot": "app-bottom-nav-item",
-      "data-active": a ? "true" : void 0,
+      "data-active": t ? "true" : void 0,
       // Not set unconditionally: `truncate` does not alter the text node, so
-      // the full title is already in the accessibility tree and a duplicating
-      // `aria-label` is dead weight.
+      // the full title is already in the accessibility tree.
       "aria-label": e.ariaLabel,
-      "aria-current": a ? "page" : void 0
-    };
-    return b ? /* @__PURE__ */ o(b, { href: e.url, ...C, ...S, children: d(e.iconName, e.title) }) : /* @__PURE__ */ o("a", { href: e.url, ...C, children: d(e.iconName, e.title) });
-  }, O = (e, a) => (
-    // A button is not a page, so no `aria-current` even when the indicator is here.
-    // No `aria-controls` either — the drill panel's id is Radix-generated and
-    // unreachable from the bar, and a dangling reference is worse than none —
-    // and no `aria-haspopup`, which would promise arrow-key menu semantics the
-    // drill-down does not implement.
-    /* @__PURE__ */ o(
-      "button",
-      {
-        type: "button",
-        "data-slot": "app-bottom-nav-item",
-        "data-active": a ? "true" : void 0,
-        "aria-label": e.ariaLabel,
-        "aria-expanded": f && L === e.title,
-        className: i(
-          m,
-          a ? v : p
-        ),
-        onClick: () => {
-          g(e.title), h(!0);
-        },
-        children: d(e.iconName, e.title)
-      }
-    )
-  );
-  return r.length === 0 && !n ? (c(
+      "aria-current": t ? "page" : void 0
+    }, { visual: f, srLabel: H } = k(e), y = N(
+      c(e.iconName, f),
+      e.title,
+      H
+    );
+    return x ? /* @__PURE__ */ n(x, { href: e.url, ...s, ...z, children: y }) : /* @__PURE__ */ n("a", { href: e.url, ...s, children: y });
+  }, q = (e, t) => {
+    const { visual: s, srLabel: f } = k(e);
+    return (
+      // A button is not a page, so no `aria-current` even when the indicator is
+      // here. No `aria-controls` — the drill panel's id is Radix-generated and
+      // unreachable from the bar — and no `aria-haspopup`, which would promise
+      // arrow-key menu semantics the drill-down does not implement.
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          "data-slot": "app-bottom-nav-item",
+          "data-active": t ? "true" : void 0,
+          "aria-label": e.ariaLabel,
+          "aria-expanded": I && F === e.title,
+          className: r(
+            g,
+            t ? M : h
+          ),
+          onClick: () => {
+            C(e.title), B(!0);
+          },
+          children: N(c(e.iconName, s), e.title, f)
+        }
+      )
+    );
+  };
+  return l.length === 0 && !o ? (i(
     "AppBottomNav: no items and showMenu={false} — nothing to render, the bar is omitted."
-  ), null) : /* @__PURE__ */ o(
+  ), null) : /* @__PURE__ */ n(
     "div",
     {
       "data-slot": "app-bottom-nav",
-      className: i(z, _),
-      ...j,
-      children: /* @__PURE__ */ y("nav", { "aria-label": B, className: D, children: [
-        r.map((e, a) => /* @__PURE__ */ o(F.Fragment, { children: e.subItems?.length ? O(e, a === l) : P(e, a === l) }, $(e))),
-        n && /* @__PURE__ */ o(
+      className: r(te, E),
+      ...R,
+      children: /* @__PURE__ */ d("nav", { "aria-label": j, className: ae, children: [
+        l.map((e, t) => /* @__PURE__ */ n(Q.Fragment, { children: e.subItems?.length ? q(e, t === b) : X(e, t === b) }, $(e))),
+        o && /* @__PURE__ */ n(
           "button",
           {
             type: "button",
             "data-slot": "app-bottom-nav-item",
-            "data-active": x ? "true" : void 0,
-            "aria-expanded": f,
-            className: i(
-              m,
-              x ? v : p
-            ),
+            "aria-expanded": I,
+            className: r(g, h),
             onClick: () => {
-              g(null), h(!0);
+              C(null), B(!0);
             },
-            children: d(M, A)
+            children: N(G, m)
           }
         )
       ] })
@@ -161,5 +156,5 @@ function J({
   );
 }
 export {
-  J as AppBottomNav
+  pe as AppBottomNav
 };