@scalewing/react 1.47.0 → 1.49.0

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/Grid.d.ts

@@ -1,14 +1,22 @@
 import { type SpacingStep } from '@scalewing/tokens';
 import { type Breakpoint } from '../css/breakpoints.js';
-import { type GridColumns } from '../css/css-grid.js';
+import { type GridColumns, type GridFit, gridFits } from '../css/css-grid.js';
 import { type BoxProps } from './Box.js';
 import { type Align } from './Stack.js';
-export type { GridColumns };
+export { gridFits, type GridColumns, type GridFit };
 export type GridProps = BoxProps & {
     /** Where each child sits in the height of its row; unset, children stretch. */
     align?: Align;
     columns?: GridColumns;
     columnsBelow?: Partial<Record<Breakpoint, GridColumns>>;
+    /**
+     * Fits the columns to the grid's width instead of a fixed count: as many
+     * as fit at the named minimum (`narrow` 15rem, `medium` 16.25rem, `wide`
+     * 18.75rem), sharing the row, one column when narrower. Not with
+     * `columns` or `columnsBelow`; a child's `columnSpan` is ignored in a
+     * fitted grid, where every child takes one column.
+     */
+    fit?: GridFit;
     gap?: SpacingStep;
 };
-export declare function Grid({ align, className, columns, columnsBelow, gap, ...rest }: GridProps): import("react").JSX.Element;
+export declare function Grid({ align, className, columns, columnsBelow, fit, gap, ...rest }: GridProps): import("react").JSX.Element;

package/dist/components/Grid.js

@@ -1,12 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../class-names.js';
 import { breakpoints } from '../css/breakpoints.js';
-import { gridColumnsBelowClass, gridColumnsClass, } from '../css/css-grid.js';
+import { gridColumnsBelowClass, gridColumnsClass, gridFitClass, gridFits, } from '../css/css-grid.js';
 import { spacingClass } from '../css/spacing-classes.js';
 import { assertGridCount } from '../grid-counts.js';
+import { isOneOf } from '../is-one-of.js';
 import { Box } from './Box.js';
