@scalewing/react 1.47.0 → 1.48.0

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;

package/dist/components/site-header/use-menu-dismiss.js

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import { breakpointQuery } from '../../css/breakpoints.js';
+/** From here the bar shows its row of destinations and hides the menu. */
+const wideQuery = breakpointQuery('from', 'lg');
+/**
+ * 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 function useMenuDismiss(menuRef) {
+    useEffect(() => {
+        const menu = menuRef.current;
+        if (!menu)
+            return;
+        const close = () => {
+            menu.open = false;
+        };
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape' || !menu.open)
+                return;
+            event.preventDefault();
+            close();
+            menu.querySelector('summary')?.focus();
+        };
+        const onClick = (event) => {
+            if (event.target instanceof Element && event.target.closest('a'))
+                close();
+        };
+        const onFocusOut = (event) => {
+            const next = event.relatedTarget;
+            if (next instanceof Node && menu.contains(next))
+                return;
+            if (next !== null)
+                close();
+        };
+        const onPointerDown = (event) => {
+            if (event.target instanceof Node && menu.contains(event.target))
+                return;
+            close();
+        };
+        const wide = typeof window.matchMedia === 'function'
+            ? window.matchMedia(wideQuery)
+            : undefined;
+        const onWiden = () => {
+            if (wide?.matches)
+                close();
+        };
+        menu.addEventListener('keydown', onKeyDown);
+        menu.addEventListener('click', onClick);
+        menu.addEventListener('focusout', onFocusOut);
+        document.addEventListener('pointerdown', onPointerDown);
+        wide?.addEventListener('change', onWiden);
+        return () => {
+            menu.removeEventListener('keydown', onKeyDown);
+            menu.removeEventListener('click', onClick);
+            menu.removeEventListener('focusout', onFocusOut);
+            document.removeEventListener('pointerdown', onPointerDown);
+            wide?.removeEventListener('change', onWiden);
+        };
+    }, [menuRef]);
+}

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

@@ -0,0 +1,7 @@
+import { type SiteHeaderProps } from './types.js';
+/**
+ * Fails closed on the header's words and destinations: no items, blank or
+ * repeated ids, blank labels or hrefs, and a blank navigation name or menu
+ * button name.
+ */
+export declare function assertSiteHeaderProps({ items, labels, navLabel, }: Pick<SiteHeaderProps, 'items' | 'labels' | 'navLabel'>): void;

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

@@ -0,0 +1,17 @@
+import { assertNavItems } from '../nav-items.js';
+/**
+ * Fails closed on the header's words and destinations: no items, blank or
+ * repeated ids, blank labels or hrefs, and a blank navigation name or menu
+ * button name.
+ */
+export function assertSiteHeaderProps({ items, labels, navLabel, }) {
+    if (items.length === 0)
+        throw new RangeError('SiteHeader needs at least one item');
+    assertNavItems('SiteHeader', items);
+    if (items.some((item) => !item.href.trim()))
+        throw new RangeError('SiteHeader items need nonempty hrefs');
+    if (!navLabel.trim())
+        throw new RangeError('SiteHeader needs a nonempty navLabel');
+    if (!labels.openMenu.trim() || !labels.closeMenu.trim())
+        throw new RangeError('SiteHeader labels need nonempty openMenu and closeMenu');
+}

package/dist/components/use-element-height.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from 'react';
+/**
+ * Follows the height of an element's border box, in CSS pixels: on
+ * mount, before the first paint, and whenever its box changes size. It is
+ * `null` before that, on the server, while `enabled` is false and while the
+ * element draws no box (`display: none`), so a caller can fall back to a
+ * value of its own. A browser with no ResizeObserver measures on window
+ * resizes instead.
+ */
+export declare function useElementHeight(ref: RefObject<HTMLElement | null>, enabled?: boolean): number | null;

package/dist/components/use-element-height.js

