@xihan-ui/styles 1.0.0-alpha.2 → 1.0.0

package/css/tree.css

@@ -5,6 +5,9 @@
   }
 
   [data-scope='tree'][data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-tree-icon-size, var(--xh-glyph-size-text));
+
     display: flex;
     flex-direction: column;
     gap: var(--xh-tree-gap, var(--xh-space-2));
@@ -30,7 +33,8 @@
   [data-scope='tree'][data-part='tree'] {
     display: flex;
     flex-direction: column;
-    max-block-size: var(--xh-tree-max-h, 20rem);
+    gap: var(--xh-tree-tree-gap, var(--xh-list-option-gap));
+    max-block-size: var(--xh-tree-max-h, var(--xh-viewport-h-lg));
     padding-block: var(--xh-tree-py, var(--xh-space-1));
     padding-inline: var(--xh-tree-px, var(--xh-space-1));
     border: var(--xh-stroke-thin) solid var(--xh-tree-border, var(--xh-border-default));
@@ -51,8 +55,15 @@
     outline: none;
   }
 
-  /* 分支只是"这一行 + 它的子层"的外壳，不自带行距与内边距：
-     真正长成一行的是 branch-control，子层缩进归 branch-content */
+  /* 分支只是"这一行 + 它的子层"的外壳，不自带内边距：
+     真正长成一行的是 branch-control，子层缩进归 branch-content。
+     行距由这里出：分支自己那一行与它展开的子层之间，同样按条目间距断开 */
+  [data-scope='tree'][data-part='branch'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-tree-branch-gap, var(--xh-list-option-gap));
+  }
+
   [data-scope='tree'][data-part='branch'][hidden] {
     display: none;
   }
@@ -75,7 +86,7 @@
     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_5));
+    padding-block: var(--xh-tree-row-py, var(--xh-list-option-py-md));
     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));
@@ -90,6 +101,19 @@
       color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
+  /* 分支行的首格是展开箭头，叶子行没有这一格。作者摆了 item-indicator 时由它顶着，
+     没摆（如勾选档首位直接是 item-checkbox）就由行盒自己补出来，
+     否则叶子会比同级分支往行首缩一格，层级关系读不出来 */
+  [data-orientation='vertical'] > [data-scope='tree'][data-part='item']:not(
+      :has(> [data-scope='tree'][data-part='item-indicator'])
+    ) {
+    padding-inline-start: calc(
+      var(--xh-tree-row-px, var(--xh-control-px-md)) +
+        var(--xh-tree-indicator-size, var(--xh-control-indicator-size)) +
+        var(--xh-tree-row-gap, var(--xh-control-gap-md))
+    );
+  }
+
   [data-scope='tree'][data-part='item'][hidden],
   [data-scope='tree'][data-part='branch-control'][hidden] {
     display: none;
@@ -102,6 +126,63 @@
     background: var(--xh-tree-row-bg-hover, var(--xh-bg-subtle));
   }
 
+  /* 勾选把手：勾选态只画在它身上，不碰行底色——底色那条通道归高亮 */
+  [data-scope='tree'][data-part='item-checkbox'],
+  [data-scope='tree'][data-part='branch-checkbox'] {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    inline-size: var(--xh-tree-checkbox-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-tree-checkbox-size, var(--xh-control-indicator-size));
+    border: var(--xh-stroke-thin) solid var(--xh-tree-checkbox-border, var(--xh-border-control));
+    border-radius: var(--xh-tree-checkbox-radius, var(--xh-shape-inset));
+    background: var(--xh-tree-checkbox-bg, var(--xh-bg-canvas));
+    color: var(--xh-tree-checkbox-fg, var(--xh-fg-on-brand));
+  }
+
+  [data-scope='tree'][data-part='item-checkbox'][data-selected],
+  [data-scope='tree'][data-part='branch-checkbox'][data-selected] {
+    border-color: var(--xh-tree-checkbox-border-checked, var(--xh-bg-brand));
+    background: var(--xh-tree-checkbox-bg-checked, var(--xh-bg-brand));
+  }
+
+  /* 半选：级联勾选下「子树勾了一部分」的第三态，此前发了 data-indeterminate 却没人画 */
+  [data-scope='tree'][data-part='item-checkbox'][data-indeterminate]:not([data-selected]),
+  [data-scope='tree'][data-part='branch-checkbox'][data-indeterminate]:not([data-selected]) {
+    border-color: var(--xh-tree-checkbox-border-checked, var(--xh-bg-brand));
+    background: var(--xh-tree-checkbox-bg-checked, var(--xh-bg-brand));
+  }
+
+  /* 没写内容就由皮肤画；作者往把手里塞了自己的图形，这条规则即不命中 */
+  [data-scope='tree'][data-part='item-checkbox'][data-selected]:empty::before,
+  [data-scope='tree'][data-part='branch-checkbox'][data-selected]:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+  }
+
+  [data-scope='tree'][data-part='item-checkbox'][data-indeterminate]:not([data-selected]):empty::before,
+  [data-scope='tree'][data-part='branch-checkbox'][data-indeterminate]:not([data-selected]):empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
+  }
+
+  [data-scope='tree'][data-part='item-checkbox'][data-disabled],
+  [data-scope='tree'][data-part='branch-checkbox'][data-disabled] {
+    border-color: var(--xh-tree-checkbox-border-disabled, var(--xh-border-subtle));
+  }
+
   /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，
      两者因此能同时看见 */
   [data-scope='tree'][data-part='item'][data-selected],
