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

package/css/editable.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='editable'] {
+    --xh-editable-skin: 1;
+  }
+
   /* 就地编辑是"一行文字里的一处可改内容"：标题、显示区与按钮天然同行，
      所以根是一条横向的行，而不是文本框那种"标题一行、控件一行"的竖排。
      要竖排的作者把 flex-direction 覆盖掉即可，其余尺寸都长在各自的角色节点上 */
@@ -29,8 +34,7 @@
     cursor: not-allowed;
   }
 
-  /* 预览区与输入框轮流上场，两者在同一处落脚：
-     area 定死最小宽高，切换形态时这一块不会忽大忽小地跳 */
+  /* 预览区与输入框轮流上场，两者在同一处落脚：area 给这一处定最小宽高 */
   [data-scope='editable'][data-part='area'] {
     display: inline-flex;
     align-items: center;
@@ -42,21 +46,23 @@
     display: none;
   }
 
-  /* 预览区的内边距与边框要和输入框对齐：只有描边是透明的，
-     否则从预览切到编辑时文字会左右挪一下 */
+  /* 预览区的高度、内边距与边框都和输入框取同一档，只有描边是透明的：
+     单行值定在控件档上，多行值才往下长 */
   [data-scope='editable'][data-part='preview'] {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     inline-size: 100%;
+    min-block-size: var(--xh-editable-preview-min-h, var(--xh-control-h-md));
     padding-inline: var(--xh-editable-preview-px, var(--xh-control-px-md));
     padding-block: 0;
     border: var(--xh-stroke-thin) solid transparent;
     border-radius: var(--xh-editable-preview-radius, var(--xh-shape-control));
     color: var(--xh-editable-preview-fg, var(--xh-fg-default));
     font-size: var(--xh-editable-preview-font-size, var(--xh-text-body-size));
-    line-height: var(--xh-editable-preview-line-height, var(--xh-control-h-md));
-    /* 值里的换行与连续空格照原样显示，但过长的行仍要能断开 */
+    line-height: var(--xh-leading-normal);
+    /* 值里的换行与连续空格照原样显示，过长的行断开而不撑破弹性行 */
     white-space: pre-wrap;
-    overflow-wrap: break-word;
+    overflow-wrap: anywhere;
   }
 
   /* 编辑态由连接层给 hidden；上面那条 display 会盖掉 UA 规则，少了这条就收不起来 */
