@scalewing/react 1.39.0 → 1.41.0

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/ListGroup.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import { type ListGroupMaxHeight, type ListGroupVariant } from '../list-options.js';
+export type ListGroupProps = {
+    /** `ListRow` elements; the group draws a hairline between each pair. */
+    children: ReactNode;
+    /** Names the list, such as its card's heading. Required with `maxHeight`. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /**
+     * `panel` (the default) is one bordered panel; `plain` draws no panel
+     * and a hairline above the first row too, for rows inside a Card.
+     */
+    variant?: ListGroupVariant;
+    /**
+     * Bounds the list to a row count of its own region, `{ rows }` rows of a
+     * title and one detail line, where the rest scroll; the region is a named
+     * keyboard stop and shades an edge with more rows past it.
+     */
+    maxHeight?: ListGroupMaxHeight;
+    /**
+     * Pinned under the rows, outside the scroll, under a hairline: a total
+     * the rows add up to, such as a `ListRow` with the count and the sum.
+     */
+    footer?: ReactNode;
+    className?: string;
+    id?: string;
+};
+/**
+ * Rows in one list (`ul`, its list role kept) with hairlines between them:
+ * a panel of its own, or plain rows inside a surface. The ref reaches the
+ * outer box.
+ */
+export declare const ListGroup: import("react").ForwardRefExoticComponent<ListGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ListGroup.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../class-names.js';
+import { assertListGroup, listMaxHeightStyle, } from '../list-options.js';
+import { ListRowContainer } from './list/list-row-container.js';
+import { ScrollRegion } from './ScrollRegion.js';
+/**
+ * Rows in one list (`ul`, its list role kept) with hairlines between them:
+ * a panel of its own, or plain rows inside a surface. The ref reaches the
+ * outer box.
+ */
+export const ListGroup = forwardRef(function ListGroup({ children, 'aria-label': label, 'aria-labelledby': labelledBy, variant = 'panel', maxHeight, footer, className, id, }, ref) {
+    assertListGroup({ label, labelledBy, variant, maxHeight });
+    const list = (_jsx("ul", { "aria-label": label, "aria-labelledby": labelledBy, className: "sw-list", 
+        // A list styled without bullets loses its role in Safari.
+        role: "list", children: _jsx(ListRowContainer.Provider, { value: "li", children: children }) }));
+    return (_jsxs("div", { className: cx('sw-list-group', `sw-list-group-${variant}`, className), id: id, ref: ref, children: [maxHeight === undefined ? (list) : (_jsx(ScrollRegion, { "aria-label": label, "aria-labelledby": labelledBy, className: "sw-list-group-scroll", style: listMaxHeightStyle(maxHeight), children: list })), footer === undefined ? null : (_jsx("div", { className: "sw-list-group-footer", children: _jsx(ListRowContainer.Provider, { value: "div", children: footer }) }))] }));
+});

package/dist/components/ListRow.d.ts

