@scalewing/react 1.8.0 → 1.10.0

package/dist/components/Grid.js

@@ -5,7 +5,7 @@ import { gridColumnsBelowClass, gridColumnsClass, } from '../css/css-grid.js';
 import { spacingClass } from '../css/spacing-classes.js';
 import { assertGridCount } from '../grid-counts.js';
 import { Box } from './Box.js';
-export function Grid({ className, columns = 1, columnsBelow, gap = 0, ...rest }) {
+export function Grid({ align, className, columns = 1, columnsBelow, gap = 0, ...rest }) {
     assertGridCount('columns', columns);
     const belowClasses = breakpoints.flatMap((breakpoint) => {
         const count = columnsBelow?.[breakpoint];
@@ -14,5 +14,5 @@ export function Grid({ className, columns = 1, columnsBelow, gap = 0, ...rest })
         assertGridCount('columnsBelow', count);
         return [gridColumnsBelowClass(breakpoint, count)];
     });
-    return (_jsx(Box, { className: cx('sw-grid', gridColumnsClass(columns), ...belowClasses, spacingClass('gap', 'all', gap), className), ...rest }));
+    return (_jsx(Box, { className: cx('sw-grid', gridColumnsClass(columns), ...belowClasses, spacingClass('gap', 'all', gap), align && `sw-align-${align}`, className), ...rest }));
 }

package/dist/components/Progress.d.ts

@@ -4,5 +4,7 @@ export type ProgressProps = {
     value: number;
     max: number;
     tone?: ProgressTone;
+    /** Shows the muted "value / max" count beside the label. Turn it off when the page shows its own count. */
+    showCount?: boolean;
 };
-export declare function Progress({ label, value, max, tone, }: ProgressProps): import("react").JSX.Element;
+export declare function Progress({ label, value, max, tone, showCount, }: ProgressProps): import("react").JSX.Element;

package/dist/components/Progress.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
-export function Progress({ label, value, max, tone = 'accent', }) {
+export function Progress({ label, value, max, tone = 'accent', showCount = true, }) {
     if (!label.trim())
         throw new RangeError('label must not be empty');
     if (!Number.isFinite(max) || max <= 0)
@@ -9,5 +9,5 @@ export function Progress({ label, value, max, tone = 'accent', }) {
     if (!Number.isFinite(value) || value < 0 || value > max)
         throw new RangeError('value must be finite and within 0..max');
     const labelId = useId();
-    return (_jsxs("div", { className: `sw-progress sw-progress-${tone}`, children: [_jsxs("div", { className: "sw-progress-heading", children: [_jsx("span", { className: "sw-progress-label", id: labelId, children: label }), _jsxs("span", { "aria-hidden": "true", className: "sw-progress-count", children: [value, " / ", max] })] }), _jsx("progress", { "aria-labelledby": labelId, className: "sw-progress-bar", max: max, value: value })] }));
+    return (_jsxs("div", { className: `sw-progress sw-progress-${tone}`, children: [_jsxs("div", { className: "sw-progress-heading", children: [_jsx("span", { className: "sw-progress-label", id: labelId, children: label }), showCount ? (_jsxs("span", { "aria-hidden": "true", className: "sw-progress-count", children: [value, " / ", max] })) : null] }), _jsx("progress", { "aria-labelledby": labelId, className: "sw-progress-bar", max: max, value: value })] }));
 }

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

@@ -0,0 +1,26 @@
+import { type RefObject } from 'react';
+import { type WeekStart } from '../../calendar-month.js';
+import { type DateFieldLabels } from '../../date-field-labels.js';
+export type CalendarDialogProps = {
+    anchorRef: RefObject<HTMLElement | null>;
+    buttonRef: RefObject<HTMLElement | null>;
+    id: string;
+    labelId: string;
+    labels: DateFieldLabels;
+    locale: string;
+    max?: string;
+    min?: string;
+    /** `true` returns focus to the calendar button. */
+    onClose: (restoreFocus: boolean) => void;
+    onSelect: (value: string) => void;
+    required: boolean;
+    today: string;
+    value: string;
+    weekStartsOn: WeekStart;
+};
+/**
+ * The calendar popover: a labelled modal dialog anchored under the field,
+ * following the WAI-ARIA date picker dialog pattern. It opens on the
+ * selected day, or today, kept inside `[min, max]`.
+ */
+export declare function CalendarDialog({ anchorRef, buttonRef, id, labelId, labels, locale, max, min, onClose, onSelect, required, today, value, weekStartsOn, }: CalendarDialogProps): import("react").JSX.Element;

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useRef, useState, } from 'react';
+import { monthOf, } from '../../calendar-month.js';
+import { clampDateOnly, daysInMonth, formatDateOnly, isOutsideDateRange, parseDateOnly, } from '../../date-only.js';
+import { Button } from '../Button.js';
+import { CalendarGrid } from './CalendarGrid.js';
+import { CalendarHeader } from './CalendarHeader.js';
+import { useAnchoredPopover } from './use-anchored-popover.js';
+/** The dialog's tab stops: enabled buttons and the grid's roving day. */
+function isTabStop(node) {
+    if (node instanceof HTMLButtonElement)
+        return !node.disabled;
+    return node.getAttribute('tabindex') === '0';
+}
+/** Keeps Tab and Shift+Tab inside the dialog, as a modal dialog does. */
+function wrapTab(event) {
+    // One universal selector keeps document order in every DOM implementation.
+    const items = [
+        ...event.currentTarget.querySelectorAll('*'),
+    ].filter(isTabStop);
+    const first = items[0];
+    const last = items[items.length - 1];
+    if (!first || !last)
+        return;
+    if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+    }
+    else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+    }
+}
+function sameDayIn(month, focused) {
+    const day = parseDateOnly(focused)?.day ?? 1;
+    return formatDateOnly({
+        ...month,
+        day: Math.min(day, daysInMonth(month.year, month.month)),
+    });
+}
+/**
+ * The calendar popover: a labelled modal dialog anchored under the field,
+ * following the WAI-ARIA date picker dialog pattern. It opens on the
+ * selected day, or today, kept inside `[min, max]`.
+ */
+export function CalendarDialog({ anchorRef, buttonRef, id, labelId, labels, locale, max, min, onClose, onSelect, required, today, value, weekStartsOn, }) {
+    const titleId = useId();
+    const dialogRef = useRef(null);
+    const [rawFocusDate, setFocusDate] = useState(value || today);
+    // A new value while open moves the calendar to it.
+    const [shownValue, setShownValue] = useState(value);
+    if (value !== shownValue) {
+        setShownValue(value);
+        if (value !== '')
+            setFocusDate(value);
+    }
+    // Clamped on every render, so new bounds while open move it inside.
+    const focusDate = clampDateOnly(rawFocusDate, min, max);
+    const month = monthOf(focusDate);
+    // Opening and grid keys move DOM focus to the focus date; header controls
+    // and presses change the date without taking focus from where it is.
+    const focusGrid = useRef(true);
+    useAnchoredPopover(dialogRef, anchorRef, buttonRef, () => onClose(false));
+    // Whether a day holds DOM focus. Removing that day fires no blur, so this
+    // stays true when a new value or bounds move the grid out from under it.
+    const gridFocused = useRef(false);
+    useLayoutEffect(() => {
+        if (!focusGrid.current && !gridFocused.current)
+            return;
+        focusGrid.current = false;
+        dialogRef.current
+            ?.querySelector(`[role="grid"] [data-date="${focusDate}"]`)
+            ?.focus({ preventScroll: true });
+    }, [focusDate]);
+    function onKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            onClose(true);
+        }
+        else if (event.key === 'Tab')
+            wrapTab(event);
+    }
+    const todayUnavailable = isOutsideDateRange(today, min, max);
+    return (_jsxs("div", { "aria-labelledby": labelId, "aria-modal": "true", className: "sw-date-field-calendar", id: id, onBlur: () => {
+            gridFocused.current = false;
+        }, onFocus: (event) => {
+            gridFocused.current = event.target.closest('[role="grid"]') !== null;
+        }, onKeyDown: onKeyDown, ref: dialogRef, role: "dialog", children: [_jsx(CalendarHeader, { labels: labels, locale: locale, max: max, min: min, month: month, onMonthChange: (next) => setFocusDate(sameDayIn(next, focusDate)), titleId: titleId, todayYear: monthOf(today).year }), _jsx(CalendarGrid, { focusDate: focusDate, locale: locale, max: max, min: min, month: month, onFocusDate: setFocusDate, onMoveFocus: (next) => {
+                    focusGrid.current = true;
+                    setFocusDate(next);
+                }, onSelect: onSelect, selected: value, titleId: titleId, today: today, weekStartsOn: weekStartsOn }), _jsxs("div", { className: "sw-date-field-footer", children: [required ? null : (_jsx(Button, { disabled: value === '', onPress: () => onSelect(''), size: "sm", variant: "ghost", children: labels.clear })), _jsx(Button, { disabled: todayUnavailable, onPress: () => onSelect(today), size: "sm", variant: "ghost", children: labels.today })] })] }));
+}

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

