@scalewing/react 1.46.0 → 1.48.0

package/dist/components/context-switcher/types.d.ts

@@ -0,0 +1,96 @@
+import { type ReactNode } from 'react';
+import { type InlineAlign } from '../../anchored-position.js';
+import { type BadgeTone } from '../../css/css-data.js';
+import { type ContextSwitcherTriggerAppearance, type ContextSwitcherWidth } from '../../css/css-context-switcher-trigger.js';
+import { type NavCountTone } from '../NavCount.js';
+/** A short status after an option's words, such as a season's "Live". */
+export type ContextSwitcherBadge = {
+    label: string;
+    tone: BadgeTone;
+};
+/** One context the person can switch to, such as a workspace or a season. */
+export type ContextSwitcherOption = {
+    id: string;
+    label: string;
+    /** A muted line under the label, such as the person's role there. */
+    detail?: string;
+    /** A decorative mark before the label (a consumer glyph or crest). */
+    icon?: ReactNode;
+    /** A status Badge after the words, read in the option's name. */
+    badge?: ContextSwitcherBadge;
+    /**
+     * How many things wait there: the shared count pill at the row's end,
+     * read in the option's name. A whole number; 0 shows no pill.
+     */
+    count?: number;
+    /** What the count means ("7 need you"), read in place of the number. Needs `count`. */
+    countLabel?: string;
+    /** The pill's colour, NavCount's tones (`danger` by default). Needs `count`. */
+    countTone?: NavCountTone;
+};
+/** A run of options, under a caption when it has a `label`. */
+export type ContextSwitcherGroup = {
+    id: string;
+    label?: string;
+    options: readonly ContextSwitcherOption[];
+};
+/** A command in the popup's footer, such as "Create a workspace". */
+export type ContextSwitcherAction = {
+    id: string;
+    label: string;
+    /** A decorative glyph before the label. */
+    icon?: ReactNode;
+    onSelect: () => void;
+};
+/** The filter field over the options, for a long list. */
+export type ContextSwitcherFilter = {
+    /** The field's name, such as "Find a workspace". */
+    label: string;
+    placeholder?: string;
+    /** Shown, and announced, when nothing matches the typed words. */
+    emptyText: string;
+    /**
+     * The field shows only from this many options (all groups together);
+     * 0, the default, always shows it.
+     */
+    minOptions?: number;
+};
+export type ContextSwitcherProps = {
+    /**
+     * What is being switched, such as "Workspace": the start of the
+     * trigger's name (then what the trigger shows) and the popup's name.
+     */
+    label: string;
+    /**
+     * What the trigger shows, usually the current context (its words, or a
+     * mark and words). With `triggerAppearance="icon"` it is a glyph alone,
+     * and the name is `label` and the current option's label.
+     */
+    trigger: ReactNode;
+    /**
+     * `framed` (default) is the outlined control with a chevron; `text` is
+     * the words and a chevron with no fill until hovered or open; `pill` is
+     * a rounded outlined pill at label weight with a chevron; `icon` is the
+     * glyph alone in a round quiet button, no chevron (a compact rail).
+     */
+    triggerAppearance?: ContextSwitcherTriggerAppearance;
+    /**
+     * `full` makes the trigger fill its column, such as a sidebar's top,
+     * its content at the start and the chevron at the end; `content` (the
+     * default) sizes it to what it shows.
+     */
+    width?: ContextSwitcherWidth;
+    groups: readonly ContextSwitcherGroup[];
+    /** The option in use, marked with a check and `aria-selected`. */
+    currentId?: string;
+    /**
+     * Called with the chosen option after the popup closes and focus is back
+     * on the trigger. Choosing the current option only closes the popup.
+     */
+    onSelect: (option: ContextSwitcherOption) => void;
+    filter?: ContextSwitcherFilter;
+    /** Commands under the options, after a hairline. */
+    actions?: readonly ContextSwitcherAction[];
+    /** The trigger edge the popup lines up with (start by default). */
+    align?: InlineAlign;
+};

package/dist/components/context-switcher/types.js

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

package/dist/components/context-switcher/use-switcher-list.d.ts

