@scalewing/react 1.47.0 → 1.48.0

package/dist/components/Band.d.ts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type BandTone, bandTones, type BandWidth, bandWidths } from '../css/css-band.js';
+import { type SpacingProps } from '../spacing-classes.js';
+export { bandTones, bandWidths, type BandTone, type BandWidth };
+export declare const bandElements: readonly ["section", "div", "aside", "footer"];
+export type BandElement = (typeof bandElements)[number];
+export type BandProps = Omit<HTMLAttributes<HTMLElement>, 'style'> & Pick<SpacingProps, 'paddingY' | 'paddingTop' | 'paddingBottom'> & {
+    /**
+     * The fill: `surface`, `subtle` (the quiet grey), or `inverse`, the dark
+     * band (`--sw-color-inverse`), inside which words, muted words,
+     * hairlines, links, the accent and a primary button read in
+     * `onInverse`, so its content needs no band-aware variant.
+     */
+    tone: BandTone;
+    /** The element: `section` (default), `div`, `aside` or `footer`. */
+    as?: BandElement;
+    /**
+     * The content column: `container` (default) is the page's width,
+     * `reading` the narrower reading width; either keeps the page gutter.
+     */
+    width?: BandWidth;
+    children: ReactNode;
+};
+/**
+ * A full-width stretch of the page in one fill, its content in a centred
+ * column with the page gutter: a site's footer, one dark closing section,
+ * a grey strip between white ones. Vertical padding is a spacing step
+ * (default 8). An unknown tone, width or element throws a `RangeError`.
+ */
+export declare function Band({ as, children, className, paddingBottom, paddingTop, paddingY, tone, width, ...rest }: BandProps): import("react").JSX.Element;

package/dist/components/Band.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../class-names.js';
+import { bandToneClass, bandTones, bandWidthClass, bandWidths, } from '../css/css-band.js';
+import { isOneOf } from '../is-one-of.js';
+import { spacingClassNames } from '../spacing-classes.js';
+export { bandTones, bandWidths };
+export const bandElements = ['section', 'div', 'aside', 'footer'];
+/**
+ * A full-width stretch of the page in one fill, its content in a centred
+ * column with the page gutter: a site's footer, one dark closing section,
+ * a grey strip between white ones. Vertical padding is a spacing step
+ * (default 8). An unknown tone, width or element throws a `RangeError`.
+ */
+export function Band({ as = 'section', children, className, paddingBottom, paddingTop, paddingY = 8, tone, width = 'container', ...rest }) {
+    if (!isOneOf(bandTones, tone))
+        throw new RangeError(`Unknown Band tone: ${String(tone)}`);
+    if (!isOneOf(bandWidths, width))
+        throw new RangeError(`Unknown Band width: ${String(width)}`);
+    if (!isOneOf(bandElements, as))
+        throw new RangeError(`Unknown Band element: ${String(as)}`);
+    const Element = as;
+    return (_jsx(Element, { className: cx('sw-band', bandToneClass(tone), ...spacingClassNames({ paddingY, paddingTop, paddingBottom }), className), ...rest, children: _jsx("div", { className: cx('sw-band-inner', bandWidthClass(width)), children: children }) }));
+}

package/dist/components/ButtonLink.d.ts

