@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.2

package/navigation/pagination/pagination.module.css

@@ -0,0 +1,400 @@
+/*
+ * Pagination (§9.9). CVA function `pagination` in Pagination.tsx. Parts:
+ * base (the nav, the `pagination` container), list, item, page (a number:
+ * Link kind="nav"), current, gap ("…"), step / prev / next (Previous and
+ * Next: `text` Buttons; on the step pager, icon-only outline Buttons), word
+ * (their label), status (statusWord + statusCount), dots / dot (the step
+ * pager's position dots), more (the "Show More" Button), visuallyHidden,
+ * printLine. Colors follow the §9.9 Color roles table through role
+ * variables only; the arrows' --role-glyph, the page numbers' hover and the
+ * step buttons' states come from Button and Link. Local custom properties
+ * carry dimensions only:
+ *   --pagination-dot          a dot's diameter (10 px)
+ *   --pagination-dot-current  the current dot's diameter (12 px)
+ *
+ * Tier classes: `near` marks what the 1-sibling row shows, `far` what the
+ * 2-sibling row shows; the media and container rules below pick one.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. Previous and Next are caps
+ * wayfinding (`type-label`) [D165]; the figures take `type-data`'s mono face
+ * and tabular numerals at `type-label` size [D174, D175]. */
+.step {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.page {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.current {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.gap {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.statusCount {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.statusWord {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.printLine {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+@layer base {
+  /* Previous at the start, Next at the end, the numbers centered; an omitted
+     end keeps its column, so the row stays put. --size-px-7-5 above. */
+  .base {
+    container: pagination / inline-size;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    align-items: center;
+    column-gap: var(--size-px-2-5);
+    margin-block-start: var(--size-px-7-5);
+    color: var(--primary12);
+    white-space: nowrap;
+  }
+
+  .prev {
+    grid-row: 1;
+    grid-column: 1;
+    justify-self: start;
+  }
+
+  .next {
+    grid-row: 1;
+    grid-column: 3;
+    justify-self: end;
+  }
+
+  .list {
+    display: none;
+    grid-row: 1;
+    grid-column: 2;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .item {
+    display: none;
+  }
+
+  /* "Page 5 of 12": the word in `type-caption`, the count mono (§9.9). */
+  .status {
+    display: block;
+    grid-row: 1;
+    grid-column: 2;
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  /* Current: unlinked, on the same --fgd-size-hit cell as a page link. */
+  .current {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--fgd-size-hit);
+    min-block-size: var(--fgd-size-hit);
+    color: var(--primary12);
+  }
+
+  /* The current bar: --border-size-2-25, --size-px-4 wide, under the numeral. A
+     border, so it survives forced colors. Physical offsets: centering is
+     direction-agnostic with the translate. */
+  .current::after {
+    content: '';
+    position: absolute;
+    bottom: var(--size-px-2-5);
+    left: 50%;
+    display: none;
+    inline-size: var(--size-px-4);
+    border-block-end: var(--border-size-2-25) solid var(--primary12);
+    translate: -50% 0;
+  }
+
+  /* Gap "…": --role-muted, not focusable, on a --fgd-size-hit cell. */
+  .gap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--fgd-size-hit);
+    min-block-size: var(--fgd-size-hit);
+    color: var(--role-muted);
+  }
+
+  /*
+   * Previous and Next words: pagination is bare text, so their hover is the
+   * bare-text underline, as a page number's, not the `text` Button's ink
+   * (§9.9) [D181]. The word keeps --primary12 and, as an inline block,
+   * carries its own underline instead of the Button label's.
+   */
+  .word {
+    display: inline-block;
+    color: var(--primary12);
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  /* The step pager's dots: 10 px --border-size-1-5 --primary12 outlines, --size-px-2 apart. */
+  .dots {
+    --pagination-dot: var(--fgd-size-pager-dot);
+    --pagination-dot-current: var(--fgd-size-pager-dot-current);
+
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+  }
+
+  .dot {
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--pagination-dot);
+    block-size: var(--pagination-dot);
+    border: var(--border-size-1-5) solid var(--primary12);
+    border-radius: var(--radius-round);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .word {
+      transition-property: text-decoration-color;
+      transition-duration: var(--fgd-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+
+  .visuallyHidden {
+    position: absolute;
+    inline-size: var(--border-size-1);
+    block-size: var(--border-size-1);
+    margin: calc(var(--border-size-1) * -1);
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .printLine {
+    display: none;
+    grid-column: 1 / -1;
+    margin: 0;
+    white-space: normal;
+  }
+}
+
+@layer variants {
+  /* Figures at `type-label` size (P4) [D174]. */
+  .page,
+  .current,
+  .gap,
+  .statusCount {
+    font-size: var(--fgd-font-size-label);
+  }
+
+  /* A number: a --fgd-size-hit square hit area, no box, no rest underline [D80]. */
+  .page {
+    justify-content: center;
+    min-inline-size: var(--fgd-size-hit);
+  }
+
+  /* Compact: "Page 5 of 12" between the steps at every width. */
+  .compact .status {
+    display: block;
+  }
+
+  /*
+   * Step pager: icon-only ‹ › circles (--fgd-size-control-md) around the
+   * mono "3 of 12", centred; an omitted end keeps its column (§9.9).
+   */
+  .kindStep,
+  .kindDots {
+    grid-template-columns: var(--fgd-size-control-md) auto var(--fgd-size-control-md);
+    justify-content: center;
+  }
+
+  /* With dots: the dots between the circles, the count still shown under them. */
+  .kindDots .dots {
+    grid-row: 1;
+    grid-column: 2;
+    justify-self: center;
+  }
+
+  .kindDots .status {
+    grid-row: 2;
+    justify-self: center;
+    margin-block-start: var(--size-px-2);
+  }
+
+  /* Show more: "Showing 20 of 54" over the outline Button, centred. */
+  .kindMore {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: var(--size-px-3);
+  }
+
+  /* Numbered, container-first [D163]. Baseline: the compact status. Viewport
+     fallback: numbered from --md-n-above with 1 sibling, 2 from --lg-n-above. */
+  @media (min-width: 768px) {
+    .numbered .list {
+      display: flex;
+    }
+
+    .numbered .status {
+      display: none;
+    }
+
+    .near {
+      display: flex;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .item {
+      display: none;
+    }
+
+    .far {
+      display: flex;
+    }
+  }
+
+  /* Container thresholds (§5.10.2): from 768 px numbered with 1 sibling, from
+     1024 px 2 siblings. The row drops siblings; it never wraps. */
+  @container pagination (width < 768px) {
+    .numbered .list {
+      display: none;
+    }
+
+    .numbered .status {
+      display: block;
+    }
+  }
+
+  @container pagination (width >= 768px) {
+    .numbered .list {
+      display: flex;
+    }
+
+    .numbered .status {
+      display: none;
+    }
+
+    .item {
+      display: none;
+    }
+
+    .near {
+      display: flex;
+    }
+  }
+
+  @container pagination (width >= 1024px) {
+    .item {
+      display: none;
+    }
+
+    .far {
+      display: flex;
+    }
+  }
+
+  /* Stack guard: below 360 px the words drop and the chevrons stand alone on
+     their --fgd-size-hit targets, still named "Previous" and "Next" [D166].
+     The Button's gap closes with the word. */
+  @media (max-width: 359.98px) {
+    .step {
+      column-gap: 0;
+    }
+
+    .word {
+      position: absolute;
+      inline-size: var(--border-size-1);
+      block-size: var(--border-size-1);
+      margin: calc(var(--border-size-1) * -1);
+      overflow: hidden;
+      clip-path: inset(50%);
+    }
+  }
+
+  @container pagination (width < 360px) {
+    .step {
+      column-gap: 0;
+    }
+
+    .word {
+      position: absolute;
+      inline-size: var(--border-size-1);
+      block-size: var(--border-size-1);
+      margin: calc(var(--border-size-1) * -1);
+      overflow: hidden;
+      clip-path: inset(50%);
+    }
+  }
+}
+
+@layer states {
+  /* Current: the --border-size-2-25 bar in --primary12 plus --font-weight-7. */
+  .current[aria-current='page'] {
+    font-weight: var(--font-weight-7);
+  }
+
+  .current[aria-current='page']::after {
+    display: block;
+  }
+
+  /* The current dot: solid --primary12 and larger, so shape and size change, not only fill. */
+  .dot[aria-current='true'] {
+    inline-size: var(--pagination-dot-current);
+    block-size: var(--pagination-dot-current);
+    background-color: var(--primary12);
+  }
+
+  /* Previous / Next hover: the bare-text underline on the word [D181]. */
+  .step:hover .word {
+    text-decoration-line: underline;
+  }
+
+  /* Pressed: the underline at --border-size-2 in --primary12. */
+  .step:active .word {
+    text-decoration-line: underline;
+    text-decoration-color: var(--primary12);
+  }
+}
+
+@layer print {
+  @media print {
+    /* The pager is hidden and its links print nothing [D80]; with `items`,
+       one state line prints in its place, the full-list URL per §7.6. */
+    .base {
+      display: block;
+      margin-block-start: 0;
+    }
+
+    .prev,
+    .next,
+    .list,
+    .status,
+    .dots,
+    .more {
+      display: none;
+    }
+
+    .printLine {
+      display: block;
+      margin-block-start: var(--size-px-3);
+    }
+  }
+}

package/navigation/sidebar-nav/SidebarNav.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export declare const sidebarNav: (props?: ({
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SidebarNavVariants = VariantProps<typeof sidebarNav>;
+/** One entry of the page tree: a group (top level, with `items`), a page, or a page with subpages. */
+export interface SidebarNavItem {
+    /** The link text, authored in sentence case; a group heading sets its own caps [D165]. */
+    title: string;
+    /** The page. Omitted on a group, whose heading is then plain text. */
+    href?: string;
+    /**
+     * At the top level: the group's pages, under its caps heading. On a page:
+     * its subpages, one level deeper on an indented guide. Nest no deeper.
+     */
+    items?: readonly SidebarNavItem[];
+    /** Marks the current page. Default: its path equals `currentPath`. */
+    current?: boolean;
+    /**
+     * A collapsible group's initial state. Default: open when it holds the
+     * current page.
+     */
+    defaultOpen?: boolean;
+}
+/** Props for SidebarNav: `nav` props, the page tree, the current path and the color axes. */
+export type SidebarNavProps = Omit<React.ComponentPropsWithRef<'nav'>, 'children'> & {
+    /**
+     * The page tree: groups (a caps heading over its pages) and, rarely,
+     * top-level pages. Plain data, so the desktop column and the drawer
+     * render the same object.
+     */
+    items: readonly SidebarNavItem[];
+    /** The current page's URL path; its link takes `aria-current="page"`. */
+    currentPath?: string;
+    /** The landmark's name. Default "Documentation". */
+    label?: string;
+    /**
+     * Groups become independent Collapsibles, each heading with the D109
+     * glyph; the group holding the current page opens by default. Default
+     * `false`: every group open, no toggles.
+     */
+    collapsible?: boolean;
+    /** The toggle's accessible name for a group. Default: "{title} pages". */
+    toggleLabel?: (title: string) => string;
+    /**
+     * Builds each anchor, e.g. `(href) => <NextLink href={href} />`.
+     * Default: a plain `<a href>`.
+     */
+    renderLink?: (href: string) => React.ReactElement;
+    /** Override the scope's primary. Never defaulted [D133]. */
+    primary?: SidebarNavVariants['primary'];
+    /** Override the scope's secondary. Never defaulted. */
+    secondary?: SidebarNavVariants['secondary'];
+};
+/**
+ * The docs page tree [D202]: a `nav` of groups, each a caps heading
+ * (`type-label`, a link to the group's index page when it has one) over its
+ * pages on a --role-hairline guide, groups split by hairline rules. The
+ * current page takes `aria-current="page"`, the --border-size-2-25
+ * start-edge bar and weight 700. The same component, from the same data,
+ * fills the docs layout's column from --fgd-nav-inline-n-above and the
+ * drawer below it. On mount, and when the current page changes, the
+ * current link is scrolled into view inside the nearest scrolling
+ * ancestor (the column or the drawer's Scroll Area), never the page, so
+ * nothing moves around it. Hidden in print.
+ */
+export declare function SidebarNav(props: SidebarNavProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=SidebarNav.d.ts.map

package/navigation/sidebar-nav/SidebarNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNav.d.ts","sourceRoot":"","sources":["../../src/navigation/sidebar-nav/SidebarNav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAqCjE,eAAO,MAAM,UAAU;;;8EAMrB,CAAA;AAEF,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAA;AAEzD,sGAAsG;AACtG,MAAM,WAAW,cAAc;IAC7B,0FAA0F;IAC1F,KAAK,EAAE,MAAM,CAAA;IACb,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,cAAc,EAAE,CAAA;IACjC,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,6FAA6F;AAC7F,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF;;;;OAIG;IACH,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;IAChC,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAA;IACjD,4DAA4D;IAC5D,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAA;IACvC,uDAAuD;IACvD,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAA;CAC5C,CAAA;AAsCH;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAqEhD"}

package/navigation/sidebar-nav/SidebarNav.js

@@ -0,0 +1,169 @@
+'use client';
+import * as React from 'react';
+import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
+import { cva } from 'class-variance-authority';
+import { DisclosureGlyph, disclosureGlyphHost } from '../../disclosure/collapsible';
+import { Link } from '../../actions/link';
+import { cx } from '../../utils/className';
+import { isCurrentPath } from '../../utils/navigation';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './sidebar-nav.module.css';
+/*
+ * Sidebar Navigation (§9.15) [D202]: the docs layout's page tree, one
+ * component in the desktop column and inside the mobile drawer.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: sidebar-nav.module.css; CVA function `sidebarNav`.
+ * - Axes: `primary`, `secondary` → scales module classes.
+ * - Compound variants: none. Defaults: none; color axes none.
+ * - Color fallback: inherits the scope.
+ * - States: group headings are Link `kind="nav"` (bare text): `:hover` →
+ *   the --role-accent underline at --border-size-2 [D181];
+ *   `aria-current="page"` → the --border-size-2-25 underline and weight
+ *   700. Page links are Link `kind="nav"` with `list`: `:hover` →
+ *   --role-link-hover only (plus the underline where it is --primary12)
+ *   [D181]; `aria-current="page"` → the --border-size-2-25 start-edge bar
+ *   over the guide and weight 700, whose width every label reserves, so
+ *   the current page never rewraps a line. Collapsible Trigger
+ *   `data-panel-open` → the D109 glyph turns inward in --primary12; Panel
+ *   `data-starting-style` / `data-ending-style` → the clip reveal, instant
+ *   under --motionNotOK. `:focus-visible` → the ring, inset inside rows.
+ * - Parts: base (the nav), groups, group, headingRow, heading, toggle,
+ *   glyph, panel, list, item, link, label, labelText.
+ * - Scope: none. Container: none; its host (the docs layout's column or
+ *   the drawer's Scroll Area) sets its width.
+ * - Data: `items` is plain data ({ title, href, items }), so it can come
+ *   from the docs engine's sitemap (utils/docs `toSidebarItems`) or a CMS.
+ */
+export const sidebarNav = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+const SidebarNavContext = React.createContext({
+    collapsible: false,
+    toggleLabel: (title) => `${title} pages`,
+});
+function isCurrent(item, currentPath) {
+    return item.current ?? isCurrentPath(item.href, currentPath);
+}
+/** Whether the item or any of its descendants is the current page. */
+function holdsCurrent(item, currentPath) {
+    if (isCurrent(item, currentPath))
+        return true;
+    return item.items?.some((child) => holdsCurrent(child, currentPath)) ?? false;
+}
+/** The nearest ancestor that scrolls its block axis (never the page itself). */
+function scrollParent(element) {
+    const root = element.ownerDocument.scrollingElement;
+    let node = element.parentElement;
+    while (node != null && node !== root && node !== element.ownerDocument.body) {
+        const { overflowY } = getComputedStyle(node);
+        if ((overflowY === 'auto' || overflowY === 'scroll') && node.scrollHeight > node.clientHeight) {
+            return node;
+        }
+        node = node.parentElement;
+    }
+    return null;
+}
+/**
+ * The docs page tree [D202]: a `nav` of groups, each a caps heading
+ * (`type-label`, a link to the group's index page when it has one) over its
+ * pages on a --role-hairline guide, groups split by hairline rules. The
+ * current page takes `aria-current="page"`, the --border-size-2-25
+ * start-edge bar and weight 700. The same component, from the same data,
+ * fills the docs layout's column from --fgd-nav-inline-n-above and the
+ * drawer below it. On mount, and when the current page changes, the
+ * current link is scrolled into view inside the nearest scrolling
+ * ancestor (the column or the drawer's Scroll Area), never the page, so
+ * nothing moves around it. Hidden in print.
+ */
+export function SidebarNav(props) {
+    const { items, currentPath, label = 'Documentation', collapsible = false, toggleLabel = (title) => `${title} pages`, renderLink, primary, secondary, className, ref, ...rest } = props;
+    const scope = useScopeAttributes();
+    const navRef = React.useRef(null);
+    const setRef = React.useCallback((node) => {
+        navRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    // Bring the current page into view inside the scroller that holds the
+    // nav, never the page. A scroll offset moves nothing in layout, so it is
+    // no layout shift; in the docs layout's column, browsers with
+    // `scroll-initial-target` (its CSS) have done it before first paint.
+    React.useLayoutEffect(() => {
+        const nav = navRef.current;
+        const link = nav?.querySelector('[aria-current="page"]');
+        if (nav == null || link == null)
+            return;
+        const scroller = scrollParent(link);
+        if (scroller == null)
+            return;
+        const box = scroller.getBoundingClientRect();
+        const target = link.getBoundingClientRect();
+        if (target.top >= box.top && target.bottom <= box.bottom)
+            return;
+        scroller.scrollTop += target.top - box.top - (box.height - target.height) / 2;
+    }, [currentPath]);
+    // Rebuilt on every render: the functions are usually inline, and the tree re-renders with it anyway.
+    const context = { currentPath, collapsible, toggleLabel, renderLink };
+    return (React.createElement(SidebarNavContext.Provider, { value: context },
+        React.createElement("nav", { ...rest, ...scope, ref: setRef, "aria-label": label, className: sidebarNav({ primary, secondary, className }) },
+            React.createElement("ul", { className: styles.groups }, items.map((item) => (React.createElement("li", { key: item.href ?? item.title, className: styles.group }, item.items != null && item.items.length > 0 ? (React.createElement(SidebarNavGroup, { item: item })) : (React.createElement(SidebarNavHeading, { item: item })))))))));
+}
+/** A group heading: a caps link to the group's index page, or plain caps text. */
+function SidebarNavHeading({ item, id }) {
+    const { currentPath, renderLink } = React.useContext(SidebarNavContext);
+    if (item.href == null) {
+        return (React.createElement("span", { id: id, className: styles.heading }, item.title));
+    }
+    const current = isCurrent(item, currentPath);
+    return (React.createElement(Link, { id: id, kind: "nav", href: item.href, render: renderLink?.(item.href), "aria-current": current ? 'page' : undefined, className: styles.heading },
+        React.createElement(Label, { text: item.title })));
+}
+/** A group: its heading over its pages, open (default) or a Collapsible. */
+function SidebarNavGroup({ item }) {
+    const { currentPath, collapsible, toggleLabel } = React.useContext(SidebarNavContext);
+    const headingId = React.useId();
+    const list = React.createElement(SidebarNavList, { items: item.items ?? [], labelledBy: headingId });
+    if (!collapsible) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(SidebarNavHeading, { item: item, id: headingId }),
+            list));
+    }
+    const containsCurrent = holdsCurrent(item, currentPath);
+    return (React.createElement(BaseCollapsible.Root, { defaultOpen: item.defaultOpen ?? containsCurrent, className: styles.collapsible },
+        item.href != null ? (React.createElement("div", { className: styles.headingRow },
+            React.createElement(SidebarNavHeading, { item: item, id: headingId }),
+            React.createElement(BaseCollapsible.Trigger, { "aria-label": toggleLabel(item.title), className: cx(styles.toggle, disclosureGlyphHost) },
+                React.createElement(DisclosureGlyph, { size: "chrome", className: styles.glyph })))) : (React.createElement(BaseCollapsible.Trigger, { id: headingId, className: cx(styles.headingRow, styles.headingTrigger) },
+            React.createElement("span", { className: styles.heading }, item.title),
+            React.createElement(DisclosureGlyph, { size: "chrome", className: styles.glyph }))),
+        React.createElement(BaseCollapsible.Panel, { className: styles.panel }, list)));
+}
+/** A list of pages on the hairline guide; a page's subpages nest one level in. */
+function SidebarNavList({ items, labelledBy, }) {
+    const { currentPath, renderLink } = React.useContext(SidebarNavContext);
+    return (React.createElement("ul", { className: styles.list, "aria-labelledby": labelledBy }, items.map((item) => {
+        const current = isCurrent(item, currentPath);
+        return (React.createElement("li", { key: item.href ?? item.title, className: styles.item },
+            item.href != null ? (React.createElement(Link, { kind: "nav", list: true, href: item.href, render: renderLink?.(item.href), "aria-current": current ? 'page' : undefined, className: styles.link },
+                React.createElement(Label, { text: item.title }))) : (React.createElement("span", { className: cx(styles.link, styles.plain) },
+                React.createElement(Label, { text: item.title }))),
+            item.items != null && item.items.length > 0 ? React.createElement(SidebarNavList, { items: item.items }) : null));
+    })));
+}
+/**
+ * A label that reserves its weight-700 box: a hidden copy at weight 700
+ * shares its grid cell, so becoming current never widens or rewraps it.
+ */
+function Label({ text }) {
+    return (React.createElement("span", { className: styles.label, "data-label": text },
+        React.createElement("span", { className: styles.labelText }, text)));
+}
+//# sourceMappingURL=SidebarNav.js.map

package/navigation/sidebar-nav/SidebarNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNav.js","sourceRoot":"","sources":["../../src/navigation/sidebar-nav/SidebarNav.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC3E,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAA;AACnF,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACtD,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACzC,QAAQ,EAAE;QACR,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;CACF,CAAC,CAAA;AA8DF,MAAM,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAyB;IACpE,WAAW,EAAE,KAAK;IAClB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,QAAQ;CACzC,CAAC,CAAA;AAEF,SAAS,SAAS,CAAC,IAAoB,EAAE,WAA+B;IACtE,OAAO,IAAI,CAAC,OAAO,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAA;AAC9D,CAAC;AAED,sEAAsE;AACtE,SAAS,YAAY,CAAC,IAAoB,EAAE,WAA+B;IACzE,IAAI,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,OAAO,IAAI,CAAA;IAC7C,OAAO,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,IAAI,KAAK,CAAA;AAC/E,CAAC;AAED,gFAAgF;AAChF,SAAS,YAAY,CAAC,OAAoB;IACxC,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAA;IACnD,IAAI,IAAI,GAAG,OAAO,CAAC,aAAa,CAAA;IAChC,OAAO,IAAI,IAAI,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,OAAO,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAC5E,MAAM,EAAE,SAAS,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAA;QAC5C,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,QAAQ,CAAC,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;YAC9F,OAAO,IAAI,CAAA;QACb,CAAC;QACD,IAAI,GAAG,IAAI,CAAC,aAAa,CAAA;IAC3B,CAAC;IACD,OAAO,IAAI,CAAA;AACb,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EACJ,KAAK,EACL,WAAW,EACX,KAAK,GAAG,eAAe,EACvB,WAAW,GAAG,KAAK,EACnB,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,KAAK,QAAQ,EACjD,UAAU,EACV,OAAO,EACP,SAAS,EACT,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IAET,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAqB,IAAI,CAAC,CAAA;IAErD,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAC9B,CAAC,IAAwB,EAAE,EAAE;QAC3B,MAAM,CAAC,OAAO,GAAG,IAAI,CAAA;QACrB,IAAI,OAAO,GAAG,KAAK,UAAU;YAAE,GAAG,CAAC,IAAI,CAAC,CAAA;aACnC,IAAI,GAAG;YAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAA;IAClC,CAAC,EACD,CAAC,GAAG,CAAC,CACN,CAAA;IAED,sEAAsE;IACtE,yEAAyE;IACzE,8DAA8D;IAC9D,qEAAqE;IACrE,KAAK,CAAC,eAAe,CAAC,GAAG,EAAE;QACzB,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAA;QAC1B,MAAM,IAAI,GAAG,GAAG,EAAE,aAAa,CAAc,uBAAuB,CAAC,CAAA;QACrE,IAAI,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI;YAAE,OAAM;QACvC,MAAM,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,CAAA;QACnC,IAAI,QAAQ,IAAI,IAAI;YAAE,OAAM;QAC5B,MAAM,GAAG,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAA;QAC5C,MAAM,MAAM,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;QAC3C,IAAI,MAAM,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,MAAM;YAAE,OAAM;QAChE,QAAQ,CAAC,SAAS,IAAI,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;IAC/E,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,qGAAqG;IACrG,MAAM,OAAO,GAA2B,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,CAAA;IAE7F,OAAO,CACL,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO;QACxC,gCACM,IAAI,KACJ,KAAK,EACT,GAAG,EAAE,MAAM,gBACC,KAAK,EACjB,SAAS,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;YAExD,4BAAI,SAAS,EAAE,MAAM,CAAC,MAAM,IACzB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,4BAAI,GAAG,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,IACtD,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC7C,oBAAC,eAAe,IAAC,IAAI,EAAE,IAAI,GAAI,CAChC,CAAC,CAAC,CAAC,CACF,oBAAC,iBAAiB,IAAC,IAAI,EAAE,IAAI,GAAI,CAClC,CACE,CACN,CAAC,CACC,CACD,CACqB,CAC9B,CAAA;AACH,CAAC;AAED,kFAAkF;AAClF,SAAS,iBAAiB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAyC;IAC5E,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACvE,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC;QACtB,OAAO,CACL,8BAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IACpC,IAAI,CAAC,KAAK,CACN,CACR,CAAA;IACH,CAAC;IACD,MAAM,OAAO,GAAG,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CAAA;IAC5C,OAAO,CACL,oBAAC,IAAI,IACH,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,kBACjB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,SAAS,EAAE,MAAM,CAAC,OAAO;QAEzB,oBAAC,KAAK,IAAC,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,CACtB,CACR,CAAA;AACH,CAAC;AAED,4EAA4E;AAC5E,SAAS,eAAe,CAAC,EAAE,IAAI,EAA4B;IACzD,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACrF,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;IAC/B,MAAM,IAAI,GAAG,oBAAC,cAAc,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,UAAU,EAAE,SAAS,GAAI,CAAA;IAE/E,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO,CACL;YACE,oBAAC,iBAAiB,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,GAAI;YAC/C,IAAI,CACJ,CACJ,CAAA;IACH,CAAC;IAED,MAAM,eAAe,GAAG,YAAY,CAAC,IAAI,EAAE,WAAW,CAAC,CAAA;IACvD,OAAO,CACL,oBAAC,eAAe,CAAC,IAAI,IAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,eAAe,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW;QAClG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,CACnB,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU;YAC/B,oBAAC,iBAAiB,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,GAAI;YAChD,oBAAC,eAAe,CAAC,OAAO,kBACV,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EACnC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC;gBAEjD,oBAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,GAAI,CAClC,CACtB,CACP,CAAC,CAAC,CAAC,CACF,oBAAC,eAAe,CAAC,OAAO,IAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,cAAc,CAAC;YAC7F,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,IAAI,CAAC,KAAK,CAAQ;YACpD,oBAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,GAAI,CAClC,CAC3B;QACD,oBAAC,eAAe,CAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,IAAI,CAAyB,CACzD,CACxB,CAAA;AACH,CAAC;AAED,kFAAkF;AAClF,SAAS,cAAc,CAAC,EACtB,KAAK,EACL,UAAU,GAIX;IACC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACvE,OAAO,CACL,4BAAI,SAAS,EAAE,MAAM,CAAC,IAAI,qBAAmB,UAAU,IACpD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAClB,MAAM,OAAO,GAAG,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CAAA;QAC5C,OAAO,CACL,4BAAI,GAAG,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI;YACrD,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,CACnB,oBAAC,IAAI,IACH,IAAI,EAAC,KAAK,EACV,IAAI,QACJ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,kBACjB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,SAAS,EAAE,MAAM,CAAC,IAAI;gBAEtB,oBAAC,KAAK,IAAC,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,CACtB,CACR,CAAC,CAAC,CAAC,CACF,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC;gBAC5C,oBAAC,KAAK,IAAC,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,CACtB,CACR;YACA,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAC,cAAc,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI,CACxF,CACN,CAAA;IACH,CAAC,CAAC,CACC,CACN,CAAA;AACH,CAAC;AAED;;;GAGG;AACH,SAAS,KAAK,CAAC,EAAE,IAAI,EAAoB;IACvC,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,gBAAc,IAAI;QAC7C,8BAAM,SAAS,EAAE,MAAM,CAAC,SAAS,IAAG,IAAI,CAAQ,CAC3C,CACR,CAAA;AACH,CAAC"}

package/navigation/sidebar-nav/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SidebarNav';
+//# sourceMappingURL=index.d.ts.map

package/navigation/sidebar-nav/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/sidebar-nav/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/navigation/sidebar-nav/index.js

@@ -0,0 +1,2 @@
+export * from './SidebarNav';
+//# sourceMappingURL=index.js.map

package/navigation/sidebar-nav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/navigation/sidebar-nav/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}