@xihan-ui/styles 1.0.0 → 2.0.0

package/css/editable.css

@@ -1,17 +1,58 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* Editable 独立皮肤同时传递引入字段视觉盒与字段内动作；full bundle 递归去重。 */
+@import '../family/field-chrome.css';
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='editable'] {
     --xh-editable-skin: 1;
   }
 
-  /* 就地编辑是"一行文字里的一处可改内容"：标题、显示区与按钮天然同行，
-     所以根是一条横向的行，而不是文本框那种"标题一行、控件一行"的竖排。
-     要竖排的作者把 flex-direction 覆盖掉即可，其余尺寸都长在各自的角色节点上 */
+  /* 与 NumberField 同构：标题独占一行，control 是下面唯一的视觉盒；
+     预览/输入占据盒内左侧，编辑或确认/取消动作收在同一盒的逻辑末端。
+     组件层只把既有公开槽映射到家族合同；形态三档由家族按 control 上的 data-variant 生成，皮肤不再声明。 */
   [data-scope='editable'][data-part='root'] {
+    --xh-icon-size: var(--xh-editable-icon-size, var(--xh-glyph-size-md));
+
+    /* 尺寸档只换这三个私有槽，预览区、输入框与动作钮都从 root 继承它们，
+       换档不必给每个部件各写一条选择器。 */
+    --xh-_editable-h: var(--xh-control-h-md);
+    --xh-_editable-px: var(--xh-control-px-md);
+    --xh-_editable-font-size: var(--xh-control-font-md);
+    --xh-_editable-control-gap: 0;
+
+    /* 盒内那道分隔线的长度：取钮高的一半，线的上下各留一截空白，不与钮等高 */
+    --xh-_editable-divider-h: 50%;
+
     display: inline-flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--xh-editable-gap, var(--xh-space-2));
+    flex-direction: column;
+    gap: var(--xh-editable-gap, var(--xh-space-1));
+    /* 不传尺寸时一律这么宽，宽度不随内容走；父容器给不出这么宽时整件跟着收，地板同步让步，不越出父容器。
+       地板不高过缺省宽：使用者把缺省宽钉到底线以下时不必再放开底线 */
+    inline-size: var(--xh-editable-control-w, var(--xh-control-w));
+    min-inline-size: min(var(--xh-editable-control-w, var(--xh-control-w)), var(--xh-editable-control-min-w, var(--xh-control-min-w)), 100%);
+    max-inline-size: 100%;
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  [data-scope='editable'][data-part='root'][data-size='sm'] {
+    --xh-icon-size: var(--xh-editable-icon-size, var(--xh-glyph-size-sm));
+    --xh-_editable-h: var(--xh-control-h-sm);
+    --xh-_editable-px: var(--xh-control-px-sm);
+    --xh-_editable-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-scope='editable'][data-part='root'][data-size='lg'] {
+    --xh-icon-size: var(--xh-editable-icon-size, var(--xh-glyph-size-lg));
+    --xh-_editable-h: var(--xh-control-h-lg);
+    --xh-_editable-px: var(--xh-control-px-lg);
+    --xh-_editable-font-size: var(--xh-control-font-lg);
   }
 
   /* 只要声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
@@ -23,7 +64,6 @@
     color: var(--xh-editable-label-fg, var(--xh-fg-default));
     font-size: var(--xh-editable-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-editable-label-font-weight, var(--xh-text-label-weight));
-    line-height: var(--xh-leading-none);
     /* 点标题会把人送进编辑态（预览态下 for 指着的输入框是收起的，点了没反应），
        所以光标要说明它可点 */
     cursor: pointer;
