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

package/docs/datetime-picker.json

@@ -0,0 +1,928 @@
+{
+  "family": "datetime-picker",
+  "ui": "datetime-picker",
+  "binding": "angular",
+  "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 { SlDateTimePicker, SlDateTimePickerOption, SlDateTimePickerPresets, SlDateTimePickerFooter } from '@slotted/angular/datetime-picker';",
+        "selector": "[slDateTimePicker]",
+        "exportAs": "slDateTimePicker"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the element the directive is on",
+          "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, after the control inside the root",
+          "required": false,
+          "purpose": "The layer the panel stands on, drawn while the panel is open. It carries data-ui=\"datetime-picker\" again, 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": "your own element, marked slDateTimePickerPresets",
+          "required": false,
+          "purpose": "A row in the head, beside Now, for your own shortcuts. 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 SlCalendar 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": "your own element, marked slDateTimePickerFooter",
+          "required": false,
+          "purpose": "A row under both surfaces for your own actions. 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": "SlDateTimePicker",
+          "description": "The value, when you control it. Update it from (valueChange)."
+        },
+        {
+          "name": "defaultValue",
+          "type": "PlainDateTime | null",
+          "defaultValue": "—",
+          "appliesTo": "SlDateTimePicker",
+          "description": "The starting value when the Datetime Picker holds its own state. Read once, on init."
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlDateTimePicker",
+          "description": "Whether the panel is open, when you control it. Update it from (openChange)."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlDateTimePicker",
+          "description": "Whether the panel starts open. A panel that starts open does not take focus."
+        },
+        {
+          "name": "highlighted",
+          "type": "DateTimePickerHighlight",
+          "defaultValue": "—",
+          "appliesTo": "SlDateTimePicker",
+          "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 (highlightedChange)."
+        },
+        {
+          "name": "defaultHighlighted",
+          "type": "DateTimePickerHighlight",
+          "defaultValue": "—",
+          "appliesTo": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "description": "The earliest time on every day inside the range. It applies together with min."
+        },
+        {
+          "name": "maxTime",
+          "type": "PlainTime",
+          "defaultValue": "—",
+          "appliesTo": "SlDateTimePicker",
+          "description": "The latest time on every day inside the range. It applies together with max."
+        },
+        {
+          "name": "isDateUnavailable",
+          "type": "(date: PlainDate) => boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "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. Ignored when options is set."
+        },
+        {
+          "name": "options",
+          "type": "readonly PlainTime[]",
+          "defaultValue": "—",
+          "appliesTo": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "description": "The smallest unit the field writes."
+        },
+        {
+          "name": "calendar",
+          "type": "'gregory'",
+          "defaultValue": "gregory",
+          "appliesTo": "SlDateTimePicker",
+          "description": "The calendar system. gregory is the only value today."
+        },
+        {
+          "name": "firstDayOfWeek",
+          "type": "number",
+          "defaultValue": "the locale’s",
+          "appliesTo": "SlDateTimePicker",
+          "description": "The first day of the calendar’s week, from 0 for Sunday to 6 for Saturday."
+        },
+        {
+          "name": "months",
+          "type": "number",
+          "defaultValue": "1",
+          "appliesTo": "SlDateTimePicker",
+          "description": "How many months the calendar draws side by side."
+        },
+        {
+          "name": "weekNumbers",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlDateTimePicker",
+          "description": "Adds a column of ISO 8601 week numbers to the calendar."
+        },
+        {
+          "name": "referenceDateTime",
+          "type": "PlainDateTime",
+          "defaultValue": "the current date and time",
+          "appliesTo": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "description": "The surface that takes focus when the trigger or openSurface() opens the panel. Both surfaces are drawn either way."
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "'auto' | 'always' | 'never'",
+          "defaultValue": "auto",
+          "appliesTo": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "description": "Disables the field and the trigger. Unset, it follows the form control, then the enclosing field."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "the field’s",
+          "appliesTo": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "description": "Sets aria-required on the field. Unset, it follows the enclosing field. Validators.required checks the value in a form."
+        },
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "description": "Whether +, - and = on a segment open a relative expression in the field, such as +2h."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "SlDateTimePicker",
+          "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": "SlDateTimePicker",
+          "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": "slDateTimePickerPresets",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "SlDateTimePickerPresets",
+          "description": "Marks your own element as the shortcuts row in the head, beside Now."
+        },
+        {
+          "name": "slDateTimePickerFooter",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "SlDateTimePickerFooter",
+          "description": "Marks your own element as the row of actions under both surfaces."
+        }
+      ],
+      "composition": [
+        {
+          "name": "provideDateTimePickerDefaults",
+          "type": "provider",
+          "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": "slDateTimePickerOption",
+          "type": "ng-template",
+          "defaultValue": "—",
+          "appliesTo": "SlDateTimePickerOption",
+          "description": "Draws the content of one row of the list. The context carries the time as $implicit, plus date, label, selected, current and unavailable. The row keeps its role, states and keyboard."
+        },
+        {
+          "name": "exportAs",
+          "type": "slDateTimePicker",
+          "defaultValue": "—",
+          "appliesTo": "SlDateTimePicker",
+          "description": "Gives a template the instance: focus() moves focus to the first segment of the field, openSurface() opens the panel and moves focus into it, as the trigger does, and closeSurface() closes it."
+        },
+        {
+          "name": "ControlValueAccessor",
+          "type": "interface",
+          "defaultValue": "—",
+          "appliesTo": "SlDateTimePicker",
+          "description": "formControlName, formControl and ngModel bind the value. As a validator it reports slottedDateTimeRange outside min and max, slottedDateTimeWindow outside minTime and maxTime, slottedDateTimeUnavailable for a refused date or time, and slottedDateTimeIncomplete while only one half is typed. Validators.required covers an empty value."
+        },
+        {
+          "name": "(keydown)",
+          "type": "EventListener",
+          "defaultValue": "—",
+          "appliesTo": "SlDateTimePicker",
+          "description": "A listener on the host runs before the Datetime Picker handles keys on the control, the trigger and the list."
+        }
+      ],
+      "events": [
+        {
+          "name": "valueChange",
+          "payload": "DateTimeFieldChangeRequest | ChangeRequest<PlainDateTime | null>",
+          "when": "Before the value changes. 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": "openChange",
+          "payload": "ChangeRequest<boolean>",
+          "when": "Before the panel opens or closes. reason is pointer for the trigger, keyboard for Alt+ArrowDown and ArrowDown on the trigger, programmatic for openSurface() and closeSurface(), escape and outsidePress for a dismissal, and select for the press that closed it."
+        },
+        {
+          "name": "highlightedChange",
+          "payload": "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 openSurface() 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": "html",
+      "source": "<div slField>\n  <label slFieldLabel>Pickup date and time</label>\n  <div slDateTimePicker name=\"pickupAt\" [clearable]=\"true\"></div>\n  <span slFieldDescription>The carrier collects at this date and time.</span>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "panel",
+      "title": "Two surfaces in one dialog",
+      "note": "The panel holds a grid drawn by SlCalendar 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": "html",
+      "source": "<div slDateTimePicker [defaultOpen]=\"true\"></div>\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": "html",
+      "source": "<div slDateTimePicker openTo=\"time\"></div>\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": "html",
+      "source": "<div slDateTimePicker closeOnSelect=\"auto\"></div>\n<div slDateTimePicker closeOnSelect=\"always\"></div>\n<div slDateTimePicker closeOnSelect=\"never\"></div>\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": "html",
+      "source": "<div slDateTimePicker granularity=\"second\" [step]=\"30\"></div>\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-datetime-picker-step',\n  imports: [SlDateTimePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Dock appointment</label>\n      <div\n        slDateTimePicker\n        [maxTime]=\"lastStart\"\n        [minTime]=\"firstStart\"\n        [referenceDateTime]=\"reference\"\n        [step]=\"1800\"\n      ></div>\n      <span slFieldDescription>Appointments start every 30 minutes from 7:15 AM.</span>\n    </div>\n  `,\n})\nexport class DateTimePickerStep {\n  protected readonly firstStart = plainTime(7, 15);\n  protected readonly lastStart = plainTime(16, 45);\n  protected readonly reference = plainDateTime(plainDate(2026, 9, 30), plainTime(7, 15));\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": "html",
+      "source": "<div\n  slDateTimePicker\n  [min]=\"bookingOpens\"\n  [max]=\"bookingCloses\"\n  [minTime]=\"nine\"\n  [maxTime]=\"six\"\n></div>\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": "html",
+      "source": "<div slDateTimePicker [isTimeUnavailable]=\"closesEarlyOnSaturday\"></div>\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  dayOfWeek,\n  plainDate,\n  plainDateTime,\n  plainTime,\n  type PlainDate,\n  type PlainTime,\n} from '@slotted/core/date';\n\n@Component({\n  selector: 'app-datetime-picker-unavailable',\n  imports: [SlDateTimePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Warehouse inspection</label>\n      <div\n        slDateTimePicker\n        [isDateUnavailable]=\"isWeekend\"\n        [isTimeUnavailable]=\"isLunch\"\n        [maxTime]=\"dayEnds\"\n        [minTime]=\"dayStarts\"\n        [referenceDateTime]=\"reference\"\n        [step]=\"1800\"\n      ></div>\n      <span slFieldDescription>Weekdays from 8:00 AM to 5:00 PM, closed for lunch at noon.</span>\n    </div>\n  `,\n})\nexport class DateTimePickerUnavailable {\n  protected readonly dayStarts = plainTime(8, 0);\n  protected readonly dayEnds = plainTime(17, 0);\n  protected readonly reference = plainDateTime(plainDate(2026, 9, 30), plainTime(9, 0));\n  protected readonly isWeekend = (date: PlainDate) =>\n    dayOfWeek(date) === 0 || dayOfWeek(date) === 6;\n  protected readonly isLunch = (time: PlainTime) => time.hour === 12;\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": "html",
+      "source": "<div slDateTimePicker [messages]=\"{ now: 'Right now' }\"></div>\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": "html",
+      "source": "<div slDateTimePicker [defaultOpen]=\"true\" [referenceDateTime]=\"reference\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "presets",
+      "title": "Your own shortcuts",
+      "note": "An element with slDateTimePickerPresets adds a row in the head beside Now. The row wraps inside the panel’s width instead of widening it.",
+      "language": "html",
+      "source": "<div slDateTimePicker>\n  <div slDateTimePickerPresets>\n    <button slButton size=\"sm\" variant=\"ghost\" type=\"button\" (click)=\"tomorrowAtNine()\">\n      Tomorrow, 9:00 AM\n    </button>\n    <button slButton size=\"sm\" variant=\"ghost\" type=\"button\" (click)=\"mondayAtTwo()\">\n      Monday, 2:00 PM\n    </button>\n  </div>\n</div>\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlStack } from '@slotted/angular/stack';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-datetime-picker-sizes',\n  imports: [SlDateTimePicker, SlField, SlFieldLabel, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Created after</label>\n        <div slDateTimePicker size=\"sm\" [defaultValue]=\"created\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Pickup</label>\n        <div slDateTimePicker size=\"md\" [defaultValue]=\"pickup\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Store opening</label>\n        <div slDateTimePicker size=\"lg\" [defaultValue]=\"opening\"></div>\n      </div>\n    </div>\n  `,\n})\nexport class DateTimePickerSizes {\n  protected readonly created = plainDateTime(plainDate(2026, 9, 1), plainTime(0, 0));\n  protected readonly pickup = plainDateTime(plainDate(2026, 9, 30), plainTime(9, 0));\n  protected readonly opening = plainDateTime(plainDate(2026, 11, 2), plainTime(10, 0));\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlStack } from '@slotted/angular/stack';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-datetime-picker-variants',\n  imports: [SlDateTimePicker, SlField, SlFieldLabel, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Pickup</label>\n        <div slDateTimePicker variant=\"outline\" [defaultValue]=\"pickup\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Loading starts</label>\n        <div slDateTimePicker variant=\"subtle\" [defaultValue]=\"pickup\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Gate opens</label>\n        <div slDateTimePicker variant=\"plain\" [defaultValue]=\"pickup\"></div>\n      </div>\n    </div>\n  `,\n})\nexport class DateTimePickerVariants {\n  protected readonly pickup = plainDateTime(plainDate(2026, 9, 30), plainTime(9, 0));\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": "html",
+      "source": "<div slDateTimePicker placement=\"top-start\"></div>\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldDescription, SlFieldError, SlFieldLabel } from '@slotted/angular/field';\nimport { SlStack } from '@slotted/angular/stack';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-datetime-picker-states',\n  imports: [SlDateTimePicker, SlField, SlFieldDescription, SlFieldError, SlFieldLabel, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField invalid required>\n        <label slFieldLabel>Pickup</label>\n        <div slDateTimePicker [defaultValue]=\"early\"></div>\n        <span slFieldError\n          >The pickup is before the order was placed, September 30 at 9:00 AM.</span\n        >\n      </div>\n      <div slField readOnly>\n        <label slFieldLabel>Order placed</label>\n        <div slDateTimePicker [defaultValue]=\"placed\"></div>\n        <span slFieldDescription>Set when the order was placed.</span>\n      </div>\n      <div slField disabled>\n        <label slFieldLabel>Delivered</label>\n        <div slDateTimePicker></div>\n        <span slFieldDescription>Filled in by the carrier on delivery.</span>\n      </div>\n    </div>\n  `,\n})\nexport class DateTimePickerStates {\n  protected readonly early = plainDateTime(plainDate(2026, 9, 29), plainTime(16, 0));\n  protected readonly placed = plainDateTime(plainDate(2026, 9, 30), plainTime(9, 0));\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "forms",
+      "title": "In a form",
+      "note": "The Datetime Picker is a form control: formControlName, formControl and ngModel bind the value, and name adds a hidden input that submits it as YYYY-MM-DDTHH:mm:ss. The field around it 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": "html",
+      "source": "<form [formGroup]=\"form\">\n  <div slField>\n    <label slFieldLabel>Pickup date and time</label>\n    <div slDateTimePicker formControlName=\"pickupAt\"></div>\n    <span slFieldDescription>The dock is open from 9:00 AM to 6:00 PM.</span>\n  </div>\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": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlDateTimePicker, SlDateTimePickerPresets } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldLabel } from '@slotted/angular/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\n@Component({\n  selector: 'app-datetime-picker-narrow',\n  imports: [SlButton, SlDateTimePicker, SlDateTimePickerPresets, SlField, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Delivery appointment</label>\n      <div\n        slDateTimePicker\n        #picker=\"slDateTimePicker\"\n        [referenceDateTime]=\"reference\"\n        [step]=\"1800\"\n        [value]=\"delivery()\"\n        (valueChange)=\"delivery.set($event.value)\"\n      >\n        <div slDateTimePickerPresets>\n          <button\n            slButton\n            size=\"sm\"\n            type=\"button\"\n            variant=\"ghost\"\n            (click)=\"delivery.set(todayAtFive); picker.closeSurface()\"\n          >\n            Today, 5:00 PM\n          </button>\n          <button\n            slButton\n            size=\"sm\"\n            type=\"button\"\n            variant=\"ghost\"\n            (click)=\"delivery.set(tomorrowAtNine); picker.closeSurface()\"\n          >\n            Tomorrow, 9:00 AM\n          </button>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class DateTimePickerNarrow {\n  protected readonly reference = plainDateTime(TODAY, plainTime(9, 0));\n  protected readonly todayAtFive = plainDateTime(TODAY, plainTime(17, 0));\n  protected readonly tomorrowAtNine = plainDateTime(addDays(TODAY, 1), plainTime(9, 0));\n  protected readonly delivery = signal<PlainDateTime | null>(null);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "composition",
+      "title": "Composition",
+      "note": "provideDateTimePickerDefaults sets the step and the clock once; provideSlotted sets the language and the words; an ng-template with slDateTimePickerOption draws the content of one row; slDateTimePickerFooter takes your actions; and exportAs reaches focus(), openSurface() and closeSurface(). A value set on one Datetime Picker still wins over the provider.",
+      "language": "html",
+      "source": "<div slDateTimePicker>\n  <ng-template slDateTimePickerOption let-time let-label=\"label\">\n    <span>{{ label }}</span>\n    <span>{{ seatsLeft(time) }} seats left</span>\n  </ng-template>\n</div>\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": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\nimport type { ChangeRequest } from '@slotted/core/state';\n\n@Component({\n  selector: 'app-datetime-picker-keyboard',\n  imports: [SlDateTimePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Dispatch</label>\n      <div\n        slDateTimePicker\n        [defaultValue]=\"dispatch\"\n        [messages]=\"messages\"\n        (openChange)=\"record($event)\"\n      ></div>\n      <span slFieldDescription>{{ last() }}</span>\n    </div>\n  `,\n})\nexport class DateTimePickerKeyboard {\n  protected readonly dispatch = plainDateTime(plainDate(2026, 9, 30), plainTime(16, 30));\n  protected readonly messages = {\n    choose: 'Choose dispatch time',\n    change: 'Change dispatch time, {date}',\n  };\n  protected readonly last = signal('Focus the field and press Alt+ArrowDown.');\n\n  protected record(request: ChangeRequest<boolean>): void {\n    this.last.set(`${request.value ? 'Opened' : 'Closed'} by ${request.reason}.`);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "basic",
+      "title": "basic.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-datetime-picker-basic',\n  imports: [SlDateTimePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Pickup date and time</label>\n      <div slDateTimePicker name=\"pickupAt\" [referenceDateTime]=\"firstPickup\"></div>\n      <span slFieldDescription>\n        Type the date and time, or choose them from the calendar and the list.\n      </span>\n    </div>\n  `,\n})\nexport class DateTimePickerBasic {\n  protected readonly firstPickup = plainDateTime(plainDate(2026, 9, 30), plainTime(9, 0));\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "bounds",
+      "title": "bounds.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-datetime-picker-bounds',\n  imports: [SlDateTimePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Container collection</label>\n      <div\n        slDateTimePicker\n        [defaultValue]=\"opens\"\n        [max]=\"closes\"\n        [maxTime]=\"dayEnds\"\n        [min]=\"opens\"\n        [minTime]=\"dayStarts\"\n        [step]=\"3600\"\n      ></div>\n      <span slFieldDescription>\n        From October 1 at 1:00 PM to October 9 at 12:00 PM, between 8:00 AM and 5:00 PM.\n      </span>\n    </div>\n  `,\n})\nexport class DateTimePickerBounds {\n  protected readonly opens = plainDateTime(plainDate(2026, 10, 1), plainTime(13, 0));\n  protected readonly closes = plainDateTime(plainDate(2026, 10, 9), plainTime(12, 0));\n  protected readonly dayStarts = plainTime(8, 0);\n  protected readonly dayEnds = plainTime(17, 0);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "carrier-pickup",
+      "title": "carrier-pickup.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDateTimePicker,\n  SlDateTimePickerFooter,\n  SlDateTimePickerOption,\n} from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlText } from '@slotted/angular/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\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);\n\n@Component({\n  selector: 'app-datetime-picker-carrier-pickup',\n  imports: [\n    SlButton,\n    SlDateTimePicker,\n    SlDateTimePickerFooter,\n    SlDateTimePickerOption,\n    SlField,\n    SlFieldDescription,\n    SlFieldLabel,\n    SlText,\n  ],\n  template: `\n    <div slField required>\n      <label slFieldLabel>Carrier pickup slot</label>\n      <div\n        slDateTimePicker\n        #picker=\"slDateTimePicker\"\n        closeOnSelect=\"never\"\n        [isDateUnavailable]=\"isWeekend\"\n        [isTimeUnavailable]=\"isFull\"\n        [min]=\"earliest\"\n        [options]=\"windows\"\n        [referenceDateTime]=\"reference\"\n        [value]=\"pickup()\"\n        (valueChange)=\"pickup.set($event.value)\"\n      >\n        <ng-template\n          slDateTimePickerOption\n          let-time\n          let-date=\"date\"\n          let-label=\"label\"\n          let-unavailable=\"unavailable\"\n        >\n          <span>{{ label }}</span>\n          <span slText size=\"sm\" tone=\"muted\">{{ capacity(time, date, unavailable) }}</span>\n        </ng-template>\n        <div slDateTimePickerFooter>\n          <button slButton size=\"sm\" type=\"button\" (click)=\"picker.closeSurface()\">Done</button>\n        </div>\n      </div>\n      <span slFieldDescription>{{ summary() }}</span>\n    </div>\n  `,\n})\nexport class DateTimePickerCarrierPickup {\n  /** The windows Harbor Freightways collects in, every weekday. */\n  protected readonly windows = [\n    plainTime(8, 0),\n    plainTime(10, 30),\n    plainTime(13, 0),\n    plainTime(15, 30),\n  ];\n  protected readonly earliest = plainDateTime(plainDate(2026, 10, 1), plainTime(8, 0));\n  protected readonly reference = plainDateTime(plainDate(2026, 10, 1), plainTime(10, 30));\n  protected readonly pickup = signal<PlainDateTime | null>(null);\n  protected readonly summary = computed(() => {\n    const pickup = this.pickup();\n    return pickup === null\n      ? 'Harbor Freightways collects on weekdays, in four windows.'\n      : `Harbor Freightways collects on ${words.describe(pickup)}.`;\n  });\n\n  protected readonly isWeekend = (date: PlainDate) =>\n    dayOfWeek(date) === 0 || dayOfWeek(date) === 6;\n  protected readonly isFull = (time: PlainTime, date: PlainDate) => trucksLeft(time, date) === 0;\n\n  protected capacity(time: PlainTime, date: PlainDate, unavailable: boolean): string {\n    return unavailable ? 'Full' : `${trucksLeft(time, date)} of ${TRUCKS_PER_WINDOW} trucks left`;\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "clearable",
+      "title": "clearable.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-datetime-picker-clearable',\n  imports: [SlDateTimePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Hold shipment until</label>\n      <div slDateTimePicker clearable [defaultValue]=\"holdUntil\"></div>\n      <span slFieldDescription>Clear the date and time to release the shipment.</span>\n    </div>\n  `,\n})\nexport class DateTimePickerClearable {\n  protected readonly holdUntil = plainDateTime(plainDate(2026, 10, 9), plainTime(17, 0));\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "controlled",
+      "title": "controlled.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/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\n@Component({\n  selector: 'app-datetime-picker-controlled',\n  imports: [\n    SlButton,\n    SlDateTimePicker,\n    SlField,\n    SlFieldDescription,\n    SlFieldLabel,\n    SlInline,\n    SlStack,\n  ],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Call Harbor Freightways</label>\n        <div slDateTimePicker [value]=\"call()\" (valueChange)=\"call.set($event.value)\"></div>\n        <span slFieldDescription>{{ summary() }}</span>\n      </div>\n      <div slInline [gap]=\"2\">\n        <button\n          slButton\n          size=\"sm\"\n          tone=\"secondary\"\n          type=\"button\"\n          variant=\"outline\"\n          (click)=\"schedule(1, 9)\"\n        >\n          Tomorrow, 9:00 AM\n        </button>\n        <button\n          slButton\n          size=\"sm\"\n          tone=\"secondary\"\n          type=\"button\"\n          variant=\"outline\"\n          (click)=\"schedule(2, 14)\"\n        >\n          Friday, 2:00 PM\n        </button>\n        <button\n          slButton\n          size=\"sm\"\n          tone=\"secondary\"\n          type=\"button\"\n          variant=\"ghost\"\n          (click)=\"call.set(null)\"\n        >\n          No call\n        </button>\n      </div>\n    </div>\n  `,\n})\nexport class DateTimePickerControlled {\n  protected readonly call = signal<PlainDateTime | null>(\n    plainDateTime(addDays(TODAY, 1), plainTime(9, 0)),\n  );\n  protected readonly summary = computed(() => {\n    const call = this.call();\n    return call === null ? 'No call scheduled.' : `Call on ${words.describe(call)}.`;\n  });\n\n  protected schedule(days: number, hour: number): void {\n    this.call.set(plainDateTime(addDays(TODAY, days), plainTime(hour, 0)));\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "footer",
+      "title": "footer.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlDateTimePicker, SlDateTimePickerFooter } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-datetime-picker-footer',\n  imports: [\n    SlButton,\n    SlDateTimePicker,\n    SlDateTimePickerFooter,\n    SlField,\n    SlFieldDescription,\n    SlFieldLabel,\n  ],\n  template: `\n    <div slField>\n      <label slFieldLabel>Maintenance window starts</label>\n      <div\n        slDateTimePicker\n        #picker=\"slDateTimePicker\"\n        closeOnSelect=\"never\"\n        [defaultValue]=\"start\"\n        [step]=\"3600\"\n      >\n        <div slDateTimePickerFooter>\n          <button slButton size=\"sm\" type=\"button\" (click)=\"picker.closeSurface()\">Done</button>\n        </div>\n      </div>\n      <span slFieldDescription>Conveyors stop for four hours from this time.</span>\n    </div>\n  `,\n})\nexport class DateTimePickerFooter {\n  protected readonly start = plainDateTime(plainDate(2026, 10, 3), plainTime(22, 0));\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "form",
+      "title": "form.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/typography';\nimport {\n  plainDate,\n  plainDateTime,\n  plainTime,\n  toISODateTime,\n  type PlainDateTime,\n} from '@slotted/core/date';\n\n@Component({\n  selector: 'app-datetime-picker-form',\n  imports: [\n    ReactiveFormsModule,\n    SlButton,\n    SlDateTimePicker,\n    SlField,\n    SlFieldError,\n    SlFieldLabel,\n    SlInline,\n    SlStack,\n    SlText,\n  ],\n  template: `\n    <form novalidate [formGroup]=\"form\" (ngSubmit)=\"submit()\" (reset)=\"clear()\">\n      <div slStack [gap]=\"5\">\n        <div slField required [invalid]=\"error() === '' ? undefined : true\">\n          <label slFieldLabel>Pickup date and time</label>\n          <div\n            slDateTimePicker\n            formControlName=\"pickupAt\"\n            name=\"pickupAt\"\n            [min]=\"earliest\"\n            [referenceDateTime]=\"earliest\"\n          ></div>\n          <span slFieldError live=\"polite\" reserve>{{ error() }}</span>\n        </div>\n        <div slInline align=\"center\" [gap]=\"3\">\n          <button slButton type=\"submit\">Book pickup</button>\n          <button slButton tone=\"secondary\" type=\"reset\" variant=\"outline\">Reset</button>\n          @if (saved(); as message) {\n            <span slText size=\"sm\" tone=\"muted\">{{ message }}</span>\n          }\n        </div>\n      </div>\n    </form>\n  `,\n})\nexport class DateTimePickerForm {\n  protected readonly earliest = plainDateTime(plainDate(2026, 10, 1), plainTime(8, 0));\n  protected readonly form = new FormGroup({\n    pickupAt: new FormControl<PlainDateTime | null>(null, Validators.required),\n  });\n  private readonly value = toSignal(this.form.controls.pickupAt.valueChanges, {\n    initialValue: this.form.controls.pickupAt.value,\n  });\n  private readonly submitted = signal(false);\n  protected readonly saved = signal<string | null>(null);\n  protected readonly error = computed(() => {\n    this.value();\n    const control = this.form.controls.pickupAt;\n    if (control.hasError('slottedDateTimeRange')) {\n      return 'Choose October 1, 2026 at 8:00 AM or later.';\n    }\n    if (this.submitted() && control.hasError('required')) return 'Choose a pickup date and time.';\n    return '';\n  });\n\n  protected submit(): void {\n    this.submitted.set(true);\n    const pickup = this.form.controls.pickupAt.value;\n    this.saved.set(\n      this.form.valid && pickup !== null ? `Pickup booked for ${toISODateTime(pickup)}.` : null,\n    );\n  }\n\n  protected clear(): void {\n    this.submitted.set(false);\n    this.saved.set(null);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "granularity",
+      "title": "granularity.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlStack } from '@slotted/angular/stack';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-datetime-picker-granularity',\n  imports: [SlDateTimePicker, SlField, SlFieldDescription, SlFieldLabel, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Shift starts</label>\n        <div slDateTimePicker granularity=\"hour\" [defaultValue]=\"shift\" [step]=\"3600\"></div>\n        <span slFieldDescription>Shifts start on the hour.</span>\n      </div>\n      <div slField>\n        <label slFieldLabel>Batch run starts</label>\n        <div\n          slDateTimePicker\n          granularity=\"second\"\n          [defaultValue]=\"batch\"\n          [maxTime]=\"windowEnd\"\n          [minTime]=\"windowStart\"\n          [step]=\"30\"\n        ></div>\n        <span slFieldDescription>The nightly run starts between 2:00:00 and 2:05:00 AM.</span>\n      </div>\n    </div>\n  `,\n})\nexport class DateTimePickerGranularity {\n  protected readonly shift = plainDateTime(plainDate(2026, 10, 1), plainTime(6, 0));\n  protected readonly batch = plainDateTime(plainDate(2026, 9, 30), plainTime(2, 0, 30));\n  protected readonly windowStart = plainTime(2, 0);\n  protected readonly windowEnd = plainTime(2, 5);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "hour-cycle",
+      "title": "hour-cycle.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlStack } from '@slotted/angular/stack';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-datetime-picker-hour-cycle',\n  imports: [SlDateTimePicker, SlField, SlFieldLabel, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Departure, 12-hour clock</label>\n        <div slDateTimePicker [defaultValue]=\"departure\" [hourCycle]=\"12\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Departure, 24-hour clock</label>\n        <div slDateTimePicker [defaultValue]=\"departure\" [hourCycle]=\"24\"></div>\n      </div>\n    </div>\n  `,\n})\nexport class DateTimePickerHourCycle {\n  protected readonly departure = plainDateTime(plainDate(2026, 9, 30), plainTime(18, 45));\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "locale",
+      "title": "locale.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlStack } from '@slotted/angular/stack';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-datetime-picker-locale',\n  imports: [SlDateTimePicker, SlField, SlFieldLabel, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Pickup, United States (en-US)</label>\n        <div slDateTimePicker locale=\"en-US\" [defaultValue]=\"pickup\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Pickup, United Kingdom (en-GB)</label>\n        <div slDateTimePicker locale=\"en-GB\" [defaultValue]=\"pickup\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Pickup, Germany (de-DE)</label>\n        <div slDateTimePicker locale=\"de-DE\" [defaultValue]=\"pickup\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Pickup, Japan (ja-JP)</label>\n        <div slDateTimePicker locale=\"ja-JP\" [defaultValue]=\"pickup\"></div>\n      </div>\n    </div>\n  `,\n})\nexport class DateTimePickerLocale {\n  protected readonly pickup = plainDateTime(plainDate(2026, 9, 30), plainTime(14, 30));\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "options",
+      "title": "options.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { plainDate, plainDateTime, plainTime } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-datetime-picker-options',\n  imports: [SlDateTimePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Line-haul departure</label>\n      <div slDateTimePicker [options]=\"departures\" [referenceDateTime]=\"reference\"></div>\n      <span slFieldDescription>The Chicago to Memphis trailer leaves five times a day.</span>\n    </div>\n  `,\n})\nexport class DateTimePickerOptions {\n  protected readonly departures = [\n    plainTime(5, 40),\n    plainTime(8, 15),\n    plainTime(11, 50),\n    plainTime(16, 5),\n    plainTime(21, 30),\n  ];\n  protected readonly reference = plainDateTime(plainDate(2026, 9, 30), plainTime(8, 15));\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "publish-at",
+      "title": "publish-at.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlDateTimePicker, SlDateTimePickerPresets } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/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\n@Component({\n  selector: 'app-datetime-picker-publish-at',\n  imports: [\n    SlButton,\n    SlDateTimePicker,\n    SlDateTimePickerPresets,\n    SlField,\n    SlFieldDescription,\n    SlFieldLabel,\n  ],\n  template: `\n    <div slField required>\n      <label slFieldLabel>Publish the autumn price list at</label>\n      <div\n        slDateTimePicker\n        #picker=\"slDateTimePicker\"\n        timeZone=\"America/New_York\"\n        [min]=\"now\"\n        [referenceDateTime]=\"now\"\n        [value]=\"publishAt()\"\n        (valueChange)=\"publishAt.set($event.value)\"\n      >\n        <div slDateTimePickerPresets>\n          <button\n            slButton\n            size=\"sm\"\n            type=\"button\"\n            variant=\"ghost\"\n            (click)=\"publishAt.set(tomorrow); picker.closeSurface()\"\n          >\n            Tomorrow, 9:00 AM\n          </button>\n          <button\n            slButton\n            size=\"sm\"\n            type=\"button\"\n            variant=\"ghost\"\n            (click)=\"publishAt.set(nextMonday); picker.closeSurface()\"\n          >\n            Monday, 9:00 AM\n          </button>\n        </div>\n      </div>\n      <span slFieldDescription>{{ summary() }}</span>\n    </div>\n  `,\n})\nexport class DateTimePickerPublishAt {\n  protected readonly now = NOW;\n  protected readonly tomorrow = TOMORROW;\n  protected readonly nextMonday = NEXT_MONDAY;\n  protected readonly publishAt = signal<PlainDateTime | null>(TOMORROW);\n  protected readonly summary = computed(() => {\n    const publishAt = this.publishAt();\n    return 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  });\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "reference",
+      "title": "reference.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  createDateTimeFormat,\n  plainDate,\n  plainDateTime,\n  plainTime,\n  type PlainDateTime,\n} from '@slotted/core/date';\n\nconst words = createDateTimeFormat({ locale: 'en-US' });\n\n@Component({\n  selector: 'app-datetime-picker-reference',\n  imports: [SlDateTimePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Courier collection</label>\n      <div\n        slDateTimePicker\n        [referenceDateTime]=\"endOfShift\"\n        [value]=\"collection()\"\n        (valueChange)=\"collection.set($event.value)\"\n      ></div>\n      <span slFieldDescription>{{ summary() }}</span>\n    </div>\n  `,\n})\nexport class DateTimePickerReference {\n  protected readonly endOfShift = plainDateTime(plainDate(2026, 10, 1), plainTime(15, 0));\n  protected readonly collection = signal<PlainDateTime | null>(null);\n  protected readonly summary = computed(() => {\n    const collection = this.collection();\n    return collection === null\n      ? 'A day chosen in the calendar opens the time list on 3:00 PM.'\n      : `Collection on ${words.describe(collection)}.`;\n  });\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "time-zones",
+      "title": "time-zones.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/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\n@Component({\n  selector: 'app-datetime-picker-time-zones',\n  imports: [SlDateTimePicker, SlField, SlFieldDescription, SlFieldLabel, SlStack, SlText],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Pickup, Chicago terminal</label>\n        <div\n          slDateTimePicker\n          timeZone=\"America/Chicago\"\n          [value]=\"pickup()\"\n          (valueChange)=\"pickup.set($event.value)\"\n        ></div>\n        <span slFieldDescription>Today and Now follow the clock in Chicago.</span>\n      </div>\n      <span slText size=\"sm\" tone=\"muted\">{{ readout() }}</span>\n    </div>\n  `,\n})\nexport class DateTimePickerTimeZones {\n  protected readonly pickup = signal<PlainDateTime | null>(wallClockIn(STORED, 'America/Chicago'));\n  protected readonly readout = computed(() => {\n    const pickup = this.pickup();\n    return pickup === null ? 'Value: null' : `Value: ${toISODateTime(pickup)}, with no offset`;\n  });\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "typing",
+      "title": "typing.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlDateTimePicker } from '@slotted/angular/datetime-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  plainDate,\n  plainDateTime,\n  plainTime,\n  toISODateTime,\n  type PlainDateTime,\n} from '@slotted/core/date';\nimport type { ChangeRequest } from '@slotted/core/state';\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\n@Component({\n  selector: 'app-datetime-picker-typing',\n  imports: [SlDateTimePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Goods received at</label>\n      <div\n        slDateTimePicker\n        [defaultValue]=\"received\"\n        [referenceDateTime]=\"received\"\n        (valueChange)=\"record($event)\"\n      ></div>\n      <span slFieldDescription>{{ change() }}</span>\n    </div>\n  `,\n})\nexport class DateTimePickerTyping {\n  protected readonly received = plainDateTime(plainDate(2026, 9, 30), plainTime(14, 30));\n  protected readonly change = signal('No change yet.');\n\n  protected record(request: ChangeRequest<PlainDateTime | null>): void {\n    const text = request.value === null ? 'empty' : toISODateTime(request.value);\n    this.change.set(`${text}, ${REASONS[request.reason] ?? request.reason}.`);\n  }\n}\n",
+      "verdict": "example"
+    }
+  ]
+}