@@ -0,0 +1,29 @@
+import { type KeyboardEvent } from 'react';
+import { type SwitcherEntry } from './options.js';
+import { type ContextSwitcherGroup } from './types.js';
+type SwitcherListOptions = {
+    listId: string;
+    groups: readonly ContextSwitcherGroup[];
+    currentId: string | undefined;
+    /** Whether the filter field holds focus (it keeps Home, End and letters). */
+    filtering: boolean;
+    onChoose: (entry: SwitcherEntry) => void;
+};
+/**
+ * The open popup's list model: the filter's words, the sections left by
+ * them, the active row (by its option id, so it stays put while the list
+ * changes), and the keys. Arrows move the active row (stopping at the
+ * ends), Enter chooses it; in the listbox Home and End go to the ends,
+ * Space chooses and letters jump by typeahead; in the filter field those
+ * keys edit the words, which make the first match active.
+ */
+export declare function useSwitcherList({ currentId, filtering, groups, listId, onChoose, }: SwitcherListOptions): {
+    active: SwitcherEntry | undefined;
+    changeQuery: (next: string) => void;
+    entries: SwitcherEntry[];
+    onListKey: (event: KeyboardEvent) => boolean;
+    query: string;
+    sections: import("./options.js").SwitcherSection[];
+    setActiveId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+};
+export {};

package/dist/components/context-switcher/use-switcher-list.js

@@ -0,0 +1,93 @@
+'use client';
+import { useMemo, useRef, useState } from 'react';
+import { filterSections, flatEntries, switcherSections, typeaheadIndex, } from './options.js';
+/* How long typed letters build one typeahead word. */
+const typeaheadPause = 500;
+/** A key that types a letter, not a shortcut or a control key. */
+function isPrintable(event) {
+    return (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey);
+}
+/**
+ * The open popup's list model: the filter's words, the sections left by
+ * them, the active row (by its option id, so it stays put while the list
+ * changes), and the keys. Arrows move the active row (stopping at the
+ * ends), Enter chooses it; in the listbox Home and End go to the ends,
+ * Space chooses and letters jump by typeahead; in the filter field those
+ * keys edit the words, which make the first match active.
+ */
+export function useSwitcherList({ currentId, filtering, groups, listId, onChoose, }) {
+    const [query, setQuery] = useState('');
+    const [activeId, setActiveId] = useState(currentId);
+    const typed = useRef({ words: '', at: 0 });
+    const all = useMemo(() => switcherSections(listId, groups), [listId, groups]);
+    const sections = useMemo(() => filterSections(all, query), [all, query]);
+    const entries = useMemo(() => flatEntries(sections), [sections]);
+    const activeIndex = Math.max(entries.findIndex((entry) => entry.option.id === activeId), entries.length > 0 ? 0 : -1);
+    const active = entries[activeIndex];
+    function changeQuery(next) {
+        setQuery(next);
+        setActiveId(flatEntries(filterSections(all, next))[0]?.option.id);
+    }
+    function moveTo(index) {
+        const entry = entries[Math.min(Math.max(index, 0), entries.length - 1)];
+        if (entry)
+            setActiveId(entry.option.id);
+    }
+    function typeahead(letter) {
+        const now = Date.now();
+        const words = now - typed.current.at > typeaheadPause
+            ? letter
+            : typed.current.words + letter;
+        typed.current = { words, at: now };
+        const index = typeaheadIndex(entries, words, activeIndex);
+        if (index >= 0)
+            moveTo(index);
+    }
+    /** Handles a key in the listbox or the filter field; true when it was used. */
+    function onListKey(event) {
+        // Keys that build a word in an input method are the method's.
+        if (event.nativeEvent.isComposing || event.keyCode === 229)
+            return false;
+        const typing = Date.now() - typed.current.at <= typeaheadPause;
+        switch (event.key) {
+            case 'ArrowDown':
+                moveTo(activeIndex + 1);
+                return true;
+            case 'ArrowUp':
+                moveTo(activeIndex - 1);
+                return true;
+            case 'Enter':
+                if (active)
+                    onChoose(active);
+                return true;
+            case 'Home':
+            case 'End':
+                if (filtering)
+                    return false;
+                moveTo(event.key === 'Home' ? 0 : entries.length - 1);
+                return true;
+            case ' ':
+                if (filtering)
+                    return false;
+                if (typing)
+                    typeahead(' ');
+                else if (active)
+                    onChoose(active);
+                return true;
+            default:
+                if (filtering || !isPrintable(event))
+                    return false;
+                typeahead(event.key);
+                return true;
+        }
+    }
+    return {
+        active,
+        changeQuery,
+        entries,
+        onListKey,
+        query,
+        sections,
+        setActiveId,
+    };
+}