@@ -0,0 +1,33 @@
+import { type ButtonSize } from '@scalewing/tokens';
+import { type AnchorHTMLAttributes, type ReactNode } from 'react';
+import { type WebButtonVariant } from '../css/css-button.js';
+import { type ButtonWidth } from '../css/css-button-width.js';
+export type ButtonLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'style'> & {
+    /** Where the link goes. */
+    href: string;
+    children: ReactNode;
+    size?: ButtonSize;
+    /** The Button's variants: `primary` (default), `secondary`, `tertiary`, `ghost`, `danger`, `neutral`. */
+    variant?: WebButtonVariant;
+    /** `content` (default) is as wide as the words; `full` fills the container. */
+    width?: ButtonWidth;
+};
+/**
+ * A link drawn as a Button, for a destination that reads as an action, such
+ * as a site's "Contact us" or "Sign in": an `<a href>` with the Button's
+ * variants, sizes and width, so it opens like any link (a new tab, a
+ * server-rendered page with no script). `aria-current="page"` marks the
+ * one that is the current page with the pressed ring. A link has no
+ * disabled state; render no link instead. An unknown variant, size or
+ * width throws a `RangeError`.
+ */
+export declare const ButtonLink: import("react").ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "style" | "href"> & {
+    /** Where the link goes. */
+    href: string;
+    children: ReactNode;
+    size?: ButtonSize;
+    /** The Button's variants: `primary` (default), `secondary`, `tertiary`, `ghost`, `danger`, `neutral`. */
+    variant?: WebButtonVariant;
+    /** `content` (default) is as wide as the words; `full` fills the container. */
+    width?: ButtonWidth;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/ButtonLink.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { buttonSizes } from '@scalewing/tokens';
+import { forwardRef } from 'react';
+import { cx } from '../class-names.js';
+import { buttonClassNames, webButtonVariants, } from '../css/css-button.js';
+import { buttonWidthClass, buttonWidths, } from '../css/css-button-width.js';
+import { buttonLinkClass } from '../css/css-button-link.js';
+import { isOneOf } from '../is-one-of.js';
+import { tabStop } from '../tab-stop.js';
+/**
+ * A link drawn as a Button, for a destination that reads as an action, such
+ * as a site's "Contact us" or "Sign in": an `<a href>` with the Button's
+ * variants, sizes and width, so it opens like any link (a new tab, a
+ * server-rendered page with no script). `aria-current="page"` marks the
+ * one that is the current page with the pressed ring. A link has no
+ * disabled state; render no link instead. An unknown variant, size or
+ * width throws a `RangeError`.
+ */
+export const ButtonLink = forwardRef(function ButtonLink({ children, className, href, size = 'md', tabIndex, variant = 'primary', width = 'content', ...rest }, ref) {
+    if (!isOneOf(webButtonVariants, variant))
+        throw new RangeError(`Unknown ButtonLink variant: ${String(variant)}`);
+    if (!isOneOf(buttonSizes, size))
+        throw new RangeError(`Unknown ButtonLink size: ${String(size)}`);
+    if (!isOneOf(buttonWidths, width))
+        throw new RangeError(`Unknown ButtonLink width: ${String(width)}`);
+    return (_jsx("a", { ref: ref, className: cx(...buttonClassNames({ size, variant }), buttonLinkClass, buttonWidthClass(width), className), href: href, tabIndex: tabIndex ?? tabStop, ...rest, children: children }));
+});

package/dist/components/CommandPalette.d.ts

@@ -0,0 +1,12 @@
+import { type CommandPaletteProps } from './command-palette/types.js';
+export { commandPaletteShortcuts, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, type CommandPaletteShortcut, } from './command-palette/types.js';
+/**
+ * A search over the product, on the top layer: a modal dialog named by
+ * `label` holding a field (an ARIA combobox) over an always-open listbox of
+ * grouped results. ↑ and ↓ move the active row (wrapping), Enter chooses
+ * it; Escape, a press outside or the shortcut again close it, and focus
+ * returns to where it was. With `shortcut="mod+k"` ⌘K or Ctrl+K opens it
+ * from anywhere but another text field. Invalid words or groups throw a
+ * `RangeError`.
+ */
+export declare function CommandPalette(props: CommandPaletteProps): import("react").JSX.Element;

package/dist/components/CommandPalette.js

@@ -0,0 +1,143 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState, } from 'react';
+import { useDialogCloseRequests } from './dialog-close-requests.js';
+import { PaletteList } from './command-palette/PaletteList.js';
+import { usePaletteShortcut } from './command-palette/shortcut.js';
+import { assertCommandPalette } from './command-palette/validate.js';
+export { commandPaletteShortcuts, } from './command-palette/types.js';
+/** The hex of an item's id, so any id makes a valid DOM id part. */
+function idPart(id) {
+    return Array.from(new TextEncoder().encode(id), (byte) => byte.toString(16).padStart(2, '0')).join('');
+}
+/** The words the status says: loading, nothing found, or the count. */
+function statusWords({ countText, emptyText, loading, loadingText }, count) {
+    if (loading)
+        return loadingText ?? '';
+    if (count === 0)
+        return emptyText;
+    return countText?.(count) ?? '';
+}
+/**
+ * A search over the product, on the top layer: a modal dialog named by
+ * `label` holding a field (an ARIA combobox) over an always-open listbox of
+ * grouped results. ↑ and ↓ move the active row (wrapping), Enter chooses
+ * it; Escape, a press outside or the shortcut again close it, and focus
+ * returns to where it was. With `shortcut="mod+k"` ⌘K or Ctrl+K opens it
+ * from anywhere but another text field. Invalid words or groups throw a
+ * `RangeError`.
+ */
+export function CommandPalette(props) {
+    assertCommandPalette(props);
+    const { groups, hint, label, loading = false, loadingText, onOpenChange, onQueryChange, open, placeholder, query, shortcut, } = props;
+    const listId = useId();
+    const inputRef = useRef(null);
+    const openerRef = useRef(null);
+    const pointerAt = useRef(null);
+    const [activeId, setActiveId] = useState();
+    // The status starts empty each time the palette opens and is filled just
+    // after, so its first words are announced as a change.
+    const [announcing, setAnnouncing] = useState(false);
+    // Each opening and closing starts the active row over at the first item.
+    const [shownOpen, setShownOpen] = useState(open);
+    if (shownOpen !== open) {
+        setShownOpen(open);
+        setActiveId(undefined);
+        setAnnouncing(false);
+    }
+    // A chosen item's action, run once the dialog has really closed, so it
+    // can move focus to the page.
+    const pendingRef = useRef(null);
+    const items = groups.flatMap((group) => group.items);
+    const active = items.find((item) => item.id === activeId) ?? items[0];
+    const rowId = (item) => `${listId}-${idPart(item.id)}`;
+    const { nodeRef, handlers } = useDialogCloseRequests({
+        open,
+        onClose: () => onOpenChange(false),
+    });
+    usePaletteShortcut(shortcut, () => inputRef.current, () => onOpenChange(!open));
+    // Opening remembers where focus was (before the dialog takes it), then,
+    // once the dialog is shown, selects the field's words so typing replaces
+    // them. Closing hands focus back unless a chosen item moved it elsewhere.
+    useLayoutEffect(() => {
+        if (open)
+            openerRef.current = document.activeElement;
+    }, [open]);
+    useEffect(() => {
+        if (open) {
+            pointerAt.current = null;
+            inputRef.current?.focus();
+            inputRef.current?.select();
+            const timer = setTimeout(() => setAnnouncing(true), 0);
+            return () => clearTimeout(timer);
+        }
+        const pending = pendingRef.current;
+        pendingRef.current = null;
+        pending?.();
+        const opener = openerRef.current;
+        openerRef.current = null;
+        const focus = document.activeElement;
+        const lost = !focus ||
+            focus === document.body ||
+            (nodeRef.current?.contains(focus) ?? false);
+        if (lost && opener instanceof HTMLElement && opener.isConnected)
+            opener.focus();
+    }, [open, nodeRef]);
+    const activeRow = active ? rowId(active) : undefined;
+    const firstActive = active !== undefined && active === items[0];
+    useEffect(() => {
+        if (!activeRow)
+            return;
+        // The first row brings its group's caption back into view too.
+        const list = document.getElementById(listId);
+        if (firstActive && list)
+            list.scrollTop = 0;
+        else
+            document
+                .getElementById(activeRow)
+                ?.scrollIntoView?.({ block: 'nearest' });
+    }, [activeRow, firstActive, listId]);
+    function choose(item) {
+        pendingRef.current = item.onSelect;
+        onOpenChange(false);
+    }
+    function move(step) {
+        if (items.length === 0)
+            return;
+        const index = active ? items.indexOf(active) : -1;
+        const next = items[(index + step + items.length) % items.length];
+        setActiveId(next?.id);
+    }
+    function onFieldKeyDown(event) {
+        if (event.nativeEvent.isComposing || event.keyCode === 229)
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            move(event.key === 'ArrowDown' ? 1 : -1);
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            if (active)
+                choose(active);
+        }
+    }
+    function onActivate(item, event) {
+        // A list scrolled under a still pointer reports a move with no movement.
+        const last = pointerAt.current;
+        pointerAt.current = { x: event.clientX, y: event.clientY };
+        if (last && last.x === event.clientX && last.y === event.clientY)
+            return;
+        setActiveId(item.id);
+    }
+    // A press anywhere but the field keeps focus in it, so the keys work on.
+    function keepFocus(event) {
+        if (event.target !== inputRef.current)
+            event.preventDefault();
+    }
+    const status = statusWords(props, items.length);
+    const showEmpty = !loading && items.length === 0;
+    return (_jsx("dialog", { ref: nodeRef, "aria-label": label, className: "sw-command-palette", ...handlers, children: open ? (_jsxs("div", { className: "sw-command-palette-body", onMouseDown: keepFocus, children: [_jsx("input", { "aria-activedescendant": activeRow, "aria-autocomplete": "list", "aria-controls": listId, "aria-expanded": items.length > 0, "aria-label": label, autoComplete: "off", className: "sw-command-palette-field", onChange: (event) => {
+                        setActiveId(undefined);
+                        onQueryChange(event.target.value);
+                    }, onKeyDown: onFieldKeyDown, placeholder: placeholder, ref: inputRef, role: "combobox", spellCheck: false, type: "text", value: query }), _jsx(PaletteList, { activeId: active?.id, groups: groups, label: label, listId: listId, onActivate: onActivate, onChoose: choose, rowId: rowId }), loading || showEmpty ? (_jsx("p", { "aria-hidden": "true", className: "sw-command-palette-message", children: loading ? loadingText : props.emptyText })) : null, _jsx("div", { className: "sw-sr-only", role: "status", children: announcing ? status : '' }), hint ? _jsx("p", { className: "sw-command-palette-hint", children: hint }) : null] })) : null }));
+}