@@ -0,0 +1,23 @@
+import { type CalendarMonth, type WeekStart } from '../../calendar-month.js';
+export type CalendarGridProps = {
+    focusDate: string;
+    locale: string;
+    max?: string;
+    min?: string;
+    month: CalendarMonth;
+    /** A cell took focus: follow it without moving focus. */
+    onFocusDate: (value: string) => void;
+    /** A grid key chose a day: focus it. */
+    onMoveFocus: (value: string) => void;
+    onSelect: (value: string) => void;
+    selected: string;
+    titleId: string;
+    today: string;
+    weekStartsOn: WeekStart;
+};
+/**
+ * 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 declare function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate, onMoveFocus, onSelect, selected, titleId, today, weekStartsOn, }: CalendarGridProps): import("react").JSX.Element;

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 and CalendarButton. 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 and CalendarButton. 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-calendar-popup.d.ts

@@ -0,0 +1,36 @@
+import { type RefObject } from 'react';
+export type CalendarPopupOptions = {
+    value: string;
+    disabled: boolean;
+    onChange: (value: string) => void;
+    /** Runs before a chosen date closes the calendar, such as a text reset. */
+    beforeSelect?: () => void;
+};
+export type CalendarPopup = {
+    /** The button that toggles the calendar and takes focus back. */
+    buttonRef: RefObject<HTMLButtonElement | null>;
+    shown: boolean;
+    toggle: () => void;
+    /** ARIA for the toggling button, as the WAI-ARIA date picker asks. */
+    trigger: {
+        'aria-controls': string | undefined;
+        'aria-expanded': boolean;
+        'aria-haspopup': 'dialog';
+    };
+    /**
+     * CalendarDialog props that belong to the open and close cycle; pass
+     * `buttonRef` beside them.
+     */
+    dialog: {
+        id: string;
+        onClose: (restoreFocus: boolean) => void;
+        onSelect: (value: string) => void;
+        today: string;
+    };
+};
+/**
+ * The open state of a calendar dialog toggled by one button, shared by
+ * DateField and CalendarButton. Disabling closes it for good; choosing a
+ * date closes it, returns focus to the button, and reports a changed date.
+ */
+export declare function useCalendarPopup({ value, disabled, onChange, beforeSelect, }: CalendarPopupOptions): CalendarPopup;