@@ -0,0 +1,35 @@
+'use client';
+import { useLayoutEffect, useState } from 'react';
+/**
+ * Follows the height of an element's border box, in CSS pixels: on
+ * mount, before the first paint, and whenever its box changes size. It is
+ * `null` before that, on the server, while `enabled` is false and while the
+ * element draws no box (`display: none`), so a caller can fall back to a
+ * value of its own. A browser with no ResizeObserver measures on window
+ * resizes instead.
+ */
+export function useElementHeight(ref, enabled = true) {
+    const [height, setHeight] = useState(null);
+    useLayoutEffect(() => {
+        const box = ref.current;
+        if (!box || !enabled) {
+            setHeight(null);
+            return;
+        }
+        function measure() {
+            if (!box)
+                return;
+            const next = box.getBoundingClientRect().height;
+            setHeight(next > 0 ? next : null);
+        }
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', measure);
+            return () => window.removeEventListener('resize', measure);
+        }
+        const observer = new ResizeObserver(measure);
+        observer.observe(box);
+        return () => observer.disconnect();
+    }, [ref, enabled]);
+    return height;
+}

package/dist/context-switcher.test-support.d.ts

@@ -0,0 +1,9 @@
+import { type RenderResult } from '@testing-library/react';
+import { type Mock } from 'vitest';
+import { type ContextSwitcherGroup, type ContextSwitcherProps } from './components/ContextSwitcher.js';
+/** Field stations: a bare group, then a labelled one with badges and counts. */
+export declare const stations: ContextSwitcherGroup[];
+/** The switcher with its required props, and any prop overridden. */
+export declare function renderSwitcher(props?: Partial<ContextSwitcherProps>): RenderResult & {
+    onSelect: Mock;
+};

package/dist/context-switcher.test-support.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { vi } from 'vitest';
+import { ContextSwitcher, } from './components/ContextSwitcher.js';
+/** Field stations: a bare group, then a labelled one with badges and counts. */
+export const stations = [
+    {
+        id: 'home',
+        options: [
+            {
+                id: 'all',
+                label: 'All stations',
+                icon: _jsx("svg", { "data-glyph": "all" }),
+                count: 7,
+                countLabel: '7 need you',
+                countTone: 'warning',
+            },
+        ],
+    },
+    {
+        id: 'mine',
+        label: 'Stations you run',
+        options: [
+            {
+                id: 'heron',
+                label: 'Heron Marsh',
+                detail: 'Warden',
+                badge: { label: 'Live', tone: 'success' },
+            },
+            { id: 'pine', label: 'Pine Ridge', detail: 'Ranger' },
+            { id: 'bittern', label: 'Bittern Fen', count: 2 },
+            { id: 'bay', label: 'Bayside Dunes', detail: 'Árbol team' },
+        ],
+    },
+];
+/** The switcher with its required props, and any prop overridden. */
+export function renderSwitcher(props = {}) {
+    const onSelect = vi.fn();
+    const view = render(_jsx(ContextSwitcher, { currentId: "heron", groups: stations, label: "Station", onSelect: onSelect, trigger: "Heron Marsh", ...props }));
+    return { ...view, onSelect };
+}

package/dist/css/css-app-shell-page-bar.d.ts

@@ -0,0 +1,3 @@
+export declare const appShellBarHeightVariable = "--sw-app-shell-bar-height";
+export declare function cssAppShellPageBarClasses(): string;
+export declare function appShellPageBarClassCatalog(): string[];

package/dist/css/css-app-shell-page-bar.js