package/dist/components/CommandPaletteTrigger.d.ts

@@ -0,0 +1,9 @@
+import { type CommandPaletteTriggerProps } from './command-palette/types.js';
+export type { CommandPaletteTriggerProps } from './command-palette/types.js';
+/**
+ * The button that opens a CommandPalette: a search-looking pill holding the
+ * glyph, the placeholder words and a key hint, or with `compact` the glyph
+ * alone in a round quiet button. Named by `label`; the hint is hidden from
+ * assistive technology. Blank words or a missing glyph throw a `RangeError`.
+ */
+export declare function CommandPaletteTrigger(props: CommandPaletteTriggerProps): import("react").JSX.Element;

package/dist/components/CommandPaletteTrigger.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../class-names.js';
+import { tabStop } from '../tab-stop.js';
+import { assertCommandPaletteTrigger } from './command-palette/validate.js';
+/**
+ * The button that opens a CommandPalette: a search-looking pill holding the
+ * glyph, the placeholder words and a key hint, or with `compact` the glyph
+ * alone in a round quiet button. Named by `label`; the hint is hidden from
+ * assistive technology. Blank words or a missing glyph throw a `RangeError`.
+ */
+export function CommandPaletteTrigger(props) {
+    assertCommandPaletteTrigger(props);
+    const { compact = false, icon, label, onPress, placeholder, shortcutLabel, } = props;
+    return (_jsxs("button", { "aria-haspopup": "dialog", "aria-label": label, className: cx('sw-command-palette-trigger', compact && 'sw-command-palette-trigger-compact'), onClick: onPress, tabIndex: tabStop, type: "button", children: [_jsx("span", { "aria-hidden": "true", className: "sw-command-palette-trigger-icon", children: icon }), compact ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: "sw-command-palette-trigger-text", children: placeholder }), shortcutLabel ? (_jsx("span", { "aria-hidden": "true", className: "sw-command-palette-key", children: shortcutLabel })) : null] }))] }));
+}