package/dist/components/context-switcher/validate.d.ts

@@ -0,0 +1,8 @@
+import { type ContextSwitcherProps } from './types.js';
+/**
+ * Fails closed on a switcher it cannot draw or name: blank words, empty or
+ * duplicate groups, options (ids unique across groups) or actions, a bad
+ * count, badge or tone, a `currentId` that names no option, a trigger that
+ * draws nothing, or an unknown appearance, width or alignment.
+ */
+export declare function assertContextSwitcher({ actions, align, currentId, filter, groups, label, trigger, triggerAppearance, width, }: ContextSwitcherProps): void;

package/dist/components/context-switcher/validate.js

@@ -0,0 +1,94 @@
+import { contextSwitcherTriggerAppearances, contextSwitcherWidths, } from '../../css/css-context-switcher-trigger.js';
+import { badgeTones } from '../../css/css-data.js';
+import { isOneOf } from '../../is-one-of.js';
+import { navCountTones } from '../NavCount.js';
+import { hasSlot } from '../slot.js';
+const name = 'ContextSwitcher';
+/** The trigger edges the popup can line up with. */
+const inlineAligns = ['start', 'end'];
+function isBlank(words) {
+    return typeof words !== 'string' || !words.trim();
+}
+function isWholeFromZero(value) {
+    return typeof value === 'number' && Number.isInteger(value) && value >= 0;
+}
+function hasDuplicates(ids) {
+    return new Set(ids).size !== ids.length;
+}
+function assertGroups(groups) {
+    if (groups.length === 0)
+        throw new RangeError(`${name} needs at least one group`);
+    if (groups.some((group) => isBlank(group.id)))
+        throw new RangeError(`${name} groups need nonempty ids`);
+    if (hasDuplicates(groups.map((group) => group.id)))
+        throw new RangeError(`${name} groups need unique ids`);
+    if (groups.some((group) => group.label !== undefined && isBlank(group.label)))
+        throw new RangeError(`${name} group labels are nonempty when given`);
+    if (groups.some((group) => group.options.length === 0))
+        throw new RangeError(`${name} groups need at least one option`);
+}
+function assertOption(option) {
+    if (isBlank(option.id) || isBlank(option.label))
+        throw new RangeError(`${name} options need nonempty ids and labels`);
+    if (option.detail !== undefined && isBlank(option.detail))
+        throw new RangeError(`${name} option details are nonempty when given`);
+    if (option.badge !== undefined &&
+        (isBlank(option.badge.label) || !isOneOf(badgeTones, option.badge.tone)))
+        throw new RangeError(`${name} option badges need a label and one of ${badgeTones.join(', ')}`);
+    if (option.count !== undefined && !isWholeFromZero(option.count))
+        throw new RangeError(`${name} option counts are whole numbers from 0`);
+    if (option.countLabel !== undefined &&
+        (isBlank(option.countLabel) || option.count === undefined))
+        throw new RangeError(`${name} option countLabel is nonempty and comes with a count`);
+    if (option.countTone !== undefined &&
+        (!isOneOf(navCountTones, option.countTone) || option.count === undefined))
+        throw new RangeError(`${name} option countTone is one of ${navCountTones.join(', ')} and comes with a count`);
+}
+function assertFilter(filter) {
+    if (filter === undefined)
+        return;
+    if (isBlank(filter.label) || isBlank(filter.emptyText))
+        throw new RangeError(`${name} filter needs a label and an emptyText`);
+    if (filter.placeholder !== undefined && isBlank(filter.placeholder))
+        throw new RangeError(`${name} filter placeholder is nonempty when given`);
+    if (filter.minOptions !== undefined && !isWholeFromZero(filter.minOptions))
+        throw new RangeError(`${name} filter minOptions is a whole number from 0`);
+}
+function assertActions(actions) {
+    if (actions === undefined)
+        return;
+    if (actions.some((action) => isBlank(action.id) || isBlank(action.label)))
+        throw new RangeError(`${name} actions need nonempty ids and labels`);
+    if (hasDuplicates(actions.map((action) => action.id)))
+        throw new RangeError(`${name} actions need unique ids`);
+}
+/**
+ * Fails closed on a switcher it cannot draw or name: blank words, empty or
+ * duplicate groups, options (ids unique across groups) or actions, a bad
+ * count, badge or tone, a `currentId` that names no option, a trigger that
+ * draws nothing, or an unknown appearance, width or alignment.
+ */
+export function assertContextSwitcher({ actions, align, currentId, filter, groups, label, trigger, triggerAppearance, width, }) {
+    if (isBlank(label))
+        throw new RangeError(`${name} label must be nonempty`);
+    if (!hasSlot(trigger) ||
+        (typeof trigger === 'string' && trigger.trim() === ''))
+        throw new RangeError(`${name} needs a trigger to draw`);
+    if (triggerAppearance !== undefined &&
+        !isOneOf(contextSwitcherTriggerAppearances, triggerAppearance))
+        throw new RangeError(`${name} triggerAppearance must be one of ${contextSwitcherTriggerAppearances.join(', ')}`);
+    if (width !== undefined && !isOneOf(contextSwitcherWidths, width))
+        throw new RangeError(`${name} width must be one of ${contextSwitcherWidths.join(', ')}`);
+    if (align !== undefined && !isOneOf(inlineAligns, align))
+        throw new RangeError(`${name} align must be one of ${inlineAligns.join(', ')}`);
+    assertGroups(groups);
+    const options = groups.flatMap((group) => group.options);
+    options.forEach(assertOption);
+    if (hasDuplicates(options.map((option) => option.id)))
+        throw new RangeError(`${name} options need unique ids`);
+    if (currentId !== undefined &&
+        !options.some((option) => option.id === currentId))
+        throw new RangeError(`${name} currentId must name one of its options`);
+    assertFilter(filter);
+    assertActions(actions);
+}