@@ -0,0 +1,81 @@
+import { breakpointQuery } from './breakpoints.js';
+import { zIndex } from './stacking.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+/*
+ * The compact bar's measured height, set on `.sw-app-shell` by the
+ * component while it draws a page bar, so the page bar sticks right under
+ * the bar whatever its end controls make it.
+ */
+export const appShellBarHeightVariable = '--sw-app-shell-bar-height';
+/*
+ * The bar's usual height before it is measured (and without script): the
+ * sm menu button, or the touch target on a coarse pointer, inside the
+ * bar's space-2 padding, and its hairline.
+ */
+function barHeightFallback(control) {
+    return `calc(${control} + 2 * var(--sw-space-2) + 1px)`;
+}
+const fromLg = breakpointQuery('from', 'lg');
+/*
+ * `pageBar`: a band at the top of `main` on every layout, the solid
+ * surface with a hairline under it and the page's inline padding (space-4,
+ * space-6 from `lg`), its children a wrapping row with space between them.
+ * Sticky on the top chrome's layer: under the compact bar below `lg`, at
+ * the window's top from `lg`, where the bar is gone. Reduce Transparency
+ * needs nothing (it is already solid); forced colours keep the hairline.
+ */
+function pageBarRules() {
+    return `.sw-app-shell-page-bar {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border-bottom: 1px solid var(--sw-color-border);
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-3);
+  justify-content: space-between;
+  padding: var(--sw-space-2) var(--sw-space-4);
+  position: sticky;
+  top: var(${appShellBarHeightVariable}, ${barHeightFallback('var(--sw-control-sm-min-height)')});
+  ${zIndex('topChrome')}
+}
+
+@media ${coarsePointerQuery} {
+  .sw-app-shell-page-bar {
+    top: var(${appShellBarHeightVariable}, ${barHeightFallback(touchTarget)});
+  }
+}
+
+@media ${fromLg} {
+  .sw-app-shell-page-bar {
+    padding-inline: var(--sw-space-6);
+    top: 0;
+  }
+}`;
+}
+/*
+ * `menuCount`: the shared count pill (`sw-app-shell-count`, its tones
+ * included) on the menu button's top end corner, over the glyph's edge as
+ * on a rail glyph, mirrored in right-to-left.
+ */
+function menuCountRules() {
+    return `.sw-app-shell-menu {
+  position: relative;
+}
+
+.sw-app-shell-menu .sw-app-shell-count {
+  inset-block-start: calc(-1 * var(--sw-space-1));
+  inset-inline-end: calc(-1 * var(--sw-space-1));
+  pointer-events: none;
+  position: absolute;
+}`;
+}
+/* AppShell's page bar and the menu button's count (see components/AppShell.tsx). */
+export function cssAppShellPageBarClasses() {
+    return `${pageBarRules()}
+
+${menuCountRules()}`;
+}
+export function appShellPageBarClassCatalog() {
+    return ['sw-app-shell-page-bar'];
+}

package/dist/css/css-app-shell.js

@@ -1,6 +1,7 @@
 import { breakpointQuery } from './breakpoints.js';
 import { appShellDrawerClassCatalog, cssAppShellDrawerClasses, } from './css-app-shell-drawer.js';
 import { appShellNavClassCatalog, cssAppShellNavClasses, cssAppShellRailNavRules, } from './css-app-shell-nav.js';
+import { appShellPageBarClassCatalog, cssAppShellPageBarClasses, } from './css-app-shell-page-bar.js';
 import { iconButtonRules } from './css-icon-button.js';
 /*
  * The width from which AppShell's sidebar is full rather than a rail: an
@@ -110,7 +111,8 @@ ${cssAppShellRailNavRules('    ')}
 /*
  * AppShell: a workspace frame with a pinned side navigation (see
  * components/AppShell.tsx). The links, groups and the rail's nav are
- * `css-app-shell-nav.ts`; the menu drawer is `css-app-shell-drawer.ts`.
+ * `css-app-shell-nav.ts`; the page bar and the menu's count are
+ * `css-app-shell-page-bar.ts`; the menu drawer is `css-app-shell-drawer.ts`.
  */
 export function cssAppShellClasses() {
     return `${barRules()}
@@ -127,6 +129,8 @@ export function cssAppShellClasses() {
 
 ${cssAppShellNavClasses()}
 
+${cssAppShellPageBarClasses()}
+
 ${sidebarRules()}
 
 ${cssAppShellDrawerClasses()}`;
@@ -145,6 +149,7 @@ export function appShellClassCatalog() {
         'sw-app-shell-header',
         'sw-app-shell-footer',
         ...appShellNavClassCatalog(),
+        ...appShellPageBarClassCatalog(),
         ...appShellDrawerClassCatalog(),
     ];
 }

package/dist/css/css-band.d.ts

@@ -0,0 +1,10 @@
+/** A band's fill: the page's surface, the quiet subtle fill, or the dark inverse band. */
+export declare const bandTones: readonly ["surface", "subtle", "inverse"];
+export type BandTone = (typeof bandTones)[number];
+/** How wide a band's content column runs: the page container or the reading width. */
+export declare const bandWidths: readonly ["container", "reading"];
+export type BandWidth = (typeof bandWidths)[number];
+export declare function bandToneClass(tone: BandTone): string;
+export declare function bandWidthClass(width: BandWidth): string;
+export declare function cssBandClasses(): string;
+export declare function bandClassCatalog(): string[];