@@ -31,34 +71,24 @@
 
   [data-scope='editable'][data-part='label'][data-disabled] {
     color: var(--xh-editable-label-fg-disabled, var(--xh-fg-subtle));
-    cursor: not-allowed;
-  }
-
-  /* 预览区与输入框轮流上场，两者在同一处落脚：area 给这一处定最小宽高 */
-  [data-scope='editable'][data-part='area'] {
-    display: inline-flex;
-    align-items: center;
-    min-block-size: var(--xh-editable-area-min-h, var(--xh-control-h-md));
-    min-inline-size: var(--xh-editable-area-min-w, 6ch);
-  }
-
-  [data-scope='editable'][data-part='area'][hidden] {
-    display: none;
   }
 
-  /* 预览区的高度、内边距与边框都和输入框取同一档，只有描边是透明的：
-     单行值定在控件档上，多行值才往下长 */
+  /* 预览区只是 control 里的内容段，不再自成一只带圆角的盒子。 */
   [data-scope='editable'][data-part='preview'] {
     display: inline-flex;
+    flex: 1 1 auto;
     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));
+    inline-size: auto;
+    min-inline-size: 0;
+    min-block-size: var(--xh-editable-preview-min-h, var(--xh-_editable-h));
+    padding-inline: var(--xh-editable-preview-px, var(--xh-_editable-px));
     padding-block: 0;
-    border: var(--xh-stroke-thin) solid transparent;
-    border-radius: var(--xh-editable-preview-radius, var(--xh-shape-control));
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
     color: var(--xh-editable-preview-fg, var(--xh-fg-default));
-    font-size: var(--xh-editable-preview-font-size, var(--xh-text-body-size));
+    font-size: var(--xh-editable-preview-font-size, var(--xh-_editable-font-size));
     line-height: var(--xh-leading-normal);
     /* 值里的换行与连续空格照原样显示，过长的行断开而不撑破弹性行 */
     white-space: pre-wrap;
@@ -80,14 +110,6 @@
     cursor: text;
   }
 
-  [data-scope='editable'][data-part='preview']:not(
-    [data-activation-mode='none'],
-    [data-disabled],
-    [data-readonly]
-  ):hover {
-    background: var(--xh-editable-preview-bg-hover, var(--xh-bg-subtle-hover));
-  }
-
   /* 显示的是占位文字而不是真值，压淡以示区别 */
   [data-scope='editable'][data-part='preview'][data-placeholder] {
     color: var(--xh-editable-placeholder-fg, var(--xh-fg-subtle));
@@ -95,32 +117,24 @@
 
   [data-scope='editable'][data-part='preview'][data-disabled] {
     color: var(--xh-fg-disabled);
-    cursor: not-allowed;
-  }
-
-  /* 预览区是可聚焦节点（focus 模式下还占 Tab 位），焦点环不能省 */
-  [data-scope='editable'][data-part='preview']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
   }
 
+  /* 盒内 input：无边框无底无圆角无落影由家族重置，hover、focus 与 invalid 全交给 control；
+     行内内衬留给它自己（control 不给内衬），占位与自动填充的颜色经桥接槽下发 */
   [data-scope='editable'][data-part='input'] {
-    inline-size: 100%;
-    block-size: var(--xh-editable-input-h, var(--xh-control-h-md));
-    padding-inline: var(--xh-editable-input-px, var(--xh-control-px-md));
-    padding-block: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-editable-input-border, var(--xh-border-control));
-    border-radius: var(--xh-editable-input-radius, var(--xh-shape-control));
-    background: var(--xh-editable-input-bg, var(--xh-bg-canvas));
-    color: var(--xh-editable-input-fg, var(--xh-fg-default));
-    /* 表单控件不继承页面字体，只给字号会让输入框用 UA 默认字族，与预览区的文字对不上 */
-    font-family: inherit;
-    font-size: var(--xh-editable-input-font-size, var(--xh-text-body-size));
-    line-height: var(--xh-leading-normal);
-    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    --xh-field-input-fg: var(--xh-editable-input-fg, var(--xh-fg-default));
+    --xh-field-input-font-size: var(--xh-editable-input-font-size, var(--xh-_editable-font-size));
+    --xh-field-placeholder-fg: var(--xh-editable-placeholder-fg, var(--xh-fg-subtle));
+    --xh-field-autofill-bg: var(--xh-editable-input-autofill-bg, var(--xh-bg-canvas));
+    --xh-field-autofill-fg: var(--xh-editable-input-autofill-fg, var(--xh-fg-default));
+
+    flex: 1 1 auto;
+    inline-size: auto;
+    min-inline-size: 0;
+    padding-inline: var(--xh-editable-input-px, var(--xh-_editable-px));
   }
 