@@ -135,12 +141,13 @@
   }
 
   [data-scope='editable'][data-part='input']:focus-visible {
+    border-color: var(--xh-editable-input-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
 
   [data-scope='editable'][data-part='input'][data-invalid] {
-    border-color: var(--xh-editable-input-border-invalid, var(--xh-color-danger-500));
+    border-color: var(--xh-editable-input-border-invalid, var(--xh-border-invalid));
   }
 
   /* 只读仍可聚焦、可复制，不置灰，只把底色压下去表示"改不动" */
@@ -183,7 +190,7 @@
     background: var(--xh-editable-trigger-bg, var(--xh-bg-subtle));
     color: var(--xh-editable-trigger-fg, var(--xh-fg-default));
     font-family: inherit;
-    font-size: var(--xh-editable-trigger-font-size, var(--xh-font-size-sm));
+    font-size: var(--xh-editable-trigger-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-leading-none);
     white-space: nowrap;
     cursor: pointer;

package/css/ellipsis.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='ellipsis'] {
+    --xh-ellipsis-skin: 1;
+  }
+
   /* 单行：一行装不下就收成省略号。
      行数由连接层写进这个盒子的内联 style，样式表这一行只是它缺席时的落点 */
   [data-scope='ellipsis'][data-part='root'] {
@@ -22,7 +27,7 @@
   }
 
   /* 铺开：裁剪整个撤掉。写在两档之后，压得住上面同权重的那两条 */
-  [data-scope='ellipsis'][data-part='root'][data-expanded] {
+  [data-scope='ellipsis'][data-part='root'][data-state='open'] {
     display: block;
     overflow: visible;
     white-space: normal;

package/css/empty-state.css

@@ -1,11 +1,16 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='empty-state'] {
+    --xh-empty-state-skin: 1;
+  }
+
   [data-scope='empty-state'][data-part='root'] {
     /* 三个尺寸档只换这几个私有槽，图标与标题都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */
     --xh-_empty-state-gap: var(--xh-stack-gap-md);
     --xh-_empty-state-py: var(--xh-section-py);
-    --xh-_empty-state-icon-size: 2.5rem;
-    --xh-_empty-state-title-size: var(--xh-font-size-lg);
+    --xh-_empty-state-icon-size: var(--xh-glyph-size-2xl);
+    --xh-_empty-state-title-size: var(--xh-control-font-lg);
     /* 说明的读行宽度：整句话不收窄就会拉成一条难读的长行 */
     --xh-_empty-state-measure: 32rem;
 
@@ -28,15 +33,15 @@
   [data-scope='empty-state'][data-part='root'][data-size='sm'] {
     --xh-_empty-state-gap: var(--xh-space-2);
     --xh-_empty-state-py: var(--xh-space-4);
-    --xh-_empty-state-icon-size: 2rem;
-    --xh-_empty-state-title-size: var(--xh-font-size-md);
+    --xh-_empty-state-icon-size: var(--xh-glyph-size-xl);
+    --xh-_empty-state-title-size: var(--xh-control-font-md);
   }
 
   [data-scope='empty-state'][data-part='root'][data-size='lg'] {
     --xh-_empty-state-gap: var(--xh-space-6);
     --xh-_empty-state-py: var(--xh-space-8);
-    --xh-_empty-state-icon-size: 3.5rem;
-    --xh-_empty-state-title-size: var(--xh-font-size-xl);
+    --xh-_empty-state-icon-size: var(--xh-glyph-size-3xl);
+    --xh-_empty-state-title-size: var(--xh-text-heading-3-size);
   }
 
   [data-scope='empty-state'][data-part='icon'] {
@@ -48,7 +53,7 @@
     inline-size: var(--xh-empty-state-icon-size, var(--xh-_empty-state-icon-size));
     color: var(--xh-empty-state-icon-fg, var(--xh-fg-subtle));
     /* 图标常是一个字形，字号跟着图标框走，line-height 不再另占高度 */
-    font-size: var(--xh-empty-state-icon-font-size, var(--xh-font-size-3xl));
+    font-size: var(--xh-empty-state-icon-font-size, var(--xh-text-heading-1-size));
     line-height: var(--xh-leading-none);
   }
 

package/css/field.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='field'] {
+    --xh-field-skin: 1;
+  }
+
   [data-scope='field'][data-part='root'] {
     display: flex;
     flex-direction: column;
@@ -17,8 +22,10 @@
   [data-scope='form'][data-part='root'][data-layout='horizontal'] [data-scope='field'][data-part='label'] {
     grid-column: 1;
     justify-self: end;
-    /* 与控件的首行文字对齐：按控件高度撑一行再居中 */
-    line-height: var(--xh-control-h-md);
+    /* 与控件的首行文字对齐：行高保持正文行距（标签折行时每行不会撑成一个控件高），
+       上下留白把单行文本盒撑到控件高度；配的是哪一档控件由 --xh-field-control-h 告诉它 */
+    line-height: var(--xh-field-label-leading, var(--xh-leading-normal));
+    padding-block: calc((var(--xh-field-control-h, var(--xh-control-h-md)) - 1lh) / 2);
   }
 
   [data-scope='form'][data-part='root'][data-layout='horizontal'][data-label-align='start'] [data-scope='field'][data-part='label'] {
@@ -42,7 +49,7 @@
 
   /* 必填星号：跟着根上的 data-required 亮，选填不标 */
   [data-scope='field'][data-part='root'][data-required] [data-part='label']::after {
-    content: '*';
+    content: var(--xh-glyph-mark-required);
     margin-inline-start: var(--xh-space-1);
     color: var(--xh-field-label-star, var(--xh-fg-danger));
   }
@@ -60,12 +67,13 @@
   }
 
   [data-scope='field'][data-part='control']:focus-visible {
+    border-color: var(--xh-field-control-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
 
   [data-scope='field'][data-part='control'][data-invalid] {
-    border-color: var(--xh-field-control-border-invalid, var(--xh-color-danger-500));
+    border-color: var(--xh-field-control-border-invalid, var(--xh-border-invalid));
   }
 
   /* 禁用由作者在控件上落原生 disabled，样式统一走 data-disabled */
@@ -78,7 +86,7 @@
   [data-scope='field'][data-part='description'] {
     margin: 0;
     color: var(--xh-field-description-fg, var(--xh-fg-muted));
-    font-size: var(--xh-field-description-font-size, var(--xh-font-size-sm));
+    font-size: var(--xh-field-description-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-leading-normal);
   }
 
@@ -90,7 +98,7 @@
   [data-scope='field'][data-part='error-text'] {
     margin: 0;
     color: var(--xh-field-error-fg, var(--xh-fg-danger));
-    font-size: var(--xh-field-error-font-size, var(--xh-font-size-sm));
+    font-size: var(--xh-field-error-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-leading-normal);
   }
 }

package/css/fieldset.css

@@ -0,0 +1,69 @@
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='fieldset'] {
+    --xh-fieldset-skin: 1;
+  }
+
+  /* 抹掉 UA 给 <fieldset> 的边框、内外边距与 min-content 下限，间距全部改由令牌给。
+     display 落在 fieldset 的匿名内容盒上：首个 <legend> 不在这个盒子里，
+     所以 gap 只作用于组内各块，legend 与内容之间的留白由 legend 自己的下外边距给。 */
+  [data-scope='fieldset'][data-part='root'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-fieldset-gap, var(--xh-space-4));
+    margin: 0;
+    border: 0;
+    padding: 0;
+    min-inline-size: 0;
+  }
+
+  [data-scope='fieldset'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='fieldset'][data-part='legend'] {
+    padding: 0;
+    margin-block-end: var(--xh-fieldset-legend-gap, var(--xh-space-2));
+    color: var(--xh-fieldset-legend-fg, var(--xh-fg-default));
+    font-size: var(--xh-fieldset-legend-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-fieldset-legend-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-tight);
+  }
+
+  /* 整组无效时组标题转警示色：没渲染错误文案的字段集上，这是屏幕上唯一变化的东西 */
+  [data-scope='fieldset'][data-part='root'][data-invalid] > [data-scope='fieldset'][data-part='legend'] {
+    color: var(--xh-fieldset-legend-fg-invalid, var(--xh-fg-danger));
+  }
+
+  /* 整组禁用时组标题跟着变淡；组内控件由原生 fieldset[disabled] 各自呈现禁用态。
+     选择器与上一条同权重且排在后面，禁用与无效同时为真时以禁用为准。 */
+  [data-scope='fieldset'][data-part='root'] > [data-scope='fieldset'][data-part='legend'][data-disabled] {
+    color: var(--xh-fieldset-legend-fg-disabled, var(--xh-fg-subtle));
+  }
+
+  /* 必填星号：跟着根上的 data-required 亮，选填不标 */
+  [data-scope='fieldset'][data-part='root'][data-required] > [data-scope='fieldset'][data-part='legend']::after {
+    content: var(--xh-glyph-mark-required);
+    margin-inline-start: var(--xh-space-1);
+    color: var(--xh-fieldset-legend-star, var(--xh-fg-danger));
+  }
+
+  [data-scope='fieldset'][data-part='helper-text'] {
+    margin: 0;
+    color: var(--xh-fieldset-helper-fg, var(--xh-fg-muted));
+    font-size: var(--xh-fieldset-helper-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-leading-normal);
+  }
+
+  [data-scope='fieldset'][data-part='helper-text'][data-disabled] {
+    color: var(--xh-fieldset-helper-fg-disabled, var(--xh-fg-subtle));
+  }
+
+  /* 不 invalid 时节点带 hidden：此处不声明 display，交给浏览器的 [hidden] 规则收起 */
+  [data-scope='fieldset'][data-part='error-text'] {
+    margin: 0;
+    color: var(--xh-fieldset-error-fg, var(--xh-fg-danger));
+    font-size: var(--xh-fieldset-error-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-leading-normal);
+  }
+}

package/css/file-upload.css

@@ -1,5 +1,13 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='file-upload'] {
+    --xh-file-upload-skin: 1;
+  }
+
   [data-scope='file-upload'][data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-file-upload-icon-size, var(--xh-glyph-size-text));
