@xihan-ui/styles 1.0.0-alpha.0

package/css/toggle-group.css

@@ -0,0 +1,160 @@
+@layer xihan.components {
+  /* 分段控件：段与段之间不留缝，靠共边连成一体，所以 root 不设 gap。
+     排布只能读 data-orientation——aria-orientation 在多选模式下连接层根本不输出（role=group 不收） */
+  [data-scope='toggle-group'][data-part='root'] {
+    display: inline-flex;
+    align-items: stretch;
+  }
+
+  [data-scope='toggle-group'][data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  [data-scope='toggle-group'][data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  /* root 会短暂拿到 tabindex=0，但它的 onFocus 立刻把焦点转投给条目，
+     在它身上画环只会闪一下就跳走，高亮要长在条目上 */
+  [data-scope='toggle-group'][data-part='root']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='toggle-group'][data-part='root'][data-disabled] {
+    cursor: not-allowed;
+  }
+
+  [data-scope='toggle-group'][data-part='item'] {
+    /* 私有槽位：组件令牌 → 语义令牌两级回退。状态规则只改写槽位，
+       底色/描边/前景三者永远同步换，不会出现选中了底色却没跟上描边 */
+    --xh-_bg: var(--xh-toggle-group-item-bg, var(--xh-bg-canvas));
+    --xh-_bg-hover: var(--xh-toggle-group-item-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-_bg-active: var(--xh-toggle-group-item-bg-active, var(--xh-bg-subtle-active));
+    --xh-_fg: var(--xh-toggle-group-item-fg, var(--xh-fg-default));
+    --xh-_border: var(--xh-toggle-group-item-border, var(--xh-border-default));
+
+    /* 相邻两段靠负外边距压掉一条重边，谁的描边浮在上面必须能指定，
+       因此条目必须是定位元素——静态元素的 z-index 不生效 */
+    position: relative;
+    z-index: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-toggle-group-item-gap, var(--xh-control-gap-md));
+    block-size: var(--xh-toggle-group-item-h, var(--xh-control-h-md));
+    padding-inline: var(--xh-toggle-group-item-px, var(--xh-control-px-md));
+    border: var(--xh-stroke-thin) solid var(--xh-_border);
+    /* 中间段一律直角，圆角只由首末两端补回来 */
+    border-radius: 0;
+    background: var(--xh-_bg);
+    color: var(--xh-_fg);
+    font-size: var(--xh-toggle-group-item-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-toggle-group-item-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 共边：后一段往回挪一个描边宽度，两条相邻的边重合成一条。
+     方向跟着 data-orientation 走，横排收 inline 轴、竖排收 block 轴 */
+  [data-scope='toggle-group'][data-part='root'][data-orientation='horizontal']
+    > [data-scope='toggle-group'][data-part='item']
+    + [data-scope='toggle-group'][data-part='item'] {
+    margin-inline-start: calc(-1 * var(--xh-stroke-thin));
+  }
+
+  [data-scope='toggle-group'][data-part='root'][data-orientation='vertical']
+    > [data-scope='toggle-group'][data-part='item']
+    + [data-scope='toggle-group'][data-part='item'] {
+    margin-block-start: calc(-1 * var(--xh-stroke-thin));
+  }
+
+  /* 两端圆角用逻辑角属性写，rtl 与竖排都跟着换边，不必另写一套。
+     只认 root 的直接子节点：条目之间插了别的节点时宁可退化成直角，也不要圆错位置 */
+  [data-scope='toggle-group'][data-part='root'][data-orientation='horizontal']
+    > [data-scope='toggle-group'][data-part='item']:first-child {
+    border-start-start-radius: var(--xh-toggle-group-radius, var(--xh-shape-control));
+    border-end-start-radius: var(--xh-toggle-group-radius, var(--xh-shape-control));
+  }
+
+  [data-scope='toggle-group'][data-part='root'][data-orientation='horizontal']
+    > [data-scope='toggle-group'][data-part='item']:last-child {
+    border-start-end-radius: var(--xh-toggle-group-radius, var(--xh-shape-control));
+    border-end-end-radius: var(--xh-toggle-group-radius, var(--xh-shape-control));
+  }
+
+  [data-scope='toggle-group'][data-part='root'][data-orientation='vertical']
+    > [data-scope='toggle-group'][data-part='item']:first-child {
+    border-start-start-radius: var(--xh-toggle-group-radius, var(--xh-shape-control));
+    border-start-end-radius: var(--xh-toggle-group-radius, var(--xh-shape-control));
+  }
+
+  [data-scope='toggle-group'][data-part='root'][data-orientation='vertical']
+    > [data-scope='toggle-group'][data-part='item']:last-child {
+    border-end-start-radius: var(--xh-toggle-group-radius, var(--xh-shape-control));
+    border-end-end-radius: var(--xh-toggle-group-radius, var(--xh-shape-control));
+  }
+
+  [data-scope='toggle-group'][data-part='item']:not([data-disabled]):hover {
+    background: var(--xh-_bg-hover);
+  }
+
+  [data-scope='toggle-group'][data-part='item']:not([data-disabled]):active {
+    background: var(--xh-_bg-active);
+  }
+
+  /* 选中态：单选是 role=radio + aria-checked，多选是原生按钮 + aria-pressed，
+     两套 ARIA 各出一半，样式一条都对不上——只有 data-state 是两种模式共同的出口 */
+  [data-scope='toggle-group'][data-part='item'][data-state='on'] {
+    --xh-_bg: var(--xh-toggle-group-item-bg-on, var(--xh-bg-brand));
+    --xh-_bg-hover: var(--xh-toggle-group-item-bg-on-hover, var(--xh-bg-brand-hover));
+    --xh-_bg-active: var(--xh-toggle-group-item-bg-on-active, var(--xh-bg-brand-active));
+    --xh-_fg: var(--xh-toggle-group-item-fg-on, var(--xh-fg-on-brand));
+    --xh-_border: var(--xh-toggle-group-item-border-on, var(--xh-bg-brand));
+
+    /* 抬一层，让 brand 描边压住邻居的灰边。共边处两条边重合在同一像素上，
+       不抬层就由文档序决定谁在上，选中段的左右两侧会一边有色一边灰 */
+    z-index: 1;
+  }
+
+  /* 集合条目一律 aria-disabled 而非原生 disabled（禁用项仍要能当方向键的起点），
+     所以这里读 data-disabled，写 :disabled 永远不命中。
+     另外禁用不能用 opacity 变淡：半透明会把压在下面那条边透出来，共边处当场变成两条线 */
+  [data-scope='toggle-group'][data-part='item'][data-disabled] {
+    --xh-_bg: var(--xh-toggle-group-item-bg-disabled, var(--xh-bg-muted));
+    --xh-_fg: var(--xh-toggle-group-item-fg-disabled, var(--xh-fg-disabled));
+    --xh-_border: var(--xh-toggle-group-item-border-disabled, var(--xh-border-subtle));
+
+    cursor: not-allowed;
+  }
+
+  /* 禁用且选中：底色不能一路退回 muted，那样"这一段是当前值"的信息就整个没了。
+     掺一半 muted 进 brand，既看得出选中，也看得出改不动 */
+  [data-scope='toggle-group'][data-part='item'][data-disabled][data-state='on'] {
+    --xh-_bg: var(
+      --xh-toggle-group-item-bg-on-disabled,
+      color-mix(in oklab, var(--xh-bg-brand) 50%, var(--xh-bg-muted))
+    );
+    --xh-_fg: var(--xh-toggle-group-item-fg-on-disabled, var(--xh-fg-on-brand));
+    --xh-_border: var(--xh-toggle-group-item-border-on-disabled, var(--xh-bg-brand));
+  }
+
+  /* 焦点环要浮在共边之上：outline 画在元素外侧，不抬层就会被后一段的底色与描边盖掉一半 */
+  [data-scope='toggle-group'][data-part='item']:focus-visible {
+    z-index: 2;
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
+     不补的话作者给节点加 hidden 后它照样显示 */
+  [data-scope='toggle-group'][data-part='root'][hidden],
+  [data-scope='toggle-group'][data-part='item'][hidden] {
+    display: none;
+  }
+}

package/css/toggle.css

@@ -0,0 +1,103 @@
+@layer xihan.components {
+  [data-scope='toggle'][data-part='root'] {
+    /* 私有槽位：组件令牌 → 语义令牌两级回退，变体只改这几个槽位 */
+    --xh-_bg: var(--xh-toggle-bg, transparent);
+    --xh-_bg-hover: var(--xh-toggle-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-_fg: var(--xh-toggle-fg, var(--xh-fg-default));
+
+    /* 按下态：强调交给底色。前景不用品牌色——subtle-active 这一档底上任何品牌色都过不了
+       AA（浅色最好的 brand-700 只有 4.37），强调靠底、可读靠前景是更稳的分工 */
+    --xh-_bg-pressed: var(--xh-toggle-bg-pressed, var(--xh-bg-subtle-active));
+    --xh-_fg-pressed: var(--xh-toggle-fg-pressed, var(--xh-fg-default));
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-toggle-gap, var(--xh-control-gap-md));
+    block-size: var(--xh-toggle-h, var(--xh-control-h-md));
+    padding-inline: var(--xh-toggle-px, var(--xh-control-px-md));
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-toggle-radius, var(--xh-shape-control));
+    background: var(--xh-_bg);
+    color: var(--xh-_fg);
+    font-size: var(--xh-toggle-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-toggle-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='toggle'][data-part='root']:hover {
+    background: var(--xh-_bg-hover);
+  }
+
+  [data-scope='toggle'][data-part='root'][data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
+  [data-scope='toggle'][data-part='root']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* —— 变体 —— */
+  /* 形态只决定颜色怎么用；用哪族颜色由 data-tone 决定，没写 tone 就沿用原来的中性配色 */
+  [data-scope='toggle'][data-part='root'][data-variant='solid'] {
+    --xh-_bg: transparent;
+    --xh-_bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle-hover));
+    --xh-_fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_bg-pressed: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_fg-pressed: var(--xh-_tone-on, var(--xh-fg-on-brand));
+  }
+
+  [data-scope='toggle'][data-part='root'][data-variant='subtle'] {
+    --xh-_bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --xh-_fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_bg-pressed: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
+    --xh-_fg-pressed: var(--xh-_tone-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='toggle'][data-part='root'][data-variant='outline'] {
+    --xh-_bg: transparent;
+    --xh-_bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle-hover));
+    --xh-_fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_bg-pressed: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
+    --xh-_fg-pressed: var(--xh-_tone-fg, var(--xh-fg-default));
+
+    border-color: var(--xh-_tone-border, var(--xh-border-default));
+  }
+
+  [data-scope='toggle'][data-part='root'][data-variant='ghost'] {
+    --xh-_bg: transparent;
+    --xh-_bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle-hover));
+    --xh-_fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_bg-pressed: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
+    --xh-_fg-pressed: var(--xh-_tone-fg, var(--xh-fg-default));
+  }
+
+  /* 按下态排在变体之后：两者特异度相同，后写的那条赢，
+     变体只负责给出按下档的取值，切换由这里一处完成 */
+  [data-scope='toggle'][data-part='root'][data-state='on'] {
+    --xh-_bg: var(--xh-_bg-pressed);
+    --xh-_bg-hover: var(--xh-_bg-pressed);
+
+    color: var(--xh-_fg-pressed);
+  }
+
+  /* —— 尺寸 —— */
+  [data-scope='toggle'][data-part='root'][data-size='sm'] {
+    block-size: var(--xh-control-h-sm);
+    padding-inline: var(--xh-control-px-sm);
+    font-size: var(--xh-font-size-sm);
+  }
+
+  [data-scope='toggle'][data-part='root'][data-size='lg'] {
+    block-size: var(--xh-control-h-lg);
+    padding-inline: var(--xh-control-px-lg);
+    font-size: var(--xh-font-size-lg);
+  }
+}