package/dist/components/fixture/fixture-list-context.d.ts

@@ -0,0 +1,4 @@
+/** Set by FixtureGroup around its list, so a FixtureRow knows it is in one. */
+export declare const FixtureListContext: import("react").Context<boolean>;
+/** Fails closed on a FixtureRow outside a FixtureGroup (its `li` needs the list). */
+export declare function useFixtureList(): void;

package/dist/components/fixture/fixture-list-context.js

@@ -0,0 +1,9 @@
+'use client';
+import { createContext, useContext } from 'react';
+/** Set by FixtureGroup around its list, so a FixtureRow knows it is in one. */
+export const FixtureListContext = createContext(false);
+/** Fails closed on a FixtureRow outside a FixtureGroup (its `li` needs the list). */
+export function useFixtureList() {
+    if (!useContext(FixtureListContext))
+        throw new RangeError('A FixtureRow lives in a FixtureGroup');
+}

package/dist/components/fixture/types.d.ts

@@ -0,0 +1,50 @@
+import { type MouseEvent, type ReactNode } from 'react';
+import { type VisibilityBreakpoint } from '../../css/breakpoints.js';
+import { type BadgeTone } from '../../css/css-data.js';
+import { type FixtureCenterKind } from '../../css/css-fixture.js';
+/** One side of a fixture: its name and an optional decorative mark (a crest). */
+export type FixtureSide = {
+    name: string;
+    /** A mark beside the name, on the centre's side; hidden from assistive technology. */
+    mark?: ReactNode;
+};
+/** A status after the row's details, such as "Final" or "To confirm". */
+export type FixtureStatus = {
+    label: string;
+    tone: BadgeTone;
+};
+export type FixtureRowProps = {
+    home: FixtureSide;
+    away: FixtureSide;
+    /** What sits between the sides: a kickoff time ("8:00") or a score ("2–1"). */
+    center: string;
+    /**
+     * `time` (default) draws the centre as a small grey chip; `score` as
+     * bold figures. Both are tabular, so the rows' centres line up.
+     */
+    centerKind?: FixtureCenterKind;
+    /** Details at the row's end, such as the field; under the sides below `md`. */
+    meta?: ReactNode;
+    /** Hides `meta` below this breakpoint (`md` or `lg`), such as a field a phone leaves out. */
+    metaHideBelow?: VisibilityBreakpoint;
+    status?: FixtureStatus;
+    /** Makes the whole row a link to this address. */
+    href?: string;
+    /**
+     * Makes the whole row a button; with `href`, a plain press on the link
+     * (main button, no modifier) is handed here for a client router.
+     */
+    onPress?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * The row's name when it is a link or a button, in the consumer's words
+     * ("Heron Marsh with Otter Pool, 8:00"); without it the
+     * name is what the row shows, in order.
+     */
+    'aria-label'?: string;
+};
+export type FixtureGroupProps = {
+    /** The run's caption, such as a date and a venue; it names the list. */
+    title: string;
+    /** The run's FixtureRows. */
+    children: ReactNode;
+};

