@cronos-labs/ui 0.7.2 → 0.8.1

package/dist/Header/NavDropdown.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import { NavDropdown as NavDropdownRoot, NavDropdownChevron, NavDropdownLabel, NavDropdownList, NavDropdownMenu, NavDropdownOption, NavDropdownTrigger, } from './styles.js';
+import { useNavigationLocation } from '../navigation/context.js';
+import { NavDropdown as NavDropdownRoot, NavDropdownChevron, NavDropdownDisabledOption, NavDropdownLabel, NavDropdownList, NavDropdownMenu, NavDropdownOption, NavDropdownOptionBadge, NavDropdownTrigger, } from './styles.js';
 const buildMenuId = (label) => `header-nav-dropdown-${label.toLowerCase().replace(/\s+/gu, '-')}`;
 export function NavDropdown({ label, items, variant, contrast, }) {
     const [isOpen, setIsOpen] = useState(false);
     const rootRef = useRef(null);
-    const location = useLocation();
+    const { pathname, hash } = useNavigationLocation();
     const menuId = buildMenuId(label);
     useEffect(() => {
         setIsOpen(false);
-    }, [location.pathname, location.hash]);
+    }, [pathname, hash]);
     useEffect(() => {
         if (!isOpen)
             return;
@@ -32,7 +32,7 @@ export function NavDropdown({ label, items, variant, contrast, }) {
             document.removeEventListener('keydown', handleKeyDown);
         };
     }, [isOpen]);
-    return (_jsxs(NavDropdownRoot, { ref: rootRef, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), children: [_jsxs(NavDropdownTrigger, { type: "button", "$variant": variant, "$contrast": contrast, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, onClick: () => setIsOpen((currentValue) => !currentValue), children: [_jsx(NavDropdownLabel, { "$contrast": contrast, children: label }), _jsx(NavDropdownChevron, { "$open": isOpen, "aria-hidden": "true" })] }), _jsx(NavDropdownMenu, { "$open": isOpen, id: menuId, role: "menu", "aria-label": label, children: _jsx(NavDropdownList, { children: items.map((item) => (_jsx(NavDropdownOption, { role: "menuitem", href: item.href, "aria-label": item.ariaLabel, onClick: (event) => {
+    return (_jsxs(NavDropdownRoot, { ref: rootRef, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), children: [_jsxs(NavDropdownTrigger, { type: "button", "$variant": variant, "$contrast": contrast, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, onClick: () => setIsOpen((currentValue) => !currentValue), children: [_jsx(NavDropdownLabel, { "$contrast": contrast, children: label }), _jsx(NavDropdownChevron, { "$open": isOpen, "aria-hidden": "true" })] }), _jsx(NavDropdownMenu, { "$open": isOpen, id: menuId, role: "menu", "aria-label": label, children: _jsx(NavDropdownList, { children: items.map((item) => item.disabled ? (_jsxs(NavDropdownDisabledOption, { role: "menuitem", "aria-disabled": "true", "aria-label": `${item.label} ${item.badge ?? ''}`.trim(), children: [item.label, item.badge ? _jsx(NavDropdownOptionBadge, { children: item.badge }) : null] }, item.key)) : (_jsx(NavDropdownOption, { role: "menuitem", href: item.href, "aria-label": item.ariaLabel, onClick: (event) => {
                             setIsOpen(false);
                             item.onClick?.(event);
                         }, ...(item.external ? { target: '_blank', rel: 'noreferrer' } : {}), children: item.label }, item.key))) }) })] }));

package/dist/Header/index.d.ts

@@ -1,47 +1,7 @@
-export type HeaderPresentationVariant = 'default' | 'inverse';
-export interface HeaderPresentationState {
-    backgroundColor: string;
-    contrast?: boolean;
-    textColor: string;
-    variant: HeaderPresentationVariant;
-}
-export interface HeaderNavChild {
-    key: string;
-    label: string;
-    route?: string;
-    external?: boolean;
-}
-export interface HeaderNavItem {
-    label: string;
-    route?: string;
-    enabled: boolean;
-    order: number;
-    external?: boolean;
-    placeholder?: boolean;
-    badge?: string;
-    children?: HeaderNavChild[];
-}
-export interface HeaderContent {
-    joinWaitlist: string;
-    waitlistEmailCta: string;
-    localeSelectorAriaLabel: string;
-}
-export interface HeaderWaitlistCta {
-    href: string;
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement>, ctaLocation: 'nav_desktop' | 'nav_mobile') => void;
-}
-interface HeaderProps {
-    /** Overrides the wordmark from `<BrandProvider>`. Optional when one is present. */
-    brandWordmarkSrc?: string;
-    content: HeaderContent;
-    forceDocumentNavigation?: boolean;
-    homeHref: string;
-    isExternalHref: (href: string) => boolean;
-    mobilePresentation?: HeaderPresentationState | undefined;
-    navItems: HeaderNavItem[];
-    presentation: HeaderPresentationState;
-    shouldAnimatePresentation: boolean;
-    waitlistCta?: HeaderWaitlistCta | undefined;
-}
-export declare function Header({ brandWordmarkSrc, content, forceDocumentNavigation, homeHref, isExternalHref, mobilePresentation, navItems, presentation, shouldAnimatePresentation, waitlistCta, }: HeaderProps): React.JSX.Element;
-export {};
+import type { HeaderProps } from './types.js';
+export type { HeaderContent, HeaderNavChild, HeaderNavItem, HeaderPresentationState, HeaderPresentationVariant, HeaderProps, HeaderWaitlistCta, } from './types.js';
+/**
+ * The site header for apps with a react-router `<Router>` above it. Static
+ * sites without a router render `HeaderStatic` instead.
+ */
+export declare function Header(props: HeaderProps): React.JSX.Element;

package/dist/Header/index.js

@@ -1,171 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { LocaleSelector } from '../LocaleSelector/index.js';
-import { buildLocalizedPath, stripLocalePrefix } from '../locale/routes.js';
-import { useCurrentLocale } from '../locale/hooks.js';
-import { desktopViewportQuery } from '../tokens.js';
-import { useOptionalBrand } from '../brand/index.js';
-import { normalizePathname } from './helper.js';
-import { NavDropdown } from './NavDropdown.js';
-import { BrandWordmarkMask, HeaderAction, HeaderActionArrow, HeaderBrandLink, HeaderFrame, HeaderMobileNav, HeaderMobileNavDisabledItem, HeaderMobileNavGroup, HeaderMobileNavGroupChevron, HeaderMobileNavGroupPanel, HeaderMobileNavGroupPanelInner, HeaderMobileNavGroupToggle, HeaderMobileNavSubLink, HeaderMobileNavSubList, HeaderMobileNavLink, HeaderMobileOverlay, HeaderMobileLocaleSlot, HeaderMobileSheet, HeaderMobileSoonBadge, HeaderMobileToggle, HeaderMobileToggleIcon, HeaderMobileWaitlistArrow, HeaderMobileWaitlistLabel, HeaderMobileWaitlistLink, HeaderShell, Nav, NavBadge, NavBadgeLabel, Wordmark, } from './styles.js';
-function MobileNavGroup({ label, items }) {
-    const [isExpanded, setIsExpanded] = useState(false);
-    const panelId = `mobile-nav-group-${label.toLowerCase().replace(/\s+/gu, '-')}`;
-    return (_jsxs(HeaderMobileNavGroup, { children: [_jsxs(HeaderMobileNavGroupToggle, { type: "button", "aria-expanded": isExpanded, "aria-controls": panelId, onClick: () => setIsExpanded((currentValue) => !currentValue), children: [label, _jsx(HeaderMobileNavGroupChevron, { "$open": isExpanded, "aria-hidden": "true" })] }), _jsx(HeaderMobileNavGroupPanel, { "$open": isExpanded, id: panelId, children: _jsx(HeaderMobileNavGroupPanelInner, { "$open": isExpanded, children: _jsx(HeaderMobileNavSubList, { "aria-hidden": !isExpanded, children: items.map((item) => (_jsx(HeaderMobileNavSubLink, { href: item.href, "aria-label": item.ariaLabel, tabIndex: isExpanded ? undefined : -1, onClick: item.onClick, ...(item.external ? { target: '_blank', rel: 'noreferrer' } : {}), children: item.label }, item.key))) }) }) })] }));
-}
-export function Header({ brandWordmarkSrc, content, forceDocumentNavigation = false, homeHref, isExternalHref, mobilePresentation, navItems, presentation, shouldAnimatePresentation, waitlistCta, }) {
-    const brand = useOptionalBrand();
-    const wordmarkSrc = brandWordmarkSrc ?? brand?.wordmarkSrc;
-    const brandName = brand?.name ?? '';
-    // Rendering a header with no wordmark is never what the caller meant, and a
-    // broken image is harder to diagnose than a named error.
-    if (wordmarkSrc === undefined) {
-        throw new Error('<Header> needs a brandWordmarkSrc prop or a <BrandProvider>.');
-    }
-    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-    const locale = useCurrentLocale();
-    const location = useLocation();
-    const navigate = useNavigate();
-    const localizedHomePath = normalizePathname(homeHref);
-    const isHomeRoute = normalizePathname(location.pathname) === localizedHomePath;
-    const enabledNavItems = navItems.filter((item) => item.enabled).sort((a, b) => a.order - b.order);
-    const canonicalizeDocumentHref = (href) => {
-        const hashStart = href.indexOf('#');
-        const path = hashStart === -1 ? href : href.slice(0, hashStart);
-        const hash = hashStart === -1 ? '' : href.slice(hashStart);
-        if (path === '/' || path.endsWith('/')) {
-            return href;
-        }
-        return `${path}/${hash}`;
-    };
-    useEffect(() => {
-        setIsMobileMenuOpen(false);
-    }, [location.pathname, location.hash]);
-    useEffect(() => {
-        const desktopMediaQuery = window.matchMedia(desktopViewportQuery);
-        const handleChange = (event) => {
-            if (event.matches) {
-                setIsMobileMenuOpen(false);
-            }
-        };
-        desktopMediaQuery.addEventListener('change', handleChange);
-        return () => {
-            desktopMediaQuery.removeEventListener('change', handleChange);
-        };
-    }, []);
-    const resolveHref = (route) => {
-        const href = route.startsWith('#')
-            ? isHomeRoute
-                ? route
-                : `${localizedHomePath}${route}`
-            : route.startsWith('/')
-                ? buildLocalizedPath(route, locale)
-                : route;
-        return forceDocumentNavigation || isExternalHref(stripLocalePrefix(normalizePathname(href)))
-            ? canonicalizeDocumentHref(href)
-            : href;
-    };
-    const handleInternalNavigation = (event, href) => {
-        if (event.defaultPrevented ||
-            event.button !== 0 ||
-            event.metaKey ||
-            event.altKey ||
-            event.ctrlKey ||
-            event.shiftKey) {
-            return;
-        }
-        const isSameRouteNavigation = normalizePathname(href) === normalizePathname(location.pathname);
-        if (isSameRouteNavigation) {
-            event.preventDefault();
-            window.scrollTo(0, 0);
-            document
-                .querySelector('[data-home-shell="true"]')
-                ?.scrollTo({ top: 0, left: 0, behavior: 'auto' });
-            return;
-        }
-        if (isExternalHref(stripLocalePrefix(normalizePathname(href)))) {
-            return;
-        }
-        event.preventDefault();
-        void navigate(href);
-    };
-    const handleWaitlistCtaClick = (event, ctaLocation) => {
-        setIsMobileMenuOpen(false);
-        waitlistCta?.onClick?.(event, ctaLocation);
-    };
-    return (_jsxs(HeaderFrame, { "data-header-frame": "true", "$shouldAnimatePresentation": shouldAnimatePresentation, "$backgroundColor": presentation.backgroundColor, "$mobileBackgroundColor": mobilePresentation?.backgroundColor, "$contrast": presentation.contrast, children: [_jsxs(HeaderShell, { "$shouldAnimatePresentation": shouldAnimatePresentation, "$textColor": presentation.textColor, "$mobileTextColor": mobilePresentation?.textColor, children: [_jsx(HeaderBrandLink, { href: forceDocumentNavigation ? canonicalizeDocumentHref(homeHref) : homeHref, "aria-label": brandName ? `${brandName} home` : 'Home', onClick: forceDocumentNavigation
-                            ? undefined
-                            : (event) => handleInternalNavigation(event, homeHref), children: presentation.contrast ? (_jsx(BrandWordmarkMask, { "$url": wordmarkSrc, role: "img", "aria-label": brandName })) : (_jsx(Wordmark, { "$shouldAnimatePresentation": shouldAnimatePresentation, "$variant": presentation.variant, "$mobileVariant": mobilePresentation?.variant, src: wordmarkSrc, alt: brandName })) }), _jsx(Nav, { "$variant": presentation.variant, "$contrast": presentation.contrast, "aria-label": "Global navigation", children: enabledNavItems.map((item) => {
-                            const label = item.label;
-                            if (item.children && item.children.length > 0) {
-                                const dropdownItems = item.children
-                                    .filter((child) => Boolean(child.route))
-                                    .map((child) => {
-                                    const childHref = resolveHref(child.route);
-                                    return {
-                                        key: child.key,
-                                        label: child.label,
-                                        href: childHref,
-                                        external: child.external,
-                                        onClick: child.external || forceDocumentNavigation
-                                            ? undefined
-                                            : (event) => {
-                                                handleInternalNavigation(event, childHref);
-                                            },
-                                    };
-                                });
-                                return (_jsx(NavDropdown, { label: label, items: dropdownItems, variant: presentation.variant, contrast: presentation.contrast }, item.label));
-                            }
-                            const content_ = (_jsxs(_Fragment, { children: [label, item.badge ? (_jsx(NavBadge, { children: _jsx(NavBadgeLabel, { children: item.badge }) })) : null] }));
-                            if (item.placeholder || !item.route) {
-                                return (_jsx("span", { "aria-disabled": "true", "aria-label": `${label} ${item.badge ?? ''}`.trim(), "data-has-badge": item.badge ? 'true' : undefined, children: content_ }, item.label));
-                            }
-                            const href = resolveHref(item.route);
-                            return (_jsx("a", { href: href, "data-has-badge": item.badge ? 'true' : undefined, onClick: item.external
-                                    ? undefined
-                                    : forceDocumentNavigation
-                                        ? undefined
-                                        : (event) => {
-                                            handleInternalNavigation(event, href);
-                                        }, ...(item.external ? { target: '_blank', rel: 'noreferrer' } : {}), children: content_ }, item.label));
-                        }) }), _jsx(HeaderMobileToggle, { type: "button", "aria-label": isMobileMenuOpen ? 'Close navigation menu' : 'Open navigation menu', "aria-expanded": isMobileMenuOpen, "aria-controls": "mobile-navigation", onClick: () => setIsMobileMenuOpen((currentValue) => !currentValue), children: _jsx(HeaderMobileToggleIcon, { "$open": isMobileMenuOpen, children: _jsx("span", {}) }) }), waitlistCta ? (_jsxs(HeaderAction, { "$variant": presentation.variant, href: resolveHref(waitlistCta.href), onClick: forceDocumentNavigation
-                            ? undefined
-                            : (event) => handleWaitlistCtaClick(event, 'nav_desktop'), children: [content.joinWaitlist, _jsx(HeaderActionArrow, { "aria-hidden": "true", children: "\u2192" })] })) : null] }), isMobileMenuOpen ? (_jsx(HeaderMobileOverlay, { onClick: () => setIsMobileMenuOpen(false), children: _jsxs(HeaderMobileSheet, { id: "mobile-navigation", role: "dialog", "aria-modal": "true", "aria-label": "Navigation menu", onClick: (event) => event.stopPropagation(), children: [_jsx(HeaderMobileNav, { "aria-label": "Mobile navigation", children: enabledNavItems.map((item) => {
-                                const label = item.label;
-                                if (item.children && item.children.length > 0) {
-                                    const groupItems = item.children
-                                        .filter((child) => Boolean(child.route))
-                                        .map((child) => {
-                                        const childHref = resolveHref(child.route);
-                                        return {
-                                            key: child.key,
-                                            label: child.label,
-                                            href: childHref,
-                                            external: child.external,
-                                            onClick: child.external || forceDocumentNavigation
-                                                ? () => setIsMobileMenuOpen(false)
-                                                : (event) => {
-                                                    setIsMobileMenuOpen(false);
-                                                    handleInternalNavigation(event, childHref);
-                                                },
-                                        };
-                                    });
-                                    return _jsx(MobileNavGroup, { label: label, items: groupItems }, item.label);
-                                }
-                                if (item.placeholder || !item.route) {
-                                    return (_jsxs(HeaderMobileNavDisabledItem, { "aria-disabled": "true", "aria-label": `${label} ${item.badge ?? ''}`.trim(), children: [label, item.badge ? (_jsx(HeaderMobileSoonBadge, { children: item.badge })) : null] }, item.label));
-                                }
-                                const href = resolveHref(item.route);
-                                return (_jsxs(HeaderMobileNavLink, { href: href, onClick: item.external
-                                        ? () => setIsMobileMenuOpen(false)
-                                        : forceDocumentNavigation
-                                            ? () => setIsMobileMenuOpen(false)
-                                            : (event) => {
-                                                setIsMobileMenuOpen(false);
-                                                handleInternalNavigation(event, href);
-                                            }, ...(item.external ? { target: '_blank', rel: 'noreferrer' } : {}), children: [label, item.badge ? (_jsx(HeaderMobileSoonBadge, { children: item.badge })) : null] }, item.label));
-                            }) }), _jsx(HeaderMobileLocaleSlot, { children: _jsx(LocaleSelector, { ariaLabel: content.localeSelectorAriaLabel, forceDocumentNavigation: forceDocumentNavigation, inlineMenu: true, menuPlacement: "down", onLocaleSelect: () => setIsMobileMenuOpen(false) }) }), waitlistCta ? (_jsxs(HeaderMobileWaitlistLink, { href: resolveHref(waitlistCta.href), onClick: forceDocumentNavigation
-                                ? () => setIsMobileMenuOpen(false)
-                                : (event) => handleWaitlistCtaClick(event, 'nav_mobile'), children: [_jsx(HeaderMobileWaitlistLabel, { children: content.waitlistEmailCta }), _jsx(HeaderMobileWaitlistArrow, { "aria-hidden": "true", children: "\u2192" })] })) : null] }) })) : null] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RouterNavigationProvider } from '../navigation/router.js';
+import { HeaderView } from './view.js';
+/**
+ * The site header for apps with a react-router `<Router>` above it. Static
+ * sites without a router render `HeaderStatic` instead.
+ */
+export function Header(props) {
+    return (_jsx(RouterNavigationProvider, { children: _jsx(HeaderView, { ...props }) }));
 }

package/dist/Header/static.d.ts

@@ -0,0 +1,15 @@
+import type { AppLocale } from '../locale/types.js';
+import type { HeaderProps } from './types.js';
+export interface HeaderStaticProps extends Omit<HeaderProps, 'forceDocumentNavigation'> {
+    /** The page's locale, resolved by the host (Astro) rather than a router param. */
+    locale: AppLocale;
+    /** The page's pathname; drives the home-route check and the mobile menu's close-on-navigate. */
+    pathname: string;
+    hash?: string | undefined;
+}
+/**
+ * The site header for statically rendered pages with no client router. Every
+ * link is a document navigation, so this variant never imports react-router
+ * and needs no `<MemoryRouter>` around the island.
+ */
+export declare function HeaderStatic({ locale, pathname, hash, ...props }: HeaderStaticProps): React.JSX.Element;

package/dist/Header/static.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StaticNavigationProvider } from '../navigation/static.js';
+import { HeaderView } from './view.js';
+/**
+ * The site header for statically rendered pages with no client router. Every
+ * link is a document navigation, so this variant never imports react-router
+ * and needs no `<MemoryRouter>` around the island.
+ */
+export function HeaderStatic({ locale, pathname, hash, ...props }) {
+    return (_jsx(StaticNavigationProvider, { locale: locale, pathname: pathname, hash: hash, children: _jsx(HeaderView, { ...props, forceDocumentNavigation: true }) }));
+}

package/dist/Header/styles.d.ts

@@ -1,4 +1,4 @@
-import type { HeaderPresentationVariant } from './index.js';
+import type { HeaderPresentationVariant } from './types.js';
 export declare const HeaderFrame: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
@@ -7,6 +7,9 @@ export declare const HeaderFrame: import("styled-components/dist/types").IStyled
     $mobileBackgroundColor?: string | undefined;
     $contrast?: boolean | undefined;
 }>> & string;
+export declare const HeaderSkipLink: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
 export declare const HeaderShell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
@@ -77,6 +80,12 @@ export declare const NavDropdownList: import("styled-components/dist/types").ISt
 export declare const NavDropdownOption: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
+export declare const NavDropdownDisabledOption: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const NavDropdownOptionBadge: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
 export declare const NavBadge: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
@@ -87,6 +96,7 @@ export declare const HeaderAction: import("styled-components/dist/types").IStyle
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
     $variant: HeaderPresentationVariant;
+    $disabled?: boolean | undefined;
 }>> & string;
 export declare const HeaderActionArrow: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
@@ -138,6 +148,9 @@ export declare const HeaderMobileNavSubList: import("styled-components/dist/type
 export declare const HeaderMobileNavSubLink: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
+export declare const HeaderMobileNavSubDisabledItem: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
 export declare const HeaderMobileNavDisabledItem: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
@@ -147,9 +160,11 @@ export declare const HeaderMobileSoonBadge: import("styled-components/dist/types
 export declare const HeaderMobileLocaleSlot: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
-export declare const HeaderMobileWaitlistLink: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
+export declare const HeaderMobileWaitlistLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string;
+}, {
+    $disabled?: boolean | undefined;
+}>> & string;
 export declare const HeaderMobileWaitlistLabel: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;

package/dist/Header/styles.js

@@ -88,6 +88,29 @@ const verticalSwapText = (top, bottom) => `
   -webkit-background-clip: text;
   background-clip: text;
 `;
+// Off-canvas until focused, then a solid pill over the header so a keyboard
+// user's first Tab lands on a visible control rather than the wordmark.
+export const HeaderSkipLink = styled.a `
+  position: absolute;
+  top: ${({ theme }) => theme.sizes.xs};
+  left: ${({ theme }) => theme.sizes.xs};
+  z-index: 1;
+  padding: 10px 16px;
+  border-radius: ${({ theme }) => theme.borderRadius.pill};
+  background: ${({ theme }) => theme.colors.ink};
+  color: ${({ theme }) => theme.colors.light};
+  font-size: 0.875rem;
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+  line-height: 1.25;
+  text-decoration: none;
+  transform: translateY(calc(-100% - ${({ theme }) => theme.sizes.md}));
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.light};
+    outline-offset: 2px;
+    transform: none;
+  }
+`;
 export const HeaderShell = styled.header `
   width: min(
     calc(100% - (2 * ${({ theme }) => theme.layout.pagePaddingInline})),
@@ -398,6 +421,43 @@ export const NavDropdownOption = styled.a `
     outline-offset: -3px;
   }
 `;
+/* A greyed dropdown entry: the option's shape without its hover or link
+   semantics, the badge in the disabled nav item's muted pill. */
+export const NavDropdownDisabledOption = styled.span `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 44px;
+  padding: 12px;
+  border-radius: 8px;
+  color: inherit;
+  font-size: 1rem;
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+  letter-spacing: -0.02em;
+  line-height: ${({ theme }) => theme.typography.lineHeight.tight};
+  text-align: left;
+  white-space: nowrap;
+  opacity: 0.5;
+  cursor: default;
+`;
+export const NavDropdownOptionBadge = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  height: 18px;
+  padding: 0 8px;
+  border-radius: ${({ theme }) => theme.borderRadius.pill};
+  background: rgb(0 0 0 / 0.08);
+  color: currentColor;
+  font-size: 0.6875rem;
+  font-weight: ${({ theme }) => theme.fontWeight.black};
+  letter-spacing: 0.1em;
+  line-height: ${({ theme }) => theme.typography.lineHeight.tight};
+  text-transform: uppercase;
+  white-space: nowrap;
+`;
 export const NavBadge = styled.span `
   display: inline-flex;
   align-items: center;
@@ -407,8 +467,8 @@ export const NavBadge = styled.span `
   padding: 0 8px;
   border-radius: ${({ theme }) => theme.borderRadius.pill};
   background: ${({ theme }) => theme.colors.accentSky};
-  color: ${({ theme }) => theme.colors.light};
-  font-size: 0.5rem;
+  color: ${({ theme }) => theme.colors.ink};
+  font-size: 0.6875rem;
   font-weight: ${({ theme }) => theme.fontWeight.black};
   letter-spacing: 0.1em;
   line-height: ${({ theme }) => theme.typography.lineHeight.tight};
@@ -458,6 +518,20 @@ export const HeaderAction = styled.a `
     outline-offset: 3px;
   }
 
+  /* Disabled: rendered as a span, so no hover lift and no focus ring;
+     dimmed in place so the layout does not move when it goes live. */
+  ${({ $disabled }) => $disabled
+    ? `
+    opacity: 0.55;
+    cursor: default;
+
+    &:hover {
+      opacity: 0.55;
+      transform: none;
+    }
+  `
+    : ''}
+
   ${({ theme }) => theme.mediaQueries.lg} {
     display: inline-flex;
     min-width: ${({ theme }) => theme.layout.headerActionWidth};
@@ -698,6 +772,22 @@ export const HeaderMobileNavSubLink = styled.a `
     outline-offset: -4px;
   }
 `;
+/* A greyed entry inside an expanded mobile group: the sub-link's shape,
+   dimmed, with no hover. */
+export const HeaderMobileNavSubDisabledItem = styled.span `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 40px;
+  padding: 8px 12px;
+  color: ${({ theme }) => theme.colors.textDarkSubtle};
+  font-size: ${({ theme }) => theme.typography.fontSize.bodySm};
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+  letter-spacing: -0.02em;
+  line-height: ${({ theme }) => theme.typography.lineHeight.compact};
+  opacity: 0.55;
+  cursor: default;
+`;
 export const HeaderMobileNavDisabledItem = styled.span `
   display: inline-flex;
   align-items: center;
@@ -724,7 +814,7 @@ export const HeaderMobileSoonBadge = styled.span `
   background: rgb(255 255 255 / 0.42);
   color: currentColor;
   box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
-  font-size: 0.5rem;
+  font-size: 0.6875rem;
   font-weight: ${({ theme }) => theme.fontWeight.black};
   letter-spacing: 0.1em;
   line-height: ${({ theme }) => theme.typography.lineHeight.tight};
@@ -751,6 +841,8 @@ export const HeaderMobileWaitlistLink = styled.a `
   color: ${({ theme }) => theme.colors.textDarkSubtle};
   text-decoration: none;
   overflow: hidden;
+  opacity: ${({ $disabled }) => ($disabled ? 0.55 : 1)};
+  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
 
   &:focus-visible {
     outline: 2px solid ${({ theme }) => theme.colors.ink};

package/dist/Header/types.d.ts

@@ -0,0 +1,61 @@
+export type HeaderPresentationVariant = 'default' | 'inverse';
+export interface HeaderPresentationState {
+    backgroundColor: string;
+    contrast?: boolean;
+    textColor: string;
+    variant: HeaderPresentationVariant;
+}
+export interface HeaderNavChild {
+    key: string;
+    label: string;
+    route?: string;
+    external?: boolean;
+    /**
+     * Renders the child greyed and non-interactive, with `badge` beside it if
+     * given — for a destination that is not open yet. A disabled child needs
+     * no `route`.
+     */
+    disabled?: boolean;
+    badge?: string;
+}
+export interface HeaderNavItem {
+    label: string;
+    route?: string;
+    enabled: boolean;
+    order: number;
+    external?: boolean;
+    placeholder?: boolean;
+    badge?: string;
+    children?: HeaderNavChild[];
+}
+export interface HeaderContent {
+    joinWaitlist: string;
+    waitlistEmailCta: string;
+    localeSelectorAriaLabel: string;
+    /**
+     * Label of the skip-to-content link rendered as the header's first focusable
+     * element. Omit to render no link (existing consumers keep their markup).
+     */
+    skipToContent?: string | undefined;
+}
+export interface HeaderWaitlistCta {
+    href: string;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>, ctaLocation: 'nav_desktop' | 'nav_mobile') => void;
+    /** Renders the CTA greyed and non-interactive, keeping its place and label. */
+    disabled?: boolean;
+}
+export interface HeaderProps {
+    /** Overrides the wordmark from `<BrandProvider>`. Optional when one is present. */
+    brandWordmarkSrc?: string;
+    content: HeaderContent;
+    forceDocumentNavigation?: boolean;
+    homeHref: string;
+    isExternalHref: (href: string) => boolean;
+    /** `id` of the page's main landmark the skip link targets. Defaults to `main`. */
+    mainContentId?: string | undefined;
+    mobilePresentation?: HeaderPresentationState | undefined;
+    navItems: HeaderNavItem[];
+    presentation: HeaderPresentationState;
+    shouldAnimatePresentation: boolean;
+    waitlistCta?: HeaderWaitlistCta | undefined;
+}

package/dist/Header/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Header/view.d.ts

@@ -0,0 +1,2 @@
+import type { HeaderProps } from './types.js';
+export declare function HeaderView({ brandWordmarkSrc, content, forceDocumentNavigation, homeHref, isExternalHref, mainContentId, mobilePresentation, navItems, presentation, shouldAnimatePresentation, waitlistCta, }: HeaderProps): React.JSX.Element;