TimeRangePicker new

Data entry component. This page is the API reference, generated from the source code. Usage guidance and live examples are on the Chinese page.

HeadlessStylesVueReactWeb Components

Anatomy

Parts in bold are required.

data-scope="time-range-picker": root · label · control · segment-group · segment · range-separator · trigger · clear-trigger · positioner · content · preset-group · preset · column-group · column-group-label · column · item · hidden-input

API reference

Descriptions of individual props, events and slots are written in Chinese and appear on the Chinese page.

Artifacts

Layer	Value
Custom element	<xh-time-range-picker>
Vue components	XhTimeRangePickerClearTrigger XhTimeRangePickerColumn XhTimeRangePickerColumnGroup XhTimeRangePickerColumnGroupLabel XhTimeRangePickerContent XhTimeRangePickerControl XhTimeRangePickerHiddenInput XhTimeRangePickerItem XhTimeRangePickerLabel XhTimeRangePickerPositioner XhTimeRangePickerPreset XhTimeRangePickerPresetGroup XhTimeRangePickerRangeSeparator XhTimeRangePickerRoot XhTimeRangePickerSegment XhTimeRangePickerSegmentGroup XhTimeRangePickerTrigger
Composable	useTimeRangePicker
State machine	timeRangePickerMachine
Skin	@xihan-ui/styles/time-range-picker.css

Props

Prop	Type	Required
labelled	boolean
ariaLabel	string
value	string[]
defaultValue	string[]
open	boolean
defaultOpen	boolean
min	string
max	string
locale	string
hourCycle	TimeHourCycle
granularity	TimeGranularity
timeStep	TimeStep
presets	TimeRangePickerPreset[]
disabled	boolean
readOnly	boolean
invalid	boolean
required	boolean
name	string
endName	string
startPlaceholder	string
endPlaceholder	string
variant	ControlVariant
tone	Tone
size	Size
placement	Placement
dir	Direction
offset	number
isTimeUnavailable	TimeUnavailablePredicate
translations	Partial<TimeRangePickerTranslations>
onValueChange	(details: TimeRangePickerValueChangeDetails) => void
onClear	() => void
onOpenChange	(details: TimeRangePickerOpenChangeDetails) => void

TimeRangePickerPreset

Elements of presets.

Field	Type	Required
value	string	Yes
label	string	Yes
disabled	boolean

Events

Custom elements put the payload in detail; Vue emits an event of the same name.

Event	Payload
value-change	TimeRangePickerValueChangeDetails
clear	``
open-change	TimeRangePickerOpenChangeDetails

Slots

Only slots with a payload are listed.

Vue component	Slot	Payload
XhTimeRangePickerColumn	default	TimeRangePickerColumnSlotProps
XhTimeRangePickerColumnGroup	default	TimeRangePickerColumnGroupSlotProps
XhTimeRangePickerPreset	default	—
XhTimeRangePickerPresetGroup	default	TimeRangePickerPresetsSlotProps
XhTimeRangePickerRoot	default	TimeRangePickerRootSlotProps
XhTimeRangePickerRoot	label	—

React adapter props

Only the props each component declares itself: DOM attributes inherited from ComponentPropsWithRef are left out, and root props already listed in the Props table are not repeated. The Vue counterpart is the slot table above.

React component	Prop	Type	Required
XhTimeRangePickerColumn	unit	TimePickerColumnUnit	Yes
XhTimeRangePickerColumn	children	SlotChildren<TimeRangePickerColumnSlotProps>
XhTimeRangePickerColumnGroup	index	number | string
XhTimeRangePickerColumnGroup	children	SlotChildren<TimeRangePickerColumnGroupSlotProps>
XhTimeRangePickerHiddenInput	index	number | string
XhTimeRangePickerItem	value	string	Yes
XhTimeRangePickerPositioner	container	() => Element | null
XhTimeRangePickerPreset	value	string	Yes
XhTimeRangePickerPresetGroup	children	SlotChildren<TimeRangePickerPresetsSlotProps>
XhTimeRangePickerRoot	label	ReactNode
XhTimeRangePickerRoot	children	SlotChildren<TimeRangePickerRootSlotProps>
XhTimeRangePickerSegment	segment	TimeSegmentType	Yes
XhTimeRangePickerSegmentGroup	index	number | string

