@scalewing/react 1.7.0 → 1.9.0

package/dist/components/date-field/CalendarGrid.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { calendarKeyTarget } from '../../calendar-keys.js';
+import { formatDateLabel, weekdayLabels } from '../../calendar-labels.js';
+import { monthGrid, } from '../../calendar-month.js';
+import { isOutsideDateRange } from '../../date-only.js';
+/**
+ * The month as a WAI-ARIA grid with one roving tab stop. Days outside
+ * `[min, max]` stay focusable for orientation but are `aria-disabled`;
+ * padding past the four-digit years is blank and inert.
+ */
+export function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate, onMoveFocus, onSelect, selected, titleId, today, weekStartsOn, }) {
+    function choose(value) {
+        if (!isOutsideDateRange(value, min, max))
+            onSelect(value);
+    }
+    function onKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            choose(focusDate);
+            return;
+        }
+        const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
+        const target = calendarKeyTarget({ key: event.key, shiftKey: event.shiftKey }, focusDate, { weekStartsOn, min, max, rtl });
+        if (target === null)
+            return;
+        event.preventDefault();
+        onMoveFocus(target);
+    }
+    return (_jsxs("table", { "aria-labelledby": titleId, className: "sw-date-field-grid", onKeyDown: onKeyDown, role: "grid", children: [_jsx("thead", { children: _jsx("tr", { children: weekdayLabels(locale, weekStartsOn).map((weekday) => (_jsx("th", { abbr: weekday.long, scope: "col", children: weekday.short }, weekday.long))) }) }), _jsx("tbody", { children: monthGrid(month, weekStartsOn).map((row, rowIndex) => (_jsx("tr", { children: row.map((cell, column) => cell === null ? (_jsx("td", { "aria-disabled": "true", className: "sw-date-field-day sw-date-field-day-outside", role: "gridcell" }, `blank-${column}`)) : (_jsx("td", { "aria-current": cell.value === today ? 'date' : undefined, "aria-disabled": isOutsideDateRange(cell.value, min, max) || undefined, "aria-label": formatDateLabel(cell.value, locale), "aria-selected": cell.value === selected, className: cx('sw-date-field-day', !cell.inMonth && 'sw-date-field-day-outside'), "data-date": cell.value, onClick: () => choose(cell.value), onFocus: () => {
+                            // A press on a neighboring month's day selects it; moving
+                            // the grid first would pull the day out from under it.
+                            if (cell.inMonth && cell.value !== focusDate)
+                                onFocusDate(cell.value);
+                        }, role: "gridcell", tabIndex: cell.value === focusDate ? 0 : -1, children: cell.day }, cell.value))) }, rowIndex))) })] }));
+}

package/dist/components/date-field/CalendarHeader.d.ts

@@ -0,0 +1,18 @@
+import { type CalendarMonth } from '../../calendar-month.js';
+import { type DateFieldLabels } from '../../date-field-labels.js';
+export type CalendarHeaderProps = {
+    labels: DateFieldLabels;
+    locale: string;
+    max?: string;
+    min?: string;
+    month: CalendarMonth;
+    onMonthChange: (month: CalendarMonth) => void;
+    titleId: string;
+    todayYear: number;
+};
+/**
+ * Month stepping plus month and year selectors for jumping far, both cut to
+ * `min` and `max`, over a visually hidden title that announces the shown
+ * month when it changes.
+ */
+export declare function CalendarHeader({ labels, locale, max, min, month, onMonthChange, titleId, todayYear, }: CalendarHeaderProps): import("react").JSX.Element;

