laif-ds 0.2.92 → 1.0.0

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

@@ -8,24 +8,68 @@ 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.           |
-| `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.  |
+| Prop                | Type                              | Default       | Description                                |
+| ------------------- | --------------------------------- | ------------- | ------------------------------------------ |
+| `navigation`        | `NavGroup[]`                      | **required**  | Main navigation groups.                    |
+| `navigationFooter`  | `NavGroup[]`                      | `undefined`   | Footer navigation groups.                  |
+| `navigationDisplay` | `"list" \| "tab"`                 | `"list"`      | How the `navigation` groups are laid out.  |
+| `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[] }`
+`NavGroup` → `{ title: string; url?: string; items: NavItem[]; iconName?: IconName; icon?: NavIcon }`
 
-`NavItem` → `{ title: string; url: string; isActive?: boolean; iconName?: IconName; subItems?: NavSubItem[] }`
+`NavItem` → `{ title: string; url: string; isActive?: boolean; iconName?: IconName; icon?: NavIcon; subItems?: NavSubItem[] }`
 
-`NavSubItem` → `{ title: string; url: string; isActive?: boolean; iconName?: IconName }`
+`NavSubItem` → `{ title: string; url: string; isActive?: boolean; iconName?: IconName; icon?: NavIcon }`
+
+`NavIcon` → `React.ComponentType<{ className?: string }>`
+
+`NavGroup.iconName` / `NavGroup.icon` are read **only** in
+`navigationDisplay="tab"`, where they are the tab's icon; they are ignored by the
+list rendering and by the mobile menu.
+
+### Icons: `iconName` or `icon`
+
+Every row takes its icon from one of two channels:
+
+- `iconName` — the name of a **lucide** icon, rendered through the `Icon` atom.
+  This is the default and covers the whole lucide set.
+- `icon` — **any component that accepts `className`**, for third-party icon
+  libraries (`react-icons`, `@heroicons/react`, `@tabler/icons-react`) or a
+  project's own SVG components. Pass the component itself, not an element:
+  `icon: FaHouse`, never `icon: <FaHouse />`.
+
+`icon` **takes precedence** when both are set on the same row.
+
+The size is imposed by the sidebar, not by the consumer: it passes a size
+_class_ (`size-5` in a row, `size-4` in a collapsed dropdown or a tab), which is
+why the contract is `className` and not a `size` prop. A CSS width/height
+overrides the `width`/`height` attributes libraries like `react-icons` put on
+their `<svg>`, so the same component lands at the right size in every context.
+Colour is inherited (`currentColor`), so an icon that does not hardcode a `fill`
+follows the active/hover states like a lucide one.
+
+```tsx
+import { FaHouse, FaUsers } from "react-icons/fa6";
+
+const navigation = [
+  {
+    title: "App",
+    items: [
+      { title: "Dashboard", url: "/", isActive: true, icon: FaHouse },
+      { title: "Utenti", url: "/users", icon: FaUsers },
+      // Mixing the two channels in one list is fine.
+      { title: "Impostazioni", url: "/settings", iconName: "Settings" },
+    ],
+  },
+];
+```
 
 `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
@@ -44,6 +88,13 @@ Inherits other props from `Sidebar` via `React.ComponentProps<typeof Sidebar>`.
   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.
+- **Group display**: `navigationDisplay` switches the `navigation` groups
+  between a stacked list (default) and a tab bar — see the dedicated section.
+- **A lone `navigation` group has no label**: when `navigation` holds a single
+  group its `SidebarGroupLabel` is not rendered, in either display and on mobile
+  too — the name of the only group distinguishes it from nothing. This applies
+  to `navigation` only: `navigationFooter` always keeps its label (it is usually
+  a single group by nature, and hiding it would change every existing consumer).
 - **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
@@ -51,6 +102,99 @@ Inherits other props from `Sidebar` via `React.ComponentProps<typeof Sidebar>`.
 
 ---
 