package/dist/css/css-band.js

@@ -0,0 +1,101 @@
+import { breakpointQuery } from './breakpoints.js';
+/** A band's fill: the page's surface, the quiet subtle fill, or the dark inverse band. */
+export const bandTones = ['surface', 'subtle', 'inverse'];
+/** How wide a band's content column runs: the page container or the reading width. */
+export const bandWidths = ['container', 'reading'];
+export function bandToneClass(tone) {
+    return `sw-band-${tone}`;
+}
+export function bandWidthClass(width) {
+    return `sw-band-inner-${width}`;
+}
+/*
+ * The inverse band re-scopes the theme's colours for everything inside it:
+ * words, muted words, hairlines, the quiet subtle fill, links and the
+ * accent (a primary button, the focus ring) read on the dark fill, so
+ * Text, links and Buttons need no band-aware variant. Every plain link,
+ * a quiet one included, takes the band's words with a half-strength
+ * underline, since its colour is the words' own (WCAG 1.4.1). The muted
+ * words, hairline and subtle fill are mixes of the two band colours, so a
+ * brand overlay of `inverse` moves them too; the muted mix keeps 7:1 on
+ * the default bands and on a navy one.
+ */
+function inverseScope() {
+    return `.sw-band-inverse {
+  --sw-color-background: var(--sw-color-inverse);
+  --sw-color-surface: var(--sw-color-inverse);
+  --sw-color-text: var(--sw-color-onInverse);
+  --sw-color-muted: color-mix(in srgb, var(--sw-color-onInverse) 78%, var(--sw-color-inverse));
+  --sw-color-border: color-mix(in srgb, var(--sw-color-onInverse) 18%, var(--sw-color-inverse));
+  --sw-color-subtle: color-mix(in srgb, var(--sw-color-onInverse) 10%, var(--sw-color-inverse));
+  --sw-color-accent: var(--sw-color-onInverse);
+  --sw-color-onAccent: var(--sw-color-inverse);
+  background: var(--sw-color-inverse);
+  color: var(--sw-color-onInverse);
+}
+
+[data-theme] .sw-band-inverse a:not(.sw-button) {
+  color: var(--sw-color-onInverse);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
+  text-underline-offset: 0.2em;
+}
+
+[data-theme] .sw-band-inverse a:not(.sw-button):hover {
+  text-decoration-color: currentColor;
+}`;
+}
+/*
+ * The surface band is the cards' fill (white in light, a step above the
+ * black page in dark), so it stands apart from a grouped or dark page; the
+ * subtle band is the quiet grey.
+ *
+ * A band is a full-width stretch of the page in one fill with its content
+ * in a centred column, the page gutter at its sides (the 16 px phone
+ * gutter, 24 px from md).
+ */
+export function cssBandClasses() {
+    return `.sw-band {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.sw-band-surface {
+  background: var(--sw-color-surface);
+  color: var(--sw-color-text);
+}
+
+.sw-band-subtle {
+  background: var(--sw-color-subtle);
+  color: var(--sw-color-text);
+}
+
+${inverseScope()}
+
+.sw-band-inner {
+  box-sizing: border-box;
+  margin-inline: auto;
+  padding-inline: var(--sw-space-4);
+  width: 100%;
+}
+
+.${bandWidthClass('container')} { max-width: calc(var(--sw-container-max) + 2 * var(--sw-space-5)); }
+
+.${bandWidthClass('reading')} { max-width: calc(var(--sw-reading-max) + 2 * var(--sw-space-5)); }
+
+@media ${breakpointQuery('from', 'md')} {
+  .sw-band-inner { padding-inline: var(--sw-space-5); }
+}
+
+@media (forced-colors: active) {
+  .sw-band-inverse { border-block: 1px solid CanvasText; }
+}`;
+}
+export function bandClassCatalog() {
+    return [
+        'sw-band',
+        'sw-band-inner',
+        ...bandTones.map(bandToneClass),
+        ...bandWidths.map(bandWidthClass),
+    ];
+}

package/dist/css/css-button-link.d.ts

