@xihan-ui/styles 1.0.0-alpha.0

package/css/pagination.css

@@ -0,0 +1,148 @@
+@layer xihan.components {
+  /* 根节点是 nav 地标，只负责把上一页 / 页码 / 下一页排成一行。
+     页数为 0 时连接层会打 data-empty，这里不拿它做隐藏：作者常把「第 x-y 条」这类
+     区间回显也写在 nav 里，整块藏掉会连那行字一起吞了，是否隐藏交给作者决定 */
+  [data-scope='pagination'][data-part='root'] {
+    /* 尺寸档只换这三个私有槽，上一页/下一页、页码与省略号都从 root 继承它们，
+       换档不必给每个部件各写一条选择器 */
+    --xh-_pagination-item-size: var(--xh-control-h-md);
+    --xh-_pagination-item-px: var(--xh-space-2);
+    --xh-_pagination-font-size: var(--xh-text-label-size);
+
+    /* 当前页的选中态随语气走。没写 data-tone 时这几个 --xh-_tone-* 都没被声明，
+       退回原来的品牌底与其配色。聚焦环不在其列，它恒是 --xh-ring-focus */
+    --xh-_pagination-selected-bg: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_pagination-selected-bg-hover: var(--xh-_tone-hover, var(--xh-bg-brand-hover));
+    --xh-_pagination-selected-bg-active: var(--xh-_tone-active, var(--xh-bg-brand-active));
+    --xh-_pagination-selected-fg: var(--xh-_tone-on, var(--xh-fg-on-brand));
+
+    display: flex;
+    align-items: center;
+    /* 页码多到一行放不下就换行，宁可折行也不要把按钮压扁或撑出横向滚动 */
+    flex-wrap: wrap;
+    gap: var(--xh-pagination-gap, var(--xh-space-1));
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里。格子高度走控件高度尺；内边距不在控件内边距那把尺上
+     （页码格子靠最小宽度撑等宽，内边距比同高的控件窄一档），三档一律取空间尺 */
+  [data-scope='pagination'][data-part='root'][data-size='sm'] {
+    --xh-_pagination-item-size: var(--xh-control-h-sm);
+    --xh-_pagination-item-px: var(--xh-space-1_5);
+    --xh-_pagination-font-size: var(--xh-font-size-sm);
+  }
+
+  [data-scope='pagination'][data-part='root'][data-size='lg'] {
+    --xh-_pagination-item-size: var(--xh-control-h-lg);
+    --xh-_pagination-item-px: var(--xh-space-3);
+    --xh-_pagination-font-size: var(--xh-font-size-lg);
+  }
+
+  [data-scope='pagination'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 三类格子共用同一副骨架，行高与间距一致，切页时基线不会跳 */
+  [data-scope='pagination'][data-part='prev-trigger'],
+  [data-scope='pagination'][data-part='next-trigger'],
+  [data-scope='pagination'][data-part='item'],
+  [data-scope='pagination'][data-part='ellipsis'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    /* 等宽的关键：1 与 10 的内容宽度不同，靠最小宽度把它们撑到同一格，
+       行宽才不会随当前页左右抖动。三位数超过最小宽度时才自然变宽 */
+    min-inline-size: var(--xh-pagination-item-min-size, var(--xh-_pagination-item-size));
+    block-size: var(--xh-pagination-item-h, var(--xh-_pagination-item-size));
+    padding-inline: var(--xh-pagination-item-px, var(--xh-_pagination-item-px));
+    /* 省略号也占一条透明描边：只给按钮描边的话两者内容盒不等高，一行里就对不齐 */
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-pagination-item-radius, var(--xh-shape-control));
+    font-size: var(--xh-pagination-font-size, var(--xh-_pagination-font-size));
+    line-height: var(--xh-leading-none);
+    /* 等宽数字：1 与 7 的字形宽度在比例字体里并不相同，不定住会让同位数页码抖一格 */
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  [data-scope='pagination'][data-part='prev-trigger'][hidden],
+  [data-scope='pagination'][data-part='next-trigger'][hidden],
+  [data-scope='pagination'][data-part='item'][hidden],
+  [data-scope='pagination'][data-part='ellipsis'][hidden] {
+    display: none;
+  }
+
+  /* 三个按钮共用的可点观感：默认透明底，只有交互与当前页才上色 */
+  [data-scope='pagination'][data-part='prev-trigger'],
+  [data-scope='pagination'][data-part='next-trigger'],
+  [data-scope='pagination'][data-part='item'] {
+    background: var(--xh-pagination-item-bg, transparent);
+    color: var(--xh-pagination-item-fg, var(--xh-fg-default));
+    font-weight: var(--xh-pagination-item-font-weight, var(--xh-text-label-weight));
+    cursor: pointer;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 悬停这条选择器比当前页那条多一节（:hover），同层里权重更高、会反过来压住它，
+     所以悬停一路显式把当前页排除：指针停在当前页上不该把品牌底色洗成灰底。
+     页码条目从不禁用（连接层只给上一页/下一页发原生 disabled），故这边不必再排除 :disabled */
+  [data-scope='pagination'][data-part='prev-trigger']:hover:not(:disabled),
+  [data-scope='pagination'][data-part='next-trigger']:hover:not(:disabled),
+  [data-scope='pagination'][data-part='item']:not([data-selected]):hover {
+    background: var(--xh-pagination-item-bg-hover, var(--xh-bg-subtle-hover));
+  }
+
+  [data-scope='pagination'][data-part='prev-trigger']:active:not(:disabled),
+  [data-scope='pagination'][data-part='next-trigger']:active:not(:disabled),
+  [data-scope='pagination'][data-part='item']:not([data-selected]):active {
+    background: var(--xh-pagination-item-bg-active, var(--xh-bg-subtle-active));
+  }
+
+  [data-scope='pagination'][data-part='prev-trigger']:focus-visible,
+  [data-scope='pagination'][data-part='next-trigger']:focus-visible,
+  [data-scope='pagination'][data-part='item']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 首末页的上一页 / 下一页是原生 disabled（不可聚焦、进不了 Tab 序列），
+     所以这里必须用 :disabled；连接层同时给的 data-disabled 只是留给作者的钩子。
+     分页条目从不禁用，那边也就没有对应规则 */
+  [data-scope='pagination'][data-part='prev-trigger']:disabled,
+  [data-scope='pagination'][data-part='next-trigger']:disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 当前页：data-selected 与 aria-current='page' 由连接层成对给出，
+     样式挂在 data 钩子上，无障碍语义留给 aria，两边各司其职。
+     只换底色不加粗——字重一变字形就变宽，页码格子会跟着长一点，正是这里要避免的抖动 */
+  [data-scope='pagination'][data-part='item'][data-selected] {
+    border-color: var(--xh-pagination-item-border-selected, var(--xh-_pagination-selected-bg));
+    background: var(--xh-pagination-item-bg-selected, var(--xh-_pagination-selected-bg));
+    color: var(--xh-pagination-item-fg-selected, var(--xh-_pagination-selected-fg));
+  }
+
+  [data-scope='pagination'][data-part='item'][data-selected]:hover {
+    border-color: var(--xh-pagination-item-border-selected-hover, var(--xh-_pagination-selected-bg-hover));
+    background: var(--xh-pagination-item-bg-selected-hover, var(--xh-_pagination-selected-bg-hover));
+  }
+
+  [data-scope='pagination'][data-part='item'][data-selected]:active {
+    border-color: var(--xh-pagination-item-border-selected-active, var(--xh-_pagination-selected-bg-active));
+    background: var(--xh-pagination-item-bg-selected-active, var(--xh-_pagination-selected-bg-active));
+  }
+
+  /* 省略号是纯视觉占位，读屏那边已被 aria-hidden 摘掉：
+     吞掉指针事件，免得它出现悬停反馈、看起来像一颗点得动的按钮 */
+  [data-scope='pagination'][data-part='ellipsis'] {
+    color: var(--xh-pagination-ellipsis-fg, var(--xh-fg-subtle));
+    cursor: default;
+    pointer-events: none;
+  }
+}

package/css/pin-input.css

@@ -0,0 +1,157 @@
+@layer xihan.components {
+  /* 与文本框、数字框同一套堆叠：标签一行、格子一行 */
+  [data-scope='pin-input'][data-part='root'] {
+    /* 尺寸档只换这四个私有槽，标题与格子都从 root 继承它们，换档不必给每个部件各写一条选择器 */
+    --xh-_pin-input-box-size: var(--xh-control-h-lg);
+    --xh-_pin-input-box-gap: var(--xh-space-2);
+    --xh-_pin-input-box-font-size: var(--xh-font-size-xl);
+    --xh-_pin-input-label-font-size: var(--xh-text-label-size);
+    /* 形态档只换这三个私有槽，缺省这一份就是描边式（描边 + 画布底） */
+    --xh-_pin-input-box-bg: var(--xh-bg-canvas);
+    --xh-_pin-input-box-border: var(--xh-border-default);
+    --xh-_pin-input-box-border-hover: var(--xh-border-strong);
+    /* 聚焦环与填满态的强调色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的取值 */
+    --xh-_pin-input-ring: var(--xh-ring-focus);
+    --xh-_pin-input-accent: var(--xh-_tone, var(--xh-bg-brand));
+
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--xh-pin-input-gap, var(--xh-space-1));
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  [data-scope='pin-input'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 形态 —— */
+  /* 形态只决定颜色怎么用；用哪族颜色由 data-tone 决定。
+     不做 solid：实心填充盖住了"这里能打字"这件事，输入框用不上它 */
+  [data-scope='pin-input'][data-part='root'][data-variant='outline'] {
+    --xh-_pin-input-box-bg: var(--xh-bg-canvas);
+    --xh-_pin-input-box-border: var(--xh-border-default);
+    --xh-_pin-input-box-border-hover: var(--xh-border-strong);
+  }
+
+  /* 填充式：底色说明这里是一格输入位，描边让位给底色 */
+  [data-scope='pin-input'][data-part='root'][data-variant='subtle'] {
+    --xh-_pin-input-box-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_pin-input-box-border: transparent;
+    --xh-_pin-input-box-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  }
+
+  /* 无边框、透明底：静息时格子完全隐入背景，可见反馈全靠悬停描边与聚焦环 */
+  [data-scope='pin-input'][data-part='root'][data-variant='ghost'] {
+    --xh-_pin-input-box-bg: transparent;
+    --xh-_pin-input-box-border: transparent;
+    --xh-_pin-input-box-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  }
+
+  /* —— 尺寸 —— */
+  [data-scope='pin-input'][data-part='root'][data-size='sm'] {
+    --xh-_pin-input-box-size: var(--xh-control-h-md);
+    --xh-_pin-input-box-gap: var(--xh-control-gap-sm);
+    --xh-_pin-input-box-font-size: var(--xh-font-size-lg);
+    --xh-_pin-input-label-font-size: var(--xh-font-size-sm);
+  }
+
+  /* 格子是正方形，缺省档已经占到控件高度表的顶档，lg 档由顶档加一格间距合成，不另立数值 */
+  [data-scope='pin-input'][data-part='root'][data-size='lg'] {
+    --xh-_pin-input-box-size: calc(var(--xh-control-h-lg) + var(--xh-space-2));
+    --xh-_pin-input-box-gap: var(--xh-control-gap-lg);
+    --xh-_pin-input-box-font-size: var(--xh-font-size-2xl);
+    --xh-_pin-input-label-font-size: var(--xh-font-size-lg);
+  }
+
+  [data-scope='pin-input'][data-part='label'] {
+    color: var(--xh-pin-input-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-pin-input-label-font-size, var(--xh-_pin-input-label-font-size));
+    font-weight: var(--xh-pin-input-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+  }
+
+  [data-scope='pin-input'][data-part='label'][data-disabled] {
+    color: var(--xh-pin-input-label-fg-disabled, var(--xh-fg-subtle));
+  }
+
+  /* 每格是等宽方框：宽高同取一个尺寸，内边距归零。
+     留了内边距，单字符居中后可用宽度不足，中文与全角字符会被挤出框外 */
+  [data-scope='pin-input'][data-part='input'] {
+    flex: none;
+    inline-size: var(--xh-pin-input-box-size, var(--xh-_pin-input-box-size));
+    block-size: var(--xh-pin-input-box-size, var(--xh-_pin-input-box-size));
+    padding: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-pin-input-box-border, var(--xh-_pin-input-box-border));
+    border-radius: var(--xh-pin-input-box-radius, var(--xh-shape-control));
+    background: var(--xh-pin-input-box-bg, var(--xh-_pin-input-box-bg));
+    color: var(--xh-pin-input-box-fg, var(--xh-fg-default));
+    /* 表单控件不继承页面字体，只给字号会让格子用 UA 默认字族 */
+    font-family: inherit;
+    font-size: var(--xh-pin-input-box-font-size, var(--xh-_pin-input-box-font-size));
+    /* 等宽数字：各位字宽不一时逐格填入会让每格里的字符左右跳 */
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-none);
+    text-align: center;
+    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 格间距只能长在格子自己身上：包住这一行的容器是作者写的，不在角色表里，
+     指望它给 gap 就等于把间距交给了皮肤管不着的地方。
+     用相邻兄弟而不是给每格加外边距，是为了不在首尾多出两段空白 */
+  [data-scope='pin-input'][data-part='input'] + [data-scope='pin-input'][data-part='input'] {
+    margin-inline-start: var(--xh-pin-input-box-gap, var(--xh-_pin-input-box-gap));
+  }
+
+  [data-scope='pin-input'][data-part='input']::placeholder {
+    color: var(--xh-pin-input-placeholder-fg, var(--xh-fg-subtle));
+  }
+
+  /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
+  [data-scope='pin-input'][data-part='input']:hover:not(:disabled, [data-invalid]) {
+    border-color: var(--xh-pin-input-box-border-hover, var(--xh-_pin-input-box-border-hover));
+  }
+
+  /* 一行格子长得一模一样，光标那道竖线太细，看不出正在填哪一格：
+     当前格必须有明显的环。data-focus 由机器给（它知道谁是当前格），
+     :focus-visible 兜住机器状态还没回流的那一帧，两条同时写不冲突 */
+  [data-scope='pin-input'][data-part='input'][data-focus],
+  [data-scope='pin-input'][data-part='input']:focus-visible {
+    border-color: var(--xh-pin-input-box-border-focus, var(--xh-_pin-input-ring));
+    outline: var(--xh-ring-width) solid var(--xh-_pin-input-ring);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='pin-input'][data-part='input'][data-invalid] {
+    border-color: var(--xh-pin-input-box-border-invalid, var(--xh-color-danger-500));
+  }
+
+  /* 每格都是原生 disabled 的单体控件（禁用的格子不该能聚焦），所以用 :disabled */
+  [data-scope='pin-input'][data-part='input']:disabled {
+    background: var(--xh-pin-input-box-bg-disabled, var(--xh-bg-subtle));
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 填满只代表"格子都有字"，不代表"验证码对"，所以用品牌色而不是成功色收个尾。
+     已经标了 invalid 的不在此列——那是明确说了不对 */
+  [data-scope='pin-input'][data-part='root'][data-complete]
+    [data-scope='pin-input'][data-part='input']:not([data-invalid], :disabled) {
+    border-color: var(--xh-pin-input-box-border-complete, var(--xh-_pin-input-accent));
+  }
+
+  /* 连接层把它写成 type=hidden，UA 自己就不渲染；这里的视觉隐藏是给元素升级前那一瞬兜底
+     （作者手写的是一个普通 input，升级完成前它是可见的文本框）。
+     刻意不写 display：写了反而会盖掉 UA 对 type=hidden 的收起，把它显出来 */
+  [data-scope='pin-input'][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/popconfirm.css

@@ -0,0 +1,150 @@
+@layer xihan.components {
+  /* 根只框住触发器：浮层树靠 positioner 的固定定位飞出去，不占根的盒子 */
+  [data-scope='popconfirm'][data-part='root'] {
+    display: inline-block;
+  }
+
+  /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
+  [data-scope='popconfirm'][data-part='positioner'] {
+    position: fixed;
+    z-index: var(--xh-layer-popover);
+    /* 空壳不吃指针，交互只发生在 content 上 */
+    pointer-events: none;
+  }
+
+  /* 锚点被滚出可视区：整个浮层随之收起 */
+  [data-scope='popconfirm'][data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  /* 面板排成三列：左列吃掉剩余宽度，右两列各摆一颗按钮。
+     标题、说明与作者塞进来的内容各占一整行，两颗按钮因此并排落在最后一行的右侧。 */
+  [data-scope='popconfirm'][data-part='content'] {
+    /* 尺寸档只换这三个私有槽 */
+    --xh-_popconfirm-py: var(--xh-space-3);
+    --xh-_popconfirm-px: var(--xh-control-px-md);
+    --xh-_popconfirm-max-w: var(--xh-overlay-max-w);
+
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    align-items: center;
+    gap: var(--xh-popconfirm-gap, var(--xh-space-2));
+    inline-size: max-content;
+    max-inline-size: var(--xh-popconfirm-max-w, var(--xh-_popconfirm-max-w));
+    padding-block: var(--xh-popconfirm-py, var(--xh-_popconfirm-py));
+    padding-inline: var(--xh-popconfirm-px, var(--xh-_popconfirm-px));
+    border: var(--xh-stroke-thin) solid var(--xh-popconfirm-border, var(--xh-border-default));
+    border-radius: var(--xh-popconfirm-radius, var(--xh-shape-surface));
+    background: var(--xh-popconfirm-bg, var(--xh-bg-surface));
+    color: var(--xh-popconfirm-fg, var(--xh-fg-default));
+    box-shadow: var(--xh-popconfirm-shadow, var(--xh-elevation-2));
+    pointer-events: auto;
+  }
+
+  [data-scope='popconfirm'][data-part='content'] > * {
+    grid-column: 1 / -1;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则，收起态显式让位 */
+  [data-scope='popconfirm'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  [data-scope='popconfirm'][data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='popconfirm'][data-part='content'][data-state='open'] {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在 content 的基础规则里；行内内缩取 control-px 那把尺，纵向按 space 档同步 */
+  [data-scope='popconfirm'][data-part='content'][data-size='sm'] {
+    --xh-_popconfirm-py: var(--xh-space-2);
+    --xh-_popconfirm-px: var(--xh-control-px-sm);
+    --xh-_popconfirm-max-w: var(--xh-overlay-max-w-sm);
+  }
+
+  [data-scope='popconfirm'][data-part='content'][data-size='lg'] {
+    --xh-_popconfirm-py: var(--xh-space-4);
+    --xh-_popconfirm-px: var(--xh-control-px-lg);
+    --xh-_popconfirm-max-w: var(--xh-overlay-max-w-lg);
+  }
+
+  [data-scope='popconfirm'][data-part='title'] {
+    margin: 0;
+    font-size: var(--xh-popconfirm-title-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-popconfirm-title-font-weight, var(--xh-font-weight-semibold));
+    color: var(--xh-popconfirm-title-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='popconfirm'][data-part='description'] {
+    margin: 0;
+    font-size: var(--xh-text-body-size);
+    line-height: var(--xh-leading-normal);
+    color: var(--xh-popconfirm-description-fg, var(--xh-fg-muted));
+  }
+
+  /* —— 两颗按钮 —— */
+  [data-scope='popconfirm'][data-part='confirm-trigger'],
+  [data-scope='popconfirm'][data-part='cancel-trigger'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-control-h-sm);
+    padding-inline: var(--xh-control-px-sm);
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-shape-control);
+    font-size: var(--xh-font-size-sm);
+    font-weight: var(--xh-text-label-weight);
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 并排落在最后一行的右侧两格；取消在左、确认在右 */
+  [data-scope='popconfirm'][data-part='content'] > [data-part='cancel-trigger'] {
+    grid-column: 2;
+  }
+
+  [data-scope='popconfirm'][data-part='content'] > [data-part='confirm-trigger'] {
+    grid-column: 3;
+  }
+
+  /* 确认是实心的主操作。底色走共享语气槽：作者在 content 上写 data-tone="danger"
+     就整体换成危险色，不写则用品牌色 */
+  [data-scope='popconfirm'][data-part='confirm-trigger'] {
+    background: var(--xh-popconfirm-confirm-bg, var(--xh-_tone, var(--xh-bg-brand)));
+    color: var(--xh-popconfirm-confirm-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
+  }
+
+  [data-scope='popconfirm'][data-part='confirm-trigger']:hover {
+    background: var(--xh-_tone-hover, var(--xh-bg-brand-hover));
+  }
+
+  [data-scope='popconfirm'][data-part='confirm-trigger']:active {
+    background: var(--xh-_tone-active, var(--xh-bg-brand-active));
+  }
+
+  /* 取消是次要出口，用淡底中性色，不参与语气 */
+  [data-scope='popconfirm'][data-part='cancel-trigger'] {
+    background: var(--xh-popconfirm-cancel-bg, var(--xh-bg-subtle));
+    color: var(--xh-popconfirm-cancel-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='popconfirm'][data-part='cancel-trigger']:hover {
+    background: var(--xh-bg-subtle-hover);
+  }
+
+  [data-scope='popconfirm'][data-part='cancel-trigger']:active {
+    background: var(--xh-bg-subtle-active);
+  }
+
+  [data-scope='popconfirm'][data-part='confirm-trigger']:focus-visible,
+  [data-scope='popconfirm'][data-part='cancel-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+}

package/css/popover.css

@@ -0,0 +1,150 @@
+@layer xihan.components {
+  /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
+  [data-scope='popover'][data-part='positioner'] {
+    position: fixed;
+    z-index: var(--xh-layer-popover);
+    /* 空壳不吃指针，交互只发生在 content 上 */
+    pointer-events: none;
+  }
+
+  /* 锚点被滚出可视区：整个浮层随之收起 */
+  [data-scope='popover'][data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  [data-scope='popover'][data-part='content'] {
+    /* 尺寸档只换这两个私有槽。popover 没有 root 部件，size 落在浮层树最外层的 content 上。
+       语气不接：面板是内容容器，语气该由里面的内容表达 */
+    --xh-_popover-py: var(--xh-space-3);
+    --xh-_popover-px: var(--xh-control-px-md);
+    --xh-_popover-max-w: var(--xh-overlay-max-w);
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-popover-gap, var(--xh-space-2));
+    inline-size: max-content;
+    max-inline-size: var(--xh-popover-max-w, var(--xh-_popover-max-w));
+    padding-block: var(--xh-popover-py, var(--xh-_popover-py));
+    padding-inline: var(--xh-popover-px, var(--xh-_popover-px));
+    border: var(--xh-stroke-thin) solid var(--xh-popover-border, var(--xh-border-default));
+    border-radius: var(--xh-popover-radius, var(--xh-shape-surface));
+    background: var(--xh-popover-bg, var(--xh-bg-surface));
+    color: var(--xh-popover-fg, var(--xh-fg-default));
+    box-shadow: var(--xh-popover-shadow, var(--xh-elevation-2));
+    pointer-events: auto;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则，收起态显式让位 */
+  [data-scope='popover'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  [data-scope='popover'][data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='popover'][data-part='content'][data-state='open'] {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在 content 的基础规则里；行内内缩本就取 control-px 那把尺，上下各挪一档，
+     纵向内缩按 space 档同步 */
+  [data-scope='popover'][data-part='content'][data-size='sm'] {
+    --xh-_popover-py: var(--xh-space-2);
+    --xh-_popover-px: var(--xh-control-px-sm);
+    --xh-_popover-max-w: var(--xh-overlay-max-w-sm);
+  }
+
+  [data-scope='popover'][data-part='content'][data-size='lg'] {
+    --xh-_popover-py: var(--xh-space-4);
+    --xh-_popover-px: var(--xh-control-px-lg);
+    --xh-_popover-max-w: var(--xh-overlay-max-w-lg);
+  }
+
+  [data-scope='popover'][data-part='title'] {
+    margin: 0;
+    font-size: var(--xh-popover-title-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-popover-title-font-weight, var(--xh-font-weight-semibold));
+    color: var(--xh-popover-title-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='popover'][data-part='description'] {
+    margin: 0;
+    font-size: var(--xh-text-body-size);
+    color: var(--xh-popover-description-fg, var(--xh-fg-muted));
+  }
+
+  /* 关闭按钮是绝对定位的，不占流内宽度：标题得自己让出右上角那块，
+     否则长标题会直接钻到按钮底下。只在真有关闭按钮时让位。 */
+  [data-scope='popover'][data-part='content']:has([data-scope='popover'][data-part='close-trigger'])
+    [data-scope='popover'][data-part='title'] {
+    padding-inline-end: calc(var(--xh-control-h-sm) + var(--xh-space-2));
+  }
+
+  [data-scope='popover'][data-part='close-trigger'] {
+    position: absolute;
+    inset-block-start: var(--xh-space-2);
+    inset-inline-end: var(--xh-space-2);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-control-h-sm);
+    inline-size: var(--xh-control-h-sm);
+    border: 0;
+    border-radius: var(--xh-shape-control);
+    background: transparent;
+    color: var(--xh-fg-muted);
+    cursor: pointer;
+  }
+
+  [data-scope='popover'][data-part='close-trigger']:hover {
+    background: var(--xh-bg-subtle);
+    color: var(--xh-fg-default);
+  }
+
+  [data-scope='popover'][data-part='close-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 箭头是旋转 45° 的方块，只保留朝向锚点那两条边的描边；
+     引擎不产出箭头偏移，因此沿交叉轴固定居中 */
+  [data-scope='popover'][data-part='arrow'] {
+    position: absolute;
+    inline-size: var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size));
+    block-size: var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size));
+    background: var(--xh-popover-bg, var(--xh-bg-surface));
+    border: var(--xh-stroke-thin) solid var(--xh-popover-border, var(--xh-border-default));
+    rotate: 45deg;
+  }
+
+  [data-scope='popover'][data-part='arrow'][data-placement^='bottom'] {
+    inset-block-start: calc(var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+    inset-inline-start: calc(50% - var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    border-block-end: 0;
+    border-inline-end: 0;
+  }
+
+  [data-scope='popover'][data-part='arrow'][data-placement^='top'] {
+    inset-block-end: calc(var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+    inset-inline-start: calc(50% - var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    border-block-start: 0;
+    border-inline-start: 0;
+  }
+
+  [data-scope='popover'][data-part='arrow'][data-placement^='right'] {
+    inset-inline-start: calc(var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+    inset-block-start: calc(50% - var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    border-block-start: 0;
+    border-inline-end: 0;
+  }
+
+  [data-scope='popover'][data-part='arrow'][data-placement^='left'] {
+    inset-inline-end: calc(var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+    inset-block-start: calc(50% - var(--xh-popover-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    border-block-end: 0;
+    border-inline-start: 0;
+  }
+}