@scalewing/react 1.40.0 → 1.41.0

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/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;

package/dist/components/Field.js

@@ -4,45 +4,14 @@ import { cloneElement, isValidElement, useId, } from 'react';
 import { adornedControlAria, FieldAdornment, } from './FieldAdornment.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { assertRequiredMark, FieldLabelText, } from './FieldLabelText.js';
+import { fieldWidthClass } from '../css/css-field-width.js';
 import { SearchFrame } from './field/SearchFrame.js';
+import { assertFieldProps, fieldVariants, passesInvalid, } from './field/field-checks.js';
 import { Stack } from './Stack.js';
-export const fieldVariants = ['outlined', 'search'];
-function assertSearch(props, child) {
-    const { variant = 'outlined' } = props;
-    if (!fieldVariants.includes(variant))
-        throw new RangeError(`Unknown Field variant: ${String(variant)}`);
-    if (variant !== 'search') {
-        if (props.leading !== undefined ||
-            props.clearLabel !== undefined ||
-            props.onClear !== undefined)
-            throw new TypeError('Field leading, clearLabel and onClear are for variant="search"');
-        return;
-    }
-    if (!props.clearLabel?.trim())
-        throw new RangeError('A search Field needs a nonempty clearLabel');
-    if (typeof props.onClear !== 'function')
-        throw new TypeError('A search Field needs onClear');
-    if (props.prefix || props.suffix)
-        throw new TypeError('A search Field takes leading, not prefix or suffix');
-    if (!isValidElement(child) || child.type !== 'input')
-        throw new TypeError('A search Field needs one native input child');
-    if (child.props.value === undefined)
-        throw new TypeError('A search Field needs a controlled input: pass value (and onChange)');
-}
-/**
- * `invalid` was passed, even as `false`, but not as `undefined` (a wrapper
- * forwarding an optional prop passes nothing): such a field needs one native
- * control from its first render, so a form learns it on the happy path
- * instead of on its first failed submit. `error` keeps its older rule (it
- * requires the control only while it holds a message), so a composed
- * child beside `error={undefined}` still renders.
- */
-function passesInvalid(props) {
-    return props.invalid !== undefined || props.changed !== undefined;
-}
+export { fieldVariants };
 export function Field(props) {
-    const { children, gap = 1, label, labelVisuallyHidden = false, size = 'md', description, error, invalid = false, changed = false, required = false, requiredMark = 'visible', prefix, suffix, variant = 'outlined', leading, clearLabel = '', onClear, } = props;
-    assertSearch(props, children);
+    const { children, gap = 1, label, labelVisuallyHidden = false, size = 'md', description, error, invalid = false, changed = false, required = false, requiredMark = 'visible', prefix, suffix, variant = 'outlined', leading, clearLabel = '', onClear, width, } = props;
+    assertFieldProps(props, children);
     const search = variant === 'search';
     const controlId = useId();
     const descriptionId = useId();
@@ -54,13 +23,20 @@ export function Field(props) {
     const message = error || description;
     const marksInvalid = Boolean(error) || invalid;
     const adorned = Boolean(prefix || suffix);
-    const needsControl = Boolean(message || marksInvalid || passesInvalid(props) || required || adorned);
+    const needsControl = Boolean(message ||
+        marksInvalid ||
+        passesInvalid(props) ||
+        required ||
+        adorned ||
+        Boolean(width));
     const className = [
         'sw-field',
         size === 'xs' && 'sw-field-xs',
         marksInvalid && 'sw-field-invalid',
         search && 'sw-field-search-field',
         changed && !marksInvalid && 'sw-field-changed',
+        width && 'sw-field-sized',
+        width && fieldWidthClass(width),
     ]
         .filter(Boolean)
         .join(' ');
@@ -71,7 +47,7 @@ export function Field(props) {
         typeof children.type !== 'string' ||
         !['input', 'select', 'textarea'].includes(children.type)) {
         if (needsControl)
-            throw new TypeError('Field validation and adornments require one native input, select, or textarea child');
+            throw new TypeError('Field validation, adornments and width require one native input, select, or textarea child');
         return (_jsxs(Stack, { as: "label", className: className, gap: labelHidden ? 0 : gap, children: [labelText, children] }));
     }
     if (adorned && children.type !== 'input')

package/dist/components/FilterChips.d.ts

@@ -1,37 +1,7 @@
-import { type RequiredMark } from './FieldLabelText.js';
-export type FilterChipOption = {
-    value: string;
-    label: string;
-    count?: number;
-    disabled?: boolean;
-};
-export type FilterChipsProps = {
-    label: string;
-    /** The chosen option's value, or `''` while nothing is chosen yet. */
-    value: string;
-    onChange: (value: string) => void;
-    options: readonly FilterChipOption[];
-    /**
-     * A choice must be made, such as a reason: each radio is `required` and
-     * the label shows the required mark (hidden from assistive technology,
-     * which reads the radios' own state).
-     */
-    required?: boolean;
-    /**
-     * `hidden` leaves out the label's " *" while the control stays required
-     * (and announced so); `visible` (default) draws it.
-     * When hidden, say in visible text which fields must be filled; a
-     * placeholder alone is not enough.
-     */
-    requiredMark?: RequiredMark;
-    /**
-     * A message under the chips, such as "Pick a reason": a polite live
-     * region linked to the group by `aria-describedby`; the group is marked
-     * invalid and every chip takes the danger edge. An empty string is no
-     * error.
-     */
-    error?: string;
-    /** More ids that describe the group, such as a hint beside it. */
-    'aria-describedby'?: string;
-};
-export declare function FilterChips({ label, value, onChange, options, required, requiredMark, error, 'aria-describedby': describedByProp, }: FilterChipsProps): import("react").JSX.Element;
+import { type FilterChipsProps } from './filter-chips/options.js';
+export { filterChipCountAppearances, filterChipsOverflows, type FilterChipCountAppearance, type FilterChipOption, type FilterChipsOverflow, type FilterChipsProps, } from './filter-chips/options.js';
+/**
+ * A labelled row of chips: one choice (radios), or several at once
+ * (`multiple`, checkboxes), each chip optionally counted.
+ */
+export declare function FilterChips(props: FilterChipsProps): import("react").JSX.Element;

package/dist/components/FilterChips.js

@@ -1,35 +1,43 @@
 'use client';
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useId } from 'react';
 import { cx } from '../class-names.js';
+import { radioTabStopValue } from '../tab-stop.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
-import { assertRequiredMark, showsRequiredMark, } from './FieldLabelText.js';
-import { radioTabStopValue, tabStop } from '../tab-stop.js';
-function isCount(count) {
-    return count === undefined || (Number.isInteger(count) && count >= 0);
+import { showsRequiredMark } from './FieldLabelText.js';
+import { FilterChip } from './filter-chips/FilterChip.js';
+import { assertFilterChips } from './filter-chips/validate.js';
+export { filterChipCountAppearances, filterChipsOverflows, } from './filter-chips/options.js';
+/** The values a change leaves on, in the options' order. */
+function toggled(options, chosen, value, checked) {
+    return options
+        .map((option) => option.value)
+        .filter((each) => (each === value ? checked : chosen.includes(each)));
 }
-export function FilterChips({ label, value, onChange, options, required = false, requiredMark = 'visible', error, 'aria-describedby': describedByProp, }) {
+/**
+ * A labelled row of chips: one choice (radios), or several at once
+ * (`multiple`, checkboxes), each chip optionally counted.
+ */
+export function FilterChips(props) {
+    const { label, options, labelVisuallyHidden = false, requiredMark = 'visible', countAppearance = 'figure', overflow = 'wrap', error, 'aria-describedby': describedByProp, } = props;
     const name = useId();
     const errorId = useId();
+    assertFilterChips(props);
+    const required = props.multiple ? false : (props.required ?? false);
     const describedBy = [describedByProp?.trim() || null, error ? errorId : null]
         .filter((id) => id !== null)
         .join(' ');
-    const values = options.map((option) => option.value);
-    if (!label.trim())
-        throw new RangeError('label must not be empty');
-    assertRequiredMark(requiredMark);
-    if (options.length === 0 ||
-        options.some((option) => !option.value.trim() || !option.label.trim()))
-        throw new RangeError('options must have nonempty values and labels');
-    if (new Set(values).size !== values.length)
-        throw new RangeError('options must have unique values');
-    if (value !== '' && !values.includes(value))
-        throw new RangeError('value must match an option or be empty');
-    if (options.some((option) => !isCount(option.count)))
-        throw new RangeError('count must be a non-negative integer');
-    const entry = radioTabStopValue(options, value);
-    return (_jsxs("fieldset", { "aria-describedby": describedBy || undefined, "aria-invalid": error ? true : undefined, className: "sw-filter-chips", children: [_jsxs("legend", { className: "sw-filter-chips-legend", children: [label, showsRequiredMark(required, requiredMark) ? (_jsxs("span", { "aria-hidden": "true", className: "sw-field-required", children: [' ', "*"] })) : null] }), _jsx("span", { className: "sw-filter-chips-options", children: options.map((option) => (_jsxs("label", { className: cx('sw-filter-chip', option.count === 0 && 'sw-filter-chip-quiet'), children: [_jsx("input", { checked: option.value === value, className: "sw-filter-chip-input", disabled: option.disabled, name: name, onChange: (event) => {
-                                if (event.currentTarget.checked && !option.disabled)
-                                    onChange(option.value);
-                            }, required: required, tabIndex: option.value === entry ? tabStop : undefined, type: "radio", value: option.value }), _jsxs("span", { className: "sw-filter-chip-face", children: [option.label, option.count === undefined ? null : (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-filter-chip-count", children: option.count })] }))] })] }, option.value))) }), _jsx(FieldErrorRegion, { className: "sw-filter-chips-error", id: errorId, message: error })] }));
+    const entry = props.multiple
+        ? undefined
+        : radioTabStopValue(options, props.value);
+    function isChecked(value) {
+        return props.multiple ? props.value.includes(value) : props.value === value;
+    }
+    function change(value, checked) {
+        if (props.multiple)
+            props.onChange(toggled(options, props.value, value, checked));
+        else if (checked)
+            props.onChange(value);
+    }
+    return (_jsxs("fieldset", { "aria-describedby": describedBy || undefined, "aria-invalid": error ? true : undefined, className: cx('sw-filter-chips', overflow === 'scroll' && 'sw-filter-chips-scroll'), children: [_jsxs("legend", { className: cx('sw-filter-chips-legend', labelVisuallyHidden && 'sw-sr-only'), children: [label, showsRequiredMark(required, requiredMark) ? (_jsxs("span", { "aria-hidden": "true", className: "sw-field-required", children: [' ', "*"] })) : null] }), _jsx("span", { className: "sw-filter-chips-options", children: options.map((option) => (_jsx(FilterChip, { checked: isChecked(option.value), countAppearance: countAppearance, name: name, onCheckedChange: (checked) => change(option.value, checked), option: option, required: required, tabStopHere: props.multiple ? true : option.value === entry, type: props.multiple ? 'checkbox' : 'radio' }, option.value))) }), _jsx(FieldErrorRegion, { className: "sw-filter-chips-error", id: errorId, message: error })] }));
 }

package/dist/components/ListRow.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type BadgeTone } from '../css/css-data.js';
 import { type ListRowTitleAppearance, type ListRowTone, type ListRowValueTone } from '../list-options.js';
 export type ListRowProps = {
     title: string;
@@ -8,8 +9,16 @@ export type ListRowProps = {
     value?: string;
     /** A muted line under the value, such as "checks $3,427". */
     valueDetail?: string;
-    /** Colours the value only, as a table cell's tone; the words say why. */
+    /**
+     * Colours the value only, as a table cell's tone, or `warning` for a
+     * figure that needs a look; the words say why.
+     */
     valueTone?: ListRowValueTone;
+    /**
+     * Draws the value as a `Badge` in this tone, such as a status ("Open",
+     * "Blocked") at the row's end. Not with `valueTone`.
+     */
+    valueBadge?: BadgeTone;
     /**
      * A consumer mark at the row's start, such as a status dot or a Lucide
      * glyph (ADR 0008). It is hidden from assistive technology, so the words
@@ -48,4 +57,4 @@ export type ListRowProps = {
  * a chevron, the whole row pressing), picks one option in place
  * (`selected`), or only states something (neither).
  */
-export declare function ListRow({ title, detail, value, valueDetail, valueTone, leading, onPress, href, selected, disabled, tone, titleAppearance, accessory, 'aria-label': ariaLabel, }: ListRowProps): import("react").JSX.Element;
+export declare function ListRow({ title, detail, value, valueDetail, valueTone, valueBadge, leading, onPress, href, selected, disabled, tone, titleAppearance, accessory, 'aria-label': ariaLabel, }: ListRowProps): import("react").JSX.Element;

package/dist/components/ListRow.js

@@ -16,7 +16,7 @@ function ids(...parts) {
  * a chevron, the whole row pressing), picks one option in place
  * (`selected`), or only states something (neither).
  */
-export function ListRow({ title, detail, value, valueDetail, valueTone, leading, onPress, href, selected, disabled = false, tone = 'default', titleAppearance = 'strong', accessory = 'chevron', 'aria-label': ariaLabel, }) {
+export function ListRow({ title, detail, value, valueDetail, valueTone, valueBadge, leading, onPress, href, selected, disabled = false, tone = 'default', titleAppearance = 'strong', accessory = 'chevron', 'aria-label': ariaLabel, }) {
     const pressable = onPress !== undefined || href !== undefined;
     assertListRow({
         title,
@@ -26,13 +26,14 @@ export function ListRow({ title, detail, value, valueDetail, valueTone, leading,
         accessory,
         value,
         valueDetail,
+        valueBadge,
         selected,
         pressable,
     });
     const container = useContext(ListRowContainer);
     const id = useId();
     const kind = listRowAccessory({ pressable, selected, accessory });
-    const content = (_jsx(ListRowContent, { accessory: kind, detail: detail, id: id, leading: leading, title: title, titleAppearance: titleAppearance, tone: tone, value: value, valueDetail: valueDetail, valueTone: valueTone }));
+    const content = (_jsx(ListRowContent, { accessory: kind, detail: detail, id: id, leading: leading, title: title, titleAppearance: titleAppearance, tone: tone, value: value, valueBadge: valueBadge, valueDetail: valueDetail, valueTone: valueTone }));
     const className = cx('sw-list-row', pressable && 'sw-list-row-pressable', disabled && 'sw-list-row-disabled');
     const naming = {
         'aria-label': ariaLabel,

package/dist/components/SegmentedControl.d.ts

@@ -1,5 +1,8 @@
 import { type ReactNode } from 'react';
 import { type AccessibleName } from '../accessible-name.js';
+import { type Breakpoint } from '../css/breakpoints.js';
+import { type SegmentedSize, segmentedSizes } from '../css/css-segmented-sizing.js';
+export { segmentedSizes, type SegmentedSize };
 export type SegmentedItem = {
     id: string;
     label: ReactNode;
@@ -46,6 +49,19 @@ export type SegmentedControlProps = AccessibleName & SegmentedChange & {
     error?: string;
     /** Sets `aria-required` on the group; the visible mark belongs to the element that labels it. */
     required?: boolean;
+    /**
+     * Below this breakpoint the control fills its column and its segments
+     * share the width equally, whatever the variant, such as a period
+     * switch across a phone. From it up it keeps its own width.
+     */
+    fullWidthBelow?: Breakpoint;
+    /**
+     * `sm` pads every segment a step less and keeps each label on one line
+     * (ending in an ellipsis past its share; its name keeps the whole
+     * label), so three or four segments with counts fit a phone's card.
+     * Keep the labels short enough to fit: the hidden part cannot be read.
+     * `md` (the default) is the variant's own padding.
+     */
+    size?: SegmentedSize;
 };
 export declare const SegmentedControl: import("react").ForwardRefExoticComponent<SegmentedControlProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};