-export function Grid({ align, className, columns = 1, columnsBelow, gap = 0, ...rest }) {
-    assertGridCount('columns', columns);
+export { gridFits };
+export function Grid({ align, className, columns, columnsBelow, fit, gap = 0, ...rest }) {
+    if (fit !== undefined) {
+        if (!isOneOf(gridFits, fit))
+            throw new RangeError(`Unknown Grid fit: ${String(fit)}`);
+        if (columns !== undefined || columnsBelow !== undefined)
+            throw new RangeError('A fitted Grid takes no columns or columnsBelow; fit sets them');
+    }
+    const fixedColumns = columns ?? 1;
+    assertGridCount('columns', fixedColumns);
     const belowClasses = breakpoints.flatMap((breakpoint) => {
         const count = columnsBelow?.[breakpoint];
         if (count === undefined)
@@ -14,5 +23,5 @@ export function Grid({ align, className, columns = 1, columnsBelow, gap = 0, ...
         assertGridCount('columnsBelow', count);
         return [gridColumnsBelowClass(breakpoint, count)];
     });
-    return (_jsx(Box, { className: cx('sw-grid', gridColumnsClass(columns), ...belowClasses, spacingClass('gap', 'all', gap), align && `sw-align-${align}`, className), ...rest }));
+    return (_jsx(Box, { className: cx('sw-grid', fit ? gridFitClass(fit) : gridColumnsClass(fixedColumns), ...belowClasses, spacingClass('gap', 'all', gap), align && `sw-align-${align}`, className), ...rest }));
 }

package/dist/components/Hero.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type HeroProps = Omit<HTMLAttributes<HTMLElement>, 'aria-labelledby' | 'children' | 'style' | 'title'> & {
+    /** The page's title, its one `h1`, in the `hero` size. */
+    title: ReactNode;
+    /** A short line above the title saying who or what the page is for. */
+    eyebrow?: ReactNode;
+    /** The sentence under the title, in the `lead` size. */
+    lead?: ReactNode;
+    /**
+     * Links or buttons in a row, stacked to the full width below `md`. Leave
+     * it out rather than passing an empty fragment, which keeps the row.
+     */
+    actions?: ReactNode;
+    /**
+     * A picture beside the words from `md`, under them below it. Leave it out
+     * rather than passing an empty fragment, which keeps its column.
+     */
+    media?: ReactNode;
+};
+/**
+ * A public page's opening, as a `section` named by its title: an optional
+ * eyebrow, the title (`h1`, `hero` size), an optional lead (`lead` size)
+ * and actions, with an optional picture beside them from `md`. The title
+ * always names the section. A blank title throws a `RangeError`.
+ */
+export declare function Hero({ actions, className, eyebrow, lead, media, title, ...rest }: HeroProps): import("react").JSX.Element;

package/dist/components/Hero.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cx } from '../class-names.js';
+import { Text } from './Text.js';
+function isBlank(node) {
+    return (node === undefined ||
+        node === null ||
+        node === false ||
+        (typeof node === 'string' && node.trim() === ''));
+}
+/**
+ * A public page's opening, as a `section` named by its title: an optional
+ * eyebrow, the title (`h1`, `hero` size), an optional lead (`lead` size)
+ * and actions, with an optional picture beside them from `md`. The title
+ * always names the section. A blank title throws a `RangeError`.
+ */
+export function Hero({ actions, className, eyebrow, lead, media, title, ...rest }) {
+    const titleId = useId();
+    if (isBlank(title))
+        throw new RangeError('A Hero needs a title');
+    const withMedia = !isBlank(media);
+    return (_jsxs("section", { ...rest, "aria-labelledby": titleId, className: cx('sw-hero', withMedia && 'sw-hero-with-media', className), children: [_jsxs("div", { className: "sw-hero-text", children: [isBlank(eyebrow) ? null : (_jsx(Text, { color: "muted", as: "p", variant: "label", children: eyebrow })), _jsx(Text, { id: titleId, variant: "hero", children: title }), isBlank(lead) ? null : _jsx(Text, { variant: "lead", children: lead }), isBlank(actions) ? null : (_jsx("div", { className: "sw-hero-actions", children: actions }))] }), withMedia ? _jsx("div", { className: "sw-hero-media", children: media }) : null] }));
+}

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;

package/dist/components/Skeleton.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cx } from '../class-names.js';
+import { skeletonLineRange, skeletonVariants, } from '../css/css-skeleton.js';
+import { isOneOf } from '../is-one-of.js';
+export { skeletonVariants };
+/** Fails closed on blank words, a count outside 1–6 or an unknown variant. */
+function assertSkeleton({ label, lines, variant }) {
+    if (typeof label !== 'string' || !label.trim())
+        throw new RangeError('Skeleton label must be nonempty');
+    if (!Number.isInteger(lines) ||
+        lines < skeletonLineRange.min ||
+        lines > skeletonLineRange.max)
+        throw new RangeError(`Skeleton lines must be a whole number from ${skeletonLineRange.min} to ${skeletonLineRange.max}: ${String(lines)}`);
+    if (!isOneOf(skeletonVariants, variant))
+        throw new RangeError(`Skeleton variant must be one of ${skeletonVariants.join(', ')}`);
+}
+/**
+ * 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 function Skeleton({ label, lines = 3, variant = 'lines', }) {
+    assertSkeleton({ label, lines, variant });
+    const labelId = useId();
+    // The bars and rows are divs and the words a span, so the generated
+    // :nth-of-type widths count bars only.
+    const places = Array.from({ length: lines }, (_, index) => index);
+    return (_jsxs("div", { "aria-labelledby": labelId, className: cx('sw-skeleton', `sw-skeleton-${variant}`), role: "status", children: [_jsx("span", { className: "sw-sr-only", id: labelId, children: label }), places.map((place) => variant === 'rows' ? (_jsxs("div", { "aria-hidden": "true", className: "sw-skeleton-row", children: [_jsx("div", { className: "sw-skeleton-mark" }), _jsx("div", { className: "sw-skeleton-bar" })] }, place)) : (_jsx("div", { "aria-hidden": "true", className: "sw-skeleton-bar" }, place)))] }));
+}

package/dist/components/Stepper.d.ts

@@ -36,8 +36,18 @@ export type StepperProps = {
     disabled?: boolean;
     /** Readable and focusable, never changed: the buttons are hidden and keep their room. */
     readOnly?: boolean;
-    /** Says the count in words for assistive technology (`aria-valuetext`), such as "12 straps". */
+    /**
+     * Says the count in words for assistive technology (`aria-valuetext`),
+     * such as "12 straps". It wins over the count and `unit` read together.
+     */
     valueText?: string;
+    /**
+     * A short muted word after the count, inside its frame, such as "min".
+     * Without `valueText` the count is read with it ("90 min"), word for
+     * word: a unit that changes with the count ("players") reads "1 players",
+     * so pass `valueText` with the right form ("1 player"). Not blank.
+     */
+    unit?: string;
     /**
      * Ids of elements that describe the count, such as the value it adds up
      * to; read before an `error`'s message.

package/dist/components/Stepper.js

@@ -2,9 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, useState, } from 'react';
 import { cx } from '../class-names.js';
-import { assertStepperBounds, readStepperEntry, stepperMoves, stepperText, } from '../stepper-count.js';
+import { assertStepperBounds, assertStepperUnit, readStepperEntry, stepperMoves, stepperText, stepperValueText, } from '../stepper-count.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { FieldLabelText } from './FieldLabelText.js';
+import { StepperCountFrame } from './stepper/StepperCountFrame.js';
 export const stepperLimitAppearances = ['faded', 'plain'];
 /** Keeps focus where it was (the count, or nowhere) when a button is pressed. */
 function keepFocus(event) {
@@ -15,9 +16,10 @@ function keepFocus(event) {
  * tab stop (the count, a spin button that ArrowUp and ArrowDown step), with
  * the buttons as pointer targets beside it. − stops at `min`, + at `max`.
  */
-export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden = false, value, onChange, min = 0, max = Number.POSITIVE_INFINITY, step = 1, decrementLabel, incrementLabel, error, changed = false, disabled = false, readOnly = false, valueText, 'aria-describedby': describedBy, placeholder, name, width = 'fixed', limitAppearance = 'faded', }, ref) {
+export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden = false, value, onChange, min = 0, max = Number.POSITIVE_INFINITY, step = 1, decrementLabel, incrementLabel, error, changed = false, disabled = false, readOnly = false, valueText, unit, 'aria-describedby': describedBy, placeholder, name, width = 'fixed', limitAppearance = 'faded', }, ref) {
     const bounds = { min, max, step };
     assertStepperBounds(bounds);
+    assertStepperUnit(unit);
     if (!stepperLimitAppearances.includes(limitAppearance))
         throw new RangeError(`Unknown Stepper limitAppearance: ${String(limitAppearance)}`);
     if (value !== null && !Number.isSafeInteger(value))
@@ -76,10 +78,10 @@ export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden
     return (_jsxs("div", { className: cx('sw-stepper', width === 'full' && 'sw-stepper-full', invalid && 'sw-stepper-invalid', changed && !invalid && 'sw-stepper-changed', readOnly && 'sw-stepper-readonly', limitAppearance === 'plain' &&
             !disabled &&
             !readOnly &&
-            'sw-stepper-limit-plain'), children: [_jsx("label", { className: labelVisuallyHidden ? 'sw-sr-only' : undefined, htmlFor: inputId, id: labelId, children: _jsx(FieldLabelText, { label: label }) }), _jsxs("div", { "aria-labelledby": labelId, className: "sw-stepper-track", role: "group", children: [_jsx("button", { "aria-controls": inputId, "aria-label": decrementLabel, className: "sw-stepper-button", disabled: moves.down === null, onClick: () => move(moves.down), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: '−' }) }), _jsx("input", { ref: ref, "aria-describedby": [describedBy?.trim() || null, invalid ? errorId : null]
-                            .filter((id) => id !== null)
-                            .join(' ') || undefined, "aria-invalid": invalid || undefined, "aria-valuemax": Number.isFinite(max) ? max : undefined, "aria-valuemin": min, "aria-valuenow": value ?? undefined, "aria-valuetext": valueText, autoComplete: "off", className: "sw-stepper-input", disabled: disabled, id: inputId, 
-                        // iOS's numeric pad has no minus key, so a range below zero takes
-                        // the text keyboard.
-                        inputMode: allowsNegative ? 'text' : 'numeric', name: name, onBlur: () => setDraft(null), onChange: onType, onKeyDown: onKeyDown, placeholder: placeholder, readOnly: readOnly, role: "spinbutton", type: "text", value: text }), _jsx("button", { "aria-controls": inputId, "aria-label": incrementLabel, className: "sw-stepper-button", disabled: moves.up === null, onClick: () => move(moves.up), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: "+" }) })] }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }));
+            'sw-stepper-limit-plain'), children: [_jsx("label", { className: labelVisuallyHidden ? 'sw-sr-only' : undefined, htmlFor: inputId, id: labelId, children: _jsx(FieldLabelText, { label: label }) }), _jsxs("div", { "aria-labelledby": labelId, className: "sw-stepper-track", role: "group", children: [_jsx("button", { "aria-controls": inputId, "aria-label": decrementLabel, className: "sw-stepper-button", disabled: moves.down === null, onClick: () => move(moves.down), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: '−' }) }), _jsx(StepperCountFrame, { unit: unit, children: _jsx("input", { ref: ref, "aria-describedby": [describedBy?.trim() || null, invalid ? errorId : null]
+                                .filter((id) => id !== null)
+                                .join(' ') || undefined, "aria-invalid": invalid || undefined, "aria-valuemax": Number.isFinite(max) ? max : undefined, "aria-valuemin": min, "aria-valuenow": value ?? undefined, "aria-valuetext": stepperValueText(value, unit, valueText), autoComplete: "off", className: "sw-stepper-input", disabled: disabled, id: inputId, 
+                            // iOS's numeric pad has no minus key, so a range below zero takes
+                            // the text keyboard.
+                            inputMode: allowsNegative ? 'text' : 'numeric', name: name, onBlur: () => setDraft(null), onChange: onType, onKeyDown: onKeyDown, placeholder: placeholder, readOnly: readOnly, role: "spinbutton", type: "text", value: text }) }), _jsx("button", { "aria-controls": inputId, "aria-label": incrementLabel, className: "sw-stepper-button", disabled: moves.up === null, onClick: () => move(moves.up), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: "+" }) })] }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }));
 });