package/dist/components/date-field/CalendarHeader.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { monthNames, monthTitle } from '../../calendar-labels.js';
+import { monthInRange, monthsInRange, shiftMonth, } from '../../calendar-month.js';
+import { calendarYearRange, yearsIn } from '../../calendar-years.js';
+import { Select } from '../Select.js';
+import { DateFieldGlyph } from './DateFieldGlyph.js';
+function MonthStep({ delta, label, max, min, month, onMonthChange, }) {
+    const target = shiftMonth(month, delta);
+    const unavailable = target.year < 1 || target.year > 9999 || !monthInRange(target, min, max);
+    return (_jsx("button", { "aria-disabled": unavailable || undefined, "aria-label": label, className: "sw-date-field-step", onClick: () => {
+            if (!unavailable)
+                onMonthChange(target);
+        }, type: "button", children: _jsx(DateFieldGlyph, { name: delta < 0 ? 'previous' : 'next' }) }));
+}
+/**
+ * Month stepping plus month and year selectors for jumping far, both cut to
+ * `min` and `max`, over a visually hidden title that announces the shown
+ * month when it changes.
+ */
+export function CalendarHeader({ labels, locale, max, min, month, onMonthChange, titleId, todayYear, }) {
+    const range = calendarYearRange(month.year, todayYear, min, max);
+    const names = monthNames(locale);
+    const stepProps = { max, min, month, onMonthChange };
+    return (_jsxs("div", { className: "sw-date-field-header", children: [_jsx("h2", { "aria-live": "polite", className: "sw-sr-only", id: titleId, children: monthTitle(month, locale) }), _jsx(MonthStep, { ...stepProps, delta: -1, label: labels.previousMonth }), _jsxs("div", { className: "sw-date-field-jump", children: [_jsx(Select, { label: labels.month, labelVisuallyHidden: true, onChange: (next) => onMonthChange({ ...month, month: Number(next) }), 
+                        // Only months with a day inside the bounds; the shown one always is.
+                        options: monthsInRange(month.year, min, max).map((number) => ({
+                            value: String(number),
+                            label: names[number - 1] ?? String(number),
+                        })), size: "xs", value: String(month.month) }), _jsx(Select, { label: labels.year, labelVisuallyHidden: true, onChange: (next) => onMonthChange({ ...month, year: Number(next) }), options: yearsIn(range).map((year) => ({
+                            value: String(year),
+                            label: String(year),
+                        })), size: "xs", value: String(month.year) })] }), _jsx(MonthStep, { ...stepProps, delta: 1, label: labels.nextMonth })] }));
+}

package/dist/components/date-field/DateFieldGlyph.d.ts

@@ -0,0 +1,9 @@
+export type DateFieldGlyphName = 'calendar' | 'previous' | 'next';
+/**
+ * Private control chrome for DateField. Stroke, size, and color come from
+ * the generated `sw-date-field-glyph` rule; the chevrons mirror in
+ * right-to-left text.
+ */
+export declare function DateFieldGlyph({ name }: {
+    name: DateFieldGlyphName;
+}): import("react").JSX.Element;

package/dist/components/date-field/DateFieldGlyph.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+const PATHS = {
+    calendar: 'M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5zM4 10h16M8.5 2.5v3M15.5 2.5v3',
+    previous: 'M14.5 6l-6 6 6 6',
+    next: 'M9.5 6l6 6-6 6',
+};
+/**
+ * Private control chrome for DateField. Stroke, size, and color come from
+ * the generated `sw-date-field-glyph` rule; the chevrons mirror in
+ * right-to-left text.
+ */
+export function DateFieldGlyph({ name }) {
+    return (_jsx("svg", { "aria-hidden": "true", className: cx('sw-date-field-glyph', name !== 'calendar' && 'sw-date-field-glyph-directional'), focusable: "false", viewBox: "0 0 24 24", children: _jsx("path", { d: PATHS[name] }) }));
+}

package/dist/components/date-field/use-anchored-popover.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+/**
+ * Shows a mounted element on the top layer as a manual popover, keeps it
+ * beside `anchorRef` through scroll and resize, and calls `onDismiss` for a
+ * press outside it and outside `ignoreRef` (the button that toggles it).
+ * Browsers without the popover API get the same fixed placement.
+ */
+export declare function useAnchoredPopover(popoverRef: RefObject<HTMLElement | null>, anchorRef: RefObject<HTMLElement | null>, ignoreRef: RefObject<HTMLElement | null>, onDismiss: () => void): void;

package/dist/components/date-field/use-anchored-popover.js

