@scalewing/react 1.39.0 → 1.41.0

package/dist/css/css-table-bounded-edges.js

@@ -1,4 +1,4 @@
-import { scrollShadeColor } from './css-scroll-region.js';
+import { blockEdgeShadeRules, blockShade } from './css-scroll-region.js';
 const region = '.sw-table-bounded';
 /*
  * While rows are scrolled out past the top or bottom of a bounded region
@@ -17,7 +17,6 @@ const region = '.sw-table-bounded';
  * is. Forced colours draw no shade; the system scrollbar is the cue.
  */
 function shadeRules() {
-    const shade = (direction) => `linear-gradient(to ${direction}, ${scrollShadeColor}, transparent)`;
     const headCells = `${region}.sw-scroll-more-top > .sw-table-sticky > thead > tr:last-child > :is(th, td)::before`;
     const footCells = `${region}.sw-scroll-more-bottom > .sw-table > .sw-table-footer-sticky > tr:first-child > :is(th, td)::before`;
     const noHead = ':not(:has(> .sw-table > thead))';
@@ -26,7 +25,7 @@ function shadeRules() {
     const ownBottom = `${region}.sw-scroll-more-bottom${noPinnedFoot}`;
     const ownBoth = `${region}.sw-scroll-more-top.sw-scroll-more-bottom${noHead}${noPinnedFoot}`;
     return `${headCells} {
-  background: ${shade('bottom')};
+  background: ${blockShade('bottom')};
   border-bottom: 0;
   border-top: 1px solid var(--sw-color-border);
   box-sizing: border-box;
@@ -36,7 +35,7 @@ function shadeRules() {
 }
 
 ${footCells} {
-  background: ${shade('top')};
+  background: ${blockShade('top')};
   border-bottom: 2px solid var(--sw-color-border);
   border-top: 0;
   box-sizing: border-box;
@@ -45,33 +44,11 @@ ${footCells} {
   inset-block-start: auto;
 }
 
-${ownTop},
-${ownBottom} {
-  background-repeat: no-repeat;
-  background-size: 100% var(--sw-space-5);
-}
-
-${ownTop} {
-  background-image: ${shade('bottom')};
-  background-position: top;
-}
-
-${ownBottom} {
-  background-image: ${shade('top')};
-  background-position: bottom;
-}
-
-${ownBoth} {
-  background-image: ${shade('bottom')}, ${shade('top')};
-  background-position: top, bottom;
-}
+${blockEdgeShadeRules({ top: ownTop, bottom: ownBottom, both: ownBoth })}
 
 @media (forced-colors: active) {
   ${headCells},
   ${footCells} { background: none; border-color: CanvasText; }
-  ${ownTop},
-  ${ownBottom},
-  ${ownBoth} { background-image: none; }
 }`;
 }
 /*

package/dist/css/range-band.d.ts

@@ -0,0 +1,2 @@
+export declare const rangeBand = "color-mix(in srgb, var(--sw-color-accent) 16%, transparent)";
+export declare const rangeBandHover = "color-mix(in srgb, var(--sw-color-accent) 24%, transparent)";

package/dist/css/range-band.js

@@ -0,0 +1,7 @@
+/*
+ * A range's band in a calendar: the accent at 16 % over the calendar's
+ * glass, 24 % under the pointer. CalendarButton's tint and DateRangeButton's
+ * days between a range's ends share it, so the two read as one band.
+ */
+export const rangeBand = 'color-mix(in srgb, var(--sw-color-accent) 16%, transparent)';
+export const rangeBandHover = 'color-mix(in srgb, var(--sw-color-accent) 24%, transparent)';

package/dist/css/stacking.d.ts

@@ -4,6 +4,7 @@ export declare const stackingOrder: {
     readonly bottomChrome: 3;
     readonly popupHost: 4;
     readonly topChrome: 5;
+    readonly sheetGrabber: 6;
     readonly popup: 10;
 };
 export type StackingLayer = keyof typeof stackingOrder;

package/dist/css/stacking.js

@@ -17,7 +17,9 @@
  *    Dialog's title band, inside its dialog), over a lifted
  *    surface that scrolls up under it (the header is the page's way back, the
  *    strip its way between sections, and a popup opens downward).
- * 6. `popup`: a popup outside any lifted surface (Select list, ActionMenu
+ * 6. `sheetGrabber`: a bottom sheet's grabber, inside its dialog, over the
+ *    banded title band that sticks under it.
+ * 7. `popup`: a popup outside any lifted surface (Select list, ActionMenu
  *    list, MultiSelect panel, Combobox list, Tooltip, the DateField and CalendarButton
  *    calendar) over everything in the page.
  *
@@ -29,6 +31,7 @@ export const stackingOrder = {
     bottomChrome: 3,
     popupHost: 4,
     topChrome: 5,
+    sheetGrabber: 6,
     popup: 10,
 };
 /*
@@ -58,8 +61,8 @@ const openPopups = [
     // popover API exists.
     '.sw-combobox-popup',
     '.sw-tooltip:not([hidden])',
-    // DateField and CalendarButton share it. Rendered only while open; on the
-    // top layer where the popover API exists.
+    // DateField, CalendarButton and DateRangeButton share it. Rendered only
+    // while open; on the top layer where the popover API exists.
     '.sw-date-field-calendar',
 ].join(', ');
 const popupHosts = ['.sw-card-glass', '.sw-accordion'];

package/dist/css/stylesheet.js

@@ -6,6 +6,9 @@ import { accordionClassCatalog } from './css-accordion.js';
 import { switchClassCatalog } from './css-switch.js';
 import { dateFieldClassCatalog } from './css-date-field.js';
 import { calendarButtonClassCatalog } from './css-calendar-button.js';
+import { dateRangeClassCatalog } from './css-date-range.js';
+import { listClassCatalog } from './css-list.js';
+import { countPillClassCatalog } from './css-count-pill.js';
 import { checkboxClassCatalog } from './css-checkbox.js';
 import { radioGroupClassCatalog } from './css-radio-group.js';
 import { spinnerClassCatalog } from './css-spinner.js';
@@ -45,6 +48,8 @@ import { sectionNavClassCatalog } from './css-section-nav.js';
 import { dialogClassCatalog } from './css-dialog.js';
 import { dialogBandedClassCatalog } from './css-dialog-banded.js';
 import { dialogFrameClassCatalog } from './css-dialog-frame.js';
+import { dialogCanvasClassCatalog } from './css-dialog-canvas.js';
+import { dialogGrabberClassCatalog } from './css-dialog-grabber.js';
 import { selectClassCatalog } from './css-select.js';
 import { multiSelectClassCatalog } from './css-multi-select.js';
 import { comboboxClassCatalog } from './css-combobox.js';
@@ -86,6 +91,8 @@ export function utilityClassCatalog() {
         ...dialogClassCatalog(),
         ...dialogFrameClassCatalog(),
         ...dialogBandedClassCatalog(),
+        ...dialogCanvasClassCatalog(),
+        ...dialogGrabberClassCatalog(),
         ...accordionClassCatalog(),
         ...selectClassCatalog(),
         ...actionMenuClassCatalog(),
@@ -95,6 +102,9 @@ export function utilityClassCatalog() {
         ...switchClassCatalog(),
         ...dateFieldClassCatalog(),
         ...calendarButtonClassCatalog(),
+        ...dateRangeClassCatalog(),
+        ...listClassCatalog(),
+        ...countPillClassCatalog(),
         ...checkboxClassCatalog(),
         ...radioGroupClassCatalog(),
         ...spinnerClassCatalog(),

package/dist/date-field-labels.d.ts

@@ -28,6 +28,11 @@ export type DateFieldLabels = {
      * outside `min` and `max`.
      */
     outOfRange: string;
+    /**
+     * Said after a calendar entry's name while the field is required (a
+     * button has no required state of its own), such as "Required".
+     */
+    required: string;
     /** Placeholder letters, arranged in the locale's field order. */
     dayPlaceholder: string;
     monthPlaceholder: string;

package/dist/date-field-labels.js

@@ -8,6 +8,7 @@ export const defaultDateFieldLabels = {
     clear: 'Clear',
     invalidEntry: 'Enter a valid date.',
     outOfRange: 'Choose a date in the allowed range.',
+    required: 'Required',
     dayPlaceholder: 'DD',
     monthPlaceholder: 'MM',
     yearPlaceholder: 'YYYY',

package/dist/date-range-draft.d.ts

@@ -0,0 +1,26 @@
+import { type DateOnlyRange } from './date-only.js';
+/**
+ * A range being picked in DateRangeButton's calendar: the days so far, and
+ * whether the next press sets its end. A first press makes a one-day range
+ * that waits for its end, so Apply always has a whole range to give.
+ */
+export type RangeDraft = {
+    range: DateOnlyRange;
+    awaitingEnd: boolean;
+};
+/** A whole range, such as the value the calendar opens on. */
+export declare function settledDraft(range: DateOnlyRange): RangeDraft;
+/**
+ * The draft after a press on `day`: the first press sets the start, the
+ * second the end. A second press before the start starts over from that
+ * day, and a press on a whole range starts a new one.
+ */
+export declare function pressDay(draft: RangeDraft, day: string): RangeDraft;
+/** The days in a range, both ends counted: 1 for a one-day range. */
+export declare function rangeDayCount(range: DateOnlyRange): number;
+/**
+ * The last day a press may pick: `max`, or while the draft waits for its
+ * end, the day `maxDays` long from its start when that is earlier.
+ */
+export declare function latestPick(draft: RangeDraft, max: string | undefined, maxDays: number | undefined): string | undefined;
+export declare function sameRange(a: DateOnlyRange, b: DateOnlyRange): boolean;

package/dist/date-range-draft.js

@@ -0,0 +1,36 @@
+import { addDays, daysBetween } from './calendar-month.js';
+import { clampDateOnly } from './date-only.js';
+/** A whole range, such as the value the calendar opens on. */
+export function settledDraft(range) {
+    return { range, awaitingEnd: false };
+}
+/**
+ * The draft after a press on `day`: the first press sets the start, the
+ * second the end. A second press before the start starts over from that
+ * day, and a press on a whole range starts a new one.
+ */
+export function pressDay(draft, day) {
+    if (draft.awaitingEnd && day >= draft.range.start)
+        return {
+            range: { start: draft.range.start, end: day },
+            awaitingEnd: false,
+        };
+    return { range: { start: day, end: day }, awaitingEnd: true };
+}
+/** The days in a range, both ends counted: 1 for a one-day range. */
+export function rangeDayCount(range) {
+    return daysBetween(range.start, range.end) + 1;
+}
+/**
+ * The last day a press may pick: `max`, or while the draft waits for its
+ * end, the day `maxDays` long from its start when that is earlier.
+ */
+export function latestPick(draft, max, maxDays) {
+    if (!draft.awaitingEnd || maxDays === undefined)
+        return max;
+    const longest = clampDateOnly(addDays(draft.range.start, maxDays - 1));
+    return max === undefined || longest < max ? longest : max;
+}
+export function sameRange(a, b) {
+    return a.start === b.start && a.end === b.end;
+}

package/dist/date-range-input.d.ts

@@ -0,0 +1,26 @@
+import { type DateOnlyRange } from './date-only.js';
+/** A named range a person can choose in one press, such as "Last 7 days". */
+export type DateRangePreset = {
+    /** Unique among the presets; never shown. */
+    id: string;
+    label: string;
+    range: DateOnlyRange;
+};
+export type DateRangeInput = {
+    label: string;
+    value: DateOnlyRange;
+    presets: readonly DateRangePreset[];
+    min?: string;
+    max?: string;
+    maxDays?: number;
+    today?: string;
+    weekStartsOn: number;
+};
+/**
+ * Fails closed on DateRangeButton props it cannot draw: empty words, a
+ * malformed or reversed value, bounds or today, a `maxDays` that is not a
+ * whole number from 1, and presets that repeat an id or that a press could
+ * not pick (outside the bounds or longer than `maxDays`). A value outside
+ * the bounds stays the value, as on CalendarButton.
+ */
+export declare function assertDateRangeInput(input: DateRangeInput): void;

package/dist/date-range-input.js

@@ -0,0 +1,58 @@
+import { assertWeekStart } from './calendar-month.js';
+import { rangeDayCount } from './date-range-draft.js';
+import { assertDateOnly, assertDateRange, isOutsideDateRange, } from './date-only.js';
+function isBlank(text) {
+    return typeof text !== 'string' || text.trim() === '';
+}
+function assertValue(value) {
+    if (typeof value !== 'object' || value === null)
+        throw new RangeError('value must be a { start, end } range');
+    assertDateOnly('value.start', value.start);
+    assertDateOnly('value.end', value.end);
+    if (value.start > value.end)
+        throw new RangeError('value.start must not be after value.end');
+}
+function assertBounds(min, max) {
+    if (min !== undefined)
+        assertDateOnly('min', min);
+    if (max !== undefined)
+        assertDateOnly('max', max);
+    if (min !== undefined && max !== undefined && min > max)
+        throw new RangeError('min must not be after max');
+}
+function assertPreset(preset, { min, max, maxDays }) {
+    if (isBlank(preset.id) || isBlank(preset.label))
+        throw new RangeError('presets must have non-empty ids and labels');
+    assertDateRange(preset.range);
+    const { start, end } = preset.range;
+    if (isOutsideDateRange(start, min, max) || isOutsideDateRange(end, min, max))
+        throw new RangeError(`preset ${preset.id} must lie inside min and max`);
+    if (maxDays !== undefined && rangeDayCount(preset.range) > maxDays)
+        throw new RangeError(`preset ${preset.id} must not exceed maxDays`);
+}
+/**
+ * Fails closed on DateRangeButton props it cannot draw: empty words, a
+ * malformed or reversed value, bounds or today, a `maxDays` that is not a
+ * whole number from 1, and presets that repeat an id or that a press could
+ * not pick (outside the bounds or longer than `maxDays`). A value outside
+ * the bounds stays the value, as on CalendarButton.
+ */
+export function assertDateRangeInput(input) {
+    if (isBlank(input.label))
+        throw new RangeError('label must be non-empty text');
+    assertValue(input.value);
+    assertBounds(input.min, input.max);
+    if (input.today !== undefined)
+        assertDateOnly('today', input.today);
+    assertWeekStart(input.weekStartsOn);
+    const { maxDays } = input;
+    if (maxDays !== undefined && (!Number.isInteger(maxDays) || maxDays < 1))
+        throw new RangeError('maxDays must be a whole number from 1');
+    const ids = new Set();
+    for (const preset of input.presets) {
+        assertPreset(preset, input);
+        if (ids.has(preset.id))
+            throw new RangeError(`presets must have unique ids: ${preset.id}`);
+        ids.add(preset.id);
+    }
+}

package/dist/date-range-labels.d.ts

@@ -0,0 +1,22 @@
+import { type CalendarButtonLabels } from './calendar-button-labels.js';
+/**
+ * DateRangeButton's own words. Products pass their translations; month and
+ * weekday names, and the dates themselves, come from `Intl` instead.
+ */
+export type DateRangeButtonLabels = Pick<CalendarButtonLabels, 'previousMonth' | 'nextMonth' | 'nameSeparator'> & {
+    /** Names the list of presets, such as "Quick ranges". */
+    presets: string;
+    /** Applies the chosen range and closes the calendar, such as "Apply". */
+    apply: string;
+    /** Closes the calendar and keeps the range it opened with. */
+    cancel: string;
+    /** The bottom sheet's close button. */
+    close: string;
+    /** How to pick, shown under the calendar, such as "Choose a first and a last day." */
+    hint: string;
+    /** The length of the chosen range, such as "7 days". */
+    dayCount: (days: number) => string;
+};
+export declare const defaultDateRangeButtonLabels: DateRangeButtonLabels;
+/** Consumer words over the English defaults; empty words fail closed. */
+export declare function resolveDateRangeButtonLabels(labels?: Partial<DateRangeButtonLabels>): DateRangeButtonLabels;

package/dist/date-range-labels.js

@@ -0,0 +1,26 @@
+import { defaultNameSeparator, } from './calendar-button-labels.js';
+export const defaultDateRangeButtonLabels = {
+    previousMonth: 'Previous month',
+    nextMonth: 'Next month',
+    nameSeparator: defaultNameSeparator,
+    presets: 'Presets',
+    apply: 'Apply',
+    cancel: 'Cancel',
+    close: 'Close',
+    hint: 'Choose a first and a last day.',
+    dayCount: (days) => (days === 1 ? '1 day' : `${days} days`),
+};
+/** Consumer words over the English defaults; empty words fail closed. */
+export function resolveDateRangeButtonLabels(labels = {}) {
+    const resolved = { ...defaultDateRangeButtonLabels, ...labels };
+    const { dayCount, nameSeparator, ...words } = resolved;
+    for (const [key, text] of Object.entries(words))
+        if (typeof text !== 'string' || text.trim() === '')
+            throw new RangeError(`labels.${key} must be non-empty text`);
+    // Only an empty string is refused: a lone space is a valid separator.
+    if (typeof nameSeparator !== 'string' || nameSeparator === '')
+        throw new RangeError('labels.nameSeparator must be non-empty text');
+    if (typeof dayCount !== 'function')
+        throw new RangeError('labels.dayCount must be a function');
+    return resolved;
+}

package/dist/date-range-view.d.ts

@@ -0,0 +1,12 @@
+import { type CalendarMonth } from './calendar-month.js';
+/** How many months a range calendar shows: two side by side, or one. */
+export type RangeMonthCount = 1 | 2;
+/**
+ * The first month a range calendar shows so that `focusDate` is in view.
+ * A view that already holds it stays; a focus date before it becomes the
+ * first month, and one after it the last. With no view yet, the focus
+ * date's month is the last one shown, but never a month before `min`'s.
+ */
+export declare function firstShownMonth(focusDate: string, count: RangeMonthCount, shown: CalendarMonth | undefined, min: string | undefined): CalendarMonth;
+/** The months shown from `first`, in order. */
+export declare function shownMonths(first: CalendarMonth, count: RangeMonthCount): CalendarMonth[];

package/dist/date-range-view.js

@@ -0,0 +1,29 @@
+import { monthOf, monthsBetween, shiftMonth, } from './calendar-month.js';
+/**
+ * The first month a range calendar shows so that `focusDate` is in view.
+ * A view that already holds it stays; a focus date before it becomes the
+ * first month, and one after it the last. With no view yet, the focus
+ * date's month is the last one shown, but never a month before `min`'s.
+ */
+export function firstShownMonth(focusDate, count, shown, min) {
+    const focus = monthOf(focusDate);
+    if (shown !== undefined) {
+        const offset = monthsBetween(shown, focus);
+        if (offset >= 0 && offset < count)
+            return shown;
+        if (offset < 0)
+            return focus;
+        return shiftMonth(focus, 1 - count);
+    }
+    const first = shiftMonth(focus, 1 - count);
+    // No month before 0001 exists: the first year's January leads.
+    if (first.year < 1)
+        return focus;
+    if (min !== undefined && monthsBetween(first, monthOf(min)) > 0)
+        return monthOf(min);
+    return first;
+}
+/** The months shown from `first`, in order. */
+export function shownMonths(first, count) {
+    return Array.from({ length: count }, (_, index) => shiftMonth(first, index));
+}

package/dist/date-range-words.d.ts

@@ -0,0 +1,11 @@
+import { type DateOnlyRange } from './date-only.js';
+/**
+ * A range as the button shows it, the locale sharing what both ends have,
+ * such as "Oct 6 – 12, 2026", or "Oct 6, 2026" for one day.
+ */
+export declare function formatRangeShort(range: DateOnlyRange, locale: string): string;
+/**
+ * A range with its weekdays, as the calendar states the one being picked,
+ * such as "Tue, Oct 6 – Mon, Oct 12, 2026".
+ */
+export declare function formatRangeLong(range: DateOnlyRange, locale: string): string;

package/dist/date-range-words.js

@@ -0,0 +1,40 @@
+import { dateFormatter, formatterDate } from './date-formatters.js';
+import { parseDateOnly } from './date-only.js';
+const shortRange = {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+};
+const longRange = {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+};
+function formatRange(range, locale, options) {
+    const start = parseDateOnly(range.start);
+    const end = parseDateOnly(range.end);
+    if (!start || !end)
+        return '';
+    const format = dateFormatter(locale, options);
+    // Browsers before formatRange (Safari 14.0) write both ends in full.
+    if (typeof format.formatRange !== 'function')
+        return range.start === range.end
+            ? format.format(formatterDate(start))
+            : `${format.format(formatterDate(start))} – ${format.format(formatterDate(end))}`;
+    return format.formatRange(formatterDate(start), formatterDate(end));
+}
+/**
+ * A range as the button shows it, the locale sharing what both ends have,
+ * such as "Oct 6 – 12, 2026", or "Oct 6, 2026" for one day.
+ */
+export function formatRangeShort(range, locale) {
+    return formatRange(range, locale, shortRange);
+}
+/**
+ * A range with its weekdays, as the calendar states the one being picked,
+ * such as "Tue, Oct 6 – Mon, Oct 12, 2026".
+ */
+export function formatRangeLong(range, locale) {
+    return formatRange(range, locale, longRange);
+}

package/dist/index.d.ts

@@ -2,9 +2,13 @@ export { ActionMenu, type ActionMenuAlign, type ActionMenuItem, type ActionMenuP
 export { ActionBar, type ActionBarProps, type ActionBarSummary, type ActionBarSummaryTone, } from './components/ActionBar.js';
 export { Accordion } from './components/Accordion.js';
 export type { AccordionProps, AccordionSize } from './components/Accordion.js';
-export { Switch, type SwitchProps } from './components/Switch.js';
-export { DateField, type DateFieldLabels, type DateFieldProps, type WeekStart, } from './components/DateField.js';
+export { Switch, switchCheckedTones, switchLayouts, type SwitchCheckedTone, type SwitchLayout, type SwitchProps, } from './components/Switch.js';
+export { DateField, dateFieldEntries, type DateFieldEntry, type DateFieldLabels, type DateFieldProps, type WeekStart, } from './components/DateField.js';
 export { CalendarButton, type CalendarButtonLabels, type CalendarButtonProps, type CalendarButtonRange, } from './components/CalendarButton.js';
+export { DateRangeButton, type DateRangeButtonLabels, type DateRangeButtonProps, type DateRangeButtonValue, type DateRangePreset, } from './components/DateRangeButton.js';
+export { ListGroup, type ListGroupProps } from './components/ListGroup.js';
+export { ListRow, type ListRowProps } from './components/ListRow.js';
+export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, type ListGroupMaxHeight, type ListGroupVariant, type ListRowTitleAppearance, type ListRowTone, type ListRowValueTone, } from './list-options.js';
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
 export { GlyphTile, glyphTileSizes, type GlyphTileHue, type GlyphTileProps, type GlyphTileSize, } from './components/GlyphTile.js';
@@ -15,7 +19,7 @@ export { InfoTip, type InfoTipProps } from './components/InfoTip.js';
 export { RadioGroup, type RadioGroupOption, type RadioGroupProps, } from './components/RadioGroup.js';
 export { AppHeader, appHeaderAppearances, type AppHeaderAppearance, type AppHeaderProps, } from './components/AppHeader.js';
 export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, badgeSizes, badgeTones, } from './components/Badge.js';
-export { BarChart, type BarChartItem, type BarChartProps, type BarChartTone, barChartTones, } from './components/BarChart.js';
+export { BarChart, barChartAppearances, type BarChartAppearance, type BarChartItem, type BarChartProps, type BarChartTone, barChartTones, } from './components/BarChart.js';
 export { ChartLegend, type ChartFillTone, type ChartLegendItem, type ChartLegendProps, type ChartLegendSwatch, type ChartStrokeTone, type ChartTone, chartFillTones, chartLegendSwatches, chartStrokeTones, } from './components/ChartLegend.js';
 export { ColumnChart, type ColumnChartCallout, type ColumnChartLine, type ColumnChartMode, type ColumnChartProps, type ColumnChartSeries, columnChartModes, } from './components/ColumnChart.js';
 export { LineChart, type LineChartCurve, type LineChartMarker, type LineChartPeriod, type LineChartPoint, type LineChartProps, lineChartCurves, } from './components/LineChart.js';
@@ -28,11 +32,12 @@ export { boxLinkAppearances } from './css/css-box-link.js';
 export { ButtonGroup, buttonGroupAppearances, type ButtonGroupAppearance, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
 export { Dialog, dialogAppearances, dialogSizes, type DialogAppearance, type DialogProps, type DialogRole, type DialogSize, type DialogTitleLevel, } from './components/Dialog.js';
-export { StatTile, type StatTileEmphasis, type StatTileProps, type StatTileTone, statTileTones, } from './components/StatTile.js';
+export { StatTile, type StatTileAppearance, statTileAppearances, type StatTileEmphasis, type StatTileProps, type StatTileTone, statTileTones, } from './components/StatTile.js';
 export { TabPanel, type TabItem, type TabPanelProps, Tabs, type TabsProps, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, type ToastAction, type ToastPlacement, } from './components/Toast.js';
 export type { ToastProps, ToastTone } from './components/Toast.js';
 export { Field, fieldVariants, type FieldProps, type FieldSize, type FieldVariant, } from './components/Field.js';
+export { fieldWidths, type FieldWidth } from './css/css-field-width.js';
 export { requiredMarks, type RequiredMark, } from './components/FieldLabelText.js';
 export { Step, type StepHeadingLevel, type StepProps, Steps, type StepsLabels, type StepsProps, type StepStatus, } from './components/Steps.js';
 export { Stepper, stepperLimitAppearances, type StepperLimitAppearance, type StepperProps, type StepperWidth, } from './components/Stepper.js';
@@ -40,8 +45,9 @@ export { Inline, type InlineProps } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export type { SplitProps } from './components/Split.js';
 export { Nav, navAppearances, type NavAppearance, type NavProps, } from './components/Nav.js';
+export { NavCount, type NavCountProps } from './components/NavCount.js';
 export { SectionNav, sectionNavAppearances, type SectionNavAppearance, type SectionNavItem, type SectionNavProps, } from './components/SectionNav.js';
-export { SegmentedControl, type SegmentedControlProps, type SegmentedControlVariant, type SegmentedItem, } from './components/SegmentedControl.js';
+export { SegmentedControl, type SegmentedControlProps, type SegmentedControlVariant, segmentedSizes, type SegmentedSize, type SegmentedItem, } from './components/SegmentedControl.js';
 export { Combobox, comboboxSizes, type ComboboxAction, type ComboboxBadge, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type ComboboxSize, } from './components/Combobox.js';
 export { Select } from './components/Select.js';
 export type { SelectAction, SelectOption, SelectProps, SelectWidth, } from './components/Select.js';
@@ -50,6 +56,7 @@ export { Stack, type Align, type Justify, type StackProps, } from './components/
 export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, tableCellTones, tableRowVariants, type TableBodyProps, type TableCellProps, type TableCellTone, type TableColumnWidth, type TableDensity, type TableFooterProps, type TableHeaderProps, type TableLayout, type TableMaxHeight, type TableProps, type TableRowProps, type TableRowVariant, type TableSort, type TableStickyHeader, type TableVerticalAlign, } from './components/Table.js';
 export { Text, type TextAlign, type TextElement, type TextProps, } from './components/Text.js';
 export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';
+export { themeCanvases, type ThemeCanvas } from './css/css-canvas-grouped.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
 export type { VisibilityProps } from './visibility-classes.js';
 export type { Breakpoint, BreakpointDirection, VisibilityBreakpoint, } from './css/breakpoints.js';
@@ -62,7 +69,7 @@ export { Grid } from './components/Grid.js';
 export type { GridColumns, GridProps } from './components/Grid.js';
 export type { GridColumnSpan } from './css/css-grid-span.js';
 export type { ColumnSpanProps } from './column-span-classes.js';
-export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationTotalEmphases, } from './components/DenominationGrid.js';
-export type { DenominationCellToneAppearance, DenominationGridColumn, DenominationGridEntry, DenominationGridFrame, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationGridValueRow, DenominationLabelAppearance, DenominationLabelWidth, DenominationTotalEmphasis, } from './components/DenominationGrid.js';
-export { FilterChips } from './components/FilterChips.js';
-export type { FilterChipOption, FilterChipsProps, } from './components/FilterChips.js';
+export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationNegativeAppearances, denominationTotalEmphases, denominationTransposeBreakpoints, } from './components/DenominationGrid.js';
+export type { DenominationCellToneAppearance, DenominationGridColumn, DenominationGridEntry, DenominationGridFrame, DenominationGridLayout, DenominationGridNegativeAppearance, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationGridValueRow, DenominationLabelAppearance, DenominationLabelWidth, DenominationTotalEmphasis, DenominationTransposeBreakpoint, } from './components/DenominationGrid.js';
+export { FilterChips, filterChipCountAppearances, filterChipsOverflows, } from './components/FilterChips.js';
+export type { FilterChipCountAppearance, FilterChipOption, FilterChipsOverflow, FilterChipsProps, } from './components/FilterChips.js';