@@ -141,7 +222,7 @@
     align-items: center;
     justify-content: center;
     inline-size: var(--xh-tree-indicator-size, var(--xh-control-indicator-size));
-    color: var(--xh-tree-indicator-fg, var(--xh-bg-brand));
+    color: var(--xh-tree-indicator-fg, var(--xh-fg-brand));
     visibility: hidden;
   }
 
@@ -202,11 +283,56 @@
   [data-scope='tree'][data-part='branch-content'] {
     display: flex;
     flex-direction: column;
+    gap: var(--xh-tree-branch-content-gap, var(--xh-list-option-gap));
     padding-inline-start: var(--xh-tree-indent, var(--xh-space-4));
   }
 
+  /* 末端那一层横排：子节点并排铺开、必要时折行。缩进照旧由子层容器自己顶——
+     那是这一层相对上一层的位置，与层内怎么排无关 */
+  [data-scope='tree'][data-part='branch-content'][data-orientation='horizontal'] {
+    flex-flow: row wrap;
+    align-items: center;
+    column-gap: var(--xh-tree-leaf-row-gap, var(--xh-space-3));
+    row-gap: var(--xh-tree-branch-content-gap, var(--xh-list-option-gap));
+  }
+
+  /* 横排的一层里节点并排，行盒不能再各自吃满一行 */
+  [data-orientation='horizontal'] > [data-scope='tree'][data-part='item'] {
+    flex: none;
+  }
+
   /* 收起态的唯一开关：display 会盖掉 hidden 属性的 UA 规则，漏了这条整棵子树就收不起来 */
   [data-scope='tree'][data-part='branch-content'][hidden] {
     display: none;
   }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-scope='tree'][data-part='branch-trigger']:empty::before,
+  [data-scope='tree'][data-part='branch-indicator']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+  }
+
+  [data-scope='tree'][data-part='item-indicator']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='tree'][data-part='branch-checkbox'][hidden] {
+    display: none;
+  }
 }

package/css/typography.css

@@ -17,8 +17,8 @@
     --xh-_typography-h6: var(--xh-font-size-sm);
     /* 读行宽度：整块正文不收窄就会拉成一行行难读的长句 */
     --xh-_typography-measure: 68ch;
-    /* 行内代码跟着所在那行的字号缩，用相对单位而不是档位 */
-    --xh-_typography-code-size: 0.9em;
+    /* 行内代码跟着所在那行的字号缩：以「随文字走」的字形尺寸为基数按比例收一点，不取固定档位 */
+    --xh-_typography-code-size: calc(var(--xh-glyph-size-text) * 0.9);
 
     /* 建块级格式化上下文，段落的外边距不越过根往外塌 */
     display: flow-root;
@@ -123,9 +123,9 @@
   [data-scope='typography'][data-part='text'][data-variant='code'] {
     padding-block: var(--xh-typography-code-py, var(--xh-space-0_5));
     padding-inline: var(--xh-typography-code-px, var(--xh-space-1));
-    border-radius: var(--xh-typography-code-radius, var(--xh-radius-sm));
+    border-radius: var(--xh-typography-code-radius, var(--xh-shape-inset));
     background: var(--xh-typography-code-bg, var(--xh-bg-subtle));
-    font-family: var(--xh-font-family-mono);
+    font-family: var(--xh-typography-code-font, var(--xh-font-family-mono));
     font-size: var(--xh-typography-code-font-size, var(--xh-_typography-code-size));
   }
 
