@xihan-ui/styles 2.1.0 → 3.1.0

package/css/command.css

@@ -7,6 +7,8 @@
 
 /* 共享关键帧由 family/motion.css 提供，命令走 Collection Item 家族；本皮肤 @import 它们，单独引入仍成立。 */
 @import '../family/collection-item.css';
+@import '../family/field-chrome.css';
+@import '../family/loading-ring.css';
 @import '../family/motion.css';
 
 @layer xihan.components {
@@ -31,9 +33,10 @@
     --xh-_command-font-size: var(--xh-control-font-md);
   }
 
-  /* 面板从上方落下来一小段：方向槽写在定位层上，面板继承过去喂给进场那支动画 */
+  /* 面板从上方落下来一小段：起点在终点之上（up 一侧写 1），与锚在顶缘的缩放同向。
+     方向槽写在定位层上，面板继承过去喂给进场那支动画 */
   [data-scope='command'][data-part='positioner'] {
-    --xh-_overlay-enter-down: 1;
+    --xh-_overlay-enter-up: 1;
   }
 
   /* —— 尺寸 —— */
@@ -76,7 +79,7 @@
     background: transparent;
   }
 
-  [data-scope='command'][data-part='backdrop'][data-state='open'] {
+  [data-scope='command'][data-part='backdrop'][data-state='open']:not([data-instant]) {
     animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
@@ -146,7 +149,8 @@
     outline: none;
   }
 
-  [data-scope='command'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='command'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -157,24 +161,28 @@
   }
 
   /* —— 检索框 —— */
-  /* 通栏一行，底下一道线把它与结果分开；框自己不画边不画底，边界归面板 */
+  /* 面板内嵌的搜索框：通栏一行，控件高与字号随尺寸档，底下一道面内分隔（sheet 面的分隔令牌）把它与结果分开；
+     框自己不画边不画底，边界归面板。重置与占位前景由字段家族按 data-xh-field-input 给 */
   [data-scope='command'][data-part='input'] {
+    --xh-field-placeholder-fg: var(--xh-command-placeholder-fg, var(--xh-fg-subtle));
+
     flex: none;
     inline-size: 100%;
     block-size: var(--xh-command-input-h, var(--xh-_command-input-h));
     padding-block: 0;
     padding-inline: var(--xh-command-input-px, var(--xh-_command-px));
     border: 0;
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-command-input-border, var(--xh-border-subtle));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-command-input-border, var(--xh-material-elevated-separator));
     border-radius: 0;
     background: transparent;
     color: var(--xh-command-input-fg, var(--xh-fg-default));
     font-family: inherit;
-    font-size: var(--xh-command-input-font-size, var(--xh-text-body-size));
+    font-size: var(--xh-command-input-font-size, var(--xh-_command-font-size));
   }
 
-  [data-scope='command'][data-part='input']::placeholder {
-    color: var(--xh-command-placeholder-fg, var(--xh-fg-subtle));
+  /* 聚焦不画环：插入符就是焦点指示。框没有外壳，全局那圈键盘焦点环只会压在通栏一行上 */
+  [data-scope='command'][data-part='input']:focus-visible {
+    outline: none;
   }
 
   /* 自动填充态：浏览器给填过的框强加一套系统色（多数引擎是黄底黑字），
@@ -206,6 +214,7 @@
     /* 模态面板里的滚动面：到底后不把滚动链穿透给页面 */
     overflow-y: auto;
     overscroll-behavior: contain;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 没有可见命令时不保留列表的上下内距；只排除列表内部 hidden 祖先，退场中的外壳不影响判断。 */
@@ -240,7 +249,7 @@
     display: block;
     padding-block: var(--xh-command-group-label-py, var(--xh-space-1));
     padding-inline: var(--xh-command-group-label-px, var(--xh-_command-px));
-    color: var(--xh-command-group-label-fg, var(--xh-fg-subtle));
+    color: var(--xh-command-group-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-command-group-label-font-size, var(--xh-text-caption-size));
     font-weight: var(--xh-command-group-label-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-none);
@@ -258,7 +267,7 @@
     --xh-collection-inline-padding: var(--xh-command-item-px, var(--xh-_command-px));
     --xh-collection-gap: 0;
     --xh-collection-font-size: var(--xh-command-item-font-size, var(--xh-_command-font-size));
-    --xh-collection-radius: var(--xh-command-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-command-item-radius, var(--xh-shape-inset));
     --xh-collection-fg-rest: var(--xh-command-item-fg, var(--xh-fg-default));
     --xh-collection-fg-hover: var(--xh-command-item-fg, var(--xh-fg-default));
     --xh-collection-fg-keyboard-highlight: var(--xh-command-item-fg, var(--xh-fg-default));
@@ -285,32 +294,13 @@
     user-select: none;
   }
 
