@scalewing/react 1.31.0 → 1.32.0

package/dist/components/Dialog.js

@@ -3,17 +3,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { 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 { Stack } from './Stack.js';
+export { dialogAppearances };
 export const dialogSizes = ['md', 'lg', 'xl'];
 const dialogRoles = ['dialog', 'alertdialog'];
-function assertDialogProps(size, role, description, summary) {
+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 &&
@@ -22,8 +26,8 @@ function assertDialogProps(size, role, description, summary) {
     if (summary)
         assertActionBarSummary(summary);
 }
-export function Dialog({ 'aria-describedby': describedBy, 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);
+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);
     const titleId = useId();
     const descriptionId = useId();
     const hasFooter = Boolean(footer) || Boolean(summary);
@@ -35,5 +39,5 @@ export function Dialog({ 'aria-describedby': describedBy, children, className, c
         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), ...spacingClassNames({ padding: 5 }), className), role: role === 'alertdialog' ? 'alertdialog' : undefined, ...handlers, children: _jsxs(Stack, { gap: 4, children: [_jsx(DialogTitle, { 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 (_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] }) }));
 }

package/dist/components/Field.d.ts

@@ -1,5 +1,6 @@
 import { type SpacingStep } from '@scalewing/tokens';
 import { type ReactNode } from 'react';
+import { type RequiredMark } from './FieldLabelText.js';
 export type FieldSize = 'xs' | 'md';
 export declare const fieldVariants: readonly ["outlined", "search"];
 export type FieldVariant = (typeof fieldVariants)[number];
@@ -33,6 +34,13 @@ export type FieldProps = {
      */
     changed?: boolean;
     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;
     /** Short text inside the control frame before the value, such as a currency sign. Not part of the value. */
     prefix?: string;
     /** Short text inside the control frame after the value, such as a unit. Not part of the value. */

package/dist/components/Field.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, isValidElement, useId, } from 'react';
 import { adornedControlAria, FieldAdornment, } from './FieldAdornment.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
-import { FieldLabelText } from './FieldLabelText.js';
+import { assertRequiredMark, FieldLabelText, } from './FieldLabelText.js';
 import { SearchFrame } from './field/SearchFrame.js';
 import { Stack } from './Stack.js';
 export const fieldVariants = ['outlined', 'search'];
@@ -41,7 +41,7 @@ function passesInvalid(props) {
     return props.invalid !== undefined || props.changed !== undefined;
 }
 export function Field(props) {
-    const { children, gap = 1, label, labelVisuallyHidden = false, size = 'md', description, error, invalid = false, changed = false, required = false, prefix, suffix, variant = 'outlined', leading, clearLabel = '', onClear, } = 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 search = variant === 'search';
     const controlId = useId();
@@ -50,6 +50,7 @@ export function Field(props) {
     const labelId = useId();
     const prefixId = useId();
     const suffixId = useId();
+    assertRequiredMark(requiredMark);
     const message = error || description;
     const marksInvalid = Boolean(error) || invalid;
     const adorned = Boolean(prefix || suffix);
@@ -65,7 +66,7 @@ export function Field(props) {
         .join(' ');
     // A search field hides its whole label element instead (see below).
     const labelHidden = labelVisuallyHidden && !search;
-    const labelText = (_jsx(FieldLabelText, { label: label, required: required, size: size, visuallyHidden: labelHidden }));
+    const labelText = (_jsx(FieldLabelText, { label: label, required: required, requiredMark: requiredMark, size: size, visuallyHidden: labelHidden }));
     if (!isValidElement(children) ||
         typeof children.type !== 'string' ||
         !['input', 'select', 'textarea'].includes(children.type)) {

package/dist/components/FieldLabelText.d.ts

@@ -1,13 +1,31 @@
+export declare const requiredMarks: readonly ["visible", "hidden"];
+/**
+ * Whether a required control's label shows the required mark: `visible`
+ * (the default) draws " *" after the label; `hidden` leaves it out, for a
+ * form that marks nothing as required (or marks what is optional instead).
+ * The control stays required either way, so assistive technology still
+ * hears it. When hidden, say in visible text which fields must be filled
+ * (a form-level note, or "Required" in the description); a placeholder
+ * alone is not enough (WCAG 3.3.2).
+ */
+export type RequiredMark = (typeof requiredMarks)[number];
+/** Fails closed on a value that is not a known required mark. */
+export declare function assertRequiredMark(value: unknown): void;
+/** Whether the mark is drawn: a required control whose mark is visible. */
+export declare function showsRequiredMark(required: boolean, requiredMark: RequiredMark): boolean;
 /**
  * A form control's label words and its required mark, as `Field` draws
  * them. The `<label>` around it inherits the canvas's body type, so its
  * line box, and the gap to the control below, is the same for every field
- * that uses it (`Field`, `DateField` and `Select`). The mark is `aria-hidden`: the
- * control's own required state is what assistive technology reads.
+ * that uses it (`Field`, `DateField` and `Select`; `Combobox` through
+ * `Field`, and `FilterChips` shares `showsRequiredMark` for its legend). The mark is `aria-hidden`: the
+ * control's own required state is what assistive technology reads, and
+ * `requiredMark="hidden"` leaves it out.
  */
-export declare function FieldLabelText({ label, required, size, visuallyHidden, }: {
+export declare function FieldLabelText({ label, required, requiredMark, size, visuallyHidden, }: {
     label: string;
     required?: boolean;
+    requiredMark?: RequiredMark;
     size?: 'xs' | 'md';
     visuallyHidden?: boolean;
 }): import("react").JSX.Element;

package/dist/components/FieldLabelText.js

@@ -1,12 +1,24 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from './Text.js';
+export const requiredMarks = ['visible', 'hidden'];
+/** Fails closed on a value that is not a known required mark. */
+export function assertRequiredMark(value) {
+    if (!requiredMarks.includes(value))
+        throw new RangeError(`Unknown requiredMark: ${String(value)}`);
+}
+/** Whether the mark is drawn: a required control whose mark is visible. */
+export function showsRequiredMark(required, requiredMark) {
+    return required && requiredMark === 'visible';
+}
 /**
  * A form control's label words and its required mark, as `Field` draws
  * them. The `<label>` around it inherits the canvas's body type, so its
  * line box, and the gap to the control below, is the same for every field
- * that uses it (`Field`, `DateField` and `Select`). The mark is `aria-hidden`: the
- * control's own required state is what assistive technology reads.
+ * that uses it (`Field`, `DateField` and `Select`; `Combobox` through
+ * `Field`, and `FilterChips` shares `showsRequiredMark` for its legend). The mark is `aria-hidden`: the
+ * control's own required state is what assistive technology reads, and
+ * `requiredMark="hidden"` leaves it out.
  */
-export function FieldLabelText({ label, required = false, size = 'md', visuallyHidden = false, }) {
-    return (_jsxs(Text, { as: "span", className: visuallyHidden ? 'sw-sr-only' : undefined, variant: size === 'xs' ? 'caption' : 'label', children: [label, required ? (_jsxs("span", { "aria-hidden": "true", className: "sw-field-required", children: [' ', "*"] })) : null] }));
+export function FieldLabelText({ label, required = false, requiredMark = 'visible', size = 'md', visuallyHidden = false, }) {
+    return (_jsxs(Text, { as: "span", className: visuallyHidden ? 'sw-sr-only' : undefined, variant: size === 'xs' ? 'caption' : 'label', children: [label, showsRequiredMark(required, requiredMark) ? (_jsxs("span", { "aria-hidden": "true", className: "sw-field-required", children: [' ', "*"] })) : null] }));
 }

package/dist/components/FilterChips.d.ts

@@ -1,3 +1,4 @@
+import { type RequiredMark } from './FieldLabelText.js';
 export type FilterChipOption = {
     value: string;
     label: string;
@@ -16,6 +17,13 @@ export type FilterChipsProps = {
      * 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
@@ -26,4 +34,4 @@ export type FilterChipsProps = {
     /** More ids that describe the group, such as a hint beside it. */
     'aria-describedby'?: string;
 };
-export declare function FilterChips({ label, value, onChange, options, required, error, 'aria-describedby': describedByProp, }: FilterChipsProps): import("react").JSX.Element;
+export declare function FilterChips({ label, value, onChange, options, required, requiredMark, error, 'aria-describedby': describedByProp, }: FilterChipsProps): import("react").JSX.Element;

package/dist/components/FilterChips.js

@@ -3,10 +3,11 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 import { useId } from 'react';
 import { cx } from '../class-names.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
+import { assertRequiredMark, showsRequiredMark, } from './FieldLabelText.js';
 function isCount(count) {
     return count === undefined || (Number.isInteger(count) && count >= 0);
 }
-export function FilterChips({ label, value, onChange, options, required = false, error, 'aria-describedby': describedByProp, }) {
+export function FilterChips({ label, value, onChange, options, required = false, requiredMark = 'visible', error, 'aria-describedby': describedByProp, }) {
     const name = useId();
     const errorId = useId();
     const describedBy = [describedByProp?.trim() || null, error ? errorId : null]
@@ -15,6 +16,7 @@ export function FilterChips({ label, value, onChange, options, required = false,
     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');
@@ -24,7 +26,7 @@ export function FilterChips({ label, value, onChange, options, required = false,
         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');
-    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, required ? (_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) => {
+    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, 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 })] }));

package/dist/components/Nav.d.ts

@@ -1,3 +1,15 @@
+import { type NavAppearance, navAppearances } from '../css/css-nav-words.js';
 import { type BoxProps } from './Box.js';
-export type NavProps = Omit<BoxProps, 'as'>;
-export declare function Nav({ className, ...rest }: NavProps): import("react").JSX.Element;
+export { navAppearances, type NavAppearance };
+export type NavProps = Omit<BoxProps, 'as'> & {
+    /**
+     * `words` draws every destination (a link or a Button) as plain words:
+     * the current one (`aria-current`) in the text color at label weight,
+     * the others muted, with no fill or underline. The words must be visible:
+     * a glyph-only destination has no weight to change, so its current mark
+     * would be color alone (keep `default` there). `default` keeps each
+     * destination's own look.
+     */
+    appearance?: NavAppearance;
+};
+export declare function Nav({ appearance, className, ...rest }: NavProps): import("react").JSX.Element;

package/dist/components/Nav.js

@@ -1,7 +1,11 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../class-names.js';
+import { navAppearances, navWordsClass, } from '../css/css-nav-words.js';
 import { Box } from './Box.js';
-export function Nav({ className, ...rest }) {
-    return _jsx(Box, { as: "nav", className: cx('sw-nav', className), ...rest });
+export { navAppearances };
+export function Nav({ appearance = 'default', className, ...rest }) {
+    if (!navAppearances.includes(appearance))
+        throw new RangeError(`Unknown Nav appearance: ${String(appearance)}`);
+    return (_jsx(Box, { as: "nav", className: cx('sw-nav', appearance === 'words' && navWordsClass, className), ...rest }));
 }

package/dist/components/SegmentedControl.d.ts

@@ -22,9 +22,12 @@ type SegmentedLabel = {
  * `compact` is the quiet chip track for a section switch; `filled` gives every
  * segment the same width and paints the selected one in the accent, for a
  * choice that decides what a form does. It sizes to its container: the full
- * width in a Stack, the width of its widest label in an Inline.
+ * width in a Stack, the width of its widest label in an Inline. `raised` is
+ * a grey track whose selected segment is the surface raised by a small
+ * shadow, every segment at the md control height with its words in the
+ * text color, sized to its segments even in a Stack (unlike `compact`).
  */
-export type SegmentedControlVariant = 'compact' | 'filled';
+export type SegmentedControlVariant = 'compact' | 'filled' | 'raised';
 /**
  * A disabled control can never report a change, so it needs no `onChange`;
  * a live one must have it.

package/dist/components/SegmentedControl.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from 'react';
 import { cx } from '../class-names.js';
+import { segmentedRaisedClass } from '../css/css-segmented-raised.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 export const SegmentedControl = forwardRef(function SegmentedControl({ disabled = false, error, items, onChange, required = false, value, variant = 'compact', ...labelProps }, ref) {
     const errorId = useId();
@@ -23,7 +24,7 @@ export const SegmentedControl = forwardRef(function SegmentedControl({ disabled
     }
     // The wrapper is always rendered, so an error that appears later swaps
     // text into a live region that already exists and the group keeps focus.
-    return (_jsxs("div", { className: cx('sw-segmented-field', variant === 'filled' && 'sw-segmented-field-filled'), children: [_jsx("div", { ref: ref, "aria-describedby": error ? errorId : undefined, "aria-disabled": disabled || undefined, "aria-invalid": error ? true : undefined, "aria-required": required || undefined, className: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled', withIcons && 'sw-segmented-with-icons', disabled && 'sw-segmented-disabled'), onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
+    return (_jsxs("div", { className: cx('sw-segmented-field', variant === 'filled' && 'sw-segmented-field-filled'), children: [_jsx("div", { ref: ref, "aria-describedby": error ? errorId : undefined, "aria-disabled": disabled || undefined, "aria-invalid": error ? true : undefined, "aria-required": required || undefined, className: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled', variant === 'raised' && segmentedRaisedClass, withIcons && 'sw-segmented-with-icons', disabled && 'sw-segmented-disabled'), onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
                     const selected = item.id === value;
                     return (_jsxs("button", { "aria-checked": selected, className: cx('sw-segmented-item', selected && 'sw-segmented-item-selected'), disabled: disabled, onClick: () => {
                             if (!selected) {

package/dist/components/Select.d.ts

@@ -1,5 +1,6 @@
 import { type SelectOption } from '../select-list.js';
 import { type FieldSize } from './Field.js';
+import { type RequiredMark } from './FieldLabelText.js';
 export type { SelectOption };
 /**
  * `content` (the default) sizes the field to its longest option, as a native
@@ -26,6 +27,13 @@ export type SelectProps = {
     placeholder?: string;
     /** Marks the label as Field does and sets `aria-required`. */
     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 validation message under the control, wired as Field's error is. */
     error?: string;
     /**
@@ -35,4 +43,4 @@ export type SelectProps = {
      */
     width?: SelectWidth;
 };
-export declare function Select({ action, label, labelVisuallyHidden, onChange, options, size, value, placeholder, required, error, width, }: SelectProps): import("react").JSX.Element;
+export declare function Select({ action, label, labelVisuallyHidden, onChange, options, size, value, placeholder, required, requiredMark, error, width, }: SelectProps): import("react").JSX.Element;

package/dist/components/Select.js

@@ -4,12 +4,13 @@ import { useId, useRef } from 'react';
 import { cx } from '../class-names.js';
 import { selectedSelectIndex } from '../select-list.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
-import { FieldLabelText } from './FieldLabelText.js';
+import { assertRequiredMark, FieldLabelText, } from './FieldLabelText.js';
 import { SelectListbox } from './select/SelectListbox.js';
 import { SelectValue } from './select/SelectValue.js';
 import { useSelectList } from './select/use-select-list.js';
 import { Stack } from './Stack.js';
-export function Select({ action, label, labelVisuallyHidden = false, onChange, options, size = 'md', value, placeholder, required = false, error, width = 'content', }) {
+export function Select({ action, label, labelVisuallyHidden = false, onChange, options, size = 'md', value, placeholder, required = false, requiredMark = 'visible', error, width = 'content', }) {
+    assertRequiredMark(requiredMark);
     if (placeholder !== undefined && !placeholder.trim())
         throw new RangeError('placeholder must not be empty');
     const labelId = useId();
@@ -22,7 +23,7 @@ export function Select({ action, label, labelVisuallyHidden = false, onChange, o
     const showsPlaceholder = placeholder !== undefined &&
         !options.some((option) => option.value === value);
     const { commit, highlight, onTriggerKeyDown, open, openList, setHighlight, setOpen, } = useSelectList({ action, onChange, options, rootRef, value });
-    return (_jsx("div", { ref: rootRef, className: cx('sw-select', size === 'xs' && 'sw-select-xs', width === 'full' && 'sw-select-full', error && 'sw-select-invalid'), children: _jsxs(Stack, { gap: labelVisuallyHidden ? 0 : 1, children: [_jsx("label", { htmlFor: triggerId, id: labelId, children: _jsx(FieldLabelText, { label: label, required: required, size: size, visuallyHidden: labelVisuallyHidden }) }), _jsxs("div", { className: "sw-select-control", children: [_jsx("button", { "aria-activedescendant": open ? `${optionIdPrefix}-${highlight}` : undefined, "aria-controls": open ? listId : undefined, "aria-describedby": error ? errorId : undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-invalid": error ? true : undefined, "aria-labelledby": labelId, "aria-required": required || undefined, className: "sw-select-trigger", id: triggerId, onBlur: (event) => {
+    return (_jsx("div", { ref: rootRef, className: cx('sw-select', size === 'xs' && 'sw-select-xs', width === 'full' && 'sw-select-full', error && 'sw-select-invalid'), children: _jsxs(Stack, { gap: labelVisuallyHidden ? 0 : 1, children: [_jsx("label", { htmlFor: triggerId, id: labelId, children: _jsx(FieldLabelText, { label: label, required: required, requiredMark: requiredMark, size: size, visuallyHidden: labelVisuallyHidden }) }), _jsxs("div", { className: "sw-select-control", children: [_jsx("button", { "aria-activedescendant": open ? `${optionIdPrefix}-${highlight}` : undefined, "aria-controls": open ? listId : undefined, "aria-describedby": error ? errorId : undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-invalid": error ? true : undefined, "aria-labelledby": labelId, "aria-required": required || undefined, className: "sw-select-trigger", id: triggerId, onBlur: (event) => {
                                 const next = event.relatedTarget;
                                 if (next instanceof Node && rootRef.current?.contains(next)) {
                                     return;

package/dist/components/Stepper.d.ts

@@ -1,5 +1,12 @@
 /** `fixed` sizes the count for a few digits; `full` fills its container, such as a table cell. */
 export type StepperWidth = 'fixed' | 'full';
+export declare const stepperLimitAppearances: readonly ["faded", "plain"];
+/**
+ * How − looks at `min` and + at `max`, where a press cannot move the count:
+ * `faded` (the default) fades the button as any disabled control; `plain`
+ * keeps its usual look. Either way the button is disabled.
+ */
+export type StepperLimitAppearance = (typeof stepperLimitAppearances)[number];
 export type StepperProps = {
     /** Names the count. Keep it visible unless headers around it say it (`labelVisuallyHidden`). */
     label: string;
@@ -35,6 +42,12 @@ export type StepperProps = {
     placeholder?: string;
     name?: string;
     width?: StepperWidth;
+    /**
+     * `plain` keeps − at `min` and + at `max` in their usual look instead of
+     * fading them (`faded`, the default). The button is still disabled, and a
+     * disabled or read-only Stepper is unchanged.
+     */
+    limitAppearance?: StepperLimitAppearance;
 };
 /**
  * A whole-number count between − and + buttons that can also be typed: one

package/dist/components/Stepper.js

@@ -5,6 +5,7 @@ import { cx } from '../class-names.js';
 import { assertStepperBounds, readStepperEntry, stepperMoves, stepperText, } from '../stepper-count.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { FieldLabelText } from './FieldLabelText.js';
+export const stepperLimitAppearances = ['faded', 'plain'];
 /** Keeps focus where it was (the count, or nowhere) when a button is pressed. */
 function keepFocus(event) {
     event.preventDefault();
@@ -14,9 +15,11 @@ function keepFocus(event) {
  * tab stop (the count, a spin button that ArrowUp and ArrowDown step), with
  * the buttons as pointer targets beside it. − stops at `min`, + at `max`.
  */
-export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden = false, value, onChange, min = 0, max = Number.POSITIVE_INFINITY, step = 1, decrementLabel, incrementLabel, error, changed = false, disabled = false, readOnly = false, valueText, placeholder, name, width = 'fixed', }, ref) {
+export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden = false, value, onChange, min = 0, max = Number.POSITIVE_INFINITY, step = 1, decrementLabel, incrementLabel, error, changed = false, disabled = false, readOnly = false, valueText, placeholder, name, width = 'fixed', limitAppearance = 'faded', }, ref) {
     const bounds = { min, max, step };
     assertStepperBounds(bounds);
+    if (!stepperLimitAppearances.includes(limitAppearance))
+        throw new RangeError(`Unknown Stepper limitAppearance: ${String(limitAppearance)}`);
     if (value !== null && !Number.isSafeInteger(value))
         throw new RangeError('Stepper value must be a whole number or null');
     const inputId = useId();
@@ -70,7 +73,10 @@ export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden
         move(target);
     }
     const invalid = Boolean(error);
-    return (_jsxs("div", { className: cx('sw-stepper', width === 'full' && 'sw-stepper-full', invalid && 'sw-stepper-invalid', changed && !invalid && 'sw-stepper-changed', readOnly && 'sw-stepper-readonly'), children: [_jsx("label", { className: labelVisuallyHidden ? 'sw-sr-only' : undefined, htmlFor: inputId, id: labelId, children: _jsx(FieldLabelText, { label: label }) }), _jsxs("div", { "aria-labelledby": labelId, className: "sw-stepper-track", role: "group", children: [_jsx("button", { "aria-controls": inputId, "aria-label": decrementLabel, className: "sw-stepper-button", disabled: moves.down === null, onClick: () => move(moves.down), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: '−' }) }), _jsx("input", { ref: ref, "aria-describedby": invalid ? errorId : undefined, "aria-invalid": invalid || undefined, "aria-valuemax": Number.isFinite(max) ? max : undefined, "aria-valuemin": min, "aria-valuenow": value ?? undefined, "aria-valuetext": valueText, autoComplete: "off", className: "sw-stepper-input", disabled: disabled, id: inputId, 
+    return (_jsxs("div", { className: cx('sw-stepper', width === 'full' && 'sw-stepper-full', invalid && 'sw-stepper-invalid', changed && !invalid && 'sw-stepper-changed', readOnly && 'sw-stepper-readonly', limitAppearance === 'plain' &&
+            !disabled &&
+            !readOnly &&
+            'sw-stepper-limit-plain'), children: [_jsx("label", { className: labelVisuallyHidden ? 'sw-sr-only' : undefined, htmlFor: inputId, id: labelId, children: _jsx(FieldLabelText, { label: label }) }), _jsxs("div", { "aria-labelledby": labelId, className: "sw-stepper-track", role: "group", children: [_jsx("button", { "aria-controls": inputId, "aria-label": decrementLabel, className: "sw-stepper-button", disabled: moves.down === null, onClick: () => move(moves.down), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: '−' }) }), _jsx("input", { ref: ref, "aria-describedby": invalid ? errorId : undefined, "aria-invalid": invalid || undefined, "aria-valuemax": Number.isFinite(max) ? max : undefined, "aria-valuemin": min, "aria-valuenow": value ?? undefined, "aria-valuetext": valueText, autoComplete: "off", className: "sw-stepper-input", disabled: disabled, id: inputId, 
                         // iOS's numeric pad has no minus key, so a range below zero takes
                         // the text keyboard.
                         inputMode: allowsNegative ? 'text' : 'numeric', name: name, onBlur: () => setDraft(null), onChange: onType, onKeyDown: onKeyDown, placeholder: placeholder, readOnly: readOnly, role: "spinbutton", type: "text", value: text }), _jsx("button", { "aria-controls": inputId, "aria-label": incrementLabel, className: "sw-stepper-button", disabled: moves.up === null, onClick: () => move(moves.up), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: "+" }) })] }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }));

package/dist/components/combobox/types.d.ts

@@ -1,4 +1,5 @@
 import { type BadgeTone } from '../../css/css-data.js';
+import { type RequiredMark } from '../FieldLabelText.js';
 /** A short tag after an option's label, such as "Warning" or "Blocked". */
 export type ComboboxBadge = {
     label: string;
@@ -58,6 +59,13 @@ export type ComboboxProps = {
     description?: string;
     error?: string;
     required?: boolean;
+    /**
+     * `hidden` leaves out the label's " *" while the input 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;
     disabled?: boolean;
     size?: ComboboxSize;
 };

package/dist/components/denomination-grid/DenominationStrip.d.ts

@@ -1,7 +1,9 @@
 import { type DenominationGridProps } from './types.js';
 type StripProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel'>> & Pick<DenominationGridProps, 'totalLabel' | 'labelWidth'> & {
-    /** The row labels' appearance class, if any. */
+    /** The grid's appearance classes (labels, totals, cell tones), if any. */
     className?: string;
+    /** The `table` frame: a hairline around the region and a heading-row fill. */
+    framed: boolean;
 };
-export declare function DenominationStrip({ className, label, columns, rows, zeroLabel, totalLabel, labelWidth, }: StripProps): import("react").JSX.Element;
+export declare function DenominationStrip({ className, framed, label, columns, rows, zeroLabel, totalLabel, labelWidth, }: StripProps): import("react").JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../../class-names.js';
 import { denominationLabelWidthClass } from '../../css/css-denomination-aligned.js';
+import { denominationFramedClass, denominationScrollFramedClass, } from '../../css/css-denomination-appearance.js';
 import { ScrollRegion } from '../ScrollRegion.js';
 import { ColumnHeadText } from './ColumnHeadText.js';
 import { StripRow } from './StripRow.js';
@@ -16,7 +17,7 @@ function TotalHead({ totalLabel }) {
         return _jsx("td", { className: "sw-denomination-corner sw-denomination-total-head" });
     return (_jsx("th", { className: "sw-denomination-head sw-denomination-total-head", scope: "col", children: _jsx("span", { className: "sw-denomination-total-label", children: totalLabel }) }));
 }
-export function DenominationStrip({ className, label, columns, rows, zeroLabel, totalLabel, labelWidth, }) {
+export function DenominationStrip({ className, framed, label, columns, rows, zeroLabel, totalLabel, labelWidth, }) {
     const hasTotals = rows.some((row) => row.total !== undefined);
     // An aligned strip sizes its columns from the region's width; it needs
     // the column count and whether a total column takes a share.
@@ -26,5 +27,5 @@ export function DenominationStrip({ className, label, columns, rows, zeroLabel,
             '--sw-denomination-columns': columns.length,
             '--sw-denomination-total': hasTotals ? 1 : 0,
         };
-    return (_jsx(ScrollRegion, { "aria-label": label, className: cx('sw-denomination-scroll', aligned && 'sw-denomination-scroll-aligned'), children: _jsxs("table", { className: cx('sw-denomination-grid sw-denomination-strip', labelWidth && 'sw-denomination-strip-aligned', rows.some((row) => row.entry) && 'sw-denomination-strip-entry', labelWidth && denominationLabelWidthClass(labelWidth), className), style: aligned, children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: _jsx(ColumnHeadText, { column: column }) }, column.key))), hasTotals ? _jsx(TotalHead, { totalLabel: totalLabel }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsx(StripRow, { columns: columns, hasTotals: hasTotals, row: row, zeroLabel: zeroLabel }, row.id))) })] }) }));
+    return (_jsx(ScrollRegion, { "aria-label": label, className: cx('sw-denomination-scroll', aligned && 'sw-denomination-scroll-aligned', framed && denominationScrollFramedClass), children: _jsxs("table", { className: cx('sw-denomination-grid sw-denomination-strip', labelWidth && 'sw-denomination-strip-aligned', rows.some((row) => row.entry) && 'sw-denomination-strip-entry', labelWidth && denominationLabelWidthClass(labelWidth), framed && denominationFramedClass, className), style: aligned, children: [_jsx("caption", { className: "sw-sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", { className: "sw-denomination-corner" }), columns.map((column) => (_jsx("th", { className: "sw-denomination-head", scope: "col", children: _jsx(ColumnHeadText, { column: column }) }, column.key))), hasTotals ? _jsx(TotalHead, { totalLabel: totalLabel }) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsx(StripRow, { columns: columns, hasTotals: hasTotals, row: row, zeroLabel: zeroLabel }, row.id))) })] }) }));
 }

package/dist/components/denomination-grid/DenominationTiles.d.ts

@@ -1,6 +1,6 @@
 import { type DenominationGridProps } from './types.js';
 type TilesProps = Required<Pick<DenominationGridProps, 'label' | 'columns' | 'rows' | 'zeroLabel' | 'rowRole'>> & Pick<DenominationGridProps, 'subtotal'> & {
-    /** The row labels' appearance class, if any. */
+    /** The grid's appearance classes (labels, totals), if any. */
     className?: string;
 };
 export declare function DenominationTiles({ className, label, columns, rows, rowRole, subtotal, zeroLabel, }: TilesProps): import("react").JSX.Element;

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

@@ -12,5 +12,5 @@ import { columnName } from './ColumnHeadText.js';
 export function EntryCell({ row, entry, column, index }) {
     const max = entry.max?.[index] ?? undefined;
     const tone = row.cellTones?.[index];
-    return (_jsx("td", { className: cx('sw-denomination-entry', ...denominationCellToneClassNames(tone)), children: _jsx(Stepper, { changed: tone === 'accent', decrementLabel: entry.decrementLabel, disabled: row.disabled, error: entry.errors?.[index] ?? undefined, incrementLabel: entry.incrementLabel, label: `${row.label} ${columnName(column)}`, labelVisuallyHidden: true, max: max, onChange: (value) => entry.onChange(column.key, value), placeholder: entry.placeholder, value: row.cells[index] ?? null, width: "full" }) }));
+    return (_jsx("td", { className: cx('sw-denomination-entry', ...denominationCellToneClassNames(tone)), children: _jsx(Stepper, { changed: tone === 'accent', decrementLabel: entry.decrementLabel, disabled: row.disabled, error: entry.errors?.[index] ?? undefined, incrementLabel: entry.incrementLabel, label: `${row.label} ${columnName(column)}`, labelVisuallyHidden: true, limitAppearance: entry.limitAppearance, max: max, onChange: (value) => entry.onChange(column.key, value), placeholder: entry.placeholder, value: row.cells[index] ?? null, width: "full" }) }));
 }

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

@@ -4,10 +4,13 @@ import { denominationCellToneClassNames } from '../../css/css-denomination-cell-
 import { denominationCellView } from '../../denomination-cells.js';
 import { EntryCell } from './EntryCell.js';
 import { RowLabelLine } from './RowLabelLine.js';
-/** One count, read-only: the zero label, a signed delta, and the cell's tone. */
+/**
+ * One count, read-only: the zero label, a signed delta, and the cell's tone.
+ * The value has its own box, which the `pill` tone appearance fills.
+ */
 function CountCell({ row, index, zeroLabel, }) {
     const view = denominationCellView(row.cells[index] ?? null, row.signed ?? false, zeroLabel);
-    return (_jsx("td", { className: cx('sw-denomination-cell', `sw-denomination-cell-${view.state}`, ...denominationCellToneClassNames(row.cellTones?.[index])), children: view.text }));
+    return (_jsx("td", { className: cx('sw-denomination-cell', `sw-denomination-cell-${view.state}`, ...denominationCellToneClassNames(row.cellTones?.[index])), children: _jsx("span", { className: "sw-denomination-cell-value", children: view.text }) }));
 }
 /**
  * One strip row: its pinned label (with the phone total under it), a count

package/dist/components/denomination-grid/types.d.ts

@@ -1,8 +1,11 @@
 import { type ReactNode } from 'react';
 import { type BadgeTone } from '../../css/css-data.js';
+import { type DenominationGridFrame, type DenominationTotalEmphasis } from '../../css/css-denomination-appearance.js';
+import { type DenominationCellToneAppearance } from '../../css/css-denomination-cell-tones.js';
 import { type DenominationLabelAppearance } from '../../css/css-denomination-label.js';
 import { type DenominationLabelWidth } from '../../css/css-denomination-aligned.js';
-export type { DenominationLabelWidth };
+import { type StepperLimitAppearance } from '../Stepper.js';
+export type { DenominationCellToneAppearance, DenominationGridFrame, DenominationLabelWidth, DenominationTotalEmphasis, };
 export type DenominationGridTone = BadgeTone;
 export type DenominationGridLayout = 'strip' | 'tiles';
 /**
@@ -36,6 +39,11 @@ export type DenominationGridEntry = {
     errors?: readonly (string | null)[];
     /** What an empty box shows, such as "0". */
     placeholder?: string;
+    /**
+     * The Steppers' `limitAppearance`: `plain` keeps − at 0 (and + at a cap)
+     * in its usual look instead of faded; it is still disabled.
+     */
+    limitAppearance?: StepperLimitAppearance;
 };
 export type DenominationGridRow = {
     id: string;
@@ -79,6 +87,11 @@ export type DenominationGridProps = {
     rows: readonly DenominationGridRow[];
     layout?: DenominationGridLayout;
     subtotal?: (count: number, column: DenominationGridColumn) => string;
+    /**
+     * What a zero or empty read-only count shows, `—` by default. An empty
+     * string leaves those counts blank, so only the counts that are there
+     * stand out (the column header still names each cell).
+     */
     zeroLabel?: string;
     /**
      * Names the strip's total column, such as "Total": a column header over
@@ -111,4 +124,25 @@ export type DenominationGridProps = {
      * total.
      */
     labelAppearance?: DenominationLabelAppearance;
+    /**
+     * `table` frames the strip: its surface inside a hairline with rounded
+     * corners, the heading row on the subtle fill, a rule between columns,
+     * and the counts at label size, centred under their heads. `none` (the
+     * default) leaves open rows on the page's surface. Only the strip has a
+     * frame.
+     */
+    frame?: DenominationGridFrame;
+    /**
+     * `strong` sets the row totals in bold label type, a neutral row's in the
+     * text color and a toned row's in its tone; `default` keeps them in data
+     * type in the row's tone (a neutral row's muted).
+     */
+    totalEmphasis?: DenominationTotalEmphasis;
+    /**
+     * How a `cellTones` tone shows on a strip's read-only count: `text` (the
+     * default) sets the count in the tone; `pill` sets it on a rounded tint of
+     * the tone in the tone's ink, such as a difference in danger or a
+     * changed count in accent. Entry counts and tiles keep their tone border.
+     */
+    cellToneAppearance?: DenominationCellToneAppearance;
 };

package/dist/components/dialog/DialogTitle.d.ts

@@ -11,12 +11,14 @@ type DialogTitleProps = {
     /** The close button's accessible name; without it there is no button. */
     closeLabel?: string;
     onClose: () => void;
+    /** A banded dialog's title is always a row, which draws the band. */
+    banded: boolean;
 };
 /**
  * The dialog's title, which names it through `aria-labelledby`. Alone it is
  * the heading, as it always was. With an icon, a description or a
- * `closeLabel` it is a row: the icon, the title over its description, and
- * an icon-only ghost close button at the end.
+ * `closeLabel`, or in a banded dialog, it is a row: the icon, the title over
+ * its description, and an icon-only ghost close button at the end.
  */
-export declare function DialogTitle({ closeLabel, description, descriptionId, icon, id, level, onClose, title, }: DialogTitleProps): import("react").JSX.Element;
+export declare function DialogTitle({ banded, closeLabel, description, descriptionId, icon, id, level, onClose, title, }: DialogTitleProps): import("react").JSX.Element;
 export {};

package/dist/components/dialog/DialogTitle.js

@@ -5,12 +5,12 @@ import { Text } from '../Text.js';
 /**
  * The dialog's title, which names it through `aria-labelledby`. Alone it is
  * the heading, as it always was. With an icon, a description or a
- * `closeLabel` it is a row: the icon, the title over its description, and
- * an icon-only ghost close button at the end.
+ * `closeLabel`, or in a banded dialog, it is a row: the icon, the title over
+ * its description, and an icon-only ghost close button at the end.
  */
-export function DialogTitle({ closeLabel, description, descriptionId, icon, id, level, onClose, title, }) {
+export function DialogTitle({ banded, closeLabel, description, descriptionId, icon, id, level, onClose, title, }) {
     const heading = (_jsx(Text, { as: level === 2 ? 'h2' : 'h3', id: id, variant: "title", children: title }));
-    if (!closeLabel && !icon && !description)
+    if (!banded && !closeLabel && !icon && !description)
         return heading;
     return (_jsxs("div", { className: cx('sw-dialog-header', Boolean(icon || description) && 'sw-dialog-header-framed'), children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-dialog-icon", children: icon })) : null, description ? (_jsxs("div", { className: "sw-dialog-titles", children: [heading, _jsx(Text, { as: "p", className: "sw-dialog-description", color: "muted", id: descriptionId, variant: "caption", children: description })] })) : (heading), closeLabel ? (_jsxs(Button, { className: "sw-dialog-close", onPress: onClose, size: "sm", variant: "ghost", children: [_jsx("span", { className: "sw-sr-only", children: closeLabel }), _jsx("span", { "aria-hidden": "true", className: "sw-dialog-close-glyph" })] })) : null] }));
 }