+
     display: flex;
     flex-direction: column;
     gap: var(--xh-file-upload-gap, var(--xh-space-3));
@@ -67,7 +75,7 @@
   }
 
   [data-scope='file-upload'][data-part='dropzone'][data-invalid] {
-    border-color: var(--xh-file-upload-dropzone-border-invalid, var(--xh-color-danger-500));
+    border-color: var(--xh-file-upload-dropzone-border-invalid, var(--xh-border-invalid));
   }
 
   /* 投放区是 div，没有原生 disabled 可用，禁用态只能靠 data-disabled 表达，写 :disabled 永远不命中 */
@@ -210,7 +218,7 @@
   [data-scope='file-upload'][data-part='item-size-text'] {
     flex: none;
     color: var(--xh-file-upload-size-fg, var(--xh-fg-subtle));
-    font-size: var(--xh-file-upload-size-font-size, var(--xh-font-size-xs));
+    font-size: var(--xh-file-upload-size-font-size, var(--xh-text-caption-size));
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
@@ -225,8 +233,8 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--xh-file-upload-delete-size, var(--xh-control-h-sm));
-    block-size: var(--xh-file-upload-delete-size, var(--xh-control-h-sm));
+    inline-size: var(--xh-file-upload-delete-size, var(--xh-control-action-size));
+    block-size: var(--xh-file-upload-delete-size, var(--xh-control-action-size));
     padding: 0;
     border: 0;
     border-radius: var(--xh-file-upload-delete-radius, var(--xh-shape-control));