+## Navigation display (`navigationDisplay`)
+
+`"list"` (the default, and the pre-existing behavior) stacks every `navigation`
+group one under the other, each under its own `SidebarGroupLabel`.
+
+`"tab"` turns the groups into a **tab bar at the top of the sidebar content**
+and shows **one group at a time**:
+
+```tsx
+<AppSidebar
+  navigationDisplay="tab"
+  navigation={[
+    { title: "App", iconName: "LayoutDashboard", items: appItems },
+    { title: "Admin", iconName: "ShieldCheck", items: adminItems },
+  ]}
+  navigationFooter={footerGroups}
+/>
+```
+
+- **Only the selected tab shows its label.** Every other tab is a square
+  icon-only button; the selected one **animates its width open** until it fits
+  its title exactly (160ms, `cubic-bezier(0.23, 1, 0.32, 1)`), and closes again
+  when another tab is picked. Tabs are styled as sidebar rows (same height,
+  padding, radius and accent as `SidebarMenuButton`), sized by their content and
+  packed to the left: the width the selected tab does not need is left empty.
+- The label is **never unmounted**, only clipped and faded: it is the tab's
+  accessible name, and a `role="tab"` without one is unusable with a screen
+  reader (`opacity` keeps it in the accessibility tree, where `display` or
+  `visibility` would not). The width animation is the grid trick —
+  `grid-template-columns: 0fr -> 1fr` on a wrapper whose child is
+  `overflow-hidden whitespace-nowrap` — because `width: auto` is not animatable
+  and this resolves to exactly the content's width with no JS measurement and no
+  `max-width` to keep in sync with the longest title.
+- **The label fade is asymmetric on purpose**, and both halves share the width
+  animation's curve. Opening, it is delayed 70ms and runs 140ms, so the text
+  only appears once the width has already reached roughly 88%. Closing, it runs
+  60ms with no delay: the curve is front-loaded enough that the tab is ~91% shut
+  after 43ms, so the label has to clear in well under half the nominal 160ms —
+  measured, it is at 2% opacity while the tab is still 9% open. Anything slower
+  leaves the text visibly sliding out under the closing edge.
+- **No press feedback on the tabs.** They are styled as sidebar rows, and no row
+  in the sidebar has a press state — `SidebarMenuButton` has none, and the
+  mobile menu turns the shared `interaction.active` squash down explicitly as
+  "the button squash, wrong on a list row". A tab that squashed above nav rows
+  that do not would break the rail's homogeneity. The icon-mode selector button
+  refuses it for the same reason.
+- **Hover**: only _unselected_ tabs take a hover tint, and only behind
+  `@media (hover: hover) and (pointer: fine)`. The selected tab is excluded
+  because its own background is a translucent accent and the hover rule (higher
+  specificity) halved that alpha — the hover _lightened_ the selected tab rather
+  than darkening it. The pointer query stops a tap from leaving the tint stuck
+  on a tablet, where this bar is still rendered (>= 768px).
+- **Reduced motion**: under `prefers-reduced-motion: reduce` both the width and
+  the fade transitions are dropped (`motion-reduce:transition-none`) and the
+  label appears immediately.
+- **An icon is effectively required in tab mode**: since an unselected tab is
+  icon-only, a group with neither `iconName` nor `icon` falls back to the **initial of its title**, the
+  same fallback top-level items use in icon mode. It is never a blank square.
+- **Tooltips**: an unselected tab shows its group title in a tooltip on the
+  right. The selected one does not — its label is already visible.
+- Built on the `Tabs` primitive, so `role="tab"` / `aria-selected`, the roving
+  tabindex and ←/→ keyboard navigation come for free. Only the selected group's
+  items are mounted.
+- **A title longer than the sidebar** does not push the other tabs out: the
+  selected tab shrinks to the space left by them and the label is **truncated
+  with an ellipsis** (`Amministrazione e configurazione avanzata` renders as
+  `Amministrazione e …`). The delayed fade above is what keeps this from
+  flickering through the opening animation: the narrow intermediate states
+  (`A…`, `Am…`) play out while the text is still transparent. Keep group titles
+  short anyway — an ellipsis is a fallback, not a layout.
+- The group label is **not** repeated inside the panel — the tab is the label.
+- **`navigationFooter` is never tabbed.** It stays pinned at the bottom and
+  fully visible in both displays; only `navigation` is affected.
+- **Selected tab**: uncontrolled. At mount the selected tab is the group holding
+  the active page (an item with `isActive`, or one whose `subItems` contain an
+  active one), not blindly the first group; it falls back to the first group when
+  nothing is active. Afterwards the user's choice stands, and it is re-synced
+  only when navigation moves the active item into a **different** group. There is
+  no `activeGroup` / `onActiveGroupChange` prop: `isActive` is already the single
+  source of truth for "where am I", and a second one could contradict it.
+- **Single group**: with `navigation.length <= 1` the tab bar is dropped and the
+  group renders as a plain list — a bar with one permanently selected tab is not
+  a choice. Its `SidebarGroupLabel` is dropped too, see below. This is decided
+  before any width is considered, so it holds in **every** state: expanded,
+  `collapsible="icon"` expanded, and `collapsible="icon"` collapsed all render
+  zero tabs. There is no icon-only strip for a lone group.
+- **Icon mode**: see below.
+- **Mobile (`<768px`)**: `navigationDisplay` is **ignored**. The drill-down menu
+  already presents each group as its own card, so a tab bar would separate the
+  same groups twice.
+
+---
+
 ## Icon mode (`collapsible="icon"`)
 
 The default stays `"offcanvas"` (the sidebar slides out of view when collapsed).
