@scalewing/react 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,145 @@
 # @scalewing/react
 
+## 1.9.0
+
+### Minor Changes
+
+- a4a30e8: `DateField` draws its own calendar instead of using the browser's `<input type="date">`, so it looks the same in every browser, follows Scalewing's tokens, and shows up in screenshots. The props, the date-only `YYYY-MM-DD` contract, and the `RangeError` guards are unchanged.
+
+  - People type the date into a text entry in the locale's numeric order (`MM/DD/YYYY` for en-US, `DD/MM/YYYY` for es); ISO `YYYY-MM-DD` and eight bare digits also work. A keystroke commits once the entry's last field is at full width (a four-digit year, or two digits for a trailing day or month); a shorter last field commits on blur or Enter. Typed text stays when the parent keeps the old value. Text that is not a date keeps the last value and, after the person leaves the field, sets `aria-invalid` with a message. As with the native input, the entry blocks form submission while its text is not a date or its date is outside `min`/`max` (`setCustomValidity`).
+  - A calendar button opens a WAI-ARIA date picker dialog anchored under the field on the popover layer, with month and year selectors for jumping decades, Today, and Clear (only when not `required`). Arrows, Home/End, PageUp/PageDown, and Shift+PageUp/PageDown move focus; Enter or Space selects; Escape closes and returns focus to the button. Days outside `min`/`max` are `aria-disabled`, the month selector offers only months inside them, and padding past `0001-01-01` or `9999-12-31` is blank and inert.
+  - New optional props: `locale` (BCP 47; defaults to the nearest `lang` attribute, then `en-US`), `weekStartsOn` (`0` Sunday by default, or `1` Monday), and `labels` for the control's own words (English defaults), including `outOfRange`, the form validation message for a date outside `min`/`max`. New types `DateFieldLabels` and `WeekStart`. New generated `sw-date-field-*` classes for the control and calendar.
+  - Migration for tests: there is no `input[type=date]` any more. Find the entry by its label (`getByLabel('Hire date')` or `getByRole('textbox', { name: 'Hire date' })`) and `fill` it in the locale's order or in ISO, or open the calendar with the **Choose date** button. The input's value is now the locale's display text (`03/10/2024`), not `2024-03-10`; assert the serialized value from your own state.
+
+  No new dependencies.
+
+- 4548fc2: `Accordion` takes `subtitle`, one muted caption line under the title, and
+  `size="sm"` for a quieter disclosure nested inside other content (a
+  label-size title, spacing step 3, `md` corners, and a header that is an `sm`
+  control of at least 32px instead of 44px). The header now draws a
+  token chevron at its inline end in place of the browser's `details` triangle;
+  it turns when the disclosure opens and holds still under reduced motion. See
+  `docs/requests/teisoro-accordion-summary.md`.
+
+  ```tsx
+  <Accordion
+    open={open}
+    onOpenChange={setOpen}
+    subtitle="Twelve sightings · Two nests"
+    title="Wetlands"
+  >
+    {children}
+  </Accordion>
+  ```
+
+  New generated classes `sw-accordion-sm`, `sw-accordion-heading` and
+  `sw-accordion-marker`, and a new exported type `AccordionSize`. The summary is
+  now a flex row instead of `display: list-item`, so the native marker is gone;
+  an app that styled `.sw-accordion-summary::marker` has nothing left to style.
+  Additive for the public API.
+
+- 38e6f09: New `ActionBar`: a long page's actions and one short `status` line on a glass
+  bar that sticks to the bottom of the viewport while the content above it
+  scrolls, then rests in place after it (see
+  `docs/requests/teisoro-action-bar.md`). `stickyBelow="md"` sticks only below
+  the `md` breakpoint and keeps the bar in page flow from `md` up. The bar clears
+  the safe-area insets (with `viewport-fit=cover`), is solid under Reduce
+  Transparency, and on a phone puts the status on its own line with the actions
+  sharing the row under it. The status is a polite live region
+  (`role="status"`), always rendered so the first status is announced too; an
+  empty status takes no room.
+
+  ```tsx
+  <Stack gap={4}>
+    {longForm}
+    <ActionBar status="Draft saved at 5:00 PM" stickyBelow="md">
+      <Button variant="secondary" onPress={save}>
+        Save draft
+      </Button>
+      <Button onPress={finish}>Finish</Button>
+    </ActionBar>
+  </Stack>
+  ```
+
+  New generated classes `sw-action-bar`, `sw-action-bar-status`,
+  `sw-action-bar-actions`, `sw-action-bar-sticky` and
+  `sw-action-bar-sticky-below-md`; new exported types `ActionBarProps` and `Breakpoint` (the breakpoint names
+  `stickyBelow`, `hideBelow` and `columnsBelow` already take, today only
+  `'md'`). Additive.
+
+  Every generated `z-index` now comes from one stacking order
+  (`src/css/stacking.ts`): sticky table cells 1, the ActionBar 2, a glass `Card`
+  or `Accordion` holding an open popup 3 (was 1), the sticky `AppHeader` 4 (was
+  2), and popups 10 (the `Select` list was 3). An open `Select`, `ActionMenu`
+  or `Tooltip` inside a glass surface now paints over a stuck ActionBar, and
+  still under the AppHeader. An app that layered its own element between these
+  values should check it against the new numbers.
+
+- affd090: `Box` `border` accepts `'dashed'` as well as `true`: a hairline dashed border
+  in the `border` color token, for a space to fill in by hand such as a blank on
+  a printed form (see `docs/requests/teisoro-box-border-style.md`). Every
+  Box-based component takes it.
+
+  ```tsx
+  <Box border="dashed" padding={2} radius="sm">
+    {hint}
+  </Box>
+  ```
+
+  New generated classes `sw-border` and `sw-border-dashed` and a new exported
+  type `BoxBorder` (`boolean | 'dashed'`). `border` and `border={true}` look the
+  same as before, but the solid hairline is now the `sw-border` class instead of
+  an inline `style.border`; a consumer `style` still wins, and the prop still
+  wins over a Box-based component's own frame. A test that read
+  `element.style.border` should check the class instead. Additive for the
+  public API.
+
+- 6a4c4ab: `Field` takes `prefix` and `suffix`: short text inside the control's frame
+  before or after the value, such as a currency sign or a unit (see
+  `docs/requests/teisoro-field-adornment.md`).
+
+  ```tsx
+  <Field label="Drop amount" prefix="$">
+    <input inputMode="decimal" name="drop" />
+  </Field>
+  ```
+
+  The text is not part of the value. The generated `sw-field-adorned` wrapper
+  draws the control frame and focus ring, `sw-field-prefix` and
+  `sw-field-suffix` are muted, and the input is named by its label plus the
+  adornment ("Drop amount $") through `aria-labelledby`. An input that names
+  itself with its own `aria-label` or `aria-labelledby` keeps that name, and the
+  adornment joins its `aria-describedby` instead. A press on the prefix, the
+  suffix or the frame focuses the input. Adornments need one
+  native `<input>` child; anything else throws a `TypeError`. Additive; an
+  unadorned `Field` renders as before.
+
+- 988bd2c: `Grid` takes `align` (`start`, `center`, `end`, `stretch`): where each child
+  sits in the height of its row, through the same generated `sw-align-*` classes
+  and `Align` type as `Stack` and `Inline` (see the 2026-09-28 follow-up in
+  `docs/requests/teisoro-grid.md`). `align="end"` keeps a row of fields level
+  when one label wraps:
+
+  ```tsx
+  <Grid align="end" columns={2} gap={3}>
+    {fields}
+  </Grid>
+  ```
+
+  Additive; unset, no class is added and children stretch as before.
+
+- c3d04a8: `Progress` takes `showCount` (default `true`). `showCount={false}` hides the
+  visible `value / max` count beside the label when the page shows its own count
+  caption, so the count appears once (see the 2026-09-28 follow-up in
+  `docs/requests/teisoro-progress.md`). The progress bar still exposes its value
+  and maximum to assistive tech.
+
+  ```tsx
+  <Progress label="Registers closed" max={2} showCount={false} value={0} />
+  ```
+
+  Additive; the count shows as before when the prop is left out.
+
 ## 1.8.0
 
 ### Minor Changes