@@ -0,0 +1,61 @@
+import { spacingScale } from '@scalewing/tokens';
+import { useLayoutEffect, useRef } from 'react';
+import { anchoredPosition } from '../../anchored-position.js';
+function placePopover(node, anchor) {
+    const position = anchoredPosition(anchor.getBoundingClientRect(), { width: node.offsetWidth, height: node.offsetHeight }, { width: window.innerWidth, height: window.innerHeight }, {
+        gap: spacingScale[1],
+        inset: spacingScale[2],
+        rtl: getComputedStyle(anchor).direction === 'rtl',
+    });
+    node.style.left = `${position.left}px`;
+    node.style.top = `${position.top}px`;
+}
+/**
+ * Shows a mounted element on the top layer as a manual popover, keeps it
+ * beside `anchorRef` through scroll and resize, and calls `onDismiss` for a
+ * press outside it and outside `ignoreRef` (the button that toggles it).
+ * Browsers without the popover API get the same fixed placement.
+ */
+export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss) {
+    const dismissRef = useRef(onDismiss);
+    useLayoutEffect(() => {
+        dismissRef.current = onDismiss;
+    });
+    useLayoutEffect(() => {
+        const node = popoverRef.current;
+        const anchor = anchorRef.current;
+        if (!node || !anchor)
+            return;
+        const supportsPopover = typeof node.showPopover === 'function';
+        // Set only where supported: an unsupported runtime would hide a
+        // `[popover]` element that it can never show.
+        if (supportsPopover) {
+            node.setAttribute('popover', 'manual');
+            if (!node.matches(':popover-open'))
+                node.showPopover();
+        }
+        placePopover(node, anchor);
+        function onPointerDown(event) {
+            const target = event.target;
+            if (!(target instanceof Node))
+                return;
+            if (node?.contains(target) || ignoreRef.current?.contains(target))
+                return;
+            dismissRef.current();
+        }
+        function onMove() {
+            if (node && anchor)
+                placePopover(node, anchor);
+        }
+        document.addEventListener('pointerdown', onPointerDown);
+        window.addEventListener('resize', onMove);
+        window.addEventListener('scroll', onMove, true);
+        return () => {
+            document.removeEventListener('pointerdown', onPointerDown);
+            window.removeEventListener('resize', onMove);
+            window.removeEventListener('scroll', onMove, true);
+            if (supportsPopover && node.matches(':popover-open'))
+                node.hidePopover();
+        };
+    }, [anchorRef, ignoreRef, popoverRef]);
+}

package/dist/components/date-field/use-date-entry.d.ts

@@ -0,0 +1,20 @@
+import { type DateEntryPattern } from '../../date-entry.js';
+export type DateEntry = {
+    text: string;
+    /** The date the text forms: YYYY-MM-DD, '' when blank, null when not one. */
+    parsed: string | null;
+    /** Typed text that is not a date, after the person left the field. */
+    invalid: boolean;
+    change: (text: string) => void;
+    check: () => void;
+    reset: () => void;
+};
+/**
+ * Typed entry over a controlled date-only value. A keystroke that finishes
+ * a date (see `isCompleteDateEntry`) or blanks the text calls `onCommit`;
+ * a date whose last field may still grow commits on `check` (blur or
+ * Enter). Text that is not (yet) a date stays on screen and leaves the value
+ * alone. The text also stays when the parent keeps the old value; when
+ * `value` changes from outside to any other date, the text follows it.
+ */
+export declare function useDateEntry(value: string, pattern: DateEntryPattern, onCommit: (value: string) => void): DateEntry;