package/dist/index.js

@@ -1,9 +1,13 @@
 export { ActionMenu, actionMenuTriggerAppearances, } from './components/ActionMenu.js';
 export { ActionBar, } from './components/ActionBar.js';
 export { Accordion } from './components/Accordion.js';
-export { Switch } from './components/Switch.js';
-export { DateField, } from './components/DateField.js';
+export { Switch, switchCheckedTones, switchLayouts, } from './components/Switch.js';
+export { DateField, dateFieldEntries, } from './components/DateField.js';
 export { CalendarButton, } from './components/CalendarButton.js';
+export { DateRangeButton, } from './components/DateRangeButton.js';
+export { ListGroup } from './components/ListGroup.js';
+export { ListRow } from './components/ListRow.js';
+export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, } from './list-options.js';
 export { Checkbox } from './components/Checkbox.js';
 export { Spinner, } from './components/Spinner.js';
 export { GlyphTile, glyphTileSizes, } from './components/GlyphTile.js';
@@ -14,7 +18,7 @@ export { InfoTip } from './components/InfoTip.js';
 export { RadioGroup, } from './components/RadioGroup.js';
 export { AppHeader, appHeaderAppearances, } from './components/AppHeader.js';
 export { Badge, badgeSizes, badgeTones, } from './components/Badge.js';