State

Public state is written to data-state.

Part	Values
root	'open' | 'closed'
control	'open' | 'closed'
trigger	'open' | 'closed'
positioner	'open' | 'closed'
content	'open' | 'closed'
preset	'checked' | 'unchecked'
column-group	'open' | 'closed'
column	'open' | 'closed'
item	'checked' | 'unchecked'

The following names are internal to the state machine.

States: open · closed

Events: OPEN · TOGGLE · CLOSE · CONTROLLED.OPEN · CONTROLLED.CLOSE · VALUE.SET · VALUE.CLEAR · SEGMENT.STEP · SEGMENT.DIGIT · SEGMENT.CLEAR · SEGMENT.PERIOD · SEGMENT.FOCUS · SEGMENT.BLUR · OPTION.FOCUS · ITEM.SELECT · FORM.RESET · PRESS.START · PRESS.END

Guards: isOpenControlled · canEdit · closesOnPreset · canPress

connect API

getXxxProps() returns the host attributes of the matching part.

Member	Type
open	boolean
value	string[]
start	string | null
end	string | null
empty	boolean
outOfRange	boolean
reversed	boolean
disabled	boolean
readOnly	boolean
invalid	boolean
hourCycle	TimeHourCycle
granularity	TimeGranularity
timeStep	ResolvedTimeStep
segments	TimeSegmentType[]
focusedSegment	TimeRangePickerSegmentRef | null
columnGroups	readonly [TimeRangePickerColumnGroup, TimeRangePickerColumnGroup]
focusedColumn	TimeRangePickerColumnRef | null
focusedItem	string | null
presets	readonly TimeRangePickerPresetState[]
canClear	boolean
translations	TimeRangePickerTranslations
getSegmentText	(props: TimeRangePickerSegmentProps) => string
getItemText	(props: TimeRangePickerItemTextProps) => string
isItemSelected	(props: TimeRangePickerItemProps) => boolean
isItemDisabled	(props: TimeRangePickerItemProps) => boolean
setOpen	(next: boolean) => void
setValue	(next: string[]) => void
clear	() => void
getRootProps	() => T['element']
getLabelProps	() => T['label']
getControlProps	() => T['element']
getSegmentGroupProps	(props: TimeRangePickerEndProps) => T['element']
getSegmentProps	(props: TimeRangePickerSegmentProps) => T['element']
getRangeSeparatorProps	() => T['element']
getTriggerProps	() => T['button']
getClearTriggerProps	() => T['button']
getPositionerProps	() => T['element']
getContentProps	() => T['element']
getPresetGroupProps	() => T['element']
getPresetProps	(props: TimeRangePickerPresetProps) => T['element']
getColumnGroupProps	(props: TimeRangePickerEndProps) => T['element']
getColumnGroupLabelProps	(props: TimeRangePickerEndProps) => T['element']
getColumnProps	(props: TimeRangePickerColumnProps) => T['element']
getItemProps	(props: TimeRangePickerItemProps) => T['element']
getHiddenInputProps	(props: TimeRangePickerEndProps) => T['input']

Accessibility

Keyboard

Specification: W3C APG. Each row is a stable behavior id that the conformance tests cover; the conditions and effects are described on the Chinese page.