-  /* 预览态由连接层给 hidden；上面给了 inline-size 与 block-size 但没给 display，
+  /* 预览态由连接层给 hidden；家族给了 display 以外的盒声明但没给 display，
      UA 的 [hidden]{display:none} 仍然管用——这里补一条是防作者层另给 display */
   [data-scope='editable'][data-part='input'][hidden] {
     display: none;
@@ -128,129 +142,135 @@
 
   /* 宽度跟着内容走时交给原生 size 说了算，别再用 100% 把它撑满 */
   [data-scope='editable'][data-part='input'][data-auto-resize] {
+    flex: 0 1 auto;
     inline-size: auto;
   }
 
-  [data-scope='editable'][data-part='input']::placeholder {
-    color: var(--xh-editable-placeholder-fg, var(--xh-fg-subtle));
-  }
-
-  /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
-  [data-scope='editable'][data-part='input']:hover:not(:disabled, [data-invalid]) {
-    border-color: var(--xh-editable-input-border-hover, var(--xh-border-control-hover));
-  }
-
-  [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-border-invalid));
-  }
-
-  /* 只读仍可聚焦、可复制，不置灰，只把底色压下去表示"改不动" */
-  [data-scope='editable'][data-part='input'][readonly] {
-    background: var(--xh-editable-input-bg-readonly, var(--xh-bg-subtle));
-  }
-
-  /* 输入框是单体表单控件，禁用走原生 disabled */
-  [data-scope='editable'][data-part='input']:disabled {
-    background: var(--xh-editable-input-bg-disabled, var(--xh-bg-subtle));
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
-  }
-
+  /* 唯一视觉盒：描边、底色、圆角、聚焦环、五态与悬停由 Field Chrome 家族画在 control 上；
+     预览/输入和右侧动作只是盒内分段。控件不给内衬：内衬走预览区、input 与钮各自的盒。
+     不写 overflow: hidden——家族的粗指针热区伪元素会被它裁掉，且钮已不贴控件边 */
   [data-scope='editable'][data-part='control'] {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    gap: var(--xh-editable-control-gap, var(--xh-space-1));
+    --xh-field-control-height: var(--xh-editable-control-h, var(--xh-_editable-h));
+    --xh-field-control-padding-inline: var(--xh-editable-control-px, 0);
+    --xh-field-control-gap: var(--xh-editable-control-gap, var(--xh-_editable-control-gap));
+    --xh-field-control-min-inline-size: var(--xh-editable-control-min-w, var(--xh-control-min-w));
+    --xh-field-control-radius: var(--xh-editable-control-radius, var(--xh-shape-control));
+    --xh-field-bg-rest: var(--xh-editable-control-bg, var(--xh-_field-variant-bg-rest));
+    --xh-field-bg-hover: var(--xh-editable-control-bg-hover, var(--xh-_field-variant-bg-hover));
+    --xh-field-bg-read-only: var(--xh-editable-control-bg-readonly, var(--xh-_field-variant-bg-read-only));
+    --xh-field-bg-disabled: var(--xh-editable-control-bg-disabled, var(--xh-_field-variant-bg-disabled));
+    --xh-field-fg-rest: var(--xh-editable-control-fg, var(--xh-fg-default));
+    --xh-field-border-rest: var(--xh-editable-control-border, var(--xh-_field-variant-border-rest));
+    --xh-field-border-hover: var(--xh-editable-control-border-hover, var(--xh-_field-variant-border-hover));
+    --xh-field-border-focus: var(--xh-editable-control-border-focus, var(--xh-_field-variant-border-focus));
+    --xh-field-border-invalid: var(--xh-editable-control-border-invalid, var(--xh-_field-variant-border-invalid));
+    --xh-field-border-disabled: var(--xh-editable-control-border-disabled, var(--xh-_field-variant-border-disabled));
+    --xh-field-ring-focus: var(--xh-ring-focus);
+    --xh-field-ring-invalid: var(--xh-ring-invalid);
+    --xh-field-shadow-rest: var(--xh-editable-control-shadow, none);
+    /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
+    --xh-field-glyph-size: var(--xh-editable-icon-size, var(--xh-_field-size-glyph-size));
+
+    position: relative;
+    inline-size: 100%;
   }
 
   [data-scope='editable'][data-part='control'][hidden] {
     display: none;
   }
 
