@scalewing/react 1.39.0 → 1.41.0

package/dist/components/field/field-checks.d.ts

@@ -0,0 +1,34 @@
+import { type KeyboardEvent } from 'react';
+import type { FieldProps } from '../Field.js';
+export declare const fieldVariants: readonly ["outlined", "search"];
+export type FieldVariant = (typeof fieldVariants)[number];
+/** The props Field reads from, and sets on, its native control child. */
+export type FieldControlProps = {
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    'aria-labelledby'?: string;
+    id?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    type?: string;
+    value?: unknown;
+    enterKeyHint?: string;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+};
+/**
+ * Fails closed on a Field it cannot draw: an unknown variant or width,
+ * search props on an outlined field, and a search field without its clear
+ * button, its handler or one controlled native input.
+ */
+export declare function assertFieldProps(props: FieldProps, child: unknown): void;
+/**
+ * `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.
+ */
+export declare function passesInvalid(props: FieldProps): boolean;

package/dist/components/field/field-checks.js

@@ -0,0 +1,42 @@
+import { isValidElement } from 'react';
+import { assertFieldWidth } from '../../css/css-field-width.js';
+export const fieldVariants = ['outlined', 'search'];
+/**
+ * Fails closed on a Field it cannot draw: an unknown variant or width,
+ * search props on an outlined field, and a search field without its clear
+ * button, its handler or one controlled native input.
+ */
+export function assertFieldProps(props, child) {
+    const { variant = 'outlined' } = props;
+    assertFieldWidth(props.width);
+    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.
+ */
+export function passesInvalid(props) {
+    return props.invalid !== undefined || props.changed !== undefined;
+}

package/dist/components/filter-chips/FilterChip.d.ts

@@ -0,0 +1,16 @@
+import { type FilterChipCountAppearance, type FilterChipOption } from './options.js';
+type FilterChipProps = {
+    option: FilterChipOption;
+    /** The group's shared input name. */
+    name: string;
+    type: 'radio' | 'checkbox';
+    checked: boolean;
+    required: boolean;
+    /** Whether this chip is a Tab stop: every checkbox, and one radio. */
+    tabStopHere: boolean;
+    countAppearance: FilterChipCountAppearance;
+    onCheckedChange: (checked: boolean) => void;
+};
+/** One chip: a native radio or checkbox under its face. */
+export declare function FilterChip({ option, name, type, checked, required, tabStopHere, countAppearance, onCheckedChange, }: FilterChipProps): import("react").JSX.Element;
+export {};

package/dist/components/filter-chips/FilterChip.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { tabStop } from '../../tab-stop.js';
+/**
+ * A chip's count: a muted figure after a space, or inline in the chip's
+ * own words after a middle dot hidden from assistive technology, so the
+ * name reads "Open 3" either way.
+ */
+function ChipCount({ count, appearance, }) {
+    if (appearance === 'inline')
+        return (_jsxs(_Fragment, { children: [' ', _jsx("span", { "aria-hidden": "true", children: "\u00B7" }), ' ', _jsx("span", { className: "sw-filter-chip-count-inline", children: count })] }));
+    return (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "sw-filter-chip-count", children: count })] }));
+}
+/** One chip: a native radio or checkbox under its face. */
+export function FilterChip({ option, name, type, checked, required, tabStopHere, countAppearance, onCheckedChange, }) {
+    return (_jsxs("label", { className: cx('sw-filter-chip', option.count === 0 && 'sw-filter-chip-quiet'), children: [_jsx("input", { checked: checked, className: "sw-filter-chip-input", disabled: option.disabled, name: name, onChange: (event) => {
+                    if (!option.disabled)
+                        onCheckedChange(event.currentTarget.checked);
+                }, required: required, tabIndex: tabStopHere ? tabStop : undefined, type: type, value: option.value }), _jsxs("span", { className: "sw-filter-chip-face", children: [option.label, option.count === undefined ? null : (_jsx(ChipCount, { appearance: countAppearance, count: option.count }))] })] }));
+}

package/dist/components/filter-chips/options.d.ts