@@ -235,6 +243,9 @@
     font-family: inherit;
     line-height: var(--xh-leading-none);
     cursor: pointer;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='file-upload'][data-part='item-delete-trigger'][hidden] {
@@ -246,6 +257,12 @@
     color: var(--xh-file-upload-delete-fg-hover, var(--xh-fg-danger-hover));
   }
 
+  /* 按下：换到按压档底色并轻微下压，松手弹回；禁用钮不压 */
+  [data-scope='file-upload'][data-part='item-delete-trigger']:not(:disabled):active {
+    background: var(--xh-file-upload-delete-bg-active, var(--xh-bg-subtle-active));
+    scale: var(--xh-motion-scale-press);
+  }
+
   [data-scope='file-upload'][data-part='item-delete-trigger']:focus-visible {
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
@@ -256,8 +273,7 @@
     cursor: not-allowed;
   }
 
-  /* 清空是收尾动作，画成不带底色的文字按钮：它比"选择文件"次要，
-     且列表为空时连接层会给原生 disabled，那时它本就该看着点不动 */
+  /* 清空是收尾动作，画成不带底色的文字按钮：它比"选择文件"次要 */
   [data-scope='file-upload'][data-part='clear-trigger'] {
     display: inline-flex;
     flex: none;
@@ -272,9 +288,12 @@
     background: transparent;
     color: var(--xh-file-upload-clear-fg, var(--xh-fg-muted));
     font-family: inherit;
-    font-size: var(--xh-file-upload-clear-font-size, var(--xh-font-size-xs));
+    font-size: var(--xh-file-upload-clear-font-size, var(--xh-text-caption-size));
     line-height: var(--xh-leading-none);
     cursor: pointer;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='file-upload'][data-part='clear-trigger'][hidden] {
@@ -286,13 +305,37 @@
     color: var(--xh-file-upload-clear-fg-hover, var(--xh-fg-default));
   }
 
+  /* 按下：换到按压档底色并轻微下压，松手弹回；禁用钮不压 */
+  [data-scope='file-upload'][data-part='clear-trigger']:not(:disabled):active {
+    background: var(--xh-file-upload-clear-bg-active, var(--xh-bg-subtle-active));
+    scale: var(--xh-motion-scale-press);
+  }
+
   [data-scope='file-upload'][data-part='clear-trigger']:focus-visible {
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
 
+  /* 空列表时按钮照常可按（收起它会让焦点掉回 body），只把前景压淡一档 */
+  [data-scope='file-upload'][data-part='clear-trigger'][data-empty] {
+    color: var(--xh-fg-subtle);
+  }
+
   [data-scope='file-upload'][data-part='clear-trigger']:disabled {
     color: var(--xh-fg-disabled);
     cursor: not-allowed;
   }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-scope='file-upload'][data-part='item-delete-trigger']:empty::before,
+  [data-scope='file-upload'][data-part='clear-trigger']: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-close) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+  }
 }

package/css/flex.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='flex'] {
+    --xh-flex-skin: 1;
+  }
+
   [data-scope='flex'][data-part='root'] {
     display: flex;
     flex-wrap: nowrap;

package/css/float-button.css

@@ -1,10 +1,18 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='float-button'] {
+    --xh-float-button-skin: 1;
+  }
+
   /* 定位壳：钉在视口一角。贴边距离由连接层写进这个盒子的内联 style，
      样式表这一行只是它缺席时的落点；贴的是哪两条边看 data-placement。
      另一件必须提防的事：fixed 认的是视口，祖先上一旦出现
      transform / filter / backdrop-filter / contain，包含块就被抢走，整组立刻贴错位置——
      所以别往覆盖钩子里加这几个属性。 */
   [data-scope='float-button'][data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-float-button-icon-size, var(--xh-glyph-size-text));
+
     --xh-_float-button-offset: var(--xh-space-6);
     /* 触发器与展开的每一条动作共用这两个私有槽，换档只改这里 */
     --xh-_float-button-size: var(--xh-float-button-size, var(--xh-control-h-lg));
@@ -62,7 +70,7 @@
     background: var(--xh-float-button-bg, var(--xh-bg-surface-raised));
     color: var(--xh-float-button-fg, var(--xh-fg-default));
     /* 浮在内容之上，靠投影与页面拉开层次 */
-    box-shadow: var(--xh-elevation-3);
+    box-shadow: var(--xh-float-button-shadow, var(--xh-elevation-sheet));
     cursor: pointer;
     transition:
       background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
@@ -118,4 +126,16 @@
     block-size: var(--xh-_float-button-size);
     border-radius: var(--xh-_float-button-radius);
   }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-scope='float-button'][data-part='trigger']: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-plus) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-plus) center / contain no-repeat;
+  }
 }