@xihan-ui/styles 1.0.0-alpha.0 → 1.0.0-alpha.1

package/css/tooltip.css

@@ -72,33 +72,38 @@
     --xh-_tooltip-font-size: var(--xh-font-size-md);
   }
 
-  /* 箭头是旋转 45° 的方块，按落定朝向贴在 content 对侧边的中点 */
+  /* 箭头是旋转 45° 的方块，按自报的落定朝向贴在 content 对侧边上；
+     交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
   [data-scope='tooltip'][data-part='arrow'] {
+    --xh-_tooltip-arrow-size: var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size));
+    --xh-_tooltip-arrow-x: 50%;
+    --xh-_tooltip-arrow-y: 50%;
+
     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));
+    inline-size: var(--xh-_tooltip-arrow-size);
+    block-size: var(--xh-_tooltip-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='arrow'][data-placement^='bottom'] {
+    inset-block-start: calc(var(--xh-_tooltip-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_tooltip-arrow-x) - var(--xh-_tooltip-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='arrow'][data-placement^='top'] {
+    inset-block-end: calc(var(--xh-_tooltip-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_tooltip-arrow-x) - var(--xh-_tooltip-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='arrow'][data-placement^='left'] {
+    inset-block-start: calc(var(--xh-_tooltip-arrow-y) - var(--xh-_tooltip-arrow-size) / 2);
+    inset-inline-end: calc(var(--xh-_tooltip-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);
+  [data-scope='tooltip'][data-part='arrow'][data-placement^='right'] {
+    inset-block-start: calc(var(--xh-_tooltip-arrow-y) - var(--xh-_tooltip-arrow-size) / 2);
+    inset-inline-start: calc(var(--xh-_tooltip-arrow-size) / -2);
   }
 
   @media (prefers-reduced-motion: reduce) {

package/css/tour.css

@@ -211,7 +211,7 @@
   }
 
   [data-scope='tour'][data-part='prev-trigger'] {
-    border-color: var(--xh-border-default);
+    border-color: var(--xh-border-control);
     color: var(--xh-fg-default);
   }
 
@@ -261,11 +261,15 @@
   }
 
   /* 箭头是旋转 45° 的方块，只保留朝向目标那两条边的描边；
-     引擎不产出箭头偏移，因此沿交叉轴固定居中。居中步没有锚点，连接层会给它发 hidden */
+     交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中。居中步没有锚点，连接层会给它发 hidden */
   [data-scope='tour'][data-part='arrow'] {
+    --xh-_tour-arrow-size: var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size));
+    --xh-_tour-arrow-x: 50%;
+    --xh-_tour-arrow-y: 50%;
+
     position: absolute;
-    inline-size: var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size));
-    block-size: var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size));
+    inline-size: var(--xh-_tour-arrow-size);
+    block-size: var(--xh-_tour-arrow-size);
     background: var(--xh-tour-bg, var(--xh-bg-surface));
     border: var(--xh-stroke-thin) solid var(--xh-tour-border, var(--xh-border-default));
     rotate: 45deg;
