TimePicker 时间选择器

将可键入的分段时间框、时钟触发器和分列选择浮层组合成一个字段。

HeadlessStylesVueReactWeb Components

用法

输入框与选择面板共享同一份值；按 15 分钟列出选项并实时显示结果

会议开始

09:30

当前值：09:30

主题跟随站点浅色深色密度宽松紧凑对比度基线高对比方向从左到右从右到左

组件结构

加粗的是必需部件。

data-scope="time-picker"：root · label · control · tag-list · segment-group · segment · trigger · clear-trigger · positioner · content · preset-group · preset · column · item · footer · confirm-trigger · hidden-input

示例

按单位步长

timeStep 给时、分、秒各设步长，{ minute: 15 } 只裁剪浮层中的可选值（分列剩四格），段位上手动输入的分钟数不受它限制

预约时段

09:30

当前值：09:30

主题跟随站点浅色深色密度宽松紧凑对比度基线高对比方向从左到右从右到左

12 小时制

时列写的是显示值 01-12，落到哪个真实小时由上下午决定：输入行中输入、浮层中选择都会修改它

提醒时间

09:30上午

值仍是 24 小时的串：09:30

主题跟随站点浅色深色密度宽松紧凑对比度基线高对比方向从左到右从右到左

精度到秒

granularity 同时决定输入行显示几段、浮层中排几列

执行时刻

--:--:--

当前值：（空）

主题跟随站点浅色深色密度宽松紧凑对比度基线高对比方向从左到右从右到左

禁用 / 只读 / 校验失败

禁用整条退出 Tab 序列，只读仍能展开浏览只是不可修改值，invalid 只改变标注

禁用

09:30

只读

09:30

校验失败

09:30

主题跟随站点浅色深色密度宽松紧凑对比度基线高对比方向从左到右从右到左

可选时段

min / max 直接把界外的格从列中裁掉；分列还会随已选的小时再裁剪一次

面谈时段

--:--

手打进段位的时间不受裁剪限制，越界只被标注：（空）

主题跟随站点浅色深色密度宽松紧凑对比度基线高对比方向从左到右从右到左

浮层中的操作按钮

列表下方这排按钮是作者自己的节点，键盘事件在这一层收口，不再上交给列表

提交时刻

--:--

当前值：（空）

主题跟随站点浅色深色密度宽松紧凑对比度基线高对比方向从左到右从右到左

自定义可选格

列中渲染哪几格由作者决定，午休两格整段移除；手动输入段位的小时被吸附到下一个可约小时

面谈时刻

09:00

当前值：09:00

主题跟随站点浅色深色密度宽松紧凑对比度基线高对比方向从左到右从右到左

三轴

variant 决定描边与底色的绘制方式、tone 决定使用哪族颜色、size 切换几何档；三者只落在 root，浮层中的格子一并随之变化

outline

09:30

subtle

09:30

ghost

09:30

brand

09:30

success

09:30

danger

09:30

sm

09:30

md

09:30

lg

09:30

主题跟随站点浅色深色密度宽松紧凑对比度基线高对比方向从左到右从右到左

可选的触发按钮

点击输入行本来就会展开，该按钮不是必需的；需要它是因为它才带 aria-haspopup / aria-expanded

会议开始

09:30

当前值：09:30

主题跟随站点浅色深色密度宽松紧凑对比度基线高对比方向从左到右从右到左

快捷选项

presets 在列旁边多排一列，点击一条即整份写入值并收起；时刻在组件外计算后再传入

提交时刻

--:--

当前值：（空）

主题跟随站点浅色深色密度宽松紧凑对比度基线高对比方向从左到右从右到左

按已选的时判定

isTimeUnavailable 的第三个参数带已选的时：9 点只能约 30 分以后，别的整点不受限

到店时刻

09:30

当前值：09:30

主题跟随站点浅色深色密度宽松紧凑对比度基线高对比方向从左到右从右到左

多选成标签

selectionMode="multiple" 时各列拼出的是草稿，按「添加」收进值、浮层不收，可以接着添；选中的时刻在输入行里排成标签，点叉或在展开钮上按退格摘掉

提醒时刻

09:0014:30

当前值：09:00、14:30

主题跟随站点浅色深色密度宽松紧凑对比度基线高对比方向从左到右从右到左

设计指引

何时使用

• 可选时间是离散的（每 15 分钟一档）。
• 需要限制可选时段（营业时间、可预约时段）。

何时不用

• 任意时间都可以、用户直接键入时，使用时间字段。

特性