package/README.md

@@ -7,6 +7,7 @@ import '@scalewing/react/styles.css';
 import '@scalewing/react/palette/cerulean.css';
 import {
   Accordion,
+  ActionBar,
   ActionMenu,
   BarChart,
   Box,
@@ -44,10 +45,54 @@ import {
 
 Import the CSS once at the application entry. Do not copy it into your source tree. Optional: import one `@scalewing/react/palette/<id>.css` file after it, or set `data-palette` on the `data-theme` node. React apps can set `palette` on `ThemeProvider` instead.
 
+`Box` `border` draws a hairline in the `border` color token: `border` (or `border={true}`) is solid, and `border="dashed"` is dashed (the generated `sw-border` and `sw-border-dashed` classes; a `style` you pass still wins), for a space to fill in by hand such as a blank on a printed form. It does not make the box look or act like an input. Every `Box`-based component takes it.
+
 `Box hideBelow="md"` hides a region under 48rem and `hideFrom="md"` hides it at 48rem and wider, so a product can swap a wide layout for a narrow one without its own stylesheet. Hidden regions leave the accessibility tree; do not use this to protect data. `Box as="a"` is a layout link. Use `Button` for press actions. `Field` associates a native `<input>` or `<select>` with a label and token gap; native text controls inherit the generated document canvas. `Select` is a labeled listbox menu when the open list must match the canvas.
 
 `Field` supports optional `description`, `error`, and `required` on one native input, select, or textarea child. It preserves an existing `aria-describedby`, appends a stable message ID, and replaces the hint with an alert when an error is supplied. `error` sets `aria-invalid` and token-owned invalid styling. The consumer owns validation and localized messages.
 
+`Field` `prefix` and `suffix` put short text such as `$` or `%` inside the frame of one native `<input>` child, before or after the value. The text is not part of the value; the input is named by its label plus the adornment (`"Drop amount $"`), unless it names itself with its own `aria-label` or `aria-labelledby`, in which case the adornment joins its description. A press anywhere on the frame focuses the input. Formatting the value stays with the consumer. Any other child throws a `TypeError`.
+
+```tsx
+<Field label="Drop amount" prefix="$">
+  <input inputMode="decimal" name="drop" />
+</Field>
+```
+
+`Accordion` is a native `<details>` disclosure controlled by `open` and `onOpenChange`. A token chevron at the end of the header replaces the browser triangle and turns when it opens (it holds still under reduced motion). `subtitle` adds one muted caption line under the title, such as a summary of what the section holds; it wraps rather than truncating and is read after the title. `size="sm"` is a quieter disclosure nested inside other content: a label-size title, tighter padding, smaller corners and a header that is an `sm` control (at least 32px).
+
+```tsx
+<Accordion
+  open={open}
+  onOpenChange={setOpen}
+  subtitle="Twelve sightings · Two nests"
+  title="Wetlands"
+>
+  <Accordion
+    open={methodOpen}
+    onOpenChange={setMethodOpen}
+    size="sm"
+    title="How the count is taken"
+  >
+    {method}
+  </Accordion>
+</Accordion>
+```
+
+`ActionBar` keeps the actions of a long page on a glass bar stuck to the bottom of the viewport, with an optional one-line `status` (such as when the work was last saved). Put it last in the content it acts on: it stays stuck while that content scrolls by and then rests in its own place at the end. `stickyBelow="md"` sticks only on a phone and leaves the bar in page flow from `md` up. The bar clears `env(safe-area-inset-bottom)` (set `viewport-fit=cover` in the page's viewport meta for the inset to apply). Its children are the actions: on a phone they share one row under the status. The status is a polite live region (`role="status"`, kept in the page even while empty), so a new status such as "Draft saved at 5:00 PM" is announced; do not announce the same save a second time with your own notice. An open `Select`, `ActionMenu` or `Tooltip` paints over the bar, including inside a glass `Card` or `Accordion`.
+
+```tsx
+<Stack gap={4}>
+  {longForm}
+  <ActionBar status="Draft saved at 5:00 PM" stickyBelow="md">
+    <Button variant="secondary" onPress={save}>
+      Save draft
+    </Button>
+    <Button onPress={finish}>Finish</Button>
+  </ActionBar>
+</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.
 
 `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.
@@ -60,7 +105,7 @@ Import the CSS once at the application entry. Do not copy it into your source tr
 
 `Spinner` shows indeterminate loading in small, medium, or large sizes. Supply localized `label` for the one announced status in a loading region. Use `decorative` on additional indicators beside that status so screen readers do not hear the same message repeatedly. Reduced motion leaves a static accented ring.
 
-`Progress` shows a known value between zero and a positive maximum. It uses native progressbar semantics and displays the value and maximum beside the localized label. Invalid bounds throw instead of silently clamping. Optional `tone` is `accent`, `success`, or `danger`.
+`Progress` shows a known value between zero and a positive maximum. It uses native progressbar semantics and displays the value and maximum beside the localized label. Invalid bounds throw instead of silently clamping. Optional `tone` is `accent`, `success`, or `danger`. `showCount={false}` hides the visible `value / max` count when the page shows its own count caption, so the count appears once; the progress bar still exposes its value and maximum.
 
 `Tooltip` adds supplementary plain-text help to one labelled, focusable trigger. Supply localized `content` and an existing trigger element with its own accessible name. It opens on hover or focus, closes on pointer leave, blur, Escape, or outside touch, and toggles on touch. Keep required instructions visible outside the tooltip.
 
@@ -87,11 +132,24 @@ Every `Box`-based component (`Box`, `Stack`, `Inline`, `Card`, `Grid`, …) take
 
 Values outside the catalog throw a `RangeError`. There is no per-breakpoint span and no arbitrary column template.
 
+`Grid` `align` (`start`, `center`, `end`, `stretch`) sets where each child sits in the height of its row, with the same generated `sw-align-*` classes as `Stack` and `Inline`. Unset, children stretch. `align="end"` keeps a row of fields level when one label wraps:
+
+```tsx
+<Grid align="end" columns={2} gap={3}>
+  <Field label="Nest height above the waterline">{heightInput}</Field>
+  <Field label="Eggs">{eggsInput}</Field>
+</Grid>
+```
+
 `DenominationGrid` shows integer counts per unit across a fixed set of columns. The `strip` layout is a captioned table: each row has a toned label with an icon slot, muted zero cells, optional signed deltas toned by sign, and an optional consumer-formatted `total` that moves under the label on a phone. A strip wider than its container scrolls sideways inside its own keyboard-focusable region, named after `label`, with the row labels pinned at the start; the page never scrolls sideways. The `tiles` layout stacks the column label, the count, and an optional `subtotal` string per column. The primitive does no arithmetic and no currency formatting; tones reuse the Badge vocabulary. Invalid columns, rows, or cells throw.
 
 `FilterChips` presents a long, wrapping single-choice filter set. Provide a localized group `label`, controlled `value`, `onChange`, and options with stable values and localized labels. An optional non-negative integer `count` renders as a tabular chicklet after the label and is part of the option's accessible name; a zero count quiets the chip until it is selected. Native radios provide arrow and Space navigation; disabled options are skipped.
 
-`DateField` is a controlled native date input. Supply `value`, `min`, and `max` as valid `YYYY-MM-DD` dates; use an empty `value` for a blank field. Its callback returns a date-only string or an empty string, without timezone conversion. Invalid serialized dates and inverted bounds throw; a value outside the bounds remains visible with invalid styling. For a blank required field, supply `error` when form validation runs to show the message and invalid styling. The browser chooses the calendar and localized display.
+`DateField` is a controlled date-only field that draws its own calendar. Supply `value`, `min`, and `max` as valid `YYYY-MM-DD` dates; use an empty `value` for a blank field. Its callback returns a date-only string or an empty string, without timezone conversion. Invalid serialized dates and inverted bounds throw; a value outside the bounds remains visible with invalid styling. For a blank required field, supply `error` when form validation runs to show the message and invalid styling.
+
+People type the date into a text entry in the locale's numeric order (`MM/DD/YYYY` for en-US, `DD/MM/YYYY` for es), with any non-digit separator, eight bare digits, or ISO `YYYY-MM-DD`. A keystroke calls `onChange` once the entry is complete, meaning its last field is at full width (four year digits, or two digits for a trailing day or month, as in ISO); otherwise the date commits when the person leaves the field or presses Enter, so typing `2024-03-10` never sends `2024-03-01` on the way. If the parent keeps the old value, the typed text stays on screen; any other outside change replaces it. Text that is not a date keeps the last value and, once the person leaves the field, sets `aria-invalid` and shows `labels.invalidEntry`. Like the native date input, the entry blocks form submission through `setCustomValidity`: `labels.invalidEntry` while its text is not a date, and `labels.outOfRange` while its date, typed or given, is outside `min`/`max`. The calendar button beside it opens a WAI-ARIA date picker dialog anchored under the field on the popover layer: the month grid shows today, the selected day, and days outside `min`/`max` as `aria-disabled` (padding before `0001-01-01` or after `9999-12-31` is blank and inert); arrows move by day and week, Home and End to the week's edges, PageUp and PageDown by month, Shift with them by year, Enter or Space selects and closes, and Escape closes and returns focus to the button. Month and year selectors in the header jump decades (the year list spans 120 years back and 20 ahead of today and the shown month, cut to `min` and `max`; the month list offers only months with a day inside them). A new `value`, `min`, or `max` while the calendar is open moves it to the new value or back inside the bounds. **Today** selects today; **Clear** appears only when the field is not `required`.
+
+`locale` (BCP 47) sets month and weekday names, spoken dates, and the typed order; it defaults to the nearest `lang` attribute when the field mounts, then `en-US`, and a malformed tag throws. `weekStartsOn` is `0` (Sunday, the default) or `1` (Monday). `labels` overrides the control's own words, English by default: `chooseDate`, `previousMonth`, `nextMonth`, `month`, `year`, `today`, `clear`, `invalidEntry`, `outOfRange`, and the placeholder letters `dayPlaceholder`, `monthPlaceholder`, `yearPlaceholder`. The field label names only the text entry; the calendar button is named `labels.chooseDate` and described by the field label, so tests find the entry with `getByLabel` or `getByRole('textbox', { name })`.
 
 ```tsx
 <DateField
@@ -101,6 +159,15 @@ Values outside the catalog throw a `RangeError`. There is no per-breakpoint span
   min="2024-01-01"
   max="2024-12-31"
 />
+
+<DateField
+  label="Fecha del avistamiento"
+  locale="es"
+  weekStartsOn={1}
+  labels={{ chooseDate: 'Elegir fecha', today: 'Hoy', clear: 'Borrar' }}
+  value={fecha}
+  onChange={setFecha}
+/>
 ```
 
 ```tsx

package/dist/anchored-position.d.ts

@@ -0,0 +1,28 @@
+export type AnchorRect = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+export type PopoverSize = {
+    width: number;
+    height: number;
+};
+export type Viewport = {
+    width: number;
+    height: number;
+};
+export type AnchoredPosition = {
+    left: number;
+    top: number;
+};
+/**
+ * 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`.
+ */
+export declare function anchoredPosition(anchor: AnchorRect, size: PopoverSize, viewport: Viewport, { gap, inset, rtl }?: {
+    gap?: number | undefined;
+    inset?: number | undefined;
+    rtl?: boolean | undefined;
+}): AnchoredPosition;

package/dist/anchored-position.js

@@ -0,0 +1,17 @@
+/**
+ * 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`.
+ */
+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));
+    const below = anchor.bottom + gap;
+    const above = anchor.top - gap - size.height;
+    const fitsBelow = below + size.height <= viewport.height - inset;
+    const fitsAbove = above >= inset;
+    const top = fitsBelow || !fitsAbove ? below : above;
+    const maxTop = viewport.height - inset - size.height;
+    return { left, top: Math.max(inset, Math.min(top, maxTop)) };
+}