@@ -0,0 +1,75 @@
+import { type RequiredMark } from '../FieldLabelText.js';
+export type FilterChipOption = {
+    value: string;
+    label: string;
+    count?: number;
+    disabled?: boolean;
+};
+/**
+ * How a chip's count is drawn: `figure` (the default), a muted tabular
+ * figure after a space; `inline`, the label's own words and type, after a
+ * middle dot ("Open · 3"), the dot hidden from assistive technology.
+ */
+export declare const filterChipCountAppearances: readonly ["figure", "inline"];
+export type FilterChipCountAppearance = (typeof filterChipCountAppearances)[number];
+/**
+ * What the chips do when they do not fit their row: `wrap` (the default)
+ * onto more rows, or `scroll` sideways on one row.
+ */
+export declare const filterChipsOverflows: readonly ["wrap", "scroll"];
+export type FilterChipsOverflow = (typeof filterChipsOverflows)[number];
+/** One chosen chip, a radio in a group. */
+type SingleChoice = {
+    multiple?: false;
+    /** The chosen option's value, or `''` while nothing is chosen yet. */
+    value: string;
+    onChange: (value: string) => void;
+    /**
+     * 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;
+};
+/**
+ * Several chips on at once, each a checkbox, such as the days of a week.
+ * Nothing makes a checkbox group required, so `required` is refused: say
+ * what is needed in `error`.
+ */
+type MultipleChoice = {
+    multiple: true;
+    /** The chosen options' values, in any order; empty for none. */
+    value: readonly string[];
+    /** Every chosen value, in the options' order. */
+    onChange: (values: string[]) => void;
+    required?: false;
+};
+type FilterChipsChoice = SingleChoice | MultipleChoice;
+export type FilterChipsProps = FilterChipsChoice & {
+    label: string;
+    options: readonly FilterChipOption[];
+    /**
+     * Keeps the label as the group's name but does not draw it, for chips
+     * whose meaning their words and place already show.
+     */
+    labelVisuallyHidden?: 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;
+    countAppearance?: FilterChipCountAppearance;
+    overflow?: FilterChipsOverflow;
+    /**
+     * 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 {};

package/dist/components/filter-chips/options.js

@@ -0,0 +1,11 @@
+/**
+ * How a chip's count is drawn: `figure` (the default), a muted tabular
+ * figure after a space; `inline`, the label's own words and type, after a
+ * middle dot ("Open · 3"), the dot hidden from assistive technology.
+ */
+export const filterChipCountAppearances = ['figure', 'inline'];
+/**
+ * What the chips do when they do not fit their row: `wrap` (the default)
+ * onto more rows, or `scroll` sideways on one row.
+ */
+export const filterChipsOverflows = ['wrap', 'scroll'];

package/dist/components/filter-chips/validate.d.ts

@@ -0,0 +1,9 @@
+import { type FilterChipsProps } from './options.js';
+/**
+ * Fails closed on chips it cannot draw: an empty label, no options, blank
+ * or repeated values, a chosen value that is no option, a count that is
+ * not a whole number from 0, an unknown count appearance or overflow, and
+ * a multiple choice asked to be required or given a value that is not a
+ * list.
+ */
+export declare function assertFilterChips(props: FilterChipsProps): void;

package/dist/components/filter-chips/validate.js

@@ -0,0 +1,48 @@
+import { assertRequiredMark } from '../FieldLabelText.js';
+import { filterChipCountAppearances, filterChipsOverflows, } from './options.js';
+function isCount(count) {
+    return count === undefined || (Number.isInteger(count) && count >= 0);
+}
+function chosenValues(props) {
+    if (props.multiple)
+        return props.value;
+    return props.value === '' ? [] : [props.value];
+}
+/**
+ * Fails closed on chips it cannot draw: an empty label, no options, blank
+ * or repeated values, a chosen value that is no option, a count that is
+ * not a whole number from 0, an unknown count appearance or overflow, and
+ * a multiple choice asked to be required or given a value that is not a
+ * list.
+ */
+export function assertFilterChips(props) {
+    const { label, options } = props;
+    if (!label.trim())
+        throw new RangeError('label must not be empty');
+    assertRequiredMark(props.requiredMark ?? 'visible');
+    if (options.length === 0 ||
+        options.some((option) => !option.value.trim() || !option.label.trim()))
+        throw new RangeError('options must have nonempty values and labels');
+    const values = options.map((option) => option.value);
+    if (new Set(values).size !== values.length)
+        throw new RangeError('options must have unique values');
+    if (props.multiple) {
+        if (!Array.isArray(props.value))
+            throw new RangeError('a multiple FilterChips value must be a list');
+        if (props.required)
+            throw new RangeError('a multiple FilterChips cannot be required; say what is needed in error');
+    }
+    const chosen = chosenValues(props);
+    if (chosen.some((value) => !values.includes(value)))
+        throw new RangeError(props.multiple
+            ? 'every value must match an option'
+            : '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 countAppearance = props.countAppearance ?? 'figure';
+    if (!filterChipCountAppearances.includes(countAppearance))
+        throw new RangeError(`Unknown FilterChips countAppearance: ${String(countAppearance)}`);
+    const overflow = props.overflow ?? 'wrap';
+    if (!filterChipsOverflows.includes(overflow))
+        throw new RangeError(`Unknown FilterChips overflow: ${String(overflow)}`);
+}

package/dist/components/link-press.d.ts

@@ -0,0 +1,7 @@
+import { type MouseEvent } from 'react';
+/**
+ * Whether a press on a link is a plain one a client router may take: the
+ * primary button, no modifier key (which opens a tab or a window) and not
+ * already handled. Shared by SectionNav and ListRow.
+ */
+export declare function plainPress(event: MouseEvent<HTMLAnchorElement>): boolean;

package/dist/components/link-press.js

@@ -0,0 +1,13 @@
+/**
+ * Whether a press on a link is a plain one a client router may take: the
+ * primary button, no modifier key (which opens a tab or a window) and not
+ * already handled. Shared by SectionNav and ListRow.
+ */
+export function plainPress(event) {
+    return (event.button === 0 &&
+        !event.defaultPrevented &&
+        !event.metaKey &&
+        !event.ctrlKey &&
+        !event.shiftKey &&
+        !event.altKey);
+}

package/dist/components/list/ListRowAccessoryMark.d.ts

@@ -0,0 +1,5 @@
+import { type ListRowAccessory } from '../../list-options.js';
+/** A row's chevron or check: control chrome drawn by the generated CSS. */
+export declare function ListRowAccessoryMark({ kind }: {
+    kind: ListRowAccessory;
+}): import("react").JSX.Element | null;

package/dist/components/list/ListRowAccessoryMark.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** A row's chevron or check: control chrome drawn by the generated CSS. */
+export function ListRowAccessoryMark({ kind }) {
+    if (kind === 'none')
+        return null;
+    return (_jsx("span", { "aria-hidden": "true", className: kind === 'check' ? 'sw-list-row-check' : 'sw-list-row-chevron' }));
+}

package/dist/components/list/ListRowContent.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import { type BadgeTone } from '../../css/css-data.js';
+import { type ListRowAccessory, type ListRowTitleAppearance, type ListRowTone, type ListRowValueTone } from '../../list-options.js';
+export type ListRowContentProps = {
+    /** Prefixes the ids that name and describe a pressable row. */
+    id: string;
+    title: string;
+    detail?: string;
+    value?: string;
+    valueDetail?: string;
+    valueTone?: ListRowValueTone;
+    valueBadge?: BadgeTone;
+    leading?: ReactNode;
+    tone: ListRowTone;
+    titleAppearance: ListRowTitleAppearance;
+    accessory: ListRowAccessory;
+};
+/**
+ * A list row's parts in reading order: the hidden leading mark, the title
+ * over its detail, the value over its detail, then the chevron or check.
+ */
+export declare function ListRowContent({ id, title, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, }: ListRowContentProps): import("react").JSX.Element;

package/dist/components/list/ListRowContent.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { Badge } from '../Badge.js';
+import { ListRowAccessoryMark } from './ListRowAccessoryMark.js';
+/**
+ * A list row's parts in reading order: the hidden leading mark, the title
+ * over its detail, the value over its detail, then the chevron or check.
+ */
+export function ListRowContent({ id, title, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, }) {
+    return (_jsxs(_Fragment, { children: [leading === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-leading", children: leading })), _jsxs("span", { className: "sw-list-row-label", children: [_jsx("span", { className: cx('sw-list-row-title', titleAppearance === 'plain' && 'sw-list-row-title-plain', tone === 'danger' && 'sw-list-row-title-danger'), id: `${id}-title`, children: title }), detail ? (_jsx("span", { className: "sw-list-row-detail", id: `${id}-detail`, children: detail })) : null] }), value === undefined ? null : (_jsxs("span", { className: "sw-list-row-end", children: [_jsx("span", { className: cx('sw-list-row-value', valueTone && `sw-list-row-value-${valueTone}`), id: `${id}-value`, children: valueBadge ? _jsx(Badge, { tone: valueBadge, children: value }) : value }), valueDetail ? (_jsx("span", { className: "sw-list-row-value-detail", id: `${id}-value-detail`, children: valueDetail })) : null] })), _jsx(ListRowAccessoryMark, { kind: accessory })] }));
+}

package/dist/components/list/list-row-container.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The element a ListRow renders as: an `li` in a ListGroup's list, a `div`
+ * anywhere else, such as a ListGroup's `footer`.
+ */
+export declare const ListRowContainer: import("react").Context<"div" | "li">;

package/dist/components/list/list-row-container.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+/**
+ * The element a ListRow renders as: an `li` in a ListGroup's list, a `div`
+ * anywhere else, such as a ListGroup's `footer`.
+ */
+export const ListRowContainer = createContext('div');

package/dist/components/use-media-query.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Whether a media query matches now, following its changes. Where there is
+ * no `matchMedia` (a server render, jsdom) it reads as `fallback`.
+ */
+export declare function useMediaQuery(query: string, fallback: boolean): boolean;

package/dist/components/use-media-query.js

@@ -0,0 +1,18 @@
+import { useCallback, useSyncExternalStore } from 'react';
+function canMatch() {
+    return (typeof window !== 'undefined' && typeof window.matchMedia === 'function');
+}
+/**
+ * Whether a media query matches now, following its changes. Where there is
+ * no `matchMedia` (a server render, jsdom) it reads as `fallback`.
+ */
+export function useMediaQuery(query, fallback) {
+    const subscribe = useCallback((onChange) => {
+        if (!canMatch())
+            return () => undefined;
+        const list = window.matchMedia(query);
+        list.addEventListener('change', onChange);
+        return () => list.removeEventListener('change', onChange);
+    }, [query]);
+    return useSyncExternalStore(subscribe, () => (canMatch() ? window.matchMedia(query).matches : fallback), () => fallback);
+}

package/dist/css/chart-tones.d.ts

@@ -46,6 +46,8 @@ export declare const dangerFillShare = 0.4;
 export declare const chartFillMixes: Record<ChartFillTone, ChartColorMix>;
 /** Each stroke tone's colour: a semantic colour, or muted for neutral. */
 export declare const chartStrokeColors: Record<ChartStrokeTone, ChartColorSource>;
+/** A stroke tone's colour as CSS, such as a line's or a bar's. */
+export declare function chartStroke(tone: ChartStrokeTone): string;
 /**
  * How much of a line's stroke the area under it takes, over transparency:
  * a quiet tint behind the line, decorative (the line carries the values).

package/dist/css/chart-tones.js

@@ -70,6 +70,10 @@ export const chartStrokeColors = {
     danger: { semantic: 'danger' },
     neutral: { semantic: 'muted' },
 };
+/** A stroke tone's colour as CSS, such as a line's or a bar's. */
+export function chartStroke(tone) {
+    return sourceProperty(chartStrokeColors[tone]);
+}
 /**
  * How much of a line's stroke the area under it takes, over transparency:
  * a quiet tint behind the line, decorative (the line carries the values).
@@ -115,7 +119,7 @@ function toneDeclarations(tone) {
     if (isOneOf(chartFillTones, tone))
         declarations.push(`--sw-chart-fill: ${chartFill(tone)};`);
     if (isOneOf(chartStrokeTones, tone))
-        declarations.push(`--sw-chart-stroke: ${sourceProperty(chartStrokeColors[tone])};`);
+        declarations.push(`--sw-chart-stroke: ${chartStroke(tone)};`);
     if (isOneOf(chartInkTones, tone))
         declarations.push(`--sw-chart-ink: ${chartColorMix(chartInkMixes[tone])};`);
     return declarations.join(' ');

package/dist/css/chevron.d.ts

@@ -6,3 +6,9 @@
 export declare function chevronStrokeIn(color: string): string;
 /** The muted chevron Accordion, Select and the menus share. */
 export declare const chevronStroke: string;
+/**
+ * A check's two strokes in `color`: the bottom and right borders of a box
+ * the caller sizes and turns 45°, so forced colours keep them. Checkbox,
+ * Steps and ListRow share it.
+ */
+export declare function checkStrokeIn(color: string): string;

package/dist/css/chevron.js

@@ -1,3 +1,8 @@
+/*
+ * The strokes of Scalewing's private control chrome, drawn with borders so
+ * forced colours keep them: the chevron (Accordion, Select, the menus,
+ * Pagination, ListRow) and the check (Checkbox, Steps, ListRow).
+ */
 /**
  * A stroked chevron in `color`: two sides of a `space-2` square (its
  * bottom and right borders, so forced colours keep it), turned by each
@@ -12,3 +17,12 @@ export function chevronStrokeIn(color) {
 }
 /** The muted chevron Accordion, Select and the menus share. */
 export const chevronStroke = chevronStrokeIn('var(--sw-color-muted)');
+/**
+ * A check's two strokes in `color`: the bottom and right borders of a box
+ * the caller sizes and turns 45°, so forced colours keep them. Checkbox,
+ * Steps and ListRow share it.
+ */
+export function checkStrokeIn(color) {
+    return `border-bottom: 2px solid ${color};
+  border-right: 2px solid ${color};`;
+}

package/dist/css/css-bar-chart.d.ts

@@ -1,9 +1,24 @@
+import { type ChartStrokeTone } from './chart-tones.js';
 /**
  * The meanings a bar's fill can take in place of its sign's default (the
  * accent, or danger for a negative value), such as a diverging chart whose
  * overage is a warning and whose shortage is danger.
  */
-export declare const barChartTones: readonly ["accent", "success", "warning", "danger"];
-export type BarChartTone = (typeof barChartTones)[number];
+export declare const barChartTones: readonly ["accent", "success", "warning", "danger", "neutral"];
+export type BarChartTone = ChartStrokeTone;
+/**
+ * A tone's colour: the charts' stroke colour of that tone (`chart-tones.ts`),
+ * a semantic colour at 3:1 or more, the muted grey for `neutral`, a bar
+ * that is counted but not the point (the other days beside the busiest
+ * ones). Not the lighter fill mix a column takes, which is 1.5:1.
+ */
+export declare function barChartToneColor(tone: BarChartTone): string;
+/**
+ * `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.
+ */
+export declare const barChartAppearances: readonly ["track", "bare"];
+export type BarChartAppearance = (typeof barChartAppearances)[number];
 export declare function cssBarChartClasses(): string;
 export declare function barChartClassCatalog(): string[];

package/dist/css/css-bar-chart.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { chartStroke, chartStrokeTones, } from './chart-tones.js';
 const caption = typographyVariants.caption;
 const data = typographyVariants.data;
 /**
@@ -6,12 +7,22 @@ const data = typographyVariants.data;
  * accent, or danger for a negative value), such as a diverging chart whose
  * overage is a warning and whose shortage is danger.
  */
-export const barChartTones = [
-    'accent',
-    'success',
-    'warning',
-    'danger',
-];
+export const barChartTones = chartStrokeTones;
+/**
+ * A tone's colour: the charts' stroke colour of that tone (`chart-tones.ts`),
+ * a semantic colour at 3:1 or more, the muted grey for `neutral`, a bar
+ * that is counted but not the point (the other days beside the busiest
+ * ones). Not the lighter fill mix a column takes, which is 1.5:1.
+ */
+export function barChartToneColor(tone) {
+    return chartStroke(tone);
+}
+/**
+ * `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.
+ */
+export const barChartAppearances = ['track', 'bare'];
 /*
  * A tone's rule follows the negative fill's, at the same specificity, so a
  * toned negative bar keeps its diverging geometry and takes the tone's
@@ -22,7 +33,7 @@ export const barChartTones = [
  */
 function toneRules() {
     return barChartTones
-        .map((tone) => `.sw-bar-chart-fill-${tone} { background: var(--sw-color-${tone}); }`)
+        .map((tone) => `.sw-bar-chart-fill-${tone} { background: ${barChartToneColor(tone)}; }`)
         .join('\n');
 }
 /*
@@ -66,6 +77,23 @@ function divergingRules() {
   .sw-bar-chart-diverging .sw-bar-chart-track::before { background: CanvasText; }
 }`;
 }
+/*
+ * A bare chart draws no track: the bar sits on the surface around it, the
+ * track's room kept so the labels and values line up as before (in forced
+ * colours its edge is the canvas colour, as forcing replaces a transparent
+ * one). A diverging bare chart keeps its zero hairline.
+ */
+function bareRules() {
+    return `.sw-bar-chart-bare .sw-bar-chart-track {
+  background: transparent;
+  border-color: transparent;
+}
+
+/* Forced colours replace a transparent edge; the canvas colour hides it. */
+@media (forced-colors: active) {
+  .sw-bar-chart-bare .sw-bar-chart-track { border-color: Canvas; }
+}`;
+}
 export function cssBarChartClasses() {
     return `.sw-bar-chart {
   display: grid;
@@ -151,6 +179,8 @@ ${toneRules()}
 
 ${divergingRules()}
 
+${bareRules()}
+
 @media (forced-colors: active) {
   .sw-bar-chart-fill { background: CanvasText; }
 }`;
@@ -169,5 +199,6 @@ export function barChartClassCatalog() {
         'sw-bar-chart-value',
         'sw-bar-chart-axis-track',
         'sw-bar-chart-diverging',
+        'sw-bar-chart-bare',
     ];
 }

package/dist/css/css-button-group-attached.d.ts

@@ -1,2 +1,5 @@
+import { type Breakpoint } from './breakpoints.js';
+/** The class that stretches an attached group below a breakpoint. */
+export declare function buttonGroupFullWidthClass(breakpoint: Breakpoint): string;
 export declare function cssButtonGroupAttachedClasses(): string;
 export declare function buttonGroupAttachedClassCatalog(): string[];

package/dist/css/css-button-group-attached.js

@@ -1,6 +1,10 @@
 import { breakpointQuery } from './breakpoints.js';
 import { buttonGroupTrackClassCatalog, cssButtonGroupTrackClasses, } from './css-button-group-track.js';
 import { joinedZIndex } from './stacking.js';
+/** The class that stretches an attached group below a breakpoint. */
+export function buttonGroupFullWidthClass(breakpoint) {
+    return `sw-button-group-full-below-${breakpoint}`;
+}
 /*
  * An attached ButtonGroup is one joined control, such as Previous, Today
  * and Next: its direct Button children side by side with no gap and one
@@ -13,6 +17,13 @@ import { joinedZIndex } from './stacking.js';
  * divider in its own text colour at low strength, so a joined row of them
  * still reads as separate buttons; forced colours draw every border.
  *
+ * The buttons are found by type, not by place, so an open calendar a
+ * button renders beside itself (CalendarButton, DateRangeButton) does not
+ * cost the next button its divider or the last one its rounded corners.
+ *
+ * With `fullWidthBelow`, below that breakpoint the group fills its column
+ * and its buttons share the width equally.
+ *
  * The group is its own stacking context: a pressed button's ring paints
  * over its neighbours and the focused button's standard outer ring over
  * both, so neither is covered by the next button.
@@ -33,21 +44,21 @@ ${group} > .sw-button {
   border-radius: 0;
 }
 
-${group} > .sw-button + .sw-button {
+${group} > .sw-button ~ .sw-button {
   margin-inline-start: -1px;
 }
 
-${group} > .sw-button:first-child {
+${group} > .sw-button:first-of-type {
   border-end-start-radius: var(--sw-radius-sm);
   border-start-start-radius: var(--sw-radius-sm);
 }
 
-${group} > .sw-button:last-child {
+${group} > .sw-button:last-of-type {
   border-end-end-radius: var(--sw-radius-sm);
   border-start-end-radius: var(--sw-radius-sm);
 }
 
-${group} > .sw-button + .sw-button:not(.sw-button-secondary) {
+${group} > .sw-button ~ .sw-button:not(.sw-button-secondary) {
   border-inline-start-color: color-mix(in srgb, currentColor 30%, transparent);
 }
 
@@ -66,8 +77,18 @@ ${group} > .sw-button:focus-visible {
   ${group} > * { width: auto; }
 }
 
+/* Its own block, after the phone row's, so a group that does not fill is unchanged. */
+@media ${breakpointQuery('below', 'md')} {
+  ${group}.${buttonGroupFullWidthClass('md')} { width: 100%; }
+  ${group}.${buttonGroupFullWidthClass('md')} > .sw-button { flex: 1 1 0; min-width: 0; }
+}
+
 ${cssButtonGroupTrackClasses()}`;
 }
 export function buttonGroupAttachedClassCatalog() {
-    return ['sw-button-group-attached', ...buttonGroupTrackClassCatalog()];
+    return [
+        'sw-button-group-attached',
+        buttonGroupFullWidthClass('md'),
+        ...buttonGroupTrackClassCatalog(),
+    ];
 }

package/dist/css/css-button-group-track.js

@@ -30,7 +30,7 @@ ${track} > .sw-button {
   color: var(--sw-color-text);
 }
 
-${track} > .sw-button + .sw-button {
+${track} > .sw-button ~ .sw-button {
   border-inline-start-color: var(--sw-color-border);
 }