package/dist/components/Text.js

@@ -7,7 +7,10 @@ const defaultElement = {
     data: 'span',
     display: 'h1',
     heading: 'h2',
+    headline: 'h2',
+    hero: 'h1',
     label: 'span',
+    lead: 'p',
     title: 'h3',
 };
 export const Text = forwardRef(function Text({ align, as, className, color = 'text', style, truncate = false, variant = 'body', ...rest }, ref) {

package/dist/components/app-shell/AppShellBar.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode, type Ref } from 'react';
+import { type AppShellProps } from './types.js';
+export type AppShellBarProps = Pick<AppShellProps, 'barEnd' | 'barTitle' | 'menuCount' | 'menuCountLabel' | 'menuCountTone'> & {
+    /** The bar itself, measured so a page bar can stick under it. */
+    barRef: Ref<HTMLElement>;
+    menuRef: Ref<HTMLButtonElement>;
+    menuIcon: ReactNode;
+    openMenuLabel: string;
+    menuOpen: boolean;
+    onOpenMenu: () => void;
+};
+/**
+ * The menu button's name: its label, then the count's words (or the bare
+ * number) after a comma while there is a count to read.
+ */
+export declare function menuButtonName(openMenu: string, menuCount: number | undefined, menuCountLabel: string | undefined): string;
+/**
+ * The compact top bar below `lg` (an AppHeader `bar`): the icon-only menu
+ * button, which may carry the shared count pill on its top end corner, the
+ * title and the end controls. The pill is hidden from assistive technology
+ * because the button's name already reads it.
+ */
+export declare function AppShellBar({ barEnd, barRef, barTitle, menuCount, menuCountLabel, menuCountTone, menuIcon, menuOpen, menuRef, onOpenMenu, openMenuLabel, }: AppShellBarProps): import("react").JSX.Element;

package/dist/components/app-shell/AppShellBar.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { countToneClass } from '../../css/css-count-pill.js';
+import { AppHeader } from '../AppHeader.js';
+import { Button } from '../Button.js';
+/**
+ * The menu button's name: its label, then the count's words (or the bare
+ * number) after a comma while there is a count to read.
+ */
+export function menuButtonName(openMenu, menuCount, menuCountLabel) {
+    if (!menuCount)
+        return openMenu;
+    return `${openMenu}, ${menuCountLabel ?? String(menuCount)}`;
+}
+/**
+ * The compact top bar below `lg` (an AppHeader `bar`): the icon-only menu
+ * button, which may carry the shared count pill on its top end corner, the
+ * title and the end controls. The pill is hidden from assistive technology
+ * because the button's name already reads it.
+ */
+export function AppShellBar({ barEnd, barRef, barTitle, menuCount, menuCountLabel, menuCountTone = 'danger', menuIcon, menuOpen, menuRef, onOpenMenu, openMenuLabel, }) {
+    return (_jsxs(AppHeader, { ref: barRef, appearance: "bar", className: "sw-app-shell-bar", padding: 2, children: [_jsxs(Button, { ref: menuRef, "aria-expanded": menuOpen, "aria-haspopup": "dialog", "aria-label": menuButtonName(openMenuLabel, menuCount, menuCountLabel), className: "sw-app-shell-menu", onPress: onOpenMenu, size: "sm", variant: "ghost", children: [_jsx("span", { "aria-hidden": "true", className: "sw-app-shell-icon", children: menuIcon }), menuCount ? (_jsx("span", { "aria-hidden": "true", className: cx('sw-app-shell-count', menuCountTone !== 'danger' &&
+                            countToneClass('sw-app-shell-count', menuCountTone)), children: menuCount })) : null] }), _jsx("div", { className: "sw-app-shell-bar-title", children: barTitle }), barEnd ? _jsx("div", { className: "sw-app-shell-bar-end", children: barEnd }) : null] }));
+}

package/dist/components/app-shell/types.d.ts

@@ -63,6 +63,9 @@ export type AppShellProps = {
     onNavigate?: (item: AppShellNavItem) => void;
     /**
      * The sidebar's top, such as a workspace switcher; also the drawer's.
+     * It may hold an interactive trigger (an `ActionMenu`, a `ContextSwitcher`):
+     * its popup opens on the top layer, so the sidebar and the drawer never
+     * clip it.
      * While the drawer is open it is mounted twice (the sidebar's copy is
      * hidden), so each copy keeps its own state: put no fixed DOM `id` in it
      * (use `useId`), and keep state that must be shared in the consumer.
@@ -71,7 +74,11 @@ export type AppShellProps = {
     header?: ReactNode;
     /** The sidebar's bottom, such as the account menu; also the drawer's (see `header`). */
     footer?: ReactNode;
-    /** A compact `header` for the rail. Left out, the rail shows none. */
+    /**
+     * A compact `header` for the rail, such as a workspace switcher drawn as
+     * its glyph alone (an icon trigger named by its label). Left out, the
+     * rail shows none.
+     */
     railHeader?: ReactNode;
     /** A compact `footer` for the rail. Left out, the rail shows none. */
     railFooter?: ReactNode;
@@ -81,6 +88,34 @@ export type AppShellProps = {
     barEnd?: ReactNode;
     /** The consumer's glyph for the menu button (Scalewing has no icon catalog). */
     menuIcon: ReactNode;
+    /**
+     * How many things wait behind the menu, such as an inbox: the shared
+     * count pill on the menu button's top end corner, below `lg`, read in
+     * its name after `labels.openMenu` and a comma ("Open menu, 6"). A whole
+     * number; 0 (or none) shows no pill.
+     */
+    menuCount?: number;
+    /**
+     * What the menu's count means, in the consumer's words ("6 need you"):
+     * read in the name in place of the bare number ("Open menu, 6 need you").
+     * Needs `menuCount`.
+     */
+    menuCountLabel?: string;
+    /**
+     * The menu pill's colour, NavCount's tones: `danger` (the default),
+     * `warning` (amber) for work that needs the person but is not urgent,
+     * `accent` for news. Needs `menuCount`.
+     */
+    menuCountTone?: NavCountTone;
+    /**
+     * A band at the top of `main` on every layout, such as the page's
+     * context pickers and search: the solid surface with a hairline under it
+     * and the page's inline padding (space-4 below `lg`, space-6 from it),
+     * its children laid out in a wrapping row with space between them. It is
+     * sticky: under the compact top bar below `lg`, at the window's top
+     * from `lg` up. It scrolls with nothing else; keep it to one row.
+     */
+    pageBar?: ReactNode;
     labels: AppShellLabels;
     /** The page, rendered in `main`. */
     children: ReactNode;

package/dist/components/app-shell/validate.d.ts

@@ -1,6 +1,7 @@
 import { type AppShellProps } from './types.js';
 /**
- * Fails closed on the shell's words, its groups and their items (ids unique
- * across every group, each with an icon, which is all the rail shows).
+ * Fails closed on the shell's words, the menu's count, its groups and
+ * their items (ids unique across every group, each with an icon, which is
+ * all the rail shows).
  */
-export declare function assertAppShellProps({ groups, labels, navLabel, }: Pick<AppShellProps, 'groups' | 'labels' | 'navLabel'>): void;
+export declare function assertAppShellProps({ groups, labels, menuCount, menuCountLabel, menuCountTone, navLabel, }: Pick<AppShellProps, 'groups' | 'labels' | 'menuCount' | 'menuCountLabel' | 'menuCountTone' | 'navLabel'>): void;

package/dist/components/app-shell/validate.js

@@ -28,14 +28,32 @@ function assertGroups(groups) {
         throw new RangeError('AppShell groups need at least one item');
 }
 /**
- * Fails closed on the shell's words, its groups and their items (ids unique
- * across every group, each with an icon, which is all the rail shows).
+ * Fails closed on the menu button's count: a whole number from 0, a
+ * nonempty label and a known tone, each of the last two with a count.
  */
-export function assertAppShellProps({ groups, labels, navLabel, }) {
+function assertMenuCount({ menuCount, menuCountLabel, menuCountTone, }) {
+    if (menuCount !== undefined &&
+        (!Number.isInteger(menuCount) || menuCount < 0))
+        throw new RangeError(`AppShell menuCount must be a whole number from 0: ${String(menuCount)}`);
+    if (menuCountLabel !== undefined && isBlank(menuCountLabel))
+        throw new RangeError('AppShell menuCountLabel must be nonempty');
+    if (menuCountTone !== undefined && !isOneOf(navCountTones, menuCountTone))
+        throw new RangeError(`AppShell menuCountTone must be one of ${navCountTones.join(', ')}`);
+    if (menuCount === undefined &&
+        (menuCountLabel !== undefined || menuCountTone !== undefined))
+        throw new RangeError('AppShell menuCountLabel and menuCountTone come with a menuCount');
+}
+/**
+ * Fails closed on the shell's words, the menu's count, its groups and
+ * their items (ids unique across every group, each with an icon, which is
+ * all the rail shows).
+ */
+export function assertAppShellProps({ groups, labels, menuCount, menuCountLabel, menuCountTone, navLabel, }) {
     if (isBlank(navLabel))
         throw new RangeError('AppShell navLabel must be nonempty');
     if (isBlank(labels?.openMenu) || isBlank(labels?.closeMenu))
         throw new RangeError('AppShell labels openMenu and closeMenu are nonempty');
+    assertMenuCount({ menuCount, menuCountLabel, menuCountTone });
     assertGroups(groups);
     const items = groups.flatMap((group) => group.items);
     assertNavItems('AppShell', items);

package/dist/components/command-palette/PaletteList.d.ts

@@ -0,0 +1,20 @@
+import { type PointerEvent } from 'react';
+import { type CommandPaletteGroup, type CommandPaletteItem } from './types.js';
+type PaletteListProps = {
+    listId: string;
+    label: string;
+    groups: readonly CommandPaletteGroup[];
+    activeId: string | undefined;
+    /** The row's DOM id from the item's id. */
+    rowId: (item: CommandPaletteItem) => string;
+    onActivate: (item: CommandPaletteItem, event: PointerEvent) => void;
+    onChoose: (item: CommandPaletteItem) => void;
+};
+/**
+ * The always-open results: a listbox named by the palette's label, each
+ * group a `group` under its caption, each item its mark (hidden), label and
+ * detail, and the active row's Enter key hint (hidden: Enter is how a
+ * listbox row is chosen).
+ */
+export declare function PaletteList({ activeId, groups, label, listId, onActivate, onChoose, rowId, }: PaletteListProps): import("react").JSX.Element;
+export {};

package/dist/components/command-palette/PaletteList.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The always-open results: a listbox named by the palette's label, each
+ * group a `group` under its caption, each item its mark (hidden), label and
+ * detail, and the active row's Enter key hint (hidden: Enter is how a
+ * listbox row is chosen).
+ */
+export function PaletteList({ activeId, groups, label, listId, onActivate, onChoose, rowId, }) {
+    return (_jsx("div", { "aria-label": label, className: "sw-command-palette-list", hidden: !groups.some((group) => group.items.length > 0), id: listId, role: "listbox", children: groups.map((group, index) => {
+            if (group.items.length === 0)
+                return null;
+            const headingId = `${listId}-group-${index}`;
+            return (_jsxs("div", { "aria-labelledby": headingId, role: "group", children: [_jsx("div", { className: "sw-command-palette-heading", id: headingId, role: "presentation", children: group.label }), group.items.map((item) => {
+                        const active = item.id === activeId;
+                        return (_jsxs("div", { "aria-selected": active, className: "sw-command-palette-item", id: rowId(item), onClick: () => onChoose(item), onPointerMove: (event) => {
+                                if (!active)
+                                    onActivate(item, event);
+                            }, role: "option", children: [item.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-command-palette-icon", children: item.icon })) : null, _jsxs("span", { className: "sw-command-palette-words", children: [_jsx("span", { className: "sw-command-palette-label", children: item.label }), item.detail ? (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-command-palette-detail", children: item.detail })] })) : null] }), active ? (_jsx("span", { "aria-hidden": "true", className: "sw-command-palette-key", children: "\u21B5" })) : null] }, item.id));
+                    })] }, group.id));
+        }) }));
+}

package/dist/components/command-palette/shortcut.d.ts

@@ -0,0 +1,19 @@
+import { type CommandPaletteShortcut } from './types.js';
+/** Whether the system's command key is ⌘ (Apple) rather than Ctrl. */
+export declare function usesCommandKey(platform: string): boolean;
+/** An element a person types into: a text field, a select or editable text. */
+export declare function isEditable(target: EventTarget | null): boolean;
+type ShortcutKey = Pick<KeyboardEvent, 'key' | 'code' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey' | 'repeat' | 'isComposing'>;
+/**
+ * ⌘K on an Apple system or Ctrl+K elsewhere, with no other modifier: the K
+ * the layout types, or the key in K's place (`KeyK`) on a layout that types
+ * another letter there, such as Cyrillic or Greek.
+ */
+export declare function isModK(event: ShortcutKey, commandKey: boolean): boolean;
+/**
+ * Listens on the document for the palette's shortcut while `shortcut` is
+ * set: it calls `onToggle` (and stops the browser's own use of the keys)
+ * unless focus is in another text field than `ownField`.
+ */
+export declare function usePaletteShortcut(shortcut: CommandPaletteShortcut | null | undefined, ownField: () => HTMLElement | null, onToggle: () => void): void;
+export {};