package/dist/calendar-keys.d.ts

@@ -0,0 +1,19 @@
+import { type WeekStart } from './calendar-month.js';
+export type CalendarKey = {
+    key: string;
+    shiftKey: boolean;
+};
+export type CalendarKeyContext = {
+    weekStartsOn: WeekStart;
+    min?: string;
+    max?: string;
+    /** Right-to-left grids swap the meaning of the horizontal arrows. */
+    rtl?: boolean;
+};
+/**
+ * The day a calendar grid key moves focus to, following the WAI-ARIA date
+ * picker dialog pattern: arrows by day and week, Home and End to the week's
+ * edges, PageUp and PageDown by month, and with Shift by year. The result
+ * stays inside `[min, max]`. Keys the grid does not own return null.
+ */
+export declare function calendarKeyTarget(key: CalendarKey, focused: string, context: CalendarKeyContext): string | null;

package/dist/calendar-keys.js

@@ -0,0 +1,39 @@
+import { addDays, addMonths, weekdayOf, } from './calendar-month.js';
+import { clampDateOnly } from './date-only.js';
+function unclampedTarget({ key, shiftKey }, focused, { weekStartsOn, rtl = false }) {
+    const forward = rtl ? 'ArrowLeft' : 'ArrowRight';
+    const back = rtl ? 'ArrowRight' : 'ArrowLeft';
+    const column = (weekdayOf(focused) - weekStartsOn + 7) % 7;
+    switch (key) {
+        case forward:
+            return addDays(focused, 1);
+        case back:
+            return addDays(focused, -1);
+        case 'ArrowDown':
+            return addDays(focused, 7);
+        case 'ArrowUp':
+            return addDays(focused, -7);
+        case 'Home':
+            return addDays(focused, -column);
+        case 'End':
+            return addDays(focused, 6 - column);
+        case 'PageUp':
+            return addMonths(focused, shiftKey ? -12 : -1);
+        case 'PageDown':
+            return addMonths(focused, shiftKey ? 12 : 1);
+        default:
+            return null;
+    }
+}
+/**
+ * The day a calendar grid key moves focus to, following the WAI-ARIA date
+ * picker dialog pattern: arrows by day and week, Home and End to the week's
+ * edges, PageUp and PageDown by month, and with Shift by year. The result
+ * stays inside `[min, max]`. Keys the grid does not own return null.
+ */
+export function calendarKeyTarget(key, focused, context) {
+    const target = unclampedTarget(key, focused, context);
+    return target === null
+        ? null
+        : clampDateOnly(target, context.min, context.max);
+}

