@tensor_1/react 2.35.0 → 2.37.0

package/README.md

@@ -460,6 +460,18 @@ const spanLayout = layoutMonthSpans(spansInSalienceOrder, grid, { timeZone, week
 - **`<List roving>`**: the items are one tab stop (ArrowUp/ArrowDown, Home, End; Enter or Space activates the
   focused item's `onClick`). A control inside an item keeps its own tab stop and keys. Items may be wrapped or
   rendered later by a child component.
+- **Print (HAR-1541).** The stylesheet has `@media print` rules; add no print CSS of your own. On paper the same
+  markup has no scroller, fits the page width, and keeps a week row or an agenda row on one page. The colours are
+  the `--uix-print-*` tokens (light, whatever theme the screen has). Nothing depends on a background: the `high`
+  band is a heavy edge on a paper surface (on paper `--calendar-band-high-fill` is the paper's and the edge reads
+  the new `--calendar-band-high-edge`; no screen rule reads it), each window pattern has an edge style of its own (`solid`, `diagonal` dashed, `cross`
+  double, `dotted` dotted), and the hour lines are drawn as lines. Month chips wrap to show the whole title, and
+  a time-grid item is at least as tall as its time and grows to hold its words (one too short for a line on a
+  screen prints them too). The header's buttons, the "now" line and a pending move are not printed; the period
+  title, the zone label and the legend are. A long agenda mounts every row while the page prints (`beforeprint`,
+  or print media) and is a window of rows again afterwards. One limit: `window.print()` called from inside a
+  React effect, on mount or later, runs before those rows are there. Such a page calls it from an event handler
+  or a timer, or passes `virtualizeAbove={Infinity}`.
 - **Colour.** Every calendar colour is named once at the top of `scheduling-calendar.css` (`--calendar-*`).
 - **Deprecated, still working in 2.x:** `entry.state` / `SchedulingEntryState`, `overlay.kind` /
   `SchedulingOverlayKind` and the `previous` / `next` labels. An entry with `state` is no longer tinted: the two
@@ -467,27 +479,44 @@ const spanLayout = layoutMonthSpans(spansInSalienceOrder, grid, { timeZone, week
 
 ### SchedulingTimeline
 
-Lanes of bars on a time axis (HAR-1364; TENSOR's change day/week timeline, rollout Gantt rows and licence-renewal
-markers). It pairs with `SchedulingCalendar`: same entry states, the same explicit time zone.
+Lanes of bars on a time axis (HAR-1364, HAR-1521): schedules by service, rollout rows, renewal markers. It pairs
+with `SchedulingCalendar`: the same item API (`band`, `status`, `markers`, `accessibleName`), the same explicit
+time zone, the same proposal model for moves.
 
 ```tsx
 <SchedulingTimeline
-  lanes={[{ id: 'net', label: 'Network', meta: '3 changes' }]}
-  items={changes.map((c) => ({ id: c.id, laneId: c.team, title: c.title, start: c.start, end: c.end, state: c.state }))}
-  range={{ start: weekStart, end: weekEnd }} scale="day" timeZone={tz} now={nowIso}
-  overlays={[{ id: 'q4', kind: 'freeze', label: 'Q4 freeze', start, end }]}
-  markers={[{ id: 'r1', label: 'Renewal: Fortinet', at, laneId: 'net' }]}
-  onSelectItem={(item) => openChange(item.id)}
-  onMoveItem={(id, { start, end }) => reschedule(id, start, end)}
+  lanes={services.map((s) => ({ id: s.id, label: s.name }))}
+  groups={[{ id: 'pay', label: 'Payments', laneIds: ['checkout', 'ledger'], collapsed, summary: { count: 7 } }]}
+  onToggleGroup={(id) => toggle(id)}
+  items={rows.map((r) => ({ id: r.id, laneId: r.serviceId, title: r.title, start: r.start, end: r.end, band: r.band, status: r.status, markers: r.markers }))}
+  range={{ start: weekStart, end: weekEnd }} scale="day" subTicks={[6, 12, 18]} timeZone={tz} now={nowIso}
+  overlays={[{ id: 'q4', kindLabel: 'Hold', label: 'Quarter close', pattern: 'diagonal', laneIds: ['ledger'], start, end }]}
+  flagOverlaps={false}
+  onSelectItem={(item) => open(item.id)}
+  onProposeMove={(id, { start, end }) => askToMove(id, start, end)}
+  notice={truncated && 'Showing 500 of 1,240 items.'}
+  columnNotes={{ '2026-10-08': '12 more not shown' }}
 />
 ```
 
-- **Axis:** `scale` is `hour`, `day` (default), `week` or `month`. Ticks fall on wall-clock boundaries in `timeZone` (DST and half-hour zones included). `tickWidth` sets the width of one unit; the axis scrolls inside the component and the lane column stays put.
-- **Bars:** overlapping bars in a lane stack and are hatched (`data-conflict`), so an overlap reads without colour. A bar cut off by the range shows a dashed edge. `renderItem` replaces the bar text. The full title is in the name and the `title` tooltip.
-- **Moving:** with `onMoveItem`, bars move by drag or Shift+←/→ and their end changes with Alt+Shift+←/→. Moves snap to `step` (15 min on an hour axis, 1 h on a day axis, 1 day otherwise), and each move is announced. `movable: false` pins a bar. The component never moves a bar itself; it reports the new start and end and renders what you pass back.
-- **Keyboard:** one tab stop. ←/→ go to the previous or next bar in a lane, ↑/↓ to the nearest bar in the next lane, Home/End to the lane's ends, and Enter selects.
-- **Windows and markers:** `overlays` (`freeze`, `maintenance`, `blackout`; all lanes, or one with `laneId`), `markers` (a point in time) and `now` are drawn behind the bars and listed for screen readers.
-- Pure helpers are exported for tests and server code: `timelineTicks`, `placeSpan`, `layoutLane`, `shiftSpan`, `snapToStep`, `pixelsToMs`, `defaultTimelineStep`.
+- **Axis:** `scale` is `hour`, `day` (default), `week` or `month`. Ticks fall on wall-clock boundaries in `timeZone` (DST and half-hour zones included). `tickWidth` sets the width of one unit; the axis scrolls inside the component and the lane column stays put. On a `day` axis `subTicks` (local hours) draws minor ticks inside each day; on an `hour` axis an hour that occurs twice (the clocks went back) shows its UTC offset.
+- **Groups:** `groups` puts lanes into collapsible blocks, in the order given; a lane no group names is drawn after them. A collapsed group is one row with `summary.count` and `summary.markers`, which the consumer supplies: the timeline derives no count, and the `groupSummary` label words it (`Items: {count}` by default). That row stands for the lanes it hides: when a window covers one of them (or every lane), the row gets a strip under its head, one sub-row tall, and the window is drawn there, where the group label cannot lie over it. With `onToggleGroup` the consumer owns `collapsed`; without it the group opens and closes itself.
+- **Bars:** bars that share time in a lane stack in sub-rows, packed by `packLanes`. A bar is drawn at least 24 px wide (`--timeline-bar-min`) and is packed as that wide, so two bars never cover each other and each is a 24 × 24 px target with nothing over it. The price is height: where bars are closer together than 24 px of axis, a lane takes more sub-rows than it has bars running at once. On a month axis at the default `tickWidth` 24 px is about six days, so a lane of daily bars is six sub-rows tall; a wider `tickWidth` brings it back down. The packing follows the width of the track (it is measured), and when it changes the first row in view is kept where it was. Only `band="high"` is filled; `status` is a line style; `markers` are shapes or icons with text. `renderItem` replaces the bar text, which is cut at a word: a first word that does not fit is not shown, so no part of a word or of a time is. The full title is in the name and the `title` tooltip.
+- **Stacking flag:** by default a bar that shares time with another bar of its lane is hatched (`data-conflict`) and its name says so (`labels.conflict`). With `flagOverlaps={false}` the stacking stays and the hatch and the words go: the consumer says what clashes, with a reason, through `markers`.
+- **Windows and markers:** an overlay is one neutral element with a `pattern` and its `kindLabel`, name and `scopeLabel` as text, however many rows there are. `laneIds` limits it to the rows of those lanes (unset: every row). With `onSelectOverlay` each window is a named button; without, windows are listed for screen readers. `markers` (a point in time, optionally with `laneIds`) and `now` are one line each. The now-line is neutral.
+- **Moving:** three models, chosen by the callback.
+  - `onProposeMove(id, { start, end, adjusted })`: drag a bar, or press Shift+←/→ to build a pending move, Enter to send it and Escape to drop it. One call per finished gesture. The timeline never moves the bar: an item whose props do not change is back where it was, so a refused move snaps back. Return a promise to keep the outline until it settles. On a week or month axis a step is a calendar day (the wall-clock time is kept across a clock change).
+  - `onMoveItem(id, { start, end })`: the 2.x model, one call for every key press and every drop.
+  - `onResizeItem(id, { start, end })`: Alt+Shift+←/→ moves the end of a bar. Without it there is no resize and no hint offers one.
+  Moves snap to `step` (15 min on an hour axis, 1 h on a day axis, 1 day otherwise). `movable: false` pins a bar.
+- **Keyboard:** the bars are one tab stop. ←/→ go to the previous or next bar in a lane, ↑/↓ to the nearest bar in the next lane (over group heads), Home/End to the ends of the lane, and Enter selects, or confirms a pending move, never both (a click or Space does nothing while a move is pending). A move that was sent is announced (`moveSent`).
+- **Long timelines:** above `virtualizeAbove` rows (default 150) only the rows near the viewport are mounted, and an arrow key that goes to a bar that is not mounted mounts it, scrolls to it and focuses it. The rows counted are the ones passed, `lanes` plus `groups`: the answer does not move with the width, with what is collapsed or with how the bars pack. What is mounted is what the viewport shows plus overscan (under 150 row elements up to a viewport of about 7,000 px). The row of the focused control is never unmounted. `maxHeight` makes the lanes scroll inside the timeline under the axis; without it the page scrolls.
+- **Notice and counts:** `notice` is shown above the axis; `columnNotes` puts a note on the column of a day (`YYYY-MM-DD` in `timeZone`).
+- **Row heights:** with `groups`, `laneIds` or a virtual window every row has a fixed height (a lane is its sub-rows, a group head one line) and a lane label that does not fit is cut with an ellipsis. A timeline that uses none of them keeps rows that grow with their label.
+- **Colour:** every colour is named once at the top of `scheduling-timeline.css` (`--timeline-*`). Forced colours are handled in `forced-colors.css`, as for the calendar.
+- **Print (HAR-1541).** The stylesheet has `@media print` rules; add no print CSS of your own. On paper the timeline has no scroller and nothing sticks: the axis is fitted to the page width and the bars follow (every position is a share of the axis), and a lane stays on one page. The colours are the `--uix-print-*` tokens (light, whatever theme the screen has). Nothing depends on a background: the `high` band is a heavy edge on a paper surface (on paper `--timeline-band-high-fill` is the paper's and the edge reads the new `--timeline-band-high-edge`; no screen rule reads it), each window pattern has an edge style of its own, and the grid lines are drawn as lines. A note on the column of a day is not cut at its column (notes on neighbouring days can meet on a narrow page). The "now" line and a pending move are not printed. A timeline over `virtualizeAbove` rows mounts every row and bar while the page prints and windows again afterwards; a page that calls `window.print()` from inside a React effect calls it from an event handler or a timer, or passes `virtualizeAbove={Infinity}`. Limits: a bar keeps its share of the axis, so on a narrow page a short bar shows its time and not its title (the title is still the bar's name); and the bars are packed into sub-rows for the width the timeline had on the screen, so print from a window about as wide as the page when bars are short and close together.
+- **Deprecated, still working in 2.x:** `item.state` / `SchedulingEntryState`, `overlay.kind` / `SchedulingTimelineOverlayKind` and the `states` / `overlays` labels. A bar with `state` is no longer tinted: the two problem states show a marker with the word for that state, and the kinds are told apart by pattern.
+- Pure helpers are exported for tests and server code: `timelineTicks`, `timelineSubTicks`, `timelineRepeatedHourOffset`, `placeSpan`, `layoutLane`, `shiftSpan`, `snapToStep`, `pixelsToMs`, `defaultTimelineStep`, `timelineStepDelta`.
 
 ### Calendar model (zoned days, hour slots, lanes)
 
@@ -872,3 +901,113 @@ const v = useVirtualRows(rows, { rowHeight: 44, estimatedViewportHeight: 600, en
 
 The density options no longer break a label inside a word at phone width ("Großzügig"); options
 that do not fit one row wrap as whole options.
+
+### Date fields, InlineEdit and other older gaps (2.36.0)
+
+Older kit issues that TENSOR's triage still found blocking on 2026-10-08. Everything is additive.
+
+#### DatePicker, DateTimePicker, DateRangePicker `mode="field"`
+
+```tsx
+<Field label={t('dueDate')} hint={t('workingDaysOnly')}>
+  <DatePicker value={due} onValueChange={setDue} name="due" locale={locale} weekStartsOn={1}
+    min="2026-11-02" max="2026-12-31" isUnavailable={isWeekend} />
+</Field>
+
+<Field label={t('starts')}>
+  <DateTimePicker value={starts} onValueChange={setStarts} timeZone="Europe/Vienna" minuteStep={15} />
+</Field>
+
+<DateRangePicker mode="field" value={period} onChange={setPeriod} label={t('period')} locale={locale} />
+```
+
+- **`DatePicker`** is a text input that shows the date and reads a typed one, with a button that
+  opens one month in a popover. The value is ISO `YYYY-MM-DD` or `null`; `name` submits it in a
+  hidden input whatever the field shows.
+- **Typing:** read on Enter and when focus leaves. ISO is always accepted; otherwise three numbers
+  in the locale's order (`3.4.2026` is 3 April in German, `3/4/2026` is 4 March in en-US). Text
+  that is not a date, or a date outside `min` / `max` / `isUnavailable`, marks the field invalid,
+  says why, and leaves `value` alone (`onInputProblem` tells a form). Clearing the field sets
+  `null`.
+- **Format:** the locale's numeric date by default. `formatDate` changes what the field writes;
+  pass `parseDate` with it when your format is not three numbers, and a `placeholder` so the
+  message can name the shape.
+- **Calendar keys:** arrows by day and week, Home / End to the ends of the week, PageUp / PageDown
+  by month, with Shift by year. Focus never leaves `min` / `max`; a day refused by `isUnavailable`
+  can take focus and is read out, but cannot be chosen. ArrowDown in the field opens the
+  calendar; Escape closes it, returns focus to the field and does not close a drawer around it.
+- **`DateTimePicker`** adds a time input. The value is `YYYY-MM-DDTHH:mm`, the shape
+  `datetime-local` holds, so it replaces that input without changing what a form submits. The
+  zone the wall clock is in is shown beside the time and is its description: `timeZone` shows
+  that zone's short name on the chosen day (it follows daylight saving), `timeZoneLabel` replaces
+  the text, and without either the viewer's own zone is shown. The value carries no zone.
+- **`DateRangePicker mode="field"`** is a trigger that shows the range and opens the months in a
+  popover; it closes when the range has both ends. `DateRangePicker` also takes `weekStartsOn`.
+- **Words:** `UixLabelsProvider` `datePicker`, `dateTimePicker` and the three new
+  `dateRangePicker` keys (`placeholder`, `fieldStart`, `fieldRange`).
+- **Helpers:** `parseDateInput`, `formatDateKey`, `datePattern`, `dateOrder`, `isValidDateKey`,
+  `splitDateTime`, `joinDateTime`, `timeZoneName`.
+
+#### InlineEdit
+
+```tsx
+<DescriptionItem term={t('title')}>
+  <InlineEdit label={t('title')} value={record.title} onSave={(next) => api.rename(record.id, next)}
+    validate={(next) => (next.trim() ? undefined : t('titleRequired'))} />
+</DescriptionItem>
+```
+
+The value is a button named by the value and "Edit {label}". Activating it swaps in an editor with
+Save and Cancel: Enter saves (Ctrl/⌘+Enter in `multiline`), Escape cancels without reaching a
+drawer around it, and nothing is saved on blur. A promise from `onSave` shows the busy state; a
+rejection keeps the draft and shows the reason. Afterwards focus is back on the value.
+`renderView` and `renderEditor` replace either half (a `Select`, a `DatePicker`); `disabled`
+renders plain text. Words: `labels` or `UixLabelsProvider` `inlineEdit`.
+
+#### RadioCard
+
+```tsx
+<RadioGroup variant="card" label={t('rollout')}>
+  <RadioCard name="rollout" value="team" title={t('oneTeam')} description={t('oneTeamHint')}
+    checked={rollout === 'team'} onChange={() => setRollout('team')} />
+  …
+</RadioGroup>
+```
+
+A native radio inside a card: one tab stop for the group, arrow keys choose, the whole card is
+the target. The choice is a border and a check mark, not colour alone. `media` puts a preview
+above the text. The grid wraps to one column on a phone.
+
+#### Tree loads children on expand
+
+```tsx
+<Tree nodes={roots} loadChildren={(node) => api.org.children(node.id)} />   // roots: { id, label, hasChildren: true }
+```
+
+A node with `hasChildren` and no `children` is expandable. The first time it is expanded
+`loadChildren` runs: the node is `aria-busy` and shows a loading row; a rejection shows an error
+row whose Enter, Space or click retries. Focus follows the row that replaces the one it was on,
+and lands on the node once its children are there. The tree keeps the loaded children; pass them
+back in `nodes` when you own the data. Words: `labels` or `UixLabelsProvider` `tree`.
+
+#### Avatar presence
+
+```tsx
+<Avatar presence="busy" src={user.photo} alt={user.name} />   <PresenceDot presence="away" />
+```
+
+`presence` is `online` (a filled dot), `busy` (a dot with a bar), `away` and `offline` (two
+rings): a shape as well as a colour, and the state in visually hidden text (`presenceLabels`
+translates it). `status` is still `presence="online"`. `PresenceDot` is the dot alone, named by
+its state (`label={null}` makes it decorative). Fixed: the dot was clipped to a quarter by the avatar's round
+mask; an avatar with a dot no longer clips it.
+
+#### EntityPicker and CommandPalette words
+
+- `EntityPicker onSearch` may resolve `{ options, hasMore: true }` when its list was cut off: the
+  list ends with a row that says more match (not an option; arrow keys skip it) and the polite
+  status says so too. Below `minQueryLength` the open list shows "Type at least {count}
+  characters." Both, and every other word, come from `labels` or `UixLabelsProvider`
+  `entityPicker`. `SearchSuggest` has the two slots these use: `idle` and `note`.
+- `CommandPalette` announces its result count through `UixLabelsProvider` `commandPalette`
+  (`resultsOne`, `resultsMany`, `{count}`) or a `resultsLabel(count)` prop; English is unchanged.

package/dist/components/Avatar.d.ts

@@ -1,19 +1,41 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
+/** Presence of a person (HAR-1374). Each state has its own shape as well as its own colour. */
+type AvatarPresence = 'online' | 'busy' | 'away' | 'offline';
+/** The words read for each presence state. English; pass translations as `presenceLabels`. */
+declare const DEFAULT_PRESENCE_LABELS: Record<AvatarPresence, string>;
 interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
-    /** TENSOR RX-125 (UIX-04): translatable; English default. */
+    /** TENSOR RX-125 (UIX-04): translatable; English default. Still honoured for `online`. */
     onlineLabel?: string;
     size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     src?: string;
     alt?: string;
     /** Initials / fallback shown when there is no `src`. */
     children?: ReactNode;
-    /** Online status dot. */
+    /** Online status dot. The same as `presence="online"`; kept for existing callers. */
     status?: boolean;
+    /**
+     * A presence dot: `online` (filled green), `busy` (red with a bar), `away` (an amber ring),
+     * `offline` (a grey ring). The state is also in visually hidden text, so it is never colour
+     * alone.
+     */
+    presence?: AvatarPresence;
+    /** Translations of the presence words. */
+    presenceLabels?: Partial<Record<AvatarPresence, string>>;
 }
 /** Avatar over `.uix-avatar`. Renders an image when `src` is set, else children (initials). */
-declare function Avatar({ size, src, alt, children, status, onlineLabel, className, ...props }: AvatarProps): react.JSX.Element;
+declare function Avatar({ size, src, alt, children, status, presence, presenceLabels, onlineLabel, className, ...props }: AvatarProps): react.JSX.Element;
+interface PresenceDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    presence: AvatarPresence;
+    /**
+     * The state in words for assistive technology. Default: the English word. Pass `null` when
+     * the state is already written next to the dot, to make the dot decorative.
+     */
+    label?: string | null;
+}
+/** The presence dot on its own, for a row or a menu that shows no avatar (HAR-1374). */
+declare function PresenceDot({ presence, label, className, ...props }: PresenceDotProps): react.JSX.Element;
 interface AvatarGroupProps extends HTMLAttributes<HTMLSpanElement> {
     children?: ReactNode;
 }
@@ -29,4 +51,4 @@ interface UserChipProps extends HTMLAttributes<HTMLSpanElement> {
 /** Avatar + name (+ optional sub-line) over `.uix-user-chip`. */
 declare function UserChip({ avatar, name, sub, className, children, ...props }: UserChipProps): react.JSX.Element;
 
-export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, UserChip, type UserChipProps };
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarPresence, type AvatarProps, DEFAULT_PRESENCE_LABELS, PresenceDot, type PresenceDotProps, UserChip, type UserChipProps };

package/dist/components/Avatar.js

@@ -1,12 +1,33 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function Avatar({ size = "md", src, alt, children, status, onlineLabel = "online", className, ...props }) {
+const DEFAULT_PRESENCE_LABELS = {
+  online: "online",
+  busy: "busy",
+  away: "away",
+  offline: "offline"
+};
+function Avatar({ size = "md", src, alt, children, status, presence, presenceLabels, onlineLabel, className, ...props }) {
+  const state = presence ?? (status ? "online" : void 0);
+  const word = state && (presenceLabels?.[state] ?? (state === "online" ? onlineLabel : void 0) ?? DEFAULT_PRESENCE_LABELS[state]);
   return /* @__PURE__ */ jsxs("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
     src ? /* @__PURE__ */ jsx("img", { src, alt: alt ?? "" }) : children,
-    status && /* @__PURE__ */ jsx("span", { className: "uix-avatar__status", "aria-hidden": "true" }),
-    status && /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: onlineLabel })
+    state && /* @__PURE__ */ jsx("span", { className: "uix-avatar__status", "data-presence": state === "online" ? void 0 : state, "aria-hidden": "true" }),
+    state && /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: word })
   ] });
 }
