@vjdesigns/vjdesigns-ui 2.3.0 → 2.4.0

package/dist/ai/llms-full.txt

@@ -1,4 +1,4 @@
-# @vjdesigns/vjdesigns-ui 2.2.0: full reference
+# @vjdesigns/vjdesigns-ui 2.3.0: full reference
 
 > Accessible React 19 component library: WCAG 2.2 AA verified (axe on every story, a contrast check on every color pair), 31 languages with right-to-left support, themeable with any brand color (auto-adjusted to stay accessible), tree-shakable, no runtime dependencies besides React.
 
@@ -711,6 +711,7 @@ Renders a `<span>` with no role. For counts, pass `label` (e.g.
 - Counts
 - Anchored
 - In text
+- Inverse: `inverse` swaps the solid colors, for a badge on a solid tone surface: a solid Navbar, a Banner, a primary card.
 - On surfaces (both themes)
 
 ## BadgeAnchor
@@ -5452,22 +5453,22 @@ import { Navbar } from "@vjdesigns/vjdesigns-ui";
 
 Category: navigation · Storybook: Navigation/Navbar
 
-The top header of an app or site. Renders a `<header>` (a `banner`
-landmark when it isn't inside `main`, `article`, `aside`, `nav`, or
-`section`) with brand, navigation, and actions. Below `collapseBelow`
-the navigation moves into a modal drawer opened by a menu button.
-
-```tsx
-<Navbar>
-  <Navbar.Brand href="/">Hoops</Navbar.Brand>
-  <Navbar.Nav>
-    <Navbar.Link href="/" active>Home</Navbar.Link>
-    <Navbar.Link href="/teams">Teams</Navbar.Link>
-  </Navbar.Nav>
-  <Navbar.Actions>
-    <Button size="sm">Sign in</Button>
-  </Navbar.Actions>
-</Navbar>
+The top header of an app or site. Renders a `<header>` (a `banner`
+landmark when it isn't inside `main`, `article`, `aside`, `nav`, or
+`section`) with brand, navigation, and actions. Below `collapseBelow`
+the navigation moves into a modal drawer opened by a menu button.
+
+```tsx
+<Navbar>
+  <Navbar.Brand href="/">Hoops</Navbar.Brand>
+  <Navbar.Nav>
+    <Navbar.Link href="/" active>Home</Navbar.Link>
+    <Navbar.Link href="/teams">Teams</Navbar.Link>
+  </Navbar.Nav>
+  <Navbar.Actions>
+    <Button size="sm">Sign in</Button>
+  </Navbar.Actions>
+</Navbar>
 ```
 
 ### Props
@@ -5505,12 +5506,12 @@ The logo or product name at the start of the bar, usually a link home.
 
 Also exported as `NavbarNav`.
 
-The primary links: a `<nav>` landmark around a `<ul>`. Above the
-`collapseBelow` breakpoint they sit in the bar; below it they are hidden
-(`display: none`) and the same links render vertically in a drawer that the
-menu button opens. Only one copy is ever exposed to assistive technology.
-
-Other props go on the inline `<nav>` only. The drawer copy gets the same
+The primary links: a `<nav>` landmark around a `<ul>`. Above the
+`collapseBelow` breakpoint they sit in the bar; below it they are hidden
+(`display: none`) and the same links render vertically in a drawer that the
+menu button opens. Only one copy is ever exposed to assistive technology.
+
+Other props go on the inline `<nav>` only. The drawer copy gets the same
 `aria-label` / `aria-labelledby`.
 
 - `children`: `ReactNode`. `Navbar.Link`s (each is wrapped in an `<li>` for you) and/or `Navbar.Item`s.
@@ -5523,9 +5524,9 @@ Other props go on the inline `<nav>` only. The drawer copy gets the same
 
 Also exported as `NavbarItem`.
 
-A list item in `Navbar.Nav`. `Navbar.Link` adds its own `<li>`, so you
-only need this to wrap something else, to put props on the `<li>`, or to
-show an item only in the bar or only in the drawer (`showIn`). A `ref`
+A list item in `Navbar.Nav`. `Navbar.Link` adds its own `<li>`, so you
+only need this to wrap something else, to put props on the `<li>`, or to
+show an item only in the bar or only in the drawer (`showIn`). A `ref`
 attaches to the bar's copy.
 
 - `children`: `ReactNode`. A `Navbar.Link`, or any other control (e.g. a `Button`) that belongs in the list.
@@ -5536,18 +5537,47 @@ attaches to the bar's copy.
 
 Also exported as `NavbarLink`.
 
-A primary navigation link. Wraps itself in an `<li>` unless it's already
-inside `Navbar.Item`. In the mobile drawer, clicking it closes the drawer
-(even if a router prevents the default navigation).
-
-It renders once in the bar and once in the drawer (only one is ever
+A primary navigation link. Wraps itself in an `<li>` unless it's already
+inside `Navbar.Item`. In the mobile drawer, clicking it closes the drawer
+(even if a router prevents the default navigation).
+
+It renders once in the bar and once in the drawer (only one is ever
 exposed), so don't give it an `id`. A `ref` attaches to the bar's copy.
 
 - `as`: `C`. Component or element to render. Defaults to `a`. Pass a router link (e.g. React Router or Next.js `Link`) and its props (such as `to`) are accepted and typed. It must forward `className`, `onClick`, and ARIA props to its `<a>`.
 - `active`: `boolean` (default false). Marks the link as the current page: sets `aria-current="page"` and shows a filled pill with an indicator bar, so the state never relies on color alone.
 - `icon`: `ReactNode`. Decorative icon before the label. Hidden from assistive technology.
+- `badge`: `NavbarBadgeValue`. A count (rendered with `Badge` `count`, capped at 99+, hidden at 0) or a short text such as "New", after the label. It's part of the link's name ("Messages 3"), in the bar and the mobile menu.
+- `badgeLabel`: `string`. Screen-reader text for the badge, e.g. "3 unread messages". Replaces the visible badge text in the accessible name.
+- `badgeTone`: `Tone`. Badge color. By default `accent`, except in the `solid` bar, where the badge takes the bar's own colors swapped (a `Badge` `variant="inverse"`) so it stands out from the bar in both themes. Setting it always gives a solid badge in that tone.
 - `children`: `ReactNode`. The visible label.
 
+### Navbar.Group
+
+Also exported as `NavbarGroup`.
+
+A group of links under one button, following the WAI-ARIA disclosure
+navigation pattern (not a `menu`): the button has `aria-expanded`, and the
+links stay ordinary links in the Tab order.
+
+- In the bar: the button opens a dropdown below it. Escape closes it and
+  returns focus to the button; so do a press outside, Tab moving focus out
+  of the group, and activating a link. Opening one group closes the others.
+- In the mobile menu: an expandable section with the links indented below.
+
+- `label`: `ReactNode` (required). The group button's visible label, and its accessible name.
+- `icon`: `ReactNode`. Decorative icon before the label.
+- `children`: `ReactNode`. The group's `Navbar.Link`s.
+- `active`: `boolean` (default false). One of the group's links is the current page. The button then shows the active look (it doesn't set `aria-current`; the link does), and the group starts open in the mobile menu.
+- `badge`: `NavbarBadgeValue`. A count or short text on the group button, like `Navbar.Link`'s `badge`.
+- `badgeLabel`: `string`. Screen-reader text for the badge.
+- `badgeTone`: `Tone`. Badge color. Same default as `Navbar.Link`'s `badgeTone` (inverse on the solid bar).
+- `open`: `boolean`. Controlled open state of the dropdown in the bar.
+- `defaultOpen`: `boolean` (default false). Initial open state of the dropdown when uncontrolled.
+- `onOpenChange`: `(open: boolean) => void`. Called with the next open state of the dropdown in the bar.
+- `disabled`: `boolean` (default false). Disables the group button.
+- Plus every native `<li>` attribute.
+
 ### Navbar.Actions
 
 Also exported as `NavbarActions`.
@@ -5567,7 +5597,12 @@ The end of the bar: actions that stay visible at every width, before the menu bu
 - Sizes: `sm` 56px, `md` 64px, `lg` 80px tall. Links and the menu button scale with it.
 - With Actions: The actions area holds anything that should stay visible at every width.
 - Active Link: `active` sets `aria-current="page"` and draws an accent-tinted pill with an indicator bar, so the current page is marked by shape as well as color. Links can carry a decorative `icon`.
-- Mobile: On a phone-sized viewport the links collapse into a menu button ("Open menu", with `aria-expanded` and `aria-controls`) that opens them in a drawer. The inline nav is `display: none`, so only one "Main" navigation is ever exposed. Choosing a link closes the drawer.
+- Link Badges: `badge` on `Navbar.Link` (and `Navbar.Group`) shows a count or short text after the label, in the bar and the mobile menu. `badgeLabel` gives screen readers the full meaning ("Messages, 3 unread messages"). On the solid bar, a badge without a `badgeTone` swaps the bar's colors (`Badge` `variant="inverse"`), so it stands out in both themes.
+- Link Groups: `Navbar.Group` puts links under one button (the WAI-ARIA disclosure navigation pattern, not a menu). The button opens a dropdown; Escape, a press outside, Tab moving out, or choosing a link closes it, and opening one group closes the other. `active` marks the group holding the current page.
+- Link group, last on the page: A group as the last focusable thing on the page: Tab past its last link leaves the page, and the dropdown still closes. A press on the panel's padding (nothing focusable) keeps it open.
+- Link Groups Mobile: In the mobile menu, a group is an expandable section; the one holding the current page starts open.
+- Link Groups Right To Left: Right-to-left: the dropdown lines up with the button's right edge.
+- Mobile
 - Mobile Solid: The solid bar on a phone, with the menu sliding in from the start edge.
 - Router Links: Pass a router link component with `as` (on `Navbar.Link` and `Navbar.Brand`); its own props, such as `to`, are typed. Track the current route yourself and set `active` on the matching link.
 - Sticky on a long page: `position="sticky"` (the default) with `elevateOnScroll`: the soft shadow appears once the page scrolls. Scroll the canvas to see it.

package/dist/ai/registry.json

@@ -1,6 +1,6 @@
 {
   "name": "@vjdesigns/vjdesigns-ui",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "summary": "Accessible React 19 component library: WCAG 2.2 AA verified (axe on every story, a contrast check on every color pair), 31 languages with right-to-left support, themeable with any brand color (auto-adjusted to stay accessible), tree-shakable, no runtime dependencies besides React.",
   "install": "npm install @vjdesigns/vjdesigns-ui",
   "stylesheet": "@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css",
@@ -687,6 +687,10 @@
           "name": "In text",
           "description": ""
         },
+        {
+          "name": "Inverse",
+          "description": "`inverse` swaps the solid colors, for a badge on a solid tone surface: a solid Navbar, a Banner, a primary card."
+        },
         {
           "name": "On surfaces (both themes)",
           "description": ""
@@ -15312,7 +15316,7 @@
       "category": "navigation",
       "folder": "Navbar",
       "import": "import { Navbar } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "The top header of an app or site. Renders a `<header>` (a `banner`\r\nlandmark when it isn't inside `main`, `article`, `aside`, `nav`, or\r\n`section`) with brand, navigation, and actions. Below `collapseBelow`\r\nthe navigation moves into a modal drawer opened by a menu button.\r\n\r\n```tsx\r\n<Navbar>\r\n  <Navbar.Brand href=\"/\">Hoops</Navbar.Brand>\r\n  <Navbar.Nav>\r\n    <Navbar.Link href=\"/\" active>Home</Navbar.Link>\r\n    <Navbar.Link href=\"/teams\">Teams</Navbar.Link>\r\n  </Navbar.Nav>\r\n  <Navbar.Actions>\r\n    <Button size=\"sm\">Sign in</Button>\r\n  </Navbar.Actions>\r\n</Navbar>\r\n```",
+      "description": "The top header of an app or site. Renders a `<header>` (a `banner`\nlandmark when it isn't inside `main`, `article`, `aside`, `nav`, or\n`section`) with brand, navigation, and actions. Below `collapseBelow`\nthe navigation moves into a modal drawer opened by a menu button.\n\n```tsx\n<Navbar>\n  <Navbar.Brand href=\"/\">Hoops</Navbar.Brand>\n  <Navbar.Nav>\n    <Navbar.Link href=\"/\" active>Home</Navbar.Link>\n    <Navbar.Link href=\"/teams\">Teams</Navbar.Link>\n  </Navbar.Nav>\n  <Navbar.Actions>\n    <Button size=\"sm\">Sign in</Button>\n  </Navbar.Actions>\n</Navbar>\n```",
       "nativeElement": "header",
       "props": [
         {
@@ -15347,7 +15351,7 @@
           "type": "boolean",
           "required": false,
           "default": "true",
-          "description": "Keeps focused and scrolled-to content clear of a `sticky` or `fixed`\r\nbar (WCAG 2.4.11): while mounted, sets `scroll-padding-top` on the bar's\r\nscroll container to the bar's height, and restores it on unmount. Set\r\n`false` to manage it yourself, e.g. `html { scroll-padding-top:\r\nvar(--header-height) }` (the md bar's height). Inside the bar,\r\n`--navbar-height` holds its height."
+          "description": "Keeps focused and scrolled-to content clear of a `sticky` or `fixed`\nbar (WCAG 2.4.11): while mounted, sets `scroll-padding-top` on the bar's\nscroll container to the bar's height, and restores it on unmount. Set\n`false` to manage it yourself, e.g. `html { scroll-padding-top:\nvar(--header-height) }` (the md bar's height). Inside the bar,\n`--navbar-height` holds its height."
         },
         {
           "name": "bordered",
@@ -15368,14 +15372,14 @@
           "type": "boolean",
           "required": false,
           "default": "false",
-          "description": "Shows the soft shadow only once the window has scrolled (a passive,\r\nframe-throttled listener). A `transparent` bar also fills with the\r\nsurface color so links stay readable over content."
+          "description": "Shows the soft shadow only once the window has scrolled (a passive,\nframe-throttled listener). A `transparent` bar also fills with the\nsurface color so links stay readable over content."
         },
         {
           "name": "contained",
           "type": "boolean",
           "required": false,
           "default": "true",
-          "description": "Centers the content in a max-width `Container` with responsive gutters.\r\nWhen `false`, the content spans the full width (gutters are kept). To\r\ncompose your own layout instead, set `contained={false}`."
+          "description": "Centers the content in a max-width `Container` with responsive gutters.\nWhen `false`, the content spans the full width (gutters are kept). To\ncompose your own layout instead, set `contained={false}`."
         },
         {
           "name": "maxWidth",
@@ -15389,7 +15393,7 @@
           "type": "NavbarCollapseBreakpoint",
           "required": false,
           "default": "\"md\"",
-          "description": "Below this breakpoint (sm 640px, md 768px, lg 1024px), `Navbar.Nav`\r\nis hidden and a menu button opens the links in a drawer instead."
+          "description": "Below this breakpoint (sm 640px, md 768px, lg 1024px), `Navbar.Nav`\nis hidden and a menu button opens the links in a drawer instead."
         },
         {
           "name": "open",
@@ -15436,7 +15440,7 @@
           "type": "NavbarActiveTone",
           "required": false,
           "default": "\"accent\"",
-          "description": "Color of the active link's pill and indicator bar, in the bar and the\r\nmobile menu: `accent` (the theme's accent), `primary` (the brand color), or\r\n`neutral`. The `solid` variant always marks the active link with the\r\non-primary color."
+          "description": "Color of the active link's pill and indicator bar, in the bar and the\nmobile menu: `accent` (the theme's accent), `primary` (the brand color), or\n`neutral`. The `solid` variant always marks the active link with the\non-primary color."
         }
       ],
       "subcomponents": [
@@ -15449,7 +15453,7 @@
               "name": "as",
               "type": "C",
               "required": false,
-              "description": "Component or element to render. Defaults to `a` when `href` is set,\r\notherwise `div`. Pass a router link (e.g. React Router or Next.js `Link`)\r\nand its props (such as `to`) are accepted; it must forward `className`\r\nand ARIA props to its `<a>`."
+              "description": "Component or element to render. Defaults to `a` when `href` is set,\notherwise `div`. Pass a router link (e.g. React Router or Next.js `Link`)\nand its props (such as `to`) are accepted; it must forward `className`\nand ARIA props to its `<a>`."
             },
             {
               "name": "children",
@@ -15462,7 +15466,7 @@
         {
           "name": "Navbar.Nav",
           "exportedAs": "NavbarNav",
-          "description": "The primary links: a `<nav>` landmark around a `<ul>`. Above the\r\n`collapseBelow` breakpoint they sit in the bar; below it they are hidden\r\n(`display: none`) and the same links render vertically in a drawer that the\r\nmenu button opens. Only one copy is ever exposed to assistive technology.\r\n\r\nOther props go on the inline `<nav>` only. The drawer copy gets the same\r\n`aria-label` / `aria-labelledby`.",
+          "description": "The primary links: a `<nav>` landmark around a `<ul>`. Above the\n`collapseBelow` breakpoint they sit in the bar; below it they are hidden\n(`display: none`) and the same links render vertically in a drawer that the\nmenu button opens. Only one copy is ever exposed to assistive technology.\n\nOther props go on the inline `<nav>` only. The drawer copy gets the same\n`aria-label` / `aria-labelledby`.",
           "nativeElement": "nav",
           "props": [
             {
@@ -15476,14 +15480,14 @@
               "type": "NavbarNavAlign",
               "required": false,
               "default": "\"start\"",
-              "description": "Where the links sit in the bar, between the brand and the actions:\r\n`start` (next to the brand; left in left-to-right layouts), `center`,\r\nor `end` (next to the actions; right in left-to-right layouts). Logical,\r\nso it flips in right-to-left layouts. The mobile drawer always lists\r\nthem vertically."
+              "description": "Where the links sit in the bar, between the brand and the actions:\n`start` (next to the brand; left in left-to-right layouts), `center`,\nor `end` (next to the actions; right in left-to-right layouts). Logical,\nso it flips in right-to-left layouts. The mobile drawer always lists\nthem vertically."
             },
             {
               "name": "gap",
               "type": "Responsive<Space>",
               "required": false,
               "default": "1",
-              "description": "Space between the links in the bar, as a spacing step (`4` is\r\n`--space-4`, 16px). Accepts one value or one per breakpoint, e.g.\r\n`{ base: 2, xl: 6 }`. The mobile drawer keeps its own vertical spacing."
+              "description": "Space between the links in the bar, as a spacing step (`4` is\n`--space-4`, 16px). Accepts one value or one per breakpoint, e.g.\n`{ base: 2, xl: 6 }`. The mobile drawer keeps its own vertical spacing."
             },
             {
               "name": "aria-label",
@@ -15497,7 +15501,7 @@
         {
           "name": "Navbar.Item",
           "exportedAs": "NavbarItem",
-          "description": "A list item in `Navbar.Nav`. `Navbar.Link` adds its own `<li>`, so you\r\nonly need this to wrap something else, to put props on the `<li>`, or to\r\nshow an item only in the bar or only in the drawer (`showIn`). A `ref`\r\nattaches to the bar's copy.",
+          "description": "A list item in `Navbar.Nav`. `Navbar.Link` adds its own `<li>`, so you\nonly need this to wrap something else, to put props on the `<li>`, or to\nshow an item only in the bar or only in the drawer (`showIn`). A `ref`\nattaches to the bar's copy.",
           "nativeElement": "li",
           "props": [
             {
@@ -15511,27 +15515,27 @@
               "type": "NavbarItemShowIn",
               "required": false,
               "default": "\"both\"",
-              "description": "Where the item appears. `Navbar.Nav` renders its children twice (in the\r\nbar and in the drawer), so a stateful child (a Menu, a toggle) is\r\nmounted twice and its drawer copy resets each time the drawer opens.\r\nShow such an item in one place only, or put it in `Navbar.Actions`."
+              "description": "Where the item appears. `Navbar.Nav` renders its children twice (in the\nbar and in the drawer), so a stateful child (a Menu, a toggle) is\nmounted twice and its drawer copy resets each time the drawer opens.\nShow such an item in one place only, or put it in `Navbar.Actions`."
             }
           ]
         },
         {
           "name": "Navbar.Link",
           "exportedAs": "NavbarLink",
-          "description": "A primary navigation link. Wraps itself in an `<li>` unless it's already\r\ninside `Navbar.Item`. In the mobile drawer, clicking it closes the drawer\r\n(even if a router prevents the default navigation).\r\n\r\nIt renders once in the bar and once in the drawer (only one is ever\r\nexposed), so don't give it an `id`. A `ref` attaches to the bar's copy.",
+          "description": "A primary navigation link. Wraps itself in an `<li>` unless it's already\ninside `Navbar.Item`. In the mobile drawer, clicking it closes the drawer\n(even if a router prevents the default navigation).\n\nIt renders once in the bar and once in the drawer (only one is ever\nexposed), so don't give it an `id`. A `ref` attaches to the bar's copy.",
           "props": [
             {
               "name": "as",
               "type": "C",
               "required": false,
-              "description": "Component or element to render. Defaults to `a`. Pass a router link\r\n(e.g. React Router or Next.js `Link`) and its props (such as `to`) are\r\naccepted and typed. It must forward `className`, `onClick`, and ARIA\r\nprops to its `<a>`."
+              "description": "Component or element to render. Defaults to `a`. Pass a router link\n(e.g. React Router or Next.js `Link`) and its props (such as `to`) are\naccepted and typed. It must forward `className`, `onClick`, and ARIA\nprops to its `<a>`."
             },
             {
               "name": "active",
               "type": "boolean",
               "required": false,
               "default": "false",
-              "description": "Marks the link as the current page: sets `aria-current=\"page\"` and shows\r\na filled pill with an indicator bar, so the state never relies on color\r\nalone."
+              "description": "Marks the link as the current page: sets `aria-current=\"page\"` and shows\na filled pill with an indicator bar, so the state never relies on color\nalone."
             },
             {
               "name": "icon",
@@ -15539,6 +15543,24 @@
               "required": false,
               "description": "Decorative icon before the label. Hidden from assistive technology."
             },
+            {
+              "name": "badge",
+              "type": "NavbarBadgeValue",
+              "required": false,
+              "description": "A count (rendered with `Badge` `count`, capped at 99+, hidden at 0) or a\nshort text such as \"New\", after the label. It's part of the link's name\n(\"Messages 3\"), in the bar and the mobile menu."
+            },
+            {
+              "name": "badgeLabel",
+              "type": "string",
+              "required": false,
+              "description": "Screen-reader text for the badge, e.g. \"3 unread messages\". Replaces the visible badge text in the accessible name."
+            },
+            {
+              "name": "badgeTone",
+              "type": "Tone",
+              "required": false,
+              "description": "Badge color. By default `accent`, except in the `solid` bar, where the\nbadge takes the bar's own colors swapped (a `Badge` `variant=\"inverse\"`)\nso it stands out from the bar in both themes. Setting it always gives a\nsolid badge in that tone."
+            },
             {
               "name": "children",
               "type": "ReactNode",
@@ -15547,6 +15569,83 @@
             }
           ]
         },
+        {
+          "name": "Navbar.Group",
+          "exportedAs": "NavbarGroup",
+          "description": "A group of links under one button, following the WAI-ARIA disclosure\nnavigation pattern (not a `menu`): the button has `aria-expanded`, and the\nlinks stay ordinary links in the Tab order.\n\n- In the bar: the button opens a dropdown below it. Escape closes it and\n  returns focus to the button; so do a press outside, Tab moving focus out\n  of the group, and activating a link. Opening one group closes the others.\n- In the mobile menu: an expandable section with the links indented below.",
+          "nativeElement": "li",
+          "props": [
+            {
+              "name": "label",
+              "type": "ReactNode",
+              "required": true,
+              "description": "The group button's visible label, and its accessible name."
+            },
+            {
+              "name": "icon",
+              "type": "ReactNode",
+              "required": false,
+              "description": "Decorative icon before the label."
+            },
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "required": false,
+              "description": "The group's `Navbar.Link`s."
+            },
+            {
+              "name": "active",
+              "type": "boolean",
+              "required": false,
+              "default": "false",
+              "description": "One of the group's links is the current page. The button then shows the\nactive look (it doesn't set `aria-current`; the link does), and the\ngroup starts open in the mobile menu."
+            },
+            {
+              "name": "badge",
+              "type": "NavbarBadgeValue",
+              "required": false,
+              "description": "A count or short text on the group button, like `Navbar.Link`'s `badge`."
+            },
+            {
+              "name": "badgeLabel",
+              "type": "string",
+              "required": false,
+              "description": "Screen-reader text for the badge."
+            },
+            {
+              "name": "badgeTone",
+              "type": "Tone",
+              "required": false,
+              "description": "Badge color. Same default as `Navbar.Link`'s `badgeTone` (inverse on the solid bar)."
+            },
+            {
+              "name": "open",
+              "type": "boolean",
+              "required": false,
+              "description": "Controlled open state of the dropdown in the bar."
+            },
+            {
+              "name": "defaultOpen",
+              "type": "boolean",
+              "required": false,
+              "default": "false",
+              "description": "Initial open state of the dropdown when uncontrolled."
+            },
+            {
+              "name": "onOpenChange",
+              "type": "(open: boolean) => void",
+              "required": false,
+              "description": "Called with the next open state of the dropdown in the bar."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "required": false,
+              "default": "false",
+              "description": "Disables the group button."
+            }
+          ]
+        },
         {
           "name": "Navbar.Actions",
           "exportedAs": "NavbarActions",
@@ -15596,9 +15695,29 @@
           "name": "Active Link",
           "description": "`active` sets `aria-current=\"page\"` and draws an accent-tinted pill with an\r\nindicator bar, so the current page is marked by shape as well as color.\r\nLinks can carry a decorative `icon`."
         },
+        {
+          "name": "Link Badges",
+          "description": "`badge` on `Navbar.Link` (and `Navbar.Group`) shows a count or short text\r\nafter the label, in the bar and the mobile menu. `badgeLabel` gives screen\r\nreaders the full meaning (\"Messages, 3 unread messages\"). On the solid bar,\r\na badge without a `badgeTone` swaps the bar's colors (`Badge`\r\n`variant=\"inverse\"`), so it stands out in both themes."
+        },
+        {
+          "name": "Link Groups",
+          "description": "`Navbar.Group` puts links under one button (the WAI-ARIA disclosure\r\nnavigation pattern, not a menu). The button opens a dropdown; Escape, a\r\npress outside, Tab moving out, or choosing a link closes it, and opening\r\none group closes the other. `active` marks the group holding the current page."
+        },
+        {
+          "name": "Link group, last on the page",
+          "description": "A group as the last focusable thing on the page: Tab past its last link\r\nleaves the page, and the dropdown still closes. A press on the panel's\r\npadding (nothing focusable) keeps it open."
+        },
+        {
+          "name": "Link Groups Mobile",
+          "description": "In the mobile menu, a group is an expandable section; the one holding the current page starts open."
+        },
+        {
+          "name": "Link Groups Right To Left",
+          "description": "Right-to-left: the dropdown lines up with the button's right edge."
+        },
         {
           "name": "Mobile",
-          "description": "On a phone-sized viewport the links collapse into a menu button\r\n(\"Open menu\", with `aria-expanded` and `aria-controls`) that opens them\r\nin a drawer. The inline nav is `display: none`, so only one \"Main\"\r\nnavigation is ever exposed. Choosing a link closes the drawer."
+          "description": ""
         },
         {
           "name": "Mobile Solid",

package/dist/components/data-display/Badge/Badge.cjs.js

@@ -1 +1 @@
-const e=require("../../../utils/cx.cjs.js"),t=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),n=require("./Badge.module.css.cjs.js");let r=require("react"),i=require("react/jsx-runtime");var a=globalThis.process?.env?.NODE_ENV!==`production`,o={solid:n.default.solid,soft:n.default.soft,outline:n.default.outline},s={neutral:n.default.neutral,primary:n.default.primary,accent:n.default.accent,success:n.default.success,warning:n.default.warning,danger:n.default.danger,info:n.default.info},c={sm:n.default.sm,md:n.default.md,lg:n.default.lg},l={none:n.default.radiusNone,xs:n.default.radiusXs,sm:n.default.radiusSm,md:n.default.radiusMd,lg:n.default.radiusLg,xl:n.default.radiusXl,"2xl":n.default.radius2xl,pill:n.default.radiusPill},u={"top-end":n.default.topEnd,"top-start":n.default.topStart,"bottom-end":n.default.bottomEnd,"bottom-start":n.default.bottomStart},d={rectangle:n.default.overlapRectangle,circle:n.default.overlapCircle};function f(e,t=99){return e>t?`${t}+`:String(e)}var p=e=>typeof e==`number`?`${e}px`:e,m=({variant:r=`soft`,tone:a=`neutral`,size:u=`md`,radius:d=`pill`,count:p,max:m=99,showZero:h=!1,label:g,startIcon:_,dot:v=!1,caps:y=!1,className:b,children:x,...S})=>{let C=p!==void 0;if(C&&p===0&&!h)return null;let w=C?f(p,m):x,T=g!==void 0&&g!==``;return(0,i.jsxs)(`span`,{...S,className:e.cx(n.default.root,o[r],s[a],c[u],l[d],C&&n.default.count,y&&n.default.caps,b),children:[(0,i.jsxs)(`span`,{className:n.default.content,"aria-hidden":T?!0:void 0,children:[v&&(0,i.jsx)(`span`,{className:n.default.dot,"aria-hidden":`true`}),_!=null&&(0,i.jsx)(`span`,{className:n.default.icon,"aria-hidden":`true`,children:_}),w!=null&&w!==``&&(0,i.jsx)(`span`,{className:n.default.label,children:w})]}),T&&(0,i.jsx)(t.VisuallyHidden,{children:g})]})},h=({children:l,variant:m=`solid`,tone:h=`accent`,size:g=`md`,count:_,max:v=99,showZero:y=!1,label:b,dot:x=!1,content:S,placement:C=`top-end`,overlap:w=`rectangle`,offset:T,invisible:E=!1,badgeClassName:D,className:O,style:k,...A})=>{let j=!x&&_!==void 0,M=E||j&&_===0&&!y,N=x?null:j?f(_,v):S,P=b!==void 0&&b!==``&&!M,F=!M&&(x||N!=null)&&(b===void 0||b===``);(0,r.useEffect)(()=>{a&&F&&console.warn('[BadgeAnchor] Pass a `label` (e.g. "3 unread messages") so screen readers get the badge\'s meaning; the visual dot or count is hidden from them.')},[F]);let[I,L]=T===void 0?[void 0,void 0]:Array.isArray(T)?T:[T,T],R=T===void 0?k:{"--badge-offset-x":p(I),"--badge-offset-y":p(L),...k};return(0,i.jsxs)(`span`,{...A,className:e.cx(n.default.anchor,O),style:R,children:[l,(0,i.jsxs)(`span`,{className:e.cx(n.default.root,n.default.anchored,o[m],s[h],c[g],n.default.radiusPill,u[C],d[w],x?n.default.anchoredDot:n.default.count,M&&n.default.invisible,D),"data-state":M?`hidden`:`visible`,children:[!x&&(0,i.jsx)(`span`,{className:n.default.content,"aria-hidden":`true`,children:N!=null&&N!==``&&(0,i.jsx)(`span`,{className:n.default.label,children:N})}),P&&(0,i.jsx)(t.VisuallyHidden,{children:b})]})]})};exports.Badge=m,exports.BadgeAnchor=h,exports.formatBadgeCount=f;
+const e=require("../../../utils/cx.cjs.js"),t=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),n=require("./Badge.module.css.cjs.js");let r=require("react"),i=require("react/jsx-runtime");var a=globalThis.process?.env?.NODE_ENV!==`production`,o={solid:n.default.solid,soft:n.default.soft,outline:n.default.outline,inverse:n.default.inverse},s={neutral:n.default.neutral,primary:n.default.primary,accent:n.default.accent,success:n.default.success,warning:n.default.warning,danger:n.default.danger,info:n.default.info},c={sm:n.default.sm,md:n.default.md,lg:n.default.lg},l={none:n.default.radiusNone,xs:n.default.radiusXs,sm:n.default.radiusSm,md:n.default.radiusMd,lg:n.default.radiusLg,xl:n.default.radiusXl,"2xl":n.default.radius2xl,pill:n.default.radiusPill},u={"top-end":n.default.topEnd,"top-start":n.default.topStart,"bottom-end":n.default.bottomEnd,"bottom-start":n.default.bottomStart},d={rectangle:n.default.overlapRectangle,circle:n.default.overlapCircle};function f(e,t=99){return e>t?`${t}+`:String(e)}var p=e=>typeof e==`number`?`${e}px`:e,m=({variant:r=`soft`,tone:a=`neutral`,size:u=`md`,radius:d=`pill`,count:p,max:m=99,showZero:h=!1,label:g,startIcon:_,dot:v=!1,caps:y=!1,className:b,children:x,...S})=>{let C=p!==void 0;if(C&&p===0&&!h)return null;let w=C?f(p,m):x,T=g!==void 0&&g!==``;return(0,i.jsxs)(`span`,{...S,className:e.cx(n.default.root,o[r],s[a],c[u],l[d],C&&n.default.count,y&&n.default.caps,b),children:[(0,i.jsxs)(`span`,{className:n.default.content,"aria-hidden":T?!0:void 0,children:[v&&(0,i.jsx)(`span`,{className:n.default.dot,"aria-hidden":`true`}),_!=null&&(0,i.jsx)(`span`,{className:n.default.icon,"aria-hidden":`true`,children:_}),w!=null&&w!==``&&(0,i.jsx)(`span`,{className:n.default.label,children:w})]}),T&&(0,i.jsx)(t.VisuallyHidden,{children:g})]})},h=({children:l,variant:m=`solid`,tone:h=`accent`,size:g=`md`,count:_,max:v=99,showZero:y=!1,label:b,dot:x=!1,content:S,placement:C=`top-end`,overlap:w=`rectangle`,offset:T,invisible:E=!1,badgeClassName:D,className:O,style:k,...A})=>{let j=!x&&_!==void 0,M=E||j&&_===0&&!y,N=x?null:j?f(_,v):S,P=b!==void 0&&b!==``&&!M,F=!M&&(x||N!=null)&&(b===void 0||b===``);(0,r.useEffect)(()=>{a&&F&&console.warn('[BadgeAnchor] Pass a `label` (e.g. "3 unread messages") so screen readers get the badge\'s meaning; the visual dot or count is hidden from them.')},[F]);let[I,L]=T===void 0?[void 0,void 0]:Array.isArray(T)?T:[T,T],R=T===void 0?k:{"--badge-offset-x":p(I),"--badge-offset-y":p(L),...k};return(0,i.jsxs)(`span`,{...A,className:e.cx(n.default.anchor,O),style:R,children:[l,(0,i.jsxs)(`span`,{className:e.cx(n.default.root,n.default.anchored,o[m],s[h],c[g],n.default.radiusPill,u[C],d[w],x?n.default.anchoredDot:n.default.count,M&&n.default.invisible,D),"data-state":M?`hidden`:`visible`,children:[!x&&(0,i.jsx)(`span`,{className:n.default.content,"aria-hidden":`true`,children:N!=null&&N!==``&&(0,i.jsx)(`span`,{className:n.default.label,children:N})}),P&&(0,i.jsx)(t.VisuallyHidden,{children:b})]})]})};exports.Badge=m,exports.BadgeAnchor=h,exports.formatBadgeCount=f;

package/dist/components/data-display/Badge/Badge.d.ts

@@ -1,7 +1,12 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
 import { Radius, Size, Tone } from '../../../types/common';
-/** Visual style of a badge. Semantic color is set separately with `tone`. */
-export type BadgeVariant = "solid" | "soft" | "outline";
+/**
+ * Visual style of a badge. Semantic color is set separately with `tone`.
+ * `inverse` swaps the solid colors (a `--color-on-{tone}` fill with
+ * `--color-{tone}` text), for badges on a solid `tone` surface, such as a
+ * solid Navbar or a Banner strip.
+ */
+export type BadgeVariant = "solid" | "soft" | "outline" | "inverse";
 /** Corner of the anchor a `BadgeAnchor` badge sits on. Logical: `end` flips in RTL. */
 export type BadgePlacement = "top-end" | "top-start" | "bottom-end" | "bottom-start";
 /**

package/dist/components/data-display/Badge/Badge.mjs

@@ -7,7 +7,8 @@ import { jsx as i, jsxs as a } from "react/jsx-runtime";
 var o = globalThis.process?.env?.NODE_ENV !== "production", s = {
 	solid: n.solid,
 	soft: n.soft,
-	outline: n.outline
+	outline: n.outline,
+	inverse: n.inverse
 }, c = {
 	neutral: n.neutral,
 	primary: n.primary,

package/dist/components/data-display/Badge/Badge.module.css.cjs.js

@@ -1 +1 @@
-var e=`_root_fn6ui_21`,t=`_content_fn6ui_93`,n=`_label_fn6ui_105`,r=`_icon_fn6ui_113`,i=`_dot_fn6ui_139`,a=`_solid_fn6ui_161`,o=`_soft_fn6ui_171`,s=`_outline_fn6ui_181`,c=`_neutral_fn6ui_197`,l=`_primary_fn6ui_213`,u=`_accent_fn6ui_229`,d=`_success_fn6ui_245`,f=`_warning_fn6ui_261`,p=`_danger_fn6ui_277`,m=`_info_fn6ui_293`,h=`_sm_fn6ui_313`,g=`_md_fn6ui_331`,_=`_lg_fn6ui_349`,v=`_radiusNone_fn6ui_371`,y=`_radiusXs_fn6ui_377`,b=`_radiusSm_fn6ui_383`,x=`_radiusMd_fn6ui_389`,S=`_radiusLg_fn6ui_395`,C=`_radiusXl_fn6ui_401`,w=`_radius2xl_fn6ui_407`,T=`_radiusPill_fn6ui_413`,E=`_count_fn6ui_427`,D=`_caps_fn6ui_441`,O=`_anchor_fn6ui_461`,k=`_anchored_fn6ui_475`,A=`_anchoredDot_fn6ui_557`,j=`_overlapRectangle_fn6ui_623`,M=`_overlapCircle_fn6ui_629`,N=`_topEnd_fn6ui_637`,P=`_topStart_fn6ui_649`,F=`_bottomEnd_fn6ui_661`,I=`_bottomStart_fn6ui_673`,L=`_invisible_fn6ui_709`,R={root:e,content:t,label:n,icon:r,dot:i,solid:a,soft:o,outline:s,neutral:c,primary:l,accent:u,success:d,warning:f,danger:p,info:m,sm:h,md:g,lg:_,radiusNone:v,radiusXs:y,radiusSm:b,radiusMd:x,radiusLg:S,radiusXl:C,radius2xl:w,radiusPill:T,count:E,caps:D,anchor:O,anchored:k,anchoredDot:A,overlapRectangle:j,overlapCircle:M,topEnd:N,topStart:P,bottomEnd:F,bottomStart:I,invisible:L};exports.accent=u,exports.anchor=O,exports.anchored=k,exports.anchoredDot=A,exports.bottomEnd=F,exports.bottomStart=I,exports.caps=D,exports.content=t,exports.count=E,exports.danger=p,exports.default=R,exports.dot=i,exports.icon=r,exports.info=m,exports.invisible=L,exports.label=n,exports.lg=_,exports.md=g,exports.neutral=c,exports.outline=s,exports.overlapCircle=M,exports.overlapRectangle=j,exports.primary=l,exports.radius2xl=w,exports.radiusLg=S,exports.radiusMd=x,exports.radiusNone=v,exports.radiusPill=T,exports.radiusSm=b,exports.radiusXl=C,exports.radiusXs=y,exports.root=e,exports.sm=h,exports.soft=o,exports.solid=a,exports.success=d,exports.topEnd=N,exports.topStart=P,exports.warning=f;
+var e=`_root_54g55_23`,t=`_content_54g55_95`,n=`_label_54g55_107`,r=`_icon_54g55_115`,i=`_dot_54g55_141`,a=`_solid_54g55_163`,o=`_soft_54g55_173`,s=`_outline_54g55_183`,c=`_inverse_54g55_199`,l=`_neutral_54g55_213`,u=`_primary_54g55_229`,d=`_accent_54g55_245`,f=`_success_54g55_261`,p=`_warning_54g55_277`,m=`_danger_54g55_293`,h=`_info_54g55_309`,g=`_sm_54g55_329`,_=`_md_54g55_347`,v=`_lg_54g55_365`,y=`_radiusNone_54g55_387`,b=`_radiusXs_54g55_393`,x=`_radiusSm_54g55_399`,S=`_radiusMd_54g55_405`,C=`_radiusLg_54g55_411`,w=`_radiusXl_54g55_417`,T=`_radius2xl_54g55_423`,E=`_radiusPill_54g55_429`,D=`_count_54g55_443`,O=`_caps_54g55_457`,k=`_anchor_54g55_477`,A=`_anchored_54g55_491`,j=`_anchoredDot_54g55_573`,M=`_overlapRectangle_54g55_647`,N=`_overlapCircle_54g55_653`,P=`_topEnd_54g55_661`,F=`_topStart_54g55_673`,I=`_bottomEnd_54g55_685`,L=`_bottomStart_54g55_697`,R=`_invisible_54g55_733`,z={root:e,content:t,label:n,icon:r,dot:i,solid:a,soft:o,outline:s,inverse:c,neutral:l,primary:u,accent:d,success:f,warning:p,danger:m,info:h,sm:g,md:_,lg:v,radiusNone:y,radiusXs:b,radiusSm:x,radiusMd:S,radiusLg:C,radiusXl:w,radius2xl:T,radiusPill:E,count:D,caps:O,anchor:k,anchored:A,anchoredDot:j,overlapRectangle:M,overlapCircle:N,topEnd:P,topStart:F,bottomEnd:I,bottomStart:L,invisible:R};exports.accent=d,exports.anchor=k,exports.anchored=A,exports.anchoredDot=j,exports.bottomEnd=I,exports.bottomStart=L,exports.caps=O,exports.content=t,exports.count=D,exports.danger=m,exports.default=z,exports.dot=i,exports.icon=r,exports.info=h,exports.inverse=c,exports.invisible=R,exports.label=n,exports.lg=v,exports.md=_,exports.neutral=l,exports.outline=s,exports.overlapCircle=N,exports.overlapRectangle=M,exports.primary=u,exports.radius2xl=T,exports.radiusLg=C,exports.radiusMd=S,exports.radiusNone=y,exports.radiusPill=E,exports.radiusSm=x,exports.radiusXl=w,exports.radiusXs=b,exports.root=e,exports.sm=g,exports.soft=o,exports.solid=a,exports.success=f,exports.topEnd=P,exports.topStart=F,exports.warning=p;

package/dist/components/data-display/Badge/Badge.module.css.mjs

@@ -1,5 +1,5 @@
 //#region src/components/data-display/Badge/Badge.module.css
-var e = "_root_fn6ui_21", t = "_content_fn6ui_93", n = "_label_fn6ui_105", r = "_icon_fn6ui_113", i = "_dot_fn6ui_139", a = "_solid_fn6ui_161", o = "_soft_fn6ui_171", s = "_outline_fn6ui_181", c = "_neutral_fn6ui_197", l = "_primary_fn6ui_213", u = "_accent_fn6ui_229", d = "_success_fn6ui_245", f = "_warning_fn6ui_261", p = "_danger_fn6ui_277", m = "_info_fn6ui_293", h = "_sm_fn6ui_313", g = "_md_fn6ui_331", _ = "_lg_fn6ui_349", v = "_radiusNone_fn6ui_371", y = "_radiusXs_fn6ui_377", b = "_radiusSm_fn6ui_383", x = "_radiusMd_fn6ui_389", S = "_radiusLg_fn6ui_395", C = "_radiusXl_fn6ui_401", w = "_radius2xl_fn6ui_407", T = "_radiusPill_fn6ui_413", E = "_count_fn6ui_427", D = "_caps_fn6ui_441", O = "_anchor_fn6ui_461", k = "_anchored_fn6ui_475", A = "_anchoredDot_fn6ui_557", j = "_overlapRectangle_fn6ui_623", M = "_overlapCircle_fn6ui_629", N = "_topEnd_fn6ui_637", P = "_topStart_fn6ui_649", F = "_bottomEnd_fn6ui_661", I = "_bottomStart_fn6ui_673", L = "_invisible_fn6ui_709", R = {
+var e = "_root_54g55_23", t = "_content_54g55_95", n = "_label_54g55_107", r = "_icon_54g55_115", i = "_dot_54g55_141", a = "_solid_54g55_163", o = "_soft_54g55_173", s = "_outline_54g55_183", c = "_inverse_54g55_199", l = "_neutral_54g55_213", u = "_primary_54g55_229", d = "_accent_54g55_245", f = "_success_54g55_261", p = "_warning_54g55_277", m = "_danger_54g55_293", h = "_info_54g55_309", g = "_sm_54g55_329", _ = "_md_54g55_347", v = "_lg_54g55_365", y = "_radiusNone_54g55_387", b = "_radiusXs_54g55_393", x = "_radiusSm_54g55_399", S = "_radiusMd_54g55_405", C = "_radiusLg_54g55_411", w = "_radiusXl_54g55_417", T = "_radius2xl_54g55_423", E = "_radiusPill_54g55_429", D = "_count_54g55_443", O = "_caps_54g55_457", k = "_anchor_54g55_477", A = "_anchored_54g55_491", j = "_anchoredDot_54g55_573", M = "_overlapRectangle_54g55_647", N = "_overlapCircle_54g55_653", P = "_topEnd_54g55_661", F = "_topStart_54g55_673", I = "_bottomEnd_54g55_685", L = "_bottomStart_54g55_697", R = "_invisible_54g55_733", z = {
 	root: e,
 	content: t,
 	label: n,
@@ -8,36 +8,37 @@ var e = "_root_fn6ui_21", t = "_content_fn6ui_93", n = "_label_fn6ui_105", r = "
 	solid: a,
 	soft: o,
 	outline: s,
-	neutral: c,
-	primary: l,
-	accent: u,
-	success: d,
-	warning: f,
-	danger: p,
-	info: m,
-	sm: h,
-	md: g,
-	lg: _,
-	radiusNone: v,
-	radiusXs: y,
-	radiusSm: b,
-	radiusMd: x,
-	radiusLg: S,
-	radiusXl: C,
-	radius2xl: w,
-	radiusPill: T,
-	count: E,
-	caps: D,
-	anchor: O,
-	anchored: k,
-	anchoredDot: A,
-	overlapRectangle: j,
-	overlapCircle: M,
-	topEnd: N,
-	topStart: P,
-	bottomEnd: F,
-	bottomStart: I,
-	invisible: L
+	inverse: c,
+	neutral: l,
+	primary: u,
+	accent: d,
+	success: f,
+	warning: p,
+	danger: m,
+	info: h,
+	sm: g,
+	md: _,
+	lg: v,
+	radiusNone: y,
+	radiusXs: b,
+	radiusSm: x,
+	radiusMd: S,
+	radiusLg: C,
+	radiusXl: w,
+	radius2xl: T,
+	radiusPill: E,
+	count: D,
+	caps: O,
+	anchor: k,
+	anchored: A,
+	anchoredDot: j,
+	overlapRectangle: M,
+	overlapCircle: N,
+	topEnd: P,
+	topStart: F,
+	bottomEnd: I,
+	bottomStart: L,
+	invisible: R
 };
 //#endregion
-export { u as accent, O as anchor, k as anchored, A as anchoredDot, F as bottomEnd, I as bottomStart, D as caps, t as content, E as count, p as danger, R as default, i as dot, r as icon, m as info, L as invisible, n as label, _ as lg, g as md, c as neutral, s as outline, M as overlapCircle, j as overlapRectangle, l as primary, w as radius2xl, S as radiusLg, x as radiusMd, v as radiusNone, T as radiusPill, b as radiusSm, C as radiusXl, y as radiusXs, e as root, h as sm, o as soft, a as solid, d as success, N as topEnd, P as topStart, f as warning };
+export { d as accent, k as anchor, A as anchored, j as anchoredDot, I as bottomEnd, L as bottomStart, O as caps, t as content, D as count, m as danger, z as default, i as dot, r as icon, h as info, c as inverse, R as invisible, n as label, v as lg, _ as md, l as neutral, s as outline, N as overlapCircle, M as overlapRectangle, u as primary, T as radius2xl, C as radiusLg, S as radiusMd, y as radiusNone, E as radiusPill, x as radiusSm, w as radiusXl, b as radiusXs, e as root, g as sm, o as soft, a as solid, f as success, P as topEnd, F as topStart, p as warning };