package/dist/components/ContextSwitcher.d.ts

@@ -0,0 +1,12 @@
+import { contextSwitcherTriggerAppearances, type ContextSwitcherTriggerAppearance, contextSwitcherWidths, type ContextSwitcherWidth } from '../css/css-context-switcher-trigger.js';
+import { type ContextSwitcherProps } from './context-switcher/types.js';
+export type { ContextSwitcherAction, ContextSwitcherBadge, ContextSwitcherFilter, ContextSwitcherGroup, ContextSwitcherOption, ContextSwitcherProps, } from './context-switcher/types.js';
+export { contextSwitcherTriggerAppearances, contextSwitcherWidths, type ContextSwitcherTriggerAppearance, type ContextSwitcherWidth, };
+/**
+ * A button showing the context in use (a workspace, a competition, a
+ * season) that opens a popup to switch it: an optional filter field, the
+ * options in groups as a listbox (the current one checked), and commands
+ * in a footer. Invalid groups, options, words or props throw a
+ * `RangeError`.
+ */
+export declare function ContextSwitcher(props: ContextSwitcherProps): import("react").JSX.Element;

package/dist/components/ContextSwitcher.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { cx } from '../class-names.js';
+import { contextSwitcherTriggerAppearances, contextSwitcherTriggerClass, contextSwitcherWidths, } from '../css/css-context-switcher-trigger.js';
+import { tabStop } from '../tab-stop.js';
+import { optionCount } from './context-switcher/options.js';
+import { SwitcherPopup } from './context-switcher/SwitcherPopup.js';
+import { assertContextSwitcher } from './context-switcher/validate.js';
+export { contextSwitcherTriggerAppearances, contextSwitcherWidths, };
+/**
+ * A button showing the context in use (a workspace, a competition, a
+ * season) that opens a popup to switch it: an optional filter field, the
+ * options in groups as a listbox (the current one checked), and commands
+ * in a footer. Invalid groups, options, words or props throw a
+ * `RangeError`.
+ */
+export function ContextSwitcher(props) {
+    assertContextSwitcher(props);
+    const { actions = [], align = 'start', currentId, filter, groups, label, onSelect, trigger, triggerAppearance = 'framed', width = 'content', } = props;
+    const [open, setOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const pressedRef = useRef(false);
+    const labelId = useId();
+    const contentId = useId();
+    const current = groups
+        .flatMap((group) => group.options)
+        .find((option) => option.id === currentId);
+    const showFilter = filter !== undefined && optionCount(groups) >= (filter.minOptions ?? 0);
+    function close(refocus) {
+        setOpen(false);
+        if (refocus)
+            triggerRef.current?.focus();
+    }
+    function onTriggerKeyDown(event) {
+        if (!open && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            event.preventDefault();
+            setOpen(true);
+        }
+    }
+    function runAction(action) {
+        // Focus is back on the trigger first, so a dialog the command opens
+        // returns focus there when it closes.
+        close(true);
+        action.onSelect();
+    }
+    const icon = triggerAppearance === 'icon';
+    // The name is what is switched, then what the trigger shows (for a glyph
+    // alone, the current option's label).
+    const labelledBy = icon && !current ? labelId : `${labelId} ${contentId}`;
+    return (_jsxs("div", { className: cx('sw-context-switcher', width === 'full' && 'sw-context-switcher-full'), children: [_jsxs("button", { "aria-expanded": open, "aria-haspopup": "dialog", "aria-labelledby": labelledBy, className: cx('sw-context-switcher-trigger', contextSwitcherTriggerClass(triggerAppearance)), onClick: () => (open ? close(true) : setOpen(true)), onKeyDown: onTriggerKeyDown, onPointerDown: () => {
+                    pressedRef.current = true;
+                }, onPointerUp: () => {
+                    pressedRef.current = false;
+                }, onPointerLeave: () => {
+                    pressedRef.current = false;
+                }, ref: triggerRef, tabIndex: tabStop, type: "button", children: [_jsx("span", { className: "sw-sr-only", id: labelId, children: label }), _jsx("span", { "aria-hidden": icon ? true : undefined, className: "sw-context-switcher-trigger-content", id: icon ? undefined : contentId, children: trigger }), icon && current ? (_jsx("span", { className: "sw-sr-only", id: contentId, children: current.label })) : null] }), open ? (_jsx(SwitcherPopup, { actions: actions, align: align, currentId: currentId, filter: showFilter ? filter : undefined, groups: groups, label: label, onAction: runAction, onChoose: (entry) => {
+                    close(true);
+                    if (entry.option.id !== currentId)
+                        onSelect(entry.option);
+                }, onClose: close, triggerPressed: () => pressedRef.current, triggerRef: triggerRef })) : null] }));
+}

package/dist/components/FixtureGroup.d.ts

@@ -0,0 +1,9 @@
+import { type FixtureGroupProps } from './fixture/types.js';
+export type { FixtureGroupProps } from './fixture/types.js';
+/**
+ * A run of fixtures under a caption, such as a match day at a venue: the
+ * caption names a list of FixtureRows, whose columns line up across the
+ * run (one grid, each row a subgrid of it). A blank title throws a
+ * `RangeError`.
+ */
+export declare function FixtureGroup({ children, title }: FixtureGroupProps): import("react").JSX.Element;

package/dist/components/FixtureGroup.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { FixtureListContext } from './fixture/fixture-list-context.js';
+/**
+ * A run of fixtures under a caption, such as a match day at a venue: the
+ * caption names a list of FixtureRows, whose columns line up across the
+ * run (one grid, each row a subgrid of it). A blank title throws a
+ * `RangeError`.
+ */
+export function FixtureGroup({ children, title }) {
+    if (typeof title !== 'string' || !title.trim())
+        throw new RangeError('FixtureGroup title must be nonempty');
+    const titleId = useId();
+    return (_jsxs("div", { className: "sw-fixture-group", children: [_jsx("div", { className: "sw-fixture-group-title", id: titleId, children: title }), _jsx("ul", { "aria-labelledby": titleId, className: "sw-fixture-list", role: "list", children: _jsx(FixtureListContext.Provider, { value: true, children: children }) })] }));
+}

package/dist/components/FixtureRow.d.ts

@@ -0,0 +1,10 @@
+import { type FixtureRowProps } from './fixture/types.js';
+export type { FixtureRowProps, FixtureSide, FixtureStatus, } from './fixture/types.js';
+/**
+ * One fixture in a FixtureGroup: the home side ending at the centre, the
+ * kickoff time or score in the middle, the away side starting from it, then
+ * the details and a status at the end (under the sides below `md`). With
+ * `href` or `onPress` the whole row is a link or a button with a chevron.
+ * Invalid words or props throw a `RangeError`.
+ */
+export declare function FixtureRow(props: FixtureRowProps): import("react").JSX.Element;

package/dist/components/FixtureRow.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cx } from '../class-names.js';
+import { hideClass } from '../css/breakpoints.js';
+import { tabStop } from '../tab-stop.js';
+import { Badge } from './Badge.js';
+import { useFixtureList } from './fixture/fixture-list-context.js';
+import { assertFixtureRow } from './fixture/validate.js';
+import { plainPress } from './link-press.js';
+import { hasSlot } from './slot.js';
+/** One side: its name, and its mark on the centre's side (hidden). */
+function Side({ side, place }) {
+    const mark = hasSlot(side.mark) ? (_jsx("span", { "aria-hidden": "true", className: "sw-fixture-mark", children: side.mark })) : null;
+    return (_jsxs("span", { className: `sw-fixture-team sw-fixture-team-${place}`, children: [place === 'away' ? mark : null, _jsx("span", { className: "sw-fixture-name", children: side.name }), place === 'home' ? mark : null] }));
+}
+/**
+ * One fixture in a FixtureGroup: the home side ending at the centre, the
+ * kickoff time or score in the middle, the away side starting from it, then
+ * the details and a status at the end (under the sides below `md`). With
+ * `href` or `onPress` the whole row is a link or a button with a chevron.
+ * Invalid words or props throw a `RangeError`.
+ */
+export function FixtureRow(props) {
+    useFixtureList();
+    assertFixtureRow(props);
+    const { away, center, centerKind = 'time', home, href, meta, metaHideBelow, onPress, status, 'aria-label': ariaLabel, } = props;
+    const hasMeta = hasSlot(meta);
+    const pressable = href !== undefined || onPress !== undefined;
+    // Spaces as their own text nodes keep the parts apart in the name.
+    const parts = (_jsxs(_Fragment, { children: [_jsx(Side, { place: "home", side: home }), ' ', _jsx("span", { className: `sw-fixture-center sw-fixture-center-${centerKind}`, children: center }), ' ', _jsx(Side, { place: "away", side: away }), hasMeta || status ? (_jsxs(_Fragment, { children: [' ', _jsxs("span", { className: "sw-fixture-end", children: [hasMeta ? (_jsx("span", { className: cx('sw-fixture-meta', metaHideBelow && hideClass('below', metaHideBelow)), children: meta })) : null, hasMeta && status ? ' ' : null, status ? (_jsx(Badge, { size: "sm", tone: status.tone, children: status.label })) : null] })] })) : null, pressable ? (_jsx("span", { "aria-hidden": "true", className: "sw-fixture-chevron" })) : null] }));
+    let row;
+    if (href !== undefined)
+        row = (_jsx("a", { "aria-label": ariaLabel, className: "sw-fixture-row sw-fixture-row-pressable", href: href, onClick: onPress
+                ? (event) => {
+                    if (!plainPress(event))
+                        return;
+                    event.preventDefault();
+                    onPress(event);
+                }
+                : undefined, tabIndex: tabStop, children: parts }));
+    else if (onPress !== undefined)
+        row = (_jsx("button", { "aria-label": ariaLabel, className: "sw-fixture-row sw-fixture-row-pressable", onClick: onPress, tabIndex: tabStop, type: "button", children: parts }));
+    else
+        row = _jsx("div", { className: "sw-fixture-row", children: parts });
+    return _jsx("li", { className: "sw-fixture-item", children: row });
+}