+function PresenceDot({ presence, label, className, ...props }) {
+  const decorative = label === null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx("uix-presence", `uix-presence--${presence}`, className),
+      role: decorative ? void 0 : "img",
+      "aria-label": decorative ? void 0 : label ?? DEFAULT_PRESENCE_LABELS[presence],
+      "aria-hidden": decorative ? true : void 0,
+      ...props
+    }
+  );
+}
 function AvatarGroup({ children, className, ...props }) {
   return /* @__PURE__ */ jsx("span", { className: cx("uix-avatar-group", className), ...props, children });
 }
@@ -23,5 +44,7 @@ function UserChip({ avatar, name, sub, className, children, ...props }) {
 export {
   Avatar,
   AvatarGroup,
+  DEFAULT_PRESENCE_LABELS,
+  PresenceDot,
   UserChip
 };

package/dist/components/CommandPalette.d.ts

@@ -4,6 +4,11 @@ import { ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
 interface CommandPaletteProps extends HTMLAttributes<HTMLDivElement> {
     /** TENSOR RX-125 (UIX-04): translatable; English default. */
     inputLabel?: string;
+    /**
+     * The polite result count for this palette (HAR-1647). Default: `UixLabelsProvider`
+     * `commandPalette.resultsOne` / `resultsMany` (`{count}`), then "1 result" / "3 results".
+     */
+    resultsLabel?: (count: number) => string;
     /** Props for the search input (value/onChange/placeholder wired by the consumer). */
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
     children?: ReactNode;
@@ -14,7 +19,7 @@ interface CommandPaletteProps extends HTMLAttributes<HTMLDivElement> {
  * a combobox over the listbox of `CommandItem`s; spreads override every default, so
  * consumers already passing their own roles/labels keep working.
  */
-declare function CommandPalette({ inputProps, children, inputLabel: inputLabelProp, className, ...props }: CommandPaletteProps): react.JSX.Element;
+declare function CommandPalette({ inputProps, children, inputLabel: inputLabelProp, resultsLabel, className, ...props }: CommandPaletteProps): react.JSX.Element;
 interface CommandGroupProps {
     label?: ReactNode;
     children?: ReactNode;

package/dist/components/CommandPalette.js

@@ -1,12 +1,18 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
 import { useUixLabels } from "../labels-context.js";
 const CmdkContext = createContext(null);
-function CommandPalette({ inputProps, children, inputLabel: inputLabelProp, className, ...props }) {
+function CommandPalette({ inputProps, children, inputLabel: inputLabelProp, resultsLabel, className, ...props }) {
   const uixLabels = useUixLabels();
   const inputLabel = inputLabelProp ?? uixLabels.commandPalette?.input ?? "Command palette";
+  const resultsOne = uixLabels.commandPalette?.resultsOne ?? "{count} result";
+  const resultsMany = uixLabels.commandPalette?.resultsMany ?? "{count} results";
+  const resultsText = (count2) => resultsLabel?.(count2) ?? fillLabel(count2 === 1 ? resultsOne : resultsMany, { count: count2 });
+  const resultsTextRef = useRef(resultsText);
+  resultsTextRef.current = resultsText;
   const listId = useId();
   const [activeId, setActiveId] = useState(null);
   const [count, setCount] = useState(0);
@@ -19,7 +25,7 @@ function CommandPalette({ inputProps, children, inputLabel: inputLabelProp, clas
     return () => setCount((c) => c - 1);
   }, []);
   useEffect(() => {
-    const t = window.setTimeout(() => setAnnounced(`${count} result${count === 1 ? "" : "s"}`), 150);
+    const t = window.setTimeout(() => setAnnounced(resultsTextRef.current(count)), 150);
     return () => clearTimeout(t);
   }, [count]);
   const ctx = useMemo(() => ({ listId, setActive, registerItem }), [listId, setActive, registerItem]);

package/dist/components/DateFieldParts.d.ts

@@ -0,0 +1,61 @@
+import * as react from 'react';
+import { MouseEvent } from 'react';
+import { CalendarWeekday } from '../calendar-model.js';
+
+/** The viewer's local calendar date as `YYYY-MM-DD` (not UTC: "today" is a local idea). */
+declare const localDateKey: (now?: Date) => string;
+declare const monthLabel: (date: string, locale?: string) => string;
+declare const fullDateLabel: (date: string, locale?: string) => string;
+/**
+ * Short weekday names in `locale`, starting on `weekStartsOn`. 2024-01-07 is a Sunday;
+ * formatting in UTC keeps each reference day on its own date.
+ */
+declare const weekdayNames: (locale: string | undefined, weekStartsOn?: CalendarWeekday) => string[];
+/**
+ * Open state and trigger wiring for a field whose calendar lives in a kit `Popover`
+ * (`popover="auto"`, so a press outside or Escape closes it). `restoreFocus` is called when it
+ * closes while focus is inside it or nowhere: the field takes focus back.
+ */
+declare function useFieldPopover(popoverId: string, restoreFocus: () => void, onOpenChange?: (open: boolean) => void): {
+    open: boolean;
+    show: () => void;
+    hide: (restore?: boolean) => void;
+    /** Spread on the button that opens the calendar. */
+    triggerProps: {
+        'aria-haspopup': "dialog";
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        onPointerDown: () => void;
+        onPointerLeave: () => void;
+        onPointerCancel: () => void;
+        onClick: (event: MouseEvent<HTMLElement>) => void;
+    };
+};
+interface MonthCalendarProps {
+    /** The selected day, or `null`. */
+    value: string | null;
+    onSelect: (date: string) => void;
+    /** The day that has focus when the calendar opens. */
+    initialDate: string;
+    min?: string;
+    max?: string;
+    isUnavailable?: (date: string) => boolean;
+    locale?: string;
+    weekStartsOn?: CalendarWeekday;
+    today: string | null;
+    labels: {
+        previousMonth: string;
+        nextMonth: string;
+    };
+    /** Move focus to the active day when the calendar mounts. */
+    autoFocus?: boolean;
+}
+/**
+ * One month of day buttons with the full calendar key path: arrows by day and week, Home / End
+ * to the ends of the week, PageUp / PageDown by month, with Shift by year. Days outside
+ * `min` / `max` are never reached; unavailable days inside them can be reached and read out,
+ * but not chosen. Shares the day-cell look of the range picker.
+ */
+declare function MonthCalendar({ value, onSelect, initialDate, min, max, isUnavailable, locale, weekStartsOn, today, labels, autoFocus, }: MonthCalendarProps): react.JSX.Element;
+
+export { MonthCalendar, type MonthCalendarProps, fullDateLabel, localDateKey, monthLabel, useFieldPopover, weekdayNames };

package/dist/components/DateFieldParts.js

@@ -0,0 +1,195 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { addCalendarDays, addCalendarMonths, buildMonthGrid, isDateUnavailable, startOfMonth } from "../calendar-model.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../icons/components.js";
+const localDateKey = (now = /* @__PURE__ */ new Date()) => `${now.getFullYear().toString().padStart(4, "0")}-${(now.getMonth() + 1).toString().padStart(2, "0")}-${now.getDate().toString().padStart(2, "0")}`;
+const utc = (date) => /* @__PURE__ */ new Date(`${date}T00:00:00Z`);
+const monthLabel = (date, locale) => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(utc(date));
+const fullDateLabel = (date, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(utc(date));
+const weekdayNames = (locale, weekStartsOn = 1) => {
+  const fmt = new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" });
+  return Array.from({ length: 7 }, (_, i) => fmt.format(new Date(Date.UTC(2024, 0, 7 + weekStartsOn + i))));
+};
+const isOpen = (el) => {
+  try {
+    return !!el?.matches(":popover-open");
+  } catch {
+    return false;
+  }
+};
+function useFieldPopover(popoverId, restoreFocus, onOpenChange) {
+  const [open, setOpen] = useState(false);
+  const pointerWasOpen = useRef(null);
+  const restoreRef = useRef(restoreFocus);
+  restoreRef.current = restoreFocus;
+  const onOpenChangeRef = useRef(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  const skipRestore = useRef(false);
+  const popoverEl = () => typeof document === "undefined" ? null : document.getElementById(popoverId);
+  useEffect(() => {
+    const el = popoverEl();
+    if (!el) return;
+    const onToggle = (event) => {
+      const { newState } = event;
+      const nowOpen = newState ? newState === "open" : isOpen(el);
+      setOpen(nowOpen);
+      onOpenChangeRef.current?.(nowOpen);
+      if (nowOpen) return;
+      const active = el.ownerDocument.activeElement;
+      if (skipRestore.current) skipRestore.current = false;
+      else if (el.contains(active) || active === el.ownerDocument.body) restoreRef.current();
+    };
+    el.addEventListener("toggle", onToggle);
+    return () => el.removeEventListener("toggle", onToggle);
+  }, [popoverId]);
+  const show = () => {
+    const el = popoverEl();
+    if (el && !isOpen(el)) {
+      try {
+        el.showPopover();
+      } catch {
+      }
+    }
+  };
+  const hide = (restore = true) => {
+    const el = popoverEl();
+    if (!el || !isOpen(el)) return;
+    skipRestore.current = !restore;
+    try {
+      el.hidePopover();
+    } catch {
+      skipRestore.current = false;
+    }
+  };
+  return {
+    open,
+    show,
+    hide,
+    /** Spread on the button that opens the calendar. */
+    triggerProps: {
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      "aria-controls": popoverId,
+      // A pointer press outside an open auto popover already closed it (light dismiss); the
+      // click that follows must not open it again.
+      onPointerDown: () => {
+        pointerWasOpen.current = isOpen(popoverEl());
+      },
+      // A press that never became a click (dragged off, cancelled) must not decide the next one.
+      onPointerLeave: () => {
+        pointerWasOpen.current = null;
+      },
+      onPointerCancel: () => {
+        pointerWasOpen.current = null;
+      },
+      onClick: (event) => {
+        if (event.defaultPrevented) return;
+        const was = pointerWasOpen.current;
+        pointerWasOpen.current = null;
+        if (was === true) {
+          hide();
+          return;
+        }
+        if (isOpen(popoverEl())) hide();
+        else show();
+      }
+    }
+  };
+}
+function MonthCalendar({
+  value,
+  onSelect,
+  initialDate,
+  min,
+  max,
+  isUnavailable,
+  locale,
+  weekStartsOn = 1,
+  today,
+  labels,
+  autoFocus = false
+}) {
+  const clamp = (date) => min && date < min ? min : max && date > max ? max : date;
+  const [active, setActive] = useState(() => clamp(initialDate));
+  const gridRef = useRef(null);
+  const pendingFocus = useRef(autoFocus);
+  const month = startOfMonth(active);
+  const days = useMemo(() => buildMonthGrid(month, weekStartsOn).filter((day) => day.inMonth), [month, weekStartsOn]);
+  const blanks = (utc(month).getUTCDay() - weekStartsOn + 7) % 7;
+  const weekdays = useMemo(() => weekdayNames(locale, weekStartsOn), [locale, weekStartsOn]);
+  useEffect(() => {
+    if (!pendingFocus.current) return;
+    pendingFocus.current = false;
+    gridRef.current?.querySelector(`[data-date="${active}"]`)?.focus({ preventScroll: true });
+  }, [active]);
+  const focusDate = (date) => {
+    pendingFocus.current = true;
+    setActive(clamp(date));
+  };
+  const showMonth = (amount) => setActive((current) => clamp(addCalendarMonths(current, amount)));
+  const unavailable = (date) => isDateUnavailable(date, { min, max, isDisabled: isUnavailable });
+  const onDayKeyDown = (event, date) => {
+    const rtl = typeof getComputedStyle === "function" && getComputedStyle(event.currentTarget).direction === "rtl";
+    const offsets = { ArrowLeft: rtl ? 1 : -1, ArrowRight: rtl ? -1 : 1, ArrowUp: -7, ArrowDown: 7 };
+    if (event.key in offsets) {
+      event.preventDefault();
+      focusDate(addCalendarDays(date, offsets[event.key]));
+    } else if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const index = (utc(date).getUTCDay() - weekStartsOn + 7) % 7;
+      focusDate(addCalendarDays(date, event.key === "Home" ? -index : 6 - index));
+    } else if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+      focusDate(addCalendarMonths(date, (event.key === "PageUp" ? -1 : 1) * (event.shiftKey ? 12 : 1)));
+    }
+  };
+  const atMin = !!min && month <= startOfMonth(min);
+  const atMax = !!max && month >= startOfMonth(max);
+  return /* @__PURE__ */ jsxs("div", { className: "uix-date-picker__calendar", children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-date-picker__nav", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-date-picker__nav-btn", "aria-label": labels.previousMonth, "aria-disabled": atMin || void 0, onClick: () => {
+        if (!atMin) showMonth(-1);
+      }, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: "sm" }) }),
+      /* @__PURE__ */ jsx("span", { className: "uix-date-picker__month", "aria-live": "polite", children: monthLabel(month, locale) }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-date-picker__nav-btn", "aria-label": labels.nextMonth, "aria-disabled": atMax || void 0, onClick: () => {
+        if (!atMax) showMonth(1);
+      }, children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: "sm" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "uix-date-range-picker__weekdays", "aria-hidden": "true", children: weekdays.map((day, index) => /* @__PURE__ */ jsx("span", { children: day }, index)) }),
+    /* @__PURE__ */ jsxs("div", { ref: gridRef, className: "uix-date-range-picker__grid uix-date-picker__grid", role: "group", "aria-label": monthLabel(month, locale), children: [
+      Array.from({ length: blanks }, (_, index) => /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }, `blank-${index}`)),
+      days.map((day) => {
+        const off = unavailable(day.date);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-date": day.date,
+            "data-selected": day.date === value || void 0,
+            "aria-pressed": day.date === value,
+            "aria-label": fullDateLabel(day.date, locale),
+            "aria-current": day.date === today ? "date" : void 0,
+            "aria-disabled": off || void 0,
+            tabIndex: active === day.date ? 0 : -1,
+            onFocus: () => setActive(day.date),
+            onKeyDown: (event) => onDayKeyDown(event, day.date),
+            onClick: () => {
+              if (!off) onSelect(day.date);
+            },
+            children: day.day
+          },
+          day.date
+        );
+      })
+    ] })
+  ] });
+}
+export {
+  MonthCalendar,
+  fullDateLabel,
+  localDateKey,
+  monthLabel,
+  useFieldPopover,
+  weekdayNames
+};