package/dist/components/fixture/types.js

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

package/dist/components/fixture/validate.d.ts

@@ -0,0 +1,8 @@
+import { type FixtureRowProps } from './types.js';
+/**
+ * Fails closed on a row it cannot name or draw: a side without a name, a
+ * blank centre, an unknown centre kind or breakpoint, a status with blank
+ * words or an unknown tone, a blank address or `aria-label`, or an
+ * `aria-label` on a row that is neither a link nor a button.
+ */
+export declare function assertFixtureRow({ away, center, centerKind, home, href, metaHideBelow, onPress, status, 'aria-label': ariaLabel, }: FixtureRowProps): void;

package/dist/components/fixture/validate.js

@@ -0,0 +1,36 @@
+import { visibilityBreakpoints } from '../../css/breakpoints.js';
+import { badgeTones } from '../../css/css-data.js';
+import { fixtureCenterKinds } from '../../css/css-fixture.js';
+import { isOneOf } from '../../is-one-of.js';
+function isBlank(words) {
+    return typeof words !== 'string' || !words.trim();
+}
+/**
+ * Fails closed on a row it cannot name or draw: a side without a name, a
+ * blank centre, an unknown centre kind or breakpoint, a status with blank
+ * words or an unknown tone, a blank address or `aria-label`, or an
+ * `aria-label` on a row that is neither a link nor a button.
+ */
+export function assertFixtureRow({ away, center, centerKind, home, href, metaHideBelow, onPress, status, 'aria-label': ariaLabel, }) {
+    const name = 'FixtureRow';
+    if (isBlank(home?.name) || isBlank(away?.name))
+        throw new RangeError(`${name} home and away need nonempty names`);
+    if (isBlank(center))
+        throw new RangeError(`${name} center must be nonempty`);
+    if (centerKind !== undefined && !isOneOf(fixtureCenterKinds, centerKind))
+        throw new RangeError(`${name} centerKind must be one of ${fixtureCenterKinds.join(', ')}`);
+    if (metaHideBelow !== undefined &&
+        !isOneOf(visibilityBreakpoints, metaHideBelow))
+        throw new RangeError(`${name} metaHideBelow must be one of ${visibilityBreakpoints.join(', ')}`);
+    if (status !== undefined &&
+        (isBlank(status.label) || !isOneOf(badgeTones, status.tone)))
+        throw new RangeError(`${name} status needs a label and one of ${badgeTones.join(', ')}`);
+    if (href !== undefined && isBlank(href))
+        throw new RangeError(`${name} href must be nonempty when given`);
+    if (ariaLabel !== undefined) {
+        if (isBlank(ariaLabel))
+            throw new RangeError(`${name} aria-label must be nonempty when given`);
+        if (href === undefined && onPress === undefined)
+            throw new RangeError(`${name} aria-label names a link or a button: give it href or onPress`);
+    }
+}

package/dist/components/nav-items.d.ts