package/dist/components/date-field/use-date-entry.js

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { formatDateEntry, isCompleteDateEntry, parseDateEntry, } from '../../date-entry.js';
+/**
+ * Typed entry over a controlled date-only value. A keystroke that finishes
+ * a date (see `isCompleteDateEntry`) or blanks the text calls `onCommit`;
+ * a date whose last field may still grow commits on `check` (blur or
+ * Enter). Text that is not (yet) a date stays on screen and leaves the value
+ * alone. The text also stays when the parent keeps the old value; when
+ * `value` changes from outside to any other date, the text follows it.
+ */
+export function useDateEntry(value, pattern, onCommit) {
+    const [draft, setDraft] = useState(null);
+    const current = draft !== null && (draft.value === value || draft.committed === value)
+        ? draft
+        : null;
+    // The parent adopted the commit: tie the text to it, so a later outside
+    // change back to the old value replaces the text.
+    if (current !== null && current.value !== value)
+        setDraft({ ...current, value, committed: null });
+    const text = current ? current.text : formatDateEntry(value, pattern);
+    const parsed = parseDateEntry(text, pattern);
+    function change(next) {
+        const nextValue = parseDateEntry(next, pattern);
+        const ready = nextValue === '' ||
+            (nextValue !== null && isCompleteDateEntry(next, pattern));
+        const committed = ready && nextValue !== value ? nextValue : null;
+        setDraft({ text: next, value, committed, checked: false });
+        if (committed !== null)
+            onCommit(committed);
+    }
+    function check() {
+        if (current === null)
+            return;
+        if (parsed === null) {
+            setDraft({ ...current, checked: true });
+            return;
+        }
+        if (parsed === value) {
+            // Show the value in the locale's padded form.
+            setDraft(null);
+            return;
+        }
+        // Commit once; a parent that keeps the old value keeps the padded text.
+        if (parsed !== current.committed)
+            onCommit(parsed);
+        setDraft({
+            text: formatDateEntry(parsed, pattern),
+            value,
+            committed: parsed,
+            checked: false,
+        });
+    }
+    return {
+        text,
+        parsed,
+        invalid: current !== null && current.checked && parsed === null,
+        change,
+        check,
+        reset: () => setDraft(null),
+    };
+}

package/dist/components/date-field/use-lang-locale.d.ts

@@ -0,0 +1,7 @@
+import { type RefObject } from 'react';
+/**
+ * The `locale` prop when given; otherwise the `lang` of the nearest ancestor
+ * of `ref`, read when the field mounts, then en-US. A product that switches
+ * language without remounting passes `locale`.
+ */
+export declare function useLangLocale(locale: string | undefined, ref: RefObject<HTMLElement | null>): string;

package/dist/components/date-field/use-lang-locale.js

@@ -0,0 +1,17 @@
+import { useLayoutEffect, useState } from 'react';
+import { resolveDateLocale } from '../../date-field-locale.js';
+/**
+ * The `locale` prop when given; otherwise the `lang` of the nearest ancestor
+ * of `ref`, read when the field mounts, then en-US. A product that switches
+ * language without remounting passes `locale`.
+ */
+export function useLangLocale(locale, ref) {
+    const [lang, setLang] = useState(null);
+    useLayoutEffect(() => {
+        if (locale !== undefined)
+            return;
+        const nearest = ref.current?.closest('[lang]')?.getAttribute('lang');
+        setLang(nearest ?? null);
+    }, [locale, ref]);
+    return resolveDateLocale(locale, lang);
+}

package/dist/components/denomination-grid/DenominationStrip.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../../class-names.js';
 import { denominationCellView } from '../../denomination-cells.js';
