@xihan-ui/styles 1.0.0-alpha.0

package/css/time-field.css

@@ -0,0 +1,200 @@
+@layer xihan.components {
+  /* 与文本框、数字框同一套堆叠：标签一行、控件一行 */
+  [data-scope='time-field'][data-part='root'] {
+    /* 尺寸档只换这四个私有槽，标题与控件都从 root 继承它们，换档不必给每个部件各写一条选择器 */
+    --xh-_time-field-control-h: var(--xh-control-h-md);
+    --xh-_time-field-control-px: var(--xh-control-px-md);
+    --xh-_time-field-font-size: var(--xh-text-body-size);
+    --xh-_time-field-label-font-size: var(--xh-text-label-size);
+    /* 形态档只换这三个私有槽：底色与两档描边 */
+    --xh-_time-field-control-bg: var(--xh-bg-canvas);
+    --xh-_time-field-control-border: var(--xh-border-default);
+    --xh-_time-field-control-border-hover: var(--xh-border-strong);
+    /* 聚焦描边与段位反白随语气走。没写 data-tone 时这几个 --xh-_tone* 没被声明，退回原来的焦点色与品牌色 */
+    --xh-_time-field-ring: var(--xh-ring-focus);
+    --xh-_time-field-segment-bg: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_time-field-segment-fg: var(--xh-_tone-on, var(--xh-fg-on-brand));
+
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--xh-time-field-gap, var(--xh-space-1));
+  }
+
+  /* —— 尺寸 —— */
+  [data-scope='time-field'][data-part='root'][data-size='sm'] {
+    --xh-_time-field-control-h: var(--xh-control-h-sm);
+    --xh-_time-field-control-px: var(--xh-control-px-sm);
+    --xh-_time-field-font-size: var(--xh-font-size-sm);
+    --xh-_time-field-label-font-size: var(--xh-font-size-sm);
+  }
+
+  [data-scope='time-field'][data-part='root'][data-size='lg'] {
+    --xh-_time-field-control-h: var(--xh-control-h-lg);
+    --xh-_time-field-control-px: var(--xh-control-px-lg);
+    --xh-_time-field-font-size: var(--xh-font-size-lg);
+    --xh-_time-field-label-font-size: var(--xh-font-size-lg);
+  }
+
+  /* —— 形态 —— */
+  /* 描边式：与缺省等价，写出来是为了三档形态在皮肤里都看得见 */
+  [data-scope='time-field'][data-part='root'][data-variant='outline'] {
+    --xh-_time-field-control-bg: var(--xh-bg-canvas);
+    --xh-_time-field-control-border: var(--xh-border-default);
+    --xh-_time-field-control-border-hover: var(--xh-border-strong);
+  }
+
+  /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
+  [data-scope='time-field'][data-part='root'][data-variant='subtle'] {
+    --xh-_time-field-control-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_time-field-control-border: transparent;
+    --xh-_time-field-control-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  }
+
+  /* 无框式：底与边都让开，可见反馈只剩聚焦那一档 */
+  [data-scope='time-field'][data-part='root'][data-variant='ghost'] {
+    --xh-_time-field-control-bg: transparent;
+    --xh-_time-field-control-border: transparent;
+    --xh-_time-field-control-border-hover: transparent;
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  [data-scope='time-field'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='time-field'][data-part='label'] {
+    color: var(--xh-time-field-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-time-field-label-font-size, var(--xh-_time-field-label-font-size));
+    font-weight: var(--xh-time-field-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+    /* 点标题会把焦点送到第一段（段不是能被 for 指向的原生控件，这条由连接层接管），
+       指针得如实反映它可点 */
+    cursor: pointer;
+  }
+
+  [data-scope='time-field'][data-part='label'][data-disabled] {
+    color: var(--xh-time-field-label-fg-disabled, var(--xh-fg-subtle));
+    cursor: not-allowed;
+  }
+
+  /* 几段合起来看着像一个输入框：边框、高度、内边距全长在 control 上，
+     段自己只管一小块可聚焦的高亮区 */
+  [data-scope='time-field'][data-part='control'] {
+    display: inline-flex;
+    align-items: center;
+    block-size: var(--xh-time-field-control-h, var(--xh-_time-field-control-h));
+    padding-inline: var(--xh-time-field-control-px, var(--xh-_time-field-control-px));
+    padding-block: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-time-field-control-border, var(--xh-_time-field-control-border));
+    border-radius: var(--xh-time-field-control-radius, var(--xh-shape-control));
+    background: var(--xh-time-field-control-bg, var(--xh-_time-field-control-bg));
+    color: var(--xh-time-field-control-fg, var(--xh-fg-default));
+    /* 表单控件不继承页面字体，只给字号会让它用 UA 默认字族，与周围文本对不上 */
+    font-family: inherit;
+    font-size: var(--xh-time-field-font-size, var(--xh-_time-field-font-size));
+    /* 等宽数字：各位字宽不一时逐段填入会让整行左右跳 */
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-normal);
+    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='time-field'][data-part='control'][hidden] {
+    display: none;
+  }
+
+  /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
+  [data-scope='time-field'][data-part='control']:hover:not([data-disabled], [data-invalid]) {
+    border-color: var(--xh-time-field-control-border-hover, var(--xh-_time-field-control-border-hover));
+  }
+
+  /* 焦点真正落在段上，但整块看起来才是一个控件：段内有焦点时整框亮起来。
+     control 自己不占 Tab 位，所以这里写的是 focus-within 而不是 focus-visible */
+  [data-scope='time-field'][data-part='control']:focus-within:not([data-disabled]) {
+    border-color: var(--xh-time-field-control-border-focus, var(--xh-_time-field-ring));
+  }
+
+  [data-scope='time-field'][data-part='control'][data-invalid] {
+    border-color: var(--xh-time-field-control-border-invalid, var(--xh-color-danger-500));
+  }
+
+  /* 只读仍可聚焦、可换段，所以不置灰，只把底色压下去表示"改不动" */
+  [data-scope='time-field'][data-part='control'][data-readonly] {
+    background: var(--xh-time-field-control-bg-readonly, var(--xh-bg-subtle));
+  }
+
+  /* control 是个 div，没有 :disabled 可用；禁用态由连接层的 data-disabled 表达 */
+  [data-scope='time-field'][data-part='control'][data-disabled] {
+    background: var(--xh-time-field-control-bg-disabled, var(--xh-bg-subtle));
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 段是一小块可聚焦区，紧挨着排；分隔符由作者写在段与段之间的普通节点里，
+     不在角色表内，所以间距只能长在段自己身上 */
+  [data-scope='time-field'][data-part='segment'] {
+    display: inline-block;
+    padding-inline: var(--xh-time-field-segment-px, var(--xh-space-0_5));
+    padding-block: 0;
+    border-radius: var(--xh-time-field-segment-radius, var(--xh-radius-sm));
+    color: inherit;
+    font-variant-numeric: inherit;
+    text-align: center;
+    /* 段是 role=spinbutton 的展示节点，双击选中一段文字只会碍事 */
+    user-select: none;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* granularity / hourCycle 关掉的段由连接层打 hidden；上面那条 display 会把 UA 规则盖掉，
+     少了这条，收起的段会一直杵在那儿 */
+  [data-scope='time-field'][data-part='segment'][hidden] {
+    display: none;
+  }
+
+  /* 还没填的段压成弱色：一行里哪几段是占位符，一眼要看得出来 */
+  [data-scope='time-field'][data-part='segment'][data-placeholder] {
+    color: var(--xh-time-field-segment-fg-placeholder, var(--xh-fg-subtle));
+  }
+
+  /* 一行段长得差不多，光有边框亮起来看不出正在改哪一段：当前段必须自己有底色。
+     data-focus 由机器给（它知道谁是当前段），:focus-visible 兜住机器状态还没回流的那一帧，
+     两条同时写不冲突 */
+  [data-scope='time-field'][data-part='segment'][data-focus]:not([data-disabled]),
+  [data-scope='time-field'][data-part='segment']:focus-visible {
+    background: var(--xh-time-field-segment-bg-focus, var(--xh-_time-field-segment-bg));
+    color: var(--xh-time-field-segment-fg-focus, var(--xh-_time-field-segment-fg));
+    outline: none;
+  }
+
+  /* 选中态用了品牌底色之后，占位符那条弱色会被它盖住，这里明确让位给焦点态 */
+  [data-scope='time-field'][data-part='segment'][data-focus][data-placeholder]:not([data-disabled]) {
+    color: var(--xh-time-field-segment-fg-focus, var(--xh-_time-field-segment-fg));
+  }
+
+  [data-scope='time-field'][data-part='segment']:hover:not([data-focus], [data-disabled]) {
+    background: var(--xh-time-field-segment-bg-hover, var(--xh-bg-subtle-hover));
+  }
+
+  /* 段是集合条目形态（role=spinbutton 的 span），禁用走 data-disabled 而不是 :disabled */
+  [data-scope='time-field'][data-part='segment'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 连接层把它写成 type=hidden，UA 自己就不渲染；这里的视觉隐藏是给元素升级前那一瞬兜底
+     （作者手写的是一个普通 input，升级完成前它是可见的文本框）。
+     刻意不写 display：写了反而会盖掉 UA 对 type=hidden 的收起，把它显出来 */
+  [data-scope='time-field'][data-part='hidden-input'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+}

package/css/time-picker.css

@@ -0,0 +1,347 @@
+@layer xihan.components {
+  /* 与文本框、时间输入同一套堆叠：标签一行、控件一行 */
+  [data-scope='time-picker'][data-part='root'] {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--xh-time-picker-gap, var(--xh-space-1));
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  [data-scope='time-picker'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='time-picker'][data-part='label'] {
+    color: var(--xh-time-picker-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-time-picker-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-time-picker-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+    /* 点标题会把焦点送到第一段（段不是能被 for 指向的原生控件，这条由连接层接管），
+       指针得如实反映它可点 */
+    cursor: pointer;
+  }
+
+  [data-scope='time-picker'][data-part='label'][data-disabled] {
+    color: var(--xh-time-picker-label-fg-disabled, var(--xh-fg-subtle));
+    cursor: not-allowed;
+  }
+
+  /* 画成一个框的是 control：几段文字、展开按钮、清空按钮要看起来是一体的，
+     边框长在其中任何一个身上都会把另外几个割在框外 */
+  [data-scope='time-picker'][data-part='control'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-time-picker-control-gap, var(--xh-control-gap-md));
+    block-size: var(--xh-time-picker-control-h, var(--xh-control-h-md));
+    padding-inline: var(--xh-time-picker-control-px, var(--xh-control-px-md));
+    padding-block: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-time-picker-control-border, var(--xh-border-default));
+    border-radius: var(--xh-time-picker-control-radius, var(--xh-shape-control));
+    background: var(--xh-time-picker-control-bg, var(--xh-bg-canvas));
+    color: var(--xh-time-picker-control-fg, var(--xh-fg-default));
+    /* 表单控件不继承页面字体，只给字号会让它用 UA 默认字族，与周围文本对不上 */
+    font-family: inherit;
+    font-size: var(--xh-time-picker-font-size, var(--xh-text-body-size));
+    /* 等宽数字：各位字宽不一时逐段填入会让整行左右跳 */
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-normal);
+    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='time-picker'][data-part='control'][hidden] {
+    display: none;
+  }
+
+  /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
+  [data-scope='time-picker'][data-part='control']:hover:not([data-disabled], [data-invalid]) {
+    border-color: var(--xh-time-picker-control-border-hover, var(--xh-border-strong));
+  }
+
+  /* 焦点真正落在段或按钮上，但整块看起来才是一个控件：内部有焦点时整框亮起来。
+     control 自己不占 Tab 位，所以这里写的是 focus-within 而不是 focus-visible */
+  [data-scope='time-picker'][data-part='control']:focus-within:not([data-disabled]) {
+    border-color: var(--xh-time-picker-control-border-focus, var(--xh-ring-focus));
+  }
+
+  [data-scope='time-picker'][data-part='control'][data-invalid] {
+    border-color: var(--xh-time-picker-control-border-invalid, var(--xh-color-danger-500));
+  }
+
+  /* 只读仍可聚焦、可换段，所以不置灰，只把底色压下去表示"改不动" */
+  [data-scope='time-picker'][data-part='control'][data-readonly] {
+    background: var(--xh-time-picker-control-bg-readonly, var(--xh-bg-subtle));
+  }
+
+  /* control 是个 div，没有 :disabled 可用；禁用态由连接层的 data-disabled 表达 */
+  [data-scope='time-picker'][data-part='control'][data-disabled] {
+    background: var(--xh-time-picker-control-bg-disabled, var(--xh-bg-subtle));
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 每一段是一小块可聚焦区，紧挨着排；分隔符由作者写在段与段之间的普通节点里，
+     不在角色表内，所以间距只能长在段自己身上 */
+  [data-scope='time-picker'][data-part='input'] {
+    display: inline-block;
+    padding-inline: var(--xh-time-picker-segment-px, var(--xh-space-0_5));
+    padding-block: 0;
+    border-radius: var(--xh-time-picker-segment-radius, var(--xh-radius-sm));
+    color: inherit;
+    font-variant-numeric: inherit;
+    text-align: center;
+    /* 段是 role=spinbutton 的展示节点，双击选中一段文字只会碍事 */
+    user-select: none;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* granularity / hourCycle 关掉的段由连接层打 hidden；上面那条 display 会把 UA 规则盖掉，
+     少了这条，收起的段会一直杵在那儿 */
+  [data-scope='time-picker'][data-part='input'][hidden] {
+    display: none;
+  }
+
+  /* 还没填的段压成弱色：一行里哪几段是占位符，一眼要看得出来 */
+  [data-scope='time-picker'][data-part='input'][data-placeholder] {
+    color: var(--xh-time-picker-segment-fg-placeholder, var(--xh-fg-subtle));
+  }
+
+  /* 一行段长得差不多，光有边框亮起来看不出正在改哪一段：当前段必须自己有底色。
+     data-focus 由机器给（它知道谁是当前段），:focus-visible 兜住机器状态还没回流的那一帧 */
+  [data-scope='time-picker'][data-part='input'][data-focus]:not([data-disabled]),
+  [data-scope='time-picker'][data-part='input']:focus-visible {
+    background: var(--xh-time-picker-segment-bg-focus, var(--xh-bg-brand));
+    color: var(--xh-time-picker-segment-fg-focus, var(--xh-fg-on-brand));
+    outline: none;
+  }
+
+  /* 焦点态用了品牌底色之后，占位符那条弱色会被它盖住，这里明确让位给焦点态 */
+  [data-scope='time-picker'][data-part='input'][data-focus][data-placeholder]:not([data-disabled]) {
+    color: var(--xh-time-picker-segment-fg-focus, var(--xh-fg-on-brand));
+  }
+
+  [data-scope='time-picker'][data-part='input']:hover:not([data-focus], [data-disabled]) {
+    background: var(--xh-time-picker-segment-bg-hover, var(--xh-bg-subtle-hover));
+  }
+
+  /* 段是集合条目形态（role=spinbutton 的 span），禁用走 data-disabled 而不是 :disabled */
+  [data-scope='time-picker'][data-part='input'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 两个按钮同一副长相：贴在框内的小方钮，不占宽度也不撑高 control */
+  [data-scope='time-picker'][data-part='trigger'],
+  [data-scope='time-picker'][data-part='clear-trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-time-picker-action-size, var(--xh-control-action-size));
+    block-size: var(--xh-time-picker-action-size, var(--xh-control-action-size));
+    padding: 0;
+    border: 0;
+    border-radius: var(--xh-time-picker-action-radius, var(--xh-shape-control));
+    background: var(--xh-time-picker-action-bg, transparent);
+    color: var(--xh-time-picker-action-fg, var(--xh-fg-muted));
+    font-family: inherit;
+    font-size: var(--xh-time-picker-action-font-size, var(--xh-font-size-sm));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+    user-select: none;
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='time-picker'][data-part='trigger'][hidden],
+  [data-scope='time-picker'][data-part='clear-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 触发器把整行推到最右：它与清空按钮之间不留缝，两者一起靠框内末端 */
+  [data-scope='time-picker'][data-part='trigger'] {
+    margin-inline-start: auto;
+  }
+
+  [data-scope='time-picker'][data-part='trigger']:hover:not(:disabled),
+  [data-scope='time-picker'][data-part='clear-trigger']:hover:not(:disabled) {
+    background: var(--xh-time-picker-action-bg-hover, var(--xh-bg-subtle-hover));
+    color: var(--xh-time-picker-action-fg-hover, var(--xh-fg-default));
+  }
+
+  [data-scope='time-picker'][data-part='trigger']:active:not(:disabled),
+  [data-scope='time-picker'][data-part='clear-trigger']:active:not(:disabled) {
+    background: var(--xh-time-picker-action-bg-active, var(--xh-bg-subtle-active));
+  }
+
+  /* 触发器是常规 Tab 停靠点，落焦必须看得见；清空按钮退出了 Tab 序列，
+     这条是给程序化聚焦兜底 */
+  [data-scope='time-picker'][data-part='trigger']:focus-visible,
+  [data-scope='time-picker'][data-part='clear-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 两个按钮都是单体控件，禁用走原生 :disabled（列里的格一律 data-disabled） */
+  [data-scope='time-picker'][data-part='trigger']:disabled,
+  [data-scope='time-picker'][data-part='clear-trigger']:disabled {
+    background: var(--xh-time-picker-action-bg, transparent);
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
+  [data-scope='time-picker'][data-part='positioner'] {
+    position: fixed;
+    z-index: var(--xh-layer-popover);
+    /* 空壳不吃指针，交互只发生在 content 里 */
+    pointer-events: none;
+  }
+
+  /* 锚点被滚出可视区：整个浮层随之收起 */
+  [data-scope='time-picker'][data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  /* 几列并排：整体高度由列自己撑，滚动发生在列里而不是整个面板上——
+     整面板滚会让时列与分列一起走，挑分的时候时就看不见了 */
+  [data-scope='time-picker'][data-part='content'] {
+    display: flex;
+    align-items: stretch;
+    padding: var(--xh-time-picker-content-p, var(--xh-space-1));
+    border: var(--xh-stroke-thin) solid var(--xh-time-picker-content-border, var(--xh-border-default));
+    border-radius: var(--xh-time-picker-content-radius, var(--xh-shape-surface));
+    background: var(--xh-time-picker-content-bg, var(--xh-bg-surface));
+    color: var(--xh-time-picker-content-fg, var(--xh-fg-default));
+    font-variant-numeric: tabular-nums;
+    box-shadow: var(--xh-time-picker-content-shadow, var(--xh-elevation-2));
+    pointer-events: auto;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则，收起态显式让位 */
+  [data-scope='time-picker'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  /* 面板本身不承载焦点（焦点在某一列的某一格上），落焦时不画环 */
+  [data-scope='time-picker'][data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='time-picker'][data-part='content'][data-state='open'] {
+    animation: xh-time-picker-panel-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* 一列一个滚动区：列与列之间用细分隔线，视觉上"时 | 分 | 秒"三栏分明 */
+  [data-scope='time-picker'][data-part='column'] {
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    gap: var(--xh-time-picker-column-gap, var(--xh-space-0_5));
+    min-inline-size: var(--xh-time-picker-column-min-w, 3.5rem);
+    max-block-size: var(--xh-time-picker-column-max-h, 12rem);
+    padding-inline: var(--xh-time-picker-column-px, var(--xh-space-1));
+    overflow-y: auto;
+    /* 滚动容器在某些浏览器里会被自动塞进 Tab 序列，落焦时不画环——
+       焦点该落在格上，列只在整列被界卡空时才兜底占一个 Tab 位 */
+    scrollbar-width: thin;
+  }
+
+  /* granularity 关掉的列（精度不到秒时的秒列）由连接层打 hidden */
+  [data-scope='time-picker'][data-part='column'][hidden] {
+    display: none;
+  }
+
+  [data-scope='time-picker'][data-part='column'] + [data-scope='time-picker'][data-part='column'] {
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-time-picker-column-divider, var(--xh-border-subtle));
+  }
+
+  [data-scope='time-picker'][data-part='column']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='time-picker'][data-part='option'] {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    padding-block: var(--xh-time-picker-option-py, var(--xh-space-1));
+    padding-inline: var(--xh-time-picker-option-px, var(--xh-space-2));
+    border-radius: var(--xh-time-picker-option-radius, var(--xh-shape-control));
+    color: var(--xh-time-picker-option-fg, var(--xh-fg-default));
+    font-size: var(--xh-time-picker-option-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  /* 作者自己藏掉某几格时要让位，有 display 就得补这条 */
+  [data-scope='time-picker'][data-part='option'][hidden] {
+    display: none;
+  }
+
+  /* 焦点所在与选中互相独立：可以停在一个没被选中的格上 */
+  [data-scope='time-picker'][data-part='option'][data-highlighted]:not([data-disabled]),
+  [data-scope='time-picker'][data-part='option']:hover:not([data-disabled]) {
+    background: var(--xh-time-picker-option-bg-highlight, var(--xh-bg-subtle-hover));
+  }
+
+  [data-scope='time-picker'][data-part='option'][data-state='checked'] {
+    background: var(--xh-time-picker-option-bg-checked, var(--xh-bg-brand));
+    color: var(--xh-time-picker-option-fg-checked, var(--xh-fg-on-brand));
+    font-weight: var(--xh-time-picker-option-weight-checked, var(--xh-font-weight-medium));
+  }
+
+  /* 选中格上再落焦点或悬停时，底色留在品牌色一侧：上面那条中性高亮的选择器更具体，
+     不写这条就只有底色被换走、文字仍是品牌底上的反白色 */
+  [data-scope='time-picker'][data-part='option'][data-state='checked'][data-highlighted]:not([data-disabled]),
+  [data-scope='time-picker'][data-part='option'][data-state='checked']:hover:not([data-disabled]) {
+    background: var(--xh-time-picker-option-bg-checked-highlight, var(--xh-bg-brand-hover));
+  }
+
+  [data-scope='time-picker'][data-part='option']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    /* 往内收：选项在滚动列里挨着排，环画在外沿会被列的溢出裁掉 */
+    outline-offset: calc(-1 * var(--xh-ring-offset));
+  }
+
+  /* 禁用走 aria-disabled 而非原生 disabled（原生 disabled 不派 click，禁用守卫就走不到），
+     所以只能靠 data-disabled 表达，写 :disabled 永远不命中 */
+  [data-scope='time-picker'][data-part='option'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 连接层把它写成 type=hidden，UA 自己就不渲染；这里的视觉隐藏是给元素升级前那一瞬兜底
+     （作者手写的是一个普通 input，升级完成前它是可见的文本框）。
+     刻意不写 display：写了反而会盖掉 UA 对 type=hidden 的收起，把它显出来 */
+  [data-scope='time-picker'][data-part='hidden-input'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+}
+
+@layer xihan.motion {
+  /* 浮层进场：淡入 + 轻微上浮，方向与它从输入行下方展开一致。
+     关键帧写在自己文件里并带组件前缀，不去动共享的 motion.css */
+  @keyframes xh-time-picker-panel-in {
+    from {
+      opacity: 0;
+      translate: 0 calc(-1 * var(--xh-space-1));
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+}

package/css/time.css

@@ -0,0 +1,20 @@
+@layer xihan.components {
+  [data-scope='time'][data-part='root'] {
+    color: var(--xh-time-fg, var(--xh-fg-default));
+    /* 等宽数字：秒数跳动时后面的字符不会左右挪 */
+    font-variant-numeric: tabular-nums;
+    /* 一个时间戳不该被拆到两行去 */
+    white-space: nowrap;
+  }
+
+  /* 相对说法是一句话不是一串数字，等宽数字反而把字距拉开 */
+  [data-scope='time'][data-part='root'][data-relative] {
+    font-variant-numeric: normal;
+  }
+
+  /* 没给时刻、或给了认不出的时刻：这时显示的是作者写在节点里的兜底文案，退成弱前景 */
+  [data-scope='time'][data-part='root'][data-state='empty'],
+  [data-scope='time'][data-part='root'][data-state='invalid'] {
+    color: var(--xh-time-placeholder-fg, var(--xh-fg-muted));
+  }
+}