@@ -0,0 +1,60 @@
+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;
+    /** A muted line under the title. */
+    detail?: string;
+    /** A figure or word at the row's end, such as "+$1.48". */
+    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, 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
+     * must say what it means.
+     */
+    leading?: ReactNode;
+    /**
+     * Makes the whole row a button (or, with `href`, a link's plain press
+     * for a client router) and adds the chevron.
+     */
+    onPress?: () => void;
+    /** Makes the whole row a link to `href`, with the chevron. */
+    href?: string;
+    /**
+     * Makes the row a choice: a check while true, nothing while false, and
+     * the state (`aria-pressed` on a button, `aria-current` on a link). Only
+     * on a row with `onPress` or `href`.
+     */
+    selected?: boolean;
+    /** Dims the row and blocks presses; a link row drops its `href`. */
+    disabled?: boolean;
+    /** `danger` draws the title in the danger colour, for a row that ends something. */
+    tone?: ListRowTone;
+    /** `plain` sets the title at the body weight, for a list of plain statements. */
+    titleAppearance?: ListRowTitleAppearance;
+    /** `none` hides the chevron of a pressable row that acts in place. */
+    accessory?: 'chevron' | 'none';
+    /**
+     * Replaces a pressable row's name, which is its title and value; its
+     * detail lines are its description.
+     */
+    'aria-label'?: string;
+};
+/**
+ * One row of a `ListGroup`: it opens something (`onPress` or `href`, with
+ * 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, valueBadge, leading, onPress, href, selected, disabled, tone, titleAppearance, accessory, 'aria-label': ariaLabel, }: ListRowProps): import("react").JSX.Element;

package/dist/components/ListRow.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useId } from 'react';
+import { cx } from '../class-names.js';
+import { assertListRow, listRowAccessory, } from '../list-options.js';
+import { tabStop } from '../tab-stop.js';
+import { plainPress } from './link-press.js';
+import { ListRowContent } from './list/ListRowContent.js';
+import { ListRowContainer } from './list/list-row-container.js';
+function ids(...parts) {
+    const joined = parts.filter(Boolean).join(' ');
+    return joined === '' ? undefined : joined;
+}
+/**
+ * One row of a `ListGroup`: it opens something (`onPress` or `href`, with
+ * 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, valueBadge, leading, onPress, href, selected, disabled = false, tone = 'default', titleAppearance = 'strong', accessory = 'chevron', 'aria-label': ariaLabel, }) {
+    const pressable = onPress !== undefined || href !== undefined;
+    assertListRow({
+        title,
+        tone,
+        titleAppearance,
+        valueTone,
+        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, 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,
+        'aria-labelledby': ariaLabel
+            ? undefined
+            : ids(`${id}-title`, value !== undefined && `${id}-value`),
+        'aria-describedby': ids(Boolean(detail) && `${id}-detail`, Boolean(valueDetail) && `${id}-value-detail`),
+    };
+    let row;
+    if (href !== undefined)
+        row = (_jsx("a", { ...naming, "aria-current": selected ? 'true' : undefined, "aria-disabled": disabled || undefined, className: className, href: disabled ? undefined : href, onClick: onPress && !disabled
+                ? (event) => {
+                    if (!plainPress(event))
+                        return;
+                    event.preventDefault();
+                    onPress();
+                }
+                : undefined, role: disabled ? 'link' : undefined, tabIndex: disabled ? undefined : tabStop, children: content }));
+    else if (onPress !== undefined)
+        row = (_jsx("button", { ...naming, "aria-pressed": selected, className: className, disabled: disabled, onClick: onPress, tabIndex: tabStop, type: "button", children: content }));
+    else
+        row = (_jsx("div", { "aria-label": ariaLabel, className: className, role: ariaLabel ? 'group' : undefined, children: content }));
+    return container === 'li' ? (_jsx("li", { className: "sw-list-item", children: row })) : (_jsx("div", { className: "sw-list-item", children: row }));
+}

package/dist/components/NavCount.d.ts

@@ -0,0 +1,21 @@
+export type NavCountProps = {
+    /**
+     * How many things wait behind the destination, such as tasks to do: a
+     * filled pill after its words, read in the link's name ("Tasks 8"). A
+     * whole number; 0 shows nothing.
+     */
+    count: number;
+    /**
+     * What the count means, in the consumer's words ("8 tasks to do"): read
+     * in the name in place of the bare number ("Tasks 8 tasks to do"), the
+     * pill then hidden from assistive technology.
+     */
+    countLabel?: string;
+};
+/**
+ * A count after a Nav destination's words, placed inside its link or
+ * Button: `<a href="/tasks">Tasks<NavCount count={8} /></a>`. It is the
+ * pill SectionNav's item count draws, and it is part of the destination's
+ * accessible name, as there.
+ */
+export declare function NavCount({ count, countLabel }: NavCountProps): import("react").JSX.Element | null;