-  /* 三颗按钮共用一份皮肤：它们是同一种东西，只是干的活不同，
-     分开写迟早会改了一颗忘了另外两颗 */
+  /* 三颗动作与 NumberField 的加减钮一样是 control 内部的分段：正方视觉盒、inset 圆角、
+     悬停 100 / 按下 200 与 0.97 按压、粗指针热区、:focus-visible 关环与禁用面全由 Action Control 的
+     field-inset ghost 档给，组件只映射既有覆盖槽。常态只剩符号，悬停与按下才浮出底色 */
   [data-scope='editable'][data-part='edit-trigger'],
   [data-scope='editable'][data-part='submit-trigger'],
   [data-scope='editable'][data-part='cancel-trigger'] {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    block-size: var(--xh-editable-trigger-h, var(--xh-control-h-sm));
-    padding-inline: var(--xh-editable-trigger-px, var(--xh-control-px-sm));
-    padding-block: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-editable-trigger-border, var(--xh-border-control));
-    border-radius: var(--xh-editable-trigger-radius, var(--xh-shape-control));
-    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-text-secondary-size));
-    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);
+    --xh-action-visual-size: var(--xh-editable-trigger-size, var(--xh-_action-profile-visual-size));
+    --xh-action-min-inline-size: var(--xh-editable-trigger-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-editable-trigger-radius, var(--xh-shape-inset));
+    /* 底色阶梯由 ghost 档给（透明 → 100 → 200），使用者槽只作覆盖入口 */
+    --xh-action-bg-rest: var(--xh-editable-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-editable-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-editable-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-disabled: var(--xh-editable-trigger-bg-disabled, var(--xh-_action-variant-bg-disabled));
+    --xh-action-fg-rest: var(--xh-editable-trigger-fg, var(--xh-fg-default));
+    --xh-action-fg-hover: var(--xh-editable-trigger-fg-hover, var(--xh-fg-default));
+    --xh-action-border-rest: transparent;
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: none;
+    --xh-action-shadow-hover: none;
+    --xh-action-shadow-pressed: none;
+    --xh-action-font-size: var(--xh-editable-trigger-font-size, var(--xh-text-secondary-size));
+    /* 配方尚未把 profile 字形档灌进 --xh-icon-size，钮内字形先按 field-inset 档逐钮取值 */
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+
+    border-width: 0;
+  }
+
+  /* 每个状态的第一颗动作把整组推到逻辑末端；取消钮紧跟确认钮。 */
+  [data-scope='editable'][data-part='edit-trigger'],
+  [data-scope='editable'][data-part='submit-trigger'] {
+    margin-inline-start: auto;
   }
 