• 不写结构时按标准结构铺出整套部件（Vue 不写默认插槽、React 不给 children、Web Components 不写部件或只写 root），三端出自同一个结构函数：标题（label 给文字，是原生 label），盒里的段组（时、分、秒之间是冒号，挨着上下午段的是空格；多选时换成带删除钮的标签行）、清空钮与日历钮，表单影子，浮层里依次是快捷选项列、按精度与小时制铺的各列，多选时再加底栏的「添加」（文字取 translations.confirmTrigger）。精度、小时制与选中变化时结构随之重铺。Web Components 里标题可以写在宿主的直接子节点上接管：slot="label"。
• timeStep 按单位设定时、分、秒各列的步长（{ minute: 15 }）。
• max 直接把界外的格从列中裁掉；分钟列还会随已选的小时再裁一次。
• isTimeUnavailable 逐格判断可选性：时列按 24 小时制给值，第三个参数带已选的时与分，写得出「9 点只能选 30 分以后」。
• 浮层内可以放置“当前时刻”与确认按钮。
• 值恒为 ISO 时间串数组：单选至多一项（还没填全时为空数组），宿主可以写裸串；onValueChange 的 value 恒为数组。
• 多选（selectionMode="multiple"）时各列拼出的是草稿，按「添加」（confirm-trigger）收进值，浮层不收、草稿留着，改一列就能接着添；快捷选项点一下切换选中。草稿没填全、越界、已经选过或到了 maxSelected 时「添加」不可按。
• 「添加」写在底栏（footer）里：底栏是浮层底部的通栏操作区，落在快捷选项列与各列下面独占一行，上沿一道分隔线、四周 8 的内衬；作者另放的说明文字排在行首、取弱化的说明档字，「添加」落在行尾。底栏里只有「添加」时，单选下它随「添加」一并收起，不留空栏。
• 多选的选中值在输入行里排成标签（与选择器多选同一套库内标签），按时刻升序：段位收起，展开钮常驻并成为键盘入口，在它上面按退格摘掉最后一个，点标签上的叉摘掉那一个；标签按 locale 与小时制排出（13:45、下午1:45），不截短、一行放不下就折行，超过 maxTagCount（默认 3）的折进 +N；表单一个选中值一份同名隐藏输入。
• 触发器打开空值时焦点直接落到第一项；从输入段打开时继续保留键入焦点。
• 快捷选项与时/分/秒列都从当前值恢复持久选中，并在逻辑末端显示对号。
• 悬停、键盘高亮与可见焦点使用中性实体底，与选中对号可以同时存在。数字格在左右保留等宽标记轨，选中和 RTL 都不会把数字推离中心。
• 每列 64px 宽、七格整行高，格是 24px 高的通栏条；列底留白让末尾几格（23 时、55–59 分）也能滚到列顶，几列的选中落在同一行。快捷选项是淡底小钮，选中时在末端画对号。
• 输入框走 Field Chrome 描边式；浮层为 floating 实体面（border-default + floating 海拔）；时分秒与快捷列各自接自绘条。
• 浮层走弹层那一套进出场：按实际弹出方向短移、淡入放大，退场缩小淡出；减弱动效和增强对比度沿用主题设置。
• 空值时显示时钟入口；有值且渲染了清空按钮时，指针落在盒上（或焦点在盒内）由清空按钮原位接替时钟图标，触屏上有值即接替；焦点正在时钟钮上时它不让位。
• 聚焦边界与当前段位使用短过渡，不以瞬时跳色表达焦点。

组合

• 与日期选择器配合组成日期时间选择。
• 直接放入表单字段：字段的标题并进时钟钮的名字，说明与错误文案进描述链；只读、必填与校验由各段报告，时钟钮是普通按钮，不带 aria-readonly / aria-required。有值时清空钮顶替时钟钮，点字段标题焦点落在第一段。

最佳实践

• 把不可选的时段裁掉而不是置灰，列更短、查找更快。
• 打开时把浮层滚动到当前值。
• 标准输入行应同时包含清空按钮与时钟图标触发器；单选时二者按值互斥显示，多选时都留着。参与表单时同时渲染隐藏输入。
• 自定义格内文案保持简短；选中对号由皮肤统一绘制，不在插槽内重复添加。
• 多选时把「添加」放进底栏，不在 content 里另写带样式的包裹块。

反模式

• 步长设为 1 分钟：一列六十格，滚动过长。

API 参考

产物

层	值
自定义元素	<xh-time-picker>
Vue 组件	XhTimePickerClearTrigger XhTimePickerColumn XhTimePickerConfirmTrigger XhTimePickerContent XhTimePickerControl XhTimePickerFooter XhTimePickerHiddenInput XhTimePickerItem XhTimePickerItemDeleteTrigger XhTimePickerLabel XhTimePickerOverflowTag XhTimePickerPositioner XhTimePickerPreset XhTimePickerPresetGroup XhTimePickerRoot XhTimePickerSegment XhTimePickerSegmentGroup XhTimePickerTag XhTimePickerTagLabel XhTimePickerTagList XhTimePickerTrigger
组合式函数	useTimePicker
状态机	timePickerMachine
皮肤	@xihan-ui/styles/time-picker.css

Props

属性	类型	必填	说明
labelled	boolean		作者渲染了 label 部件时置真，由适配器统计而不是判断标题文字是否有值。 为假时可聚焦部件不把 label 的 id 写进 aria-labelledby：指向未渲染的 id 是无效引用，作者写在控件上的 aria-label 也会被它压住。
ariaLabel	string		不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上。 放进字段（字段接线）或渲染了 label 部件时名字以它们为准，aria-labelledby 盖过它。
value	string | string[]		受控值，ISO 时间串数组。提供即受控：cell 直读 prop，写入只发 onValueChange 不落内部值。 单选可写裸串，内部一律归一为数组（空串即空数组）。
defaultValue	string | string[]
selectionMode	TimePickerSelectionMode		选择模式，默认 single。
maxSelected	number		multiple 下最多选几个时刻：选满后「添加」不可按、快捷选项只能点掉已选的。非整数向下取整，小于 1 或不是有限数时不设上限。
maxTagCount	number		多选时输入行最多摆几枚标签，其余折进 +N 那一枚；默认 3。
open	boolean		展开态。提供即受控：内部不再自行修改，只发 onOpenChange。
defaultOpen	boolean
min	string		下界（含）。裁掉浮层中落在界外的可选值，并把已填的越界值标注出来（不改写它）。
max	string		上界（含）。同上。
locale	string		BCP 47 语言标记。决定上午 / 下午的文字，以及未显式提供 hourCycle 时的小时制。
hourCycle	TimeHourCycle		小时制。未提供时按 locale 推断，locale 也没有时使用 24。
granularity	TimeGranularity		值精确到哪一段，默认 minute。它同时决定分段输入显示几段、浮层中排几列。
timeStep	TimeStep		按单位的步进：{ hour?, minute?, second? }，各单位缺省 1。时的步进按 24 小时制的真实小时取。 只影响浮层中的可选值，不限制段位上手动输入的数。
presets	TimePickerPreset[]		快捷选项（「当前时刻」「上午 9 点」等）。提供后浮层中多出一列，点击即整份写入值并收起。 时刻需计算后传入：连接层每帧求值，把当前时刻放进渲染期会每帧得出一个新结果。 无法解析或落在 min / max 之外的选项自动不可按下；带秒的时刻按 granularity 归一后再比较与写入。
disabled	boolean		禁用：分段输入整组退出 Tab 序列、触发器使用原生 disabled，隐藏输入不参与提交。
readOnly	boolean		只读：浮层照常展开、列表照常浏览，但值不可修改也不可清空。
invalid	boolean		校验失败标注。
required	boolean		必填标注（写入每段的 aria-required）。
name	string		表单字段名；提供后隐藏输入才带 name，值随表单一并提交。
placeholder	string		整条占位：一段都没填、焦点也不在段上时，输入行显示这句文字（「请选择开始时间」），焦点进到段上即换回段位。 多选时没有选中值，标签行显示这句文字。
variant	ControlVariant		形态：outline / subtle / ghost，决定输入行的描边与底色使用方式。默认 outline。
tone	Tone		语气：brand / neutral / success / warning / danger / info，决定聚焦与选中强调使用哪族颜色。
size	Size		尺寸：sm / md / lg，输入行与浮层中的格子一并换档。
placement	Placement
dir	Direction		文字方向，默认 ltr。只改写浮层在行内轴上 start 与 end 的落点。
offset	number
isTimeUnavailable	TimeUnavailablePredicate		逐值可选性。value 是两位补零的格值，时列恒按 24 小时制给出（12 小时制下也换算成真实的时）； unit 区分同一个 '30' 属于哪一列；context 带这份值里已选的时（24 小时制）与分， 写得出「9 点只能选 30 分以后」。date 与 index 在本组件恒为 null。 与 min / max 裁掉的值同等处理：判定为真的格子仍可聚焦，只是不可选中。 连续区间用 min / max 表达即可，该项留给每隔 15 分钟才可预约这类离散规则。
translations	Partial<TimePickerTranslations>		段位读屏名的覆盖；未提供时取英文语言包里的语义名。
onValueChange	(details: TimePickerValueChangeDetails) => void		value 变化意图回调；受控时是唯一出口，非受控时随内部写入一并通知。
onClear	() => void		用户按清空钮（clear-trigger）清掉了值；先发值变化，再发它。程序化的 clear() 不发。
onOpenChange	(details: TimePickerOpenChangeDetails) => void		open 变化意图回调；受控时是唯一出口，非受控时随内部转移一并通知。