package/dist/components/NavCount.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Fails closed on a count that is not a whole number or an empty label. */
+function assertNavCount({ count, countLabel }) {
+    if (!Number.isInteger(count) || count < 0)
+        throw new RangeError(`NavCount count must be a whole number from 0: ${String(count)}`);
+    if (countLabel !== undefined &&
+        (typeof countLabel !== 'string' || !countLabel.trim()))
+        throw new RangeError('NavCount countLabel must be non-empty text');
+}
+/**
+ * A count after a Nav destination's words, placed inside its link or
+ * Button: `<a href="/tasks">Tasks<NavCount count={8} /></a>`. It is the
+ * pill SectionNav's item count draws, and it is part of the destination's
+ * accessible name, as there.
+ */
+export function NavCount({ count, countLabel }) {
+    assertNavCount({ count, countLabel });
+    if (count === 0)
+        return null;
+    // The space is its own text node, so every browser and the name's
+    // computation keep it between the words and the count.
+    return (_jsxs(_Fragment, { children: [' ', countLabel ? _jsx("span", { className: "sw-sr-only", children: countLabel }) : null, _jsx("span", { "aria-hidden": countLabel ? true : undefined, className: "sw-nav-count", children: count })] }));
+}

package/dist/components/SectionNav.js

@@ -4,15 +4,8 @@ import { breakpoints } from '../css/breakpoints.js';
 import { sectionNavVerticalClass } from '../css/css-section-nav.js';
 import { assertSectionNavAppearance, } from '../css/css-section-nav-filled.js';
 import { tabStop } from '../tab-stop.js';
+import { plainPress } from './link-press.js';
 export { sectionNavAppearances } from '../css/css-section-nav-filled.js';
-function plainPress(event) {
-    return (event.button === 0 &&
-        !event.defaultPrevented &&
-        !event.metaKey &&
-        !event.ctrlKey &&
-        !event.shiftKey &&
-        !event.altKey);
-}
 function ariaCurrent(current) {
     if (current === true)
         return 'true';

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 {};

package/dist/components/SegmentedControl.js

@@ -2,11 +2,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from 'react';
 import { cx } from '../class-names.js';
+import { breakpoints } from '../css/breakpoints.js';
 import { segmentedRaisedClass } from '../css/css-segmented-raised.js';
+import { segmentedFullWidthClass, segmentedSizes, segmentedSmClass, } from '../css/css-segmented-sizing.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { tabStop } from '../tab-stop.js';
-export const SegmentedControl = forwardRef(function SegmentedControl({ disabled = false, error, items, onChange, required = false, value, variant = 'compact', ...labelProps }, ref) {
+export { segmentedSizes };
+export const SegmentedControl = forwardRef(function SegmentedControl({ disabled = false, error, fullWidthBelow, items, onChange, required = false, size = 'md', value, variant = 'compact', ...labelProps }, ref) {
     const errorId = useId();
+    if (fullWidthBelow !== undefined &&
+        !breakpoints.includes(fullWidthBelow))
+        throw new RangeError(`Unknown SegmentedControl fullWidthBelow: ${String(fullWidthBelow)}`);
+    if (!segmentedSizes.includes(size))
+        throw new RangeError(`Unknown SegmentedControl size: ${String(size)}`);
     const withIcons = items.some((item) => item.icon);
     function onKeyDown(event) {
         if (disabled || (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft')) {
@@ -25,7 +33,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', variant === 'raised' && segmentedRaisedClass, 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', fullWidthBelow && segmentedFullWidthClass(fullWidthBelow)), 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', size === 'sm' && segmentedSmClass), 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) {
@@ -34,6 +42,6 @@ export const SegmentedControl = forwardRef(function SegmentedControl({ disabled
                         }, role: "radio", 
                         // Every item stays a tab stop, as each already was outside
                         // Safari: the arrow keys change the value, not the focus.
-                        tabIndex: tabStop, type: "button", children: [item.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-segmented-item-icon", children: item.icon })) : null, item.label] }, item.id));
+                        tabIndex: tabStop, type: "button", children: [item.icon ? (_jsx("span", { "aria-hidden": "true", className: "sw-segmented-item-icon", children: item.icon })) : null, size === 'sm' ? (_jsx("span", { className: "sw-segmented-item-label", children: item.label })) : (item.label)] }, item.id));
                 }) }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }));
 });

