@scalewing/react 1.40.0 → 1.42.0

package/dist/components/Article.d.ts

@@ -0,0 +1,60 @@
+import { type CardVariant } from '@scalewing/tokens';
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** The photo across the top of an article. */
+export type ArticleCover = {
+    src: string;
+    /** What the photo shows; `''` when it only decorates. */
+    alt: string;
+};
+export declare const articleTitleElements: readonly ["h1", "h2", "h3"];
+export type ArticleTitleElement = (typeof articleTitleElements)[number];
+export type ArticleProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
+    /** The article's title, in heading type. */
+    title: string;
+    /**
+     * `h1` (the default) on the article's own page; `h2` or `h3` where it
+     * sits under another page's headings.
+     */
+    titleAs?: ArticleTitleElement;
+    /** A short line over the title, such as "Store procedure · Services". */
+    eyebrow?: ReactNode;
+    /** A muted line under the title, such as "Manager 1 · Oct 16 · 4 min read". */
+    meta?: ReactNode;
+    /** A photo across the top, edge to edge; `null` is none. */
+    cover?: ArticleCover | null;
+    /** Controls at the end of the eyebrow's row, such as a language switch. */
+    actions?: ReactNode;
+    /** The card look, as `Card`'s. */
+    variant?: CardVariant;
+    /** The article's body, under a hairline. */
+    children?: ReactNode;
+};
+/**
+ * A page that reads like a post, on a card at a reading width: an optional
+ * cover photo edge to edge across the top, then the eyebrow (with the
+ * consumer's actions at its row's end), the title in heading type, the
+ * muted meta line, a hairline, and the body. The article is named by its
+ * title (an `aria-labelledby` you pass replaces that). The ref is the
+ * `article` element.
+ */
+export declare const Article: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "title" | "children"> & {
+    /** The article's title, in heading type. */
+    title: string;
+    /**
+     * `h1` (the default) on the article's own page; `h2` or `h3` where it
+     * sits under another page's headings.
+     */
+    titleAs?: ArticleTitleElement;
+    /** A short line over the title, such as "Store procedure · Services". */
+    eyebrow?: ReactNode;
+    /** A muted line under the title, such as "Manager 1 · Oct 16 · 4 min read". */
+    meta?: ReactNode;
+    /** A photo across the top, edge to edge; `null` is none. */
+    cover?: ArticleCover | null;
+    /** Controls at the end of the eyebrow's row, such as a language switch. */
+    actions?: ReactNode;
+    /** The card look, as `Card`'s. */
+    variant?: CardVariant;
+    /** The article's body, under a hairline. */
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Article.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cardVariants } from '@scalewing/tokens';
+import { forwardRef, useId } from 'react';
+import { cx } from '../class-names.js';
+import { Separator } from './Separator.js';
+import { Text } from './Text.js';
+export const articleTitleElements = ['h1', 'h2', 'h3'];
+function hasContent(node) {
+    return (node !== undefined &&
+        node !== null &&
+        typeof node !== 'boolean' &&
+        node !== '');
+}
+function assertArticle({ title, titleAs, cover, variant }) {
+    if (typeof title !== 'string' || title.trim() === '')
+        throw new RangeError('Article title must be non-empty text');
+    if (titleAs !== undefined && !articleTitleElements.includes(titleAs))
+        throw new RangeError(`Unknown Article titleAs: ${String(titleAs)}`);
+    if (variant !== undefined && !cardVariants.includes(variant))
+        throw new RangeError(`Unknown Article variant: ${String(variant)}`);
+    if (cover !== undefined && cover !== null) {
+        if (typeof cover.src !== 'string' || cover.src.trim() === '')
+            throw new RangeError('Article cover src must be non-empty text');
+        if (typeof cover.alt !== 'string')
+            throw new RangeError("Article cover alt must be text ('' for a photo that only decorates)");
+    }
+}
+/**
+ * A page that reads like a post, on a card at a reading width: an optional
+ * cover photo edge to edge across the top, then the eyebrow (with the
+ * consumer's actions at its row's end), the title in heading type, the
+ * muted meta line, a hairline, and the body. The article is named by its
+ * title (an `aria-labelledby` you pass replaces that). The ref is the
+ * `article` element.
+ */
+export const Article = forwardRef(function Article(props, ref) {
+    assertArticle(props);
+    const { title, titleAs = 'h1', eyebrow, meta, cover, actions, variant = 'glass', children, className, ...rest } = props;
+    const titleId = useId();
+    const top = hasContent(eyebrow) || hasContent(actions);
+    return (_jsxs("article", { "aria-labelledby": titleId, className: cx('sw-card', `sw-card-${variant}`, 'sw-article', className), ref: ref, ...rest, children: [cover ? (_jsx("img", { alt: cover.alt, className: "sw-article-cover", src: cover.src })) : null, _jsxs("div", { className: "sw-article-body", children: [_jsxs("header", { className: "sw-article-header", children: [top ? (_jsxs("div", { className: "sw-article-top", children: [hasContent(eyebrow) ? (_jsx("div", { className: "sw-article-eyebrow", children: eyebrow })) : null, hasContent(actions) ? (_jsx("div", { className: "sw-article-actions", children: actions })) : null] })) : null, _jsx(Text, { as: titleAs, className: "sw-article-title", id: titleId, variant: "heading", children: title }), hasContent(meta) ? (_jsx("div", { className: "sw-article-meta", children: meta })) : null] }), _jsx(Separator, { decorative: true }), hasContent(children) ? (_jsx("div", { className: "sw-article-content", children: children })) : null] })] }));
+});