-  /* 开幕：结果自上而下逐条冒出来。筛掉的条目带 hidden 不生成盒子，重新露面时这段动画重新起跑，
-     所以每改一次检索串都会重播一遍。backwards 让每条在自己那份延迟里保持起始帧 */
-  [data-scope='command'][data-part='list'] [data-part='item'] {
+  /* 新插进列表的命令（宿主追加、异步取回的一批）自上而下逐条冒出来，同一批按到达顺序错开（序号封顶，命令再多也
+     不会拖出一条越来越慢的尾巴）。打开时已有的结果直接呈现：自己或本列表带 data-instant。
+     检索过滤筛掉的条目带 hidden 不生成盒子，重新露面只是换一批已有结果，机器给它打上 data-instant 直接呈现。
+     backwards 让每条在自己那份延迟里保持起始帧 */
+  [data-scope='command'][data-part='list'] [data-part='item']:not([data-instant], [data-scope='command'][data-part='list'][data-instant] *) {
     animation: xh-rise-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
-  }
-
-  /* 交错的间隔：第二条起逐级往后推，第六条起统一钉在第五级，命令再多也不会拖出一条越来越慢的尾巴。
-     列表里同时挂着被筛掉的条目（收起态），计数把它们排掉，序号才对得上看得见的那几条 */
-  [data-scope='command'][data-part='list'] [data-part='item']:nth-child(2 of :not([hidden])) {
-    animation-delay: var(--xh-motion-stagger-step);
-  }
-
-  [data-scope='command'][data-part='list'] [data-part='item']:nth-child(3 of :not([hidden])) {
-    animation-delay: calc(2 * var(--xh-motion-stagger-step));
-  }
-
-  [data-scope='command'][data-part='list'] [data-part='item']:nth-child(4 of :not([hidden])) {
-    animation-delay: calc(3 * var(--xh-motion-stagger-step));
-  }
-
-  [data-scope='command'][data-part='list'] [data-part='item']:nth-child(5 of :not([hidden])) {
-    animation-delay: calc(4 * var(--xh-motion-stagger-step));
-  }
-
-  [data-scope='command'][data-part='list'] [data-part='item']:nth-child(n + 6 of :not([hidden])) {
-    animation-delay: calc(5 * var(--xh-motion-stagger-step));
+    animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
   }
 
   [data-scope='command'][data-part='item-text'] {
@@ -327,9 +317,9 @@
   [data-scope='command'][data-part='empty'] {
     display: block;
     flex: none;
-    padding-block: var(--xh-command-empty-py, var(--xh-space-6));
+    padding-block: var(--xh-command-empty-py, var(--xh-space-3));
     padding-inline: var(--xh-command-empty-px, var(--xh-_command-px));
-    color: var(--xh-command-empty-fg, var(--xh-fg-subtle));
+    color: var(--xh-command-empty-fg, var(--xh-fg-muted));
     font-size: var(--xh-command-empty-font-size, var(--xh-_command-font-size));
     line-height: var(--xh-leading-none);
     text-align: center;
@@ -337,23 +327,35 @@
 
   /* 在途占位：与空态占位同一个位置、同一副观感，两者不同屏 */
   [data-scope='command'][data-part='loading'] {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-_command-gap);
     flex: none;
-    padding-block: var(--xh-command-loading-py, var(--xh-space-6));
+    padding-block: var(--xh-command-loading-py, var(--xh-space-3));
     padding-inline: var(--xh-command-loading-px, var(--xh-_command-px));
-    color: var(--xh-command-loading-fg, var(--xh-fg-subtle));
+    color: var(--xh-command-loading-fg, var(--xh-fg-muted));
     font-size: var(--xh-command-loading-font-size, var(--xh-_command-font-size));
     line-height: var(--xh-leading-none);
     text-align: center;
   }
 
+  /* 首次加载：文案前一枚加载环，由加载环配方画（连接层投影 data-xh-loading-ring 与 data-loading），
+     直径取所在尺寸档的图标档 */
+  [data-scope='command'][data-part='loading']::before {
+    content: '';
+    flex: none;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+  }
+
   /* 未提供状态内容时不渲染一块纯留白，提示文案仍由作者明确提供。 */
   [data-scope='command'][data-part='empty']:empty,
   [data-scope='command'][data-part='loading']:empty {
     display: none;
   }
 
-  /* 取数在途：列表压暗一档，与在途占位一起说明这块正在变 */
+  /* 刷新：已有命令时后台在取，保留上一帧，列表按 micro 淡下，数据到了再淡回；在途占位此时让位 */
   [data-scope='command'][data-part='list'][aria-busy='true'] {
     opacity: var(--xh-command-list-busy-opacity, var(--xh-state-disabled-opacity));
   }
@@ -367,7 +369,7 @@
     gap: var(--xh-command-footer-gap, var(--xh-space-2));
     padding-block: var(--xh-command-footer-py, var(--xh-space-2));
     padding-inline: var(--xh-command-footer-px, var(--xh-_command-px));
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-command-footer-border, var(--xh-border-subtle));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-command-footer-border, var(--xh-material-elevated-separator));
     color: var(--xh-command-footer-fg, var(--xh-fg-muted));
     font-size: var(--xh-command-footer-font-size, var(--xh-text-caption-size));
   }