package/dist/components/StatTile.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { type StatTileTone, statTileTones } from '../css/css-stat-tile.js';
-export type { StatTileTone };
-export { statTileTones };
+import { type StatTileAppearance, statTileAppearances, type StatTileTone, statTileTones } from '../css/css-stat-tile.js';
+export type { StatTileAppearance, StatTileTone };
+export { statTileAppearances, statTileTones };
 export type StatTileEmphasis = 'default' | 'primary';
 export type StatTileProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
     /** A short name for the figure, set in the label variant. */
@@ -16,10 +16,17 @@ export type StatTileProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
     caption?: ReactNode;
     /** `primary` fills the tile in the accent for the one figure a page leads with. */
     emphasis?: StatTileEmphasis;
+    /**
+     * `plain` drops the tile's surface, edge and padding, so the figure sits
+     * inside a card that already has them, such as four answers in a row
+     * with hairlines between them. A plain tile cannot be `primary`, which
+     * is a fill. Default `card`.
+     */
+    appearance?: StatTileAppearance;
 };
 /**
  * One prominent figure with its label: the tiles a report or a list opens
  * with. Presentation only; the consumer formats the number and picks the
  * glyph.
  */
-export declare function StatTile({ caption, className, emphasis, glyph, label, tone, value, ...rest }: StatTileProps): import("react").JSX.Element;
+export declare function StatTile({ appearance, caption, className, emphasis, glyph, label, tone, value, ...rest }: StatTileProps): import("react").JSX.Element;

package/dist/components/StatTile.js

@@ -1,14 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../class-names.js';
-import { statTileTones } from '../css/css-stat-tile.js';
+import { statTileAppearances, statTileTones, } from '../css/css-stat-tile.js';
 import { Text } from './Text.js';
-export { statTileTones };
+export { statTileAppearances, statTileTones };
+function assertStatTile(appearance, emphasis) {
+    if (!statTileAppearances.includes(appearance))
+        throw new RangeError(`Unknown StatTile appearance: ${String(appearance)}`);
+    if (appearance === 'plain' && emphasis === 'primary')
+        throw new RangeError('A plain StatTile has no surface to fill; emphasis primary needs appearance card');
+}
 /**
  * One prominent figure with its label: the tiles a report or a list opens
  * with. Presentation only; the consumer formats the number and picks the
  * glyph.
  */
-export function StatTile({ caption, className, emphasis = 'default', glyph, label, tone = 'default', value, ...rest }) {
+export function StatTile({ appearance = 'card', caption, className, emphasis = 'default', glyph, label, tone = 'default', value, ...rest }) {
+    assertStatTile(appearance, emphasis);
     const primary = emphasis === 'primary';
-    return (_jsxs("section", { className: cx('sw-stat-tile', primary && 'sw-stat-tile-primary', className), ...rest, children: [glyph ? (_jsx("span", { "aria-hidden": "true", className: "sw-stat-tile-glyph", children: glyph })) : null, _jsxs("span", { className: "sw-stat-tile-body", children: [_jsx(Text, { as: "span", className: "sw-stat-tile-label", color: primary ? 'onAccent' : 'muted', variant: "label", children: label }), _jsx(Text, { as: "strong", className: "sw-stat-tile-value", color: primary ? 'onAccent' : tone === 'default' ? 'text' : tone, variant: "heading", children: value }), caption ? (_jsx(Text, { as: "span", className: "sw-stat-tile-caption", color: primary ? 'onAccent' : 'muted', variant: "caption", children: caption })) : null] })] }));
+    return (_jsxs("section", { className: cx('sw-stat-tile', appearance === 'plain' && 'sw-stat-tile-plain', primary && 'sw-stat-tile-primary', className), ...rest, children: [glyph ? (_jsx("span", { "aria-hidden": "true", className: "sw-stat-tile-glyph", children: glyph })) : null, _jsxs("span", { className: "sw-stat-tile-body", children: [_jsx(Text, { as: "span", className: "sw-stat-tile-label", color: primary ? 'onAccent' : 'muted', variant: "label", children: label }), _jsx(Text, { as: "strong", className: "sw-stat-tile-value", color: primary ? 'onAccent' : tone === 'default' ? 'text' : tone, variant: "heading", children: value }), caption ? (_jsx(Text, { as: "span", className: "sw-stat-tile-caption", color: primary ? 'onAccent' : 'muted', variant: "caption", children: caption })) : null] })] }));
 }

package/dist/components/Switch.d.ts

@@ -1,8 +1,23 @@
+import { type SwitchCheckedTone, switchCheckedTones, type SwitchLayout, switchLayouts } from '../css/css-switch.js';
+export { switchCheckedTones, switchLayouts, type SwitchCheckedTone, type SwitchLayout, };
 export type SwitchProps = {
     label: string;
     checked: boolean;
     onCheckedChange: (checked: boolean) => void;
     disabled?: boolean;
     description?: string;
+    /**
+     * `leading` (the default) puts the control before its label;
+     * `trailing` puts the label and description first and the control at
+     * the row's end, the row as wide as its column, as a settings list
+     * draws it.
+     */
+    layout?: SwitchLayout;
+    /**
+     * The track's colour while on: `accent` (the default) or `success`, for
+     * a switch whose on state is the healthy one, such as a feature turned
+     * on. The thumb's place says the state either way.
+     */
+    checkedTone?: SwitchCheckedTone;
 };
-export declare function Switch({ label, checked, onCheckedChange, disabled, description, }: SwitchProps): import("react").JSX.Element;
+export declare function Switch({ label, checked, onCheckedChange, disabled, description, layout, checkedTone, }: SwitchProps): import("react").JSX.Element;

package/dist/components/Switch.js

@@ -1,12 +1,23 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useId } from 'react';
+import { cx } from '../class-names.js';
+import { switchCheckedTones, switchLayouts, } from '../css/css-switch.js';
 import { tabStop } from '../tab-stop.js';