package/dist/components/GlyphTile.d.ts

@@ -10,12 +10,18 @@ export type GlyphTileProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' |
     hue: GlyphTileHue;
     /** `sm` 24, `md` 28 (default), `lg` 32. */
     size?: GlyphTileSize;
-    /** The consumer's glyph (Lucide), drawn in white at spacing step 4. */
+    /**
+     * The consumer's glyph (Lucide), drawn in white at spacing step 4; or, as
+     * a single string or number child, up to three letters, such as a team's
+     * initials ("NSL"), sized from the tile (smaller for more letters) so
+     * they fit every size.
+     */
     children: ReactNode;
 };
 /**
- * A small rounded square in a categorical colour holding a white glyph: a
- * kind's mark beside its name, such as a service in a list. Decorative
+ * A small rounded square in a categorical colour holding a white glyph (or
+ * up to three letters): a kind's mark beside its name, such as a service in
+ * a list. Decorative
  * (`aria-hidden`): the visible label beside it carries the meaning.
  */
 export declare function GlyphTile({ children, className, hue, size, ...rest }: GlyphTileProps): import("react").JSX.Element;

package/dist/components/GlyphTile.js

@@ -1,11 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isCategoricalColor } from '@scalewing/tokens';
 import { cx } from '../class-names.js';