package/css/context-menu.css

@@ -7,7 +7,9 @@
 
 /* 共享关键帧由 family/motion.css 提供，条目走 Collection Item 家族；本皮肤 @import 它们，单独引入仍成立。 */
 @import '../family/collection-item.css';
+@import '../family/menu-choice.css';
 @import '../family/motion.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -83,6 +85,15 @@
   }
 
   [data-scope='context-menu'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-context-menu-content-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-context-menu-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-context-menu-content-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-context-menu-content-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-context-menu-backdrop, var(--xh-_material-backdrop));
+    --xh-frosted-highlight: var(--xh-context-menu-highlight, var(--xh-_material-highlight));
+
     position: relative;
     display: flex;
     flex-direction: column;
@@ -94,13 +105,7 @@
     max-block-size: min(var(--xh-context-menu-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_context-menu-available-h));
     padding-block: var(--xh-context-menu-content-py, var(--xh-surface-pad-xs));
     padding-inline: var(--xh-context-menu-content-px, var(--xh-surface-pad-xs));
-    border: var(--xh-stroke-thin) solid var(--xh-context-menu-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-context-menu-content-radius, var(--xh-shape-overlay));
-    background: var(--xh-context-menu-content-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-context-menu-content-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-context-menu-content-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-context-menu-backdrop, var(--xh-material-frosted-backdrop));
-    backdrop-filter: var(--xh-context-menu-backdrop, var(--xh-material-frosted-backdrop));
     /* 条目超过上限就在菜单内部滚；内收焦点环不会被内边距缘裁掉。
        浮层滚动面：到底后不把滚动链穿透给页面 */
     overflow-y: auto;
@@ -108,18 +113,6 @@
     pointer-events: auto;
   }
 
-  /* 顶光单独叠在真实四边 border 内侧；强制色归零后轮廓仍在。 */
-  [data-scope='context-menu'][data-part='content']::before {
-    content: '';
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline: 0;
-    block-size: var(--xh-stroke-thin);
-    border-radius: inherit;
-    background: var(--xh-context-menu-highlight, var(--xh-material-frosted-highlight));
-    pointer-events: none;
-  }
-
   [data-scope='context-menu'][data-part='root'][hidden] {
     display: none;
   }
@@ -147,7 +140,7 @@
      长按会先选中区域内的文字，长按菜单弹出时手指底下是一片高亮，很难看 */
   [data-scope='context-menu'][data-part='trigger'] {
     user-select: none;
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 触屏没有右键，菜单靠长按计时打开。这段等待里若一点变化都没有，用户会当成没按上而提前
@@ -177,7 +170,8 @@
   }
 
   /* 首帧落位后从锚点一侧淡入短移，不缩放整张面。 */
