@scalewing/react 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @scalewing/react
 
+## 1.10.0
+
+### Minor Changes
+
+- 964e461: New `CalendarButton`: an icon-only `Button` that opens the `DateField` calendar dialog for a date the page already shows, such as a day heading with its own previous and next buttons (`docs/requests/teisoro-calendar-button.md`).
+
+  - Props: `label`, `value` (`YYYY-MM-DD`, never empty), `onChange`, and optional `min`, `max`, `disabled`, `locale`, `weekStartsOn`, `id`, `labels` (the calendar's words `previousMonth`, `nextMonth`, `month`, `year`, `today`, and `nameSeparator`), `size` (`xs`, `sm`, `md`; default `md`), and `variant` (a Button variant; default `ghost`). A `ref` reaches the `<button>`. New types `CalendarButtonProps` and `CalendarButtonLabels`.
+  - The accessible name is `label`, `labels.nameSeparator` (default `", "`, overridable per locale, such as `"、"` in Japanese), then the spoken date ("Choose survey day, Tuesday, September 22, 2026"), with `aria-haspopup="dialog"`, `aria-expanded`, and `aria-controls` while open. Enter, Space, or a press opens the calendar on `value` (a `value` outside `min`/`max` is kept, as on `DateField`, and the calendar opens on the nearest allowed day); choosing a day calls `onChange`, closes, and returns focus to the button; Escape and a press outside close without a change.
+  - An empty or invalid `value`, invalid bounds, locale, week start, or calendar words throw a `RangeError` with `DateField`'s messages. Two errors are new: `label must be non-empty text` and `labels.nameSeparator must be non-empty text`.
+  - New generated class `sw-calendar-button`: square at every Button size, and at least the 44 px md control height on a coarse pointer. The calendar reuses `sw-date-field-calendar` and its existing stacking layer.
+
+  No new dependencies.
+
 ## 1.9.0
 
 ### Minor Changes

package/README.md

@@ -12,6 +12,7 @@ import {
   BarChart,
   Box,
   Button,
+  CalendarButton,
   Card,
   Checkbox,
   RadioGroup,
@@ -170,6 +171,29 @@ People type the date into a text entry in the locale's numeric order (`MM/DD/YYY
 />
 ```
 
+`CalendarButton` is an icon-only `Button` that opens the same calendar dialog for a date the page already shows, such as a day heading with its own previous and next steps: `‹ Tuesday, September 22, 2026 [calendar] ›`. It has no text entry and no empty value. Supply `label` (what pressing it does, such as "Choose survey day"), a `YYYY-MM-DD` `value`, and `onChange`; optional `min`, `max`, `disabled`, `locale`, and `weekStartsOn` behave as on `DateField`, and `id` and a `ref` reach the `<button>`. `labels` takes the calendar's words (`previousMonth`, `nextMonth`, `month`, `year`, `today`) and `nameSeparator`. The button's accessible name is `label`, `labels.nameSeparator` (default `", "`), then the spoken date (`"Choose survey day, Tuesday, September 22, 2026"`); pass the locale's own pause where a comma does not fit, such as `"、"` in Japanese. It comes with `aria-haspopup="dialog"`, `aria-expanded`, and `aria-controls` while open; the calendar dialog is named by `label`. Enter, Space, or a press opens it on `value`. As on `DateField`, a `value` outside `min`/`max` is kept rather than refused, and the calendar then opens on the nearest allowed day with `value` shown selected and disabled; a button has no invalid state, so the page that shows the date flags it if it must. Choosing a day or **Today** calls `onChange` with the new date only when it changed, closes, and returns focus to the button; Escape closes without a change and returns focus; a press outside closes without a change and leaves focus where it landed. An empty or malformed `value`, `min`, or `max`, inverted bounds, a bad `locale` or `weekStartsOn`, an empty `label`, or an empty label word throws a `RangeError`. `size` (`xs`, `sm`, `md`; default `md`) and `variant` (default `ghost`) follow `Button`; the button is square at every size, and on a coarse pointer it is at least 44 px at every size. Place it beside the heading, not inside it, so the heading's text stays only the date.
+
+```tsx
+<Inline gap={1}>
+  <Button aria-label="Previous day" variant="ghost" onPress={previousDay}>
+    ‹
+  </Button>
+  <Text as="h2" variant="title">
+    {spokenSurveyDay}
+  </Text>
+  <CalendarButton
+    label="Choose survey day"
+    value={surveyDay}
+    onChange={setSurveyDay}
+    min="2026-09-01"
+    max="2026-09-30"
+  />
+  <Button aria-label="Next day" variant="ghost" onPress={nextDay}>
+    ›
+  </Button>
+</Inline>
+```
+
 ```tsx
 <Switch
   label="Active habitats only"

package/dist/calendar-button-labels.d.ts

@@ -0,0 +1,19 @@
+import { type DateFieldLabels } from './date-field-labels.js';
+/**
+ * CalendarButton's own words: the calendar's words from DateFieldLabels,
+ * plus the text between its label and the spoken date in its name.
+ */
+export type CalendarButtonLabels = Pick<DateFieldLabels, 'previousMonth' | 'nextMonth' | 'month' | 'year' | 'today'> & {
+    /**
+     * Joins the label and the spoken date in the button's name. Defaults to
+     * ", "; pass the locale's own pause, such as "、" in Japanese.
+     */
+    nameSeparator: string;
+};
+export declare const defaultNameSeparator = ", ";
+export type ResolvedCalendarButtonLabels = {
+    calendar: DateFieldLabels;
+    nameSeparator: string;
+};
+/** Consumer words over the English defaults; empty words fail closed. */
+export declare function resolveCalendarButtonLabels(labels?: Partial<CalendarButtonLabels>): ResolvedCalendarButtonLabels;

package/dist/calendar-button-labels.js

@@ -0,0 +1,10 @@
+import { resolveDateFieldLabels, } from './date-field-labels.js';
+export const defaultNameSeparator = ', ';
+/** Consumer words over the English defaults; empty words fail closed. */
+export function resolveCalendarButtonLabels(labels = {}) {
+    const { nameSeparator = defaultNameSeparator, ...calendar } = labels;
+    // 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');
+    return { calendar: resolveDateFieldLabels(calendar), nameSeparator };
+}

package/dist/calendar-labels.d.ts

@@ -10,3 +10,10 @@ export declare function monthNames(locale: string): string[];
 export declare function monthTitle(month: CalendarMonth, locale: string): string;
 /** A spoken date such as "Sunday, March 10, 2024"; empty for no date. */
 export declare function formatDateLabel(value: string, locale: string): string;
+/**
+ * An icon-only calendar trigger's name: its purpose, a separator, then the
+ * date it holds spoken in full, such as "Choose survey day, Tuesday,
+ * September 22, 2026". `Intl.ListFormat` has no neutral join (Spanish unit
+ * lists add "y", Chinese adds nothing), so the separator is the caller's.
+ */
+export declare function calendarTriggerName(purpose: string, value: string, locale: string, separator: string): string;

package/dist/calendar-labels.js

@@ -30,3 +30,12 @@ export function formatDateLabel(value, locale) {
         return '';
     return dateFormatter(locale, { dateStyle: 'full' }).format(formatterDate(parts));
 }
+/**
+ * An icon-only calendar trigger's name: its purpose, a separator, then the
+ * date it holds spoken in full, such as "Choose survey day, Tuesday,
+ * September 22, 2026". `Intl.ListFormat` has no neutral join (Spanish unit
+ * lists add "y", Chinese adds nothing), so the separator is the caller's.
+ */
+export function calendarTriggerName(purpose, value, locale, separator) {
+    return `${purpose}${separator}${formatDateLabel(value, locale)}`;
+}

package/dist/calendar-month.d.ts

@@ -5,6 +5,8 @@ export type CalendarMonth = {
 };
 /** 0 is Sunday, 1 is Monday, matching `Date.prototype.getDay`. */
 export type WeekStart = 0 | 1;
+/** Fails closed on a first weekday other than Sunday or Monday. */
+export declare function assertWeekStart(weekStartsOn: number): void;
 export type CalendarCell = {
     value: string;
     day: number;

package/dist/calendar-month.js

@@ -1,4 +1,9 @@
 import { daysInMonth, formatDateOnly, isValidDateParts, parseDateOnly, } from './date-only.js';
+/** Fails closed on a first weekday other than Sunday or Monday. */
+export function assertWeekStart(weekStartsOn) {
+    if (weekStartsOn !== 0 && weekStartsOn !== 1)
+        throw new RangeError('weekStartsOn must be 0 or 1');
+}
 /*
  * Day arithmetic runs on a proleptic Gregorian day count, so it never passes
  * through a Date, a time zone, or a daylight-saving jump.

package/dist/components/CalendarButton.d.ts

@@ -0,0 +1,43 @@
+import { type CalendarButtonLabels } from '../calendar-button-labels.js';
+import { type WeekStart } from '../calendar-month.js';
+import { type ButtonSize, type ButtonVariant } from './Button.js';
+export type { CalendarButtonLabels };
+export type CalendarButtonProps = {
+    /**
+     * What pressing it does, such as "Choose survey day". The button's name
+     * is this label, `labels.nameSeparator`, then `value` spoken in full; the
+     * calendar is named by the label.
+     */
+    label: string;
+    /**
+     * Calendar date `YYYY-MM-DD`. The button always holds a date. A value
+     * outside `min`/`max` stays the value, as on DateField; the calendar then
+     * opens on the nearest allowed day.
+     */
+    value: string;
+    /** Receives the chosen `YYYY-MM-DD`, never converted through UTC. */
+    onChange: (value: string) => void;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    /** The `<button>` element's id. */
+    id?: string;
+    /**
+     * BCP 47 tag for the spoken date and the calendar's month and weekday
+     * names. Defaults to the nearest `lang` attribute, then en-US.
+     */
+    locale?: string;
+    /** First column of the calendar: 0 Sunday (default) or 1 Monday. */
+    weekStartsOn?: WeekStart;
+    /** The calendar's words and the name separator; English by default. */
+    labels?: Partial<CalendarButtonLabels>;
+    /** A Button size; a coarse pointer always gets a 44 px target. */
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+};
+/**
+ * An icon-only button that opens DateField's calendar dialog to pick a
+ * date for something the page already shows, such as a day heading. It has
+ * no text entry and no empty value. The ref reaches the `<button>`.
+ */
+export declare const CalendarButton: import("react").ForwardRefExoticComponent<CalendarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/CalendarButton.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, useId } from 'react';
+import { resolveCalendarButtonLabels, } from '../calendar-button-labels.js';
+import { calendarTriggerName } from '../calendar-labels.js';
+import { assertWeekStart } from '../calendar-month.js';
+import { assertDateBounds, assertDateOnly } from '../date-only.js';
+import { Button } from './Button.js';
+import { CalendarDialog } from './date-field/CalendarDialog.js';
+import { DateFieldGlyph } from './date-field/DateFieldGlyph.js';
+import { useCalendarPopup } from './date-field/use-calendar-popup.js';
+import { useLangLocale } from './date-field/use-lang-locale.js';
+function assertLabel(label) {
+    if (typeof label !== 'string' || label.trim() === '')
+        throw new RangeError('label must be non-empty text');
+}
+/** Sets a forwarded ref, callback or object, to the same node. */
+function setForwardedRef(ref, node) {
+    if (typeof ref === 'function')
+        ref(node);
+    else if (ref)
+        ref.current = node;
+}
+/**
+ * An icon-only button that opens DateField's calendar dialog to pick a
+ * date for something the page already shows, such as a day heading. It has
+ * no text entry and no empty value. The ref reaches the `<button>`.
+ */
+export const CalendarButton = forwardRef(function CalendarButton({ label, value, onChange, min, max, disabled = false, id, locale, weekStartsOn = 0, labels, size = 'md', variant = 'ghost', }, ref) {
+    assertLabel(label);
+    assertDateOnly('value', value);
+    assertDateBounds(value, min, max);
+    assertWeekStart(weekStartsOn);
+    const words = resolveCalendarButtonLabels(labels);
+    const { buttonRef, shown, toggle, trigger, dialog } = useCalendarPopup({
+        value,
+        disabled,
+        onChange,
+    });
+    const resolvedLocale = useLangLocale(locale, buttonRef);
+    const labelId = useId();
+    const setButton = useCallback((node) => {
+        buttonRef.current = node;
+        setForwardedRef(ref, node);
+    }, [buttonRef, ref]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { ...trigger, className: "sw-calendar-button", disabled: disabled, id: id, onPress: toggle, ref: setButton, size: size, variant: variant, children: [_jsx("span", { className: "sw-sr-only", children: calendarTriggerName(label, value, resolvedLocale, words.nameSeparator) }), _jsx(DateFieldGlyph, { name: "calendar" })] }), shown ? (_jsxs(_Fragment, { children: [_jsx("span", { hidden: true, id: labelId, children: label }), _jsx(CalendarDialog, { ...dialog, anchorRef: buttonRef, buttonRef: buttonRef, labelId: labelId, labels: words.calendar, locale: resolvedLocale, max: max, min: min, required: true, value: value, weekStartsOn: weekStartsOn })] })) : null] }));
+});