Keys	Behavior
ArrowDown / ArrowUp	time-range-picker.kbd.open
Enter / Space	time-range-picker.kbd.toggle
ArrowDown	time-range-picker.kbd.item-next
ArrowUp	time-range-picker.kbd.item-prev
Home	time-range-picker.kbd.item-first
End	time-range-picker.kbd.item-last
ArrowRight	time-range-picker.kbd.column-next
ArrowLeft	time-range-picker.kbd.column-prev
Enter / Space	time-range-picker.kbd.select
ArrowUp / ArrowDown / Home / End	time-range-picker.kbd.preset-move
Enter / Space	time-range-picker.kbd.preset-pick
Escape	time-range-picker.kbd.escape
Tab / Shift+Tab	time-range-picker.kbd.tab
ArrowUp	time-range-picker.kbd.segment-increment
ArrowDown	time-range-picker.kbd.segment-decrement
ArrowRight	time-range-picker.kbd.segment-next
ArrowLeft	time-range-picker.kbd.segment-prev
Home	time-range-picker.kbd.segment-first
End	time-range-picker.kbd.segment-last
0-9	time-range-picker.kbd.segment-digit
Backspace / Delete	time-range-picker.kbd.segment-clear
a / p	time-range-picker.kbd.segment-period
Alt+ArrowDown	time-range-picker.kbd.segment-open
Enter	time-range-picker.kbd.segment-close
Enter / Space	time-range-picker.kbd.press

ARIA

These attributes are produced by connect.