-  /* 三颗按钮按形态轮流收起，连接层给的是 hidden 属性；
-     上面那条 display 已把 UA 规则盖掉，少了这里三条按钮就一直杵着 */
-  [data-scope='editable'][data-part='edit-trigger'][hidden],
-  [data-scope='editable'][data-part='submit-trigger'][hidden],
-  [data-scope='editable'][data-part='cancel-trigger'][hidden] {
-    display: none;
+  /* 三颗动作默认是纯图标按钮；作者放了自己的图标后 :empty 不命中，不会叠两层。 */
+  [data-scope='editable']:is([data-part='edit-trigger'], [data-part='submit-trigger'], [data-part='cancel-trigger']):empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-_editable-trigger-glyph) center / contain no-repeat;
+    mask: var(--xh-_editable-trigger-glyph) center / contain no-repeat;
   }
 
-  [data-scope='editable'][data-part='edit-trigger']:hover:not(:disabled),
-  [data-scope='editable'][data-part='submit-trigger']:hover:not(:disabled),
-  [data-scope='editable'][data-part='cancel-trigger']:hover:not(:disabled) {
-    border-color: var(--xh-editable-trigger-border-hover, var(--xh-border-control-hover));
-    background: var(--xh-editable-trigger-bg-hover, var(--xh-bg-subtle-hover));
+  [data-scope='editable'][data-part='edit-trigger'] {
+    --xh-_editable-trigger-glyph: var(--xh-glyph-mark-edit);
   }
 
-  [data-scope='editable'][data-part='edit-trigger']:active:not(:disabled),
-  [data-scope='editable'][data-part='submit-trigger']:active:not(:disabled),
-  [data-scope='editable'][data-part='cancel-trigger']:active:not(:disabled) {
-    background: var(--xh-editable-trigger-bg-active, var(--xh-bg-subtle-active));
+  [data-scope='editable'][data-part='submit-trigger'] {
+    --xh-_editable-trigger-glyph: var(--xh-glyph-mark-check);
   }
 
-  [data-scope='editable'][data-part='edit-trigger']:focus-visible,
-  [data-scope='editable'][data-part='submit-trigger']:focus-visible,
-  [data-scope='editable'][data-part='cancel-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  [data-scope='editable'][data-part='cancel-trigger'] {
+    --xh-_editable-trigger-glyph: var(--xh-glyph-mark-close);
   }
 
-  /* 单体控件用 :disabled（不是集合条目那套 [data-disabled]）：
-     禁用与只读时编辑钮置灰，收起态的提交/取消也一并落到这条上 */
-  [data-scope='editable'][data-part='edit-trigger']:disabled,
-  [data-scope='editable'][data-part='submit-trigger']:disabled,
-  [data-scope='editable'][data-part='cancel-trigger']:disabled {
-    border-color: var(--xh-editable-trigger-border-disabled, var(--xh-border-subtle));
-    background: var(--xh-editable-trigger-bg-disabled, var(--xh-bg-muted));
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+  /* 动作组第一颗与内容段之间只有一道短分隔线；确认与取消之间不再拼第二个按钮框。
+     线不画在钮的边框上：边框会跟着钮的圆角与悬停底走，而这道线要独立于钮的各态，长度也短于钮自己。
+     ::before 已被兜底字形占着，::after 在粗指针下是家族给的 44px 热区，几何只能落在
+     background-image 上：一条 1px × 半高的渐变贴在逻辑起始侧，底色换态时它仍叠在上层。
+     background-position 是物理轴，RTL 另给一条换边 */
+  [data-scope='editable'][data-part='edit-trigger'],
+  [data-scope='editable'][data-part='submit-trigger'] {
+    background-image: linear-gradient(
+      var(--xh-editable-trigger-divider, var(--xh-material-soft-separator)),
+      var(--xh-editable-trigger-divider, var(--xh-material-soft-separator))
+    );
+    background-repeat: no-repeat;
+    background-position: 0 50%;
+    background-size: var(--xh-stroke-thin) var(--xh-editable-trigger-divider-h, var(--xh-_editable-divider-h));
   }
 
-  /* 提交按钮是这一组里的主操作，给它一层实心底色区分开 */
-  [data-scope='editable'][data-part='submit-trigger']:not(:disabled) {
-    border-color: var(--xh-editable-submit-border, var(--xh-bg-brand));
-    background: var(--xh-editable-submit-bg, var(--xh-bg-brand));
-    color: var(--xh-editable-submit-fg, var(--xh-fg-on-brand));
+  [dir='rtl'] [data-scope='editable'][data-part='edit-trigger'],
+  [dir='rtl'] [data-scope='editable'][data-part='submit-trigger'] {
+    background-position: 100% 50%;
   }
 
-  [data-scope='editable'][data-part='submit-trigger']:hover:not(:disabled) {
-    border-color: var(--xh-editable-submit-border-hover, var(--xh-editable-submit-bg-hover, var(--xh-bg-brand-hover)));
-    background: var(--xh-editable-submit-bg-hover, var(--xh-bg-brand-hover));
+  /* 三颗按钮按形态轮流收起，连接层给的是 hidden 属性；
+     家族那条 display 已把 UA 规则盖掉，少了这里三条按钮就一直杵着 */
+  [data-scope='editable'][data-part='edit-trigger'][hidden],
+  [data-scope='editable'][data-part='submit-trigger'][hidden],
+  [data-scope='editable'][data-part='cancel-trigger'][hidden] {
+    display: none;
   }
 
-  [data-scope='editable'][data-part='submit-trigger']:active:not(:disabled) {
-    border-color: var(--xh-editable-submit-border-active, var(--xh-editable-submit-bg-active, var(--xh-bg-brand-active)));
-    background: var(--xh-editable-submit-bg-active, var(--xh-bg-brand-active));
+  /* 高对比档整层丢弃 background-image，分隔线改用系统色重画，并关掉这两颗钮的强制换色 */
+  @media (forced-colors: active) {
+    [data-scope='editable'][data-part='edit-trigger'],
+    [data-scope='editable'][data-part='submit-trigger'] {
+      background-image: linear-gradient(ButtonText, ButtonText);
+      forced-color-adjust: none;
+    }
   }
 }

package/css/empty-state.css

@@ -1,3 +1,13 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 empty state 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='empty-state'] {
@@ -10,9 +20,10 @@
     --xh-_empty-state-gap: var(--xh-stack-gap-md);
     --xh-_empty-state-py: var(--xh-section-py-md);
     --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;
+    /* 标题走 Surface / Feedback 标题档 14/600（§6.4）；sm 同档只缩图形与留白，lg 升到页面级 heading-3 */
+    --xh-_empty-state-title-size: var(--xh-text-label-size);
+    /* 图标区的强调色：由 data-status（状态码）或 data-tone（语气）换掉；两样都没写就退成中性 */
+    --xh-_empty-state-accent: var(--xh-fg-subtle);
 
     display: flex;
     flex-direction: column;
@@ -34,7 +45,6 @@
     --xh-_empty-state-gap: var(--xh-stack-gap-sm);
     --xh-_empty-state-py: var(--xh-section-py-sm);
     --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'] {
@@ -44,7 +54,43 @@
     --xh-_empty-state-title-size: var(--xh-text-heading-3-size);
   }
 
-  [data-scope='empty-state'][data-part='icon'] {
+  /* —— 状态码 —— */
+  /* 三个状态码各并进最接近的一族：找不到=提示，没权限=警示，服务出错=危险。
+     用 500 档而不是 600：500 是装饰性强调档，600 是给实心底与文字用的。
+     成功 / 警示 / 出错 / 提示这类通用结果不在这儿：那是语气，走下面的 data-tone */
+  [data-scope='empty-state'][data-part='root'][data-status='403'] {
+    --xh-_empty-state-accent: var(--xh-color-warning-500);
+  }
+
+  [data-scope='empty-state'][data-part='root'][data-status='500'] {
+    --xh-_empty-state-accent: var(--xh-color-danger-500);
+  }
+
+  [data-scope='empty-state'][data-part='root'][data-status='404'] {
+    --xh-_empty-state-accent: var(--xh-color-info-500);
+  }
+
+  /* 语气轴：写了 tone 就把强调色接到语气层派生好的前景档上。
+     排在状态码之后：两者都写时以显式的语气为准；不写 tone 时上面几条一字不变 */
+  [data-scope='empty-state'][data-part='root'][data-tone] {
+    --xh-_empty-state-accent: var(--xh-_tone-fg);
+  }
+
+  /*
+   * 插画槽。它与图标槽二选一，尺寸另走一档：插画塞进按字形量的图标槽会被压到 40px 以下，
+   * 而空状态的插画通常是这个尺度的两倍。默认由图标档翻一倍派生，跟着三个尺寸档一起走。
+   */
+  [data-scope='empty-state'][data-part='media'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    max-inline-size: 100%;
+    block-size: var(--xh-empty-state-media-size, calc(var(--xh-_empty-state-icon-size) * 2));
+    color: var(--xh-empty-state-media-fg, var(--xh-_empty-state-accent));
+  }
+
+  [data-scope='empty-state'][data-part='indicator'] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -54,9 +100,9 @@
 
     block-size: var(--xh-empty-state-icon-size, var(--xh-_empty-state-icon-size));
     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));
+    color: var(--xh-empty-state-indicator-fg, var(--xh-_empty-state-accent));
     /* 图标常是一个字形，字号跟着图标框走，line-height 不再另占高度 */
-    font-size: var(--xh-empty-state-icon-font-size, var(--xh-_empty-state-icon-size));
+    font-size: var(--xh-empty-state-indicator-font-size, var(--xh-_empty-state-icon-size));
     line-height: var(--xh-leading-none);
   }
 
@@ -70,10 +116,10 @@
 
   [data-scope='empty-state'][data-part='description'] {
     margin: 0;
-    max-inline-size: var(--xh-empty-state-description-max-w, var(--xh-_empty-state-measure));
+    max-inline-size: var(--xh-empty-state-description-max-w, var(--xh-measure-prose));
     color: var(--xh-empty-state-description-fg, var(--xh-fg-muted));
-    font-size: var(--xh-empty-state-description-font-size, var(--xh-text-body-size));
-    line-height: var(--xh-empty-state-description-leading, var(--xh-text-body-leading));
+    font-size: var(--xh-empty-state-description-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-empty-state-description-leading, var(--xh-leading-normal));
   }
 
   [data-scope='empty-state'][data-part='action'] {
@@ -84,9 +130,32 @@
     gap: var(--xh-empty-state-action-gap, var(--xh-space-2));
   }
 
+  /* 图标、标题、说明、动作按次序开幕，间隔由交错步长派生。
+     backwards 不能省：等待期间起帧不生效的话，后三段会先露一下再跳回去 */
+  [data-scope='empty-state'][data-part='media'],
+  [data-scope='empty-state'][data-part='indicator'],
+  [data-scope='empty-state'][data-part='title'],
+  [data-scope='empty-state'][data-part='description'],
+  [data-scope='empty-state'][data-part='action'] {
+    animation: xh-rise-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
+  }
+
+  [data-scope='empty-state'][data-part='title'] {
+    animation-delay: calc(var(--xh-motion-stagger-step) * 1);
+  }
+
+  [data-scope='empty-state'][data-part='description'] {
+    animation-delay: calc(var(--xh-motion-stagger-step) * 2);
+  }
+
+  [data-scope='empty-state'][data-part='action'] {
+    animation-delay: calc(var(--xh-motion-stagger-step) * 3);
+  }
+
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
-  [data-scope='empty-state'][data-part='icon'][hidden],
+  [data-scope='empty-state'][data-part='media'][hidden],
+  [data-scope='empty-state'][data-part='indicator'][hidden],
   [data-scope='empty-state'][data-part='action'][hidden] {
     display: none;
   }