-export function Switch({ label, checked, onCheckedChange, disabled = false, description, }) {
+export { switchCheckedTones, switchLayouts, };
+function assertOneOf(values, value, prop) {
+    if (!values.includes(value))
+        throw new RangeError(`Unknown Switch ${prop}: ${String(value)}`);
+}
+export function Switch({ label, checked, onCheckedChange, disabled = false, description, layout = 'leading', checkedTone = 'accent', }) {
+    assertOneOf(switchLayouts, layout, 'layout');
+    assertOneOf(switchCheckedTones, checkedTone, 'checkedTone');
     const labelId = useId();
     const descriptionId = useId();
-    return (_jsxs("label", { className: "sw-switch", children: [_jsxs("span", { className: "sw-switch-control", children: [_jsx("input", { "aria-checked": checked, "aria-describedby": description ? descriptionId : undefined, "aria-labelledby": labelId, checked: checked, className: "sw-switch-input", disabled: disabled, onChange: (event) => {
-                            if (!disabled)
-                                onCheckedChange(event.currentTarget.checked);
-                        }, role: "switch", tabIndex: tabStop, type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-switch-track", children: _jsx("span", { className: "sw-switch-thumb" }) })] }), _jsxs("span", { className: "sw-switch-copy", children: [_jsx("span", { className: "sw-switch-label", id: labelId, children: label }), description ? (_jsx("span", { className: "sw-switch-description", id: descriptionId, children: description })) : null] })] }));
+    const control = (_jsxs("span", { className: "sw-switch-control", children: [_jsx("input", { "aria-checked": checked, "aria-describedby": description ? descriptionId : undefined, "aria-labelledby": labelId, checked: checked, className: "sw-switch-input", disabled: disabled, onChange: (event) => {
+                    if (!disabled)
+                        onCheckedChange(event.currentTarget.checked);
+                }, role: "switch", tabIndex: tabStop, type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-switch-track", children: _jsx("span", { className: "sw-switch-thumb" }) })] }));
+    const copy = (_jsxs("span", { className: "sw-switch-copy", children: [_jsx("span", { className: "sw-switch-label", id: labelId, children: label }), description ? (_jsx("span", { className: "sw-switch-description", id: descriptionId, children: description })) : null] }));
+    return (_jsx("label", { className: cx('sw-switch', layout === 'trailing' && 'sw-switch-trailing', checkedTone === 'success' && 'sw-switch-success'), children: layout === 'trailing' ? (_jsxs(_Fragment, { children: [copy, control] })) : (_jsxs(_Fragment, { children: [control, copy] })) }));
 }