TimePickerPreset

presets 的元素。

字段	类型	必填	说明
value	string	是
label	string	是	显示文案，同时是该项的可及名。
disabled	boolean		禁用该项：方向键仍可停留，但按下不写值。

事件

自定义元素将载荷放在 detail；Vue 使用同名 emit。

事件	载荷	说明
value-change	TimePickerValueChangeDetails	选中的时刻变化；detail 为 { value: string[] }，单选至多一项
clear	``	用户按清空钮（clear-trigger）清掉了值；先发值变化，再发它。程序化的 clear() 不发。
open-change	TimePickerOpenChangeDetails	open 状态变化；detail 为 { open: boolean }

插槽

仅列出带载荷的插槽。

Vue 组件	插槽	载荷	说明
XhTimePickerColumn	default	TimePickerColumnSlotProps
XhTimePickerPreset	default	—	条目内容；未写时使用数据中的 label。
XhTimePickerPresetGroup	default	TimePickerPresetsSlotProps	自行铺设条目；未写时按 presets 数据自动铺设，两者产出的 DOM 一致。
XhTimePickerRoot	default	TimePickerRootSlotProps
XhTimePickerRoot	label	—	不写默认插槽时标题的内容，盖过 label 文字。

React 适配器 props

只列各组件自己声明的那些：继承自 ComponentPropsWithRef 的 DOM 属性不在其中，根组件上与上面 Props 表同名的也不重复列。Vue 的对应物是上面的插槽表。

React 组件	属性	类型	必填	说明
XhTimePickerColumn	unit	TimePickerColumnUnit	是
XhTimePickerColumn	children	SlotChildren<TimePickerColumnSlotProps>
XhTimePickerItem	value	string	是	两位补零的显示串（'09' / '30'）；上下午列写 '00' / '01'。
XhTimePickerPositioner	container	() => Element | null		浮层挂载的容器；未提供时按全局配置，再未提供时挂载到 body。
XhTimePickerPreset	value	string	是	该条目的身份，与 presets 数据中的 value 逐字对应。
XhTimePickerPresetGroup	children	SlotChildren<TimePickerPresetsSlotProps>		自行铺设条目；未写时按 presets 数据自动铺设，两者产出的 DOM 一致。
XhTimePickerRoot	label	ReactNode		标题。不给 children 时铺 label 部件。
XhTimePickerRoot	children	SlotChildren<TimePickerRootSlotProps>		不给时照标准结构铺整套部件。
XhTimePickerSegment	segment	TimeSegmentType	是	段的身份由作者声明。
XhTimePickerTag	value	string	是	它代表哪个选中值。

状态

公开状态写入 data-state。

部件	取值
root	'open' | 'closed'
control	'open' | 'closed'
trigger	'open' | 'closed'
positioner	'open' | 'closed'
content	'open' | 'closed'
preset	'checked' | 'unchecked'
column	'open' | 'closed'
item	'checked' | 'unchecked'

以下名称仅用于内部状态机。

状态：open · closed

事件：OPEN · TOGGLE · CLOSE · CONTROLLED.OPEN · CONTROLLED.CLOSE · VALUE.SET · VALUE.ADD · VALUE.REMOVE · VALUE.TOGGLE · TAG_LIST.TRACKED · VALUE.CLEAR · SEGMENT.STEP · SEGMENT.DIGIT · SEGMENT.CLEAR · SEGMENT.PERIOD · SEGMENT.FOCUS · SEGMENT.BLUR · OPTION.FOCUS · ITEM.SELECT · FORM.RESET · PRESS.START · PRESS.END

判据：isOpenControlled · canEdit · closesOnPreset · canPress

connect API

getXxxProps() 返回对应部件的宿主属性。