package/dist/components/date-field/use-calendar-popup.js

@@ -0,0 +1,43 @@
+import { useId, useRef, useState } from 'react';
+import { todayDateOnly } from '../../date-only.js';
+/**
+ * The open state of a calendar dialog toggled by one button, shared by
+ * DateField and CalendarButton. Disabling closes it for good; choosing a
+ * date closes it, returns focus to the button, and reports a changed date.
+ */
+export function useCalendarPopup({ value, disabled, onChange, beforeSelect, }) {
+    const buttonRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    // Disabling closes the calendar for good, not just while disabled.
+    if (disabled && open)
+        setOpen(false);
+    const shown = open && !disabled;
+    const id = useId();
+    function close(restoreFocus) {
+        setOpen(false);
+        if (restoreFocus)
+            buttonRef.current?.focus();
+    }
+    function select(next) {
+        beforeSelect?.();
+        close(true);
+        if (next !== value)
+            onChange(next);
+    }
+    return {
+        buttonRef,
+        shown,
+        toggle: () => (shown ? close(true) : setOpen(true)),
+        trigger: {
+            'aria-controls': shown ? id : undefined,
+            'aria-expanded': shown,
+            'aria-haspopup': 'dialog',
+        },
+        dialog: {
+            id,
+            onClose: close,
+            onSelect: select,
+            today: todayDateOnly(),
+        },
+    };
+}

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/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',
+    ];
 }