package/dist/calendar-labels.d.ts

@@ -0,0 +1,12 @@
+import { type CalendarMonth, type WeekStart } from './calendar-month.js';
+export type WeekdayLabel = {
+    short: string;
+    long: string;
+};
+/** Weekday column headers in display order, named by `Intl` for `locale`. */
+export declare function weekdayLabels(locale: string, weekStartsOn: WeekStart): WeekdayLabel[];
+/** The twelve month names, January first, as `locale` writes them alone. */
+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;

package/dist/calendar-labels.js

@@ -0,0 +1,32 @@
+import { weekdayOrder, } from './calendar-month.js';
+import { dateFormatter, formatterDate } from './date-formatters.js';
+import { parseDateOnly } from './date-only.js';
+/** A Sunday; any week works because only the weekday names are read. */
+const REFERENCE_SUNDAY = { year: 2023, month: 1, day: 1 };
+/** Weekday column headers in display order, named by `Intl` for `locale`. */
+export function weekdayLabels(locale, weekStartsOn) {
+    const short = dateFormatter(locale, { weekday: 'short' });
+    const long = dateFormatter(locale, { weekday: 'long' });
+    return weekdayOrder(weekStartsOn).map((weekday) => {
+        const date = formatterDate({
+            ...REFERENCE_SUNDAY,
+            day: REFERENCE_SUNDAY.day + weekday,
+        });
+        return { short: short.format(date), long: long.format(date) };
+    });
+}
+/** The twelve month names, January first, as `locale` writes them alone. */
+export function monthNames(locale) {
+    const format = dateFormatter(locale, { month: 'long' });
+    return Array.from({ length: 12 }, (_, index) => format.format(formatterDate({ year: 2023, month: index + 1, day: 1 })));
+}
+export function monthTitle(month, locale) {
+    return dateFormatter(locale, { month: 'long', year: 'numeric' }).format(formatterDate({ ...month, day: 1 }));
+}
+/** A spoken date such as "Sunday, March 10, 2024"; empty for no date. */
+export function formatDateLabel(value, locale) {
+    const parts = parseDateOnly(value);
+    if (!parts)
+        return '';
+    return dateFormatter(locale, { dateStyle: 'full' }).format(formatterDate(parts));
+}