成员	类型	说明
open	boolean
value	string[]	选中的时刻，ISO 时间串数组；单选至多一项，任一必填段为空时为空数组。
selectionMode	TimePickerSelectionMode
draftValue	string	多选时浮层里拼着的草稿（填全了才有，否则空串）；单选时就是当前值。
empty	boolean	没有选中值（单选时还没填全也算）。
outOfRange	boolean	已填全但落在 min / max 之外。只是标注，不改写值。
disabled	boolean
readOnly	boolean
invalid	boolean
hourCycle	TimeHourCycle	实际生效的小时制（prop 未提供时由 locale 推断的值）。
granularity	TimeGranularity
timeStep	ResolvedTimeStep	实际生效的按单位步进。
segments	TimeSegmentType[]	当前参与显示的段，文档序。未列入的段由 connect 写上 hidden 收起。
focusedSegment	TimeSegmentType | null	焦点所在段；焦点在分段输入外时为 null。
columns	TimePickerColumn[]	当前应排列的列及每列的可选值（已按 timeStep 取样、按 min / max 裁剪）。作者据此渲染浮层。
focusedColumn	TimePickerColumnUnit | null
focusedItem	string | null
presets	readonly TimePickerPresetState[]	快捷选项逐条的状态，数据顺序。未提供 presets 时为空数组。
canClear	boolean	清空按钮当前是否可按。
canAdd	boolean	多选时「添加」此刻可按：草稿填全、在 min / max 之内、还没选过、也没到 maxSelected。
tags	TimePickerTagMeta[]	多选时可见的标签（受 maxTagCount 截断），与 value 同序；单选恒为空数组。
overflowCount	number	被 maxTagCount 折叠的标签数。
overflowText	string	+N 标签显示的文字（由 translations.overflowTag 计算）；没有折叠的标签时为空串。
translations	TimePickerTranslations	解析后的文案：作者给的 translations 盖在当前语言包上。
getSegmentText	(props: TimePickerSegmentProps) => string	某一段应显示的文字（空段是占位串）。各适配器都用它填充文本，保证同构。
getItemText	(props: TimePickerItemProps) => string	某一格应显示的文字。数字列即格子自身的值，上下午列按 locale 给出「上午 / 下午」。 各适配器都用它填充文本，保证同构。
isItemSelected	(props: TimePickerItemProps) => boolean
isItemDisabled	(props: TimePickerItemProps) => boolean	落在 min / max 之外（或整个控件禁用）：仍在列表中，但不可选、方向键跳过。
setOpen	(next: boolean) => void
setValue	(next: string[]) => void
clear	() => void
add	() => void	多选：把草稿收进值（与按「添加」同一条路）。
deselect	(value: string) => void	多选：摘掉一个选中值。
getRootProps	() => T['element']
getLabelProps	() => T['label']
getControlProps	() => T['element']
getTagListProps	() => T['element']	标签行：多选时放在盒里，收纳可见标签与 +N 标签；没有选中时整体留空。单选时整体 hidden。
getTagProps	(props: TimePickerTagProps) => T['element']	标签：一个选中值一个，即库内 tag 的 root（data-scope="tag"），另带 data-value。
getTagLabelProps	() => T['element']	标签文字所在的块（tag 的 label）；标签与 +N 共用。
getOverflowTagProps	() => T['element']	被折叠的标签合成的一个：同样是 tag 的 root，显示 overflowText、带 data-count；没有折叠的标签时 hidden。
getItemDeleteTriggerProps	(props: TimePickerTagProps) => T['button']	标签删除按钮：即所在标签那份 tag 的 close-trigger，可及名使用 translations.deleteItem；不占 Tab 位、按下不夺焦。
getSegmentGroupProps	() => T['element']	段位与分隔符的外壳：占满盒内剩余宽度，把尾部按钮推到框内末端；多选时整体 hidden。
getSegmentProps	(props: TimePickerSegmentProps) => T['element']	分段输入：一段一个节点，与 TimeField 的段同构（role=spinbutton + roving tabindex）。
getTriggerProps	() => T['button']
getClearTriggerProps	() => T['button']
getPositionerProps	() => T['element']
getContentProps	() => T['element']
getPresetGroupProps	() => T['element']	快捷选项列（role=listbox）；未提供 presets 时带 hidden。
getPresetProps	(props: TimePickerPresetProps) => T['element']	一条快捷选项（role=option）：点击把整份时间写入值并收起浮层。
getColumnProps	(props: TimePickerColumnProps) => T['element']
getItemProps	(props: TimePickerItemProps) => T['element']
getFooterProps	() => T['element']	浮层底部的操作区：放在 content 中、排在各列之后，「添加」钮通常写在这里；不进入任何集合的拥有关系，方向键也无法到达。
getConfirmTriggerProps	() => T['button']	「添加」：多选时把浮层里拼好的草稿收进值，浮层不收起；单选时 hidden。文字由作者写。
getHiddenInputProps	(props?: TimePickerHiddenInputProps) => T['input']	表单出口：一份 type=hidden 的原生输入，随表单提交 ISO 串。 多选时一个选中值一份同名输入：传 { value } 产出那一份，不传是首个选中值那一份。

无障碍

键盘

规格出处：W3C APG