@@ -70,11 +214,149 @@ Behavior when collapsed on desktop:
 - **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
+- **Items without an icon** (neither `iconName` nor `icon`) 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.
+- **Tab bar** (`navigationDisplay="tab"`): 3rem of rail has no room for a row of
+  tabs, so the bar becomes **a single group-selector button** above the active
+  group's items — the "one group at a time" model survives the collapse. See
+  the dedicated section below.
+
+### The group selector (`navigationDisplay="tab"` + `collapsible="icon"`, collapsed)
+
+A **single 32x40 button**: the active group's icon with a chevron under it,
+opening a menu of the other groups to the right. It replaces the vertical strip
+of 32px squares an earlier version used — those squares were indistinguishable
+from the nav rows right below them, so selector and navigation read as one list.
+
+- **The icon does not move.** Its centre is at (24, 24) from the sidebar edge in
+  _both_ states — measured, expanded and collapsed. That is what makes the swap
+  read as "the label closed and a chevron appeared" rather than a jump, which is
+  why there is no transition animating between the two forms: they are different
+  DOM trees, and animating that would need FLIP or a shared-layout primitive for
+  continuity the geometry already provides. Only the chevron animates, fading in.
+- **`<Tabs>` is not rendered at all** in this state. It is not hidden: a
+  `TabsContent` is a `role="tabpanel"` whose `aria-labelledby` points at its
+  trigger, so a hidden `TabsList` would leave a dangling IDREF and a tabpanel
+  with no tablist. Nothing is lost — the selection lives in component state and
+  `Tabs` was already controlled — and the group takes its accessible name from
+  `role="group"` + `aria-label` instead.
+- **This is deliberately no longer the tab pattern**, it is WAI-ARIA APG "Menu
+  Button". A `tablist` with one visible tab would have a screen reader announce
+  "tab 1 of 1" with four groups present, and arrow-key iteration — the reason
+  Radix Tabs is used when expanded — would have nowhere to move. The ARIA
+  pattern changing on collapse is correct: the interaction changes too.
+- **Menu items are `menuitemradio`**, not plain items: this is a single choice of
+  state, so `aria-checked` and the selected dot come from the primitive rather
+  than being restyled by hand.
+- **Keyboard** comes entirely from the menu primitive: `Enter`/`Space`/`Down`
+  open, arrows and `Home`/`End` move, a-z is typeahead, `Esc` closes and returns
+  focus to the button. Focus stays on the button after a selection.
+- **Hover feedback is on the chevron, not the surface**: the button rests on the
+  accent, which is the colour a hover would reach for. The chevron goes from 70%
+  to full foreground instead. Contrast measured at 4.79:1 (claymorphism) to
+  6.27:1 (dark) against the accent — above the 3:1 that WCAG 1.4.11 asks of a
+  non-text indicator in all four themes.
+- **The chevron does not rotate on open.** The menu opens to the _right_, so
+  flipping it would assert the popup is above.
+- **Three signals separate it from the nav rows**, which are themselves
+  accent-tinted when active: the chevron, the 40px height against their 32, and
+  a separator underneath that exists only when collapsed.
+- **Focus survives the collapse in both directions.** The selected tab and the
+  selector button register under the same key, so collapsing with the tab
+  focused moves focus to the button, and expanding moves it back.
+- A group without an `iconName` falls back to the initial of its title, in the
+  button and in the menu alike. The **tooltip** on the right is what carries the
+  active group's full name, and unlike the expanded bar it is never suppressed —
+  this button has no visible label in any state.
+
+- **Mobile** ignores `collapsible` entirely — below 768px the component renders
+  the Settings-style menu described in the next section.
+
+---
+
+## Mobile menu (`<768px`)
+
+Below 768px (the `useIsMobile` breakpoint) `AppSidebar` **replaces** the desktop
+tree with a mobile menu modelled on the iOS/Android Settings screen. This is the
+default: there is no prop to opt in or out, and `collapsible` has no effect there
+(`Sidebar` short-circuits to its full-screen `Sheet` before reading it, so even
+`collapsible="none"` gets the sheet). The same `navigation` /
+`navigationFooter` data drives both renderings.
+
+Anatomy, level 0:
+
+- The panel background is `bg-d-muted`; each `NavGroup` is a `bg-d-card` card
+  with a border, `radius.lg` and a divider between rows. The group `title`
+  renders as a small uppercase heading above its card, and is omitted when empty
+  — and also when `navigation` holds a **single** group, matching the desktop
+  rule above and what a drilled level already does. `navigationFooter` keeps its
+  heading regardless.
+- Rows are at least **44px** tall (`designTokens.sizes.touch`), with the icon in
+  a fixed left column. The label wraps freely and is never clamped or
+  truncated — `min-h-11` lets the row grow instead, so a long label still reads
+  in full at 200% text zoom (WCAG 1.4.4).
+- The icon column is reserved **only if at least one row in that list has an
+  icon** (`iconName` or `icon`); rows without one get an empty placeholder so a mixed list stays
+  aligned. There is no initial-letter fallback here (unlike desktop icon mode,
+  where the icon is the only affordance).
+- A chevron on the right marks rows that have `subItems` — and only those.
+- The active row uses `designTokens.navItem.selected`: a `bg-d-primary/10`
+  surface tint, a full-contrast `text-d-foreground` label, and a 2px left bar as
+  a second, non-colour channel. A parent row is tinted when **any** of its
+  `subItems` is active, so level 0 still shows where you are on a sub-page;
+  `aria-current="page"` stays on the real leaf only.
+- `headerContent` stays at the top and does not scroll, and **is not focused on
+  open** — Radix would otherwise focus the first focusable node in it, which for
+  a search field means raising the keyboard over the menu. Focus goes to the
+  panel itself, and returns to whatever opened the sheet when it closes.
+- `navigationFooter` is detached from the groups above it as the "system" block
+  of a native Settings list; `footerContent` is the last block, and the panel
+  reserves `env(safe-area-inset-bottom)` below it for the home indicator.
+- Above 640px the column is capped and centred: a full-bleed card would leave
+  the chevron a screen-width away from its label.
+
+**Drill-down instead of accordion.** Tapping a row with `subItems` pushes a
+level 1 that shows the children in a single card, under a back bar. The back
+control is labelled by its **destination** (`‹ Menu`, `aria-label="Back to
+menu"`) so the visible text is part of the accessible name; the level's own title
+sits below it as a focusable `<h2>`. Parents are never navigable (`url` is ignored, as
+documented above), and a parent with a single child still drills — the chevron
+always means the same thing. Opened from the sidebar trigger the level always
+starts at 0, even if the current page is a sub-item.
+
+The panel can also **open already drilled into a level**: whatever opens the
+sheet may publish a `NavItem.title` as the sidebar context's `mobileNavTarget`
+right before `setOpenMobile(true)`, and the panel resolves it once, at mount, to
+the first item with that title and sub-items (`navigation` then
+`navigationFooter`). This is what `AppBottomNav` uses to jump straight to a
+level; an unresolved target opens level 0 with a warning, and the target is
+cleared when the panel closes, so it never re-drills a later open.
+
+**Behavior**
+
+- **Tapping a navigable row closes the panel** (`setOpenMobile(false)`), so the
+  full-screen menu does not sit on top of the page that just loaded. A
+  cmd/ctrl/shift/alt/middle click leaves it open — the destination is opening
+  somewhere else.
+- **Focus**: drilling down moves focus to the level `<h2>` (so a screen reader
+  announces the new level); going back restores focus to the parent row.
+- **Motion**: level 1 slides in from the right, the return to level 0 from the
+  left, 200ms, suppressed under `prefers-reduced-motion`.
+- **Markup** is `<nav>` → `<section>` + `<h3>` → `<ul>`/`<li>` with native links.
+  No `menu`/`menuitem` ARIA roles: this is navigation, not a command menu.
+- **Scroll** is native on the card list, with `overscroll-contain` and a bottom
+  padding that clears the home indicator.
+
+**Known limits**
+
+- **The Android back button and edge swipe are not intercepted.** The library
+  does not touch `history`, which would fight the consumer's router. Going back
+  a level is on-screen only.
+- **`openMobile` is internal state.** There is no prop to open or close the
+  mobile panel from outside; the only public affordances are `SidebarTrigger`
+  (or `useSidebar().setOpenMobile`) and the sheet's own close button.
+- **No `SidebarRail` on mobile**, regardless of `showRail`.
 
 ---
 