-import { glyphTileSizes } from '../css/css-glyph-tile.js';
+import { glyphTileLetterLimit, glyphTileSizes, } from '../css/css-glyph-tile.js';
 export { glyphTileSizes };
+/** The letters of a single string or number child, or null for a glyph. */
+function tileLetters(children) {
+    if (typeof children !== 'string' && typeof children !== 'number')
+        return null;
+    return [...String(children).trim()];
+}
 /**
- * A small rounded square in a categorical colour holding a white glyph: a
- * kind's mark beside its name, such as a service in a list. Decorative
+ * A small rounded square in a categorical colour holding a white glyph (or
+ * up to three letters): a kind's mark beside its name, such as a service in
+ * a list. Decorative
  * (`aria-hidden`): the visible label beside it carries the meaning.
  */
 export function GlyphTile({ children, className, hue, size = 'md', ...rest }) {
@@ -13,5 +20,9 @@ export function GlyphTile({ children, className, hue, size = 'md', ...rest }) {
         throw new RangeError(`Unknown GlyphTile hue: ${String(hue)}`);
     if (!glyphTileSizes.includes(size))
         throw new RangeError(`Unknown GlyphTile size: ${String(size)}`);
-    return (_jsx("span", { ...rest, "aria-hidden": "true", className: cx('sw-glyph-tile', `sw-glyph-tile-${hue}`, `sw-glyph-tile-${size}`, className), children: children }));
+    const letters = tileLetters(children);
+    if (letters &&
+        (letters.length === 0 || letters.length > glyphTileLetterLimit))
+        throw new RangeError(`GlyphTile letters are 1 to ${glyphTileLetterLimit} characters: ${String(children)}`);
+    return (_jsx("span", { ...rest, "aria-hidden": "true", className: cx('sw-glyph-tile', `sw-glyph-tile-${hue}`, `sw-glyph-tile-${size}`, className), children: letters ? (_jsx("span", { className: `sw-glyph-tile-text sw-glyph-tile-text-${letters.length}`, children: letters.join('') })) : (children) }));
 }

package/dist/components/SiteFooter.d.ts

@@ -0,0 +1,12 @@
+import { type SiteFooterProps } from './site-footer/types.js';
+export type { SiteFooterGroup, SiteFooterLink, SiteFooterProps, } from './site-footer/types.js';
+/**
+ * A public site's footer on the dark inverse band: the brand and a tagline,
+ * groups of links (each a `nav` named by its label, its label shown above
+ * its links), and a bottom row past a hairline with the legal line at its
+ * start and, say, a language switch at its end. Below `md` the brand takes
+ * the full width and the groups two columns; from `md` the brand and the
+ * groups share one row. A brand moves the band with a theme overlay of
+ * `inverse`. Invalid groups or links throw a `RangeError`.
+ */
+export declare function SiteFooter({ brand, end, groups, legal, tagline, }: SiteFooterProps): import("react").JSX.Element;

package/dist/components/SiteFooter.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Band } from './Band.js';
+import { assertSiteFooterGroups } from './site-footer/validate.js';
+import { tabStop } from '../tab-stop.js';
+/** Whether an optional slot draws anything: not left out, empty or `false`. */
+function shown(node) {
+    return node !== undefined && node !== null && node !== false && node !== '';
+}
+/**
+ * A public site's footer on the dark inverse band: the brand and a tagline,
+ * groups of links (each a `nav` named by its label, its label shown above
+ * its links), and a bottom row past a hairline with the legal line at its
+ * start and, say, a language switch at its end. Below `md` the brand takes
+ * the full width and the groups two columns; from `md` the brand and the
+ * groups share one row. A brand moves the band with a theme overlay of
+ * `inverse`. Invalid groups or links throw a `RangeError`.
+ */
+export function SiteFooter({ brand, end, groups, legal, tagline, }) {
+    assertSiteFooterGroups(groups);
+    const hasLegal = shown(legal);
+    const hasEnd = shown(end);
+    return (_jsxs(Band, { as: "footer", className: "sw-site-footer", paddingBottom: 6, tone: "inverse", children: [_jsxs("div", { className: "sw-site-footer-top", children: [_jsxs("div", { className: "sw-site-footer-brand", children: [brand, tagline ? _jsx("p", { className: "sw-site-footer-tagline", children: tagline }) : null] }), groups.map((group) => (_jsxs("nav", { "aria-label": group.label, className: "sw-site-footer-group", children: [_jsx("p", { "aria-hidden": "true", className: "sw-site-footer-label", children: group.label }), _jsx("ul", { className: "sw-site-footer-links", children: group.links.map((link) => (_jsx("li", { children: _jsx("a", { "aria-current": link.current ? 'page' : undefined, className: "sw-site-footer-link", href: link.href, hrefLang: link.hrefLang, lang: link.lang, tabIndex: tabStop, children: link.label }) }, link.id))) })] }, group.id)))] }), hasLegal || hasEnd ? (_jsxs("div", { className: "sw-site-footer-bottom", children: [hasLegal ? (_jsx("div", { className: "sw-site-footer-legal", children: legal })) : null, hasEnd ? _jsx("div", { className: "sw-site-footer-end", children: end }) : null] })) : null] }));
+}

