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

package/css/tag.css

@@ -0,0 +1,179 @@
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='tag'] {
+    --xh-tag-skin: 1;
+  }
+
+  /* 缺省态：md 档、无语气。三轴规则只在它之上叠加，不改这一条 */
+  [data-scope='tag'][data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-tag-icon-size, var(--xh-glyph-size-text));
+
+    /* 尺寸档只换这四个私有槽，下面的声明从它们取值 */
+    --xh-_tag-gap: var(--xh-space-1);
+    --xh-_tag-px: var(--xh-space-2);
+    --xh-_tag-py: var(--xh-space-0_5);
+    --xh-_tag-font-size: var(--xh-text-caption-size);
+
+    display: inline-flex;
+    align-items: center;
+    /* 一行放不下时标签自己截断，而不是把整行撑破 */
+    max-inline-size: 100%;
+    gap: var(--xh-tag-gap, var(--xh-_tag-gap));
+    padding-inline: var(--xh-tag-px, var(--xh-_tag-px));
+    padding-block: var(--xh-tag-py, var(--xh-_tag-py));
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-tag-radius, var(--xh-shape-control));
+    background: var(--xh-tag-bg, var(--xh-bg-subtle));
+    color: var(--xh-tag-fg, var(--xh-fg-default));
+    font-size: var(--xh-tag-font-size, var(--xh-_tag-font-size));
+    font-weight: var(--xh-tag-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-none);
+    /* 随文排时与正文基线对齐 */
+    vertical-align: middle;
+  }
+
+  /* 收起态连接层给的是 hidden 属性，而上面声明了 display——
+     漏掉这条，摘掉的标签还会一直摊在页面上 */
+  [data-scope='tag'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 文字过长时截断，关闭钮才始终留在标签里 */
+  [data-scope='tag'][data-part='label'] {
+    overflow: hidden;
+    min-inline-size: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-scope='tag'][data-part='close-trigger'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    /* 命中区取标签内移除钮的指示符尺寸，不随标签档位缩小 */
+    block-size: var(--xh-tag-close-size, var(--xh-control-indicator-size));
+    inline-size: var(--xh-tag-close-size, var(--xh-control-indicator-size));
+    /* 命中区比字形大一圈，往内收一格才不会在标签右缘留出一块空白 */
+    margin-inline-end: calc(-1 * var(--xh-space-1));
+    border: 0;
+    border-radius: var(--xh-tag-close-radius, var(--xh-shape-inset));
+    background: transparent;
+    /* 叉取标签自己的文字色：实心底上是浅字、淡底上是深字，不必逐形态各写一遍 */
+    color: var(--xh-tag-close-fg, currentColor);
+    /* 按钮不继承字族字号，不接回来的话标签里会突然冒出一段系统 UI 字体 */
+    font: 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);
+  }
+
+  /* closable=false 时连接层同时给了 hidden 与 disabled，这条是它真正收起的那一半 */
+  [data-scope='tag'][data-part='close-trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='tag'][data-part='close-trigger']:hover:not(:disabled) {
+    /* 底色从当前前景色调出来：标签的实心 / 淡底 / 描边各形态下都压得住 */
+    background: var(--xh-tag-close-bg-hover, color-mix(in oklab, currentColor 14%, transparent));
+  }
+
+  [data-scope='tag'][data-part='close-trigger']:not(:disabled):active {
+    background: var(--xh-tag-close-bg-active, color-mix(in oklab, currentColor 22%, transparent));
+    scale: var(--xh-motion-scale-press);
+  }
+
+  [data-scope='tag'][data-part='close-trigger']:disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='tag'][data-part='close-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    /* 环往内收：命中区贴着标签内缘，往外画会被相邻标签压住 */
+    outline-offset: calc(-1 * var(--xh-ring-offset));
+  }
+
+  /* —— 形态 —— */
+  /* 形态只决定颜色怎么用。每个形态拆成两条：先是没写语气时的基线配色，
+     再是写了语气时的覆盖。语气槽会沿继承流下来，覆盖那条必须带 [data-tone] 限定，
+     否则一枚没写语气的标签只要落在带 data-tone 的容器里（警告提示、吐司、按钮内）
+     就会跟着染色 */
+  [data-scope='tag'][data-part='root'][data-variant='solid'] {
+    border-color: transparent;
+    background: var(--xh-tag-bg, var(--xh-bg-brand));
+    color: var(--xh-tag-fg, var(--xh-fg-on-brand));
+  }
+
+  [data-scope='tag'][data-part='root'][data-variant='solid'][data-tone] {
+    background: var(--xh-tag-bg, var(--xh-_tone, var(--xh-bg-brand)));
+    color: var(--xh-tag-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
+  }
+
+  [data-scope='tag'][data-part='root'][data-variant='subtle'] {
+    border-color: transparent;
+    background: var(--xh-tag-bg, var(--xh-bg-subtle));
+    color: var(--xh-tag-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='tag'][data-part='root'][data-variant='subtle'][data-tone] {
+    background: var(--xh-tag-bg, var(--xh-_tone-subtle, var(--xh-bg-subtle)));
+    color: var(--xh-tag-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
+  }
+
+  [data-scope='tag'][data-part='root'][data-variant='outline'] {
+    border-color: var(--xh-tag-border, var(--xh-border-default));
+    background: transparent;
+    color: var(--xh-tag-fg, var(--xh-fg-default));
+  }
+
+  /* 描边档的边就是这枚标签的全部轮廓，走「可操作区边界」那一支：
+     兑了底色的 --xh-_tone-border 六族都在 1.44-2.18，当轮廓看不清 */
+  [data-scope='tag'][data-part='root'][data-variant='outline'][data-tone] {
+    border-color: var(--xh-tag-border, var(--xh-_tone-border-control, var(--xh-border-default)));
+    color: var(--xh-tag-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
+  }
+
+  /* —— 尺寸 —— */
+  /* 标签是随文排的标记，不占控件行高，档位走间距与字号而不是 control-h */
+  [data-scope='tag'][data-part='root'][data-size='sm'] {
+    --xh-_tag-gap: var(--xh-space-0_5);
+    --xh-_tag-px: var(--xh-space-1_5);
+    --xh-_tag-py: var(--xh-space-0);
+  }
+
+  [data-scope='tag'][data-part='root'][data-size='lg'] {
+    --xh-_tag-gap: var(--xh-space-1_5);
+    --xh-_tag-px: var(--xh-space-3);
+    --xh-_tag-py: var(--xh-space-1);
+    --xh-_tag-font-size: var(--xh-text-secondary-size);
+  }
+
+  /* —— 禁用 —— */
+  /* 排在形态之后，靠源序压过形态给的配色。第二条选择器专为写了语气的标签而设：
+     语气覆盖那几条比第一条多一个属性，不把 [data-tone] 一起写上，
+     禁用的标签会留着语气实心底、只有文字变灰，底上几乎看不见字。
+     用了 fg-disabled 就不再叠 opacity */
+  [data-scope='tag'][data-part='root'][data-disabled],
+  [data-scope='tag'][data-part='root'][data-tone][data-disabled] {
+    border-color: var(--xh-tag-border-disabled, var(--xh-border-subtle));
+    background: var(--xh-tag-bg-disabled, var(--xh-bg-muted));
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-scope='tag'][data-part='close-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/tags-input.css

@@ -7,14 +7,17 @@
   /* root 只负责纵向堆叠：标题一行、控件一行。可见的那个"框"长在 control 上，
      因为标签、输入框、清空按钮都在它里面，边框必须把三者一起圈住 */
   [data-scope='tags-input'][data-part='root'] {
+    /* 作者塞进来的图标跟着控件的尺寸档走；它自己写了 size 时仍以作者的为准 */
+    --xh-icon-size: var(--xh-tags-input-icon-size, var(--xh-glyph-size-md));
+
     /* 尺寸档只换这六个私有槽，标题、框、输入框与标签都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */
     --xh-_tags-input-control-h: var(--xh-control-h-md);
     --xh-_tags-input-control-px: var(--xh-control-px-md);
-    --xh-_tags-input-control-gap: var(--xh-control-gap-sm);
-    --xh-_tags-input-input-font-size: var(--xh-text-body-size);
-    --xh-_tags-input-item-font-size: var(--xh-font-size-sm);
-    --xh-_tags-input-label-font-size: var(--xh-text-label-size);
+    --xh-_tags-input-control-gap: var(--xh-control-gap-md);
+    --xh-_tags-input-input-font-size: var(--xh-control-font-md);
+    --xh-_tags-input-item-font-size: var(--xh-control-caption-md);
+    --xh-_tags-input-label-font-size: var(--xh-control-font-md);
     /* 形态档只换这三个私有槽，缺省这一份就是描边式（描边 + 画布底） */
     --xh-_tags-input-control-bg: var(--xh-bg-canvas);
     --xh-_tags-input-control-border: var(--xh-border-control);
@@ -60,20 +63,23 @@
 
   /* —— 尺寸 —— */
   [data-scope='tags-input'][data-part='root'][data-size='sm'] {
+    --xh-icon-size: var(--xh-tags-input-icon-size, var(--xh-glyph-size-sm));
     --xh-_tags-input-control-h: var(--xh-control-h-sm);
     --xh-_tags-input-control-px: var(--xh-control-px-sm);
-    --xh-_tags-input-input-font-size: var(--xh-font-size-sm);
-    --xh-_tags-input-item-font-size: var(--xh-font-size-xs);
-    --xh-_tags-input-label-font-size: var(--xh-font-size-sm);
+    --xh-_tags-input-control-gap: var(--xh-control-gap-sm);
+    --xh-_tags-input-input-font-size: var(--xh-control-font-sm);
+    --xh-_tags-input-item-font-size: var(--xh-control-caption-sm);
+    --xh-_tags-input-label-font-size: var(--xh-control-font-sm);
   }
 
   [data-scope='tags-input'][data-part='root'][data-size='lg'] {
+    --xh-icon-size: var(--xh-tags-input-icon-size, var(--xh-glyph-size-lg));
     --xh-_tags-input-control-h: var(--xh-control-h-lg);
     --xh-_tags-input-control-px: var(--xh-control-px-lg);
     --xh-_tags-input-control-gap: var(--xh-control-gap-lg);
-    --xh-_tags-input-input-font-size: var(--xh-font-size-lg);
-    --xh-_tags-input-item-font-size: var(--xh-font-size-md);
-    --xh-_tags-input-label-font-size: var(--xh-font-size-lg);
+    --xh-_tags-input-input-font-size: var(--xh-control-font-lg);
+    --xh-_tags-input-item-font-size: var(--xh-control-caption-lg);
+    --xh-_tags-input-label-font-size: var(--xh-control-font-lg);
   }
 
   [data-scope='tags-input'][data-part='label'] {
@@ -94,8 +100,10 @@
     flex-wrap: wrap;
     align-items: center;
     gap: var(--xh-tags-input-control-gap, var(--xh-_tags-input-control-gap));
+    min-inline-size: var(--xh-tags-input-control-min-w, var(--xh-control-min-w));
     min-block-size: var(--xh-tags-input-control-h, var(--xh-_tags-input-control-h));
-    padding-block: var(--xh-tags-input-control-py, var(--xh-space-1));
+    /* 纵向只留半档：标签行加上下内距要装进控件档的高度里 */
+    padding-block: var(--xh-tags-input-control-py, var(--xh-space-0_5));
     padding-inline: var(--xh-tags-input-control-px, var(--xh-_tags-input-control-px));
     border: var(--xh-stroke-thin) solid var(--xh-tags-input-control-border, var(--xh-_tags-input-control-border));
     border-radius: var(--xh-tags-input-control-radius, var(--xh-shape-control));
@@ -116,7 +124,8 @@
 
   /* 焦点环画在这个框上：用户眼里"被聚焦的控件"就是整个框，
      而真正持有焦点的是里面的 input（它自己那圈环因此让位，见下） */
-  [data-scope='tags-input'][data-part='control']:focus-within {
+  [data-scope='tags-input'][data-part='control']:focus-within:not([data-disabled]) {
+    border-color: var(--xh-tags-input-control-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
     outline: var(--xh-ring-width) solid var(--xh-_tags-input-ring);
     outline-offset: var(--xh-ring-offset);
   }
@@ -124,11 +133,14 @@
   /* 顶到上限：再加进不去，边框先给个提示。放在 invalid 之前，
      两者同时成立时按源序让 invalid 赢——真出错比"装满了"要紧 */
   [data-scope='tags-input'][data-part='control'][data-at-max] {
-    border-color: var(--xh-tags-input-control-border-at-max, var(--xh-color-warning-600));
+    border-color: var(--xh-tags-input-control-border-at-max, var(--xh-border-at-limit));
   }
 
   [data-scope='tags-input'][data-part='control'][data-invalid] {
-    border-color: var(--xh-tags-input-control-border-invalid, var(--xh-color-danger-500));
+    border-color: var(--xh-tags-input-control-border-invalid, var(--xh-border-invalid));
+
+    /* 校验失败时环也跟着变红：两圈等宽相邻却一红一蓝，读的人不知道哪个才是当前状态 */
+    --xh-_tags-input-ring: var(--xh-ring-invalid);
   }
 
   /* 只读仍可聚焦、可复制，所以不置灰，只把底色压下去表示"改不动" */
@@ -156,7 +168,8 @@
     /* 表单控件不继承页面字体，只给字号会让输入框用 UA 默认字族，与周围文本对不上 */
     font-family: inherit;
     font-size: var(--xh-tags-input-input-font-size, var(--xh-_tags-input-input-font-size));
-    line-height: var(--xh-leading-normal);
+    /* 行盒收到标签那一行的高度以内，输入框不去顶高整个框 */
+    line-height: var(--xh-leading-tight);
   }
 
   [data-scope='tags-input'][data-part='input']::placeholder {
@@ -217,7 +230,7 @@
     align-items: center;
     gap: var(--xh-tags-input-item-gap, var(--xh-space-1));
     max-inline-size: 100%;
-    padding-block: var(--xh-tags-input-item-py, var(--xh-space-1));
+    padding-block: var(--xh-tags-input-item-py, var(--xh-space-0_5));
     padding-inline: var(--xh-tags-input-item-px, var(--xh-space-2));
     user-select: none;
   }
@@ -235,24 +248,26 @@
     text-overflow: ellipsis;
   }
 
-  /* 删除按钮画成胶囊里的小圆钮，与文字同一行、不撑高胶囊 */
+  /* 删除按钮画成胶囊里的小圆钮，与文字同一行，尺寸取控件指示件档（随密度收） */
   [data-scope='tags-input'][data-part='item-delete-trigger'] {
     display: inline-flex;
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--xh-tags-input-delete-size, 1rem);
-    block-size: var(--xh-tags-input-delete-size, 1rem);
+    inline-size: var(--xh-tags-input-delete-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-tags-input-delete-size, var(--xh-control-indicator-size));
     padding: 0;
     border: 0;
-    border-radius: var(--xh-radius-full);
+    border-radius: var(--xh-tags-input-delete-radius, var(--xh-shape-inset));
     background: var(--xh-tags-input-delete-bg, transparent);
     color: var(--xh-tags-input-delete-fg, var(--xh-fg-muted));
     font-family: inherit;
-    font-size: var(--xh-tags-input-delete-font-size, var(--xh-font-size-xs));
+    font-size: var(--xh-tags-input-delete-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);
+    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='tags-input'][data-part='item-delete-trigger'][hidden] {
@@ -271,6 +286,7 @@
 
   [data-scope='tags-input'][data-part='item-delete-trigger']:active:not(:disabled) {
     background: var(--xh-tags-input-delete-bg-active, var(--xh-bg-subtle-active));
+    scale: var(--xh-motion-scale-press);
   }
 
   /* 按钮不占 Tab 位（tabindex=-1），正常操作走不到这里；
@@ -293,7 +309,7 @@
      自己加一条 display 反而要再补一条 [hidden] 规则去抵消它 */
   [data-scope='tags-input'][data-part='item-input'] {
     max-inline-size: 100%;
-    padding-block: var(--xh-tags-input-item-py, var(--xh-space-1));
+    padding-block: var(--xh-tags-input-item-py, var(--xh-space-0_5));
     padding-inline: var(--xh-tags-input-item-px, var(--xh-space-2));
     border: var(--xh-stroke-thin) solid var(--xh-tags-input-item-input-border, var(--xh-border-control));
     border-radius: var(--xh-tags-input-item-radius, var(--xh-shape-pill));
@@ -317,49 +333,71 @@
     cursor: not-allowed;
   }
 
-  /* 清空按钮贴在框的末端，与输入框同一行 */
+  /* 清空按钮贴在框的末端，与输入框同一行，尺寸取控件动作钮档（随密度收） */
   [data-scope='tags-input'][data-part='clear-trigger'] {
     display: inline-flex;
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--xh-tags-input-clear-size, 1.25rem);
-    block-size: var(--xh-tags-input-clear-size, 1.25rem);
+    inline-size: var(--xh-tags-input-action-size, var(--xh-control-action-size));
+    block-size: var(--xh-tags-input-action-size, var(--xh-control-action-size));
     padding: 0;
     border: 0;
-    border-radius: var(--xh-radius-full);
-    background: var(--xh-tags-input-clear-bg, transparent);
-    color: var(--xh-tags-input-clear-fg, var(--xh-fg-muted));
+    border-radius: var(--xh-tags-input-action-radius, var(--xh-shape-control));
+    background: var(--xh-tags-input-action-bg, transparent);
+    color: var(--xh-tags-input-action-fg, var(--xh-fg-muted));
     font-family: inherit;
-    font-size: var(--xh-tags-input-clear-font-size, var(--xh-font-size-sm));
+    font-size: var(--xh-tags-input-action-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-leading-none);
     cursor: pointer;
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
+  /* 没值可清时连接层只打 hidden；上面那条 display 会盖掉 UA 规则，少了这条按钮就一直杵着 */
   [data-scope='tags-input'][data-part='clear-trigger'][hidden] {
     display: none;
   }
 
-  [data-scope='tags-input'][data-part='clear-trigger']:hover:not(:disabled) {
-    background: var(--xh-tags-input-clear-bg-hover, var(--xh-bg-subtle-hover));
-    color: var(--xh-tags-input-clear-fg-hover, var(--xh-fg-default));
+  [data-scope='tags-input'][data-part='clear-trigger']:hover {
+    background: var(--xh-tags-input-action-bg-hover, var(--xh-bg-subtle-hover));
+    color: var(--xh-tags-input-action-fg-hover, var(--xh-fg-default));
   }
 
-  [data-scope='tags-input'][data-part='clear-trigger']:active:not(:disabled) {
-    background: var(--xh-tags-input-clear-bg-active, var(--xh-bg-subtle-active));
+  [data-scope='tags-input'][data-part='clear-trigger']:active {
+    background: var(--xh-tags-input-action-bg-active, var(--xh-bg-subtle-active));
+    scale: var(--xh-motion-scale-press);
   }
 
+  /* 按钮不占 Tab 位（tabindex=-1），正常操作走不到这里；
+     留着焦点环是给程序化聚焦兜底——清完把焦点交回输入框之前，它确实短暂持有过焦点 */
   [data-scope='tags-input'][data-part='clear-trigger']:focus-visible {
     outline: var(--xh-ring-width) solid var(--xh-_tags-input-ring);
-    /* 比默认档窄一道：它长在胶囊里，按默认偏移画会压到相邻胶囊 */
+    /* 比默认档窄一道：它长在框的末端，按默认偏移画会压到相邻胶囊 */
     outline-offset: var(--xh-stroke-thin);
   }
 
-  /* 没东西可清、只读或禁用时按钮转灰但不收起：位置留着，加进第一个标签就亮 */
-  [data-scope='tags-input'][data-part='clear-trigger']:disabled {
-    background: transparent;
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-scope='tags-input'][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;
+  }
+
+  [data-scope='tags-input'][data-part='item-delete-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;
   }
 }