package/dist/calendar-month.d.ts

@@ -0,0 +1,36 @@
+export type CalendarMonth = {
+    year: number;
+    /** 1–12. */
+    month: number;
+};
+/** 0 is Sunday, 1 is Monday, matching `Date.prototype.getDay`. */
+export type WeekStart = 0 | 1;
+export type CalendarCell = {
+    value: string;
+    day: number;
+    inMonth: boolean;
+};
+/** 0 is Sunday. */
+export declare function weekdayOf(value: string): number;
+export declare function addDays(value: string, delta: number): string;
+/** Same day of the month `delta` months away, capped at that month's length. */
+export declare function addMonths(value: string, delta: number): string;
+export declare function monthOf(value: string): CalendarMonth;
+export declare function shiftMonth(month: CalendarMonth, delta: number): CalendarMonth;
+export declare function firstOfMonth(month: CalendarMonth): string;
+export declare function lastOfMonth(month: CalendarMonth): string;
+/** Whether any day of the month falls inside `[min, max]`. */
+export declare function monthInRange(month: CalendarMonth, min?: string, max?: string): boolean;
+/**
+ * The months of `year` with any day inside `[min, max]`, 1–12, for a month
+ * selector that only offers months a person can open.
+ */
+export declare function monthsInRange(year: number, min?: string, max?: string): number[];
+/**
+ * Six rows of seven cells covering the month, padded with the neighboring
+ * months so the grid never changes height. Padding before 0001-01-01 or
+ * after 9999-12-31 is `null`: no four-digit date exists there.
+ */
+export declare function monthGrid(month: CalendarMonth, weekStartsOn: WeekStart): (CalendarCell | null)[][];
+/** Weekday indexes in display order for the given week start. */
+export declare function weekdayOrder(weekStartsOn: WeekStart): number[];