package/css/tone.css

@@ -0,0 +1,85 @@
+/*
+ * 语气层：与组件无关，全库共用一份。
+ *
+ * 三个视觉轴各管一件事，互不干涉：
+ *   data-variant  形态  solid / subtle / outline / ghost —— 颜色怎么用
+ *   data-tone     语气  brand / neutral / success / warning / danger / info —— 用哪族颜色
+ *   data-size     尺寸  sm / md / lg
+ *
+ * 这里只声明私有槽，各组件的形态规则去消费。所以加一个语气是改这一处 6 条规则，
+ * 而不是逐个组件写 6 遍。
+ *
+ * --xh-_tone-on 是实心底上的前景色，按实测对比度分派而非统一白字：
+ * 600 档上白字对 brand 5.08、neutral 7.80、danger 4.83 达标，而 success 3.04、
+ * warning 2.70、info 3.47 都不到 4.5，这三族必须配深字。
+ *
+ * --xh-_tone-shift 是交互态要往哪个方向挪：永远背离前景色走，悬停与按下才不会
+ * 反过来压低对比度。白字族往深处挪，深字族往浅处挪。
+ *
+ * 这两个槽用的都是固定原语而不是 --xh-fg-default：实心底本身是原语色、不随主题翻，
+ * 配色若跟着主题翻，暗色下就会变成白字压在浅黄底上（实测对比度 2.70）。
+ */
+@layer xihan.components {
+  [data-tone] {
+    /* 先给一份中性缺省：写了 data-tone 却拼错取值时退成中性，
+       而不是让 --xh-_tone 悬空——悬空会让下面每条 color-mix 变成计算期无效，
+       用它的声明会整条失效，且 var() 兜底也救不回来（槽位是「已声明但无效」）。 */
+    --xh-_tone: var(--xh-color-neutral-600);
+    /* 装饰性强调（色条、图标这类）用 500 档：600 是给实心底与文字用的强调档，
+       压在细长的色条上偏重。alert 与 toast 原本就用 500，接语气层不该改变它们的观感 */
+    --xh-_tone-soft: var(--xh-color-neutral-500);
+    --xh-_tone-on: var(--xh-color-neutral-0);
+    --xh-_tone-shift: var(--xh-color-neutral-950);
+
+    /* 交互态与淡底都从主色兑出来，兑的对象是主题色，深浅两态自动跟随 */
+    --xh-_tone-hover: color-mix(in oklab, var(--xh-_tone) 88%, var(--xh-_tone-shift));
+    --xh-_tone-active: color-mix(in oklab, var(--xh-_tone) 78%, var(--xh-_tone-shift));
+    --xh-_tone-subtle: color-mix(in oklab, var(--xh-_tone) 12%, var(--xh-bg-surface));
+    --xh-_tone-subtle-hover: color-mix(in oklab, var(--xh-_tone) 20%, var(--xh-bg-surface));
+    --xh-_tone-subtle-active: color-mix(in oklab, var(--xh-_tone) 28%, var(--xh-bg-surface));
+    --xh-_tone-border: color-mix(in oklab, var(--xh-_tone) 40%, var(--xh-bg-surface));
+    /* 在普通背景上表达该语气的文字色：往前景色兑，浅色态变深、深色态变浅 */
+    --xh-_tone-fg: color-mix(in oklab, var(--xh-_tone) 72%, var(--xh-fg-default));
+  }
+
+  [data-tone='brand'] {
+    --xh-_tone: var(--xh-color-brand-600);
+    --xh-_tone-soft: var(--xh-color-brand-500);
+    --xh-_tone-on: var(--xh-color-neutral-0);
+    --xh-_tone-shift: var(--xh-color-neutral-950);
+  }
+
+  [data-tone='neutral'] {
+    --xh-_tone: var(--xh-color-neutral-600);
+    --xh-_tone-on: var(--xh-color-neutral-0);
+    --xh-_tone-shift: var(--xh-color-neutral-950);
+  }
+
+  [data-tone='danger'] {
+    --xh-_tone: var(--xh-color-danger-600);
+    --xh-_tone-soft: var(--xh-color-danger-500);
+    --xh-_tone-on: var(--xh-color-neutral-0);
+    --xh-_tone-shift: var(--xh-color-neutral-950);
+  }
+
+  [data-tone='success'] {
+    --xh-_tone: var(--xh-color-success-600);
+    --xh-_tone-soft: var(--xh-color-success-500);
+    --xh-_tone-on: var(--xh-color-neutral-950);
+    --xh-_tone-shift: var(--xh-color-neutral-0);
+  }
+
+  [data-tone='warning'] {
+    --xh-_tone: var(--xh-color-warning-600);
+    --xh-_tone-soft: var(--xh-color-warning-500);
+    --xh-_tone-on: var(--xh-color-neutral-950);
+    --xh-_tone-shift: var(--xh-color-neutral-0);
+  }
+
+  [data-tone='info'] {
+    --xh-_tone: var(--xh-color-info-600);
+    --xh-_tone-soft: var(--xh-color-info-500);
+    --xh-_tone-on: var(--xh-color-neutral-950);
+    --xh-_tone-shift: var(--xh-color-neutral-0);
+  }
+}

