@scalewing/react 1.39.0 → 1.41.0

package/dist/components/BarChart.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes } from 'react';
-import { type BarChartTone, barChartTones } from '../css/css-bar-chart.js';
-export type { BarChartTone };
-export { barChartTones };
+import { type BarChartAppearance, barChartAppearances, type BarChartTone, barChartTones } from '../css/css-bar-chart.js';
+export type { BarChartAppearance, BarChartTone };
+export { barChartAppearances, barChartTones };
 export type BarChartItem = {
     label: string;
     value: number;
@@ -9,7 +9,9 @@ export type BarChartItem = {
     /**
      * Colors the bar by what it means, in place of its sign's default (the
      * accent, or danger for a negative value): such as `'warning'` for an
-     * overage and `'danger'` for a shortage. The color is a cue beside the
+     * overage, `'danger'` for a shortage and `'neutral'` (the muted grey)
+     * for a bar that is counted but not the point, such as the usual days
+     * beside the busiest ones. The color is a cue beside the
      * value and its label, never the only sign of the meaning. An unknown tone
      * throws a `RangeError`.
      */
@@ -33,6 +35,13 @@ export type BarChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
      * alone tells a negative value.
      */
     diverging?: boolean;
+    /**
+     * `track` (the default) draws each bar in a track with the value axis
+     * under the bars. `bare` draws the bars alone, with no track and no
+     * axis, for bars whose values are all written beside them. An unknown
+     * appearance throws a `RangeError`.
+     */
+    appearance?: BarChartAppearance;
 };
 export declare const BarChart: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
     'aria-label': string;
@@ -52,4 +61,11 @@ export declare const BarChart: import("react").ForwardRefExoticComponent<Omit<HT
      * alone tells a negative value.
      */
     diverging?: boolean;
+    /**
+     * `track` (the default) draws each bar in a track with the value axis
+     * under the bars. `bare` draws the bars alone, with no track and no
+     * axis, for bars whose values are all written beside them. An unknown
+     * appearance throws a `RangeError`.
+     */
+    appearance?: BarChartAppearance;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/BarChart.js

@@ -2,21 +2,28 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { barChartFillRatio, barChartScaleMax, formatBarChartValue, } from '@scalewing/tokens';
 import { forwardRef } from 'react';
 import { cx } from '../class-names.js';
-import { barChartTones } from '../css/css-bar-chart.js';
-export { barChartTones };
+import { barChartAppearances, barChartTones, } from '../css/css-bar-chart.js';
+export { barChartAppearances, barChartTones };
 /** The fill's classes: the sign's (which also shapes a diverging bar) and the tone's. */
 function barChartFillClassName(item) {
     if (item.tone !== undefined && !barChartTones.includes(item.tone))
         throw new RangeError(`BarChart item tone must be one of ${barChartTones.join(', ')}; received ${String(item.tone)}`);
     return cx('sw-bar-chart-fill', item.value < 0 && 'sw-bar-chart-fill-negative', item.tone && `sw-bar-chart-fill-${item.tone}`);
 }
-export const BarChart = forwardRef(function BarChart({ 'aria-label': ariaLabel, className, diverging = false, formatValue = formatBarChartValue, items, max, style, ...rest }, ref) {
+export const BarChart = forwardRef(function BarChart({ 'aria-label': ariaLabel, appearance = 'track', className, diverging = false, formatValue = formatBarChartValue, items, max, style, ...rest }, ref) {
+    if (!barChartAppearances.includes(appearance))
+        throw new RangeError(`Unknown BarChart appearance: ${String(appearance)}`);
     const scaleMax = barChartScaleMax(items.map((item) => item.value), max);
-    const axis = diverging ? [-scaleMax, 0, scaleMax] : [0, scaleMax];
-    return (_jsxs("div", { ref: ref, className: cx('sw-bar-chart', diverging && 'sw-bar-chart-diverging', className), style: style, ...rest, children: [_jsx("ul", { "aria-label": ariaLabel, className: "sw-bar-chart-plot", children: items.map((item, index) => {
+    const bare = appearance === 'bare';
+    const axis = bare
+        ? []
+        : diverging
+            ? [-scaleMax, 0, scaleMax]
+            : [0, scaleMax];
+    return (_jsxs("div", { ref: ref, className: cx('sw-bar-chart', diverging && 'sw-bar-chart-diverging', bare && 'sw-bar-chart-bare', className), style: style, ...rest, children: [_jsx("ul", { "aria-label": ariaLabel, className: "sw-bar-chart-plot", children: items.map((item, index) => {
                     const ratio = barChartFillRatio(item.value, scaleMax);
                     return (_jsxs("li", { className: "sw-bar-chart-row", children: [_jsx("span", { className: "sw-bar-chart-label", children: item.label }), _jsx("span", { className: "sw-bar-chart-track", children: _jsx("span", { className: barChartFillClassName(item), style: {
                                         '--sw-bar-fill': ratio,
                                     } }) }), _jsx("span", { className: "sw-bar-chart-value", children: item.valueLabel ?? formatValue(item.value) })] }, `${item.label}-${index}`));
-                }) }), _jsxs("div", { "aria-hidden": "true", className: "sw-bar-chart-axis", children: [_jsx("span", {}), _jsx("span", { className: "sw-bar-chart-axis-track", children: axis.map((value) => (_jsx("span", { children: formatValue(value) }, value))) }), _jsx("span", {})] })] }));
+                }) }), bare ? null : (_jsxs("div", { "aria-hidden": "true", className: "sw-bar-chart-axis", children: [_jsx("span", {}), _jsx("span", { className: "sw-bar-chart-axis-track", children: axis.map((value) => (_jsx("span", { children: formatValue(value) }, value))) }), _jsx("span", {})] }))] }));
 });

package/dist/components/ButtonGroup.d.ts

@@ -1,3 +1,4 @@
+import { type Breakpoint } from '../css/breakpoints.js';
 import { type ButtonGroupAppearance, buttonGroupAppearances } from '../css/css-button-group-track.js';
 import { type BoxProps } from './Box.js';
 export type ButtonGroupJustify = 'start' | 'end' | 'between';
@@ -19,6 +20,12 @@ export type ButtonGroupProps = BoxProps & {
      * variant; `default` keeps each button's own fill and outline.
      */
     appearance?: ButtonGroupAppearance;
+    /**
+     * Below this breakpoint (an `attached` group only) the group fills its
+     * column and its buttons share the width equally, such as ‹, a period and
+     * › across a phone. From it up the group sizes to its buttons.
+     */
+    fullWidthBelow?: Breakpoint;
 };
 /**
  * The action row of a form or dialog: buttons on one line, wrapping when
@@ -27,4 +34,4 @@ export type ButtonGroupProps = BoxProps & {
  * (put the primary action last, as the row already does). It is a `group`,
  * so an `aria-label` names the row for assistive tech.
  */
-export declare function ButtonGroup({ appearance, attached, className, justify, ...rest }: ButtonGroupProps): import("react").JSX.Element;
+export declare function ButtonGroup({ appearance, attached, className, fullWidthBelow, justify, ...rest }: ButtonGroupProps): import("react").JSX.Element;

package/dist/components/ButtonGroup.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../class-names.js';
+import { breakpoints } from '../css/breakpoints.js';
+import { buttonGroupFullWidthClass } from '../css/css-button-group-attached.js';
 import { buttonGroupAppearances, buttonGroupTrackClass, } from '../css/css-button-group-track.js';
 import { Box } from './Box.js';
 export { buttonGroupAppearances };
@@ -10,10 +12,17 @@ export { buttonGroupAppearances };
  * (put the primary action last, as the row already does). It is a `group`,
  * so an `aria-label` names the row for assistive tech.
  */
-export function ButtonGroup({ appearance = 'default', attached = false, className, justify = 'end', ...rest }) {
+export function ButtonGroup({ appearance = 'default', attached = false, className, fullWidthBelow, justify = 'end', ...rest }) {
     if (!buttonGroupAppearances.includes(appearance))
         throw new RangeError(`Unknown ButtonGroup appearance: ${String(appearance)}`);
     if (appearance === 'track' && !attached)
         throw new RangeError('ButtonGroup appearance="track" needs attached');
-    return (_jsx(Box, { className: cx('sw-button-group', `sw-button-group-${justify}`, attached && 'sw-button-group-attached', appearance === 'track' && buttonGroupTrackClass, className), role: "group", ...rest }));
+    if (fullWidthBelow !== undefined) {
+        if (!breakpoints.includes(fullWidthBelow))
+            throw new RangeError(`Unknown ButtonGroup fullWidthBelow: ${String(fullWidthBelow)}`);
+        // An unattached group already stacks full width below md.
+        if (!attached)
+            throw new RangeError('ButtonGroup fullWidthBelow needs attached');
+    }
+    return (_jsx(Box, { className: cx('sw-button-group', `sw-button-group-${justify}`, attached && 'sw-button-group-attached', appearance === 'track' && buttonGroupTrackClass, fullWidthBelow && buttonGroupFullWidthClass(fullWidthBelow), className), role: "group", ...rest }));
 }

package/dist/components/DateField.d.ts

@@ -1,7 +1,9 @@
 import { type WeekStart } from '../calendar-month.js';
 import { type DateFieldLabels } from '../date-field-labels.js';
+import { type DateFieldEntry } from '../css/css-date-field-calendar-entry.js';
 import { type RequiredMark } from './FieldLabelText.js';
-export type { DateFieldLabels, WeekStart };
+export type { DateFieldEntry, DateFieldLabels, WeekStart };
+export { dateFieldEntries } from '../css/css-date-field-calendar-entry.js';
 export type DateFieldProps = {
     label: string;
     /** Calendar date `YYYY-MM-DD`, or '' for no date. */
@@ -37,5 +39,15 @@ export type DateFieldProps = {
     weekStartsOn?: WeekStart;
     /** The control's own words; English by default. */
     labels?: Partial<DateFieldLabels>;
+    /**
+     * `typed` (the default) is a text entry in the locale's order with a
+     * calendar button. `calendar` is one button showing the chosen day (or
+     * `labels.chooseDate`, such as "Choose a day", while empty) that opens
+     * the same calendar, for a form where a day is picked, never typed. It
+     * has no text to check, so validation and a required day stay with the
+     * consumer's `error`; while `required`, `labels.required` is said after
+     * its name.
+     */
+    entry?: DateFieldEntry;
 };
-export declare function DateField({ label, value, onChange, min, max, today, disabled, required, requiredMark, description, error, locale, weekStartsOn, labels, }: DateFieldProps): import("react").JSX.Element;
+export declare function DateField({ label, value, onChange, min, max, today, disabled, required, requiredMark, description, error, locale, weekStartsOn, labels, entry: entryKind, }: DateFieldProps): import("react").JSX.Element;

package/dist/components/DateField.js

@@ -6,16 +6,19 @@ import { resolveDateFieldLabels, } from '../date-field-labels.js';
 import { dateEntryPattern, dateEntryPlaceholder } from '../date-entry.js';
 import { dateEntryValidity } from '../date-entry-validity.js';
 import { assertDateBounds, isOutsideDateRange } from '../date-only.js';
+import { assertDateFieldEntry, } from '../css/css-date-field-calendar-entry.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { assertRequiredMark, FieldLabelText, } from './FieldLabelText.js';
 import { CalendarDialog } from './date-field/CalendarDialog.js';
-import { DateFieldGlyph } from './date-field/DateFieldGlyph.js';
+import { CalendarEntryButton } from './date-field/CalendarEntryButton.js';
+import { TypedEntry } from './date-field/TypedEntry.js';
 import { useCalendarPopup } from './date-field/use-calendar-popup.js';
 import { useDateEntry } from './date-field/use-date-entry.js';
 import { useLangLocale } from './date-field/use-lang-locale.js';
-import { tabStop } from '../tab-stop.js';
-export function DateField({ label, value, onChange, min, max, today, disabled = false, required = false, requiredMark = 'visible', description, error, locale, weekStartsOn = 0, labels, }) {
+export { dateFieldEntries } from '../css/css-date-field-calendar-entry.js';
+export function DateField({ label, value, onChange, min, max, today, disabled = false, required = false, requiredMark = 'visible', description, error, locale, weekStartsOn = 0, labels, entry: entryKind = 'typed', }) {
     assertRequiredMark(requiredMark);
+    assertDateFieldEntry(entryKind);
     assertDateBounds(value, min, max);
     assertWeekStart(weekStartsOn);
     const words = resolveDateFieldLabels(labels);
@@ -45,7 +48,10 @@ export function DateField({ label, value, onChange, min, max, today, disabled =
     const descriptionId = useId();
     const entryErrorId = useId();
     const errorId = useId();
+    const requiredId = useId();
+    const calendarEntry = entryKind === 'calendar';
     const describedBy = [
+        calendarEntry && required ? requiredId : null,
         description ? descriptionId : null,
         entry.invalid ? entryErrorId : null,
         error ? errorId : null,
@@ -53,12 +59,9 @@ export function DateField({ label, value, onChange, min, max, today, disabled =
         .filter((id) => id !== null)
         .join(' ');
     const invalid = Boolean(error) || entry.invalid || isOutsideDateRange(value, min, max);
-    return (_jsxs("div", { className: "sw-date-field", ref: rootRef, children: [_jsx("label", { className: "sw-date-field-label", htmlFor: inputId, id: labelId, children: _jsx(FieldLabelText, { label: label, required: required, requiredMark: requiredMark }) }), _jsxs("div", { className: "sw-date-field-control", ref: controlRef, children: [_jsx("input", { "aria-describedby": describedBy || undefined, "aria-invalid": invalid, autoComplete: "off", className: "sw-date-field-input", disabled: disabled, id: inputId, onBlur: entry.check, onChange: (event) => entry.change(event.currentTarget.value), onKeyDown: (event) => {
-                            if (event.key === 'Enter')
-                                entry.check();
-                        }, placeholder: dateEntryPlaceholder(pattern, {
-                            day: words.dayPlaceholder,
-                            month: words.monthPlaceholder,
-                            year: words.yearPlaceholder,
-                        }), ref: inputRef, required: required, spellCheck: false, type: "text", value: entry.text }), _jsxs("button", { ...trigger, "aria-describedby": labelId, className: "sw-date-field-button", disabled: disabled, onClick: toggle, ref: buttonRef, tabIndex: tabStop, type: "button", children: [_jsx("span", { className: "sw-sr-only", children: words.chooseDate }), _jsx(DateFieldGlyph, { name: "calendar" })] })] }), description ? (_jsx("span", { className: "sw-date-field-description", id: descriptionId, children: description })) : null, _jsx(FieldErrorRegion, { className: "sw-date-field-error", id: entryErrorId, message: entry.invalid ? words.invalidEntry : undefined }), _jsx(FieldErrorRegion, { className: "sw-date-field-error", id: errorId, message: error }), shown ? (_jsx(CalendarDialog, { ...dialog, buttonRef: buttonRef, anchorRef: controlRef, labelId: labelId, labels: words, locale: resolvedLocale, max: max, min: min, required: required, value: value, weekStartsOn: weekStartsOn })) : null] }));
+    return (_jsxs("div", { className: "sw-date-field", ref: rootRef, children: [_jsx("label", { className: "sw-date-field-label", htmlFor: inputId, id: labelId, children: _jsx(FieldLabelText, { label: label, required: required, requiredMark: requiredMark }) }), calendarEntry ? (_jsxs("div", { className: "sw-date-field-control", ref: controlRef, children: [_jsx(CalendarEntryButton, { buttonRef: buttonRef, describedBy: describedBy || undefined, disabled: disabled, emptyText: words.chooseDate, id: inputId, invalid: invalid, labelId: labelId, locale: resolvedLocale, onPress: toggle, trigger: trigger, value: value }), required ? (_jsx("span", { hidden: true, id: requiredId, children: words.required })) : null] })) : (_jsx(TypedEntry, { buttonRef: buttonRef, controlRef: controlRef, describedBy: describedBy || undefined, disabled: disabled, entry: entry, id: inputId, inputRef: inputRef, invalid: invalid, labelId: labelId, onToggle: toggle, placeholder: dateEntryPlaceholder(pattern, {
+                    day: words.dayPlaceholder,
+                    month: words.monthPlaceholder,
+                    year: words.yearPlaceholder,
+                }), required: required, toggleName: words.chooseDate, trigger: trigger })), description ? (_jsx("span", { className: "sw-date-field-description", id: descriptionId, children: description })) : null, _jsx(FieldErrorRegion, { className: "sw-date-field-error", id: entryErrorId, message: entry.invalid ? words.invalidEntry : undefined }), _jsx(FieldErrorRegion, { className: "sw-date-field-error", id: errorId, message: error }), shown ? (_jsx(CalendarDialog, { ...dialog, buttonRef: buttonRef, anchorRef: controlRef, labelId: labelId, labels: words, locale: resolvedLocale, max: max, min: min, required: required, value: value, weekStartsOn: weekStartsOn })) : null] }));
 }

package/dist/components/DateRangeButton.d.ts

@@ -0,0 +1,65 @@
+import { type WeekStart } from '../calendar-month.js';
+import { type DateRangePreset } from '../date-range-input.js';
+import { type DateRangeButtonLabels } from '../date-range-labels.js';
+import { type DateOnlyRange } from '../date-only.js';
+import { type ButtonSize, type ButtonVariant } from './Button.js';
+export type { DateRangeButtonLabels, DateRangePreset };
+/** A span of calendar days `YYYY-MM-DD`, both ends included. */
+export type DateRangeButtonValue = DateOnlyRange;
+export type DateRangeButtonProps = {
+    /**
+     * What pressing it does, such as "Choose a period". The button's name is
+     * this label, `labels.nameSeparator`, then the range it shows; the
+     * popover and the sheet are named by it.
+     */
+    label: string;
+    /**
+     * The range shown, `{ start, end }` as `YYYY-MM-DD`, start not after end.
+     * A range outside `min`/`max` or longer than `maxDays` stays the value.
+     */
+    value: DateRangeButtonValue;
+    /** Receives a new range on Apply or a preset, never converted through UTC. */
+    onChange: (value: DateRangeButtonValue) => void;
+    /**
+     * Ranges chosen in one press, such as "Last 7 days": a list beside the
+     * months (a row above the month on a phone). A press applies its range
+     * and closes. Each must lie inside `min`/`max` and `maxDays`.
+     */
+    presets?: readonly DateRangePreset[];
+    min?: string;
+    /** The last day that can be picked, such as today. */
+    max?: string;
+    /**
+     * The longest range, in days with both ends counted: once a first day is
+     * pressed, the days after this many are disabled.
+     */
+    maxDays?: number;
+    /**
+     * The calendar's today `YYYY-MM-DD`, the day it marks. Defaults to the
+     * device's local date; pass the business's day when it keeps its own.
+     */
+    today?: string;
+    disabled?: boolean;
+    /** The `<button>` element's id. */
+    id?: string;
+    /**
+     * BCP 47 tag for the dates and the calendar's month and weekday names.
+     * Defaults to the nearest `lang` attribute, then en-US.
+     */
+    locale?: string;
+    /** First column of the calendar: 0 Sunday (default) or 1 Monday. */
+    weekStartsOn?: WeekStart;
+    /** The calendar's words; English by default. */
+    labels?: Partial<DateRangeButtonLabels>;
+    /** A Button size; a coarse pointer gets a 44 px target. */
+    size?: ButtonSize;
+    /** Default `neutral`, the quiet grey of a page's period controls. */
+    variant?: ButtonVariant;
+};
+/**
+ * A button showing a range of days that opens a calendar to pick a first
+ * and a last day: from `md` up a popover with the presets and two months,
+ * below it a bottom sheet with one month. Apply gives the range; Cancel,
+ * Escape and a press outside keep the value. The ref reaches the `<button>`.
+ */
+export declare const DateRangeButton: import("react").ForwardRefExoticComponent<DateRangeButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/DateRangeButton.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import { breakpointQuery } from '../css/breakpoints.js';
+import { latestPick, rangeDayCount, sameRange } from '../date-range-draft.js';
+import { assertDateRangeInput, } from '../date-range-input.js';
+import { resolveDateRangeButtonLabels, } from '../date-range-labels.js';
+import { formatRangeLong, formatRangeShort } from '../date-range-words.js';
+import { todayDateOnly } from '../date-only.js';
+import { Button } from './Button.js';
+import { DateFieldGlyph } from './date-field/DateFieldGlyph.js';
+import { useLangLocale } from './date-field/use-lang-locale.js';
+import { DateRangePopover } from './date-range/DateRangePopover.js';
+import { DateRangeSheet } from './date-range/DateRangeSheet.js';
+import { useRangePopup } from './date-range/use-range-popup.js';
+import { useMediaQuery } from './use-media-query.js';
+/** Sets a forwarded ref, callback or object, to the same node. */
+function setForwardedRef(ref, node) {
+    if (typeof ref === 'function')
+        ref(node);
+    else if (ref)
+        ref.current = node;
+}
+/**
+ * A button showing a range of days that opens a calendar to pick a first
+ * and a last day: from `md` up a popover with the presets and two months,
+ * below it a bottom sheet with one month. Apply gives the range; Cancel,
+ * Escape and a press outside keep the value. The ref reaches the `<button>`.
+ */
+export const DateRangeButton = forwardRef(function DateRangeButton({ label, value, onChange, presets = [], min, max, maxDays, today, disabled = false, id, locale, weekStartsOn = 0, labels, size = 'md', variant = 'neutral', }, ref) {
+    assertDateRangeInput({
+        label,
+        value,
+        presets,
+        min,
+        max,
+        maxDays,
+        today,
+        weekStartsOn,
+    });
+    const words = resolveDateRangeButtonLabels(labels);
+    const popup = useRangePopup(value, disabled, onChange);
+    const resolvedLocale = useLangLocale(locale, popup.buttonRef);
+    const wide = useMediaQuery(breakpointQuery('from', 'md'), true);
+    const { buttonRef } = popup;
+    const setButton = useCallback((node) => {
+        buttonRef.current = node;
+        setForwardedRef(ref, node);
+    }, [buttonRef, ref]);
+    const { range } = popup.draft;
+    const shown = formatRangeShort(value, resolvedLocale);
+    const Panel = wide ? DateRangePopover : DateRangeSheet;
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { "aria-controls": popup.shown ? popup.id : undefined, "aria-expanded": popup.shown, "aria-haspopup": "dialog", className: "sw-date-range-button", disabled: disabled, id: id, onPress: popup.toggle, ref: setButton, size: size, variant: variant, children: [_jsx("span", { className: "sw-sr-only", children: `${label}${words.nameSeparator}${shown}` }), _jsx(DateFieldGlyph, { name: "calendar" }), _jsx("span", { "aria-hidden": "true", children: shown })] }), popup.shown ? (_jsx(Panel, { buttonRef: buttonRef, count: words.dayCount(rangeDayCount(range)), draft: popup.draft, id: popup.id, label: label, labels: words, latest: latestPick(popup.draft, max, maxDays), line: formatRangeLong(range, resolvedLocale), locale: resolvedLocale, max: max, min: min, onApply: () => popup.apply(range), onCancel: popup.cancel, onChoosePreset: (preset) => popup.apply(preset.range), onPress: popup.press, presets: presets, pressedPresetId: presets.find((preset) => sameRange(preset.range, range))?.id, today: today ?? todayDateOnly(), weekStartsOn: weekStartsOn })) : null] }));
+});

package/dist/components/DenominationGrid.d.ts

@@ -2,7 +2,8 @@ import { denominationGridFrames, denominationTotalEmphases } from '../css/css-de
 import { denominationCellToneAppearances } from '../css/css-denomination-cell-tones.js';
 import { denominationLabelAppearances } from '../css/css-denomination-label.js';
 import { type DenominationGridProps } from './denomination-grid/types.js';
-export type { DenominationCellToneAppearance, DenominationGridColumn, DenominationGridEntry, DenominationGridFrame, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationGridValueRow, DenominationLabelWidth, DenominationTotalEmphasis, } from './denomination-grid/types.js';
+export type { DenominationCellToneAppearance, DenominationGridColumn, DenominationGridEntry, DenominationGridFrame, DenominationGridLayout, DenominationGridNegativeAppearance, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationGridValueRow, DenominationLabelWidth, DenominationTotalEmphasis, DenominationTransposeBreakpoint, } from './denomination-grid/types.js';
+export { denominationNegativeAppearances, denominationTransposeBreakpoints, } from './denomination-grid/types.js';
 export type { DenominationLabelAppearance } from '../css/css-denomination-label.js';
 export { denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationTotalEmphases, };
-export declare function DenominationGrid({ label, columns, rows, layout, subtotal, zeroLabel, totalLabel, rowRole, labelWidth, labelAppearance, frame, totalEmphasis, cellToneAppearance, }: DenominationGridProps): import("react").JSX.Element;
+export declare function DenominationGrid({ label, columns, rows, layout, subtotal, zeroLabel, totalLabel, rowRole, labelWidth, labelAppearance, frame, totalEmphasis, cellToneAppearance, transposeBelow, countDigits, }: DenominationGridProps): import("react").JSX.Element;

package/dist/components/DenominationGrid.js

@@ -1,25 +1,33 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../class-names.js';
+import { breakpointQuery } from '../css/breakpoints.js';
+import { denominationCountDigitsClass } from '../css/css-denomination-transposed.js';
 import { denominationLabelWidths } from '../css/css-denomination-aligned.js';
 import { denominationGridFrames, denominationTotalEmphases, denominationTotalsStrongClass, } from '../css/css-denomination-appearance.js';
 import { denominationCellToneAppearances, denominationCellTonesPillClass, } from '../css/css-denomination-cell-tones.js';
 import { denominationLabelAppearances, denominationLabelsPlainClass, } from '../css/css-denomination-label.js';
 import { DenominationStrip } from './denomination-grid/DenominationStrip.js';
 import { DenominationTiles } from './denomination-grid/DenominationTiles.js';
+import { TransposedStrip } from './denomination-grid/TransposedStrip.js';
 import { assertDenominationGrid } from './denomination-grid/validate.js';
+import { assertDenominationOptions } from './denomination-grid/validate-options.js';
 import { assertDenominationValueRows } from './denomination-grid/validate-value-row.js';
+import { useMediaQuery } from './use-media-query.js';
 import { assertDenominationEntries, assertDenominationExtras, } from './denomination-grid/validate-entry.js';
+export { denominationNegativeAppearances, denominationTransposeBreakpoints, } from './denomination-grid/types.js';
 export { denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationTotalEmphases, };
 /** Fails closed on a value outside a closed set, naming the prop. */
 function assertOneOf(values, value, prop) {
     if (!values.includes(value))
         throw new RangeError(`Unknown ${prop}: ${String(value)}`);
 }
-export function DenominationGrid({ label, columns, rows, layout = 'strip', subtotal, zeroLabel = '—', totalLabel, rowRole = 'region', labelWidth, labelAppearance = 'tone', frame = 'none', totalEmphasis = 'default', cellToneAppearance = 'text', }) {
+export function DenominationGrid({ label, columns, rows, layout = 'strip', subtotal, zeroLabel = '—', totalLabel, rowRole = 'region', labelWidth, labelAppearance = 'tone', frame = 'none', totalEmphasis = 'default', cellToneAppearance = 'text', transposeBelow, countDigits, }) {
     assertDenominationGrid(label, columns, rows);
     assertDenominationExtras(layout, columns, rows);
     assertDenominationEntries(layout, columns, rows);
     assertDenominationValueRows(layout, columns, rows);
+    assertDenominationOptions(layout, rows, transposeBelow, countDigits);
     if (typeof zeroLabel !== 'string')
         throw new RangeError('zeroLabel must be a string');
     if (totalLabel !== undefined && !totalLabel.trim())
@@ -32,8 +40,18 @@ export function DenominationGrid({ label, columns, rows, layout = 'strip', subto
     assertOneOf(denominationGridFrames, frame, 'frame');
     assertOneOf(denominationTotalEmphases, totalEmphasis, 'totalEmphasis');
     assertOneOf(denominationCellToneAppearances, cellToneAppearance, 'cellToneAppearance');
-    const appearanceClass = cx(labelAppearance === 'plain' && denominationLabelsPlainClass, totalEmphasis === 'strong' && denominationTotalsStrongClass, cellToneAppearance === 'pill' && denominationCellTonesPillClass);
+    const appearanceClass = cx(labelAppearance === 'plain' && denominationLabelsPlainClass, totalEmphasis === 'strong' && denominationTotalsStrongClass, cellToneAppearance === 'pill' && denominationCellTonesPillClass, countDigits !== undefined && denominationCountDigitsClass);
+    const countStyle = countDigits === undefined
+        ? undefined
+        : { '--sw-denomination-count-digits': countDigits };
+    // Read on every render (hooks run in order); without transposeBelow the
+    // query never matches.
+    const transposed = useMediaQuery(transposeBelow === undefined
+        ? 'not all'
+        : breakpointQuery('below', transposeBelow), false);
     if (layout === 'tiles')
         return (_jsx(DenominationTiles, { className: appearanceClass || undefined, columns: columns, label: label, rowRole: rowRole, rows: rows, subtotal: subtotal, zeroLabel: zeroLabel }));
-    return (_jsx(DenominationStrip, { className: appearanceClass || undefined, columns: columns, framed: frame === 'table', label: label, labelWidth: labelWidth, rows: rows, totalLabel: totalLabel, zeroLabel: zeroLabel }));
+    if (transposeBelow !== undefined && transposed)
+        return (_jsx(TransposedStrip, { className: appearanceClass || undefined, columns: columns, label: label, rows: rows, style: countStyle, totalLabel: totalLabel, zeroLabel: zeroLabel }));
+    return (_jsx(DenominationStrip, { className: appearanceClass || undefined, countStyle: countStyle, columns: columns, framed: frame === 'table', label: label, labelWidth: labelWidth, rows: rows, totalLabel: totalLabel, zeroLabel: zeroLabel }));
 }

package/dist/components/Dialog.d.ts

@@ -1,17 +1,11 @@
 import { type DialogHTMLAttributes, type ReactNode } from 'react';
 import { type Breakpoint } from '../css/breakpoints.js';
 import { type DialogAppearance, dialogAppearances } from '../css/css-dialog-banded.js';
+import { type ThemeCanvas } from '../css/css-canvas-grouped.js';
 import { type ActionBarSummary } from './action-bar/ActionBarSummary.js';
+import { type DialogRole, type DialogSize, dialogSizes } from './dialog/validate.js';
 export { dialogAppearances, type DialogAppearance };
-export declare const dialogSizes: readonly ["md", "lg", "xl"];
-/**
- * `md` is the reading width (32rem) for a message or a short form; `lg`
- * (56rem) holds a row of six fields or a data grid without folding it;
- * `xl` (65rem) holds a grid of six count columns with its labels and total.
- */
-export type DialogSize = (typeof dialogSizes)[number];
-/** `alertdialog` for a dialog that interrupts to warn, such as an idle sign-out. */
-export type DialogRole = 'dialog' | 'alertdialog';
+export { dialogSizes, type DialogRole, type DialogSize };
 /**
  * The heading level of the dialog's title. It changes only the element (and
  * so the outline a screen reader reads), never the title's look.
@@ -44,11 +38,19 @@ export type DialogProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose
      * bottom edge at the full viewport width, its top corners rounded and its
      * bottom corners square, a strip of backdrop left in view above it, and
      * its bottom padding clearing `env(safe-area-inset-bottom)`. It slides up
-     * on open unless reduced motion is asked for. There is no drag grabber
-     * (and no drag): it closes as any dialog does. From the breakpoint up it
-     * is the centered dialog, at its `size`.
+     * on open unless reduced motion is asked for. There is no drag: it
+     * closes as any dialog does. From the breakpoint up it is the centered
+     * dialog, at its `size`.
      */
     sheetBelow?: Breakpoint;
+    /**
+     * Draws a grabber, a short rounded bar centered at the top edge, while
+     * the dialog is a bottom sheet (below `sheetBelow`, which it needs). It
+     * only marks the sheet as one: it is hidden from assistive technology
+     * and does not drag. It stays at the top while the content scrolls.
+     * From the breakpoint up it is not drawn.
+     */
+    sheetGrabber?: boolean;
     /**
      * The accessible name of a close button, such as "Close". When given, an
      * icon-only ghost button ends the title row and asks `onClose`, like
@@ -74,6 +76,13 @@ export type DialogProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose
      * polite live region: "Drawer +$1,000.00 vault −$1,000.00".
      */
     summary?: ActionBarSummary;
+    /**
+     * One short line in the footer, after the summary and before the
+     * actions, in the same polite live region: plain words (muted, caption
+     * size), or a `Badge` and a short line in one `span`. Nothing
+     * (`undefined`, `null`, `false`, or blank words) leaves it out.
+     */
+    status?: ReactNode;
     /** `alertdialog` for a warning that interrupts. Default `dialog`. */
     role?: DialogRole;
     /**
@@ -82,6 +91,13 @@ export type DialogProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose
      * quiet round fill; `glass` (the default) is one frosted panel.
      */
     appearance?: DialogAppearance;
+    /**
+     * The dialog's fill. `grouped` puts its content on the grouped canvas
+     * (the quieter grey `ThemeProvider canvas="grouped"` paints), solid with
+     * no blur, so `Card`s inside stand apart; a banded title row and the
+     * footer stay on the surface. `default` keeps the appearance's fill.
+     */
+    canvas?: ThemeCanvas;
     children: ReactNode;
 };
-export declare function Dialog({ 'aria-describedby': describedBy, appearance, children, className, closeLabel, description, footer, icon, role, summary, onCancel, onClose, onKeyDown, onPointerDown, onSubmit, open, sheetBelow, size, title, titleLevel, ...rest }: DialogProps): import("react").JSX.Element;
+export declare function Dialog({ 'aria-describedby': describedBy, appearance, canvas, children, className, closeLabel, description, footer, icon, role, summary, onCancel, onClose, onKeyDown, onPointerDown, onSubmit, open, sheetBelow, sheetGrabber, size, status, title, titleLevel, ...rest }: DialogProps): import("react").JSX.Element;

package/dist/components/Dialog.js

@@ -4,33 +4,35 @@ import { useId } from 'react';
 import { cx } from '../class-names.js';
 import { dialogSheetClass } from '../css/css-dialog.js';
 import { dialogAppearances, dialogBandedClass, } from '../css/css-dialog-banded.js';
+import { dialogCanvasClass } from '../css/css-dialog-canvas.js';
+import { dialogGrabberClass, dialogHasGrabberClass, } from '../css/css-dialog-grabber.js';
 import { spacingClassNames } from '../spacing-classes.js';
 import { useDialogCloseRequests } from './dialog-close-requests.js';
-import { assertActionBarSummary, } from './action-bar/ActionBarSummary.js';
 import { DialogFooter } from './dialog/DialogFooter.js';
 import { DialogTitle } from './dialog/DialogTitle.js';
+import { assertDialogProps, dialogSizes, } from './dialog/validate.js';
 import { Stack } from './Stack.js';
 export { dialogAppearances };
-export const dialogSizes = ['md', 'lg', 'xl'];
-const dialogRoles = ['dialog', 'alertdialog'];
-function assertDialogProps(size, role, description, summary, appearance) {
-    if (!dialogSizes.includes(size))
-        throw new RangeError(`Unknown Dialog size: ${String(size)}`);
-    if (!dialogAppearances.includes(appearance))
-        throw new RangeError(`Unknown Dialog appearance: ${String(appearance)}`);
-    if (role !== undefined && !dialogRoles.includes(role))
-        throw new RangeError(`Unknown Dialog role: ${String(role)}`);
-    if (description !== undefined &&
-        (typeof description !== 'string' || !description.trim()))
-        throw new RangeError('Dialog description must not be empty');
-    if (summary)
-        assertActionBarSummary(summary);
-}
-export function Dialog({ 'aria-describedby': describedBy, appearance = 'glass', children, className, closeLabel, description, footer, icon, role, summary, onCancel, onClose, onKeyDown, onPointerDown, onSubmit, open, sheetBelow, size = 'md', title, titleLevel = 3, ...rest }) {
-    assertDialogProps(size, role, description, summary, appearance);
+export { dialogSizes };
+export function Dialog({ 'aria-describedby': describedBy, appearance = 'glass', canvas = 'default', children, className, closeLabel, description, footer, icon, role, summary, onCancel, onClose, onKeyDown, onPointerDown, onSubmit, open, sheetBelow, sheetGrabber = false, size = 'md', status, title, titleLevel = 3, ...rest }) {
+    assertDialogProps({
+        appearance,
+        canvas,
+        description,
+        role,
+        sheetBelow,
+        sheetGrabber,
+        size,
+        summary,
+    });
     const titleId = useId();
     const descriptionId = useId();
-    const hasFooter = Boolean(footer) || Boolean(summary);
+    // Nothing, or blank words, leaves the line out, as in ActionBar.
+    const hasStatus = status !== undefined &&
+        status !== null &&
+        status !== false &&
+        !(typeof status === 'string' && !status.trim());
+    const hasFooter = Boolean(footer) || Boolean(summary) || hasStatus;
     const { nodeRef, handlers } = useDialogCloseRequests({
         open,
         onClose,
@@ -39,5 +41,5 @@ export function Dialog({ 'aria-describedby': describedBy, appearance = 'glass',
         onPointerDown,
         onSubmit,
     });
-    return (_jsx("dialog", { ...rest, ref: nodeRef, "aria-describedby": describedBy ?? (description ? descriptionId : undefined), "aria-labelledby": titleId, className: cx('sw-dialog', size !== 'md' && `sw-dialog-${size}`, sheetBelow && dialogSheetClass(sheetBelow), appearance === 'banded' && dialogBandedClass, ...spacingClassNames({ padding: 5 }), className), role: role === 'alertdialog' ? 'alertdialog' : undefined, ...handlers, children: _jsxs(Stack, { gap: 4, children: [_jsx(DialogTitle, { banded: appearance === 'banded', closeLabel: closeLabel, description: description, descriptionId: descriptionId, icon: icon, id: titleId, level: titleLevel === 2 ? 2 : 3, onClose: onClose, title: title }), children, hasFooter ? (_jsx(DialogFooter, { summary: summary, children: footer })) : null] }) }));
+    return (_jsxs("dialog", { ...rest, ref: nodeRef, "aria-describedby": describedBy ?? (description ? descriptionId : undefined), "aria-labelledby": titleId, className: cx('sw-dialog', size !== 'md' && `sw-dialog-${size}`, sheetBelow && dialogSheetClass(sheetBelow), appearance === 'banded' && dialogBandedClass, canvas === 'grouped' && dialogCanvasClass, sheetGrabber && dialogHasGrabberClass, ...spacingClassNames({ padding: 5 }), className), role: role === 'alertdialog' ? 'alertdialog' : undefined, ...handlers, children: [sheetGrabber ? (_jsx("span", { "aria-hidden": "true", className: dialogGrabberClass })) : null, _jsxs(Stack, { gap: 4, children: [_jsx(DialogTitle, { banded: appearance === 'banded', closeLabel: closeLabel, description: description, descriptionId: descriptionId, icon: icon, id: titleId, level: titleLevel === 2 ? 2 : 3, onClose: onClose, title: title }), children, hasFooter ? (_jsx(DialogFooter, { status: hasStatus ? status : undefined, summary: summary, children: footer })) : null] })] }));
 }

package/dist/components/Field.d.ts

@@ -1,9 +1,10 @@
 import { type SpacingStep } from '@scalewing/tokens';
 import { type ReactNode } from 'react';
 import { type RequiredMark } from './FieldLabelText.js';
+import { type FieldWidth } from '../css/css-field-width.js';
+import { fieldVariants, type FieldVariant } from './field/field-checks.js';
 export type FieldSize = 'xs' | 'md';
-export declare const fieldVariants: readonly ["outlined", "search"];
-export type FieldVariant = (typeof fieldVariants)[number];
+export { fieldVariants, type FieldVariant };
 export type FieldProps = {
     children: ReactNode;
     gap?: SpacingStep;
@@ -60,5 +61,15 @@ export type FieldProps = {
     clearLabel?: string;
     /** Called by a search field's clear button; the consumer empties the value. */
     onClear?: () => void;
+    /**
+     * Caps the control's width at a Table column size (`xs` 4rem, `sm` 6rem,
+     * `md` 8rem, `lg` 12rem, `xl` 16rem), at the start of the column and
+     * never wider than it, so a short value such as a rate or a count does
+     * not stretch across a form. The label and messages keep the column's
+     * width. Left out, the control fills the column. It needs one native
+     * text input, select or textarea child (a `TypeError` otherwise); an
+     * unknown width throws a `RangeError`.
+     */
+    width?: FieldWidth;
 };
 export declare function Field(props: FieldProps): import("react").JSX.Element;