-export { BarChart, barChartTones, } from './components/BarChart.js';
+export { BarChart, barChartAppearances, barChartTones, } from './components/BarChart.js';
 export { ChartLegend, chartFillTones, chartLegendSwatches, chartStrokeTones, } from './components/ChartLegend.js';
 export { ColumnChart, columnChartModes, } from './components/ColumnChart.js';
 export { LineChart, lineChartCurves, } from './components/LineChart.js';
@@ -27,18 +31,20 @@ export { boxLinkAppearances } from './css/css-box-link.js';
 export { ButtonGroup, buttonGroupAppearances, } from './components/ButtonGroup.js';
 export { Card } from './components/Card.js';
 export { Dialog, dialogAppearances, dialogSizes, } from './components/Dialog.js';
-export { StatTile, statTileTones, } from './components/StatTile.js';
+export { StatTile, statTileAppearances, statTileTones, } from './components/StatTile.js';
 export { TabPanel, Tabs, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, } from './components/Toast.js';
 export { Field, fieldVariants, } from './components/Field.js';
+export { fieldWidths } from './css/css-field-width.js';
 export { requiredMarks, } from './components/FieldLabelText.js';
 export { Step, Steps, } from './components/Steps.js';
 export { Stepper, stepperLimitAppearances, } from './components/Stepper.js';
 export { Inline } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export { Nav, navAppearances, } from './components/Nav.js';