package/dist/calendar-month.js

@@ -0,0 +1,111 @@
+import { daysInMonth, formatDateOnly, isValidDateParts, parseDateOnly, } from './date-only.js';
+/*
+ * Day arithmetic runs on a proleptic Gregorian day count, so it never passes
+ * through a Date, a time zone, or a daylight-saving jump.
+ * Algorithm: Howard Hinnant, "chrono-compatible low-level date algorithms".
+ */
+function toDayNumber({ year, month, day }) {
+    const y = month <= 2 ? year - 1 : year;
+    const era = Math.floor(y / 400);
+    const yearOfEra = y - era * 400;
+    const monthIndex = (month + 9) % 12;
+    const dayOfYear = Math.floor((153 * monthIndex + 2) / 5) + day - 1;
+    const dayOfEra = yearOfEra * 365 +
+        Math.floor(yearOfEra / 4) -
+        Math.floor(yearOfEra / 100) +
+        dayOfYear;
+    return era * 146097 + dayOfEra - 719468;
+}
+function fromDayNumber(dayNumber) {
+    const z = dayNumber + 719468;
+    const era = Math.floor(z / 146097);
+    const dayOfEra = z - era * 146097;
+    const yearOfEra = Math.floor((dayOfEra -
+        Math.floor(dayOfEra / 1460) +
+        Math.floor(dayOfEra / 36524) -
+        Math.floor(dayOfEra / 146096)) /
+        365);
+    const dayOfYear = dayOfEra -
+        (365 * yearOfEra + Math.floor(yearOfEra / 4) - Math.floor(yearOfEra / 100));
+    const monthIndex = Math.floor((5 * dayOfYear + 2) / 153);
+    const day = dayOfYear - Math.floor((153 * monthIndex + 2) / 5) + 1;
+    const month = monthIndex < 10 ? monthIndex + 3 : monthIndex - 9;
+    const year = yearOfEra + era * 400 + (month <= 2 ? 1 : 0);
+    return { year, month, day };
+}
+function requireDate(value) {
+    const parts = parseDateOnly(value);
+    if (!parts)
+        throw new RangeError('expected a valid YYYY-MM-DD date');
+    return parts;
+}
+/** 0 is Sunday. */
+export function weekdayOf(value) {
+    // Day 0 of the count is 1970-01-01, a Thursday.
+    return (((toDayNumber(requireDate(value)) + 4) % 7) + 7) % 7;
+}
+export function addDays(value, delta) {
+    return formatDateOnly(fromDayNumber(toDayNumber(requireDate(value)) + delta));
+}
+/** Same day of the month `delta` months away, capped at that month's length. */
+export function addMonths(value, delta) {
+    const parts = requireDate(value);
+    const month = shiftMonth(parts, delta);
+    return formatDateOnly({
+        ...month,
+        day: Math.min(parts.day, daysInMonth(month.year, month.month)),
+    });
+}
+export function monthOf(value) {
+    const parts = requireDate(value);
+    return { year: parts.year, month: parts.month };
+}
+export function shiftMonth(month, delta) {
+    const index = month.year * 12 + (month.month - 1) + delta;
+    return { year: Math.floor(index / 12), month: (index % 12) + 1 };
+}
+export function firstOfMonth(month) {
+    return formatDateOnly({ ...month, day: 1 });
+}
+export function lastOfMonth(month) {
+    return formatDateOnly({
+        ...month,
+        day: daysInMonth(month.year, month.month),
+    });
+}
+/** Whether any day of the month falls inside `[min, max]`. */
+export function monthInRange(month, min, max) {
+    return ((min === undefined || lastOfMonth(month) >= min) &&
+        (max === undefined || firstOfMonth(month) <= max));
+}
+/**
+ * The months of `year` with any day inside `[min, max]`, 1–12, for a month
+ * selector that only offers months a person can open.
+ */
+export function monthsInRange(year, min, max) {
+    return Array.from({ length: 12 }, (_, index) => index + 1).filter((month) => monthInRange({ year, month }, min, max));
+}
+/**
+ * Six rows of seven cells covering the month, padded with the neighboring
+ * months so the grid never changes height. Padding before 0001-01-01 or
+ * after 9999-12-31 is `null`: no four-digit date exists there.
+ */
+export function monthGrid(month, weekStartsOn) {
+    const first = firstOfMonth(month);
+    const leading = (weekdayOf(first) - weekStartsOn + 7) % 7;
+    const start = toDayNumber(requireDate(first)) - leading;
+    return Array.from({ length: 6 }, (_, row) => Array.from({ length: 7 }, (_, column) => {
+        const parts = fromDayNumber(start + row * 7 + column);
+        if (!isValidDateParts(parts))
+            return null;
+        return {
+            value: formatDateOnly(parts),
+            day: parts.day,
+            inMonth: parts.year === month.year && parts.month === month.month,
+        };
+    }));
+}
+/** Weekday indexes in display order for the given week start. */
+export function weekdayOrder(weekStartsOn) {
+    return Array.from({ length: 7 }, (_, index) => (index + weekStartsOn) % 7);
+}

