@fairgarden/design 0.1.0-alpha.0

package/components/NavigationBar/NavigationBar.js

@@ -0,0 +1,224 @@
+'use client';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Ground } from '../Ground';
+import { NavigationMenuFrameContext, isCurrentPath, } from '../NavigationMenu';
+import { cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { isBandPreset, useScope } from '../../utils/scope';
+import styles from './navigation-bar.module.css';
+/*
+ * Navigation Bar (§11.5) [D182, D183], with the brand strip and utility bar
+ * (§11.3): the site header on every page.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: navigation-bar.module.css; CVA function `navigationBar`.
+ * - Axes: `masthead` → `masthead` (wordmark row over a caps nav row,
+ *   --border-size-2 top rule); `ruled` → `ruled` (vertical --border-size-1
+ *   rules between items); `compact` → `compact` (the docked header: brand
+ *   drawing and utility row dropped; triggers, search and action kept, at
+ *   the same height) [D183]; `primary`, `secondary` → scales module
+ *   classes, applied through the header's Ground.
+ * - Compound variants: none.
+ * - Defaults: masthead false, ruled false, compact false; color axes none.
+ * - Color fallback: inherits the scope; the action is the §9.2 `solid`
+ *   Button on the scope's action scale; the strip passes secondary green.
+ * - States: item states are the Navigation Menu's (§9.6); `data-docked`
+ *   (written by the sticky observer) → the frame fixed at the top edge on
+ *   --layer-2, swapped in by a --ds-duration-quick clip cut; utility links
+ *   `:hover` → the bare-text underline [D181], `aria-current="page"` → the
+ *   --ds-stroke-3 bar; `:focus-visible` → the ring.
+ * - Parts: base, frame, skipLink, strip, utility (utilityInner, slot,
+ *   utilityNav, utilityList, utilityLink, utilityLabel, locale), bar,
+ *   inner, logo, logoMark, brandDrawing, nav, tools, iconButtons, action,
+ *   menuSlot. Items, triggers, panels and dropdowns are the Navigation
+ *   Menu's; the menu trigger is the drawer's (§11.6).
+ * - Scope: the root is a `kind="band"` Ground (a page ground, or `night`
+ *   only over the night media hero) [D178]. Panels are portaled `white`
+ *   scopes (§9.6).
+ * - Container: none; page frame on the viewport custom media
+ *   --ds-nav-inline-n-above [D183].
+ */
+export const navigationBar = cva(styles.base, {
+    variants: {
+        masthead: {
+            true: styles.masthead,
+        },
+        ruled: {
+            true: styles.ruled,
+        },
+        compact: {
+            true: styles.compact,
+        },
+        // Color axes: never defaulted [D133]; the header's Ground applies them.
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        masthead: false,
+        ruled: false,
+        compact: false,
+    },
+});
+/** Provided by NavigationBar; read by NavDrawer and the utility links. */
+export const NavigationBarContext = React.createContext(null);
+NavigationBarContext.displayName = 'NavigationBarContext';
+/**
+ * The site header: a skip link first, the green brand strip, an optional
+ * utility row, then the bar holding the logo (a home link), the Navigation
+ * Menu (from --ds-nav-inline-n-above), icon Buttons, the one action and,
+ * below the threshold, the drawer's menu Button. It is opaque, ruled at the
+ * bottom in --role-rule, 56 px tall (64 px from --lg-n-above), and its
+ * items never wrap: overflow goes to the utility row, then a "More" item
+ * [D183]. It prints as the §7.8 masthead's logo only.
+ */
+export function NavigationBar(props) {
+    const { preset: presetProp, primary, secondary, logo, logoLabel, logoHref = '/', brandDrawing, utility, children, search, action, drawer, currentPath, skipHref = '#main', skipLabel = 'Skip to main content', masthead, ruled, compact, dock = 'none', sentinelRef, onDockChange, className, style, ref, ...rest } = props;
+    const scope = useScope();
+    const preset = presetProp ?? (isBandPreset(scope.ground) ? scope.ground : 'paper');
+    const rootRef = React.useRef(null);
+    const frameRef = React.useRef(null);
+    const barRef = React.useRef(null);
+    const innerRef = React.useRef(null);
+    const [docked, setDocked] = React.useState(false);
+    const [flowSize, setFlowSize] = React.useState(null);
+    // The in-flow height, held by the root while the frame is docked, so the page never jumps.
+    React.useEffect(() => {
+        const frame = frameRef.current;
+        if (!frame || docked || dock === 'none')
+            return undefined;
+        const measure = () => setFlowSize(frame.getBoundingClientRect().height);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(frame);
+        return () => observer.disconnect();
+    }, [docked, dock]);
+    // Pinned: dock after 50vh of scroll, stay until the header's place is back in view [D183].
+    React.useEffect(() => {
+        if (dock !== 'pinned')
+            return undefined;
+        const update = () => {
+            const root = rootRef.current;
+            if (!root)
+                return;
+            const top = root.getBoundingClientRect().top;
+            setDocked((was) => was ? top < 0 : top < 0 && window.scrollY >= window.innerHeight / 2);
+        };
+        update();
+        window.addEventListener('scroll', update, { passive: true });
+        window.addEventListener('resize', update);
+        return () => {
+            window.removeEventListener('scroll', update);
+            window.removeEventListener('resize', update);
+        };
+    }, [dock]);
+    // Swap: past the section bar's sentinel, upward scroll docks the header, downward restores the bar [D89, D183].
+    React.useEffect(() => {
+        if (dock !== 'swap')
+            return undefined;
+        const sentinel = sentinelRef?.current;
+        if (!sentinel)
+            return undefined;
+        let past = false;
+        let lastY = window.scrollY;
+        const observer = new IntersectionObserver(([entry]) => {
+            past = !entry.isIntersecting && entry.boundingClientRect.top < 0;
+            if (!past)
+                setDocked(false);
+        });
+        observer.observe(sentinel);
+        const onScroll = () => {
+            const y = window.scrollY;
+            const delta = y - lastY;
+            lastY = y;
+            if (past && delta !== 0)
+                setDocked(delta < 0);
+        };
+        window.addEventListener('scroll', onScroll, { passive: true });
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('scroll', onScroll);
+        };
+    }, [dock, sentinelRef]);
+    React.useEffect(() => {
+        if (dock === 'none')
+            setDocked(false);
+    }, [dock]);
+    const onDockChangeRef = React.useRef(onDockChange);
+    onDockChangeRef.current = onDockChange;
+    const reported = React.useRef(false);
+    React.useEffect(() => {
+        if (reported.current === docked)
+            return;
+        reported.current = docked;
+        onDockChangeRef.current?.(docked);
+    }, [docked]);
+    const frame = React.useMemo(() => ({ anchorRef: barRef, boundaryRef: innerRef, currentPath }), [currentPath]);
+    const barContext = React.useMemo(() => ({
+        preset,
+        primary: primary ?? undefined,
+        secondary: secondary ?? undefined,
+        logo,
+        logoHref,
+        logoLabel,
+        currentPath,
+    }), [preset, primary, secondary, logo, logoHref, logoLabel, currentPath]);
+    const setRootRef = React.useCallback((node) => {
+        rootRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const rootStyle = docked && flowSize != null
+        ? { ...style, '--navigation-bar-flow-size': `${flowSize}px` }
+        : style;
+    return (React.createElement(NavigationBarContext.Provider, { value: barContext },
+        React.createElement(NavigationMenuFrameContext.Provider, { value: frame },
+            React.createElement(Ground, { ...rest, kind: "band", preset: preset, primary: primary ?? undefined, secondary: secondary ?? undefined, render: React.createElement("header", null), ref: setRootRef, style: rootStyle, "data-docked": docked ? '' : undefined, className: navigationBar({ masthead, ruled, compact: compact || docked, className }) },
+                React.createElement("div", { ref: frameRef, className: styles.frame },
+                    React.createElement("a", { className: styles.skipLink, href: skipHref }, skipLabel),
+                    React.createElement("div", { className: cx(styles.strip, secondaryScaleVariants.green), "aria-hidden": "true" }),
+                    utility,
+                    React.createElement("div", { ref: barRef, className: styles.bar },
+                        React.createElement("div", { ref: innerRef, className: styles.inner },
+                            React.createElement("a", { className: styles.logo, href: logoHref, "aria-label": logoLabel },
+                                React.createElement("span", { className: styles.logoMark }, logo),
+                                brandDrawing != null ? (React.createElement("span", { className: styles.brandDrawing, "aria-hidden": "true" }, brandDrawing)) : null),
+                            children != null ? React.createElement("div", { className: styles.nav }, children) : null,
+                            React.createElement("div", { className: styles.tools },
+                                search != null ? React.createElement("div", { className: styles.iconButtons }, search) : null,
+                                action != null ? React.createElement("div", { className: styles.action }, action) : null,
+                                drawer != null ? React.createElement("div", { className: styles.menuSlot }, drawer) : null))))))));
+}
+/**
+ * The 36 px utility row above the bar (§11.3): secondary destinations as
+ * text links in a `nav` labelled "Utility", divided from the bar by a
+ * --role-hairline rule, aligned to --ds-container-content. Shown from
+ * --ds-nav-inline-n-above (below it, repeat its links in the drawer
+ * footer); the compact docked header drops it [D183]. Put it in the bar's
+ * `utility` slot.
+ */
+export function NavigationBarUtility(props) {
+    const { start, locale, label = 'Utility', className, children, ...rest } = props;
+    return (React.createElement("div", { className: cx(styles.utility, className) },
+        React.createElement("div", { className: styles.utilityInner },
+            start != null ? React.createElement("div", { className: styles.slot }, start) : null,
+            React.createElement("nav", { ...rest, "aria-label": label, className: styles.utilityNav },
+                React.createElement("ul", { className: styles.utilityList }, React.Children.map(children, (child) => child == null || child === false ? null : React.createElement("li", { className: styles.utilityItem }, child)))),
+            locale != null ? React.createElement("div", { className: styles.locale }, locale) : null)));
+}
+/**
+ * A utility link: `type-label` caps, no rest underline, the bare-text
+ * underline on hover [D181], a 24 px target at a 24 px pitch (the §1.5.12
+ * utility exemption). The current page (its path equals the bar's
+ * `currentPath`) takes `aria-current="page"` and the --ds-stroke-3 bar.
+ */
+export function NavigationBarUtilityLink(props) {
+    const { href, className, children, ...rest } = props;
+    const bar = React.useContext(NavigationBarContext);
+    const current = isCurrentPath(href, bar?.currentPath);
+    return (React.createElement("a", { ...(current ? { 'aria-current': 'page' } : {}), ...rest, href: href, className: cx(styles.utilityLink, className) },
+        React.createElement("span", { className: styles.utilityLabel }, children)));
+}
+//# sourceMappingURL=NavigationBar.js.map

package/components/NavigationBar/NavigationBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationBar.js","sourceRoot":"","sources":["../../src/components/NavigationBar/NavigationBar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EACL,0BAA0B,EAC1B,aAAa,GAEd,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAA;AAC1C,OAAO,EACL,oBAAoB,EACpB,sBAAsB,GAGvB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAmB,MAAM,mBAAmB,CAAA;AAC3E,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IAC5C,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,IAAI,EAAE,MAAM,CAAC,QAAQ;SACtB;QACD,KAAK,EAAE;YACL,IAAI,EAAE,MAAM,CAAC,KAAK;SACnB;QACD,OAAO,EAAE;YACP,IAAI,EAAE,MAAM,CAAC,OAAO;SACrB;QACD,wEAAwE;QACxE,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,eAAe,EAAE;QACf,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,KAAK;KACf;CACF,CAAC,CAAA;AAkBF,0EAA0E;AAC1E,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC,aAAa,CAAmC,IAAI,CAAC,CAAA;AAC/F,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAA;AAiEzD;;;;;;;;GAQG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EACJ,MAAM,EAAE,UAAU,EAClB,OAAO,EACP,SAAS,EACT,IAAI,EACJ,SAAS,EACT,QAAQ,GAAG,GAAG,EACd,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,MAAM,EACN,MAAM,EACN,MAAM,EACN,WAAW,EACX,QAAQ,GAAG,OAAO,EAClB,SAAS,GAAG,sBAAsB,EAClC,QAAQ,EACR,KAAK,EACL,OAAO,EACP,IAAI,GAAG,MAAM,EACb,WAAW,EACX,YAAY,EACZ,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IAET,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,MAAM,GAAe,UAAU,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAE9F,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAqB,IAAI,CAAC,CAAA;IACtD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAA;IAC1D,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAA;IACxD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAA;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgB,IAAI,CAAC,CAAA;IAEnE,2FAA2F;IAC3F,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAA;QAC9B,IAAI,CAAC,KAAK,IAAI,MAAM,IAAI,IAAI,KAAK,MAAM;YAAE,OAAO,SAAS,CAAA;QACzD,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC,CAAA;QACvE,OAAO,EAAE,CAAA;QACT,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,CAAA;QAC5C,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QACvB,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;IACpC,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAA;IAElB,2FAA2F;IAC3F,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,IAAI,KAAK,QAAQ;YAAE,OAAO,SAAS,CAAA;QACvC,MAAM,MAAM,GAAG,GAAG,EAAE;YAClB,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;YAC5B,IAAI,CAAC,IAAI;gBAAE,OAAM;YACjB,MAAM,GAAG,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAA;YAC5C,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAChB,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,WAAW,GAAG,CAAC,CACpE,CAAA;QACH,CAAC,CAAA;QACD,MAAM,EAAE,CAAA;QACR,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;QAC5D,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QACzC,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;YAC5C,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QAC9C,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,gHAAgH;IAChH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,IAAI,KAAK,MAAM;YAAE,OAAO,SAAS,CAAA;QACrC,MAAM,QAAQ,GAAG,WAAW,EAAE,OAAO,CAAA;QACrC,IAAI,CAAC,QAAQ;YAAE,OAAO,SAAS,CAAA;QAC/B,IAAI,IAAI,GAAG,KAAK,CAAA;QAChB,IAAI,KAAK,GAAG,MAAM,CAAC,OAAO,CAAA;QAC1B,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;YACpD,IAAI,GAAG,CAAC,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,kBAAkB,CAAC,GAAG,GAAG,CAAC,CAAA;YAChE,IAAI,CAAC,IAAI;gBAAE,SAAS,CAAC,KAAK,CAAC,CAAA;QAC7B,CAAC,CAAC,CAAA;QACF,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;QAC1B,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,MAAM,CAAC,GAAG,MAAM,CAAC,OAAO,CAAA;YACxB,MAAM,KAAK,GAAG,CAAC,GAAG,KAAK,CAAA;YACvB,KAAK,GAAG,CAAC,CAAA;YACT,IAAI,IAAI,IAAI,KAAK,KAAK,CAAC;gBAAE,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,CAAA;QAC/C,CAAC,CAAA;QACD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;QAC9D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAA;YACrB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QAChD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAA;IAEvB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,IAAI,KAAK,MAAM;YAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IACvC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAA;IAClD,eAAe,CAAC,OAAO,GAAG,YAAY,CAAA;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IACpC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,QAAQ,CAAC,OAAO,KAAK,MAAM;YAAE,OAAM;QACvC,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAA;QACzB,eAAe,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EACjE,CAAC,WAAW,CAAC,CACd,CAAA;IAED,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAC9B,GAAG,EAAE,CAAC,CAAC;QACL,MAAM;QACN,OAAO,EAAE,OAAO,IAAI,SAAS;QAC7B,SAAS,EAAE,SAAS,IAAI,SAAS;QACjC,IAAI;QACJ,QAAQ;QACR,SAAS;QACT,WAAW;KACZ,CAAC,EACF,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,CACrE,CAAA;IAED,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,IAAwB,EAAE,EAAE;QAC3B,OAAO,CAAC,OAAO,GAAG,IAAI,CAAA;QACtB,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,MAAM,SAAS,GACb,MAAM,IAAI,QAAQ,IAAI,IAAI;QACxB,CAAC,CAAE,EAAE,GAAG,KAAK,EAAE,4BAA4B,EAAE,GAAG,QAAQ,IAAI,EAA0B;QACtF,CAAC,CAAC,KAAK,CAAA;IAEX,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU;QAC9C,oBAAC,0BAA0B,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;YAC/C,oBAAC,MAAM,OACD,IAAI,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,IAAI,SAAS,EAC7B,SAAS,EAAE,SAAS,IAAI,SAAS,EACjC,MAAM,EAAE,mCAAU,EAClB,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,SAAS,iBACH,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACpC,SAAS,EAAE,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,SAAS,EAAE,CAAC;gBAEpF,6BAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK;oBACzC,2BAAG,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,IAC1C,SAAS,CACR;oBACJ,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,sBAAsB,CAAC,KAAK,CAAC,iBAAc,MAAM,GAAG;oBACpF,OAAO;oBACR,6BAAK,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,GAAG;wBACrC,6BAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK;4BACzC,2BAAG,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,gBAAc,SAAS;gCAC9D,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,IAAG,IAAI,CAAQ;gCAC9C,YAAY,IAAI,IAAI,CAAC,CAAC,CAAC,CACtB,8BAAM,SAAS,EAAE,MAAM,CAAC,YAAY,iBAAc,MAAM,IACrD,YAAY,CACR,CACR,CAAC,CAAC,CAAC,IAAI,CACN;4BACH,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG,IAAG,QAAQ,CAAO,CAAC,CAAC,CAAC,IAAI;4BACvE,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK;gCACzB,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,IAAG,MAAM,CAAO,CAAC,CAAC,CAAC,IAAI;gCAC1E,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CAAC,CAAC,CAAC,IAAI;gCACrE,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,IAAG,MAAM,CAAO,CAAC,CAAC,CAAC,IAAI,CACpE,CACF,CACF,CACF,CACC,CAC2B,CACR,CACjC,CAAA;AACH,CAAC;AAgBD;;;;;;;GAOG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IACnE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAChF,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC;QAC3C,6BAAK,SAAS,EAAE,MAAM,CAAC,YAAY;YAChC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,KAAK,CAAO,CAAC,CAAC,CAAC,IAAI;YAClE,gCAAS,IAAI,gBAAc,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU;gBAC5D,4BAAI,SAAS,EAAE,MAAM,CAAC,WAAW,IAC9B,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CACtC,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,4BAAI,SAAS,EAAE,MAAM,CAAC,WAAW,IAAG,KAAK,CAAM,CAC1F,CACE,CACD;YACL,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CAAC,CAAC,CAAC,IAAI,CAClE,CACF,CACP,CAAA;AACH,CAAC;AAKD;;;;;GAKG;AACH,MAAM,UAAU,wBAAwB,CAAC,KAAoC;IAC3E,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACpD,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAA;IAClD,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,EAAE,GAAG,EAAE,WAAW,CAAC,CAAA;IACrD,OAAO,CACL,8BACM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAe,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpD,IAAI,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC;QAE5C,8BAAM,SAAS,EAAE,MAAM,CAAC,YAAY,IAAG,QAAQ,CAAQ,CACrD,CACL,CAAA;AACH,CAAC"}

package/components/NavigationBar/index.d.ts

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

package/components/NavigationBar/index.d.ts.map

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

package/components/NavigationBar/index.js

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

package/components/NavigationBar/index.js.map

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

package/components/NavigationBar/navigation-bar.module.css

@@ -0,0 +1,413 @@
+/*
+ * Navigation Bar (§11.5) with the brand strip and utility bar (§11.3).
+ * CVA function `navigationBar` in NavigationBar.tsx; the root (`base`) is
+ * the header's `kind="band"` Ground, which paints --role-ground and draws
+ * its --role-seam [D178, D179].
+ *
+ * Parts: base, frame (what docks), skipLink, strip, utility (utilityInner,
+ * slot, utilityNav, utilityList, utilityItem, utilityLink, utilityLabel,
+ * locale), bar, inner (the content container), logo, logoMark,
+ * brandDrawing, nav, tools, iconButtons, action, menuSlot.
+ *
+ * Page frame: it responds to the viewport custom media only, with the
+ * inline threshold --ds-nav-inline-n-above a build-time constant [D183].
+ * Colors are role variables only; local custom properties carry dimensions
+ * only: --navigation-bar-logo-size, --navigation-bar-flow-size (the
+ * in-flow height held while docked, written by the sticky observer).
+ */
+
+/* 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. */
+.skipLink {
+  composes: typeButtonSm from '../../utils/type.module.css';
+}
+
+.slot {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.utilityLink {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    position: relative;
+  }
+
+  /* The opaque frame: never transparent over media (§1.3.5). */
+  .frame {
+    position: relative;
+    background-color: var(--role-ground);
+    color: var(--primary12);
+  }
+
+  /* Skip link: first in focus order, the ink pill at the bar's top start on focus. */
+  .skipLink {
+    position: absolute;
+    inset-block-start: var(--size-px-2);
+    inset-inline-start: var(--ds-space-margin);
+    z-index: var(--layer-3);
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: var(--ds-size-hit);
+    padding-inline: var(--size-px-5);
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--radius-round);
+    background-color: var(--primary12);
+    color: var(--role-inverse);
+    text-decoration-line: none;
+    white-space: nowrap;
+  }
+
+  /* The brand strip: the first bar's --ds-stroke-3 top line in --secondary9 (green, passed explicitly). */
+  .strip {
+    block-size: 0;
+    border-block-start: var(--ds-stroke-3) solid var(--secondary9);
+  }
+
+  /* ── Utility bar (§11.3) ───────────────────────────────────────────── */
+
+  .utility {
+    display: none;
+    border-block-end: var(--border-size-1) solid var(--role-hairline);
+  }
+
+  .utilityInner {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-5);
+    box-sizing: border-box;
+    inline-size: min(calc(100% - 2 * var(--ds-space-margin)), var(--ds-container-content));
+    block-size: var(--ds-size-bar-utility);
+    margin-inline: auto;
+  }
+
+  .slot {
+    color: var(--primary12);
+    white-space: nowrap;
+  }
+
+  .utilityNav {
+    margin-inline-start: auto;
+  }
+
+  .utilityList {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-5);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .utilityItem {
+    display: flex;
+  }
+
+  /* Text links only: a 24 px target at a 24 px pitch (§1.5.12), no rest underline [D80]. */
+  .utilityLink {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: var(--size-px-5);
+    min-inline-size: var(--size-px-5);
+    color: var(--primary12);
+    text-decoration-line: none;
+    white-space: nowrap;
+  }
+
+  /* The current bar: a border, so it survives forced colors. */
+  .utilityLink::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    border-block-end: 0 solid var(--primary12);
+    pointer-events: none;
+  }
+
+  .utilityLabel {
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  .locale {
+    color: var(--primary12);
+  }
+
+  /* ── The bar ───────────────────────────────────────────────────────── */
+
+  /* 56 px at base, 64 px from --lg-n-above, over a full-bleed --border-size-1 --role-rule. */
+  .bar {
+    box-sizing: content-box;
+    block-size: var(--ds-size-control-xl);
+    border-block-end: var(--border-size-1) solid var(--role-rule);
+  }
+
+  /* Capped at --ds-container-content; the panels align to this box. */
+  .inner {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-5);
+    box-sizing: border-box;
+    inline-size: min(calc(100% - 2 * var(--ds-space-margin)), var(--ds-container-content));
+    block-size: 100%;
+    margin-inline: auto;
+  }
+
+  .logo {
+    --navigation-bar-logo-size: var(--size-px-6);
+
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: var(--size-px-2);
+    min-block-size: var(--ds-size-hit);
+    color: var(--primary12);
+    text-decoration-line: none;
+  }
+
+  .logoMark {
+    display: inline-flex;
+    align-items: center;
+    block-size: var(--navigation-bar-logo-size);
+  }
+
+  .logoMark > * {
+    display: block;
+    inline-size: auto;
+    block-size: 100%;
+  }
+
+  /* A fine-line drawing in the logo's ink (--ds-stroke-0-75). */
+  .brandDrawing {
+    display: inline-flex;
+    block-size: var(--navigation-bar-logo-size);
+    color: var(--primary12);
+    stroke: currentColor;
+    stroke-width: var(--ds-stroke-0-75);
+    fill: none;
+  }
+
+  .brandDrawing > * {
+    display: block;
+    inline-size: auto;
+    block-size: 100%;
+  }
+
+  /* The Navigation Menu: removed below the inline threshold, where the drawer runs. */
+  .nav {
+    display: none;
+    align-self: stretch;
+    min-inline-size: 0;
+  }
+
+  .tools {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-3);
+    margin-inline-start: auto;
+  }
+
+  /* Utility icon Buttons, --size-px-1 apart. */
+  .iconButtons {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-1);
+  }
+
+  .action,
+  .menuSlot {
+    display: flex;
+    align-items: center;
+  }
+
+  /* Stack guard: below 360 px the action moves into the drawer [D73]. */
+  @media (max-width: 359.98px) {
+    .action {
+      display: none;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .bar {
+      block-size: var(--size-px-9);
+    }
+
+    .logo {
+      --navigation-bar-logo-size: var(--ds-size-icon-block);
+    }
+  }
+
+  /* Inline from the threshold: utility row and menu shown, the menu Button removed [D183]. */
+  @media (min-width: 1024px) {
+    .utility {
+      display: block;
+    }
+
+    .nav {
+      display: flex;
+    }
+
+    .menuSlot {
+      display: none;
+    }
+  }
+}
+
+@layer variants {
+  /* Ruled cells: vertical --border-size-1 --role-rule rules between items. */
+  .ruled {
+    --navigation-menu-item-rule: var(--border-size-1);
+    --navigation-menu-item-gap: 0px;
+    --navigation-menu-item-padding: var(--size-px-3);
+  }
+
+  /* Stacked masthead: a wordmark row over the caps nav row, ruled above and below. */
+  @media (min-width: 1024px) {
+    .masthead .bar {
+      block-size: auto;
+      border-block-start: var(--border-size-2) solid var(--role-rule);
+    }
+
+    .masthead .inner {
+      flex-wrap: wrap;
+      row-gap: 0;
+    }
+
+    .masthead .logo {
+      flex: 1 0 100%;
+      justify-content: center;
+      block-size: var(--ds-size-control-xl);
+      border-block-end: var(--border-size-1) solid var(--role-rule);
+    }
+
+    .masthead .nav {
+      block-size: var(--size-px-8);
+    }
+  }
+
+  /* Compact (the docked header): utility row and brand drawing dropped, one row, same height. */
+  .compact .utility,
+  .compact .brandDrawing {
+    display: none;
+  }
+
+  @media (min-width: 1024px) {
+    .compact .bar {
+      block-size: var(--size-px-9);
+      border-block-start-width: 0;
+    }
+
+    .compact .inner {
+      flex-wrap: nowrap;
+    }
+
+    .compact .logo {
+      flex: none;
+      justify-content: flex-start;
+      block-size: auto;
+      border-block-end-width: 0;
+    }
+
+    .compact .nav {
+      block-size: auto;
+    }
+  }
+}
+
+@layer states {
+  /* Docked: the frame holds the top edge on --layer-2; the root keeps the in-flow height. */
+  .base[data-docked] {
+    min-block-size: var(--navigation-bar-flow-size, 0px);
+  }
+
+  .base[data-docked] .frame {
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline: 0;
+    z-index: var(--layer-2);
+    clip-path: inset(0);
+  }
+
+  /* The swap: a --ds-duration-quick clip cut from the top edge, instant under --motionNotOK [D183]. */
+  @media (prefers-reduced-motion: no-preference) {
+    .base[data-docked] .frame {
+      transition-property: clip-path;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    @starting-style {
+      .base[data-docked] .frame {
+        clip-path: inset(0 0 100% 0);
+      }
+    }
+  }
+
+  /* The skip link stays out of sight until focused. */
+  .skipLink:not(:focus) {
+    inline-size: 1px;
+    block-size: 1px;
+    min-block-size: 0;
+    padding: 0;
+    border-width: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+
+  .skipLink:focus-visible,
+  .logo:focus-visible,
+  .utilityLink:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  /* Utility link hover [D181]: the bare-text underline, --role-accent at --border-size-2. */
+  .utilityLink:hover .utilityLabel {
+    text-decoration-line: underline;
+  }
+
+  /* Current (aria-current="page"): the --ds-stroke-3 bar under the label [D15]. */
+  .utilityLink[aria-current='page']::after {
+    border-block-end-width: var(--ds-stroke-3);
+  }
+}
+
+@layer print {
+  @media print {
+    /*
+     * The header prints as the §7.8 masthead's logo only: un-stuck, no
+     * seam and no rule (the masthead's closing rule follows the title).
+     * The Ground's seam reads --border-size-1, zeroed here on the root.
+     */
+    .base {
+      --border-size-1: 0px;
+
+      min-block-size: 0;
+    }
+
+    .frame {
+      position: static;
+      clip-path: none;
+    }
+
+    .skipLink,
+    .strip,
+    .utility,
+    .nav,
+    .tools {
+      display: none;
+    }
+
+    .bar {
+      block-size: auto;
+      border-block-end-width: 0;
+    }
+  }
+}