+export { NavCount } from './components/NavCount.js';
 export { SectionNav, sectionNavAppearances, } from './components/SectionNav.js';
-export { SegmentedControl, } from './components/SegmentedControl.js';
+export { SegmentedControl, segmentedSizes, } from './components/SegmentedControl.js';
 export { Combobox, comboboxSizes, } from './components/Combobox.js';
 export { Select } from './components/Select.js';
 export { MultiSelect, } from './components/MultiSelect.js';
@@ -46,10 +52,11 @@ export { Stack, } from './components/Stack.js';
 export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, tableCellTones, tableRowVariants, } from './components/Table.js';
 export { Text, } from './components/Text.js';
 export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';
+export { themeCanvases } from './css/css-canvas-grouped.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
 export { breakpointQuery } from './css/breakpoints.js';
 export { Separator } from './components/Separator.js';
 export { DescriptionItem, DescriptionList, } from './components/DescriptionList.js';
 export { Grid } from './components/Grid.js';
-export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationTotalEmphases, } from './components/DenominationGrid.js';
-export { FilterChips } from './components/FilterChips.js';
+export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationNegativeAppearances, denominationTotalEmphases, denominationTransposeBreakpoints, } from './components/DenominationGrid.js';
+export { FilterChips, filterChipCountAppearances, filterChipsOverflows, } from './components/FilterChips.js';