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

package/navigation/nav-drawer/NavDrawer.js

@@ -0,0 +1,215 @@
+'use client';
+import * as React from 'react';
+import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { cva } from 'class-variance-authority';
+import { DisclosureGlyph } from '../../disclosure/collapsible';
+import { Dialog } from '../../overlays/dialog';
+import { Ground } from '../../foundations/ground';
+import { Icon } from '../../foundations/icon';
+import { link } from '../../actions/link';
+import { NavigationBarContext } from '../navigation-bar';
+import { ScrollArea } from '../../data/scroll-area';
+import { holdsCurrent, isCurrentPath, listItems } from '../../utils/navigation';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { isBandPreset, useScope } from '../../utils/scope';
+import styles from './nav-drawer.module.css';
+/*
+ * Mobile Navigation Drawer (§11.6) [D97, D183]: primary navigation below
+ * --ds-nav-inline-n-above, on the Dialog.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: nav-drawer.module.css; CVA function `navigationDrawer`.
+ * - Axes: `primary`, `secondary` → scales module classes, applied through
+ *   the sheet's Ground. The sheet form (full or side) follows the viewport
+ *   through the module's --md-n-above query, not an axis.
+ * - Compound variants: none. Defaults: none; color axes none.
+ * - Color fallback: the header's scope through React context (the
+ *   Navigation Bar's preset and overrides); the action is the §9.2 `solid`
+ *   Button on that scope's action scale.
+ * - States: Dialog Popup `data-starting-style` → the clip reveal from the
+ *   top (full sheet) or the docked edge (side sheet), instant under
+ *   --motionNotOK; Collapsible Panel the same from its top; menu Button
+ *   `data-popup-open` → × plus "Close"; Collapsible Trigger
+ *   `data-panel-open` → the D109 glyph turns inward in --primary12;
+ *   `aria-current` → the --ds-stroke-3 start-edge bar (weight 700 on
+ *   links); `:hover` [D181] → group rows and direct links take the
+ *   bare-text underline; child (panel) and footer links are §9.3 list
+ *   links (Link's `kind="nav"` with `list`), color only, plus the
+ *   underline where --role-link-hover resolves to --primary12; the menu
+ *   Button and close control take the `text` Button hover;
+ *   `:focus-visible` → the ring, inset inside rows.
+ * - Parts: base (the sheet), bar, logo, logoMark, close, closeLabel, scroll,
+ *   nav, list, item, groupRow, rowLabel, glyph, panel, childList (the
+ *   indent guide), childLink, directLink, linkLabel, footer, footerAction,
+ *   footerList, footerLink, footerLocale, menuTrigger, menuLabel.
+ * - Scope: the portaled sheet re-declares the header's scope as a
+ *   `kind="band"` Ground of its preset (Ground writes `data-theme` as on
+ *   the header); never a `white` overlay scope [D97, D148].
+ * - Container: none; page frame on the viewport custom media.
+ * - Data: `sections` takes the shared navigation data (utils/navigation),
+ *   the object that also builds the Navigation Menu panels and the footer
+ *   sitemap [D187].
+ */
+export const navigationDrawer = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted [D133]; the sheet's Ground applies them.
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+const DrawerContext = React.createContext({});
+/**
+ * Link's list-link build (`kind="nav"` with `list`) for the child (panel)
+ * and footer links: its color-only hover, press and ring [D181].
+ */
+const listLink = link({ kind: 'nav', list: true });
+/** Where a drawer link sits: a top-level row, inside a group, or in the footer. */
+const PlacementContext = React.createContext('top');
+const ROW = 'a[href], button:not([disabled])';
+/** The inline bar item matching the drawer's last open group, else the bar's first item. */
+function findInlineItem(trigger, sheet) {
+    const header = trigger.closest('header') ?? trigger.ownerDocument.body;
+    const items = Array.from(header.querySelectorAll(`[data-navigation-menu] :is(${ROW})`));
+    const openRows = sheet ? Array.from(sheet.querySelectorAll('[data-panel-open]')) : [];
+    const wanted = openRows.at(-1)?.textContent?.trim().toLowerCase();
+    const match = wanted ? items.find((item) => item.textContent?.trim().toLowerCase() === wanted) : undefined;
+    return match ?? items[0] ?? null;
+}
+/**
+ * The navigation drawer below --ds-nav-inline-n-above [D183]: the menu
+ * Button (the `menu` icon plus "Menu"; × plus "Close" while open) and a
+ * modal Dialog sheet in the header's own scope, full screen below
+ * --md-n-above and a 480 px side sheet with a --ds-stroke-3 inner edge
+ * from it. The sheet repeats the header's bar with the close control where
+ * the menu Button was, lists independent Collapsible groups and direct
+ * links in a Scroll Area, and keeps its footer fixed. Focus moves to the
+ * first row, is trapped, and returns to the menu Button; no backdrop is
+ * painted. If the viewport reaches the inline threshold while open, it
+ * closes and focus goes to the matching bar item. Put it in the Navigation
+ * Bar's `drawer` slot.
+ */
+export function NavDrawer(props) {
+    const { sections, children, footer, label = 'Menu', closeLabel = 'Close', navLabel = 'Main', logo: logoProp, logoHref: logoHrefProp, logoLabel: logoLabelProp, currentPath: currentPathProp, open: openProp, defaultOpen = false, onOpenChange, primary, secondary, className, triggerClassName, } = props;
+    const bar = React.useContext(NavigationBarContext);
+    const scope = useScope();
+    const preset = bar?.preset ?? (isBandPreset(scope.ground) ? scope.ground : 'paper');
+    const logo = logoProp ?? bar?.logo;
+    const logoHref = logoHrefProp ?? bar?.logoHref ?? '/';
+    const logoLabel = logoLabelProp ?? bar?.logoLabel;
+    const currentPath = currentPathProp ?? bar?.currentPath;
+    const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
+    const open = openProp ?? innerOpen;
+    const setOpen = React.useCallback((next) => {
+        onOpenChange?.(next);
+        if (openProp === undefined)
+            setInnerOpen(next);
+    }, [onOpenChange, openProp]);
+    const triggerRef = React.useRef(null);
+    const sheetRef = React.useRef(null);
+    const listRef = React.useRef(null);
+    const returnTarget = React.useRef(null);
+    // From the inline threshold the Navigation Bar hides the menu Button:
+    // close, and send focus to the matching bar item [D183].
+    React.useEffect(() => {
+        if (!open)
+            return undefined;
+        const check = () => {
+            const trigger = triggerRef.current;
+            if (trigger && trigger.getClientRects().length === 0) {
+                returnTarget.current = findInlineItem(trigger, sheetRef.current);
+                setOpen(false);
+            }
+        };
+        window.addEventListener('resize', check);
+        return () => window.removeEventListener('resize', check);
+    }, [open, setOpen]);
+    const context = React.useMemo(() => ({ currentPath }), [currentPath]);
+    return (React.createElement(DrawerContext.Provider, { value: context },
+        React.createElement(Dialog, { open: open, onOpenChange: (next) => setOpen(next) },
+            React.createElement(BaseDialog.Trigger, { ref: triggerRef, className: cx(styles.menuTrigger, triggerClassName) },
+                React.createElement(Icon, { name: open ? 'close' : 'menu', size: "tag", weight: "interactive", className: styles.menuIcon }),
+                React.createElement("span", { className: styles.menuLabel }, open ? closeLabel : label)),
+            React.createElement(BaseDialog.Portal, null,
+                React.createElement(BaseDialog.Popup, { ref: sheetRef, "aria-label": label, initialFocus: () => listRef.current?.querySelector(ROW) ?? true, finalFocus: () => {
+                        const target = returnTarget.current;
+                        returnTarget.current = null;
+                        return target ?? true;
+                    }, className: navigationDrawer({ className }), render: React.createElement(Ground, { kind: "band", preset: preset, primary: primary ?? bar?.primary, secondary: secondary ?? bar?.secondary, render: React.createElement("div", null) }) },
+                    React.createElement("div", { className: styles.bar },
+                        logo != null ? (React.createElement("a", { className: styles.logo, href: logoHref, "aria-label": logoLabel },
+                            React.createElement("span", { className: styles.logoMark }, logo))) : null,
+                        React.createElement(BaseDialog.Close, { className: styles.close },
+                            React.createElement(Icon, { name: "close", size: "tag", weight: "interactive", className: styles.menuIcon }),
+                            React.createElement("span", { className: styles.closeLabel }, closeLabel))),
+                    React.createElement(ScrollArea, { className: styles.scroll },
+                        React.createElement("nav", { "aria-label": navLabel, className: styles.nav },
+                            React.createElement("ul", { ref: listRef, className: styles.list }, listItems([sections?.map(sectionRow), children], styles.item)))),
+                    footer)))));
+}
+/** One top-level row from the navigation data: a group with its links, or a direct link. */
+function sectionRow(section) {
+    const key = section.href ?? section.label;
+    if (section.links.length === 0) {
+        return section.href != null ? (React.createElement(NavDrawerLink, { key: key, href: section.href }, section.label)) : null;
+    }
+    return (React.createElement(NavDrawerGroup, { key: key, label: section.label },
+        section.href != null ? React.createElement(NavDrawerLink, { href: section.href }, section.label) : null,
+        section.links.map((link) => (React.createElement(NavDrawerLink, { key: link.href + link.label, href: link.href, active: link.current ? true : undefined }, link.label)))));
+}
+/**
+ * One top-level group: an independent Collapsible whose trigger row shows
+ * LTA's expand/collapse glyph [D109] (outward in --role-muted, inward in
+ * --primary12 when open; it swaps, never rotates), over its child links on
+ * an indent guide. A group holding the current page opens by default and
+ * its row takes the start-edge bar (`aria-current="true"`).
+ */
+export function NavDrawerGroup(props) {
+    const { label, defaultOpen, className, children, ...rest } = props;
+    const { currentPath } = React.useContext(DrawerContext);
+    const containsCurrent = holdsCurrent(children, currentPath);
+    return (React.createElement(BaseCollapsible.Root, { ...rest, defaultOpen: defaultOpen ?? containsCurrent, className: resolveClassName(className, (extra) => cx(styles.group, extra)) },
+        React.createElement(BaseCollapsible.Trigger, { ...(containsCurrent ? { 'aria-current': 'true' } : {}), className: styles.groupRow },
+            React.createElement("span", { className: styles.rowLabel }, label),
+            React.createElement(DisclosureGlyph, { size: "row", className: styles.glyph })),
+        React.createElement(BaseCollapsible.Panel, { className: styles.panel },
+            React.createElement(PlacementContext.Provider, { value: "group" },
+                React.createElement("ul", { className: styles.childList }, listItems(children, styles.childItem))))));
+}
+/**
+ * A drawer link. At the top level it is a direct link, styled as a group
+ * row without the glyph (the bare-text underline on hover); in a group, a
+ * `type-body-ui` child link on the indent guide; in the footer, a utility
+ * link. Child and footer links are list links, whose hover is color only
+ * [D181]. The current page takes `aria-current="page"`, the --ds-stroke-3
+ * start-edge bar and weight 700.
+ */
+export function NavDrawerLink(props) {
+    const { active, href, className, children, ...rest } = props;
+    const { currentPath } = React.useContext(DrawerContext);
+    const placement = React.useContext(PlacementContext);
+    const current = active ?? isCurrentPath(href, currentPath);
+    const part = placement === 'group'
+        ? cx(listLink, styles.childLink)
+        : placement === 'footer'
+            ? cx(listLink, styles.footerLink)
+            : styles.directLink;
+    return (React.createElement("a", { ...(current ? { 'aria-current': 'page' } : {}), ...rest, href: href, className: cx(part, className) },
+        React.createElement("span", { className: styles.linkLabel }, children)));
+}
+/**
+ * The drawer's fixed footer zone, under a --border-size-2 --role-rule: the
+ * primary pill first (where the header's action goes below 480 px), then
+ * the utility links at a --ds-size-hit pitch, then the locale Select. Put
+ * it in the drawer's `footer`.
+ */
+export function NavDrawerFooter(props) {
+    const { action, locale, className, children, ...rest } = props;
+    return (React.createElement("div", { ...rest, className: cx(styles.footer, className) },
+        action != null ? React.createElement("div", { className: styles.footerAction }, action) : null,
+        children != null ? (React.createElement(PlacementContext.Provider, { value: "footer" },
+            React.createElement("ul", { className: styles.footerList }, listItems(children, styles.childItem)))) : null,
+        locale != null ? React.createElement("div", { className: styles.footerLocale }, locale) : null));
+}
+//# sourceMappingURL=NavDrawer.js.map