+import { ScrollRegion } from '../ScrollRegion.js';
 export function DenominationStrip({ label, columns, rows, zeroLabel, }) {
     const hasTotals = rows.some((row) => row.total !== undefined);
-    return (_jsxs("table", { className: "sw-denomination-grid sw-denomination-strip", children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: column.label }, column.key))), hasTotals ? _jsx("td", { className: "sw-denomination-corner" }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`, row.signed && 'sw-denomination-row-signed'), children: [_jsxs("th", { className: "sw-denomination-label", scope: "row", children: [row.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-icon", children: row.icon })) : null, _jsx("span", { className: "sw-denomination-label-text", children: row.label }), row.total !== undefined ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-total-inline", children: row.total })) : null] }), columns.map((column, index) => {
-                            const view = denominationCellView(row.cells[index] ?? null, row.signed ?? false, zeroLabel);
-                            return (_jsx("td", { className: `sw-denomination-cell sw-denomination-cell-${view.state}`, children: view.text }, column.key));
-                        }), hasTotals ? (_jsx("td", { className: "sw-denomination-total", children: row.total ?? '' })) : null] }, row.id))) })] }));
+    return (_jsx(ScrollRegion, { "aria-label": label, className: "sw-denomination-scroll", children: _jsxs("table", { className: "sw-denomination-grid sw-denomination-strip", children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: column.label }, column.key))), hasTotals ? _jsx("td", { className: "sw-denomination-corner" }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { className: cx('sw-denomination-row', `sw-denomination-row-${row.tone ?? 'neutral'}`, row.signed && 'sw-denomination-row-signed'), children: [_jsx("th", { className: "sw-denomination-label", scope: "row", children: _jsxs("span", { className: "sw-denomination-label-body", children: [row.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-icon", children: row.icon })) : null, _jsx("span", { className: "sw-denomination-label-text", children: row.label }), row.total !== undefined ? (_jsx("span", { "aria-hidden": "true", className: "sw-denomination-total-inline", children: row.total })) : null] }) }), columns.map((column, index) => {
+                                const view = denominationCellView(row.cells[index] ?? null, row.signed ?? false, zeroLabel);
+                                return (_jsx("td", { className: `sw-denomination-cell sw-denomination-cell-${view.state}`, children: view.text }, column.key));
+                            }), hasTotals ? (_jsx("td", { className: "sw-denomination-total", children: row.total ?? '' })) : null] }, row.id))) })] }) }));
 }

package/dist/css/css-accordion.js

@@ -1,3 +1,33 @@
+function markerRules() {
+    return `/* A token chevron replaces the user-agent triangle: it points to the inline end when closed and down when open. */
+.sw-accordion-summary::-webkit-details-marker { display: none; }
+
+.sw-accordion-marker {
+  border-bottom: 2px solid var(--sw-color-muted);
+  border-right: 2px solid var(--sw-color-muted);
+  box-sizing: border-box;
+  flex: none;
+  height: var(--sw-space-2);
+  margin-inline-end: var(--sw-space-1);
+  transform: rotate(-45deg);
+  transition: transform var(--sw-motion-default) var(--sw-motion-easing);
+  width: var(--sw-space-2);
+}
+
+.sw-accordion-marker:dir(rtl) { transform: rotate(135deg); }
+
+.sw-accordion[open] > .sw-accordion-summary .sw-accordion-marker {
+  transform: rotate(45deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-accordion-marker { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-accordion-marker { border-color: CanvasText; }
+}`;
+}
 export function cssAccordionClasses() {
     return `.sw-accordion {
   background: var(--sw-glass-fill);
@@ -9,25 +39,42 @@ export function cssAccordionClasses() {
   color: var(--sw-color-text);
 }
 
+/* A nested disclosure sits inside a larger surface, so its corners are smaller. */
+.sw-accordion-sm { border-radius: var(--sw-radius-md); }
+
 .sw-accordion-summary {
+  align-items: center;
+  box-sizing: border-box;
   cursor: pointer;
-  display: list-item;
+  display: flex;
+  gap: var(--sw-space-3);
+  list-style: none;
   min-height: var(--sw-control-md-min-height);
 }
 
-.sw-accordion-summary::-webkit-details-marker {
-  color: var(--sw-color-muted);
-}
+/* A nested header is an sm control, still a comfortable pointer and touch target. */
+.sw-accordion-sm > .sw-accordion-summary { min-height: var(--sw-control-sm-min-height); }
 
-.sw-accordion-summary::marker {
-  color: var(--sw-color-muted);
+.sw-accordion-heading {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
 }
 
 .sw-accordion-summary:focus-visible {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);
-}`;
+}
+
+${markerRules()}`;
 }
 export function accordionClassCatalog() {
-    return ['sw-accordion', 'sw-accordion-summary'];
+    return [
+        'sw-accordion',
+        'sw-accordion-sm',
+        'sw-accordion-summary',
+        'sw-accordion-heading',
+        'sw-accordion-marker',
+    ];
 }

package/dist/css/css-action-bar.d.ts

@@ -0,0 +1,4 @@
+import { type Breakpoint } from './breakpoints.js';
+export declare function actionBarStickyClass(stickyBelow: Breakpoint | undefined): string;
+export declare function cssActionBarClasses(): string;
+export declare function actionBarClassCatalog(): string[];

package/dist/css/css-action-bar.js

@@ -0,0 +1,99 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery, breakpoints, } from './breakpoints.js';
+import { zIndex } from './stacking.js';
+const caption = typographyVariants.caption;
+/* The bar floats a step above the bottom edge and clears the home indicator. */
+function stuckToBottom(indent) {
+    return [
+        'bottom: calc(var(--sw-space-2) + env(safe-area-inset-bottom, 0px));',
+        'position: sticky;',
+        zIndex('bottomChrome'),
+    ]
+        .map((declaration) => `${indent}${declaration}`)
+        .join('\n');
+}
+export function actionBarStickyClass(stickyBelow) {
+    return stickyBelow
+        ? `sw-action-bar-sticky-below-${stickyBelow}`
+        : 'sw-action-bar-sticky';
+}
+function stickyRules() {
+    const below = breakpoints
+        .map((breakpoint) => `@media ${breakpointQuery('below', breakpoint)} {
+  .${actionBarStickyClass(breakpoint)} {
+${stuckToBottom('    ')}
+  }
+}`)
+        .join('\n\n');
+    return `.sw-action-bar-sticky {
+${stuckToBottom('  ')}
+}
+
+${below}`;
+}
+export function cssActionBarClasses() {
+    return `.sw-action-bar {
+  align-items: center;
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-lg);
+  box-shadow: inset 0 1px 0 var(--sw-glass-specular);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-4);
+  padding-block: var(--sw-space-3);
+  padding-left: max(var(--sw-space-4), env(safe-area-inset-left, 0px));
+  padding-right: max(var(--sw-space-4), env(safe-area-inset-right, 0px));
+}
+
+.sw-action-bar-status {
+  color: var(--sw-color-muted);
+  flex: 1 1 auto;
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+  margin: 0;
+  min-width: 0;
+}
+
+/* With no status the live region stays in the page, so a first status is
+   still announced, but it takes no room in the bar. */
+.sw-action-bar-status:empty {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+.sw-action-bar-actions {
+  align-items: center;
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  .sw-action-bar-status,
+  .sw-action-bar-actions { flex-basis: 100%; }
+  .sw-action-bar-actions > * { flex: 1 1 auto; }
+}
+
+${stickyRules()}`;
+}
+export function actionBarClassCatalog() {
+    return [
+        'sw-action-bar',
+        'sw-action-bar-status',
+        'sw-action-bar-actions',
+        'sw-action-bar-sticky',
+        ...breakpoints.map((breakpoint) => actionBarStickyClass(breakpoint)),
+    ];
+}

package/dist/css/css-action-menu.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { zIndex } from './stacking.js';
 const label = typographyVariants.label;
 export function cssActionMenuClasses() {
     return `.sw-action-menu {
@@ -45,7 +46,7 @@ export function cssActionMenuClasses() {
   overflow: auto;
   padding: var(--sw-space-1);
   position: fixed;
-  z-index: 10;
+  ${zIndex('popup')}
 }
 
 .sw-action-menu-list[hidden] {

package/dist/css/css-box-border.d.ts

@@ -0,0 +1,5 @@
+export type BoxBorderValue = boolean | 'dashed';
+/** The generated class for a Box `border` prop, or none for `false`. */
+export declare function boxBorderClass(border: BoxBorderValue | undefined): string | undefined;
+export declare function cssBoxBorderClasses(): string;
+export declare function boxBorderClassCatalog(): string[];

package/dist/css/css-box-border.js

@@ -0,0 +1,24 @@
+const borderStyles = ['solid', 'dashed'];
+function borderClass(style) {
+    return style === 'solid' ? 'sw-border' : `sw-border-${style}`;
+}
+/** The generated class for a Box `border` prop, or none for `false`. */
+export function boxBorderClass(border) {
+    if (!border)
+        return undefined;
+    return borderClass(border === 'dashed' ? 'dashed' : 'solid');
+}
+/*
+ * A Box `border` is a token hairline. These rules are emitted after every
+ * component rule so that, at equal specificity, the prop still wins over a
+ * Box-based component's own frame. A consumer `style` wins over both. In
+ * forced colors the system border color replaces the token and the style stays.
+ */
+export function cssBoxBorderClasses() {
+    return borderStyles
+        .map((style) => `.${borderClass(style)} { border: 1px ${style} var(--sw-color-border); }`)
+        .join('\n');
+}
+export function boxBorderClassCatalog() {
+    return borderStyles.map(borderClass);
+}

package/dist/css/css-chrome.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { zIndex } from './stacking.js';
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
 export function cssChromeClasses() {
@@ -14,7 +15,7 @@ export function cssChromeClasses() {
 .sw-app-header-sticky {
   position: sticky;
   top: 0;
-  z-index: 2;
+  ${zIndex('topChrome')}
 }
 
 .sw-nav {