-  [data-scope='context-menu'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='context-menu'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -224,7 +218,7 @@
     --xh-collection-inline-padding: var(--xh-context-menu-item-px, var(--xh-_context-menu-item-px));
     --xh-collection-gap: 0;
     --xh-collection-font-size: var(--xh-context-menu-item-font-size, var(--xh-_context-menu-font-size));
-    --xh-collection-radius: var(--xh-context-menu-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-context-menu-item-radius, var(--xh-shape-inset));
     --xh-collection-fg-rest: var(--xh-context-menu-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-context-menu-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-context-menu-item-fg, var(--xh-material-frosted-fg));
@@ -321,7 +315,8 @@
     order: 2;
     min-inline-size: 0;
     color: var(--xh-context-menu-item-description-fg, var(--xh-material-frosted-fg-muted));
-    font-size: var(--xh-context-menu-item-description-font-size, var(--xh-text-caption-size));
+    /* 与同一行的快捷键、Select 等列表的说明同档：控件次级字号，不取 caption 令牌 */
+    font-size: var(--xh-context-menu-item-description-font-size, var(--xh-control-caption-md));
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -382,6 +377,28 @@
     -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
     mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='context-menu'][data-part='item'][aria-haspopup='menu']::after,
+    [data-scope='context-menu'][data-part='item-indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='context-menu'][data-part='item'][aria-haspopup='menu']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after,
+    [data-scope='context-menu'][data-part='item']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted])) [data-scope='context-menu'][data-part='item-indicator']:empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='context-menu'][data-part='item'][aria-haspopup='menu']:is([aria-disabled='true'], [data-disabled])::after,
+    [data-scope='context-menu'][data-part='item']:is([aria-disabled='true'], [data-disabled]) [data-scope='context-menu'][data-part='item-indicator']:empty::before {
+      background-color: GrayText;
+    }
+  }
 }
 
 @layer xihan.motion {

package/css/date-field.css

@@ -123,6 +123,30 @@
     display: none;
   }
 
+  /* 整条占位：一段都没填、焦点也不在段上时，段位与分隔符让位给一句占位文字，焦点一进到段上就换回段位。
+     段位只是淡出（仍可聚焦、仍在读屏树里），文字以生成内容压在同一行上、不吃指针，点下去落到底下的段位 */
+  [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown] {
+    position: relative;
+    color: transparent;
+  }
+
+  [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown] > * {
+    opacity: 0;
+  }
+
+  [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown]::before {
+    content: attr(data-placeholder-text);
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 50%;
+    overflow: hidden;
+    color: var(--xh-date-field-placeholder-fg, var(--xh-fg-subtle));
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    pointer-events: none;
+    translate: 0 -50%;
+  }
+
   [data-scope='date-field'][data-part='segment-group'] > :not([data-scope]) {
     color: var(--xh-date-field-literal-fg, var(--xh-fg-subtle));
   }
@@ -143,6 +167,10 @@
     user-select: none;
     /* 触屏上连点两下不该被当成缩放手势 */
     touch-action: manipulation;
+    /* 反白随当前段换色：状态角色的 micro 淡变，与 TimeField 同一档；焦点环画在 control 上，不进过渡 */
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* granularity 用不上的段带 hidden 留在文档里（不卸载作者节点）。
@@ -231,6 +259,15 @@
   }
 
   @media (forced-colors: active) {
+    /* 整条占位的文字照系统的弱色画；段位让位时的透明字不被强制换色顶回来 */
+    [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown] {
+      forced-color-adjust: none;
+    }
+
+    [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown]::before {
+      color: GrayText;
+    }
+
     [data-scope='date-field'][data-part='segment'][data-invalid]:is([data-focus], :focus-visible) {
       outline: var(--xh-ring-width) solid Highlight;
       outline-offset: var(--xh-ring-offset);
@@ -252,4 +289,23 @@
     white-space: nowrap;
     pointer-events: none;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='date-field'][data-part='clear-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='date-field'][data-part='clear-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='date-field'][data-part='clear-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }