@cronos-labs/ui 0.8.0 → 0.9.0

package/dist/Header/index.d.ts

@@ -1,56 +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;
-    /**
-     * 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;
-}
-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;
-}
-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,187 +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, HeaderMobileNavSubDisabledItem, 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) => item.disabled ? (_jsxs(HeaderMobileNavSubDisabledItem, { "aria-disabled": "true", "aria-label": `${item.label} ${item.badge ?? ''}`.trim(), children: [item.label, item.badge ? _jsx(HeaderMobileSoonBadge, { children: item.badge }) : null] }, item.key)) : (_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) || child.disabled)
-                                    .map((child) => {
-                                    if (child.disabled || !child.route) {
-                                        return {
-                                            key: child.key,
-                                            label: child.label,
-                                            disabled: true,
-                                            badge: child.badge,
-                                        };
-                                    }
-                                    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?.disabled ? (_jsxs(HeaderAction, { as: "span", "$variant": presentation.variant, "$disabled": true, "aria-disabled": "true", children: [content.joinWaitlist, _jsx(HeaderActionArrow, { "aria-hidden": "true", children: "\u2192" })] })) : 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) || child.disabled)
-                                        .map((child) => {
-                                        if (child.disabled || !child.route) {
-                                            return {
-                                                key: child.key,
-                                                label: child.label,
-                                                disabled: true,
-                                                badge: child.badge,
-                                            };
-                                        }
-                                        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?.disabled ? (_jsxs(HeaderMobileWaitlistLink, { as: "span", "$disabled": true, "aria-disabled": "true", children: [_jsx(HeaderMobileWaitlistLabel, { children: content.waitlistEmailCta }), _jsx(HeaderMobileWaitlistArrow, { "aria-hidden": "true", children: "\u2192" })] })) : 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;
 }, {

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})),
@@ -428,7 +451,7 @@ export const NavDropdownOptionBadge = styled.span `
   border-radius: ${({ theme }) => theme.borderRadius.pill};
   background: rgb(0 0 0 / 0.08);
   color: currentColor;
-  font-size: 0.5625rem;
+  font-size: 0.6875rem;
   font-weight: ${({ theme }) => theme.fontWeight.black};
   letter-spacing: 0.1em;
   line-height: ${({ theme }) => theme.typography.lineHeight.tight};
@@ -444,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};
@@ -791,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};

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;

package/dist/Header/view.js

@@ -0,0 +1,184 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { LocaleSelectorView } from '../LocaleSelector/view.js';
+import { buildLocalizedPath, stripLocalePrefix } from '../locale/routes.js';
+import { useNavigationLocation } from '../navigation/context.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, HeaderMobileNavSubDisabledItem, HeaderMobileNavSubLink, HeaderMobileNavSubList, HeaderMobileNavLink, HeaderMobileOverlay, HeaderMobileLocaleSlot, HeaderMobileSheet, HeaderMobileSoonBadge, HeaderMobileToggle, HeaderMobileToggleIcon, HeaderMobileWaitlistArrow, HeaderMobileWaitlistLabel, HeaderMobileWaitlistLink, HeaderShell, HeaderSkipLink, 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) => item.disabled ? (_jsxs(HeaderMobileNavSubDisabledItem, { "aria-disabled": "true", "aria-label": `${item.label} ${item.badge ?? ''}`.trim(), children: [item.label, item.badge ? _jsx(HeaderMobileSoonBadge, { children: item.badge }) : null] }, item.key)) : (_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 HeaderView({ brandWordmarkSrc, content, forceDocumentNavigation = false, homeHref, isExternalHref, mainContentId = 'main', 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, pathname, hash, navigate } = useNavigationLocation();
+    const localizedHomePath = normalizePathname(homeHref);
+    const isHomeRoute = normalizePathname(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);
+    }, [pathname, 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(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();
+        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: [content.skipToContent !== undefined ? (_jsx(HeaderSkipLink, { href: `#${mainContentId}`, children: content.skipToContent })) : null, _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) || child.disabled)
+                                    .map((child) => {
+                                    if (child.disabled || !child.route) {
+                                        return {
+                                            key: child.key,
+                                            label: child.label,
+                                            disabled: true,
+                                            badge: child.badge,
+                                        };
+                                    }
+                                    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?.disabled ? (_jsxs(HeaderAction, { as: "span", "$variant": presentation.variant, "$disabled": true, "aria-disabled": "true", children: [content.joinWaitlist, _jsx(HeaderActionArrow, { "aria-hidden": "true", children: "\u2192" })] })) : 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) || child.disabled)
+                                        .map((child) => {
+                                        if (child.disabled || !child.route) {
+                                            return {
+                                                key: child.key,
+                                                label: child.label,
+                                                disabled: true,
+                                                badge: child.badge,
+                                            };
+                                        }
+                                        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(LocaleSelectorView, { ariaLabel: content.localeSelectorAriaLabel, forceDocumentNavigation: forceDocumentNavigation, inlineMenu: true, menuPlacement: "down", onLocaleSelect: () => setIsMobileMenuOpen(false) }) }), waitlistCta?.disabled ? (_jsxs(HeaderMobileWaitlistLink, { as: "span", "$disabled": true, "aria-disabled": "true", children: [_jsx(HeaderMobileWaitlistLabel, { children: content.waitlistEmailCta }), _jsx(HeaderMobileWaitlistArrow, { "aria-hidden": "true", children: "\u2192" })] })) : 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] }));
+}