package/dist/calendar-years.d.ts

@@ -0,0 +1,14 @@
+/** How far the year list reaches past today and the shown month by default. */
+export declare const YEARS_BACK = 120;
+export declare const YEARS_AHEAD = 20;
+export type YearRange = {
+    first: number;
+    last: number;
+};
+/**
+ * The years a calendar's year selector offers: 120 years before and 20
+ * after both today and the shown year, cut to `min` and `max`. The shown
+ * year is always inside, so the selector can display it.
+ */
+export declare function calendarYearRange(shownYear: number, todayYear: number, min?: string, max?: string): YearRange;
+export declare function yearsIn({ first, last }: YearRange): number[];

package/dist/calendar-years.js

@@ -0,0 +1,20 @@
+import { parseDateOnly } from './date-only.js';
+/** How far the year list reaches past today and the shown month by default. */
+export const YEARS_BACK = 120;
+export const YEARS_AHEAD = 20;
+/**
+ * The years a calendar's year selector offers: 120 years before and 20
+ * after both today and the shown year, cut to `min` and `max`. The shown
+ * year is always inside, so the selector can display it.
+ */
+export function calendarYearRange(shownYear, todayYear, min, max) {
+    const minYear = min === undefined ? 1 : (parseDateOnly(min)?.year ?? 1);
+    const maxYear = max === undefined ? 9999 : (parseDateOnly(max)?.year ?? 9999);
+    return {
+        first: Math.max(minYear, 1, Math.min(shownYear, todayYear) - YEARS_BACK),
+        last: Math.min(maxYear, 9999, Math.max(shownYear, todayYear) + YEARS_AHEAD),
+    };
+}
+export function yearsIn({ first, last }) {
+    return Array.from({ length: last - first + 1 }, (_, index) => first + index);
+}