@@ -0,0 +1,3 @@
+export declare const buttonLinkClass = "sw-button-link";
+export declare function cssButtonLinkClasses(): string;
+export declare function buttonLinkClassCatalog(): string[];

package/dist/css/css-button-link.js

@@ -0,0 +1,48 @@
+import { pressedRingGap, pressedRingWidth, webButtonVariants, } from './css-button.js';
+/*
+ * A link drawn as a Button (`ButtonLink`) wears the Button's own classes.
+ * The canvas paints every link in the accent, with no underline, and in the
+ * text colour on hover, from `[data-theme] a`; these rules restore each
+ * variant's words over that, hover included, at one class more. A link
+ * that is the current page (`aria-current="page"`, such as a site's
+ * Contact us on Contact) takes the pressed button's accent ring past a gap
+ * in the page background, so the mark keeps the accent's contrast whatever
+ * the fill; forced colours drop box shadows, so there the same ring is a
+ * Highlight border on an out-of-flow ::after, as a pressed Button's is.
+ */
+const variantWords = {
+    primary: 'var(--sw-color-onAccent)',
+    secondary: 'var(--sw-color-onSecondary)',
+    tertiary: 'var(--sw-color-onTertiary)',
+    ghost: 'var(--sw-color-accent)',
+    danger: 'var(--sw-color-onDanger)',
+    neutral: 'var(--sw-color-text)',
+};
+export const buttonLinkClass = 'sw-button-link';
+export function cssButtonLinkClasses() {
+    const words = webButtonVariants
+        .map((variant) => `[data-theme] a.${buttonLinkClass}.sw-button-${variant},\n[data-theme] a.${buttonLinkClass}.sw-button-${variant}:hover { color: ${variantWords[variant]}; }`)
+        .join('\n');
+    return `[data-theme] a.${buttonLinkClass} {
+  text-decoration: none;
+}
+
+${words}
+
+[data-theme] a.${buttonLinkClass}[aria-current='page'] {
+  box-shadow: 0 0 0 ${pressedRingGap}px var(--sw-color-background), 0 0 0 ${pressedRingWidth}px var(--sw-color-accent);
+}
+
+[data-theme] a.${buttonLinkClass}[aria-current='page']:focus-visible {
+  outline-offset: calc(var(--sw-focus-ring-offset) + ${pressedRingWidth}px);
+}
+
+@media (forced-colors: active) {
+  [data-theme] a.${buttonLinkClass} { color: LinkText; }
+  [data-theme] a.${buttonLinkClass}[aria-current='page'] { border-color: Highlight; position: relative; }
+  [data-theme] a.${buttonLinkClass}[aria-current='page']::after { border: ${pressedRingWidth - pressedRingGap}px solid Highlight; border-radius: inherit; content: ''; inset: calc(-1px - ${pressedRingWidth}px); pointer-events: none; position: absolute; }
+}`;
+}
+export function buttonLinkClassCatalog() {
+    return [buttonLinkClass];
+}

package/dist/css/css-command-palette-key.d.ts

@@ -0,0 +1 @@
+export declare function cssCommandPaletteKeyClasses(): string;

package/dist/css/css-command-palette-key.js

@@ -0,0 +1,33 @@
+import { typographyVariants } from '@scalewing/tokens';
+const caption = typographyVariants.caption;
+/*
+ * A key cap: a key's name or glyph ("⌘K", "↵") in a small rounded hairline
+ * box in the muted colour, caption size at weight 500 with tabular figures.
+ * CommandPaletteTrigger's shortcut hint and the palette's Enter hint share
+ * it. Forced colours keep its edge.
+ */
+export function cssCommandPaletteKeyClasses() {
+    return `.sw-command-palette-key {
+  align-items: center;
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  flex: none;
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  justify-content: center;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  min-width: var(--sw-space-5);
+  padding-inline: var(--sw-space-1);
+  white-space: nowrap;
+}
+
+@media (forced-colors: active) {
+  .sw-command-palette-key { border-color: CanvasText; color: CanvasText; }
+}`;
+}

package/dist/css/css-command-palette-trigger.d.ts

@@ -0,0 +1,2 @@
+export declare function cssCommandPaletteTriggerClasses(): string;
+export declare function commandPaletteTriggerClassCatalog(): string[];