@@ -276,29 +280,29 @@
   }
 
   [data-scope='tour'][data-part='arrow'][data-placement^='bottom'] {
-    inset-block-start: calc(var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-inline-start: calc(50% - var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-block-start: calc(var(--xh-_tour-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_tour-arrow-x) - var(--xh-_tour-arrow-size) / 2);
     border-block-end: 0;
     border-inline-end: 0;
   }
 
   [data-scope='tour'][data-part='arrow'][data-placement^='top'] {
-    inset-block-end: calc(var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-inline-start: calc(50% - var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-block-end: calc(var(--xh-_tour-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_tour-arrow-x) - var(--xh-_tour-arrow-size) / 2);
     border-block-start: 0;
     border-inline-start: 0;
   }
 
   [data-scope='tour'][data-part='arrow'][data-placement^='right'] {
-    inset-inline-start: calc(var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-block-start: calc(50% - var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-inline-start: calc(var(--xh-_tour-arrow-size) / -2);
+    inset-block-start: calc(var(--xh-_tour-arrow-y) - var(--xh-_tour-arrow-size) / 2);
     border-block-start: 0;
     border-inline-end: 0;
   }
 
   [data-scope='tour'][data-part='arrow'][data-placement^='left'] {
-    inset-inline-end: calc(var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-block-start: calc(50% - var(--xh-tour-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-inline-end: calc(var(--xh-_tour-arrow-size) / -2);
+    inset-block-start: calc(var(--xh-_tour-arrow-y) - var(--xh-_tour-arrow-size) / 2);
     border-block-end: 0;
     border-inline-start: 0;
   }

package/css/transfer.css

@@ -59,7 +59,7 @@
     gap: var(--xh-transfer-header-gap, var(--xh-control-gap-md));
     align-items: center;
     padding-block: var(--xh-transfer-header-py, var(--xh-space-2));
-    padding-inline: var(--xh-transfer-header-px, var(--xh-control-px-sm));
+    padding-inline: var(--xh-transfer-header-px, var(--xh-control-px-md));
     border-block-end: var(--xh-stroke-thin) solid var(--xh-transfer-panel-border, var(--xh-border-default));
   }
 
@@ -95,9 +95,9 @@
     display: block;
     inline-size: 100%;
     block-size: var(--xh-transfer-search-h, var(--xh-control-h-sm));
-    padding-inline: var(--xh-transfer-search-px, var(--xh-control-px-sm));
+    padding-inline: var(--xh-transfer-search-px, var(--xh-control-px-md));
     border: 0;
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-transfer-panel-border, var(--xh-border-default));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-transfer-search-border, var(--xh-border-control));
     background: var(--xh-transfer-search-bg, transparent);
     color: var(--xh-transfer-search-fg, var(--xh-fg-default));
     font: inherit;
@@ -136,8 +136,8 @@
     flex: none;
     gap: var(--xh-transfer-item-gap, var(--xh-control-gap-md));
     align-items: center;
-    padding-block: var(--xh-transfer-item-py, var(--xh-space-1));
-    padding-inline: var(--xh-transfer-item-px, var(--xh-control-px-sm));
+    padding-block: var(--xh-transfer-item-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-transfer-item-px, var(--xh-control-px-md));
     border-radius: var(--xh-transfer-item-radius, var(--xh-shape-control));
     color: var(--xh-transfer-item-fg, var(--xh-fg-default));
     font-size: var(--xh-transfer-item-font-size, var(--xh-text-body-size));
@@ -146,13 +146,15 @@
     white-space: nowrap;
     cursor: pointer;
     user-select: none;
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  /* 键盘高亮与指针悬停共用一套底色：条目本身承载焦点，不另画描边。
+  /* 悬停与键盘锚点共用中性灰轻档：条目本身承载焦点，不另画描边。
      data-highlighted 跟的是连接层记的焦点条目，与勾选互相独立 */
   [data-scope='transfer'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
-    background: var(--xh-transfer-item-bg-highlight, var(--xh-bg-subtle-hover));
+    background: var(--xh-transfer-item-bg-hover, var(--xh-bg-subtle));
   }
 
   [data-scope='transfer'][data-part='item']:focus-visible {
@@ -185,7 +187,7 @@
     justify-content: center;
     inline-size: var(--xh-transfer-checkbox-size, 16px);
     block-size: var(--xh-transfer-checkbox-size, 16px);
-    border: var(--xh-stroke-thin) solid var(--xh-transfer-checkbox-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-transfer-checkbox-border, var(--xh-border-control));
     border-radius: var(--xh-transfer-checkbox-radius, var(--xh-radius-sm));
     background: var(--xh-transfer-checkbox-bg, var(--xh-bg-canvas));
     color: var(--xh-transfer-checkbox-fg, var(--xh-fg-on-brand));

package/css/tree-select.css

@@ -12,8 +12,8 @@
 
     /* 形态档只换触发框的描边与底色这三个槽，浮层与树不跟着变：
        变的是「这是个输入位」的表达方式，不是弹出内容的表达方式 */
-    --xh-_tree-select-border: var(--xh-border-default);
-    --xh-_tree-select-border-hover: var(--xh-border-strong);
+    --xh-_tree-select-border: var(--xh-border-control);
+    --xh-_tree-select-border-hover: var(--xh-border-control-hover);
     --xh-_tree-select-bg: var(--xh-bg-canvas);
 
     /* 选中行的文字色随语气走，没写 data-tone 时退回品牌强调色 */
@@ -34,15 +34,15 @@
   /* 形态只决定描边与底色怎么用；用哪族颜色由 data-tone 决定，没写 tone 就沿用原来的中性配色 */
   /* outline 就是缺省那一身：描边加画布底，写出来只为让三档并列可读 */
   [data-scope='tree-select'][data-part='root'][data-variant='outline'] {
-    --xh-_tree-select-border: var(--xh-border-default);
-    --xh-_tree-select-border-hover: var(--xh-border-strong);
+    --xh-_tree-select-border: var(--xh-border-control);
+    --xh-_tree-select-border-hover: var(--xh-border-control-hover);
     --xh-_tree-select-bg: var(--xh-bg-canvas);
   }
 
   /* subtle 是填充式：底色接过「这里能点」的表达，描边随之让位 */
   [data-scope='tree-select'][data-part='root'][data-variant='subtle'] {
     --xh-_tree-select-border: transparent;
-    --xh-_tree-select-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_tree-select-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
     --xh-_tree-select-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
   }
 
@@ -117,10 +117,9 @@
     border-color: var(--xh-tree-select-trigger-border-hover, var(--xh-_tree-select-border-hover));
   }
 
-  /* trigger 是整个控件唯一的 Tab 停靠点（展开后停靠点才移进树里），落焦必须看得见。
-     语气落在环上：没写 data-tone 时 --xh-_tone 没被声明，退回原来的聚焦环色 */
+  /* trigger 是整个控件唯一的 Tab 停靠点（展开后停靠点才移进树里），落焦必须看得见 */
   [data-scope='tree-select'][data-part='trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-_tone, var(--xh-ring-focus));
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
 
@@ -219,7 +218,7 @@
   /* 清空按钮退出了 Tab 序列（tabindex=-1），正常操作走不到这里；
      留着是给程序化聚焦兜底，落焦时得看得见 */
   [data-scope='tree-select'][data-part='clear-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-_tone, var(--xh-ring-focus));
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
 
@@ -285,8 +284,14 @@
     display: none;
   }
 
-  /* 没有锚点时容器自己进 Tab 序列兜底，落焦不画环：高亮永远长在行上 */
-  [data-scope='tree-select'][data-part='tree']:focus-visible {
+  /* 焦点落在树容器上只有一种情形：指针打开、还没有任何行当锚点。那一刻它认领着 Tab 位，
+     环画在内沿，用户才看得出键盘此刻在哪儿；有锚点时环长在行上，容器不再画 */
+  [data-scope='tree-select'][data-part='tree'][tabindex='0']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  [data-scope='tree-select'][data-part='tree']:not([tabindex='0']):focus-visible {
     outline: none;
   }
 
@@ -297,7 +302,7 @@
   }
 
   [data-scope='tree-select'][data-part='branch']:focus-visible > [data-scope='tree-select'][data-part='branch-control'] {
-    outline: var(--xh-ring-width) solid var(--xh-_tone, var(--xh-ring-focus));
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     /* 往内收：行是撑满宽度的，环画在外沿会被容器裁掉 */
     outline-offset: calc(-1 * var(--xh-ring-width));
   }
@@ -308,8 +313,8 @@
     display: flex;
     align-items: center;
     gap: var(--xh-tree-select-row-gap, var(--xh-_tree-select-gap));
-    padding-block: var(--xh-tree-select-row-py, var(--xh-space-1));
-    padding-inline: var(--xh-tree-select-row-px, var(--xh-control-px-sm));
+    padding-block: var(--xh-tree-select-row-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-tree-select-row-px, var(--xh-control-px-md));
     border-radius: var(--xh-tree-select-row-radius, var(--xh-shape-control));
     color: var(--xh-tree-select-row-fg, var(--xh-fg-default));
     font-size: var(--xh-tree-select-row-font-size, var(--xh-_tree-select-font-size));
@@ -318,6 +323,9 @@
     white-space: nowrap;
     cursor: pointer;
     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);
   }
 
   [data-scope='tree-select'][data-part='item'][hidden],
@@ -325,11 +333,11 @@
     display: none;
   }
 
-  /* 键盘高亮与指针高亮共用一套底色。data-highlighted 跟的是连接层记的焦点行，
-     与选中互相独立：可以停在一个没被选中的节点上 */
+  /* 悬停与键盘锚点共用中性灰轻档：data-highlighted 跟的是连接层记的焦点行，
+     与选中互相独立，键盘落焦另有聚焦环标记位置 */
   [data-scope='tree-select'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]),
   [data-scope='tree-select'][data-part='branch-control']:not([data-disabled]):is(:hover, [data-highlighted]) {
-    background: var(--xh-tree-select-row-bg-highlight, var(--xh-bg-subtle-hover));
+    background: var(--xh-tree-select-row-bg-hover, var(--xh-bg-subtle));
   }
 
   /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，
@@ -342,7 +350,7 @@
 
   /* 叶子自己就是 treeitem，环直接画在它身上 */
   [data-scope='tree-select'][data-part='item']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-_tone, var(--xh-ring-focus));
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: calc(-1 * var(--xh-ring-width));
   }
 

package/css/tree.css

@@ -70,8 +70,8 @@
     display: flex;
     align-items: center;
     gap: var(--xh-tree-row-gap, var(--xh-control-gap-md));
-    padding-block: var(--xh-tree-row-py, var(--xh-space-1));
-    padding-inline: var(--xh-tree-row-px, var(--xh-control-px-sm));
+    padding-block: var(--xh-tree-row-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-tree-row-px, var(--xh-control-px-md));
     border-radius: var(--xh-tree-row-radius, var(--xh-shape-control));
     color: var(--xh-tree-row-fg, var(--xh-fg-default));
     font-size: var(--xh-tree-row-font-size, var(--xh-text-body-size));
@@ -80,6 +80,9 @@
     white-space: nowrap;
     cursor: pointer;
     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);
   }
 
   [data-scope='tree'][data-part='item'][hidden],