package/dist/components/Accordion.d.ts

@@ -1,8 +1,13 @@
 import { type DetailsHTMLAttributes, type ReactNode } from 'react';
+export type AccordionSize = 'sm' | 'md';
 export type AccordionProps = Omit<DetailsHTMLAttributes<HTMLDetailsElement>, 'onToggle' | 'open' | 'title' | 'children'> & {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     title: string;
+    /** One muted line under the title, such as a summary of the content. */
+    subtitle?: string;
+    /** `sm` is a quieter disclosure nested inside other content. */
+    size?: AccordionSize;
     children: ReactNode;
 };
-export declare function Accordion({ children, className, onOpenChange, open, title, ...rest }: AccordionProps): import("react").JSX.Element;
+export declare function Accordion({ children, className, onOpenChange, open, size, subtitle, title, ...rest }: AccordionProps): import("react").JSX.Element;

package/dist/components/Accordion.js

@@ -4,11 +4,20 @@ import { cx } from '../class-names.js';
 import { spacingClassNames } from '../spacing-classes.js';
 import { Stack } from './Stack.js';
 import { Text } from './Text.js';
-export function Accordion({ children, className, onOpenChange, open, title, ...rest }) {
-    return (_jsxs("details", { ...rest, className: cx('sw-accordion', className), open: open, onToggle: (event) => {
+const spaceBySize = { sm: 3, md: 4 };
+/* The sm header is an sm control: a step of block padding over its generated
+   min-height instead of the full inset, so it sits lower than a section. */
+const summarySpacingBySize = {
+    sm: { paddingX: 3, paddingY: 1 },
+    md: { padding: 4 },
+};
+const titleVariantBySize = { sm: 'label', md: 'title' };
+export function Accordion({ children, className, onOpenChange, open, size = 'md', subtitle, title, ...rest }) {
+    const space = spaceBySize[size];
+    return (_jsxs("details", { ...rest, className: cx('sw-accordion', size === 'sm' && 'sw-accordion-sm', className), open: open, onToggle: (event) => {
             const next = event.currentTarget.open;
             if (next !== open) {
                 onOpenChange(next);
             }
-        }, children: [_jsx("summary", { className: cx('sw-accordion-summary', ...spacingClassNames({ padding: 4 })), children: _jsx(Text, { as: "span", variant: "title", children: title }) }), _jsx(Stack, { gap: 4, padding: 4, paddingTop: 0, children: children })] }));
+        }, children: [_jsxs("summary", { className: cx('sw-accordion-summary', ...spacingClassNames(summarySpacingBySize[size])), children: [_jsxs("span", { className: "sw-accordion-heading", children: [_jsx(Text, { as: "span", variant: titleVariantBySize[size], children: title }), ' ', subtitle ? (_jsx(Text, { as: "span", color: "muted", variant: "caption", children: subtitle })) : null] }), _jsx("span", { "aria-hidden": "true", className: "sw-accordion-marker" })] }), _jsx(Stack, { gap: space, padding: space, paddingTop: 0, children: children })] }));
 }