package/css/toolbar.css

@@ -0,0 +1,114 @@
+@layer xihan.components {
+  /* 一条控件带：条目之间留固定间距，分隔线再把它们切成语义上的几段。
+     排布只能读 data-orientation——它与 aria-orientation 同源，但样式不该去读 ARIA */
+  [data-scope='toolbar'][data-part='root'] {
+    /* 尺寸档只换这两个私有槽：条目之间的间距，与整条的内边距 */
+    --xh-_toolbar-gap: var(--xh-space-1);
+    --xh-_toolbar-p: var(--xh-space-1);
+
+    display: flex;
+    align-items: center;
+    gap: var(--xh-toolbar-gap, var(--xh-_toolbar-gap));
+    padding-block: var(--xh-toolbar-py, var(--xh-_toolbar-p));
+    padding-inline: var(--xh-toolbar-px, var(--xh-_toolbar-p));
+    border: var(--xh-stroke-thin) solid var(--xh-toolbar-border, var(--xh-border-default));
+    border-radius: var(--xh-toolbar-radius, var(--xh-shape-surface));
+    background: var(--xh-toolbar-bg, var(--xh-bg-surface));
+    color: var(--xh-toolbar-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='toolbar'][data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  /* 竖排时交叉轴改为拉伸：竖着的一条里每个条目该一样宽，居中会让它们参差不齐 */
+  [data-scope='toolbar'][data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里。工具条自己不定条目的高度与字号（那归条目的皮肤），
+     这里只换排布尺寸；缺省的 --xh-space-1 已经是控件间距那把尺的小档，容不下三档，故一律取空间尺 */
+  [data-scope='toolbar'][data-part='root'][data-size='sm'] {
+    --xh-_toolbar-gap: var(--xh-space-0_5);
+    --xh-_toolbar-p: var(--xh-space-0_5);
+  }
+
+  [data-scope='toolbar'][data-part='root'][data-size='lg'] {
+    --xh-_toolbar-gap: var(--xh-space-2);
+    --xh-_toolbar-p: var(--xh-space-2);
+  }
+
+  /* root 会在焦点进条前短暂拿到 tabindex=0，但它的 onFocus 立刻把焦点转投给条目，
+     在它身上画环只会闪一下就跳走，高亮要长在条目上 */
+  [data-scope='toolbar'][data-part='root']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='toolbar'][data-part='root'][data-disabled] {
+    background: var(--xh-toolbar-bg-disabled, var(--xh-bg-muted));
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
+     不补的话作者给节点加 hidden 后它照样显示 */
+  [data-scope='toolbar'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 分组把一串相关控件收得更紧：组内间距比条上的总间距小，
+     "这几个是一伙的"才看得出来 */
+  [data-scope='toolbar'][data-part='group'] {
+    display: flex;
+    align-items: center;
+    gap: var(--xh-toolbar-group-gap, var(--xh-space-0_5));
+  }
+
+  [data-scope='toolbar'][data-part='group'][data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  [data-scope='toolbar'][data-part='group'][hidden] {
+    display: none;
+  }
+
+  /* 条目是作者自己的控件（按钮、切换钮、下拉触发器），观感归它自己的皮肤。
+     这里只补两件与导航直接相关的事：焦点环与禁用光标。
+     刻意不给 display——给了会把条目自身皮肤里的排布盖掉，也就不必补 [hidden] 那条 */
+  [data-scope='toolbar'][data-part='item']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 集合条目一律 aria-disabled 而非原生 disabled（禁用项仍要能当方向键的起点），
+     所以这里读 data-disabled，写 :disabled 永远不命中 */
+  [data-scope='toolbar'][data-part='item'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 分隔线画的是它自己的朝向：横排工具条里它是竖线，连接层给的就是 vertical。
+     粗的那一维写死描边宽度，长的那一维交给 align-self 拉伸，
+     沿长边再内缩一点，线才不会顶到工具条的上下边 */
+  [data-scope='toolbar'][data-part='separator'] {
+    flex: none;
+    align-self: stretch;
+    border-radius: var(--xh-toolbar-separator-radius, var(--xh-radius-full));
+    background: var(--xh-toolbar-separator-color, var(--xh-border-default));
+  }
+
+  [data-scope='toolbar'][data-part='separator'][data-orientation='vertical'] {
+    inline-size: var(--xh-toolbar-separator-thickness, var(--xh-stroke-thin));
+    margin-block: var(--xh-toolbar-separator-inset, var(--xh-space-1));
+    margin-inline: var(--xh-toolbar-separator-gap, var(--xh-space-1));
+  }
+
+  [data-scope='toolbar'][data-part='separator'][data-orientation='horizontal'] {
+    block-size: var(--xh-toolbar-separator-thickness, var(--xh-stroke-thin));
+    margin-block: var(--xh-toolbar-separator-gap, var(--xh-space-1));
+    margin-inline: var(--xh-toolbar-separator-inset, var(--xh-space-1));
+  }
+}

package/css/tooltip.css

@@ -0,0 +1,109 @@
+@layer xihan.components {
+  [data-scope='tooltip'][data-part='trigger'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-tooltip-trigger-gap, var(--xh-control-gap-sm));
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: inherit;
+  }
+
+  [data-scope='tooltip'][data-part='trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 坐标由定位引擎写在行内 style 上，这里只兜底 SSR 首帧 */
+  [data-scope='tooltip'][data-part='positioner'] {
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    z-index: var(--xh-layer-tooltip);
+    /* 浮层不承载交互：指针必须能穿过去点到底下的东西 */
+    pointer-events: none;
+  }
+
+  /* 锚点滚出可视区时连浮层一起隐藏 */
+  [data-scope='tooltip'][data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  [data-scope='tooltip'][data-part='content'] {
+    /* 尺寸档只换这三个私有槽。tooltip 没有 root 部件，两轴都落在浮层树最外层的 content 上，
+       箭头是它的后代，语气槽一并继承 */
+    --xh-_tooltip-py: var(--xh-space-1);
+    --xh-_tooltip-px: var(--xh-space-2);
+    --xh-_tooltip-font-size: var(--xh-font-size-sm);
+
+    /* 与 positioner 相反：浮层本体要能接指针，指针停在提示上就不该收起
+       （长文案需要停留细看）。positioner 仍是 none，空白区域照样点得穿。 */
+    pointer-events: auto;
+    max-inline-size: var(--xh-tooltip-max-w, var(--xh-overlay-max-w));
+    padding-block: var(--xh-tooltip-py, var(--xh-_tooltip-py));
+    padding-inline: var(--xh-tooltip-px, var(--xh-_tooltip-px));
+    border-radius: var(--xh-tooltip-radius, var(--xh-shape-control));
+    /* 实心底与其上的文字色随语气走。没写 data-tone 时两个槽都没被声明，退回原来的取值 */
+    background: var(--xh-tooltip-bg, var(--xh-_tone, var(--xh-fg-default)));
+    color: var(--xh-tooltip-fg, var(--xh-_tone-on, var(--xh-bg-surface)));
+    font-size: var(--xh-tooltip-font-size, var(--xh-_tooltip-font-size));
+    line-height: var(--xh-leading-normal);
+    box-shadow: var(--xh-tooltip-shadow, var(--xh-elevation-2));
+  }
+
+  [data-scope='tooltip'][data-part='content'][data-state='open'] {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在 content 的基础规则里。提示的内边距与字号本就不在 control-* 那把尺上
+     （它是浮层不是控件），故按 space / font-size 档上下各挪一级 */
+  [data-scope='tooltip'][data-part='content'][data-size='sm'] {
+    --xh-_tooltip-py: var(--xh-space-0_5);
+    --xh-_tooltip-px: var(--xh-space-1_5);
+    --xh-_tooltip-font-size: var(--xh-font-size-xs);
+  }
+
+  [data-scope='tooltip'][data-part='content'][data-size='lg'] {
+    --xh-_tooltip-py: var(--xh-space-1_5);
+    --xh-_tooltip-px: var(--xh-space-2_5);
+    --xh-_tooltip-font-size: var(--xh-font-size-md);
+  }
+
+  /* 箭头是旋转 45° 的方块，按落定朝向贴在 content 对侧边的中点 */
+  [data-scope='tooltip'][data-part='arrow'] {
+    position: absolute;
+    inline-size: var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size));
+    block-size: var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size));
+    background: var(--xh-tooltip-bg, var(--xh-_tone, var(--xh-fg-default)));
+    transform: rotate(45deg);
+  }
+
+  [data-scope='tooltip'][data-part='positioner'][data-placement^='bottom'] [data-scope='tooltip'][data-part='arrow'] {
+    inset-block-start: calc(var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+    inset-inline-start: calc(50% - var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  }
+
+  [data-scope='tooltip'][data-part='positioner'][data-placement^='top'] [data-scope='tooltip'][data-part='arrow'] {
+    inset-block-end: calc(var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+    inset-inline-start: calc(50% - var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+  }
+
+  [data-scope='tooltip'][data-part='positioner'][data-placement^='left'] [data-scope='tooltip'][data-part='arrow'] {
+    inset-block-start: calc(50% - var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-inline-end: calc(var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+  }
+
+  [data-scope='tooltip'][data-part='positioner'][data-placement^='right'] [data-scope='tooltip'][data-part='arrow'] {
+    inset-block-start: calc(50% - var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-inline-start: calc(var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='tooltip'][data-part='content'] {
+      animation-duration: 0.01ms !important;
+    }
+  }
+}