@@ -0,0 +1,21 @@
+/** What a navigation's item is marked by: `aria-current`, or nothing. */
+export type NavItemCurrent = 'page' | 'location' | boolean;
+/** The parts of a navigation item that SectionNav and AppShell validate alike. */
+type CheckedNavItem = {
+    id: string;
+    label: string;
+    count?: number;
+    countLabel?: string;
+};
+/**
+ * `aria-current` for an item: `page`, `location`, `true` for a bare `true`,
+ * and none for `false` or nothing.
+ */
+export declare function navItemAriaCurrent(current: NavItemCurrent | undefined): 'page' | 'location' | 'true' | undefined;
+/**
+ * Fails closed on a navigation's items, named after the component that
+ * draws them: empty or duplicate ids, empty labels, a count that is not a
+ * whole number from 0, and a blank `countLabel` or one without a count.
+ */
+export declare function assertNavItems(component: string, items: readonly CheckedNavItem[]): void;
+export {};

package/dist/components/nav-items.js

@@ -0,0 +1,26 @@
+/**
+ * `aria-current` for an item: `page`, `location`, `true` for a bare `true`,
+ * and none for `false` or nothing.
+ */
+export function navItemAriaCurrent(current) {
+    if (current === true)
+        return 'true';
+    return current || undefined;
+}
+/**
+ * Fails closed on a navigation's items, named after the component that
+ * draws them: empty or duplicate ids, empty labels, a count that is not a
+ * whole number from 0, and a blank `countLabel` or one without a count.
+ */
+export function assertNavItems(component, items) {
+    if (items.some((item) => !item.id.trim() || !item.label.trim()))
+        throw new RangeError(`${component} items need nonempty ids and labels`);
+    if (new Set(items.map((item) => item.id)).size !== items.length)
+        throw new RangeError(`${component} items need unique ids`);
+    if (items.some((item) => item.count !== undefined &&
+        (!Number.isInteger(item.count) || item.count < 0)))
+        throw new RangeError(`${component} item counts are whole numbers from 0`);
+    if (items.some((item) => item.countLabel !== undefined &&
+        (!item.countLabel.trim() || item.count === undefined)))
+        throw new RangeError(`${component} item countLabel is nonempty and comes with a count`);
+}

package/dist/components/site-footer/types.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+/** One link in a footer group. */
+export type SiteFooterLink = {
+    id: string;
+    label: string;
+    href: string;
+    /** `true` when the link is the page shown: `aria-current="page"`. */
+    current?: boolean;
+    /** The language of the link's words, when they differ from the page's. */
+    lang?: string;
+    /** The language of the page it opens. */
+    hrefLang?: string;
+};
+/** A labelled group of links, drawn as a `nav` named by its label. */
+export type SiteFooterGroup = {
+    id: string;
+    label: string;
+    links: readonly SiteFooterLink[];
+};
+export type SiteFooterProps = {
+    /** The site's mark at the top, such as a logo for a dark background. */
+    brand: ReactNode;
+    /** A line under the brand. */
+    tagline?: ReactNode;
+    /** One or more groups of links, each a `nav` named by its label. */
+    groups: readonly SiteFooterGroup[];
+    /** The bottom row's start, such as the copyright. */
+    legal?: ReactNode;
+    /** The bottom row's end, such as a language switch. */
+    end?: ReactNode;
+};

package/dist/components/site-footer/types.js

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

package/dist/components/site-footer/validate.d.ts

@@ -0,0 +1,7 @@
+import { type SiteFooterGroup } from './types.js';
+/**
+ * Fails closed on the footer's groups: none at all, a group with no links,
+ * blank or repeated ids (groups, and links within a group), blank labels,
+ * and a blank `href`.
+ */
+export declare function assertSiteFooterGroups(groups: readonly SiteFooterGroup[]): void;

package/dist/components/site-footer/validate.js