package/navigation/nav-drawer/NavDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavDrawer.js","sourceRoot":"","sources":["../../src/navigation/nav-drawer/NavDrawer.tsx"],"names":[],"mappings":"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"}

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

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

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

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

package/navigation/nav-drawer/nav-drawer.module.css

@@ -0,0 +1,446 @@
+/*
+ * Mobile Navigation Drawer (§11.6). CVA function `navigationDrawer` in
+ * NavDrawer.tsx. The sheet (`base`) is the Dialog Popup rendered as a
+ * `kind="band"` Ground of the header's preset, so it takes the header's
+ * ground and mode, never a `white` overlay scope [D97, D148].
+ *
+ * Parts: base, bar, logo, logoMark, close, closeLabel, scroll, nav, list,
+ * item, group, groupRow, rowLabel, glyph (the Collapsible module's D109
+ * glyph), panel, childList (the indent guide), childItem, childLink,
+ * directLink, linkLabel, footer, footerAction, footerList, footerLink,
+ * footerLocale, menuTrigger, menuIcon, menuLabel.
+ *
+ * No backdrop or tint [D24 → D121]: the full sheet hides the page; the side
+ * sheet leaves it unpainted and inert. Motion is a clip reveal, never a
+ * fade [D91]. Colors are role variables only; local custom properties carry
+ * dimensions only (--nav-drawer-clip-from, a clip shape).
+ */
+
+/* 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. */
+.menuTrigger {
+  composes: typeButtonSm from '../../utils/type.module.css';
+  composes: iconHost from '../../foundations/icon/icon.module.css';
+}
+
+.close {
+  composes: typeButtonSm from '../../utils/type.module.css';
+  composes: iconHost from '../../foundations/icon/icon.module.css';
+}
+
+.groupRow {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.directLink {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.childLink {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.footerLink {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+@layer base {
+  /* ── The menu Button (in the header) ──────────────────────────────── */
+
+  /* The `menu` icon at the header tier (tag, 20 px) plus "Menu", --size-px-2 apart. */
+  .menuTrigger,
+  .close {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    box-sizing: border-box;
+    min-block-size: var(--ds-size-hit);
+    min-inline-size: var(--ds-size-hit);
+    margin: 0;
+    padding-block: 0;
+    padding-inline: var(--size-px-1);
+    border: 0;
+    border-radius: var(--radius-1);
+    background: none;
+    color: var(--primary12);
+    white-space: nowrap;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .menuIcon {
+    flex: none;
+  }
+
+  .menuLabel,
+  .closeLabel {
+    text-decoration-color: var(--role-accent);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  /* Stack guard: below 360 px the label may drop; it stays the accessible name [D73]. */
+  @media (max-width: 359.98px) {
+    .menuLabel {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
+
+  /* ── The sheet's bar: it repeats the header ────────────────────────── */
+
+  .bar {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-3);
+    box-sizing: content-box;
+    block-size: var(--ds-size-control-xl);
+    padding-inline: var(--ds-space-margin);
+    border-block-end: var(--border-size-1) solid var(--role-rule);
+  }
+
+  .logo {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    min-block-size: var(--ds-size-hit);
+    color: var(--primary12);
+    text-decoration-line: none;
+  }
+
+  .logoMark {
+    display: inline-flex;
+    align-items: center;
+    block-size: var(--size-px-6);
+  }
+
+  .logoMark > * {
+    display: block;
+    inline-size: auto;
+    block-size: 100%;
+  }
+
+  /* The close control sits exactly where the menu Button was (Matic). */
+  .close {
+    margin-inline-start: auto;
+  }
+
+  /* ── The list ──────────────────────────────────────────────────────── */
+
+  .nav,
+  .group {
+    display: block;
+  }
+
+  .list,
+  .childList,
+  .footerList {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .item {
+    display: block;
+  }
+
+  /* Row rules between top-level rows, indented to the content column; none after the last. */
+  .item:not(:first-child)::before {
+    content: '';
+    display: block;
+    margin-inline: var(--ds-space-margin);
+    border-block-start: var(--border-size-1) solid var(--role-hairline);
+  }
+
+  /* Group rows and direct links: the display serif at a --ds-size-control-xl pitch [D60]. */
+  .groupRow,
+  .directLink {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-3);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--ds-size-control-xl);
+    margin: 0;
+    padding-block: 0;
+    padding-inline: var(--ds-space-margin);
+    border: 0;
+    background: none;
+    color: var(--primary12);
+    text-align: start;
+    text-decoration-line: none;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .groupRow {
+    justify-content: space-between;
+  }
+
+  /* The current bar at the row's start edge: a border, so it survives forced colors. */
+  .groupRow::before,
+  .directLink::before,
+  .childLink::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    border-inline-start: 0 solid var(--primary12);
+    pointer-events: none;
+  }
+
+  .rowLabel,
+  .linkLabel {
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  /* The D109 glyph, right-aligned at the header's icon tier (20 px at --ds-stroke-1-5). */
+  .glyph {
+    flex: none;
+  }
+
+  /* The clip reveal (§1.5.15) [D91]: the panel wipes open; never faded. */
+  .panel {
+    block-size: var(--collapsible-panel-height);
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  /* Child links sit on a --border-size-1 --role-hairline indent guide, --size-px-5 in. */
+  .childList {
+    margin-inline-start: calc(var(--ds-space-margin) + var(--size-px-5));
+    margin-inline-end: var(--ds-space-margin);
+    margin-block-end: var(--size-px-5);
+    border-inline-start: var(--border-size-1) solid var(--role-hairline);
+  }
+
+  .childItem {
+    display: block;
+  }
+
+  /* Family and weight carry the hierarchy, not size (type-body-ui at 400). */
+  .childLink {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: var(--ds-size-hit);
+    padding-inline: var(--size-px-3);
+    color: var(--primary12);
+    text-decoration-line: none;
+  }
+
+  /* The child's current bar lies over the indent guide. */
+  .childLink::before {
+    inset-inline-start: calc(-1 * var(--border-size-1));
+  }
+
+  /* ── The footer: fixed under the list ──────────────────────────────── */
+
+  .footer {
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ds-space-12);
+    padding-block: var(--size-px-3);
+    padding-inline: var(--ds-space-margin);
+    border-block-start: var(--border-size-2) solid var(--role-rule);
+  }
+
+  .footerAction,
+  .footerLocale {
+    display: flex;
+  }
+
+  .footerList {
+    align-self: stretch;
+  }
+
+  .footerLink {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-block-size: var(--ds-size-hit);
+    color: var(--primary12);
+    text-decoration-line: none;
+  }
+
+  /* Hover transitions [D181]: color only, --ds-duration-quick. */
+  @media (prefers-reduced-motion: no-preference) {
+    .menuLabel,
+    .closeLabel,
+    .rowLabel,
+    .linkLabel {
+      transition-property: color, text-decoration-color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    .panel {
+      transition-property: block-size;
+      transition-duration: var(--ds-duration-disclosure);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /*
+   * The sheet. Written in the variants layer so it outranks the composed
+   * Ground's own base-layer display. Base: full screen, opaque, no border
+   * [D24 → D121], revealed from the top.
+   */
+  .base {
+    --nav-drawer-clip-from: inset(0 0 100% 0);
+
+    position: fixed;
+    inset: 0;
+    z-index: var(--layer-4);
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    margin: 0;
+    clip-path: inset(0);
+  }
+
+  /* From --md-n-above: a --size-sm side sheet docked at the trigger's (end) edge, --ds-stroke-3 inner edge [D92]. */
+  @media (min-width: 768px) {
+    .base {
+      --nav-drawer-clip-from: inset(0 0 0 100%);
+
+      inset-inline-start: auto;
+      inline-size: min(var(--size-sm), 100%);
+      border-inline-start: var(--ds-stroke-3) solid var(--primary12);
+    }
+
+    .base:dir(rtl) {
+      --nav-drawer-clip-from: inset(0 100% 0 0);
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .base {
+      transition-property: clip-path;
+      transition-duration: var(--ds-duration-disclosure);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer compounds {
+  /* The list scrolls between the fixed bar and footer; the Scroll Area's 50dvh cap gives way. */
+  .scroll {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    max-block-size: none;
+  }
+
+  /* Child and footer links fill their row: a block flex box, over Link's inline `nav` row. */
+  .childLink,
+  .footerLink {
+    display: flex;
+  }
+}
+
+@layer states {
+  /* The menu Button and close control: the `text` Button hover [D181]. */
+  .menuTrigger:hover .menuLabel,
+  .close:hover .closeLabel {
+    color: var(--role-link-hover);
+    text-decoration-line: var(--ds-link-hover-line);
+  }
+
+  /* Pressed: the inverse pair (§9.2). */
+  .menuTrigger:active,
+  .close:active {
+    background-color: var(--primary12);
+    color: var(--role-inverse);
+  }
+
+  /*
+   * Group rows and direct links: the bare-text underline, --role-accent at
+   * --border-size-2 [D181]. Child and footer links are Link list links,
+   * whose color-only hover Link owns.
+   */
+  .groupRow:hover .rowLabel,
+  .directLink:hover .linkLabel {
+    text-decoration-line: underline;
+  }
+
+  @media (forced-colors: active) {
+    .menuTrigger:hover .menuLabel,
+    .close:hover .closeLabel {
+      text-decoration-line: underline;
+    }
+  }
+
+  .menuTrigger:focus-visible,
+  .close:focus-visible,
+  .logo:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  /* Rows: the ring inset inside the row (the list parent raises the list links' over Link's ring). */
+  .groupRow:focus-visible,
+  .directLink:focus-visible,
+  .childList .childLink:focus-visible,
+  .footerList .footerLink:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: calc(-1 * var(--border-size-2));
+  }
+
+  /* Current: the --ds-stroke-3 start-edge bar; links also take weight 700 [D15]. */
+  .groupRow[aria-current='true']::before,
+  .directLink[aria-current='page']::before,
+  .childLink[aria-current='page']::before {
+    border-inline-start-width: var(--ds-stroke-3);
+  }
+
+  .childLink[aria-current='page'],
+  .directLink[aria-current='page'],
+  .footerLink[aria-current='page'] {
+    font-weight: var(--font-weight-7);
+  }
+
+  /* The start-edge bar replaces Link's current underline; the list parent raises these over Link's rule. */
+  .childList .childLink[aria-current='page'],
+  .footerList .footerLink[aria-current='page'] {
+    text-decoration-line: none;
+  }
+
+  .panel[data-starting-style],
+  .panel[data-ending-style] {
+    block-size: 0;
+  }
+
+  /* The sheet's clip reveal: from the top (full sheet) or the docked edge (side sheet). */
+  .base[data-starting-style] {
+    clip-path: var(--nav-drawer-clip-from);
+  }
+
+  /* Focus parked on the sheet itself (opened by touch): the ring sits inside. */
+  .base:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: calc(-2 * var(--border-size-2));
+  }
+}
+
+@layer print {
+  @media print {
+    /* Hidden, even if it is open when the user prints (§11.6). */
+    .base,
+    .menuTrigger {
+      display: none;
+    }
+  }
+}