@nanisoft/prism-ui 1.2.0 → 1.3.0

package/dist/blocks/site-footer/site-footer.d.ts

@@ -66,12 +66,26 @@ export type SiteFooterSocial = {
  */
 export type SiteFooterProps = {
     /**
-     * The product this footer belongs to: the id, name and pack its `ProductMark`
-     * is drawn from. The footer renders the mark rather than taking a slot,
-     * because the brand lockup is the one part of a footer that is never
-     * product-specific and every consumer would otherwise reimplement it.
+     * The product this footer belongs to: the id, name, pack and drawn mark its
+     * `ProductMark` is drawn from. The footer renders the mark rather than taking
+     * a slot, because the brand lockup is the one part of a footer that is never
+     * product-specific and every consumer would otherwise reimplement it; a
+     * product whose identity is a drawing carries it here as data, beside the
+     * name, exactly as the bar's lockup does.
      */
-    product: Pick<ProductMarkProps, 'id' | 'name' | 'pack'>;
+    product: Pick<ProductMarkProps, 'id' | 'name' | 'pack' | 'mark'>;
+    /**
+     * A slot for the sentence or two a footer carries under its mark: what this
+     * site is, who publishes it, what it is built with.
+     *
+     * A slot rather than a string, because the same position holds one paragraph
+     * on one site and two labelled ones on another, and any headings are the
+     * caller's document outline rather than this Block's to level. It renders
+     * under the mark at the measure, with no colour of its own: muted text is the
+     * caller's decision about its own copy, and a Block that coloured a node it
+     * did not render would be styling it could not see.
+     */
+    about?: ReactNode;
     /**
      * The groups of destinations: the sections of this site, its documentation, and
      * anywhere else the site sends a reader. Omit it for a footer that carries only
@@ -109,8 +123,9 @@ export type SiteFooterProps = {
     className?: string;
 };
 /**
- * The footer of a product site: a brand lockup, grouped destinations, the links
- * that leave the site, and an optional slot for the legal line.
+ * The footer of a product site: a brand lockup, an optional word from the site
+ * under it, grouped destinations, the links that leave the site, and an optional
+ * slot for the legal line.
  *
  * It is a Block and not a Component because it is a region of a page: it
  * composes a `ProductMark` and two sets of links and owns the block they sit in.
@@ -163,6 +178,6 @@ export type SiteFooterProps = {
  * imports no router: a consumer renders it from a server file and the links are
  * plain anchors the consumer's own router can intercept.
  */
-export declare function SiteFooter({ product, columns, social, legal, headingLevel, className, }: SiteFooterProps): import("react").JSX.Element;
+export declare function SiteFooter({ product, about, columns, social, legal, headingLevel, className, }: SiteFooterProps): import("react").JSX.Element;
 export default SiteFooter;
 //# sourceMappingURL=site-footer.d.ts.map

package/dist/blocks/site-footer/site-footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"site-footer.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-footer/site-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AACrF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAG/D;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;CACjC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;OAKG;IACH,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA;IACvD;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACrC;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACpC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,OAAO,EACP,MAAM,EACN,KAAK,EACL,YAAmB,EACnB,SAAS,GACV,EAAE,eAAe,+BA+DjB;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"site-footer.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-footer/site-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AACrF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAG/D;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;CACjC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;;;OAOG;IACH,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA;IAChE;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACrC;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACpC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,KAAK,EACL,OAAO,EACP,MAAM,EACN,KAAK,EACL,YAAmB,EACnB,SAAS,GACV,EAAE,eAAe,+BA+EjB;AAED,eAAe,UAAU,CAAA"}

package/dist/blocks/site-footer/site-footer.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ProductMark } from '../../components/ui/product-mark.js';
 import { cn } from '../../lib/utils.js';
 /**
- * The footer of a product site: a brand lockup, grouped destinations, the links
- * that leave the site, and an optional slot for the legal line.
+ * The footer of a product site: a brand lockup, an optional word from the site
+ * under it, grouped destinations, the links that leave the site, and an optional
+ * slot for the legal line.
  *
  * It is a Block and not a Component because it is a region of a page: it
  * composes a `ProductMark` and two sets of links and owns the block they sit in.
@@ -56,8 +57,13 @@ import { cn } from '../../lib/utils.js';
  * imports no router: a consumer renders it from a server file and the links are
  * plain anchors the consumer's own router can intercept.
  */
-export function SiteFooter({ product, columns, social, legal, headingLevel = 'h2', className, }) {
+export function SiteFooter({ product, about, columns, social, legal, headingLevel = 'h2', className, }) {
+    /*
+     * The lockup is the same `ProductMark` the bar draws, so a product's drawn
+     * mark, when it has one, is the one drawing in both places and a reader who
+     * scrolled from the bar meets the same sign at the foot.
+     */
     const ColumnTitle = headingLevel;
-    return (_jsx("footer", { "data-slot": "site-footer", className: cn('border-border bg-background w-full border-t', className), children: _jsxs("div", { className: "mx-auto flex w-full max-w-page flex-col gap-10 px-6 py-12 lg:px-8", children: [_jsxs("div", { className: "flex flex-col gap-10 md:flex-row md:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(ProductMark, { id: product.id, name: product.name, pack: product.pack, size: "lg" }), social && social.length > 0 ? (_jsx("ul", { className: "flex flex-wrap items-center gap-4", children: social.map((link) => (_jsx("li", { children: _jsxs("a", { href: link.href, rel: link.newTab === false ? undefined : 'noopener noreferrer', target: link.newTab === false ? undefined : '_blank', className: "text-muted-foreground hover:text-foreground flex min-h-6 items-center gap-2 rounded-sm text-sm font-medium transition-colors duration-fast ease-out", children: [link.icon ? (_jsx("span", { "aria-hidden": true, className: "inline-flex items-center", children: link.icon })) : null, link.label] }) }, link.href))) })) : null] }), columns && columns.length > 0 ? (_jsx("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3", children: columns.map((column) => (_jsxs("nav", { "aria-label": column.title, className: "flex flex-col gap-3", children: [_jsx(ColumnTitle, { className: "text-sm font-semibold", children: column.title }), _jsx("ul", { className: "flex flex-col gap-2", children: column.links.map((link) => (_jsx("li", { children: _jsx("a", { href: link.href, rel: link.newTab ? 'noopener noreferrer' : undefined, target: link.newTab ? '_blank' : undefined, className: "text-muted-foreground hover:text-foreground flex min-h-6 items-center rounded-sm text-sm transition-colors duration-fast ease-out", children: link.label }) }, link.href))) })] }, column.title))) })) : null] }), legal ? _jsx("div", { className: "text-muted-foreground text-sm", children: legal }) : null] }) }));
+    return (_jsx("footer", { "data-slot": "site-footer", className: cn('border-border bg-background w-full border-t', className), children: _jsxs("div", { className: "mx-auto flex w-full max-w-page flex-col gap-10 px-6 py-12 lg:px-8", children: [_jsxs("div", { className: "flex flex-col gap-10 md:flex-row md:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(ProductMark, { id: product.id, name: product.name, pack: product.pack, mark: product.mark, size: "lg" }), about ? (_jsx("div", { "data-slot": "site-footer-about", className: "max-w-measure flex flex-col gap-2", children: about })) : null, social && social.length > 0 ? (_jsx("ul", { className: "flex flex-wrap items-center gap-4", children: social.map((link) => (_jsx("li", { children: _jsxs("a", { href: link.href, rel: link.newTab === false ? undefined : 'noopener noreferrer', target: link.newTab === false ? undefined : '_blank', className: "text-muted-foreground hover:text-foreground flex min-h-6 items-center gap-2 rounded-sm text-sm font-medium transition-colors duration-fast ease-out", children: [link.icon ? (_jsx("span", { "aria-hidden": true, className: "inline-flex items-center", children: link.icon })) : null, link.label] }) }, link.href))) })) : null] }), columns && columns.length > 0 ? (_jsx("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3", children: columns.map((column) => (_jsxs("nav", { "aria-label": column.title, className: "flex flex-col gap-3", children: [_jsx(ColumnTitle, { className: "text-sm font-semibold", children: column.title }), _jsx("ul", { className: "flex flex-col gap-2", children: column.links.map((link) => (_jsx("li", { children: _jsx("a", { href: link.href, rel: link.newTab ? 'noopener noreferrer' : undefined, target: link.newTab ? '_blank' : undefined, className: "text-muted-foreground hover:text-foreground flex min-h-6 items-center rounded-sm text-sm transition-colors duration-fast ease-out", children: link.label }) }, link.href))) })] }, column.title))) })) : null] }), legal ? _jsx("div", { className: "text-muted-foreground text-sm", children: legal }) : null] }) }));
 }
 export default SiteFooter;

package/dist/blocks/site-navbar/index.d.ts

@@ -1,3 +1,3 @@
 export { SiteNavbar, default } from './site-navbar.js';
-export type { SiteNavbarProps, SiteNavLink, SiteNavSearch, SiteNavTheme, SiteNavMode, SiteNavMobileLabels, } from './site-navbar.js';
+export type { SiteNavbarProps, SiteNavLink, SiteNavGroup, SiteNavEntry, SiteNavSearch, SiteNavTheme, SiteNavMode, SiteNavMobileLabels, } from './site-navbar.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/blocks/site-navbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-navbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACnD,YAAY,EACV,eAAe,EACf,WAAW,EACX,aAAa,EACb,YAAY,EACZ,WAAW,EACX,mBAAmB,GACpB,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-navbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACnD,YAAY,EACV,eAAe,EACf,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,mBAAmB,GACpB,MAAM,eAAe,CAAA"}

package/dist/blocks/site-navbar/mobile-nav.d.ts

@@ -5,15 +5,33 @@ export type MobileNavLink = {
     label: string;
     /** Where the link goes. */
     href: string;
-    /** Marks this link as the page the reader is on. */
+    /** Marks the link as the page the reader is on. */
     current?: boolean;
 };
+/**
+ * A group of destinations in the mobile panel, as a label above its links.
+ *
+ * The row renders a group as a menu because a row is short of room and a group
+ * is one control there; this panel is not short of room, so the same group is a
+ * named run of the list rather than a second thing to open. A reader below the
+ * row's threshold therefore meets every destination flat: no route is behind
+ * two disclosures, and the group's name still tells them which destinations
+ * belong together.
+ */
+export type MobileNavGroup = {
+    /** The group's own name, which is a label and not a link. */
+    label: string;
+    /** The destinations under the label, in the order a reader should meet them. */
+    children: readonly MobileNavLink[];
+};
+/** One entry in the mobile panel: a link, or a group of them. */
+export type MobileNavEntry = MobileNavLink | MobileNavGroup;
 /** The props the mobile navigation takes. */
 export type MobileNavProps = {
     /** The product this navigation belongs to, drawn as the mark above the list. */
-    product: Pick<ProductMarkProps, 'id' | 'name' | 'pack'>;
+    product: Pick<ProductMarkProps, 'id' | 'name' | 'pack' | 'mark'>;
     /** Every destination, in the order a reader should meet them. */
-    links: readonly MobileNavLink[];
+    links: readonly MobileNavEntry[];
     /** The accessible name of the panel, which is also the trigger's name. */
     label: string;
     /** The word on the trigger while the panel is closed. */
@@ -42,7 +60,10 @@ export type MobileNavProps = {
  *
  * The links are full width with a 44 pixel minimum height, because below the row's
  * threshold this is a touch target and not a line of text, and the coarse-pointer
- * floor in the design system asks for exactly that.
+ * floor in the design system asks for exactly that. A group's label is a
+ * `role="group"` named by the label, so a reader who navigates the panel by
+ * landmark or by list is told which links belong together rather than meeting a
+ * longer list with a break in it.
  */
 export declare function MobileNav({ product, links, label, openLabel, closeLabel, }: MobileNavProps): import("react").JSX.Element;
 //# sourceMappingURL=mobile-nav.d.ts.map

package/dist/blocks/site-navbar/mobile-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-nav.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-navbar/mobile-nav.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AAExE,+EAA+E;AAC/E,MAAM,MAAM,aAAa,GAAG;IAC1B,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,6CAA6C;AAC7C,MAAM,MAAM,cAAc,GAAG;IAC3B,gFAAgF;IAChF,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA;IACvD,iEAAiE;IACjE,KAAK,EAAE,SAAS,aAAa,EAAE,CAAA;IAC/B,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,SAAS,EAAE,MAAM,CAAA;IACjB,uDAAuD;IACvD,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,KAAK,EACL,KAAK,EACL,SAAS,EACT,UAAU,GACX,EAAE,cAAc,+BAsChB"}
+{"version":3,"file":"mobile-nav.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-navbar/mobile-nav.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AAExE,+EAA+E;AAC/E,MAAM,MAAM,aAAa,GAAG;IAC1B,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,QAAQ,EAAE,SAAS,aAAa,EAAE,CAAA;CACnC,CAAA;AAED,iEAAiE;AACjE,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,cAAc,CAAA;AAE3D,6CAA6C;AAC7C,MAAM,MAAM,cAAc,GAAG;IAC3B,gFAAgF;IAChF,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA;IAChE,iEAAiE;IACjE,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;IAChC,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,SAAS,EAAE,MAAM,CAAA;IACjB,uDAAuD;IACvD,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,KAAK,EACL,KAAK,EACL,SAAS,EACT,UAAU,GACX,EAAE,cAAc,+BA0DhB"}

package/dist/blocks/site-navbar/mobile-nav.js

@@ -25,11 +25,18 @@ import { ProductMark } from '../../components/ui/product-mark.js';
  *
  * The links are full width with a 44 pixel minimum height, because below the row's
  * threshold this is a touch target and not a line of text, and the coarse-pointer
- * floor in the design system asks for exactly that.
+ * floor in the design system asks for exactly that. A group's label is a
+ * `role="group"` named by the label, so a reader who navigates the panel by
+ * landmark or by list is told which links belong together rather than meeting a
+ * longer list with a break in it.
  */
 export function MobileNav({ product, links, label, openLabel, closeLabel, }) {
     const [open, setOpen] = useState(false);
-    return (_jsxs(Sheet, { open: open, onOpenChange: setOpen, children: [_jsx(SheetTrigger, { "data-slot": "site-navbar-mobile-trigger", "aria-label": open ? closeLabel : openLabel, className: "border-border bg-card text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring flex size-11 shrink-0 items-center justify-center rounded-full border transition-colors focus-visible:ring-[3px] focus-visible:outline-none lg:hidden", children: open ? _jsx(X, { "aria-hidden": true, className: "size-5" }) : _jsx(Menu, { "aria-hidden": true, className: "size-5" }) }), _jsxs(SheetContent, { side: "right", className: "w-80", children: [_jsx(SheetTitle, { className: "sr-only", children: label }), _jsxs("nav", { "aria-label": label, className: "flex flex-col gap-1", children: [_jsx("div", { className: "mb-4 flex items-center", children: _jsx(ProductMark, { id: product.id, name: product.name, pack: product.pack, size: "md" }) }), links.map((link) => (_jsx("a", { href: link.href, "aria-current": link.current ? 'page' : undefined, onClick: () => setOpen(false), className: link.current
-                                    ? 'bg-accent text-accent-foreground focus-visible:border-ring focus-visible:ring-ring flex min-h-11 items-center rounded-lg px-3 text-sm font-medium transition-colors focus-visible:ring-[3px] focus-visible:outline-none'
-                                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring flex min-h-11 items-center rounded-lg px-3 text-sm font-medium transition-colors focus-visible:ring-[3px] focus-visible:outline-none', children: link.label }, link.href)))] })] })] }));
+    return (_jsxs(Sheet, { open: open, onOpenChange: setOpen, children: [_jsx(SheetTrigger, { "data-slot": "site-navbar-mobile-trigger", "aria-label": open ? closeLabel : openLabel, className: "border-border bg-card text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring flex size-11 shrink-0 items-center justify-center rounded-full border transition-colors focus-visible:ring-[3px] focus-visible:outline-none lg:hidden", children: open ? _jsx(X, { "aria-hidden": true, className: "size-5" }) : _jsx(Menu, { "aria-hidden": true, className: "size-5" }) }), _jsxs(SheetContent, { side: "right", className: "w-80", children: [_jsx(SheetTitle, { className: "sr-only", children: label }), _jsxs("nav", { "aria-label": label, className: "flex flex-col gap-1", children: [_jsx("div", { className: "mb-4 flex items-center", children: _jsx(ProductMark, { id: product.id, name: product.name, pack: product.pack, mark: product.mark, size: "md" }) }), links.map((entry) => 'children' in entry ? (_jsxs("div", { role: "group", "aria-label": entry.label, className: "mt-5 flex flex-col gap-1", children: [_jsx("span", { className: "text-muted-foreground px-3 pb-2 text-sm font-semibold tracking-tight", children: entry.label }), entry.children.map((link) => (_jsx(PanelLink, { link: link, onNavigate: () => setOpen(false) }, link.href)))] }, entry.label)) : (_jsx(PanelLink, { link: entry, onNavigate: () => setOpen(false) }, entry.href)))] })] })] }));
+}
+/** One link in the panel, extracted because the group and the root render the same one. */
+function PanelLink({ link, onNavigate }) {
+    return (_jsx("a", { href: link.href, "aria-current": link.current ? 'page' : undefined, onClick: onNavigate, className: link.current
+            ? 'bg-accent text-accent-foreground focus-visible:border-ring focus-visible:ring-ring flex min-h-11 items-center rounded-lg px-3 text-sm font-medium transition-colors focus-visible:ring-[3px] focus-visible:outline-none'
+            : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring flex min-h-11 items-center rounded-lg px-3 text-sm font-medium transition-colors focus-visible:ring-[3px] focus-visible:outline-none', children: link.label }));
 }

package/dist/blocks/site-navbar/nav-menu.d.ts

@@ -0,0 +1,50 @@
+import type { SiteNavLink } from './site-navbar.js';
+/** One destination inside the menu, with the current flag already resolved. */
+export type NavMenuLink = SiteNavLink & {
+    /** Marks this destination as the page the reader is on. */
+    current: boolean;
+};
+/** The props the navigation menu takes. */
+export type NavMenuProps = {
+    /** The word on the trigger, which is the group's own name. */
+    label: string;
+    /** The group's destinations, in the order a reader should meet them. */
+    links: readonly NavMenuLink[];
+    /**
+     * Marks the group as holding the page the reader is on, which the bar
+     * resolves against its own `currentPath` before it crosses the client
+     * boundary. The trigger is filled rather than merely tinted, so a reader who
+     * cannot distinguish the fill still finds the page named inside the menu.
+     */
+    current: boolean;
+};
+/**
+ * One group of the site's own destinations, as a menu.
+ *
+ * A bar whose navigation is a row of links clubs into groups the moment a site
+ * outgrows the row: five destinations that are all "the parts of the library"
+ * beside four that are each a body of knowledge is a row a reader scans
+ * word by word rather than recognises at a glance. This is the second half of
+ * that row, and it is the one control in the row, because a group is not a
+ * destination: it is a place other destinations live behind.
+ *
+ * **The items are links, not commands, for the reason the sites menu states.**
+ * A menu item that navigated would be a command wearing a link's clothes, and
+ * a reader who middle-clicks a row that only looks like a link gets no new tab.
+ * Each item is rendered as the anchor itself rather than wrapping one, so the
+ * row is one tab stop and one target.
+ *
+ * **The menu is a closed group, and a closed group shows nothing.** A reader
+ * with scripting off sees the trigger and cannot open it, which is why the bar
+ * renders a group as a menu only on the row above the panel threshold: below
+ * it, the sheet lists every destination flat, and the bar's caller keeps
+ * whatever routes it cannot afford to hide out of a group. The trigger is
+ * filled when the reader is inside the group, so the place they are is on the
+ * row even with the menu shut.
+ *
+ * **The chevron rotates on the open state and on nothing else.** Something
+ * happened and the reader can see that it did, at the authored duration, and
+ * the rotation is the only motion here.
+ */
+export declare function NavMenu({ label, links, current }: NavMenuProps): import("react").JSX.Element;
+//# sourceMappingURL=nav-menu.d.ts.map

package/dist/blocks/site-navbar/nav-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-menu.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-navbar/nav-menu.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAEhD,+EAA+E;AAC/E,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC,2DAA2D;IAC3D,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,2CAA2C;AAC3C,MAAM,MAAM,YAAY,GAAG;IACzB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAA;IACb,wEAAwE;IACxE,KAAK,EAAE,SAAS,WAAW,EAAE,CAAA;IAC7B;;;;;OAKG;IACH,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,YAAY,+BA6C9D"}

package/dist/blocks/site-navbar/nav-menu.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from 'lucide-react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../../components/ui/dropdown-menu.js';
+/**
+ * One group of the site's own destinations, as a menu.
+ *
+ * A bar whose navigation is a row of links clubs into groups the moment a site
+ * outgrows the row: five destinations that are all "the parts of the library"
+ * beside four that are each a body of knowledge is a row a reader scans
+ * word by word rather than recognises at a glance. This is the second half of
+ * that row, and it is the one control in the row, because a group is not a
+ * destination: it is a place other destinations live behind.
+ *
+ * **The items are links, not commands, for the reason the sites menu states.**
+ * A menu item that navigated would be a command wearing a link's clothes, and
+ * a reader who middle-clicks a row that only looks like a link gets no new tab.
+ * Each item is rendered as the anchor itself rather than wrapping one, so the
+ * row is one tab stop and one target.
+ *
+ * **The menu is a closed group, and a closed group shows nothing.** A reader
+ * with scripting off sees the trigger and cannot open it, which is why the bar
+ * renders a group as a menu only on the row above the panel threshold: below
+ * it, the sheet lists every destination flat, and the bar's caller keeps
+ * whatever routes it cannot afford to hide out of a group. The trigger is
+ * filled when the reader is inside the group, so the place they are is on the
+ * row even with the menu shut.
+ *
+ * **The chevron rotates on the open state and on nothing else.** Something
+ * happened and the reader can see that it did, at the authored duration, and
+ * the rotation is the only motion here.
+ */
+export function NavMenu({ label, links, current }) {
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { "data-slot": "site-navbar-nav-trigger", "data-current": current ? 'true' : undefined, className: current
+                    ? 'group data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground bg-accent text-accent-foreground focus-visible:border-ring focus-visible:ring-ring gap-1 rounded-md px-2 py-1.5 text-sm font-medium transition-colors focus-visible:ring-[3px] focus-visible:outline-none'
+                    : 'group data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring gap-1 rounded-md px-2 py-1.5 text-sm font-medium transition-colors focus-visible:ring-[3px] focus-visible:outline-none', children: [label, _jsx(ChevronDown, { "aria-hidden": true, className: "group-data-[popup-open]:rotate-180 size-4 transition-transform duration-base ease-out" })] }), _jsx(DropdownMenuContent, { align: "start", sideOffset: 8, className: "min-w-44", children: links.map((link) => (_jsx(DropdownMenuItem, { 
+                    /*
+                     * Rendered AS the link rather than wrapping one. A focusable menu
+                     * item with an anchor inside it is two tab stops for one row, and a
+                     * reader who middle-clicks a row that only looks like a link gets no
+                     * new tab and no way to tell that the row was a link at all.
+                     */
+                    render: _jsx("a", { href: link.href, target: link.newTab ? '_blank' : undefined, rel: link.newTab ? 'noopener noreferrer' : undefined, "aria-current": link.current ? 'page' : undefined, "data-current": link.current ? 'true' : undefined }), className: "data-[current]:bg-accent data-[current]:text-accent-foreground data-[current]:font-medium", children: link.label }, link.href))) })] }));
+}

package/dist/blocks/site-navbar/navbar-controls.d.ts

@@ -1,18 +1,24 @@
+import type { ReactNode } from 'react';
 import type { Mode, PackId } from '../../theming/index.js';
 import type { SearchDialogMessages } from '../../components/ui/search-dialog.js';
 import { type ThemePack } from './theme-menu.js';
 import type { SwitcherProduct } from '../../components/ui/product-switcher.js';
-import type { MobileNavLink } from './mobile-nav.js';
+import type { MobileNavEntry } from './mobile-nav.js';
 /** What the control cluster was told to render. Every field is optional. */
 export type NavbarControlsProps = {
-    /** The product whose mark heads the mobile panel. */
+    /**
+     * The product whose mark heads the mobile panel. The drawn `mark` crosses
+     * this client boundary as rendered content, the same way a slot does, so a
+     * consumer's drawing stays server-drawn while the panel around it is not.
+     */
     product: {
         id: string;
         name: string;
         pack?: PackId | null;
+        mark?: ReactNode;
     };
     /** The site's own destinations, for the panel below the row's threshold. */
-    nav: readonly MobileNavLink[];
+    nav: readonly MobileNavEntry[];
     /** The accessible name of the panel and of its trigger. */
     navLabel: string;
     /** The set of sites, or nothing for a site that is the only one. */

package/dist/blocks/site-navbar/navbar-controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-controls.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-navbar/navbar-controls.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAA;AAI7E,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AAC3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAIjD,4EAA4E;AAC5E,MAAM,MAAM,mBAAmB,GAAG;IAChC,qDAAqD;IACrD,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAA;IAC3D,4EAA4E;IAC5E,GAAG,EAAE,SAAS,aAAa,EAAE,CAAA;IAC7B,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAA;IAChB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uEAAuE;IACvE,MAAM,CAAC,EAAE;QACP,QAAQ,EAAE,MAAM,CAAA;QAChB,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,QAAQ,EAAE,oBAAoB,CAAA;KAC/B,CAAA;IACD,+DAA+D;IAC/D,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,SAAS,SAAS,EAAE,CAAA;KAAE,CAAA;IACvD,6EAA6E;IAC7E,IAAI,CAAC,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAA;IAChD,2CAA2C;IAC3C,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC7C,oDAAoD;IACpD,WAAW,EAAE,MAAM,CAAA;IACnB,oDAAoD;IACpD,WAAW,EAAE,IAAI,CAAA;IACjB,mEAAmE;IACnE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,sCAsDxD"}
+{"version":3,"file":"navbar-controls.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-navbar/navbar-controls.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAA;AAI7E,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAIlD,4EAA4E;AAC5E,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;OAIG;IACH,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,SAAS,CAAA;KAAE,CAAA;IAC7E,4EAA4E;IAC5E,GAAG,EAAE,SAAS,cAAc,EAAE,CAAA;IAC9B,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAA;IAChB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uEAAuE;IACvE,MAAM,CAAC,EAAE;QACP,QAAQ,EAAE,MAAM,CAAA;QAChB,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,QAAQ,EAAE,oBAAoB,CAAA;KAC/B,CAAA;IACD,+DAA+D;IAC/D,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,SAAS,SAAS,EAAE,CAAA;KAAE,CAAA;IACvD,6EAA6E;IAC7E,IAAI,CAAC,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAA;IAChD,2CAA2C;IAC3C,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC7C,oDAAoD;IACpD,WAAW,EAAE,MAAM,CAAA;IACnB,oDAAoD;IACpD,WAAW,EAAE,IAAI,CAAA;IACjB,mEAAmE;IACnE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,sCAsDxD"}

package/dist/blocks/site-navbar/site-navbar.d.ts

@@ -31,7 +31,41 @@ export type SiteNavLink = {
      * external: a cross-origin destination is not by itself a reason to open a tab.
      */
     newTab?: boolean;
+    /** Forbidden: a destination carrying children is a `SiteNavGroup`, not a link. */
+    children?: never;
 };
+/**
+ * A group of destinations in the bar's own navigation, rendered as one trigger
+ * that opens a menu of them.
+ *
+ * The group is a place in the row rather than a route: it carries no `href`, and
+ * a caller whose group has an index page of its own lists that page among the
+ * `children` rather than on the group, so nothing is inventing a route. That is
+ * the same shape the site's own sidebar holds a folder to, and for the same
+ * reason: a group is where destinations live, not one.
+ *
+ * **A group hides its destinations until it is opened**, on the row above the
+ * panel threshold and nowhere else. The bar's narrow-viewport panel lists every
+ * destination flat, so a reader below the threshold meets no group at all, and a
+ * caller who cannot afford to hide a route behind a click leaves it out of a
+ * group: the search index, the sitemap and the page's own links are outside the
+ * bar and unaffected either way.
+ */
+export type SiteNavGroup = {
+    /** The word on the trigger, which is the group's own name. */
+    label: string;
+    /** The destinations behind the trigger, in the order a reader should meet them. */
+    children: readonly SiteNavLink[];
+    /**
+     * Marks the group as holding the page the reader is on, for a caller that
+     * composes the bar per page and marks each entry itself. A caller that passes
+     * `currentPath` leaves this off and the bar resolves it against the group's
+     * children.
+     */
+    current?: boolean;
+};
+/** One entry in the bar's own navigation: a link, or a group of them. */
+export type SiteNavEntry = SiteNavLink | SiteNavGroup;
 /** The search the bar offers, which is a URL rather than an index. */
 export type SiteNavSearch = {
     /**
@@ -79,12 +113,12 @@ export type SiteNavMobileLabels = {
 /** The props a SiteNavbar takes. */
 export type SiteNavbarProps = {
     /**
-     * The product this bar belongs to: the id, name and pack its `ProductMark` is
-     * drawn from, and the mark that heads the mobile panel. The bar renders the mark
-     * itself rather than a slot, because a bar whose brand lockup is a slot is a bar
-     * every consumer has to reimplement.
+     * The product this bar belongs to: the id, name, pack and drawn mark its
+     * `ProductMark` is drawn from, and the mark that heads the mobile panel. The
+     * bar renders the mark itself rather than a slot, because a bar whose brand
+     * lockup is a slot is a bar every consumer has to reimplement.
      */
-    product: Pick<ProductMarkProps, 'id' | 'name' | 'pack'>;
+    product: Pick<ProductMarkProps, 'id' | 'name' | 'pack' | 'mark'>;
     /** Where the brand lockup goes. @defaultValue '/' */
     homeHref?: string;
     /**
@@ -99,8 +133,13 @@ export type SiteNavbarProps = {
      * control whose icon is a guess until it is pressed once.
      */
     defaultMode: Mode;
-    /** This site's own destinations. Omit for a bar that carries only the lockup. */
-    nav?: readonly SiteNavLink[];
+    /**
+     * This site's own destinations: links, groups of links, or both in the order
+     * a reader should meet them. A link renders as itself; a group renders as one
+     * trigger opening its children as a menu. Omit for a bar that carries only
+     * the lockup.
+     */
+    nav?: readonly SiteNavEntry[];
     /**
      * The accessible name of the site's navigation. Required, and required rather
      * than defaulted because it is a word a reader hears: a Block that ships no copy
@@ -234,12 +273,14 @@ export type SiteNavbarProps = {
  * with no release. This package ships no `will-change` anywhere, and the bar is not
  * the place to start one.
  *
- * **It is a server Component with one client island inside it.** The lockup and the
- * navigation are rendered on the server and ship no JavaScript; the controls are a
- * single boundary, because a control's state is a reader's state. A site that
- * passes no `search`, `sites`, `theme`, `mode` or `nav` renders the whole bar on the
- * server and ships none, which is the arrangement a static site wants and the reason
- * those props are optional rather than required.
+ * **It is a server Component whose client islands are the ones a reader opens.** The
+ * lockup and the row's links are rendered on the server and ship no JavaScript; the
+ * controls are a single boundary, because a control's state is a reader's state, and
+ * a group in the navigation adds one island of its own for the same reason. A site
+ * that passes no `search`, `sites`, `theme`, `mode` or `nav`, and groups none of
+ * its destinations, renders the whole bar on the server and ships none, which is
+ * the arrangement a static site wants and the reason those props are optional
+ * rather than required.
  */
 export declare function SiteNavbar({ product, homeHref, defaultPack, defaultMode, nav, navLabel, currentPath, sites, currentSiteId, sitesLabel, search, theme, mode, mobileLabels, actions, sticky, className, }: SiteNavbarProps): import("react").JSX.Element;
 export default SiteNavbar;

package/dist/blocks/site-navbar/site-navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"site-navbar.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-navbar/site-navbar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"site-navbar.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-navbar/site-navbar.tsx"],"names":[],"mappings":"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"}

package/dist/blocks/site-navbar/site-navbar.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ProductMark } from '../../components/ui/product-mark.js';
 import { cn } from '../../lib/utils.js';
 import { NavbarControls } from './navbar-controls.js';
+import { NavMenu } from './nav-menu.js';
 /**
  * The bar at the top of a product site, with the controls a reader needs on every
  * page of it.
@@ -73,18 +74,52 @@ import { NavbarControls } from './navbar-controls.js';
  * with no release. This package ships no `will-change` anywhere, and the bar is not
  * the place to start one.
  *
- * **It is a server Component with one client island inside it.** The lockup and the
- * navigation are rendered on the server and ship no JavaScript; the controls are a
- * single boundary, because a control's state is a reader's state. A site that
- * passes no `search`, `sites`, `theme`, `mode` or `nav` renders the whole bar on the
- * server and ships none, which is the arrangement a static site wants and the reason
- * those props are optional rather than required.
+ * **It is a server Component whose client islands are the ones a reader opens.** The
+ * lockup and the row's links are rendered on the server and ship no JavaScript; the
+ * controls are a single boundary, because a control's state is a reader's state, and
+ * a group in the navigation adds one island of its own for the same reason. A site
+ * that passes no `search`, `sites`, `theme`, `mode` or `nav`, and groups none of
+ * its destinations, renders the whole bar on the server and ships none, which is
+ * the arrangement a static site wants and the reason those props are optional
+ * rather than required.
  */
 export function SiteNavbar({ product, homeHref = '/', defaultPack, defaultMode, nav, navLabel, currentPath, sites, currentSiteId, sitesLabel, search, theme, mode, mobileLabels, actions, sticky = true, className, }) {
-    const links = nav ?? [];
-    const isCurrent = (link) => link.current ?? (currentPath !== undefined && link.href === currentPath);
-    return (_jsx("header", { "data-slot": "site-navbar", className: cn('border-border bg-background w-full border-b', sticky && 'sticky top-0 z-20', className), children: _jsxs("div", { className: "mx-auto flex h-14 w-full max-w-page items-center gap-2 px-6", children: [_jsx("a", { href: homeHref, className: "focus-visible:border-ring focus-visible:ring-ring shrink-0 rounded-sm focus-visible:ring-[3px] focus-visible:outline-none", children: _jsx(ProductMark, { id: product.id, name: product.name, pack: product.pack, size: "sm" }) }), links.length > 0 ? (_jsx("nav", { "aria-label": navLabel, className: "hidden items-center lg:flex", children: links.map((link) => (_jsx("a", { href: link.href, "aria-current": isCurrent(link) ? 'page' : undefined, rel: link.newTab ? 'noopener noreferrer' : undefined, target: link.newTab ? '_blank' : undefined, className: isCurrent(link)
+    const entries = nav ?? [];
+    /*
+     * The current mark reads the route as a place rather than as a string, so a
+     * reader on a page inside a destination is still on it: `/components/button`
+     * marks Components on the row, which is the question a reader asking "where
+     * am I" is asking. The boundary is the slash, so a Section whose segment is a
+     * prefix of another's (`/content` beside a hypothetical `/content-x`) never
+     * claims the other's pages.
+     */
+    const under = (href) => currentPath !== undefined && (currentPath === href || currentPath.startsWith(`${href}/`));
+    const leafCurrent = (link) => link.current ?? under(link.href);
+    /**
+     * A group is current when the reader is on it or inside any of its children.
+     * A group is told apart from a link by `href`, which a link must carry and a
+     * group must not, so the narrowing is on the one key the two never share.
+     */
+    const entryCurrent = (entry) => entry.current ??
+        ('href' in entry
+            ? under(entry.href)
+            : entry.children.some((child) => leafCurrent(child)));
+    return (_jsx("header", { "data-slot": "site-navbar", className: cn('border-border bg-background w-full border-b', sticky && 'sticky top-0 z-20', className), children: _jsxs("div", { className: "mx-auto flex h-14 w-full max-w-page items-center gap-2 px-6", children: [_jsx("a", { href: homeHref, className: "focus-visible:border-ring focus-visible:ring-ring shrink-0 rounded-sm focus-visible:ring-[3px] focus-visible:outline-none", children: _jsx(ProductMark, { id: product.id, name: product.name, pack: product.pack, mark: product.mark, size: "sm" }) }), entries.length > 0 ? (_jsx("nav", { "aria-label": navLabel, className: "hidden items-center lg:flex", children: entries.map((entry) => 
+                    /*
+                     * A group is the one control in the row, because it is the one
+                     * entry that is a place rather than a destination, and its menu is
+                     * a client island for the same reason the controls cluster is:
+                     * whether it is open is a reader's state. The links around it stay
+                     * server-rendered anchors, so a bar whose row is all links still
+                     * ships a navigation with no JavaScript in it.
+                     */
+                    'href' in entry ? (_jsx("a", { href: entry.href, "aria-current": entryCurrent(entry) ? 'page' : undefined, rel: entry.newTab ? 'noopener noreferrer' : undefined, target: entry.newTab ? '_blank' : undefined, className: entryCurrent(entry)
                             ? 'bg-accent text-accent-foreground focus-visible:border-ring focus-visible:ring-ring rounded-md px-2 py-1.5 text-sm font-medium transition-colors focus-visible:ring-[3px] focus-visible:outline-none'
-                            : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring rounded-md px-2 py-1.5 text-sm font-medium transition-colors focus-visible:ring-[3px] focus-visible:outline-none', children: link.label }, link.href))) })) : null, _jsx(NavbarControls, { product: product, nav: links.map((link) => ({ ...link, current: isCurrent(link) })), navLabel: navLabel, sites: sites, currentSiteId: currentSiteId, sitesLabel: sitesLabel, search: search, theme: theme, mode: mode, mobileLabels: mobileLabels, defaultPack: defaultPack, defaultMode: defaultMode, actions: actions })] }) }));
+                            : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring rounded-md px-2 py-1.5 text-sm font-medium transition-colors focus-visible:ring-[3px] focus-visible:outline-none', children: entry.label }, entry.href)) : (_jsx(NavMenu, { label: entry.label, current: entryCurrent(entry), links: entry.children.map((child) => ({ ...child, current: leafCurrent(child) })) }, entry.label))) })) : null, _jsx(NavbarControls, { product: product, nav: entries.map((entry) => 'href' in entry
+                        ? { ...entry, current: entryCurrent(entry) }
+                        : {
+                            label: entry.label,
+                            children: entry.children.map((child) => ({ ...child, current: leafCurrent(child) })),
+                        }), navLabel: navLabel, sites: sites, currentSiteId: currentSiteId, sitesLabel: sitesLabel, search: search, theme: theme, mode: mode, mobileLabels: mobileLabels, defaultPack: defaultPack, defaultMode: defaultMode, actions: actions })] }) }));
 }
 export default SiteNavbar;

package/dist/components/ui/calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/calendar.tsx"],"names":[],"mappings":"AAOA;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS;IACtC,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;CACP,CAAA;AAED,sCAAsC;AACtC,MAAM,WAAW,aAAa;IAC5B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;OAQG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB,gEAAgE;IAChE,aAAa,EAAE,gBAAgB,CAAA;IAC/B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxC,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAA;IACrB,uEAAuE;IACvE,SAAS,EAAE,MAAM,CAAA;IACjB;;;;;;;OAOG;IACH,KAAK,EAAE,IAAI,CAAA;IACX,mFAAmF;IACnF,aAAa,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACnB,kFAAkF;IAClF,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAA;IACxC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;IACjC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,IAAI,CAAA;IACZ,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAwED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAgB,EAChB,aAAa,EACb,SAAS,EACT,KAAK,EACL,aAAa,EACb,KAAY,EACZ,aAAa,EACb,cAAc,EACd,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,SAAS,GACV,EAAE,aAAa,+BAyPf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/calendar.tsx"],"names":[],"mappings":"AAOA;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS;IACtC,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;CACP,CAAA;AAED,sCAAsC;AACtC,MAAM,WAAW,aAAa;IAC5B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;OAQG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB,gEAAgE;IAChE,aAAa,EAAE,gBAAgB,CAAA;IAC/B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxC,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAA;IACrB,uEAAuE;IACvE,SAAS,EAAE,MAAM,CAAA;IACjB;;;;;;;OAOG;IACH,KAAK,EAAE,IAAI,CAAA;IACX,mFAAmF;IACnF,aAAa,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACnB,kFAAkF;IAClF,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAA;IACxC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;IACjC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,IAAI,CAAA;IACZ,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA6ED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAgB,EAChB,aAAa,EACb,SAAS,EACT,KAAK,EACL,aAAa,EACb,KAAY,EACZ,aAAa,EACb,cAAc,EACd,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,SAAS,GACV,EAAE,aAAa,+BAyPf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/ui/calendar.js

@@ -35,7 +35,12 @@ const DAY_CELL =
 // was added to it, and the fuller grid kept the 36px cell that is the same cell at
 // a different size. A month grid is the densest control in the package and the one
 // most worked with a thumb, so it is the last place the floor can be argued about.
-'text-foreground hover:bg-accent hover:text-accent-foreground flex h-9 w-full cursor-pointer items-center justify-center rounded-md text-sm tabular-nums outline-none transition-colors duration-fast ease-out pointer-coarse:h-11 focus-visible:ring-ring focus-visible:ring-[3px]';
+//
+// The cell is centred by the table, not by a `flex` utility: a `display: flex` on
+// a `<th>` or a `<td>` takes the cell out of the table's column layout, and the
+// month drew as one stacked column at four times its height before the utility
+// came off.
+'text-foreground hover:bg-accent hover:text-accent-foreground h-9 cursor-pointer rounded-md p-0 align-middle text-center text-sm tabular-nums outline-none transition-colors duration-fast ease-out pointer-coarse:h-11 focus-visible:ring-ring focus-visible:ring-[3px]';
 /**
  * The two paging controls.
  *
@@ -226,7 +231,7 @@ function Calendar({ label, monthLabel, weekdayLabels, firstWeekday = 0, previous
     const focusedIso = iso(focused);
     const chosenIso = value === null ? null : iso(value);
     const todayIso = today === undefined ? null : iso(today);
-    return (_jsxs("div", { "data-slot": "calendar", className: cn('bg-popover text-popover-foreground w-64 rounded-md border p-3 shadow-md', className), children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-1", children: [_jsx("button", { type: "button", "data-slot": "calendar-previous", "aria-label": previousLabel, disabled: disabled, onClick: () => onMonthChange(shiftMonth(month, -1)), className: cn(NAV_CONTROL, 'disabled:pointer-events-none disabled:opacity-50'), children: _jsx(ChevronLeftIcon, { className: "size-4" }) }), _jsx("div", { "data-slot": "calendar-caption", "aria-live": "polite", className: "text-foreground text-sm font-medium tabular-nums", children: monthLabel }), _jsx("button", { type: "button", "data-slot": "calendar-next", "aria-label": nextLabel, disabled: disabled, onClick: () => onMonthChange(shiftMonth(month, 1)), className: cn(NAV_CONTROL, 'disabled:pointer-events-none disabled:opacity-50'), children: _jsx(ChevronRightIcon, { className: "size-4" }) })] }), _jsx("div", { ref: gridRef, children: _jsxs("table", { "data-slot": "calendar-grid", role: "grid", "aria-label": label, className: "w-full border-collapse tabular-nums", children: [_jsx("thead", { children: _jsx("tr", { children: weekdayLabels.map((weekday, column) => (_jsx("th", { scope: "col", "data-slot": "calendar-weekday", className: "text-muted-foreground flex h-8 items-center justify-center text-xs font-medium", children: weekday }, `${weekday}-${column}`))) }) }), _jsx("tbody", { children: Array.from({ length: 6 }, (_, row) => (_jsx("tr", { children: cells.slice(row * 7, row * 7 + 7).map((date) => {
+    return (_jsxs("div", { "data-slot": "calendar", className: cn('bg-popover text-popover-foreground w-64 rounded-md border p-3 shadow-md', className), children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-1", children: [_jsx("button", { type: "button", "data-slot": "calendar-previous", "aria-label": previousLabel, disabled: disabled, onClick: () => onMonthChange(shiftMonth(month, -1)), className: cn(NAV_CONTROL, 'disabled:pointer-events-none disabled:opacity-50'), children: _jsx(ChevronLeftIcon, { className: "size-4" }) }), _jsx("div", { "data-slot": "calendar-caption", "aria-live": "polite", className: "text-foreground text-sm font-medium tabular-nums", children: monthLabel }), _jsx("button", { type: "button", "data-slot": "calendar-next", "aria-label": nextLabel, disabled: disabled, onClick: () => onMonthChange(shiftMonth(month, 1)), className: cn(NAV_CONTROL, 'disabled:pointer-events-none disabled:opacity-50'), children: _jsx(ChevronRightIcon, { className: "size-4" }) })] }), _jsx("div", { ref: gridRef, children: _jsxs("table", { "data-slot": "calendar-grid", role: "grid", "aria-label": label, className: "w-full border-collapse tabular-nums", children: [_jsx("thead", { children: _jsx("tr", { children: weekdayLabels.map((weekday, column) => (_jsx("th", { scope: "col", "data-slot": "calendar-weekday", className: "text-muted-foreground h-8 p-0 align-middle text-center text-xs font-medium", children: weekday }, `${weekday}-${column}`))) }) }), _jsx("tbody", { children: Array.from({ length: 6 }, (_, row) => (_jsx("tr", { children: cells.slice(row * 7, row * 7 + 7).map((date) => {
                                     const key = iso(date);
                                     if (!sameMonth(date, month)) {
                                         // The cells that pad the month out. They are hidden from the

package/dist/components/ui/mini-calendar.js

@@ -243,7 +243,7 @@ function MiniCalendar({ selected, onSelect, month, defaultMonth, onMonthChange,
             default:
         }
     };
-    return (_jsx("div", { ref: gridRef, "data-slot": "mini-calendar", className: cn('bg-card text-card-foreground w-64 rounded-md border p-3 shadow-sm', className), children: _jsxs("table", { "data-slot": "mini-calendar-grid", role: "grid", "aria-label": label, className: "w-full border-collapse tabular-nums", children: [_jsx("caption", { "data-slot": "mini-calendar-caption", className: "mb-2", children: _jsxs("span", { className: "flex items-center justify-between gap-1", children: [_jsx("button", { type: "button", "data-slot": "mini-calendar-previous", "aria-label": previousLabel, onClick: () => move(shiftMonth(shown, -1)), className: NAV_CONTROL, children: _jsx(ChevronLeftIcon, { className: "size-4", "aria-hidden": "true" }) }), _jsx("span", { "data-slot": "mini-calendar-month", "aria-live": "polite", className: "text-foreground text-sm font-medium", children: monthText }), _jsx("button", { type: "button", "data-slot": "mini-calendar-next", "aria-label": nextLabel, onClick: () => move(shiftMonth(shown, 1)), className: NAV_CONTROL, children: _jsx(ChevronRightIcon, { className: "size-4", "aria-hidden": "true" }) })] }) }), _jsx("thead", { children: _jsx("tr", { children: headings.map((heading) => (_jsx("th", { scope: "col", abbr: heading.long, "data-slot": "mini-calendar-weekday", className: "text-muted-foreground flex h-8 items-center justify-center text-xs font-medium", children: heading.short }, heading.long))) }) }), _jsx("tbody", { children: Array.from({ length: 6 }, (_, row) => (_jsx("tr", { children: cells.slice(row * 7, row * 7 + 7).map((date) => {
+    return (_jsx("div", { ref: gridRef, "data-slot": "mini-calendar", className: cn('bg-card text-card-foreground w-64 rounded-md border p-3 shadow-sm', className), children: _jsxs("table", { "data-slot": "mini-calendar-grid", role: "grid", "aria-label": label, className: "w-full border-collapse tabular-nums", children: [_jsx("caption", { "data-slot": "mini-calendar-caption", className: "mb-2", children: _jsxs("span", { className: "flex items-center justify-between gap-1", children: [_jsx("button", { type: "button", "data-slot": "mini-calendar-previous", "aria-label": previousLabel, onClick: () => move(shiftMonth(shown, -1)), className: NAV_CONTROL, children: _jsx(ChevronLeftIcon, { className: "size-4", "aria-hidden": "true" }) }), _jsx("span", { "data-slot": "mini-calendar-month", "aria-live": "polite", className: "text-foreground text-sm font-medium", children: monthText }), _jsx("button", { type: "button", "data-slot": "mini-calendar-next", "aria-label": nextLabel, onClick: () => move(shiftMonth(shown, 1)), className: NAV_CONTROL, children: _jsx(ChevronRightIcon, { className: "size-4", "aria-hidden": "true" }) })] }) }), _jsx("thead", { children: _jsx("tr", { children: headings.map((heading) => (_jsx("th", { scope: "col", abbr: heading.long, "data-slot": "mini-calendar-weekday", className: "text-muted-foreground h-8 p-0 align-middle text-center text-xs font-medium", children: heading.short }, heading.long))) }) }), _jsx("tbody", { children: Array.from({ length: 6 }, (_, row) => (_jsx("tr", { children: cells.slice(row * 7, row * 7 + 7).map((date) => {
                             const key = iso(date);
                             if (!sameMonth(date, shown)) {
                                 // The cells that pad the month out. Hidden from the accessibility