@@ -87,11 +90,11 @@
     display: none;
   }
 
-  /* 键盘高亮与指针高亮共用一套底色。data-highlighted 跟的是连接层记的焦点行，
-     与选中互相独立：可以停在一个没被选中的节点上 */
+  /* 悬停与键盘锚点共用中性灰轻档：data-highlighted 跟的是连接层记的焦点行，
+     与选中互相独立，键盘落焦另有聚焦环标记位置 */
   [data-scope='tree'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]),
   [data-scope='tree'][data-part='branch-control']:not([data-disabled]):is(:hover, [data-highlighted]) {
-    background: var(--xh-tree-row-bg-highlight, var(--xh-bg-subtle-hover));
+    background: var(--xh-tree-row-bg-hover, var(--xh-bg-subtle));
   }
 
   /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，

package/index.css

@@ -1,8 +1,11 @@
+/* 层序声明必须最先：级联层的先后由首次出现定死，layers.css 打头才立得住序。 */
+@import './css/layers.css';
+
 /* 令牌先于一切：皮肤里不写兜底值，令牌缺席就是缺陷，不是降级。
    tokens.css 自带 @layer xihan.tokens，层序由 layers.css 定。 */
 @import '@xihan-ui/tokens/tokens.css';
 
-/* 层序声明必须最先，其余按层归属排列。 */
+/* 其余按层归属排列。 */
 @import './css/affix.css';
 @import './css/avatar-group.css';
 @import './css/back-top.css';
@@ -18,7 +21,6 @@
 @import './css/highlight.css';
 @import './css/icon-wrapper.css';
 @import './css/infinite-scroll.css';
-@import './css/layers.css';
 @import './css/layout.css';
 @import './css/list.css';
 @import './css/log.css';
@@ -73,6 +75,7 @@
 @import './css/hover-card.css';
 @import './css/icon.css';
 @import './css/image.css';
+@import './css/image-viewer.css';
 @import './css/listbox.css';
 @import './css/loading-bar.css';
 @import './css/menu.css';
@@ -88,6 +91,7 @@
 @import './css/scroll-area.css';
 @import './css/select.css';
 @import './css/separator.css';
+@import './css/side-nav.css';
 @import './css/slider.css';
 @import './css/splitter.css';
 @import './css/steps.css';