@@ -136,7 +136,7 @@
 
   /* —— 行内链接 —— */
   [data-scope='typography'][data-part='link'] {
-    border-radius: var(--xh-typography-link-radius, var(--xh-radius-sm));
+    border-radius: var(--xh-typography-link-radius, var(--xh-shape-inset));
     color: var(--xh-typography-link-fg, var(--xh-fg-brand));
     text-decoration: underline;
     text-underline-offset: var(--xh-typography-link-underline-offset, var(--xh-space-0_5));

package/css/undefined.css

@@ -2,26 +2,37 @@
  * 元素升级前的形态。
  *
  * 收起态由元素在 wire() 里用内联 display 做，而 data-scope / data-part 也是那一刻才打上，
- * 所以 JS 到达之前浮层子树既没有皮肤也没有收起——内容会以裸文本堆在页面流里，
+ * 所以 JS 到达之前这段子树既没有皮肤也没有收起——内容会以裸文本堆在页面流里，
  * 并被搜索引擎与读屏当作正文。SSR / SSG 直出时这段时间尤其长。
  *
  * 这里按作者写的 data-xh-part 选中，那是升级前唯一存在的标记。
+ * 名单与元素的对应由 check-undefined-guard.mjs 双向守着。
  */
 @layer xihan.components {
   :where(
+    xh-accordion,
     xh-cascader,
+    xh-collapsible,
     xh-color-picker,
     xh-combobox,
     xh-context-menu,
     xh-date-picker,
     xh-dialog,
     xh-drawer,
+    xh-floating-panel,
     xh-hover-card,
+    xh-image-viewer,
+    xh-mention,
     xh-menu,
     xh-menubar,
     xh-navigation-menu,
+    xh-pagination,
+    xh-popconfirm,
     xh-popover,
+    xh-popselect,
     xh-select,
+    xh-side-nav,
+    xh-steps,
     xh-time-picker,
     xh-tooltip,
     xh-tour,

package/css/virtualizer.css

@@ -18,7 +18,9 @@
 
   [data-scope='virtualizer'][data-part='root'] {
     display: block;
-    /* 作者给 root 定了尺寸后，长列表不该漫出这个框 */
+    /* 作者给 root 定了尺寸后，长列表不该漫出这个框；
+       自建定位上下文，作者往里挂的 scrollbar 贴的是这个框 */
+    position: relative;
     overflow: hidden;
   }
 

package/css/watermark.css

@@ -12,10 +12,9 @@
     isolation: isolate;
   }
 
-  /* 被盖住的内容排在印子下面 */
+  /* 被盖住的内容排在印子下面；这层不自建层叠上下文，里面展开的浮层按自己的层号压过印子 */
   [data-scope='watermark'][data-part='content'] {
     position: relative;
-    z-index: 0;
   }
 
   /*

package/index.css

@@ -12,30 +12,44 @@
 @import './css/button-group.css';
 @import './css/countdown.css';
 @import './css/descriptions.css';
+@import './css/download-trigger.css';
 @import './css/dynamic-input.css';
 @import './css/ellipsis.css';
+@import './css/fieldset.css';
 @import './css/flex.css';
 @import './css/float-button.css';
+@import './css/floating-panel.css';
 @import './css/gradient-text.css';
 @import './css/grid.css';
+@import './css/heatmap.css';
 @import './css/highlight.css';
+@import './css/hotkeys.css';
 @import './css/icon-wrapper.css';
+@import './css/image-cropper.css';
 @import './css/infinite-scroll.css';
+@import './css/json-viewer.css';
 @import './css/layout.css';
 @import './css/list.css';
 @import './css/log.css';
 @import './css/marquee.css';
+@import './css/masonry.css';
 @import './css/mention.css';
 @import './css/number-animation.css';
 @import './css/page-header.css';
+@import './css/password-input.css';
 @import './css/popconfirm.css';
 @import './css/popselect.css';
 @import './css/qr-code.css';
 @import './css/reset.css';
 @import './css/result.css';
+@import './css/segmented.css';
+@import './css/signature-pad.css';
+@import './css/space.css';
 @import './css/statistic.css';
+@import './css/tag.css';
 @import './css/time.css';
 @import './css/timeline.css';
+@import './css/timer.css';
 @import './css/typography.css';
 @import './css/undefined.css';
 @import './css/visually-hidden.css';
@@ -80,6 +94,7 @@
 @import './css/menu.css';
 @import './css/menubar.css';
 @import './css/navigation-menu.css';
+@import './css/notification.css';
 @import './css/number-field.css';
 @import './css/pagination.css';
 @import './css/pin-input.css';
@@ -88,6 +103,7 @@
 @import './css/radio-group.css';
 @import './css/rating.css';
 @import './css/scroll-area.css';
+@import './css/scrollbar.css';
 @import './css/select.css';
 @import './css/separator.css';
 @import './css/side-nav.css';
@@ -103,12 +119,13 @@
 @import './css/time-field.css';
 @import './css/time-picker.css';
 @import './css/toast.css';
-@import './css/toaster.css';
 @import './css/toggle.css';
 @import './css/toggle-group.css';
 @import './css/toolbar.css';
 @import './css/tooltip.css';
 @import './css/tour.css';
+/* 排在六份浮层皮肤之后：箭头几何里摘边框那几条要压过它们的 border 简写 */
+@import './css/overlay-arrow.css';
 @import './css/transfer.css';
 @import './css/tree.css';
 @import './css/tree-select.css';