form-field — wyrd.component.date-time-picker
Form field for choosing a calendar date, datetime, or range through locale-ordered segmented entry, a calendar surface, and expression-based presets, with all values carried as zoneless ISO-8601 strings.
Install @wyrd-company/react or the Flutter package and use it directly —
your DESIGN.md does the styling.
$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity: name: DateTimePicker tag: wyrd-date-time-picker package: wyrd.component.date-time-picker title: Date Time Picker summary: Form field for choosing a calendar date, datetime, or range through locale-ordered segmented entry, a calendar surface, and expression-based presets, with all values carried as zoneless ISO-8601 strings.relationships: related-to: - behavior-date-time-picker - l10n-formatting-runtimeclassification: category: form-field composition: multi-slot interactive: truetarget-strategy: react: required flutter: requiredsurface: properties: - name: value type: kind: string required: false controlled: true serializable: true summary: Controlled zoneless ISO-8601 value; a point in single mode ("2026-07-09", "2026-07-09T14:30") or an interval in range mode ("2026-07-01/2026-07-31"). Precision follows granularity. - name: default-value type: kind: string required: false serializable: true summary: Initial uncontrolled ISO-8601 point or interval. - name: selection-mode type: kind: enum values: - single - range required: false default: single serializable: true summary: Whether the value is a single point or a start/end interval selected in two steps. - name: granularity type: kind: enum values: - year - month - day - hour - minute required: false default: day serializable: true summary: Value precision and deepest calendar surface; year and month terminate at their drill level, hour and minute add time columns. - name: display type: kind: enum values: - popover - inline - modal required: false default: popover reflects: true serializable: true summary: Calendar presentation; inline embeds the calendar surface permanently open, modal presents a mobile-friendly overlay. - name: is-open type: kind: boolean required: false default: false controlled: true reflects: true serializable: true summary: Controlled calendar visibility for popover and modal display; ignored by inline display. - name: default-open type: kind: boolean required: false default: false serializable: true summary: Initial uncontrolled calendar visibility for popover and modal display. - name: is-disabled type: kind: boolean required: false default: false reflects: true serializable: true summary: Prevents opening the calendar, editing segments, and changing the value. - name: min type: kind: string required: false serializable: true summary: Earliest selectable ISO-8601 value, inclusive, at the active granularity. - name: max type: kind: string required: false serializable: true summary: Latest selectable ISO-8601 value, inclusive, at the active granularity. - name: blackout-dates type: kind: array item: kind: string required: false default: [] serializable: true summary: ISO-8601 dates rendered disabled and unselectable; shown, never hidden. - name: blackout-weekdays type: kind: array item: kind: integer minimum: 1 maximum: 7 required: false default: [] serializable: true summary: ISO weekday numbers (1 = Monday) rendered disabled and unselectable in every visible week. - name: max-span type: kind: string required: false serializable: true summary: Maximum range length as an ISO-8601 duration (for example P30D); days beyond the span disable while a range start is pending. - name: minute-step type: kind: integer minimum: 1 maximum: 30 required: false default: 1 serializable: true summary: Minute column increment at minute granularity. - name: visible-months type: kind: integer minimum: 1 maximum: 3 required: false default: 1 serializable: true summary: Number of consecutive month panes shown by the calendar surface. - name: reference-date type: kind: string required: false serializable: true summary: ISO-8601 anchor for the today marker and preset expression resolution; hosts default it to the current date at the seam, and the runtime never reads a clock. - name: presets type: kind: array item: kind: object fields: template: kind: string n: kind: integer required: false default: [] serializable: true summary: Ordered relative-date expressions (template plus optional count) resolved and labeled by the shared runtime against reference-date; selecting one commits its resolved value. - name: fiscal-year-start-month type: kind: integer minimum: 1 maximum: 12 required: false default: 1 serializable: true summary: First month of the fiscal year consumed by quarter and year preset templates. - name: day-metadata type: kind: array item: kind: object fields: date: kind: string weight: kind: number label: kind: string required: false default: [] serializable: true summary: Per-day metadata; weight (0-1) drives built-in density shading and label augments the day's accessible name. slots: - name: label required: true cardinality: exactly-one accepts: - text summary: Visible label and accessible-name source. - name: description required: false cardinality: zero-or-one accepts: - text summary: Help text associated with the field. - name: day-cell required: false cardinality: zero-or-one accepts: - component summary: Consumer renderer for day cells receiving day context; replaces the built-in cell content while selection and disabled semantics stay component-owned. events: - name: value-change payload: value: kind: string action: kind: action-ref bubbles: true composed: true cancelable: false summary: Canonical value-change event carrying the ISO-8601 point or interval. - name: open-change payload: is-open: kind: boolean reason: kind: enum values: - trigger - keyboard - dismiss - select - programmatic bubbles: true composed: true cancelable: false summary: Canonical calendar visibility event for popover and modal display. states: - name: closed source: behavior-runtime summary: Calendar surface is not visible. - name: open source: behavior-runtime summary: Calendar surface is visible; always active under inline display. - name: range-start-pending source: behavior-runtime summary: Range mode has a committed start awaiting an end selection. - name: focused source: behavior-runtime summary: Segments, trigger, or calendar own focus. - name: blurred source: behavior-runtime summary: Focus is outside the field. - name: disabled source: property summary: Disabled state derived from is-disabled. - name: filled source: property summary: State when value or default-value holds a point or interval. parts: - name: root summary: Field root and popup positioning owner. slots: - label - description - name: label summary: Label text. slots: - label - name: control summary: Segmented input composing the value from locale-ordered segments. - name: segment summary: Repeated editable segment for one date or time field. - name: trigger summary: Button that opens and closes the calendar surface. - name: popup summary: Popover or modal calendar surface. - name: calendar-header summary: Localized heading with previous and next navigation at the active drill level. - name: grid summary: Day, month, or year grid with locale-derived week layout. - name: day summary: Repeated day gridcell. slots: - day-cell - name: time-panel summary: Hour and minute columns synchronized with the date selection. - name: preset-group summary: Ordered preset shortcut panel. - name: preset summary: Repeated preset shortcut with its runtime-resolved label. - name: description summary: Description text. slots: - description tokens: root: gap: spacing.xs label: color: color.on-surface font: typography.label-md control: background: color.surface foreground: color.on-surface placeholder: color.on-surface-variant border-color: color.outline border-color-focus: color.primary border-width: 1px radius: rounded.sm padding-x: spacing.md padding-y: spacing.sm font: typography.body-md segment: background-focus: color.primary foreground-focus: color.on-primary radius: rounded.sm padding-x: spacing.xs trigger: background: color.primary foreground: color.on-primary radius: rounded.sm padding-x: spacing.md padding-y: spacing.sm font: typography.label-md popup: background: color.surface-container foreground: color.on-surface border-color: color.outline radius: rounded.md shadow: shadow.md padding: spacing.md gap: spacing.sm calendar-header: foreground: color.on-surface font: typography.label-md gap: spacing.sm grid: gap: spacing.xs day: foreground: color.on-surface foreground-disabled: color.on-surface-variant background-selected: color.primary foreground-selected: color.on-primary background-in-range: color.surface-container foreground-in-range: color.on-surface background-today: color.surface-container density-tint: color.primary radius: rounded.sm padding-x: spacing.sm padding-y: spacing.xs time-panel: background: color.surface-container foreground: color.on-surface background-selected: color.primary foreground-selected: color.on-primary gap: spacing.xs font: typography.body-md preset-group: gap: spacing.xs padding: spacing.sm preset: background: color.surface-container foreground: color.on-surface background-selected: color.primary foreground-selected: color.on-primary radius: rounded.sm padding-x: spacing.sm padding-y: spacing.xs font: typography.label-mdmessages: - key: date-time-picker.label description: Default visible label shown when the label slot is not supplied. - key: date-time-picker.placeholder description: Placeholder shown while no value is selected. - key: date-time-picker.open-calendar description: Accessible label for the calendar trigger. - key: date-time-picker.selected-date description: Announces a selected date. params: when: date - key: date-time-picker.selected-time description: Announces a selected time. params: when: date - key: date-time-picker.selected-datetime description: Announces a selected date and time. params: when: date - key: date-time-picker.selected-range description: Announces a selected range with its start and end. params: start: date end: date - key: date-time-picker.month-heading description: Calendar heading at day granularity. params: when: date - key: date-time-picker.previous-month description: Accessible label for moving to the previous month. - key: date-time-picker.next-month description: Accessible label for moving to the next month. - key: date-time-picker.previous-year description: Accessible label for moving to the previous year at month and year drill levels. - key: date-time-picker.next-year description: Accessible label for moving to the next year at month and year drill levels. - key: date-time-picker.day-label description: Accessible label for one day in the grid. params: when: date - key: date-time-picker.weekday.monday description: Abbreviated Monday column heading. - key: date-time-picker.weekday.tuesday description: Abbreviated Tuesday column heading. - key: date-time-picker.weekday.wednesday description: Abbreviated Wednesday column heading. - key: date-time-picker.weekday.thursday description: Abbreviated Thursday column heading. - key: date-time-picker.weekday.friday description: Abbreviated Friday column heading. - key: date-time-picker.weekday.saturday description: Abbreviated Saturday column heading. - key: date-time-picker.weekday.sunday description: Abbreviated Sunday column heading. - key: date-time-picker.today-marker description: Label for the reference-date marker. - key: date-time-picker.range-start-prompt description: Instruction announced when range mode awaits a start selection. - key: date-time-picker.range-end-prompt description: Instruction announced while a range start is pending an end selection. - key: date-time-picker.out-of-range description: Explanation for days disabled by the min and max bounds. params: earliest: date latest: date - key: date-time-picker.blackout description: Explanation for days disabled by blackout rules. params: when: date - key: date-time-picker.max-span-exceeded description: Explanation for days disabled because the range would exceed max-span. params: days: plural - key: date-time-picker.time-heading description: Heading for the time columns at hour and minute granularity. - key: date-time-picker.segment-year description: Accessible name for the year segment. - key: date-time-picker.segment-month description: Accessible name for the month segment. - key: date-time-picker.segment-day description: Accessible name for the day segment. - key: date-time-picker.segment-hour description: Accessible name for the hour segment. - key: date-time-picker.segment-minute description: Accessible name for the minute segment. - key: date-time-picker.preset.today description: Label for the today preset template. - key: date-time-picker.preset.yesterday description: Label for the yesterday preset template. - key: date-time-picker.preset.tomorrow description: Label for the tomorrow preset template. - key: date-time-picker.preset.last-n-days description: Label for the trailing-days preset template. params: n: plural - key: date-time-picker.preset.next-n-days description: Label for the leading-days preset template. params: n: plural - key: date-time-picker.preset.this-week description: Label for the current-week preset template. - key: date-time-picker.preset.this-month description: Label for the current-month preset template. - key: date-time-picker.preset.this-quarter description: Label for the current-quarter preset template, fiscal-aware. - key: date-time-picker.preset.this-year description: Label for the current-year preset template, fiscal-aware. - key: date-time-picker.preset.month-to-date description: Label for the month-to-date preset template. - key: date-time-picker.preset.quarter-to-date description: Label for the quarter-to-date preset template, fiscal-aware. - key: date-time-picker.preset.year-to-date description: Label for the year-to-date preset template, fiscal-aware.obligations: accessibility: role: composite grid popup name: Label slot provides the accessible name for the segmented control. description: Description slot is programmatically associated with the control; segment, grid, and time-column semantics are documented-manual with axe coverage for role, name, and disabled exposure. keyboard: - Left and Right arrows move focus between segments; typed digits fill the focused segment and auto-advance. - Up and Down arrows increment and decrement the focused segment within its valid range. - Enter and Space on the trigger open the calendar surface. - Arrow keys move focus by day in the grid; PageUp and PageDown move by month; Shift plus PageUp and PageDown move by year. - Home and End move focus to the start or end of the locale-derived week. - Enter selects the focused day, committing the point in single mode or the pending start and then end in range mode. - Arrow keys in the time columns move by minute-step and synchronize with the selected date. - Escape closes popover and modal surfaces without changing the value. semantics: - Each segment exposes spinbutton semantics with its localized name, current value, and valid range. - Trigger exposes expanded state while the calendar surface is visible. - Grid and gridcell roles expose focused, selected, in-range, and disabled states. - Days disabled by bounds, blackouts, or max-span remain visible and expose a localized explanation. - Preset shortcuts expose their runtime-resolved localized labels. - Values are zoneless; no timezone is announced or implied. behavior: model: behavior-runtime runtimeBlueprint: behavior/date-time-picker interactions: - Opening and closing the calendar follows the behavior runtime trace with reasons; inline display pins the machine open. - Single mode commits a point on day (or time-column) selection and closes popover and modal surfaces with a select reason. - Range mode commits a start into range-start-pending, previews the hovered span target-locally, and commits the interval on end selection. - Preset activation resolves its expression through the shared runtime and commits the resolved value through the normal selection path. - Granularity drill (year to month to day) and time-column synchronization follow the machine's drill state. - Segment editing, grid focus traversal, hover preview, and popup positioning remain target-local. hostEffects: - Dispatch value-change and open-change events. - Move focus between segments, trigger, grid, and time columns per target platform conventions. - Format all date-bearing and time-bearing text through the localization seam. - Query the runtime for locale segment order, preset resolution, and preset labels. - Keep popup positioning synchronized with the control under popover display. conditions: - rtl - locale - reduced-motion - cvd-deuteranopia - density-compact - text-expansion - safe-area - keyboard-inset sdui: status: partial serializableProperties: - value - default-value - selection-mode - granularity - display - is-open - default-open - is-disabled - min - max - blackout-dates - blackout-weekdays - max-span - minute-step - visible-months - reference-date - presets - fiscal-year-start-month - day-metadata serializableSlots: - label - description eventBindings: - value-change - open-change notes: Values, constraints, presets, and day metadata serialize as plain data; the day-cell renderer slot, calendar rendering, locale-derived layout, focus movement, and keyboard navigation remain target-local.examples: - name: empty state: closed properties: reference-date: "2026-07-09" slots: label: Date description: Pick the due date. - name: selected state: closed properties: default-value: "2026-07-09" min: "2026-07-01" max: "2026-07-31" reference-date: "2026-07-09" slots: label: Date - name: open-range state: open properties: selection-mode: range default-value: "2026-07-01/2026-07-07" default-open: true visible-months: 2 max-span: P30D reference-date: "2026-07-09" presets: - template: today - template: last-n-days n: 7 - template: last-n-days n: 30 - template: this-quarter slots: label: Reporting period - name: datetime state: open properties: granularity: minute default-value: "2026-07-09T14:30" default-open: true minute-step: 15 reference-date: "2026-07-09" slots: label: Appointment - name: inline-dashboard state: open properties: display: inline selection-mode: range default-value: "2026-07-01/2026-07-07" reference-date: "2026-07-09" day-metadata: - date: "2026-07-02" weight: 0.8 label: High activity - date: "2026-07-04" weight: 0.3 label: Low activity presets: - template: last-n-days n: 7 - template: month-to-date slots: label: Activity window - name: disabled state: disabled properties: value: "2026-07-09" is-disabled: true reference-date: "2026-07-09" slots: label: Date
Generated from the contract's examples block.
Previews are the published @wyrd-company/react component, themed by the
brand's role tokens — flip the site's light/dark toggle and they follow.
import { WyrdDateTimePicker } from "@wyrd-company/react";
<WyrdDateTimePicker referenceDate="2026-07-09" label="Date" description="Pick the due date." />
// events: onValueChange, onOpenChangeimport 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdDateTimePicker(
referenceDate: '2026-07-09',
label: Text('Date'),
description: Text('Pick the due date.'),
)
// events: onChanged, onOpenChangedimport { WyrdDateTimePicker } from "@wyrd-company/react";
<WyrdDateTimePicker defaultValue="2026-07-09" min="2026-07-01" max="2026-07-31" referenceDate="2026-07-09" label="Date" />
// events: onValueChange, onOpenChangeimport 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdDateTimePicker(
initialValue: '2026-07-09',
min: '2026-07-01',
max: '2026-07-31',
referenceDate: '2026-07-09',
label: Text('Date'),
)
// events: onChanged, onOpenChangedimport { WyrdDateTimePicker } from "@wyrd-company/react";
<WyrdDateTimePicker selectionMode="range" defaultValue="2026-07-01/2026-07-07" defaultOpen visibleMonths={2} maxSpan="P30D" referenceDate="2026-07-09" presets={[{"template":"today"},{"template":"last-n-days","n":7},{"template":"last-n-days","n":30},{"template":"this-quarter"}]} label="Reporting period" />
// events: onValueChange, onOpenChangeimport 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdDateTimePicker(
selectionMode: 'range',
initialValue: '2026-07-01/2026-07-07',
defaultOpen: true,
visibleMonths: 2,
maxSpan: 'P30D',
referenceDate: '2026-07-09',
presets: [{"template":"today"},{"template":"last-n-days","n":7},{"template":"last-n-days","n":30},{"template":"this-quarter"}],
label: Text('Reporting period'),
)
// events: onChanged, onOpenChangedimport { WyrdDateTimePicker } from "@wyrd-company/react";
<WyrdDateTimePicker granularity="minute" defaultValue="2026-07-09T14:30" defaultOpen minuteStep={15} referenceDate="2026-07-09" label="Appointment" />
// events: onValueChange, onOpenChangeimport 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdDateTimePicker(
granularity: 'minute',
initialValue: '2026-07-09T14:30',
defaultOpen: true,
minuteStep: 15,
referenceDate: '2026-07-09',
label: Text('Appointment'),
)
// events: onChanged, onOpenChangedimport { WyrdDateTimePicker } from "@wyrd-company/react";
<WyrdDateTimePicker display="inline" selectionMode="range" defaultValue="2026-07-01/2026-07-07" referenceDate="2026-07-09" dayMetadata={[{"date":"2026-07-02","weight":0.8,"label":"High activity"},{"date":"2026-07-04","weight":0.3,"label":"Low activity"}]} presets={[{"template":"last-n-days","n":7},{"template":"month-to-date"}]} label="Activity window" />
// events: onValueChange, onOpenChangeimport 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdDateTimePicker(
display: 'inline',
selectionMode: 'range',
initialValue: '2026-07-01/2026-07-07',
referenceDate: '2026-07-09',
dayMetadata: [{"date":"2026-07-02","weight":0.8,"label":"High activity"},{"date":"2026-07-04","weight":0.3,"label":"Low activity"}],
presets: [{"template":"last-n-days","n":7},{"template":"month-to-date"}],
label: Text('Activity window'),
)
// events: onChanged, onOpenChangedimport { WyrdDateTimePicker } from "@wyrd-company/react";
<WyrdDateTimePicker value="2026-07-09" isDisabled referenceDate="2026-07-09" label="Date" />
// events: onValueChange, onOpenChangeimport 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdDateTimePicker(
value: '2026-07-09',
isDisabled: true,
referenceDate: '2026-07-09',
label: Text('Date'),
)
// events: onChanged, onOpenChanged| Name | Type | Default | Summary |
|---|---|---|---|
value | string | undefined | Controlled zoneless ISO-8601 value; a point in single mode ("2026-07-09", "2026-07-09T14:30") or an interval in range mode ("2026-07-01/2026-07-31"). Precision follows granularity. |
default-value | string | undefined | Initial uncontrolled ISO-8601 point or interval. |
selection-mode | single | range | single | Whether the value is a single point or a start/end interval selected in two steps. |
granularity | year | month | day | hour | minute | day | Value precision and deepest calendar surface; year and month terminate at their drill level, hour and minute add time columns. |
display | popover | inline | modal | popover | Calendar presentation; inline embeds the calendar surface permanently open, modal presents a mobile-friendly overlay. |
is-open | boolean | false | Controlled calendar visibility for popover and modal display; ignored by inline display. |
default-open | boolean | false | Initial uncontrolled calendar visibility for popover and modal display. |
is-disabled | boolean | false | Prevents opening the calendar, editing segments, and changing the value. |
min | string | undefined | Earliest selectable ISO-8601 value, inclusive, at the active granularity. |
max | string | undefined | Latest selectable ISO-8601 value, inclusive, at the active granularity. |
blackout-dates | array | | ISO-8601 dates rendered disabled and unselectable; shown, never hidden. |
blackout-weekdays | array | | ISO weekday numbers (1 = Monday) rendered disabled and unselectable in every visible week. |
max-span | string | undefined | Maximum range length as an ISO-8601 duration (for example P30D); days beyond the span disable while a range start is pending. |
minute-step | integer | 1 | Minute column increment at minute granularity. |
visible-months | integer | 1 | Number of consecutive month panes shown by the calendar surface. |
reference-date | string | undefined | ISO-8601 anchor for the today marker and preset expression resolution; hosts default it to the current date at the seam, and the runtime never reads a clock. |
presets | array | | Ordered relative-date expressions (template plus optional count) resolved and labeled by the shared runtime against reference-date; selecting one commits its resolved value. |
fiscal-year-start-month | integer | 1 | First month of the fiscal year consumed by quarter and year preset templates. |
day-metadata | array | | Per-day metadata; weight (0-1) drives built-in density shading and label augments the day's accessible name. |
| Slot | Cardinality | Accepts | Summary |
|---|---|---|---|
label | exactly-one | text | Visible label and accessible-name source. |
description | zero-or-one | text | Help text associated with the field. |
day-cell | zero-or-one | component | Consumer renderer for day cells receiving day context; replaces the built-in cell content while selection and disabled semantics stay component-owned. |
| Event | Payload | Summary |
|---|---|---|
value-change | value, action | Canonical value-change event carrying the ISO-8601 point or interval. |
open-change | is-open, reason | Canonical calendar visibility event for popover and modal display. |
The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.
| Binding | Token | |
|---|---|---|
root.gap | spacing.xs | |
label.color | color.on-surface | |
label.font | typography.label-md | |
control.background | color.surface | |
control.foreground | color.on-surface | |
control.placeholder | color.on-surface-variant | |
control.border-color | color.outline | |
control.border-color-focus | color.primary | |
control.border-width | 1px | |
control.radius | rounded.sm | |
control.padding-x | spacing.md | |
control.padding-y | spacing.sm | |
control.font | typography.body-md | |
segment.background-focus | color.primary | |
segment.foreground-focus | color.on-primary | |
segment.radius | rounded.sm | |
segment.padding-x | spacing.xs | |
trigger.background | color.primary | |
trigger.foreground | color.on-primary | |
trigger.radius | rounded.sm | |
trigger.padding-x | spacing.md | |
trigger.padding-y | spacing.sm | |
trigger.font | typography.label-md | |
popup.background | color.surface-container | |
popup.foreground | color.on-surface | |
popup.border-color | color.outline | |
popup.radius | rounded.md | |
popup.shadow | shadow.md | |
popup.padding | spacing.md | |
popup.gap | spacing.sm | |
calendar-header.foreground | color.on-surface | |
calendar-header.font | typography.label-md | |
calendar-header.gap | spacing.sm | |
grid.gap | spacing.xs | |
day.foreground | color.on-surface | |
day.foreground-disabled | color.on-surface-variant | |
day.background-selected | color.primary | |
day.foreground-selected | color.on-primary | |
day.background-in-range | color.surface-container | |
day.foreground-in-range | color.on-surface | |
day.background-today | color.surface-container | |
day.density-tint | color.primary | |
day.radius | rounded.sm | |
day.padding-x | spacing.sm | |
day.padding-y | spacing.xs | |
time-panel.background | color.surface-container | |
time-panel.foreground | color.on-surface | |
time-panel.background-selected | color.primary | |
time-panel.foreground-selected | color.on-primary | |
time-panel.gap | spacing.xs | |
time-panel.font | typography.body-md | |
preset-group.gap | spacing.xs | |
preset-group.padding | spacing.sm | |
preset.background | color.surface-container | |
preset.foreground | color.on-surface | |
preset.background-selected | color.primary | |
preset.foreground-selected | color.on-primary | |
preset.radius | rounded.sm | |
preset.padding-x | spacing.sm | |
preset.padding-y | spacing.xs | |
preset.font | typography.label-md |
| State | Source | Summary |
|---|---|---|
closed | behavior-runtime | Calendar surface is not visible. |
open | behavior-runtime | Calendar surface is visible; always active under inline display. |
range-start-pending | behavior-runtime | Range mode has a committed start awaiting an end selection. |
focused | behavior-runtime | Segments, trigger, or calendar own focus. |
blurred | behavior-runtime | Focus is outside the field. |
disabled | property | Disabled state derived from is-disabled. |
filled | property | State when value or default-value holds a point or interval. |
From the contract's accessibility obligations. Role composite grid popup; Label slot provides the accessible name for the segmented control.
Status: partial. Values, constraints, presets, and day metadata serialize as plain data; the day-cell renderer slot, calendar rendering, locale-derived layout, focus movement, and keyboard navigation remain target-local.
| Serializable | Members |
|---|---|
| Properties | value, default-value, selection-mode, granularity, display, is-open, default-open, is-disabled, min, max, blackout-dates, blackout-weekdays, max-span, minute-step, visible-months, reference-date, presets, fiscal-year-start-month, day-metadata |
| Slots | label, description |
| Events | value-change, open-change |