按键	生效条件	行为
Backspace	focus in trigger, multiple, 有选中值, not disabled/readOnly	摘掉最后一个选中值（标签行末尾那一枚）；多选时段位不出现，触发钮就是键盘入口
ArrowDown / ArrowUp	focus in trigger, closed, not disabled	展开浮层，焦点落到时列（已选的时仍可选就停在它上面，否则停在首格）
Enter / Space	focus in trigger, not disabled	按钮的默认激活即展开/收起（不额外拦键，否则会一开一关）
ArrowDown	open, focus in 某一列	列内下移一格，到尾回绕；被 min/max 裁掉的格自动跳过
ArrowUp	open, focus in 某一列	列内上移一格，到头回绕；被 min/max 裁掉的格自动跳过
Home	open, focus in 某一列	焦点移到本列首格
End	open, focus in 某一列	焦点移到本列末格
ArrowRight	open	换到下一列并落在该列的锚点上；已在末列则不动，不回绕
ArrowLeft	open	换到上一列并落在该列的锚点上；已在首列则不动，不回绕
Enter / Space	open, 焦点停在可选的格上, not disabled/readOnly	把这一格写进对应的段；浮层不收起（其余列还要接着挑）
ArrowUp / ArrowDown / Home / End	open, focus in 快捷选项列	在快捷选项之间移动焦点，到头回绕；时分秒那几列的处理器在这一列内不参与
Enter / Space	open, focus in 某条快捷选项, not disabled/readOnly	把这条快捷选项整份写进值并收起浮层
Escape	open	收起浮层并把焦点归还触发器，值不变
Tab / Shift+Tab	open	不拦按键：焦点按 Tab 序列在各列、快捷选项列与底栏之间走，浮层不收；走出浮层后随即收起且不抢回焦点
ArrowUp	focus in 某一段, not disabled/readOnly	本段加一格，到头回绕；空段落到该段下界
ArrowDown	focus in 某一段, not disabled/readOnly	本段减一格，到头回绕；空段落到该段上界
ArrowRight	focus in 某一段, not disabled	焦点移到下一段；已在末段则不动，不回绕
ArrowLeft	focus in 某一段, not disabled	焦点移到上一段；已在首段则不动，不回绕
Home	focus in 某一段, not disabled	焦点移到首段
End	focus in 某一段, not disabled	焦点移到末段
0-9	focus in 数字段, not disabled/readOnly	把数字并进本段；本段再吃不下第二位时自动跳到下一段
Backspace / Delete	focus in 某一段, not disabled/readOnly	清掉本段；小时被清时上下午段仍保留原来的上午/下午
a / p	focus in 上下午段, 12 小时制, not disabled/readOnly	a 取上午、p 取下午（不区分大小写）
Alt+ArrowDown	focus in 某一段, closed, not disabled	展开浮层并把焦点移入；触发按钮是可选部件，键盘入口不能只挂在它上面
Enter	focus in 某一段, open	收起浮层。段位里敲出来的值不触发「选完即收」（那时人还在打字），这是那条路的收口手势
Enter / Space	held on trigger（not disabled）、clear-trigger（可清）、preset 或 item（open, not disabled/readOnly, 该条可按）	按住期间该部件投影 data-pressed，与指针 :active 同一副按压面；抬起或失焦撤下，浮层收起时一并撤下

ARIA

以下属性由 connect 生成。

部件	属性	值
control	aria-disabled	'true' | 'false'
control	aria-invalid	'true' | 'false'
control	aria-label	props.ariaLabel
control	aria-labelledby	label 部件的 id | undefined
control	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(draft, segment, hourCycle)
segment	aria-valuetext	timeSegmentText(draft, segment, { hourCycle, locale })
segment	role	'spinbutton'
trigger	aria-controls	content 部件的 id
trigger	aria-expanded	'true' | 'false'
trigger	aria-haspopup	'dialog'
trigger	aria-label	props.ariaLabel
trigger	aria-labelledby	label 部件的 id | undefined
clear-trigger	aria-label	translations.clearTrigger
content	aria-hidden	!open || undefined
content	aria-label	props.ariaLabel
content	aria-labelledby	label 部件的 id | 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	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'

样式参考

皮肤

@xihan-ui/styles/time-picker.css 按 [data-scope="time-picker"][data-part="root"] 部件选择器书写，发布产物以挂载类 .xh-scope-time-picker 代替其中的 data-scope（特异性相同），位于 xihan.components 与 xihan.motion 层。覆盖样式使用 xihan.overrides，部件选择器照常可用。

forced-colors: active 下另有一套规则：颜色交给系统，边框与状态标记改用系统色关键字。

数据属性

由 connect 生成；条件不成立时不输出无值属性。

部件	属性	值
root	data-disabled	''（条件成立时才出现）
root	data-empty	''（条件成立时才出现）
root	data-invalid	''（条件成立时才出现）
root	data-out-of-range	''（条件成立时才出现）
root	data-readonly	''（条件成立时才出现）
root	data-size	props.size
root	data-state	'open' | 'closed'
root	data-tone	props.tone
root	data-variant	props.variant
label	data-disabled	''（条件成立时才出现）
control	data-disabled	''（条件成立时才出现）
control	data-empty	''（条件成立时才出现）
control	data-invalid	''（条件成立时才出现）
control	data-readonly	''（条件成立时才出现）
control	data-state	'open' | 'closed'
control	data-variant	props.variant
control	data-xh-action-owner	''
control	data-xh-field-chrome	''
control	data-xh-field-layout	'multi-tag' | undefined
control	data-xh-field-size	props.size
tag-list	data-disabled	''（条件成立时才出现）
tag-list	data-instant	''（条件成立时才出现）
tag-list	data-placeholder-shown	''（条件成立时才出现）
tag-list	data-placeholder-text	props.placeholder | undefined | undefined
tag-list	data-xh-tag-list	''
segment-group	data-disabled	''（条件成立时才出现）
segment-group	data-invalid	''（条件成立时才出现）
segment-group	data-placeholder-shown	''（条件成立时才出现）
segment-group	data-placeholder-text	props.placeholder | undefined
segment-group	data-readonly	''（条件成立时才出现）
segment	data-disabled	''（条件成立时才出现）
segment	data-focus	''（条件成立时才出现）
segment	data-invalid	''（条件成立时才出现）
segment	data-placeholder	''（条件成立时才出现）
segment	data-readonly	''（条件成立时才出现）
trigger	data-disabled	''（条件成立时才出现）
trigger	data-pressed	''（条件成立时才出现）
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	''（条件成立时才出现）
clear-trigger	data-xh-action-control	''
clear-trigger	data-xh-action-display	'has-value'
clear-trigger	data-xh-action-has-value	''（条件成立时才出现）
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	''（条件成立时才出现）
positioner	data-placement	定位引擎算出的实际落位
positioner	data-positioned	''（条件成立时才出现）
positioner	data-size	props.size
positioner	data-state	'open' | 'closed'
positioner	data-tone	props.tone
positioner	data-variant	props.variant
content	data-instant	''（条件成立时才出现）
content	data-placement	定位引擎算出的实际落位
content	data-state	'open' | 'closed'
preset	data-disabled	''（条件成立时才出现）
preset	data-pressed	''（条件成立时才出现）
preset	data-state	'checked' | 'unchecked'
preset	data-xh-collection-context	'overlay'
preset	data-xh-collection-item	''
preset	data-xh-collection-size	props.size
column	data-disabled	''（条件成立时才出现）
column	data-state	'open' | 'closed'
item	data-disabled	''（条件成立时才出现）
item	data-highlighted	''（条件成立时才出现）
item	data-pressed	''（条件成立时才出现）
item	data-state	'checked' | 'unchecked'
item	data-xh-collection-context	'overlay'
item	data-xh-collection-item	''
item	data-xh-collection-size	props.size
confirm-trigger	data-disabled	''（条件成立时才出现）
confirm-trigger	data-pressed	''（条件成立时才出现）
confirm-trigger	data-xh-action-control	''
confirm-trigger	data-xh-action-display	'always'
confirm-trigger	data-xh-action-profile	'text'
confirm-trigger	data-xh-action-size	'xs'
confirm-trigger	data-xh-action-variant	'solid'
confirm-trigger	data-xh-ink-surface	''
overflow-tag	data-count	String(overflowCount)
tag	data-value	v

