@slotted/react 0.0.0-stage → 0.1.0-beta.1

package/dist/docs/datetime-picker.json

@@ -0,0 +1,926 @@
+{
+  "family": "datetime-picker",
+  "ui": "datetime-picker",
+  "binding": "react",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Date and time field with a picker popover."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "variant": [
+      "outline",
+      "subtle",
+      "plain"
+    ],
+    "placement": [
+      "bottom-start",
+      "bottom",
+      "bottom-end",
+      "top-start",
+      "top",
+      "top-end"
+    ],
+    "openTo": [
+      "date",
+      "time"
+    ],
+    "closeOnSelect": [
+      "auto",
+      "always",
+      "never"
+    ],
+    "unavailableOptions": [
+      "disable",
+      "hide"
+    ],
+    "hourCycle": [
+      12,
+      24
+    ],
+    "granularity": [
+      "hour",
+      "minute",
+      "second"
+    ],
+    "calendar": [
+      "gregory"
+    ]
+  },
+  "members": {
+    "dateTimePicker": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "variant": "outline",
+        "placement": "bottom-start",
+        "openTo": "date",
+        "closeOnSelect": "auto",
+        "step": 900,
+        "unavailableOptions": "disable",
+        "granularity": "minute",
+        "calendar": "gregory",
+        "clearable": false,
+        "maxOptions": 1440
+      },
+      "capabilities": [
+        "value",
+        "open",
+        "current",
+        "placement",
+        "appearance",
+        "size",
+        "content",
+        "disabled",
+        "invalid",
+        "required",
+        "readOnly",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled",
+        "invalid",
+        "readonly",
+        "required",
+        "open",
+        "selected",
+        "current"
+      ],
+      "parts": [
+        "root",
+        "control",
+        "trigger",
+        "positioner",
+        "content",
+        "panels",
+        "date-panel",
+        "time-panel",
+        "head",
+        "head-value",
+        "now",
+        "presets",
+        "list",
+        "option",
+        "empty",
+        "footer"
+      ]
+    }
+  },
+  "docs": {
+    "dateTimePicker": {
+      "imports": {
+        "source": "import { DateTimePicker, DateTimePickerDefaultsProvider } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, or the element render returns",
+          "required": true,
+          "purpose": "The outer box, carrying data-ui=\"datetime-picker\", the size, variant and granularity axes, data-open and the state attributes. It has no role: the control inside holds the field and the trigger, and the panel is a layer of its own."
+        },
+        {
+          "part": "control",
+          "element": "div",
+          "required": true,
+          "purpose": "The box the panel is positioned against, and where Alt+ArrowDown is handled. It draws no frame: the datetime field inside it draws its own border, focus ring and states."
+        },
+        {
+          "part": "trigger",
+          "element": "button",
+          "required": true,
+          "purpose": "The calendar button, in the end slot of the datetime field. It has aria-haspopup=\"dialog\", aria-expanded while the panel is open, and an accessible name that carries the chosen date and time, because focus returns to it when the panel closes. It draws the calendar icon, the icon input[type=datetime-local] draws for the same control."
+        },
+        {
+          "part": "positioner",
+          "element": "div, portalled to the end of the document",
+          "required": false,
+          "purpose": "The layer the panel stands on. It carries data-ui=\"datetime-picker\" again, because a stylesheet cannot reach a subtree outside the root, plus data-placement for the side the positioner chose and data-presentation (popover or sheet)."
+        },
+        {
+          "part": "content",
+          "element": "div with role=\"dialog\"",
+          "required": false,
+          "purpose": "The painted panel, with the same accessible name as the trigger. It holds a grid and a listbox, the arrangement the APG Date Picker Combobox example uses for its popup. data-open-to names the surface that takes focus on open."
+        },
+        {
+          "part": "head",
+          "element": "div",
+          "required": false,
+          "purpose": "The band above both surfaces, with a rule under it: the value so far, your shortcuts and the Now button. It takes the panel’s width and does not widen it, so a row of shortcuts wraps instead of stretching the calendar."
+        },
+        {
+          "part": "head-value",
+          "element": "span",
+          "required": false,
+          "purpose": "The value in words. While no value is set, it shows the day the calendar has focused and a placeholder for the time, so the reader knows which day the times in the list belong to."
+        },
+        {
+          "part": "now",
+          "element": "button",
+          "required": false,
+          "purpose": "Writes the current date and time, read from the clock in timeZone when pressed. It draws the clock icon. It does the same as the relative expression 0 in the field, for a reader who does not know the expression."
+        },
+        {
+          "part": "presets",
+          "element": "div",
+          "required": false,
+          "purpose": "A row in the head, beside Now, for your own shortcuts, drawn when presets is set. The Datetime Picker ships no list of shortcuts: the labels and times belong to your product."
+        },
+        {
+          "part": "panels",
+          "element": "div",
+          "required": false,
+          "purpose": "The two surfaces, as a wrapping flex row: side by side when the panel has room for both, stacked with the calendar first when it does not. Nothing is hidden at any width."
+        },
+        {
+          "part": "date-panel",
+          "element": "div",
+          "required": false,
+          "purpose": "Holds the Calendar with its grid, its month and year views and its keyboard. It never shrinks below one month, so the time panel is the one that wraps."
+        },
+        {
+          "part": "time-panel",
+          "element": "div",
+          "required": false,
+          "purpose": "Holds the list of times. Beside the calendar it is a narrow column; on a line of its own it takes the whole line."
+        },
+        {
+          "part": "list",
+          "element": "div with role=\"listbox\"",
+          "required": false,
+          "purpose": "The times available on the day the reader is on, with an accessible name that names that day. It is the only part of the panel that scrolls. data-truncated is set when the configuration asks for more rows than maxOptions."
+        },
+        {
+          "part": "option",
+          "element": "div with role=\"option\"",
+          "required": false,
+          "purpose": "One time. It carries aria-selected, data-selected on the chosen time, data-current on the highlighted time and aria-disabled with data-disabled on a refused time. It shows the time only: the calendar shows the day."
+        },
+        {
+          "part": "empty",
+          "element": "div",
+          "required": false,
+          "purpose": "Drawn in place of the list when the day the reader is on offers no time: an unavailable day, a window the bounds leave empty, or a day on which isTimeUnavailable refuses every time. It says so in a sentence, the empty message."
+        },
+        {
+          "part": "footer",
+          "element": "div",
+          "required": false,
+          "purpose": "A row under both surfaces for your own actions, drawn when footer is set. The panel closes on the press that completes the value, so a confirm button is optional; add one here for a flow that asks for it."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "PlainDateTime | null",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "The value, when you control it. Update it from onValueChange."
+        },
+        {
+          "name": "defaultValue",
+          "type": "PlainDateTime | null",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "The starting value when the Datetime Picker holds its own state."
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "Whether the panel is open, when you control it. Update it from onOpenChange."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "DateTimePicker",
+          "description": "Whether the panel starts open. A panel that starts open does not take focus."
+        },
+        {
+          "name": "highlighted",
+          "type": "DateTimePickerHighlight",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "Where the reader is in the panel, as { date, time }: the day the calendar has focused and the time the list has highlighted. Set it to control the highlight; update it from onHighlightedChange."
+        },
+        {
+          "name": "defaultHighlighted",
+          "type": "DateTimePickerHighlight",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "Where the highlight starts. Unset, the panel opens on the day of the value, or of referenceDateTime, and on the time nearest to it."
+        },
+        {
+          "name": "min",
+          "type": "PlainDateTime",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "The earliest whole value. The calendar disables the days before its date, and on its date the list starts at its time."
+        },
+        {
+          "name": "max",
+          "type": "PlainDateTime",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "The latest whole value. The calendar disables the days after its date, and on its date the list stops at its time."
+        },
+        {
+          "name": "minTime",
+          "type": "PlainTime",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "The earliest time on every day inside the range. It applies together with min."
+        },
+        {
+          "name": "maxTime",
+          "type": "PlainTime",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "The latest time on every day inside the range. It applies together with max."
+        },
+        {
+          "name": "isDateUnavailable",
+          "type": "(date: PlainDate) => boolean",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "Returns true for a day the reader cannot choose. The calendar disables it, its list is empty, and a typed value on it marks the Datetime Picker invalid."
+        },
+        {
+          "name": "isTimeUnavailable",
+          "type": "(time: PlainTime, date: PlainDate) => boolean",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "Returns true for a time the reader cannot choose on a given day, so the rule can differ by day. A typed value it refuses marks the Datetime Picker invalid."
+        },
+        {
+          "name": "step",
+          "type": "number",
+          "defaultValue": "900",
+          "appliesTo": "DateTimePicker",
+          "description": "Seconds between two times in the list, counted from the earliest time of the day, or from midnight. It applies to the list only; the field accepts any time."
+        },
+        {
+          "name": "options",
+          "type": "readonly PlainTime[]",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "The times the list offers, in the order given, in place of step. Bounds and predicates still refuse times in it."
+        },
+        {
+          "name": "maxOptions",
+          "type": "number",
+          "defaultValue": "1440",
+          "appliesTo": "DateTimePicker",
+          "description": "The most rows the list draws, a whole day at a one-minute step. Past it, the list is cut, carries data-truncated, and the panel’s accessible description says the remaining times are typed into the field."
+        },
+        {
+          "name": "unavailableOptions",
+          "type": "'disable' | 'hide'",
+          "defaultValue": "disable",
+          "appliesTo": "DateTimePicker",
+          "description": "What the list does with a refused time: shows it disabled, or leaves it out."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "the provider’s locale, then en-US",
+          "appliesTo": "DateTimePicker",
+          "description": "A BCP 47 tag. It sets the segments, the clock, the calendar’s month and weekday names, the times in the list and the date and time in words."
+        },
+        {
+          "name": "timeZone",
+          "type": "string",
+          "defaultValue": "the browser’s time zone",
+          "appliesTo": "DateTimePicker",
+          "description": "The IANA time zone that decides today in the calendar and what Now and the default referenceDateTime read from the clock. The value itself has no time zone."
+        },
+        {
+          "name": "hourCycle",
+          "type": "12 | 24",
+          "defaultValue": "the locale’s",
+          "appliesTo": "DateTimePicker",
+          "description": "A 12-hour clock with a day period, or a 24-hour clock, in the field and the list."
+        },
+        {
+          "name": "granularity",
+          "type": "'hour' | 'minute' | 'second'",
+          "defaultValue": "minute",
+          "appliesTo": "DateTimePicker",
+          "description": "The smallest unit the field writes."
+        },
+        {
+          "name": "calendar",
+          "type": "'gregory'",
+          "defaultValue": "gregory",
+          "appliesTo": "DateTimePicker",
+          "description": "The calendar system. gregory is the only value today."
+        },
+        {
+          "name": "firstDayOfWeek",
+          "type": "number",
+          "defaultValue": "the locale’s",
+          "appliesTo": "DateTimePicker",
+          "description": "The first day of the calendar’s week, from 0 for Sunday to 6 for Saturday."
+        },
+        {
+          "name": "months",
+          "type": "number",
+          "defaultValue": "1",
+          "appliesTo": "DateTimePicker",
+          "description": "How many months the calendar draws side by side."
+        },
+        {
+          "name": "weekNumbers",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "DateTimePicker",
+          "description": "Adds a column of ISO 8601 week numbers to the calendar."
+        },
+        {
+          "name": "referenceDateTime",
+          "type": "PlainDateTime",
+          "defaultValue": "the current date and time",
+          "appliesTo": "DateTimePicker",
+          "description": "The date and time assumed where the reader has given none: the month the calendar opens on, the time the list opens on after a day is pressed on an empty value, and the point a relative expression and the arrow keys on an empty field count from."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "DateTimePicker",
+          "description": "One step of the control scale for the field, the trigger and the rows of the list. Inside a field, an unset size follows the field."
+        },
+        {
+          "name": "variant",
+          "type": "'outline' | 'subtle' | 'plain'",
+          "defaultValue": "outline",
+          "appliesTo": "DateTimePicker",
+          "description": "The frame of the field: a border, a fill, or none at rest."
+        },
+        {
+          "name": "placement",
+          "type": "'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end'",
+          "defaultValue": "bottom-start",
+          "appliesTo": "DateTimePicker",
+          "description": "Where the panel opens relative to the control. When it does not fit on that side, it opens on the other."
+        },
+        {
+          "name": "openTo",
+          "type": "'date' | 'time'",
+          "defaultValue": "date",
+          "appliesTo": "DateTimePicker",
+          "description": "The surface that takes focus when the trigger or open() opens the panel. Both surfaces are drawn either way."
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "'auto' | 'always' | 'never'",
+          "defaultValue": "auto",
+          "appliesTo": "DateTimePicker",
+          "description": "When a press closes the panel: auto on the press that completes the value, always on every press that changes the value, never on none."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "the field’s",
+          "appliesTo": "DateTimePicker",
+          "description": "Disables the field and the trigger. Unset, it follows the enclosing field."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "the field’s",
+          "appliesTo": "DateTimePicker",
+          "description": "Keeps the value focusable and legible, and disables the trigger. Unset, it follows the enclosing field."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "the field’s",
+          "appliesTo": "DateTimePicker",
+          "description": "Marks the value invalid. A value outside the bounds or refused by a predicate is invalid whatever this says."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "the field’s",
+          "appliesTo": "DateTimePicker",
+          "description": "Sets aria-required on the field. Unset, it follows the enclosing field."
+        },
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "DateTimePicker",
+          "description": "Adds a clear button to the field while it holds any part of a value. The button empties both halves."
+        },
+        {
+          "name": "relative",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "DateTimePicker",
+          "description": "Whether +, - and = on a segment open a relative expression in the field, such as +2h."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "Adds a hidden input with this name that submits the value as YYYY-MM-DDTHH:mm:ss."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<DatetimePickerMessages>",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "Replaces the words of the language in force, key by key: the trigger’s name with no value (choose) and with one (change, with the value in its {date} slot), the Now button (now), the sentence for a day with no time (empty), and the panel’s description when the list is cut at maxOptions (truncated)."
+        },
+        {
+          "name": "presets",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "Your own shortcuts, in a row in the head beside Now."
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "Your own actions, in a row under both surfaces."
+        }
+      ],
+      "composition": [
+        {
+          "name": "DateTimePickerDefaultsProvider",
+          "type": "component",
+          "defaultValue": "—",
+          "appliesTo": "application",
+          "description": "Sets timeZone, hourCycle, granularity, calendar, step, maxOptions, placement, openTo, closeOnSelect, unavailableOptions, size and variant once for every Datetime Picker under it. A value set on one Datetime Picker still wins."
+        },
+        {
+          "name": "renderOption",
+          "type": "(option: DateTimePickerOptionRender) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "Draws the content of one row of the list. It receives the time, the date it belongs to, the formatted label, and whether the time is selected, current or unavailable. The row keeps its role, states and keyboard."
+        },
+        {
+          "name": "render",
+          "type": "(props: DateTimePickerRootProps) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "Replaces the root element. The props include the ref."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<DateTimePickerHandle>",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "focus() moves focus to the first segment of the field. open() opens the panel and moves focus into it, as the trigger does; close() closes it."
+        },
+        {
+          "name": "onKeyDown",
+          "type": "KeyboardEventHandler",
+          "defaultValue": "—",
+          "appliesTo": "DateTimePicker",
+          "description": "Runs before the Datetime Picker handles a key on the control, the trigger or the list. Calling preventDefault stops the Datetime Picker handling it."
+        }
+      ],
+      "events": [
+        {
+          "name": "onValueChange",
+          "payload": "(value: PlainDateTime | null, request: DateTimeFieldChangeRequest)",
+          "when": "Before the value changes. request.reason is keyboard for typing, select for a press in the calendar, the list or Now, clear for the clear button and blur for a value completed when the field loses focus. When the field moved the value, the request also carries segments and incomplete, the half still missing. A value that does not change emits nothing."
+        },
+        {
+          "name": "onOpenChange",
+          "payload": "(open: boolean, request: ChangeRequest<boolean>)",
+          "when": "Before the panel opens or closes. request.reason is pointer for the trigger, keyboard for Alt+ArrowDown, ArrowDown on the trigger, open() and close(), escape and outsidePress for a dismissal, and select for the press that closed it."
+        },
+        {
+          "name": "onHighlightedChange",
+          "payload": "(highlighted: DateTimePickerHighlight, request: ChangeRequest<DateTimePickerHighlight>)",
+          "when": "When the reader moves through either surface: the day the calendar has focused and the time the list has highlighted, as one value. Moving the highlight never changes the value."
+        }
+      ],
+      "accessibility": [
+        "The panel has role=\"dialog\" and holds a role=\"grid\" and a role=\"listbox\", the arrangement the APG Date Picker Combobox example uses for its popup. The trigger has aria-haspopup=\"dialog\" and aria-expanded, and aria-controls only while the panel exists. Both surfaces are in the DOM at every width.",
+        "The trigger’s accessible name carries the chosen date and time in words, such as “Change date and time, September 30, 2026 at 9:00 AM”. Focus returns to the trigger when the panel closes from a press or from Escape, so a screen reader announces the value there. The listbox has its own accessible name, the day its times belong to.",
+        "Opening the panel from the trigger or from open() moves focus into the surface openTo names: the focused day in the calendar, or the chosen or nearest time in the list. Alt+ArrowDown opens the panel and leaves focus in the field. While the panel is open, Tab and Shift+Tab cycle through the head, the calendar, the list and the footer; each surface is one Tab stop.",
+        "Moving the highlight through the list never changes the value; Enter, Space or a press does. Changing the value on every highlight would send one change per time the reader passes.",
+        "Escape closes in steps: an open relative expression in the field closes first, then the calendar returns from the month or year grid to the day grid, and then the panel closes and focus returns to the trigger.",
+        "Alt+ArrowDown is a shortcut, never the only way in. ChromeOS turns it into PageDown before the browser receives it, so the trigger is always drawn."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-border-color",
+    "--slotted-control-border-width",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-height-lg",
+    "--slotted-control-height-md",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-lg",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-padding-inline-sm",
+    "--slotted-control-radius",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-datetime-picker-content-border-color",
+    "--slotted-datetime-picker-content-color",
+    "--slotted-datetime-picker-content-padding",
+    "--slotted-datetime-picker-content-radius",
+    "--slotted-datetime-picker-content-shadow",
+    "--slotted-datetime-picker-invalid-focus-ring-color",
+    "--slotted-datetime-picker-label-color",
+    "--slotted-datetime-picker-list-block-size",
+    "--slotted-datetime-picker-now-active-background",
+    "--slotted-datetime-picker-now-background",
+    "--slotted-datetime-picker-now-border-color",
+    "--slotted-datetime-picker-now-color",
+    "--slotted-datetime-picker-now-hover-background",
+    "--slotted-datetime-picker-now-hover-border-color",
+    "--slotted-datetime-picker-now-icon-color",
+    "--slotted-datetime-picker-option-current-background",
+    "--slotted-datetime-picker-option-hover-background",
+    "--slotted-datetime-picker-option-radius",
+    "--slotted-datetime-picker-option-selected-background",
+    "--slotted-datetime-picker-option-selected-color",
+    "--slotted-datetime-picker-option-selected-hover-background",
+    "--slotted-datetime-picker-radius",
+    "--slotted-datetime-picker-sheet-inline-size",
+    "--slotted-datetime-picker-surface",
+    "--slotted-datetime-picker-time-panel-inline-size",
+    "--slotted-datetime-picker-trigger-active-background",
+    "--slotted-datetime-picker-trigger-color",
+    "--slotted-datetime-picker-trigger-hover-background",
+    "--slotted-datetime-picker-trigger-size",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-enter",
+    "--slotted-easing-exit",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-color-invalid",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-size-sm",
+    "--slotted-font-weight-medium",
+    "--slotted-radius-lg",
+    "--slotted-radius-sm",
+    "--slotted-shadow-md",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-6",
+    "--slotted-space-9",
+    "--slotted-surface-raised",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-on-solid",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-solid-hover",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-z-index-popover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One Datetime Picker driven by the controls below the canvas. Open it: the calendar and the list are both in the panel, the head shows the value so far, and the panel closes on the press that completes the value.",
+      "language": "tsx",
+      "source": "<Field>\n  <FieldLabel>Pickup date and time</FieldLabel>\n  <DateTimePicker clearable name=\"pickupAt\" />\n  <FieldDescription>The carrier collects at this date and time.</FieldDescription>\n</Field>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "panel",
+      "title": "Two surfaces in one dialog",
+      "note": "The panel holds a grid drawn by Calendar and a listbox drawn by the Datetime Picker. Both are in the DOM at every width; no tabs switch between them, so assistive technology reads the same structure on a wide and a narrow screen.",
+      "language": "tsx",
+      "source": "<DateTimePicker defaultOpen />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "open-to",
+      "title": "Which surface takes focus on open",
+      "note": "openTo decides where focus lands when the panel opens, not what the panel draws. Both surfaces are present either way, in the same order: the calendar, then the list.",
+      "language": "tsx",
+      "source": "<DateTimePicker openTo=\"time\" />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "completeness",
+      "title": "The value closes the panel, not a button",
+      "note": "With closeOnSelect=\"auto\", the press that completes the value closes the panel. A press on a value that was already whole changes one half and leaves the panel open, so the reader can change the day and then the time. always closes on every press that changes the value; never closes on none.",
+      "language": "tsx",
+      "source": "<>\n  <DateTimePicker closeOnSelect=\"auto\" />\n  <DateTimePicker closeOnSelect=\"always\" />\n  <DateTimePicker closeOnSelect=\"never\" />\n</>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "seconds",
+      "title": "Seconds",
+      "note": "granularity=\"second\" writes seconds in the field, and a step of 30 offers a time every half minute. The list stops at maxOptions rows, so a step in seconds needs a window from minTime to maxTime to stay short.",
+      "language": "tsx",
+      "source": "<DateTimePicker granularity=\"second\" step={30} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "step",
+      "title": "The step, and where it counts from",
+      "note": "The list counts from min’s time when min is set and from midnight when it is not, the rule input[type=time] uses. A step of 900 from 09:07 offers 09:07, 09:22 and 09:37; the field still accepts 09:15 by typing.",
+      "language": "tsx",
+      "source": "import { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\nexport default function DateTimePickerStep() {\n  return (\n    <Field>\n      <FieldLabel>Dock appointment</FieldLabel>\n      <DateTimePicker\n        maxTime={plainTime(16, 45)}\n        minTime={plainTime(7, 15)}\n        referenceDateTime={plainDateTime(plainDate(2026, 9, 30), plainTime(7, 15))}\n        step={1800}\n      />\n      <FieldDescription>Appointments start every 30 minutes from 7:15 AM.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "range-bounds",
+      "title": "Two pairs of bounds together",
+      "note": "min and max bound the whole value; minTime and maxTime bound the times of every day inside the range. On the day of min the list starts at min’s time, on the day of max it stops at max’s time, and on every day between it runs from minTime to maxTime.",
+      "language": "tsx",
+      "source": "<DateTimePicker\n  max={{ date: { year: 2026, month: 12, day: 18 }, time: { hour: 12, minute: 0, second: 0 } }}\n  maxTime={{ hour: 18, minute: 0, second: 0 }}\n  min={{ date: { year: 2026, month: 10, day: 1 }, time: { hour: 14, minute: 0, second: 0 } }}\n  minTime={{ hour: 9, minute: 0, second: 0 }}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "day-window",
+      "title": "The list follows the day the reader is on",
+      "note": "Before a day is chosen, the list answers the day the calendar has focused. Moving through the month recomputes it, so a Saturday that closes early shows its shorter list, or the empty state, while the reader is still deciding.",
+      "language": "tsx",
+      "source": "<DateTimePicker isTimeUnavailable={(time, date) => dayOfWeek(date) === 6 && time.hour >= 13} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "unavailable",
+      "title": "Refused times are disabled or hidden",
+      "note": "A refused time stays in the list, disabled, so the reader can still see the step. unavailableOptions=\"hide\" removes refused times instead. A day that offers no time shows the empty message.",
+      "language": "tsx",
+      "source": "import { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  dayOfWeek,\n  plainDate,\n  plainDateTime,\n  plainTime,\n  type PlainDate,\n  type PlainTime,\n} from '@slotted/core/date';\n\nconst isWeekend = (date: PlainDate) => dayOfWeek(date) === 0 || dayOfWeek(date) === 6;\nconst isLunch = (time: PlainTime) => time.hour === 12;\n\nexport default function DateTimePickerUnavailable() {\n  return (\n    <Field>\n      <FieldLabel>Warehouse inspection</FieldLabel>\n      <DateTimePicker\n        isDateUnavailable={isWeekend}\n        isTimeUnavailable={isLunch}\n        maxTime={plainTime(17, 0)}\n        minTime={plainTime(8, 0)}\n        referenceDateTime={plainDateTime(plainDate(2026, 9, 30), plainTime(9, 0))}\n        step={1800}\n      />\n      <FieldDescription>\n        Weekdays from 8:00 AM to 5:00 PM, closed for lunch at noon.\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "now",
+      "title": "One press for the current date and time",
+      "note": "Now writes both halves from the clock in timeZone. It does the same as the relative expression 0 in the field, for a reader who does not know the expression. messages.now replaces its label.",
+      "language": "tsx",
+      "source": "<DateTimePicker messages={{ now: 'Right now' }} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "relative",
+      "title": "Typing with the panel open",
+      "note": "Alt+ArrowDown opens the panel and leaves focus in the field, so every key the segments take still works, including +, - and = for a relative expression. Escape closes the expression first and leaves the panel open.",
+      "language": "tsx",
+      "source": "<DateTimePicker\n  defaultOpen\n  referenceDateTime={{\n    date: { year: 2026, month: 9, day: 30 },\n    time: { hour: 14, minute: 40, second: 0 },\n  }}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "presets",
+      "title": "Your own shortcuts",
+      "note": "presets adds a row in the head beside Now. The row wraps inside the panel’s width instead of widening it.",
+      "language": "tsx",
+      "source": "<DateTimePicker\n  presets={\n    <>\n      <Button onClick={tomorrowAtNine} size=\"sm\" variant=\"ghost\">\n        Tomorrow, 9:00 AM\n      </Button>\n      <Button onClick={mondayAtTwo} size=\"sm\" variant=\"ghost\">\n        Monday, 2:00 PM\n      </Button>\n    </>\n  }\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "Size",
+      "note": "The three steps of the control scale. Inside a field, an unset size follows the field. The rows of the list follow the same scale.",
+      "language": "tsx",
+      "source": "import { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\nexport default function DateTimePickerSizes() {\n  return (\n    <Stack gap={5}>\n      <Field>\n        <FieldLabel>Created after</FieldLabel>\n        <DateTimePicker\n          defaultValue={plainDateTime(plainDate(2026, 9, 1), plainTime(0, 0))}\n          size=\"sm\"\n        />\n      </Field>\n      <Field>\n        <FieldLabel>Pickup</FieldLabel>\n        <DateTimePicker\n          defaultValue={plainDateTime(plainDate(2026, 9, 30), plainTime(9, 0))}\n          size=\"md\"\n        />\n      </Field>\n      <Field>\n        <FieldLabel>Store opening</FieldLabel>\n        <DateTimePicker\n          defaultValue={plainDateTime(plainDate(2026, 11, 2), plainTime(10, 0))}\n          size=\"lg\"\n        />\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "variants",
+      "title": "Variant",
+      "note": "The frame is the datetime field’s, the same frame every field in a form draws. plain draws no frame at rest, for a table cell or a toolbar, and still shows hover and focus.",
+      "language": "tsx",
+      "source": "import { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\nconst PICKUP = plainDateTime(plainDate(2026, 9, 30), plainTime(9, 0));\n\nexport default function DateTimePickerVariants() {\n  return (\n    <Stack gap={5}>\n      <Field>\n        <FieldLabel>Pickup</FieldLabel>\n        <DateTimePicker defaultValue={PICKUP} variant=\"outline\" />\n      </Field>\n      <Field>\n        <FieldLabel>Loading starts</FieldLabel>\n        <DateTimePicker defaultValue={PICKUP} variant=\"subtle\" />\n      </Field>\n      <Field>\n        <FieldLabel>Gate opens</FieldLabel>\n        <DateTimePicker defaultValue={PICKUP} variant=\"plain\" />\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "placement",
+      "title": "Placement",
+      "note": "Where the panel opens relative to the control. It is a preference: when the panel does not fit on that side, the positioner opens it on the other, and data-placement says which side it chose.",
+      "language": "tsx",
+      "source": "<DateTimePicker placement=\"top-start\" />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "states",
+      "title": "States",
+      "note": "Read-only stays focusable and legible. Disabled takes no key and no press, and its trigger is a disabled button. Invalid draws the frame and the focus ring in the danger tone. In the list, the chosen time outranks the highlighted time, which outranks hover.",
+      "language": "tsx",
+      "source": "import { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldDescription, FieldError, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\nexport default function DateTimePickerStates() {\n  return (\n    <Stack gap={5}>\n      <Field invalid required>\n        <FieldLabel>Pickup</FieldLabel>\n        <DateTimePicker defaultValue={plainDateTime(plainDate(2026, 9, 29), plainTime(16, 0))} />\n        <FieldError>The pickup is before the order was placed, September 30 at 9:00 AM.</FieldError>\n      </Field>\n      <Field readOnly>\n        <FieldLabel>Order placed</FieldLabel>\n        <DateTimePicker defaultValue={plainDateTime(plainDate(2026, 9, 30), plainTime(9, 0))} />\n        <FieldDescription>Set when the order was placed.</FieldDescription>\n      </Field>\n      <Field disabled>\n        <FieldLabel>Delivered</FieldLabel>\n        <DateTimePicker />\n        <FieldDescription>Filled in by the carrier on delivery.</FieldDescription>\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "forms",
+      "title": "In a form",
+      "note": "name adds a hidden input that submits the value as YYYY-MM-DDTHH:mm:ss. The field around the Datetime Picker supplies the label, the description and the error, and passes its size, disabled state and validity to the Datetime Picker unless it sets its own.",
+      "language": "tsx",
+      "source": "<form action=\"/pickups\" method=\"post\">\n  <Field>\n    <FieldLabel>Pickup date and time</FieldLabel>\n    <DateTimePicker name=\"pickupAt\" required />\n    <FieldDescription>The dock is open from 9:00 AM to 6:00 PM.</FieldDescription>\n  </Field>\n</form>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "narrow",
+      "title": "Narrow",
+      "note": "With too little room for both surfaces, the list wraps under the calendar, in the value’s own order. Nothing is hidden and no switch is drawn.",
+      "language": "tsx",
+      "source": "import { useRef, useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { DateTimePicker, type DateTimePickerHandle } from '@slotted/react/datetime-picker';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  addDays,\n  plainDate,\n  plainDateTime,\n  plainTime,\n  type PlainDateTime,\n} from '@slotted/core/date';\n\nconst TODAY = plainDate(2026, 9, 30);\n\nexport default function DateTimePickerNarrow() {\n  const picker = useRef<DateTimePickerHandle>(null);\n  const [delivery, setDelivery] = useState<PlainDateTime | null>(null);\n\n  const choose = (next: PlainDateTime) => {\n    setDelivery(next);\n    picker.current?.close();\n  };\n\n  return (\n    <Field>\n      <FieldLabel>Delivery appointment</FieldLabel>\n      <DateTimePicker\n        onValueChange={setDelivery}\n        presets={\n          <>\n            <Button\n              onClick={() => choose(plainDateTime(TODAY, plainTime(17, 0)))}\n              size=\"sm\"\n              variant=\"ghost\"\n            >\n              Today, 5:00 PM\n            </Button>\n            <Button\n              onClick={() => choose(plainDateTime(addDays(TODAY, 1), plainTime(9, 0)))}\n              size=\"sm\"\n              variant=\"ghost\"\n            >\n              Tomorrow, 9:00 AM\n            </Button>\n          </>\n        }\n        ref={picker}\n        referenceDateTime={plainDateTime(TODAY, plainTime(9, 0))}\n        step={1800}\n        value={delivery}\n      />\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "composition",
+      "title": "Composition",
+      "note": "DateTimePickerDefaultsProvider sets the step and the clock once; SlottedProvider sets the language and the words; renderOption draws the content of one row; footer takes your actions; and the ref reaches focus(), open() and close(). A value set on one Datetime Picker still wins over the provider.",
+      "language": "tsx",
+      "source": "<DateTimePickerDefaultsProvider step={1800}>\n  <DateTimePicker\n    ref={handle}\n    renderOption={({ label, time }) => (\n      <>\n        <span>{label}</span>\n        <span>{seatsLeft(time)} seats left</span>\n      </>\n    )}\n  />\n</DateTimePickerDefaultsProvider>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Keyboard",
+      "note": "Alt+ArrowDown opens the panel from a segment and leaves focus in the field. ArrowDown on the trigger opens it and moves focus into the surface openTo names. In the list: the arrow keys, Home, End, type-ahead, and PageUp and PageDown to the previous or next hour. Tab stays inside the panel while it is open, and each surface is one Tab stop.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\nexport default function DateTimePickerKeyboard() {\n  const [last, setLast] = useState('Focus the field and press Alt+ArrowDown.');\n\n  return (\n    <Field>\n      <FieldLabel>Dispatch</FieldLabel>\n      <DateTimePicker\n        defaultValue={plainDateTime(plainDate(2026, 9, 30), plainTime(16, 30))}\n        messages={{ choose: 'Choose dispatch time', change: 'Change dispatch time, {date}' }}\n        onOpenChange={(open, request) =>\n          setLast(`${open ? 'Opened' : 'Closed'} by ${request.reason}.`)\n        }\n      />\n      <FieldDescription>{last}</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "basic",
+      "title": "basic.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\nconst FIRST_PICKUP = plainDateTime(plainDate(2026, 9, 30), plainTime(9, 0));\n\nexport default function DateTimePickerBasic() {\n  return (\n    <Field>\n      <FieldLabel>Pickup date and time</FieldLabel>\n      <DateTimePicker name=\"pickupAt\" referenceDateTime={FIRST_PICKUP} />\n      <FieldDescription>\n        Type the date and time, or choose them from the calendar and the list.\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "bounds",
+      "title": "bounds.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\nexport default function DateTimePickerBounds() {\n  return (\n    <Field>\n      <FieldLabel>Container collection</FieldLabel>\n      <DateTimePicker\n        defaultValue={plainDateTime(plainDate(2026, 10, 1), plainTime(13, 0))}\n        max={plainDateTime(plainDate(2026, 10, 9), plainTime(12, 0))}\n        maxTime={plainTime(17, 0)}\n        min={plainDateTime(plainDate(2026, 10, 1), plainTime(13, 0))}\n        minTime={plainTime(8, 0)}\n        step={3600}\n      />\n      <FieldDescription>\n        From October 1 at 1:00 PM to October 9 at 12:00 PM, between 8:00 AM and 5:00 PM.\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "carrier-pickup",
+      "title": "carrier-pickup.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useRef, useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { DateTimePicker, type DateTimePickerHandle } from '@slotted/react/datetime-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { Text } from '@slotted/react/typography';\nimport {\n  createDateTimeFormat,\n  dayOfWeek,\n  plainDate,\n  plainDateTime,\n  plainTime,\n  toISODate,\n  toISOTime,\n  type PlainDate,\n  type PlainDateTime,\n  type PlainTime,\n} from '@slotted/core/date';\n\n/** The windows Harbor Freightways collects in, every weekday. */\nconst WINDOWS = [plainTime(8, 0), plainTime(10, 30), plainTime(13, 0), plainTime(15, 30)];\nconst TRUCKS_PER_WINDOW = 3;\n/** Pickups already booked, by date and window. */\nconst BOOKED: Record<string, number> = {\n  '2026-10-01T08:00:00': 3,\n  '2026-10-01T10:30:00': 2,\n  '2026-10-02T13:00:00': 3,\n  '2026-10-02T15:30:00': 1,\n};\nconst words = createDateTimeFormat({ locale: 'en-US' });\n\nconst trucksLeft = (time: PlainTime, date: PlainDate) =>\n  TRUCKS_PER_WINDOW - (BOOKED[`${toISODate(date)}T${toISOTime(time)}`] ?? 0);\nconst isWeekend = (date: PlainDate) => dayOfWeek(date) === 0 || dayOfWeek(date) === 6;\n\nexport default function DateTimePickerCarrierPickup() {\n  const picker = useRef<DateTimePickerHandle>(null);\n  const [pickup, setPickup] = useState<PlainDateTime | null>(null);\n\n  return (\n    <Field required>\n      <FieldLabel>Carrier pickup slot</FieldLabel>\n      <DateTimePicker\n        closeOnSelect=\"never\"\n        footer={\n          <Button onClick={() => picker.current?.close()} size=\"sm\">\n            Done\n          </Button>\n        }\n        isDateUnavailable={isWeekend}\n        isTimeUnavailable={(time, date) => trucksLeft(time, date) === 0}\n        min={plainDateTime(plainDate(2026, 10, 1), plainTime(8, 0))}\n        onValueChange={setPickup}\n        options={WINDOWS}\n        ref={picker}\n        referenceDateTime={plainDateTime(plainDate(2026, 10, 1), plainTime(10, 30))}\n        renderOption={({ date, label, time, unavailable }) => (\n          <>\n            <span>{label}</span>\n            <Text size=\"sm\" tone=\"muted\">\n              {unavailable\n                ? 'Full'\n                : `${trucksLeft(time, date)} of ${TRUCKS_PER_WINDOW} trucks left`}\n            </Text>\n          </>\n        )}\n        value={pickup}\n      />\n      <FieldDescription>\n        {pickup === null\n          ? 'Harbor Freightways collects on weekdays, in four windows.'\n          : `Harbor Freightways collects on ${words.describe(pickup)}.`}\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "clearable",
+      "title": "clearable.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\nexport default function DateTimePickerClearable() {\n  return (\n    <Field>\n      <FieldLabel>Hold shipment until</FieldLabel>\n      <DateTimePicker\n        clearable\n        defaultValue={plainDateTime(plainDate(2026, 10, 9), plainTime(17, 0))}\n      />\n      <FieldDescription>Clear the date and time to release the shipment.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "controlled",
+      "title": "controlled.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport {\n  addDays,\n  createDateTimeFormat,\n  plainDate,\n  plainDateTime,\n  plainTime,\n  type PlainDateTime,\n} from '@slotted/core/date';\n\nconst TODAY = plainDate(2026, 9, 30);\nconst words = createDateTimeFormat({ locale: 'en-US' });\n\nexport default function DateTimePickerControlled() {\n  const [call, setCall] = useState<PlainDateTime | null>(\n    plainDateTime(addDays(TODAY, 1), plainTime(9, 0)),\n  );\n\n  return (\n    <Stack gap={4}>\n      <Field>\n        <FieldLabel>Call Harbor Freightways</FieldLabel>\n        <DateTimePicker onValueChange={setCall} value={call} />\n        <FieldDescription>\n          {call === null ? 'No call scheduled.' : `Call on ${words.describe(call)}.`}\n        </FieldDescription>\n      </Field>\n      <Inline gap={2}>\n        <Button\n          onClick={() => setCall(plainDateTime(addDays(TODAY, 1), plainTime(9, 0)))}\n          size=\"sm\"\n          tone=\"secondary\"\n          variant=\"outline\"\n        >\n          Tomorrow, 9:00 AM\n        </Button>\n        <Button\n          onClick={() => setCall(plainDateTime(addDays(TODAY, 2), plainTime(14, 0)))}\n          size=\"sm\"\n          tone=\"secondary\"\n          variant=\"outline\"\n        >\n          Friday, 2:00 PM\n        </Button>\n        <Button onClick={() => setCall(null)} size=\"sm\" tone=\"secondary\" variant=\"ghost\">\n          No call\n        </Button>\n      </Inline>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "footer",
+      "title": "footer.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useRef } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { DateTimePicker, type DateTimePickerHandle } from '@slotted/react/datetime-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\nexport default function DateTimePickerFooter() {\n  const picker = useRef<DateTimePickerHandle>(null);\n\n  return (\n    <Field>\n      <FieldLabel>Maintenance window starts</FieldLabel>\n      <DateTimePicker\n        closeOnSelect=\"never\"\n        defaultValue={plainDateTime(plainDate(2026, 10, 3), plainTime(22, 0))}\n        footer={\n          <Button onClick={() => picker.current?.close()} size=\"sm\">\n            Done\n          </Button>\n        }\n        ref={picker}\n        step={3600}\n      />\n      <FieldDescription>Conveyors stop for four hours from this time.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "form",
+      "title": "form.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport type { SubmitEvent } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldError, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\nimport {\n  compareDateTime,\n  plainDate,\n  plainDateTime,\n  plainTime,\n  type PlainDateTime,\n} from '@slotted/core/date';\n\nconst EARLIEST = plainDateTime(plainDate(2026, 10, 1), plainTime(8, 0));\n\nexport default function DateTimePickerForm() {\n  const [pickup, setPickup] = useState<PlainDateTime | null>(null);\n  const [submitted, setSubmitted] = useState(false);\n  const [saved, setSaved] = useState<string | null>(null);\n\n  const error =\n    pickup !== null && compareDateTime(pickup, EARLIEST) < 0\n      ? 'Choose October 1, 2026 at 8:00 AM or later.'\n      : submitted && pickup === null\n        ? 'Choose a pickup date and time.'\n        : '';\n\n  const submit = (event: SubmitEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setSubmitted(true);\n    const value = new FormData(event.currentTarget).get('pickupAt');\n    const valid = pickup !== null && compareDateTime(pickup, EARLIEST) >= 0;\n    setSaved(valid ? `Pickup booked for ${String(value)}.` : null);\n  };\n\n  const reset = () => {\n    setPickup(null);\n    setSubmitted(false);\n    setSaved(null);\n  };\n\n  return (\n    <form noValidate onReset={reset} onSubmit={submit}>\n      <Stack gap={5}>\n        <Field invalid={error === '' ? undefined : true} required>\n          <FieldLabel>Pickup date and time</FieldLabel>\n          <DateTimePicker\n            min={EARLIEST}\n            name=\"pickupAt\"\n            onValueChange={setPickup}\n            referenceDateTime={EARLIEST}\n            value={pickup}\n          />\n          <FieldError live=\"polite\" reserve>\n            {error}\n          </FieldError>\n        </Field>\n        <Inline align=\"center\" gap={3}>\n          <Button type=\"submit\">Book pickup</Button>\n          <Button tone=\"secondary\" type=\"reset\" variant=\"outline\">\n            Reset\n          </Button>\n          {saved && (\n            <Text size=\"sm\" tone=\"muted\">\n              {saved}\n            </Text>\n          )}\n        </Inline>\n      </Stack>\n    </form>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "granularity",
+      "title": "granularity.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\nexport default function DateTimePickerGranularity() {\n  return (\n    <Stack gap={5}>\n      <Field>\n        <FieldLabel>Shift starts</FieldLabel>\n        <DateTimePicker\n          defaultValue={plainDateTime(plainDate(2026, 10, 1), plainTime(6, 0))}\n          granularity=\"hour\"\n          step={3600}\n        />\n        <FieldDescription>Shifts start on the hour.</FieldDescription>\n      </Field>\n      <Field>\n        <FieldLabel>Batch run starts</FieldLabel>\n        <DateTimePicker\n          defaultValue={plainDateTime(plainDate(2026, 9, 30), plainTime(2, 0, 30))}\n          granularity=\"second\"\n          maxTime={plainTime(2, 5)}\n          minTime={plainTime(2, 0)}\n          step={30}\n        />\n        <FieldDescription>The nightly run starts between 2:00:00 and 2:05:00 AM.</FieldDescription>\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "hour-cycle",
+      "title": "hour-cycle.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\nconst DEPARTURE = plainDateTime(plainDate(2026, 9, 30), plainTime(18, 45));\n\nexport default function DateTimePickerHourCycle() {\n  return (\n    <Stack gap={5}>\n      <Field>\n        <FieldLabel>Departure, 12-hour clock</FieldLabel>\n        <DateTimePicker defaultValue={DEPARTURE} hourCycle={12} />\n      </Field>\n      <Field>\n        <FieldLabel>Departure, 24-hour clock</FieldLabel>\n        <DateTimePicker defaultValue={DEPARTURE} hourCycle={24} />\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "locale",
+      "title": "locale.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\nconst PICKUP = plainDateTime(plainDate(2026, 9, 30), plainTime(14, 30));\n\nexport default function DateTimePickerLocale() {\n  return (\n    <Stack gap={5}>\n      <Field>\n        <FieldLabel>Pickup, United States (en-US)</FieldLabel>\n        <DateTimePicker defaultValue={PICKUP} locale=\"en-US\" />\n      </Field>\n      <Field>\n        <FieldLabel>Pickup, United Kingdom (en-GB)</FieldLabel>\n        <DateTimePicker defaultValue={PICKUP} locale=\"en-GB\" />\n      </Field>\n      <Field>\n        <FieldLabel>Pickup, Germany (de-DE)</FieldLabel>\n        <DateTimePicker defaultValue={PICKUP} locale=\"de-DE\" />\n      </Field>\n      <Field>\n        <FieldLabel>Pickup, Japan (ja-JP)</FieldLabel>\n        <DateTimePicker defaultValue={PICKUP} locale=\"ja-JP\" />\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "options",
+      "title": "options.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\nconst DEPARTURES = [\n  plainTime(5, 40),\n  plainTime(8, 15),\n  plainTime(11, 50),\n  plainTime(16, 5),\n  plainTime(21, 30),\n];\n\nexport default function DateTimePickerOptions() {\n  return (\n    <Field>\n      <FieldLabel>Line-haul departure</FieldLabel>\n      <DateTimePicker\n        options={DEPARTURES}\n        referenceDateTime={plainDateTime(plainDate(2026, 9, 30), plainTime(8, 15))}\n      />\n      <FieldDescription>The Chicago to Memphis trailer leaves five times a day.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "publish-at",
+      "title": "publish-at.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useRef, useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { DateTimePicker, type DateTimePickerHandle } from '@slotted/react/datetime-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  addDays,\n  createDateTimeFormat,\n  dayOfWeek,\n  plainDate,\n  plainDateTime,\n  plainTime,\n  type PlainDateTime,\n} from '@slotted/core/date';\n\nconst NOW = plainDateTime(plainDate(2026, 9, 30), plainTime(9, 0));\nconst TOMORROW = plainDateTime(addDays(NOW.date, 1), plainTime(9, 0));\nconst NEXT_MONDAY = plainDateTime(\n  addDays(NOW.date, (8 - dayOfWeek(NOW.date)) % 7 || 7),\n  plainTime(9, 0),\n);\nconst words = createDateTimeFormat({ locale: 'en-US' });\n\nexport default function DateTimePickerPublishAt() {\n  const picker = useRef<DateTimePickerHandle>(null);\n  const [publishAt, setPublishAt] = useState<PlainDateTime | null>(TOMORROW);\n\n  const choose = (next: PlainDateTime) => {\n    setPublishAt(next);\n    picker.current?.close();\n  };\n\n  return (\n    <Field required>\n      <FieldLabel>Publish the autumn price list at</FieldLabel>\n      <DateTimePicker\n        min={NOW}\n        onValueChange={setPublishAt}\n        presets={\n          <>\n            <Button onClick={() => choose(TOMORROW)} size=\"sm\" variant=\"ghost\">\n              Tomorrow, 9:00 AM\n            </Button>\n            <Button onClick={() => choose(NEXT_MONDAY)} size=\"sm\" variant=\"ghost\">\n              Monday, 9:00 AM\n            </Button>\n          </>\n        }\n        ref={picker}\n        referenceDateTime={NOW}\n        timeZone=\"America/New_York\"\n        value={publishAt}\n      />\n      <FieldDescription>\n        {publishAt === null\n          ? 'Choose when the new prices go live, New York time.'\n          : `Prices go live on ${words.describe(publishAt)}, New York time.`}\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "reference",
+      "title": "reference.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  createDateTimeFormat,\n  plainDate,\n  plainDateTime,\n  plainTime,\n  type PlainDateTime,\n} from '@slotted/core/date';\n\nconst END_OF_SHIFT = plainDateTime(plainDate(2026, 10, 1), plainTime(15, 0));\nconst words = createDateTimeFormat({ locale: 'en-US' });\n\nexport default function DateTimePickerReference() {\n  const [collection, setCollection] = useState<PlainDateTime | null>(null);\n\n  return (\n    <Field>\n      <FieldLabel>Courier collection</FieldLabel>\n      <DateTimePicker\n        onValueChange={setCollection}\n        referenceDateTime={END_OF_SHIFT}\n        value={collection}\n      />\n      <FieldDescription>\n        {collection === null\n          ? 'A day chosen in the calendar opens the time list on 3:00 PM.'\n          : `Collection on ${words.describe(collection)}.`}\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "time-zones",
+      "title": "time-zones.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\nimport { toISODateTime, wallClockIn, type PlainDateTime } from '@slotted/core/date';\n\n/** The pickup as the server stores it: an instant, 7:00 PM UTC on September 30, 2026. */\nconst STORED = Date.UTC(2026, 8, 30, 19, 0);\n\nexport default function DateTimePickerTimeZones() {\n  const [pickup, setPickup] = useState<PlainDateTime | null>(\n    wallClockIn(STORED, 'America/Chicago'),\n  );\n\n  return (\n    <Stack gap={4}>\n      <Field>\n        <FieldLabel>Pickup, Chicago terminal</FieldLabel>\n        <DateTimePicker onValueChange={setPickup} timeZone=\"America/Chicago\" value={pickup} />\n        <FieldDescription>Today and Now follow the clock in Chicago.</FieldDescription>\n      </Field>\n      <Text size=\"sm\" tone=\"muted\">\n        {pickup === null ? 'Value: null' : `Value: ${toISODateTime(pickup)}, with no offset`}\n      </Text>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "typing",
+      "title": "typing.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { DateTimePicker } from '@slotted/react/datetime-picker';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { plainDate, plainDateTime, plainTime, toISODateTime } from '@slotted/core/date';\n\nconst RECEIVED = plainDateTime(plainDate(2026, 9, 30), plainTime(14, 30));\n\nconst REASONS: Record<string, string> = {\n  keyboard: 'from the keyboard',\n  select: 'chosen in the panel',\n  clear: 'cleared',\n  blur: 'completed when the field lost focus',\n};\n\nexport default function DateTimePickerTyping() {\n  const [change, setChange] = useState('No change yet.');\n\n  return (\n    <Field>\n      <FieldLabel>Goods received at</FieldLabel>\n      <DateTimePicker\n        defaultValue={RECEIVED}\n        onValueChange={(value, request) => {\n          const text = value === null ? 'empty' : toISODateTime(value);\n          setChange(`${text}, ${REASONS[request.reason] ?? request.reason}.`);\n        }}\n        referenceDateTime={RECEIVED}\n      />\n      <FieldDescription>{change}</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    }
+  ]
+}