package/dist/components/SiteHeader.d.ts

@@ -0,0 +1,14 @@
+import { type SiteHeaderProps } from './site-header/types.js';
+export type { SiteHeaderItem, SiteHeaderLabels, SiteHeaderProps, } from './site-header/types.js';
+/**
+ * A public site's header: the brand at the start; from `lg` the main
+ * destinations as a row of links (the current one marked by weight and a
+ * bar under it) and the bar's actions at the end; below `lg` the compact
+ * actions and a menu button that opens the destinations and the menu's
+ * actions over the page under the bar. The menu is a native `details`, so
+ * it opens and closes by touch, click and keyboard with no script, as a
+ * page rendered on the server needs; script adds Escape (focus back on the
+ * button) and closes it when a link is chosen or focus leaves it. It traps
+ * no focus. Invalid items or words throw a `RangeError`.
+ */
+export declare function SiteHeader({ actions, brand, closeIcon, compactActions, items, labels, menuActions, menuIcon, navLabel, sticky, }: SiteHeaderProps): import("react").JSX.Element;

package/dist/components/SiteHeader.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { cx } from '../class-names.js';
+import { SiteHeaderLinks } from './site-header/SiteHeaderLinks.js';
+import { useMenuDismiss } from './site-header/use-menu-dismiss.js';
+import { assertSiteHeaderProps } from './site-header/validate.js';
+/**
+ * A public site's header: the brand at the start; from `lg` the main
+ * destinations as a row of links (the current one marked by weight and a
+ * bar under it) and the bar's actions at the end; below `lg` the compact
+ * actions and a menu button that opens the destinations and the menu's
+ * actions over the page under the bar. The menu is a native `details`, so
+ * it opens and closes by touch, click and keyboard with no script, as a
+ * page rendered on the server needs; script adds Escape (focus back on the
+ * button) and closes it when a link is chosen or focus leaves it. It traps
+ * no focus. Invalid items or words throw a `RangeError`.
+ */
+export function SiteHeader({ actions, brand, closeIcon, compactActions, items, labels, menuActions, menuIcon, navLabel, sticky = true, }) {
+    assertSiteHeaderProps({ items, labels, navLabel });
+    const menuRef = useRef(null);
+    useMenuDismiss(menuRef);
+    return (_jsx("header", { className: cx('sw-site-header', sticky && 'sw-site-header-sticky'), children: _jsxs("div", { className: "sw-site-header-bar", children: [_jsx("div", { className: "sw-site-header-brand", children: brand }), _jsx(SiteHeaderLinks, { className: "sw-site-header-nav", items: items, navLabel: navLabel }), actions ? (_jsx("div", { className: "sw-site-header-actions", children: actions })) : null, _jsxs("div", { className: "sw-site-header-compact", children: [compactActions, _jsxs("details", { className: "sw-site-header-menu", ref: menuRef, children: [_jsxs("summary", { className: "sw-site-header-menu-button", children: [_jsxs("span", { className: "sw-site-header-menu-open", children: [_jsx("span", { "aria-hidden": "true", className: "sw-site-header-glyph", children: menuIcon }), _jsx("span", { className: "sw-sr-only", children: labels.openMenu })] }), _jsxs("span", { className: "sw-site-header-menu-close", children: [_jsx("span", { "aria-hidden": "true", className: "sw-site-header-glyph", children: closeIcon }), _jsx("span", { className: "sw-sr-only", children: labels.closeMenu })] })] }), _jsxs("div", { className: "sw-site-header-panel", children: [_jsx(SiteHeaderLinks, { className: "sw-site-header-menu-nav", items: items, navLabel: navLabel }), menuActions ? (_jsx("div", { className: "sw-site-header-menu-actions", children: menuActions })) : null] })] })] })] }) }));
+}

package/dist/components/Skeleton.d.ts

@@ -0,0 +1,22 @@
+import { skeletonVariants, type SkeletonVariant } from '../css/css-skeleton.js';
+export { skeletonVariants, type SkeletonVariant };
+export type SkeletonProps = {
+    /**
+     * What is loading, in the consumer's words ("Loading this week's
+     * games"): the status's words, read once politely; the bars are hidden.
+     */
+    label: string;
+    /** How many bars (`lines`) or rows (`rows`), 1 to 6; 3 by default. */
+    lines?: number;
+    /**
+     * `lines` (default) is bars of text in a column, the last one shorter;
+     * `rows` is list rows (a mark and a bar) with hairlines between them.
+     */
+    variant?: SkeletonVariant;
+};
+/**
+ * Grey placeholder bars where content is loading, in place of a spinner:
+ * a polite status named by `label`, the bars decorative. They pulse
+ * gently, and stay still when reduced motion is asked for.
+ */
+export declare function Skeleton({ label, lines, variant, }: SkeletonProps): import("react").JSX.Element;