CSS 变量

本组件公开覆盖槽由独立皮肤的实际消费位生成；默认来源、作用部件和状态均与 CSS 同源。

变量	部件	CSS 属性	状态	默认来源	说明
--xh-time-picker-action-bg	clear-trigger trigger	--xh-ink-surface background-color	default xh-ink-surface	--xh-_action-variant-bg-rest	time-picker 的 clear-trigger、trigger 部件 --xh-ink-surface、background-color 覆盖槽。
--xh-time-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	time-picker 的 clear-trigger、trigger 部件 background-color 覆盖槽。
--xh-time-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	time-picker 的 clear-trigger、trigger 部件 --xh-ink-surface、background-color 覆盖槽。
--xh-time-picker-action-fg	clear-trigger trigger	color	default	--xh-fg-field-clear --xh-fg-muted	time-picker 的 clear-trigger、trigger 部件 color 覆盖槽。
--xh-time-picker-action-fg-hover	clear-trigger trigger	color	disabled hover loading not([data-disabled]) not([data-loading]) state=open	--xh-fg-default	time-picker 的 clear-trigger、trigger 部件 color 覆盖槽。
--xh-time-picker-action-font-size	clear-trigger trigger	font-size	default	--xh-text-secondary-size	time-picker 的 clear-trigger、trigger 部件 font-size 覆盖槽。
--xh-time-picker-action-radius	clear-trigger trigger	border-radius	default	--xh-shape-circle --xh-shape-inset	time-picker 的 clear-trigger、trigger 部件 border-radius 覆盖槽。
--xh-time-picker-action-size	clear-trigger trigger	block-size inline-size min-inline-size	default xh-action-profile=field-inset	--xh-_action-profile-visual-size	time-picker 的 clear-trigger、trigger 部件 block-size、inline-size、min-inline-size 覆盖槽。
--xh-time-picker-column-divider	column preset-group	border-inline-end border-inline-start	default	--xh-material-solid-border	time-picker 的 column、preset-group 部件 border-inline-end、border-inline-start 覆盖槽。
--xh-time-picker-column-gap	column item	gap inset-block	default	--xh-space-2	time-picker 的 column、item 部件 gap、inset-block 覆盖槽。
--xh-time-picker-column-h	column	block-size padding-block	default	--xh-overlay-time-column-h	time-picker 的 column 部件 block-size、padding-block 覆盖槽。
--xh-time-picker-column-min-w	column	min-inline-size	default	--xh-overlay-time-column-w	time-picker 的 column 部件 min-inline-size 覆盖槽。
--xh-time-picker-column-px	column	padding-inline	default	--xh-space-1	time-picker 的 column 部件 padding-inline 覆盖槽。
--xh-time-picker-column-py	column	padding-block	default	--xh-space-1	time-picker 的 column 部件 padding-block 覆盖槽。
--xh-time-picker-confirm-trigger-bg	confirm-trigger	--xh-ink-surface background-color	default xh-ink-surface	--xh-_action-variant-bg-rest	time-picker 的 confirm-trigger 部件 --xh-ink-surface、background-color 覆盖槽。
--xh-time-picker-confirm-trigger-bg-active	confirm-trigger	background-color	disabled is(:active, [data-pressed]) loading not([data-disabled]) not([data-loading]) pressed	--xh-_action-variant-bg-pressed	time-picker 的 confirm-trigger 部件 background-color 覆盖槽。
--xh-time-picker-confirm-trigger-bg-hover	confirm-trigger	background-color	disabled hover loading not([data-disabled]) not([data-loading])	--xh-_action-variant-bg-hover	time-picker 的 confirm-trigger 部件 background-color 覆盖槽。
--xh-time-picker-confirm-trigger-fg	confirm-trigger	color	default disabled hover is(:active, [data-pressed]) loading not([data-disabled]) not([data-loading]) pressed	--xh-_action-variant-fg-hover --xh-_action-variant-fg-pressed --xh-_action-variant-fg-rest	time-picker 的 confirm-trigger 部件 color 覆盖槽。
--xh-time-picker-confirm-trigger-font-size	confirm-trigger	font-size	default	--xh-text-caption-size	time-picker 的 confirm-trigger 部件 font-size 覆盖槽。
--xh-time-picker-confirm-trigger-h	confirm-trigger	block-size inline-size	default xh-action-profile=field-inset	--xh-_action-profile-visual-size	time-picker 的 confirm-trigger 部件 block-size、inline-size 覆盖槽。
--xh-time-picker-confirm-trigger-margin	confirm-trigger content	margin	default	--xh-space-2	time-picker 的 confirm-trigger、content 部件 margin 覆盖槽。
--xh-time-picker-confirm-trigger-px	confirm-trigger	padding-inline	default	--xh-space-2	time-picker 的 confirm-trigger 部件 padding-inline 覆盖槽。
--xh-time-picker-confirm-trigger-radius	confirm-trigger	border-radius	default	--xh-shape-control	time-picker 的 confirm-trigger 部件 border-radius 覆盖槽。
--xh-time-picker-confirm-trigger-shadow	confirm-trigger	box-shadow	default disabled hover is(:active, [data-pressed]) loading not([data-disabled]) not([data-loading]) pressed	none	time-picker 的 confirm-trigger 部件 box-shadow 覆盖槽。
--xh-time-picker-content-bg	content	background	default	--xh-bg-surface	time-picker 的 content 部件 background 覆盖槽。
--xh-time-picker-content-border	content	border	default	--xh-border-default	time-picker 的 content 部件 border 覆盖槽。
--xh-time-picker-content-fg	content	color	default	--xh-fg-default	time-picker 的 content 部件 color 覆盖槽。
--xh-time-picker-content-max-h	content	max-block-size	default	none	time-picker 的 content 部件 max-block-size 覆盖槽。
--xh-time-picker-content-px	content	padding-inline	default	--xh-space-0	time-picker 的 content 部件 padding-inline 覆盖槽。
--xh-time-picker-content-py	content	padding-block	default	--xh-space-0	time-picker 的 content 部件 padding-block 覆盖槽。
--xh-time-picker-content-radius	content	border-radius	default	--xh-shape-overlay	time-picker 的 content 部件 border-radius 覆盖槽。
--xh-time-picker-content-shadow	content	box-shadow	default	--xh-elevation-floating	time-picker 的 content 部件 box-shadow 覆盖槽。
--xh-time-picker-control-bg	control	background-color	xh-field-chrome	--xh-_field-variant-bg-rest	time-picker 的 control 部件 background-color 覆盖槽。
--xh-time-picker-control-bg-disabled	control	background-color	disabled xh-field-chrome	--xh-_field-variant-bg-disabled	time-picker 的 control 部件 background-color 覆盖槽。
--xh-time-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	time-picker 的 control 部件 background-color 覆盖槽。
--xh-time-picker-control-bg-readonly	control	background-color	readonly xh-field-chrome	--xh-_field-variant-bg-read-only	time-picker 的 control 部件 background-color 覆盖槽。
--xh-time-picker-control-border	control	border	xh-field-chrome	--xh-_field-variant-border-rest	time-picker 的 control 部件 border 覆盖槽。
--xh-time-picker-control-border-focus	control	border-color box-shadow	disabled focus-within not([data-disabled]) xh-field-chrome	--xh-_field-variant-border-focus	time-picker 的 control 部件 border-color、box-shadow 覆盖槽。
--xh-time-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	time-picker 的 control 部件 border-color 覆盖槽。
--xh-time-picker-control-border-invalid	control	border-color	invalid xh-field-chrome	--xh-_field-variant-border-invalid	time-picker 的 control 部件 border-color 覆盖槽。
--xh-time-picker-control-fg	control	color	xh-field-chrome	--xh-fg-default	time-picker 的 control 部件 color 覆盖槽。
--xh-time-picker-control-gap	control	gap	xh-field-chrome	--xh-_time-picker-gap	time-picker 的 control 部件 gap 覆盖槽。
--xh-time-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-picker-control-h	time-picker 的 control 部件 block-size、min-block-size 覆盖槽。
--xh-time-picker-control-max-h	control	max-block-size	xh-field-layout=multi-tag	--xh-viewport-h-sm	time-picker 的 control 部件 max-block-size 覆盖槽。
--xh-time-picker-control-min-w	control root	min-inline-size	default xh-field-chrome	--xh-control-min-w	time-picker 的 control、root 部件 min-inline-size 覆盖槽。
--xh-time-picker-control-px	control	padding-inline	xh-field-chrome	--xh-_time-picker-control-px	time-picker 的 control 部件 padding-inline 覆盖槽。
--xh-time-picker-control-radius	control	border-radius	xh-field-chrome	--xh-shape-control	time-picker 的 control 部件 border-radius 覆盖槽。
--xh-time-picker-control-shadow	control	box-shadow	xh-field-chrome	none	time-picker 的 control 部件 box-shadow 覆盖槽。
--xh-time-picker-control-w	root	inline-size min-inline-size	default	--xh-control-w	time-picker 的 root 部件 inline-size、min-inline-size 覆盖槽。
--xh-time-picker-font-size	control	font-size	default	--xh-_time-picker-font-size	time-picker 的 control 部件 font-size 覆盖槽。
--xh-time-picker-footer-border	footer	border-block-start	default	--xh-material-solid-border	time-picker 的 footer 部件 border-block-start 覆盖槽。
--xh-time-picker-footer-fg	footer	color	default	--xh-fg-muted	time-picker 的 footer 部件 color 覆盖槽。
--xh-time-picker-footer-font-size	footer	font-size	default	--xh-text-caption-size	time-picker 的 footer 部件 font-size 覆盖槽。
--xh-time-picker-footer-gap	footer	gap inline-size	default	--xh-space-2	time-picker 的 footer 部件 gap、inline-size 覆盖槽。
--xh-time-picker-footer-px	footer	inline-size	default	--xh-space-2	time-picker 的 footer 部件 inline-size 覆盖槽。
--xh-time-picker-footer-py	footer	padding-block	default	--xh-space-2	time-picker 的 footer 部件 padding-block 覆盖槽。
--xh-time-picker-gap	label root	gap margin-block-end	default	--xh-space-1	time-picker 的 label、root 部件 gap、margin-block-end 覆盖槽。
--xh-time-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	time-picker 的 control、positioner、root 部件 --xh-icon-size 覆盖槽。
--xh-time-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	time-picker 的 item 部件 background-color 覆盖槽。
--xh-time-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	time-picker 的 item 部件 background-color 覆盖槽。
--xh-time-picker-item-check-fg	item	background-color	default	--xh-_time-picker-check-fg	time-picker 的 item 部件 background-color 覆盖槽。
--xh-time-picker-item-check-size	item	block-size inline-size padding-inline	default	--xh-control-indicator-size	time-picker 的 item 部件 block-size、inline-size、padding-inline 覆盖槽。
--xh-time-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	time-picker 的 item 部件 color 覆盖槽。
--xh-time-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-picker-item-fg	time-picker 的 item 部件 color 覆盖槽。
--xh-time-picker-item-font-size	item	font-size	default	--xh-_time-picker-font-size	time-picker 的 item 部件 font-size 覆盖槽。
--xh-time-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	time-picker 的 item 部件 font-weight 覆盖槽。
--xh-time-picker-item-h	column item	block-size padding-block	default	--xh-control-action-size	time-picker 的 column、item 部件 block-size、padding-block 覆盖槽。
--xh-time-picker-item-px	item	padding-inline	default	--xh-space-0_5	time-picker 的 item 部件 padding-inline 覆盖槽。
--xh-time-picker-item-radius	item	border-radius	default	--xh-shape-inset	time-picker 的 item 部件 border-radius 覆盖槽。
--xh-time-picker-label-fg	label	color	default	--xh-fg-muted	time-picker 的 label 部件 color 覆盖槽。
--xh-time-picker-label-fg-disabled	label	color	disabled	--xh-fg-muted	time-picker 的 label 部件 color 覆盖槽。
--xh-time-picker-label-font-size	label	font-size	default	--xh-text-label-size	time-picker 的 label 部件 font-size 覆盖槽。
--xh-time-picker-label-font-weight	label	font-weight	default	--xh-text-label-weight	time-picker 的 label 部件 font-weight 覆盖槽。
--xh-time-picker-label-gap	label	margin-block-end	default	--xh-space-2	time-picker 的 label 部件 margin-block-end 覆盖槽。
--xh-time-picker-layer	positioner	z-index	default	--xh-_layer	time-picker 的 positioner 部件 z-index 覆盖槽。
--xh-time-picker-literal-fg	segment-group	color	not([data-scope])	--xh-fg-subtle	time-picker 的 segment-group 部件 color 覆盖槽。
--xh-time-picker-placeholder-fg	segment segment-group tag-list	color	placeholder placeholder-shown	--xh-fg-subtle	time-picker 的 segment、segment-group、tag-list 部件 color 覆盖槽。
--xh-time-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	time-picker 的 preset 部件 background-color 覆盖槽。
--xh-time-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	time-picker 的 preset 部件 background-color 覆盖槽。
--xh-time-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	time-picker 的 preset 部件 background-color 覆盖槽。
--xh-time-picker-preset-check-fg	preset	background-color	default	--xh-_time-picker-check-fg	time-picker 的 preset 部件 background-color 覆盖槽。
--xh-time-picker-preset-check-size	preset	block-size inline-size padding-inline-end	default	--xh-control-indicator-sm	time-picker 的 preset 部件 block-size、inline-size、padding-inline-end 覆盖槽。
--xh-time-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	time-picker 的 preset 部件 color 覆盖槽。
--xh-time-picker-preset-fg-disabled	preset	background-color color	default disabled	--xh-fg-disabled	time-picker 的 preset 部件 background-color、color 覆盖槽。
--xh-time-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	time-picker 的 preset 部件 color 覆盖槽。
--xh-time-picker-preset-font-size	preset	font-size	default	--xh-text-caption-size	time-picker 的 preset 部件 font-size 覆盖槽。
--xh-time-picker-preset-group-gap	preset-group	gap	default	--xh-space-1	time-picker 的 preset-group 部件 gap 覆盖槽。
--xh-time-picker-preset-group-h	preset-group	max-block-size	default	--xh-overlay-time-column-h	time-picker 的 preset-group 部件 max-block-size 覆盖槽。
--xh-time-picker-preset-group-px	preset-group	padding-inline	default	--xh-space-2	time-picker 的 preset-group 部件 padding-inline 覆盖槽。
--xh-time-picker-preset-group-py	preset-group	padding-block	default	--xh-space-2_5	time-picker 的 preset-group 部件 padding-block 覆盖槽。
--xh-time-picker-preset-h	preset	block-size line-height	default	--xh-control-action-size	time-picker 的 preset 部件 block-size、line-height 覆盖槽。
--xh-time-picker-preset-px	preset	inset-inline-end padding-inline padding-inline-end	default	--xh-space-2	time-picker 的 preset 部件 inset-inline-end、padding-inline、padding-inline-end 覆盖槽。
--xh-time-picker-preset-radius	preset	border-radius	default	--xh-shape-control	time-picker 的 preset 部件 border-radius 覆盖槽。
--xh-time-picker-segment-bg-focus	segment	background	disabled focus focus-visible not([data-disabled])	--xh-_time-picker-segment-bg	time-picker 的 segment 部件 background 覆盖槽。
--xh-time-picker-segment-bg-hover	segment	background	disabled focus hover not([data-focus], [data-disabled])	--xh-bg-subtle	time-picker 的 segment 部件 background 覆盖槽。
--xh-time-picker-segment-bg-invalid-focus	segment	background	focus invalid is([data-focus], :focus-visible)	--xh-bg-subtle	time-picker 的 segment 部件 background 覆盖槽。
--xh-time-picker-segment-fg-focus	segment	color	disabled focus focus-visible not([data-disabled]) placeholder	--xh-_time-picker-segment-fg	time-picker 的 segment 部件 color 覆盖槽。
--xh-time-picker-segment-fg-invalid	segment	color	invalid	--xh-fg-danger	time-picker 的 segment 部件 color 覆盖槽。
--xh-time-picker-segment-fg-invalid-focus	segment	color	focus invalid is([data-focus], :focus-visible)	--xh-fg-danger	time-picker 的 segment 部件 color 覆盖槽。
--xh-time-picker-segment-px	segment	padding-inline	default	--xh-space-0_5	time-picker 的 segment 部件 padding-inline 覆盖槽。
--xh-time-picker-segment-radius	segment	border-radius	default	--xh-shape-inset	time-picker 的 segment 部件 border-radius 覆盖槽。
--xh-time-picker-tag-list-gap	tag-list	gap	xh-tag-list	--xh-space-1	time-picker 的 tag-list 部件 gap 覆盖槽。

动效

动效角色：按压 · 状态 · 指示与换位 · 出现 · 列表（见动效规范）。

共享关键帧 xh-fade-in · xh-fade-out · xh-overlay-pop-in · xh-pop-in · xh-pop-out 由 family/motion.css 提供，皮肤 @import 它，单独引入仍成立；background-color · border-color · color · opacity · translate 走 transition 过渡。时长与缓动读动效令牌，改令牌即改全局节奏。

皮肤之外还有一段：退场由适配器的退场闸门把关，动画播完才真收起。

系统开启减弱动效时由令牌层统一收敛，皮肤不另作判断。

响应式

皮肤另按输入能力分档：hover: hover · hover: none：同一份皮肤在触屏与带指针的设备上不一样，与视口宽度无关。

RTL

皮肤用逻辑属性排布（inline-start 一族），dir="rtl" 下自动镜像。