@@ -0,0 +1,22 @@
+const blank = (value) => !value.trim();
+/**
+ * Fails closed on the footer's groups: none at all, a group with no links,
+ * blank or repeated ids (groups, and links within a group), blank labels,
+ * and a blank `href`.
+ */
+export function assertSiteFooterGroups(groups) {
+    if (groups.length === 0)
+        throw new RangeError('SiteFooter needs at least one group');
+    if (groups.some((group) => blank(group.id) || blank(group.label)))
+        throw new RangeError('SiteFooter groups need nonempty ids and labels');
+    if (new Set(groups.map((group) => group.id)).size !== groups.length)
+        throw new RangeError('SiteFooter groups need unique ids');
+    for (const group of groups) {
+        if (group.links.length === 0)
+            throw new RangeError(`SiteFooter group ${group.id} needs a link`);
+        if (group.links.some((link) => blank(link.id) || blank(link.label) || blank(link.href)))
+            throw new RangeError(`SiteFooter group ${group.id} links need nonempty ids, labels and hrefs`);
+        if (new Set(group.links.map((link) => link.id)).size !== group.links.length)
+            throw new RangeError(`SiteFooter group ${group.id} links need unique ids`);
+    }
+}

package/dist/components/site-header/SiteHeaderLinks.d.ts

@@ -0,0 +1,7 @@
+import { type SiteHeaderItem } from './types.js';
+/** The destinations as a labelled `nav` of links, in the bar or the menu. */
+export declare function SiteHeaderLinks({ className, items, navLabel, }: {
+    className: string;
+    items: readonly SiteHeaderItem[];
+    navLabel: string;
+}): import("react").JSX.Element;

package/dist/components/site-header/SiteHeaderLinks.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tabStop } from '../../tab-stop.js';
+import { navItemAriaCurrent } from '../nav-items.js';
+/** The destinations as a labelled `nav` of links, in the bar or the menu. */
+export function SiteHeaderLinks({ className, items, navLabel, }) {
+    return (_jsx("nav", { "aria-label": navLabel, className: className, children: _jsx("ul", { className: "sw-site-header-list", children: items.map((item) => (_jsx("li", { children: _jsx("a", { "aria-current": navItemAriaCurrent(item.current), className: "sw-site-header-link", href: item.href, tabIndex: tabStop, children: item.label }) }, item.id))) }) }));
+}

package/dist/components/site-header/types.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from 'react';
+import { type NavItemCurrent } from '../nav-items.js';
+/** One destination in the site's main navigation. */
+export type SiteHeaderItem = {
+    id: string;
+    label: string;
+    href: string;
+    /** `page` (or `true`) for the page shown, `location` for a page inside the item's section. */
+    current?: NavItemCurrent;
+};
+/** The menu button's names, in the consumer's words. */
+export type SiteHeaderLabels = {
+    /** The closed menu button's name, such as "Open the menu". */
+    openMenu: string;
+    /** The open menu button's name, such as "Close the menu". */
+    closeMenu: string;
+};
+export type SiteHeaderProps = {
+    /** The site's mark at the start, such as a logo linked to the home page. */
+    brand: ReactNode;
+    /** The main navigation's name, such as "Main". */
+    navLabel: string;
+    /** The main destinations: a row of links from `lg`, the menu's list below it. */
+    items: readonly SiteHeaderItem[];
+    /** The bar's end from `lg`, such as a language switch, Sign in and a ButtonLink. */
+    actions?: ReactNode;
+    /** Beside the menu button below `lg`, such as the language switch. */
+    compactActions?: ReactNode;
+    /** In the open menu under its links, such as full-width ButtonLinks. */
+    menuActions?: ReactNode;
+    labels: SiteHeaderLabels;
+    /** The closed menu button's glyph (☰), decorative. */
+    menuIcon: ReactNode;
+    /** The open menu button's glyph (✕), decorative. */
+    closeIcon: ReactNode;
+    /** Whether the bar sticks to the window's top as the page scrolls (default `true`). */
+    sticky?: boolean;
+};

package/dist/components/site-header/types.js

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

package/dist/components/site-header/use-menu-dismiss.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+/**
+ * What script adds to the menu, a native `details` that opens and closes
+ * without it: Escape closes it and puts focus back on its button; choosing
+ * a link in it, focus leaving it, a press outside it, or the window
+ * widening to the row of destinations closes it. Nothing traps focus.
+ */
+export declare function useMenuDismiss(menuRef: RefObject<HTMLDetailsElement | null>): void;