@@ -164,5 +446,6 @@ export function WithHeaderFooter() {
 ## Notes
 
 - **Routing**: Prefer `linkComponent` to avoid full page reloads (e.g., `next/link`).
-- **Icons**: Use `laif-ds` `Icon` by passing `iconName` in navigation items.
+- **Icons**: pass `iconName` for a lucide icon, or `icon` with a component from
+  any third-party icon library — see [Icons: `iconName` or `icon`](#icons-iconname-or-icon).
 - **Accessibility**: Sidebar primitives manage keyboard navigation and focus.

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

@@ -25,6 +25,10 @@ Low-level primitives to build responsive sidebars with desktop/offcanvas modes,
 
 - **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.
+  Below 768px this branch **takes precedence over `collapsible="none"`**: an
+  always-visible sidebar would take the whole viewport, and the trigger would
+  toggle an `openMobile` no sheet is listening to, leaving the navigation
+  unreachable. So on mobile `collapsible` has no effect at all.
 - **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

@@ -46,8 +46,9 @@ This document provides a complete mapping of all components available in the lai
 ### Layout & Structure Components
 
 - **Accordion** - Collapsible content panels for organizing information hierarchically
+- **AppBottomNav** - Mobile bottom navigation bar (`md:hidden`, in the normal flow as the last child of `SidebarInset`): six equal cells — up to 5 primary destinations plus a Menu cell that opens `AppSidebar`'s mobile panel, optionally already drilled into a level, or up to 6 destinations with `showMenu={false}` when the app opens that panel from its own header
 - **AppCard** - Enhanced card component with variant styles, semantic states, size control, and loading skeleton support
-- **AppSidebar** - Application sidebar navigation component, with optional icon-only collapse (`collapsible="icon"`: tooltips on top-level items, dropdown for sub-items)
+- **AppSidebar** - Application sidebar navigation component, with groups rendered as a stacked list or as a tab bar (`navigationDisplay="tab"`, one group at a time, only the selected tab labelled and animated open to fit it, `navigationFooter` always visible), optional icon-only collapse (`collapsible="icon"`: tooltips on top-level items, dropdown for sub-items) and, below 768px, a Settings-style mobile menu (grouped cards, 44px rows, drill-down on 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,17 +1,17 @@
 {
   "schemaVersion": "1.1.0",
-  "generatedAt": "2026-08-20T15:52:40.662Z",
+  "generatedAt": "2026-09-02T16:31:00.468Z",
   "package": {
     "name": "laif-ds",
-    "version": "0.2.92"
+    "version": "1.0.0"
   },
   "stats": {
-    "documentedComponentCount": 93,
-    "catalogedComponentCount": 92,
+    "documentedComponentCount": 94,
+    "catalogedComponentCount": 93,
     "missingFromDocsCount": 1,
     "deprecatedComponentCount": 2,
-    "averageAiReadinessScore": 55.54,
-    "highAiReadinessCount": 37,
+    "averageAiReadinessScore": 56.17,
+    "highAiReadinessCount": 38,
     "lowAiReadinessCount": 41
   },
   "missingFromDocs": [
@@ -248,6 +248,92 @@
         "type AlertDialogTriggerProps = React_2.ComponentProps<typeof AlertDialogPrimitive.Trigger>;\r"
       ]
     },
+    {
+      "name": "AppBottomNav",
+      "markdownPath": "components/AppBottomNav.md",
+      "importPath": "laif-ds",
+      "deprecated": false,
+      "replacement": null,
+      "tags": {
+        "cataloged": true,
+        "aiReady": true
+      },
+      "docs": {
+        "sections": [
+          {
+            "title": "Overview",
+            "slug": "overview"
+          },
+          {
+            "title": "Props",
+            "slug": "props"
+          },
+          {
+            "title": "Behavior",
+            "slug": "behavior"
+          },
+          {
+            "title": "Examples",
+            "slug": "examples"
+          },
+          {
+            "title": "Notes",
+            "slug": "notes"
+          }
+        ],
+        "hasPropsTable": true,
+        "hasExamples": true,
+        "exampleTitles": [
+          "`BottomNavItem`",
+          "Layout",
+          "Icon size: a deliberate divergence from the native baselines",
+          "Active state",
+          "Opening the menu",
+          "Accessibility",
+          "Motion",
+          "Warnings (`console.warn`, deduplicated per message)",
+          "Edge cases",
+          "App shell",
+          "Localised copy",
+          "Without the Menu cell"
+        ],
+        "controlledPattern": "likely-controlled",
+        "requiredProps": [
+          "iconName",
+          "items",
+          "title",
+          "url"
+        ]
+      },
+      "metadata": {
+        "props": {
+          "totalProps": 15,
+          "requiredPropsCount": 4,
+          "typedPropsCount": 15,
+          "describedPropsCount": 14
+        },
+        "accessibility": {
+          "hasCoverage": true
+        },
+        "states": {
+          "coveredStates": [
+            "hover",
+            "focus",
+            "error",
+            "empty",
+            "selected"
+          ],
+          "coveredStateCount": 5
+        }
+      },
+      "aiReadiness": {
+        "score": 100,
+        "tier": "high"
+      },
+      "typeReferences": [
+        "interface AppBottomNavProps extends Omit<React_2.ComponentProps<\"div\">, \"children\"> {\r"
+      ]
+    },
     {
       "name": "AppCard",
       "markdownPath": "components/AppCard.md",
@@ -930,10 +1016,18 @@
             "title": "Behavior",
             "slug": "behavior"
           },
+          {
+            "title": "Navigation display (`navigationDisplay`)",
+            "slug": "navigation-display-navigationdisplay"
+          },
           {
             "title": "Icon mode (`collapsible=\"icon\"`)",
             "slug": "icon-mode-collapsible-icon"
           },
+          {
+            "title": "Mobile menu (`<768px`)",
+            "slug": "mobile-menu-768px"
+          },
           {
             "title": "Examples",
             "slug": "examples"
@@ -946,38 +1040,43 @@
         "hasPropsTable": true,
         "hasExamples": true,
         "exampleTitles": [
+          "Icons: `iconName` or `icon`",
+          "The group selector (`navigationDisplay=\"tab\"` + `collapsible=\"icon\"`, collapsed)",
           "Basic",
           "With Header/Footer Content"
         ],
-        "controlledPattern": "not-specified",
+        "controlledPattern": "controlled-uncontrolled-documented",
         "requiredProps": [
           "navigation"
         ]
       },
       "metadata": {
         "props": {
-          "totalProps": 10,
+          "totalProps": 11,
           "requiredPropsCount": 1,
-          "typedPropsCount": 10,
-          "describedPropsCount": 10
+          "typedPropsCount": 11,
+          "describedPropsCount": 11
         },
         "accessibility": {
           "hasCoverage": true
         },
         "states": {
           "coveredStates": [
+            "hover",
             "focus",
+            "empty",
             "selected"
           ],
-          "coveredStateCount": 2
+          "coveredStateCount": 4
         }
       },
       "aiReadiness": {
-        "score": 85,
+        "score": 100,
         "tier": "high"
       },
       "typeReferences": [
-        "interface AppSidebarProps extends React_2.ComponentProps<typeof Sidebar> {\r"
+        "interface AppSidebarProps extends React_2.ComponentProps<typeof Sidebar> {\r",
+        "type AppSidebarNavigationDisplay = \"list\" | \"tab\";\r"
       ]
     },
     {
@@ -6176,5 +6275,5 @@
       ]
     }
   ],
-  "checksum": "45a413c2a13515169ecf8186102b81f4397185b855629c059394297c6c9c3303"
+  "checksum": "7347dd0e46eb44f6186c98afd32585008fadbbbcdcb7909e342274f93f42e45d"
 }