@scalewing/react 1.9.0 → 1.10.1

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @scalewing/react
 
+## 1.10.1
+
+### Patch Changes
+
+- 7c27935: `ActionMenu` places its menu with the shared anchored-popover code that the `DateField` and `CalendarButton` calendar use (`docs/requests/teisoro-action-menu.md`, 2026-09-28 follow-up). The menu now opens a `space-1` (4 px) gap below its trigger, or above it when it only fits there, keeps at least `space-2` (8 px) from every viewport edge, and aligns to the trigger's inline start (its right edge in right-to-left), or to the trigger's other edge when the trigger ends a row and the menu would not fit from its start. Before, it sat directly on the trigger and was pushed flush against the screen edge.
+
+  - The menu element is rendered only while it is open, like the calendar; it was a `hidden` element before. `aria-controls` already pointed at it only while open. A test that looked for the closed menu with `{ hidden: true }` now finds nothing.
+  - `.sw-action-menu-list` is as wide as its longest command (`width: max-content`, at least the 44 px control height) up to the viewport less both insets, so a long command wraps inside the screen instead of running off it. It resets the popover layer's `inset`, so the placed position holds in right-to-left documents too. Commands take the label line height with a `space-1` block padding, still 28 px tall on one line.
+  - The unused `.sw-action-menu-list[hidden]` rule is gone.
+
+  No API change and no new dependencies.
+
+- ab61ca6: `ActionMenu` gives a coarse pointer the 44 px touch target (`docs/requests/teisoro-action-menu.md`, 2026-09-28 touch-target follow-up). Under `@media (pointer: coarse)` the trigger is at least `--sw-control-md-min-height` (44 px) tall and wide, and each command at least 44 px tall; a fine pointer keeps the compact xs height. This follows `CalendarButton`'s coarse-pointer rule, and both now read the target from one internal module.
+
+  Visual change on touch screens only. No API change and no new dependencies.
+
+- df1fa80: The `ActionMenu` menu and the `DateField` and `CalendarButton` calendar are placed again when the popover or its anchor changes size while open, such as commands that change while the menu is open or a month with another row of weeks (`docs/requests/teisoro-action-menu.md`, 2026-09-28 placement follow-up). Before, their shared placement ran only on opening, scroll and window resize. It uses `ResizeObserver` where the runtime has it.
+
+  No API change and no new dependencies.
+
+- 91665ce: The `DateField` and `CalendarButton` calendar and the `ActionMenu` menu now fit the viewport a classic scrollbar leaves (`docs/requests/teisoro-action-menu.md`, 2026-09-28 placement follow-up). Their shared placement measured `window.innerWidth` and `innerHeight`, which include a classic scrollbar, so a popover clamped to the right edge could sit under the scrollbar instead of `space-2` from it. It now measures the root element's client box. The calendar's `max-width` is `100%` of the top layer less both insets instead of `100vw`, as the menu's is.
+
+  Only pages with classic (non-overlay) scrollbars change. No API change and no new dependencies.
+
+- 7b4058e: `Text` drops the browser's paragraph and heading margins (`docs/requests/teisoro-text.md`). Its `p` and `h1`–`h4` elements kept about 1em of margin above and below, which a flex `Stack` or `Inline` adds to its `gap`. A generated `:where(.sw-text-*) { margin: 0; }` rule removes it at zero specificity, so an authored margin (`sw-sr-only`, a consumer class) still wins.
+
+  Visual change: text in a `Stack` or `Inline` sits at the `gap` the page asked for, so dialog titles, section headings and card text are tighter. A page that needs more space raises its `gap`. No API change and no new dependencies.
+
+## 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,
@@ -93,7 +94,7 @@ Import the CSS once at the application entry. Do not copy it into your source tr
 </Stack>
 ```
 
-`ActionMenu` opens independent commands from a labelled button. Provide localized command labels and callbacks; use `disabled` for unavailable commands and `destructive` for a dangerous command's presentation. Escape and choosing a command both return focus to the trigger (before the command runs, so a `Dialog` it opens hands focus back to the trigger on close), and outside interaction dismisses the menu.
+`ActionMenu` opens independent commands from a labelled button. Provide localized command labels and callbacks; use `disabled` for unavailable commands and `destructive` for a dangerous command's presentation. Escape and choosing a command both return focus to the trigger (before the command runs, so a `Dialog` it opens hands focus back to the trigger on close), and outside interaction dismisses the menu. The open menu sits on the popover layer a `space-1` gap below its trigger (above it when it only fits there), at least `space-2` from every viewport edge (a classic scrollbar is not part of the viewport), and aligned to the trigger's inline start (its right edge in right-to-left), or to its other edge when the trigger ends a row and the menu would not fit from its start. The menu is as wide as its longest command up to the viewport less both insets, and a longer command wraps. The menu follows its trigger through scroll, window resize, and a change in the menu's or the trigger's size. The menu is in the DOM only while it is open. The trigger and its commands use the compact xs control height for a fine pointer; on a coarse pointer the trigger is at least 44 × 44 px (the md control height, as on `CalendarButton`) and every command is at least 44 px tall.
 
 `Dialog` is a modal `<dialog>` controlled by `open`. Escape, a backdrop press, a platform close request, and a `<form method="dialog">` submit (or a submitter with `formmethod="dialog"`) are each prevented and call `onClose`; none of them closes the dialog itself. A consumer `onKeyDown`, `onCancel`, `onSubmit` or `onPointerDown` that prevents the event vetoes that request. Escape in a search field that holds text clears the field first, and a descendant's own `cancel` (a dismissed file picker) is not a close request. Set `open` to false to close it, or keep it true (for example while a form is saving) and it stays shown. `onClose` is not called when `open` turns false, and it is required: a dialog that must not be dismissed passes a callback that keeps `open` true.
 
@@ -113,8 +114,12 @@ Import the CSS once at the application entry. Do not copy it into your source tr
 
 `Card` defaults to `glass`; `outlined` and `elevated` are solid surfaces, and `filled` is a quiet `--sw-color-subtle` fill with no border for plain information apart from pressable rows.
 
+`--sw-color-accentSubtle` is the accent tint from `@scalewing/tokens`: a quiet fill behind accent text or glyphs that keeps 4.5:1. The stylesheet and every palette file set it, and a palette that moves the accent or surface retints it.
+
 `Text` steps `display` and `heading` down to the compact token sizes below the `md` breakpoint; consumers do not size type per viewport.
 
+`Text` has no margin of its own. Its default `p` and `h1`–`h4` elements drop the browser's block margins, so the `gap` of the `Stack` or `Inline` around it alone sets the spacing; put more space in that `gap`, not in a margin. The reset has zero specificity (`:where(.sw-text-*)`), so an authored margin, such as `sw-sr-only` or a consumer class, still applies.
+
 `Text` takes an optional `align` (`start`, `center`, `end`) mapped to generated `sw-text-align-*` classes, for a heading that must stay centered when it wraps.
 
 `Grid` places children in one to four (or six) equal-width columns with a token `gap` step. `columnsBelow={{ md: 2 }}` drops to fewer columns below the `md` breakpoint so tiles and stat cards stay readable on a phone. It accepts every `Box` prop.
@@ -170,6 +175,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/anchored-position.d.ts

@@ -16,13 +16,25 @@ export type AnchoredPosition = {
     left: number;
     top: number;
 };
+export type AnchoredPositionOptions = {
+    /** Space between the anchor and the popover, in px. */
+    gap?: number;
+    /** Space the popover keeps from every viewport edge, in px. */
+    inset?: number;
+    /** Right-to-left text: the anchor's inline start is its right edge. */
+    rtl?: boolean;
+    /**
+     * When the popover would cross the viewport's inline end aligned to the
+     * anchor's start, align it to the anchor's end instead (a menu opened from
+     * a trigger at the end of a row), as long as that fits.
+     */
+    flipInline?: boolean;
+};
 /**
  * Where a fixed popover goes beside its anchor: below and aligned to the
  * anchor's inline start (its end in right-to-left), above when it does not
  * fit below but does above, and always kept inside the viewport by `inset`.
+ * With `flipInline`, a popover that does not fit start-aligned lines up with
+ * the anchor's end instead.
  */
-export declare function anchoredPosition(anchor: AnchorRect, size: PopoverSize, viewport: Viewport, { gap, inset, rtl }?: {
-    gap?: number | undefined;
-    inset?: number | undefined;
-    rtl?: boolean | undefined;
-}): AnchoredPosition;
+export declare function anchoredPosition(anchor: AnchorRect, size: PopoverSize, viewport: Viewport, options?: AnchoredPositionOptions): AnchoredPosition;

package/dist/anchored-position.js

@@ -1,12 +1,27 @@
+function fitsInline(left, width, viewport, inset) {
+    return left >= inset && left + width <= viewport.width - inset;
+}
+function inlineLeft(anchor, size, viewport, { inset = 0, rtl = false, flipInline = false }) {
+    const startAligned = rtl ? anchor.right - size.width : anchor.left;
+    const endAligned = rtl ? anchor.left : anchor.right - size.width;
+    const preferred = flipInline &&
+        !fitsInline(startAligned, size.width, viewport, inset) &&
+        fitsInline(endAligned, size.width, viewport, inset)
+        ? endAligned
+        : startAligned;
+    const maxLeft = viewport.width - inset - size.width;
+    return Math.max(inset, Math.min(preferred, maxLeft));
+}
 /**
  * Where a fixed popover goes beside its anchor: below and aligned to the
  * anchor's inline start (its end in right-to-left), above when it does not
  * fit below but does above, and always kept inside the viewport by `inset`.
+ * With `flipInline`, a popover that does not fit start-aligned lines up with
+ * the anchor's end instead.
  */
-export function anchoredPosition(anchor, size, viewport, { gap = 0, inset = 0, rtl = false } = {}) {
-    const preferredLeft = rtl ? anchor.right - size.width : anchor.left;
-    const maxLeft = viewport.width - inset - size.width;
-    const left = Math.max(inset, Math.min(preferredLeft, maxLeft));
+export function anchoredPosition(anchor, size, viewport, options = {}) {
+    const { gap = 0, inset = 0 } = options;
+    const left = inlineLeft(anchor, size, viewport, options);
     const below = anchor.bottom + gap;
     const above = anchor.top - gap - size.height;
     const fitsBelow = below + size.height <= viewport.height - inset;

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/ActionMenu.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useLayoutEffect, useRef, useState, } from 'react';
-import { cx } from '../class-names.js';
+import { ActionMenuList } from './action-menu/ActionMenuList.js';
 function nextEnabled(items, current, direction) {
     if (items.length === 0)
         return -1;
@@ -14,9 +14,7 @@ function nextEnabled(items, current, direction) {
 }
 export function ActionMenu({ label, items, trigger, disabled = false, }) {
     const menuId = useId();
-    const rootRef = useRef(null);
     const triggerRef = useRef(null);
-    const menuRef = useRef(null);
     const openRef = useRef(false);
     const [open, setOpen] = useState(false);
     const [focusIndex, setFocusIndex] = useState(-1);
@@ -41,55 +39,6 @@ export function ActionMenu({ label, items, trigger, disabled = false, }) {
         setFocusIndex(index);
         setOpen(true);
     }
-    function positionMenu() {
-        const triggerNode = triggerRef.current;
-        const menuNode = menuRef.current;
-        if (!triggerNode || !menuNode)
-            return;
-        const rect = triggerNode.getBoundingClientRect();
-        const width = menuNode.offsetWidth;
-        const height = menuNode.offsetHeight;
-        menuNode.style.left = `${Math.max(0, Math.min(rect.left, window.innerWidth - width))}px`;
-        menuNode.style.top = `${Math.max(0, rect.bottom + height <= window.innerHeight ? rect.bottom : rect.top - height)}px`;
-    }
-    useLayoutEffect(() => {
-        const menuNode = menuRef.current;
-        if (!menuNode)
-            return;
-        const supportsPopover = typeof menuNode.showPopover === 'function';
-        if (supportsPopover)
-            menuNode.setAttribute('popover', 'manual');
-        if (!open) {
-            if (supportsPopover && menuNode.matches(':popover-open'))
-                menuNode.hidePopover();
-            return;
-        }
-        if (supportsPopover && !menuNode.matches(':popover-open'))
-            menuNode.showPopover();
-        positionMenu();
-        const commands = menuNode.querySelectorAll('[role="menuitem"]');
-        commands[focusIndex]?.focus();
-    }, [focusIndex, open]);
-    useLayoutEffect(() => {
-        if (!open)
-            return;
-        function onPointerDown(event) {
-            const target = event.target;
-            if (target instanceof Node && !rootRef.current?.contains(target))
-                close();
-        }
-        function onMove() {
-            positionMenu();
-        }
-        document.addEventListener('pointerdown', onPointerDown);
-        window.addEventListener('resize', onMove);
-        window.addEventListener('scroll', onMove, true);
-        return () => {
-            document.removeEventListener('pointerdown', onPointerDown);
-            window.removeEventListener('resize', onMove);
-            window.removeEventListener('scroll', onMove, true);
-        };
-    }, [open]);
     function onTriggerKeyDown(event) {
         if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
             event.preventDefault();
@@ -135,10 +84,5 @@ export function ActionMenu({ label, items, trigger, disabled = false, }) {
         close(true);
         item.onSelect();
     }
-    return (_jsxs("div", { className: "sw-action-menu", ref: rootRef, children: [_jsx("button", { "aria-controls": open ? menuId : undefined, "aria-expanded": open, "aria-haspopup": "menu", "aria-label": label, className: "sw-action-menu-trigger", disabled: !enabled, onClick: () => (open ? close(true) : openMenu()), onKeyDown: onTriggerKeyDown, ref: triggerRef, type: "button", children: trigger ?? label }), _jsx("div", { "aria-label": label, className: "sw-action-menu-list", hidden: !open, id: menuId, onKeyDown: onMenuKeyDown, ref: menuRef, role: "menu", children: items.map((item, index) => (_jsxs("button", { className: cx('sw-action-menu-item', item.destructive && 'sw-action-menu-item-danger'), disabled: item.disabled, onClick: () => select(item), onFocus: () => setFocusIndex(index), onKeyDown: (event) => {
-                        if (event.key === 'Enter' || event.key === ' ') {
-                            event.preventDefault();
-                            select(item);
-                        }
-                    }, role: "menuitem", tabIndex: index === focusIndex ? 0 : -1, type: "button", children: [item.icon ? _jsx("span", { "aria-hidden": "true", children: item.icon }) : null, _jsx("span", { children: item.label })] }, item.id))) })] }));
+    return (_jsxs("div", { className: "sw-action-menu", children: [_jsx("button", { "aria-controls": open ? menuId : undefined, "aria-expanded": open, "aria-haspopup": "menu", "aria-label": label, className: "sw-action-menu-trigger", disabled: !enabled, onClick: () => (open ? close(true) : openMenu()), onKeyDown: onTriggerKeyDown, ref: triggerRef, type: "button", children: trigger ?? label }), open ? (_jsx(ActionMenuList, { focusIndex: focusIndex, id: menuId, items: items, label: label, onDismiss: () => close(), onFocusIndex: setFocusIndex, onKeyDown: onMenuKeyDown, onSelect: select, triggerRef: triggerRef })) : null] }));
 }

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/action-menu/ActionMenuList.d.ts

@@ -0,0 +1,21 @@
+import { type KeyboardEvent, type RefObject } from 'react';
+import type { ActionMenuItem } from '../ActionMenu.js';
+type ActionMenuListProps = {
+    id: string;
+    label: string;
+    items: readonly ActionMenuItem[];
+    focusIndex: number;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    onDismiss: () => void;
+    onFocusIndex: (index: number) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+    onSelect: (item: ActionMenuItem) => void;
+};
+/**
+ * The open menu: on the popover layer beside the trigger (a gap below or
+ * above it, inset from the viewport edges, and lined up with the trigger's
+ * end when it would not fit from its start), with the focused command
+ * holding DOM focus.
+ */
+export declare function ActionMenuList({ id, label, items, focusIndex, triggerRef, onDismiss, onFocusIndex, onKeyDown, onSelect, }: ActionMenuListProps): import("react").JSX.Element;
+export {};

package/dist/components/action-menu/ActionMenuList.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, } from 'react';
+import { cx } from '../../class-names.js';
+import { useAnchoredPopover } from '../use-anchored-popover.js';
+/**
+ * The open menu: on the popover layer beside the trigger (a gap below or
+ * above it, inset from the viewport edges, and lined up with the trigger's
+ * end when it would not fit from its start), with the focused command
+ * holding DOM focus.
+ */
+export function ActionMenuList({ id, label, items, focusIndex, triggerRef, onDismiss, onFocusIndex, onKeyDown, onSelect, }) {
+    const menuRef = useRef(null);
+    useAnchoredPopover(menuRef, triggerRef, triggerRef, onDismiss, {
+        flipInline: true,
+    });
+    useLayoutEffect(() => {
+        const commands = menuRef.current?.querySelectorAll('[role="menuitem"]');
+        commands?.[focusIndex]?.focus();
+    }, [focusIndex]);
+    return (_jsx("div", { "aria-label": label, className: "sw-action-menu-list", id: id, onKeyDown: onKeyDown, ref: menuRef, role: "menu", children: items.map((item, index) => (_jsxs("button", { className: cx('sw-action-menu-item', item.destructive && 'sw-action-menu-item-danger'), disabled: item.disabled, onClick: () => onSelect(item), onFocus: () => onFocusIndex(index), onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    onSelect(item);
+                }
+            }, role: "menuitem", tabIndex: index === focusIndex ? 0 : -1, type: "button", children: [item.icon ? _jsx("span", { "aria-hidden": "true", children: item.icon }) : null, _jsx("span", { children: item.label })] }, item.id))) }));
+}

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

@@ -5,7 +5,7 @@ import { clampDateOnly, daysInMonth, formatDateOnly, isOutsideDateRange, parseDa
 import { Button } from '../Button.js';
 import { CalendarGrid } from './CalendarGrid.js';
 import { CalendarHeader } from './CalendarHeader.js';
-import { useAnchoredPopover } from './use-anchored-popover.js';
+import { useAnchoredPopover } from '../use-anchored-popover.js';
 /** The dialog's tab stops: enabled buttons and the grid's roving day. */
 function isTabStop(node) {
     if (node instanceof HTMLButtonElement)

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] }) }));