Part	Attribute	Value
control	aria-disabled	'true' | 'false'
control	aria-invalid	'true' | 'false'
control	aria-label	props.ariaLabel
control	aria-labelledby	id of the label part | undefined
control	role	'group'
segment-group	aria-disabled	'true' | 'false'
segment-group	aria-label	endLabel(index, translations)
segment-group	role	'group'
segment	aria-disabled	'true' | 'false'
segment	aria-invalid	'true' | 'false'
segment	aria-label	translations[segment]
segment	aria-readonly	'true' | 'false'
segment	aria-required	'true' | 'false'
segment	aria-valuemax	range.max
segment	aria-valuemin	range.min
segment	aria-valuenow	segmentNumber(drafts[index], segment, hourCycle)
segment	aria-valuetext	timeSegmentText(drafts[index], segment, { hourCycle, …
segment	role	'spinbutton'
range-separator	aria-hidden	'true'
trigger	aria-controls	id of the content part
trigger	aria-expanded	'true' | 'false'
trigger	aria-haspopup	'dialog'
trigger	aria-label	props.ariaLabel
trigger	aria-labelledby	id of the label part | undefined
clear-trigger	aria-label	translations.clearTrigger
content	aria-hidden	!open || undefined
content	aria-label	props.ariaLabel
content	aria-labelledby	id of the label part | undefined
content	aria-modal	'false'
content	role	'dialog'
preset-group	aria-disabled	'true' | 'false'
preset-group	aria-label	translations.presets
preset-group	aria-multiselectable	'false'
preset-group	aria-orientation	'vertical'
preset-group	role	'listbox'
preset	aria-disabled	'true' | 'false'
preset	aria-selected	'true' | 'false'
preset	role	'option'
column-group	aria-label	endLabel(index, translations)
column-group	role	'group'
column-group-label	aria-hidden	'true'
column	aria-disabled	'true' | 'false'
column	aria-label	translations[unit]
column	aria-multiselectable	'false'
column	aria-orientation	'vertical'
column	role	'listbox'
item	aria-disabled	'true' | 'false'
item	aria-selected	'true' | 'false'
item	role	'option'

Style reference

Skin

@xihan-ui/styles/time-range-picker.css is written against [data-scope="time-range-picker"][data-part="root"] part selectors; the published build uses the mount class .xh-scope-time-range-picker in place of data-scope (same specificity) and sits in the xihan.components and xihan.motion layers. Put overrides in xihan.overrides; the part selectors work as usual.

Data attributes

Produced by connect; valueless attributes are omitted while their condition does not hold.

Part	Attribute	Value
root	data-disabled	'' (present only while the condition holds)
root	data-empty	'' (present only while the condition holds)
root	data-invalid	'' (present only while the condition holds)
root	data-out-of-range	'' (present only while the condition holds)
root	data-readonly	'' (present only while the condition holds)
root	data-size	props.size
root	data-state	'open' | 'closed'
root	data-tone	props.tone
root	data-variant	props.variant
label	data-disabled	'' (present only while the condition holds)
control	data-disabled	'' (present only while the condition holds)
control	data-empty	'' (present only while the condition holds)
control	data-invalid	'' (present only while the condition holds)
control	data-readonly	'' (present only while the condition holds)
control	data-state	'open' | 'closed'
control	data-variant	props.variant
control	data-xh-action-owner	''
control	data-xh-field-chrome	''
control	data-xh-field-size	props.size
segment-group	data-complete	'' (present only while the condition holds)
segment-group	data-disabled	'' (present only while the condition holds)
segment-group	data-empty	'' (present only while the condition holds)
segment-group	data-index	String(index)
segment-group	data-invalid	'' (present only while the condition holds)
segment-group	data-out-of-range	'' (present only while the condition holds)
segment-group	data-placeholder-shown	'' (present only while the condition holds)
segment-group	data-placeholder-text	props.endPlaceholder | props.startPlaceholder | undefined
segment-group	data-readonly	'' (present only while the condition holds)
segment	data-disabled	'' (present only while the condition holds)
segment	data-focus	'' (present only while the condition holds)
segment	data-invalid	'' (present only while the condition holds)
segment	data-placeholder	'' (present only while the condition holds)
segment	data-readonly	'' (present only while the condition holds)
range-separator	data-disabled	'' (present only while the condition holds)
trigger	data-disabled	'' (present only while the condition holds)
trigger	data-pressed	'' (present only while the condition holds)
trigger	data-state	'open' | 'closed'
trigger	data-xh-action-control	''
trigger	data-xh-action-display	'always'
trigger	data-xh-action-profile	'field-inset'
trigger	data-xh-action-size	props.size
trigger	data-xh-action-variant	'ghost'
clear-trigger	data-pressed	'' (present only while the condition holds)
clear-trigger	data-xh-action-control	''
clear-trigger	data-xh-action-display	'has-value'
clear-trigger	data-xh-action-has-value	'' (present only while the condition holds)
clear-trigger	data-xh-action-profile	'field-inset'
clear-trigger	data-xh-action-size	props.size
clear-trigger	data-xh-action-variant	'ghost'
positioner	data-hidden	'' (present only while the condition holds)
positioner	data-placement	actual placement computed by the positioning engine
positioner	data-positioned	'' (present only while the condition holds)
positioner	data-size	props.size
positioner	data-state	'open' | 'closed'
positioner	data-tone	props.tone
positioner	data-variant	props.variant
content	data-instant	'' (present only while the condition holds)
content	data-placement	actual placement computed by the positioning engine
content	data-state	'open' | 'closed'
preset	data-disabled	'' (present only while the condition holds)
preset	data-pressed	'' (present only while the condition holds)
preset	data-state	'checked' | 'unchecked'
preset	data-xh-collection-context	'overlay'
preset	data-xh-collection-item	''
preset	data-xh-collection-size	props.size
column-group	data-disabled	'' (present only while the condition holds)
column-group	data-focus	'' (present only while the condition holds)
column-group	data-index	String(index)
column-group	data-state	'open' | 'closed'
column-group-label	data-disabled	'' (present only while the condition holds)
column-group-label	data-index	String(index)
column	data-disabled	'' (present only while the condition holds)
column	data-state	'open' | 'closed'
item	data-disabled	'' (present only while the condition holds)
item	data-highlighted	'' (present only while the condition holds)
item	data-pressed	'' (present only while the condition holds)
item	data-state	'checked' | 'unchecked'
item	data-xh-collection-context	'overlay'
item	data-xh-collection-item	''
item	data-xh-collection-size	props.size
hidden-input	data-index	String(index)

CSS variables

The public override slots, generated from what the standalone skin actually consumes.

Variable	Part	CSS property	State	Default from
--xh-time-range-picker-action-bg	clear-trigger trigger	--xh-ink-surface background-color	default xh-ink-surface	--xh-_action-variant-bg-rest
--xh-time-range-picker-action-bg-active	clear-trigger trigger	background-color	disabled is(:active, [data-pressed]) loading not([data-disabled]) not([data-loading]) pressed	--xh-_action-variant-bg-pressed
--xh-time-range-picker-action-bg-hover	clear-trigger trigger	--xh-ink-surface background-color	disabled hover loading not([data-disabled]) not([data-loading]) state=open xh-ink-surface	--xh-_action-variant-bg-hover
--xh-time-range-picker-action-fg	clear-trigger trigger	color	default	--xh-fg-field-clear --xh-fg-muted
--xh-time-range-picker-action-fg-hover	clear-trigger trigger	color	disabled hover loading not([data-disabled]) not([data-loading]) state=open	--xh-fg-default
--xh-time-range-picker-action-font-size	clear-trigger trigger	font-size	default	--xh-text-secondary-size
--xh-time-range-picker-action-radius	clear-trigger trigger	border-radius	default	--xh-shape-circle --xh-shape-inset
--xh-time-range-picker-action-size	clear-trigger trigger	block-size inline-size min-inline-size	default xh-action-profile=field-inset	--xh-_action-profile-visual-size
--xh-time-range-picker-column-divider	column column-group preset-group	border-block-start border-inline-end border-inline-start	default	--xh-material-solid-border
--xh-time-range-picker-column-gap	column item	gap inset-block	default	--xh-space-2
--xh-time-range-picker-column-group-divider	column-group	border-inline-start	default	--xh-material-solid-border
--xh-time-range-picker-column-group-gap	column-group	margin-inline-start padding-inline-start	default	--xh-space-0
--xh-time-range-picker-column-group-label-fg	column-group-label	color	default	--xh-fg-subtle
--xh-time-range-picker-column-group-label-px	column-group-label	padding-inline	default	--xh-space-1
--xh-time-range-picker-column-group-label-py	column-group column-group-label	block-size padding-block padding-block-start	default	--xh-space-1
--xh-time-range-picker-column-group-py	column-group column-group-label	block-size padding-block-start	default	--xh-time-range-picker-column-group-label-py
--xh-time-range-picker-column-h	column	block-size padding-block	default	--xh-overlay-time-column-h
--xh-time-range-picker-column-min-w	column	min-inline-size	default	--xh-overlay-time-column-w
--xh-time-range-picker-column-px	column	padding-inline	default	--xh-space-1
--xh-time-range-picker-column-py	column	padding-block	default	--xh-space-1
--xh-time-range-picker-content-bg	content	background	default	--xh-bg-surface
--xh-time-range-picker-content-border	content	border	default	--xh-border-default
--xh-time-range-picker-content-fg	content	color	default	--xh-fg-default
--xh-time-range-picker-content-max-h	content	max-block-size	default	none
--xh-time-range-picker-content-px	content	padding-inline	default	--xh-space-0
--xh-time-range-picker-content-py	content	padding-block	default	--xh-space-0
--xh-time-range-picker-content-radius	content	border-radius	default	--xh-shape-overlay
--xh-time-range-picker-content-shadow	content	box-shadow	default	--xh-elevation-floating
--xh-time-range-picker-control-bg	control	background-color	xh-field-chrome	--xh-_field-variant-bg-rest
--xh-time-range-picker-control-bg-disabled	control	background-color	disabled xh-field-chrome	--xh-_field-variant-bg-disabled
--xh-time-range-picker-control-bg-hover	control	background-color	disabled hover invalid loading not(:focus-within) not([data-disabled]) not([data-invalid]) not([data-loading]) not([data-readonly]) readonly xh-field-chrome	--xh-_field-variant-bg-hover
--xh-time-range-picker-control-bg-readonly	control	background-color	readonly xh-field-chrome	--xh-_field-variant-bg-read-only
--xh-time-range-picker-control-border	control	border	xh-field-chrome	--xh-_field-variant-border-rest
--xh-time-range-picker-control-border-focus	control	border-color box-shadow	disabled focus-within not([data-disabled]) xh-field-chrome	--xh-_field-variant-border-focus
--xh-time-range-picker-control-border-hover	control	border-color	disabled hover invalid loading not(:focus-within) not([data-disabled]) not([data-invalid]) not([data-loading]) not([data-readonly]) readonly xh-field-chrome	--xh-_field-variant-border-hover
--xh-time-range-picker-control-border-invalid	control	border-color	invalid xh-field-chrome	--xh-_field-variant-border-invalid
--xh-time-range-picker-control-fg	control	color	xh-field-chrome	--xh-fg-default
--xh-time-range-picker-control-gap	control range-separator	gap margin-inline	default xh-field-chrome	--xh-_time-range-picker-gap
--xh-time-range-picker-control-h	control	block-size min-block-size	has([data-xh-field-input][data-xh-field-layout='multi-tag']) has([data-xh-field-input][data-xh-field-layout='single-line']) has([data-xh-field-input][data-xh-field-layout='textarea']) xh-field-chrome xh-field-input xh-field-layout=multi-tag xh-field-layout=single-line xh-field-layout=textarea	--xh-_time-range-picker-control-h
--xh-time-range-picker-control-min-w	control root	min-inline-size	default xh-field-chrome	--xh-control-min-w
--xh-time-range-picker-control-px	control	padding-inline	xh-field-chrome	--xh-_time-range-picker-control-px
--xh-time-range-picker-control-radius	control	border-radius	xh-field-chrome	--xh-shape-control
--xh-time-range-picker-control-shadow	control	box-shadow	xh-field-chrome	none
--xh-time-range-picker-control-w	root	inline-size min-inline-size	default	--xh-control-w
--xh-time-range-picker-font-size	control	font-size	default	--xh-_time-range-picker-font-size
--xh-time-range-picker-gap	label root	gap margin-block-end	default	--xh-space-1
--xh-time-range-picker-icon-size	control positioner root	--xh-icon-size	default is([data-part='root'], [data-part='positioner']) size=lg size=sm xh-field-chrome	--xh-_field-size-glyph-size --xh-glyph-size-lg --xh-glyph-size-md --xh-glyph-size-sm
--xh-time-range-picker-item-bg-hover	item	background-color	disabled error highlighted hover is(:focus-visible, [data-highlighted]) is([aria-selected='true'], [data-selected]) not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) selected xh-collection-context=overlay	--xh-bg-subtle
--xh-time-range-picker-item-bg-pressed	item	background-color	disabled error is(:active, [data-pressed]) is([aria-selected='true'], [data-selected]) not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) pressed selected xh-collection-context=overlay	--xh-bg-subtle-hover
--xh-time-range-picker-item-check-fg	item	background-color	default	--xh-_time-range-picker-check-fg
--xh-time-range-picker-item-check-size	item	block-size inline-size padding-inline	default	--xh-control-indicator-size
--xh-time-range-picker-item-fg	item	color	default disabled error highlighted hover is(:active, [data-pressed]) is(:focus-visible, [data-highlighted]) is([aria-selected='true'], [data-selected]) not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) pressed selected xh-collection-context=overlay	--xh-material-frosted-fg
--xh-time-range-picker-item-fg-selected	item	color	disabled error highlighted hover is(:active, [data-pressed]) is(:focus-visible, [data-highlighted]) is([aria-selected='true'], [data-selected]) not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) pressed selected xh-collection-context=overlay	--xh-time-range-picker-item-fg
--xh-time-range-picker-item-font-size	item	font-size	default	--xh-_time-range-picker-font-size
--xh-time-range-picker-item-font-weight-selected	item	font-weight	disabled error highlighted hover is(:active, [data-pressed]) is(:focus-visible, [data-highlighted]) is([aria-selected='true'], [data-selected]) not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) pressed selected xh-collection-context=overlay	--xh-font-weight-medium
--xh-time-range-picker-item-h	column item	block-size padding-block	default	--xh-control-action-size
--xh-time-range-picker-item-px	item	padding-inline	default	--xh-space-0_5
--xh-time-range-picker-item-radius	item	border-radius	default	--xh-shape-inset
--xh-time-range-picker-label-fg	label	color	default	--xh-fg-muted
--xh-time-range-picker-label-fg-disabled	label	color	disabled	--xh-fg-muted
--xh-time-range-picker-label-font-size	label	font-size	default	--xh-text-label-size
--xh-time-range-picker-label-font-weight	label	font-weight	default	--xh-text-label-weight
--xh-time-range-picker-label-gap	label	margin-block-end	default	--xh-space-2
--xh-time-range-picker-layer	positioner	z-index	default	--xh-_layer
--xh-time-range-picker-literal-fg	segment-group	color	not([data-scope])	--xh-fg-subtle
--xh-time-range-picker-placeholder-fg	segment segment-group	color	placeholder placeholder-shown	--xh-fg-subtle
--xh-time-range-picker-preset-bg	preset	background-color	default disabled error is([aria-selected='true'], [data-selected]) not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) selected xh-collection-context=overlay	--xh-bg-subtle
--xh-time-range-picker-preset-bg-hover	preset	background-color	disabled error highlighted hover is(:focus-visible, [data-highlighted]) is([aria-selected='true'], [data-selected]) not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) selected xh-collection-context=overlay	--xh-bg-subtle-hover
--xh-time-range-picker-preset-bg-pressed	preset	background-color	disabled error is(:active, [data-pressed]) is([aria-selected='true'], [data-selected]) not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) pressed selected xh-collection-context=overlay	--xh-bg-subtle-active
--xh-time-range-picker-preset-check-fg	preset	background-color	default	--xh-_time-range-picker-check-fg
--xh-time-range-picker-preset-check-size	preset	block-size inline-size padding-inline-end	default	--xh-control-indicator-sm
--xh-time-range-picker-preset-fg	preset	color	default disabled error is([aria-selected='true'], [data-selected]) not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) selected xh-collection-context=overlay	--xh-fg-muted
--xh-time-range-picker-preset-fg-disabled	preset	background-color color	default disabled	--xh-fg-disabled
--xh-time-range-picker-preset-fg-hover	preset	color	disabled error highlighted hover is(:active, [data-pressed]) is(:focus-visible, [data-highlighted]) is([aria-selected='true'], [data-selected]) not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) pressed selected xh-collection-context=overlay	--xh-fg-default
--xh-time-range-picker-preset-font-size	preset	font-size	default	--xh-text-caption-size
--xh-time-range-picker-preset-group-gap	preset-group	gap	default	--xh-space-1
--xh-time-range-picker-preset-group-h	preset-group	max-block-size	default	--xh-overlay-time-column-h
--xh-time-range-picker-preset-group-px	preset-group	padding-inline	default	--xh-space-2
--xh-time-range-picker-preset-group-py	preset-group	padding-block	default	--xh-space-2_5
--xh-time-range-picker-preset-h	preset	block-size line-height	default	--xh-control-action-size
--xh-time-range-picker-preset-px	preset	inset-inline-end padding-inline padding-inline-end	default	--xh-space-2
--xh-time-range-picker-preset-radius	preset	border-radius	default	--xh-shape-control
--xh-time-range-picker-range-separator-fg	range-separator	color	default	--xh-fg-subtle
--xh-time-range-picker-range-separator-mx	range-separator	margin-inline	default	--xh-_time-range-picker-range-separator-mx
--xh-time-range-picker-range-separator-px	range-separator	margin-inline padding-inline	default	--xh-space-1
--xh-time-range-picker-segment-bg-focus	segment	background	disabled focus focus-visible not([data-disabled])	--xh-_time-range-picker-segment-bg
--xh-time-range-picker-segment-bg-hover	segment	background	disabled focus hover not([data-focus], [data-disabled])	--xh-bg-subtle
--xh-time-range-picker-segment-bg-invalid-focus	segment	background	focus invalid is([data-focus], :focus-visible)	--xh-bg-subtle
--xh-time-range-picker-segment-fg-focus	segment	color	disabled focus focus-visible not([data-disabled]) placeholder	--xh-_time-range-picker-segment-fg
--xh-time-range-picker-segment-fg-invalid	segment	color	invalid	--xh-fg-danger
--xh-time-range-picker-segment-fg-invalid-focus	segment	color	focus invalid is([data-focus], :focus-visible)	--xh-fg-danger
--xh-time-range-picker-segment-px	segment	padding-inline	default	--xh-space-0_5
--xh-time-range-picker-segment-radius	segment	border-radius	default	--xh-shape-inset