package/dist/components/DateField.js

@@ -1,22 +1,22 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useEffect, useId, useMemo, useRef } from 'react';
+import { assertWeekStart } from '../calendar-month.js';
 import { resolveDateFieldLabels, } from '../date-field-labels.js';
 import { dateEntryPattern, dateEntryPlaceholder } from '../date-entry.js';
 import { dateEntryValidity } from '../date-entry-validity.js';
-import { assertDateBounds, isOutsideDateRange, todayDateOnly, } from '../date-only.js';
+import { assertDateBounds, isOutsideDateRange } from '../date-only.js';
 import { CalendarDialog } from './date-field/CalendarDialog.js';
 import { DateFieldGlyph } from './date-field/DateFieldGlyph.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';
 export function DateField({ label, value, onChange, min, max, disabled = false, required = false, description, error, locale, weekStartsOn = 0, labels, }) {
     assertDateBounds(value, min, max);
-    if (weekStartsOn !== 0 && weekStartsOn !== 1)
-        throw new RangeError('weekStartsOn must be 0 or 1');
+    assertWeekStart(weekStartsOn);
     const words = resolveDateFieldLabels(labels);
     const rootRef = useRef(null);
     const controlRef = useRef(null);
-    const buttonRef = useRef(null);
     const inputRef = useRef(null);
     const resolvedLocale = useLangLocale(locale, rootRef);
     const pattern = useMemo(() => dateEntryPattern(resolvedLocale), [resolvedLocale]);
@@ -29,14 +29,14 @@ export function DateField({ label, value, onChange, min, max, disabled = false,
     useEffect(() => {
         inputRef.current?.setCustomValidity(validity);
     }, [validity]);
-    const [open, setOpen] = useState(false);
-    // Disabling the field closes its calendar for good, not just while disabled.
-    if (disabled && open)
-        setOpen(false);
-    const shown = open && !disabled;
+    const { buttonRef, shown, toggle, trigger, dialog } = useCalendarPopup({
+        value,
+        disabled,
+        onChange,
+        beforeSelect: entry.reset,
+    });
     const inputId = useId();
     const labelId = useId();
-    const dialogId = useId();
     const descriptionId = useId();
     const entryErrorId = useId();
     const errorId = useId();
@@ -48,17 +48,6 @@ export function DateField({ label, value, onChange, min, max, disabled = false,
         .filter((id) => id !== null)
         .join(' ');
     const invalid = Boolean(error) || entry.invalid || isOutsideDateRange(value, min, max);
-    function close(restoreFocus) {
-        setOpen(false);
-        if (restoreFocus)
-            buttonRef.current?.focus();
-    }
-    function select(next) {
-        entry.reset();
-        close(true);
-        if (next !== value)
-            onChange(next);
-    }
     return (_jsxs("div", { className: "sw-date-field", ref: rootRef, children: [_jsx("label", { className: "sw-date-field-label", htmlFor: inputId, id: labelId, children: label }), _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();
@@ -66,5 +55,5 @@ export function DateField({ label, value, onChange, min, max, disabled = false,
                             day: words.dayPlaceholder,
                             month: words.monthPlaceholder,
                             year: words.yearPlaceholder,
-                        }), ref: inputRef, required: required, spellCheck: false, type: "text", value: entry.text }), _jsxs("button", { "aria-controls": shown ? dialogId : undefined, "aria-expanded": shown, "aria-haspopup": "dialog", "aria-describedby": labelId, className: "sw-date-field-button", disabled: disabled, onClick: () => (shown ? close(true) : setOpen(true)), ref: buttonRef, 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, entry.invalid ? (_jsx("span", { className: "sw-date-field-error", id: entryErrorId, children: words.invalidEntry })) : null, error ? (_jsx("span", { className: "sw-date-field-error", id: errorId, children: error })) : null, shown ? (_jsx(CalendarDialog, { anchorRef: controlRef, buttonRef: buttonRef, id: dialogId, labelId: labelId, labels: words, locale: resolvedLocale, max: max, min: min, onClose: close, onSelect: select, required: required, today: todayDateOnly(), value: value, weekStartsOn: weekStartsOn })) : null] }));
+                        }), 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, 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, entry.invalid ? (_jsx("span", { className: "sw-date-field-error", id: entryErrorId, children: words.invalidEntry })) : null, error ? (_jsx("span", { className: "sw-date-field-error", id: errorId, children: error })) : null, 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/date-field/DateFieldGlyph.d.ts

@@ -1,8 +1,8 @@
 export type DateFieldGlyphName = 'calendar' | 'previous' | 'next';
 /**
- * Private control chrome for DateField. Stroke, size, and color come from
- * the generated `sw-date-field-glyph` rule; the chevrons mirror in
- * right-to-left text.
+ * Private control chrome for DateField and CalendarButton. Stroke, size,
+ * and color come from the generated `sw-date-field-glyph` rule; the
+ * chevrons mirror in right-to-left text.
  */
 export declare function DateFieldGlyph({ name }: {
     name: DateFieldGlyphName;

package/dist/components/date-field/DateFieldGlyph.js

@@ -6,9 +6,9 @@ const PATHS = {
     next: 'M9.5 6l6 6-6 6',
 };
 /**
- * Private control chrome for DateField. Stroke, size, and color come from
- * the generated `sw-date-field-glyph` rule; the chevrons mirror in
- * right-to-left text.
+ * Private control chrome for DateField and CalendarButton. Stroke, size,
+ * and color come from the generated `sw-date-field-glyph` rule; the
+ * chevrons mirror in right-to-left text.
  */
 export function DateFieldGlyph({ name }) {
     return (_jsx("svg", { "aria-hidden": "true", className: cx('sw-date-field-glyph', name !== 'calendar' && 'sw-date-field-glyph-directional'), focusable: "false", viewBox: "0 0 24 24", children: _jsx("path", { d: PATHS[name] }) }));

package/dist/components/date-field/use-calendar-popup.d.ts

@@ -0,0 +1,36 @@
+import { type RefObject } from 'react';
+export type CalendarPopupOptions = {
+    value: string;
+    disabled: boolean;
+    onChange: (value: string) => void;
+    /** Runs before a chosen date closes the calendar, such as a text reset. */
+    beforeSelect?: () => void;
+};
+export type CalendarPopup = {
+    /** The button that toggles the calendar and takes focus back. */
+    buttonRef: RefObject<HTMLButtonElement | null>;
+    shown: boolean;
+    toggle: () => void;
+    /** ARIA for the toggling button, as the WAI-ARIA date picker asks. */
+    trigger: {
+        'aria-controls': string | undefined;
+        'aria-expanded': boolean;
+        'aria-haspopup': 'dialog';
+    };
+    /**
+     * CalendarDialog props that belong to the open and close cycle; pass
+     * `buttonRef` beside them.
+     */
+    dialog: {
+        id: string;
+        onClose: (restoreFocus: boolean) => void;
+        onSelect: (value: string) => void;
+        today: string;
+    };
+};
+/**
+ * The open state of a calendar dialog toggled by one button, shared by
+ * DateField and CalendarButton. Disabling closes it for good; choosing a
+ * date closes it, returns focus to the button, and reports a changed date.
+ */
+export declare function useCalendarPopup({ value, disabled, onChange, beforeSelect, }: CalendarPopupOptions): CalendarPopup;

package/dist/components/date-field/use-calendar-popup.js

@@ -0,0 +1,43 @@
+import { useId, useRef, useState } from 'react';
+import { todayDateOnly } from '../../date-only.js';
+/**
+ * The open state of a calendar dialog toggled by one button, shared by
+ * DateField and CalendarButton. Disabling closes it for good; choosing a
+ * date closes it, returns focus to the button, and reports a changed date.
+ */
+export function useCalendarPopup({ value, disabled, onChange, beforeSelect, }) {
+    const buttonRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    // Disabling closes the calendar for good, not just while disabled.
+    if (disabled && open)
+        setOpen(false);
+    const shown = open && !disabled;
+    const id = useId();
+    function close(restoreFocus) {
+        setOpen(false);
+        if (restoreFocus)
+            buttonRef.current?.focus();
+    }
+    function select(next) {
+        beforeSelect?.();
+        close(true);
+        if (next !== value)
+            onChange(next);
+    }
+    return {
+        buttonRef,
+        shown,
+        toggle: () => (shown ? close(true) : setOpen(true)),
+        trigger: {
+            'aria-controls': shown ? id : undefined,
+            'aria-expanded': shown,
+            'aria-haspopup': 'dialog',
+        },
+        dialog: {
+            id,
+            onClose: close,
+            onSelect: select,
+            today: todayDateOnly(),
+        },
+    };
+}

package/dist/css/css-calendar-button.d.ts

@@ -0,0 +1,2 @@
+export declare function cssCalendarButtonClasses(): string;
+export declare function calendarButtonClassCatalog(): string[];

package/dist/css/css-calendar-button.js

@@ -0,0 +1,33 @@
+import { buttonSizes } from '@scalewing/tokens';
+/* The comfortable touch target: the md control height, 44 px, both ways. */
+const touchTarget = 'var(--sw-control-md-min-height)';
+/* Square at every Button size: as wide as the size's control height. */
+function squareRules() {
+    return buttonSizes
+        .map((size) => `.sw-button-${size}.sw-calendar-button { min-width: var(--sw-control-${size}-min-height); }`)
+        .join('\n');
+}
+export function cssCalendarButtonClasses() {
+    return `.sw-button.sw-calendar-button {
+  flex: none;
+  padding-inline: 0;
+}
+
+${squareRules()}
+
+.sw-calendar-button:not(.sw-button-md) .sw-date-field-glyph {
+  height: var(--sw-space-4);
+  width: var(--sw-space-4);
+}
+
+/* A coarse pointer gets the full touch target at the smaller sizes too. */
+@media (pointer: coarse) {
+  .sw-button.sw-calendar-button {
+    min-height: ${touchTarget};
+    min-width: ${touchTarget};
+  }
+}`;
+}
+export function calendarButtonClassCatalog() {
+    return ['sw-calendar-button'];
+}

package/dist/css/css-components.js

@@ -4,6 +4,7 @@ import { cssActionBarClasses } from './css-action-bar.js';
 import { cssActionMenuClasses } from './css-action-menu.js';
 import { cssAccordionClasses } from './css-accordion.js';
 import { cssButtonClasses } from './css-button.js';
+import { cssCalendarButtonClasses } from './css-calendar-button.js';
 import { cssChartClasses } from './css-chart.js';
 import { cssCheckboxClasses } from './css-checkbox.js';
 import { cssRadioGroupClasses } from './css-radio-group.js';
@@ -133,6 +134,8 @@ ${cssDataClasses()}
 
 ${cssDateFieldClasses()}
 
+${cssCalendarButtonClasses()}
+
 ${cssChartClasses()}
 
 ${cssChromeClasses()}

package/dist/css/stacking.js

@@ -13,7 +13,8 @@
  * 4. `topChrome`: the sticky AppHeader, over a lifted surface that scrolls up
  *    under it (the header is the page's way back, and a popup opens downward).
  * 5. `popup`: a popup outside any lifted surface (Select list, ActionMenu
- *    list, Tooltip, DateField calendar) over everything in the page.
+ *    list, Tooltip, the DateField and CalendarButton calendar) over
+ *    everything in the page.
  *
  * Dialog and Toast sit on the browser's top layer, above all of these.
  */
@@ -31,7 +32,8 @@ const openPopups = [
     '.sw-select-list',
     '.sw-action-menu-list:not([hidden])',
     '.sw-tooltip:not([hidden])',
-    // Rendered only while open; on the top layer where the popover API exists.
+    // DateField and CalendarButton 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

@@ -4,6 +4,7 @@ import { actionMenuClassCatalog } from './css-action-menu.js';
 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 { checkboxClassCatalog } from './css-checkbox.js';
 import { radioGroupClassCatalog } from './css-radio-group.js';
 import { spinnerClassCatalog } from './css-spinner.js';
@@ -57,6 +58,7 @@ export function utilityClassCatalog() {
         ...actionBarClassCatalog(),
         ...switchClassCatalog(),
         ...dateFieldClassCatalog(),
+        ...calendarButtonClassCatalog(),
         ...checkboxClassCatalog(),
         ...radioGroupClassCatalog(),
         ...spinnerClassCatalog(),

package/dist/index.d.ts

@@ -4,6 +4,7 @@ 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 { CalendarButton, type CalendarButtonLabels, type CalendarButtonProps, } from './components/CalendarButton.js';
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
 export { Progress, type ProgressProps, type ProgressTone, } from './components/Progress.js';

package/dist/index.js

@@ -3,6 +3,7 @@ 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 { CalendarButton, } from './components/CalendarButton.js';
 export { Checkbox } from './components/Checkbox.js';
 export { Spinner, } from './components/Spinner.js';
 export { Progress, } from './components/Progress.js';

package/dist/styles.css

@@ -1544,6 +1544,28 @@ body {
   }
 }
 
+.sw-button.sw-calendar-button {
+  flex: none;
+  padding-inline: 0;
+}
+
+.sw-button-xs.sw-calendar-button { min-width: var(--sw-control-xs-min-height); }
+.sw-button-sm.sw-calendar-button { min-width: var(--sw-control-sm-min-height); }
+.sw-button-md.sw-calendar-button { min-width: var(--sw-control-md-min-height); }
+
+.sw-calendar-button:not(.sw-button-md) .sw-date-field-glyph {
+  height: var(--sw-space-4);
+  width: var(--sw-space-4);
+}
+
+/* A coarse pointer gets the full touch target at the smaller sizes too. */
+@media (pointer: coarse) {
+  .sw-button.sw-calendar-button {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+  }
+}
+
 .sw-bar-chart {
   display: grid;
   gap: var(--sw-space-2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",