package/dist/components/BarChart.d.ts

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

package/dist/components/BarChart.js

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

package/dist/components/ButtonGroup.d.ts

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

package/dist/components/ButtonGroup.js

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

package/dist/components/DateField.d.ts

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

package/dist/components/DateField.js

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

package/dist/components/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/DocumentViewer.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react';
+import { type DocumentViewerLabels } from './document-viewer/document-viewer-labels.js';
+export type { DocumentViewerLabels };
+export type DocumentViewerProps = {
+    /**
+     * The PDF's bytes, never a URL. The viewer draws from a copy. Other
+     * bytes (another object) open again at the first page, so keep this the
+     * same object between renders (state or a memo).
+     */
+    data: ArrayBuffer | Uint8Array;
+    /**
+     * The URL of the bundled worker entry `@scalewing/react/document-viewer-worker`
+     * (Scalewing's PDF.js worker, always the viewer's version), such as Vite's
+     * `import workerSrc from '@scalewing/react/document-viewer-worker?worker&url'`.
+     */
+    workerSrc: string;
+    /** Names the viewer, such as the document's title. */
+    label: string;
+    labels: DocumentViewerLabels;
+    /** The page shown, from 1; left out, the viewer keeps its own. */
+    page?: number;
+    /** Called with the page a step goes to. */
+    onPageChange?: (page: number) => void;
+    /** The failed state's actions, such as Try again and Download PDF. */
+    failedAction?: ReactNode;
+    /** Called once the PDF opens, with its page count. */
+    onLoad?: (info: {
+        pageCount: number;
+    }) => void;
+    /** Called when the PDF cannot be opened or a page cannot be drawn. */
+    onError?: (error: unknown) => void;
+};
+/**
+ * A PDF drawn one page at a time from its bytes with PDF.js, fitted to the
+ * width it is given, with previous and next steps and "Page n of m" in a
+ * polite live region. Two fingers, or `+`, `-` and `0` on the focused
+ * page, zoom it. The page's text sits over the drawing, transparent, so it
+ * can be read by assistive technology and selected. It opens nothing from
+ * the network beyond the worker, and has no download or print of its own.
+ */
+export declare function DocumentViewer({ data, workerSrc, label, labels, page: pageProp, onPageChange, failedAction, onLoad, onError, }: DocumentViewerProps): import("react").JSX.Element;