@xihan-ui/styles 1.0.0 → 2.0.0

package/css/popover.css

@@ -1,30 +1,13 @@
-@layer xihan.motion {
-  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
-     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
-  @keyframes xh-pop-in {
-    from {
-      opacity: 0;
-      scale: var(--xh-motion-scale-enter);
-    }
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
 
-    to {
-      opacity: 1;
-      scale: 1;
-    }
-  }
+/* 定义 popover 样式。 */
 
-  @keyframes xh-pop-out {
-    from {
-      opacity: 1;
-      scale: 1;
-    }
-
-    to {
-      opacity: 0;
-      scale: var(--xh-motion-scale-enter);
-    }
-  }
-}
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/action-control.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -37,12 +20,15 @@
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
        引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
     --xh-_popover-available-h: 100vh;
+    /* 落定那一侧的可用宽度，同样由定位引擎经内联自定义属性写进来，行内轴据此夹取；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时退到视口宽 */
+    --xh-_popover-available-w: 100vw;
 
     /* 面板内容的自绘条浮在内容之上：轨道不上底色，实色轨道会在面板右缘糊一条竖灰带 */
     --xh-scrollbar-track-bg: transparent;
 
     position: fixed;
-    z-index: var(--xh-popover-layer, var(--xh-layer-popover));
+    z-index: var(--xh-popover-layer, var(--xh-_layer, var(--xh-layer-popover)));
     /* 空壳不吃指针，交互只发生在 content 上 */
     pointer-events: none;
   }
@@ -52,14 +38,50 @@
     visibility: hidden;
   }
 
+  /* 缩放原点与进场位移按落定的那一侧给：面板从贴着锚点的那条边涨开、沿主轴退让一小段。
+     两个槽由 content 继承。placement 是物理方向（引擎按 top / right / bottom / left 出值），
+     origin 与 translate 也是物理量，两边同轴，不随书写方向翻 */
+  [data-scope='popover'][data-part='positioner'][data-placement^='top'] {
+    --xh-_overlay-origin-y: 100%;
+    --xh-_overlay-enter-down: 1;
+  }
+
+  [data-scope='popover'][data-part='positioner'][data-placement^='bottom'] {
+    --xh-_overlay-origin-y: 0;
+    --xh-_overlay-enter-up: 1;
+  }
+
+  [data-scope='popover'][data-part='positioner'][data-placement^='left'] {
+    --xh-_overlay-origin-x: 100%;
+    --xh-_overlay-enter-right: 1;
+  }
+
+  [data-scope='popover'][data-part='positioner'][data-placement^='right'] {
+    --xh-_overlay-origin-x: 0;
+    --xh-_overlay-enter-left: 1;
+  }
+
+  /*
+   * 触发器是页面上的独立文字按钮（§9.1）：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
+   * 由家族配方按连接层投影的 data-xh-action-variant / -size 给出。皮肤没有自己的外观规则，
+   * 只把作者塞进按钮的图标接到随档字形尺（md = 20px）。
+   */
+  [data-scope='popover'][data-part='trigger'] {
+    --xh-icon-size: var(--xh-popover-icon-size, var(--xh-_action-profile-glyph-size));
+  }
+
+  /* 家族配方给了 display，作者手写 hidden 时得把 UA 的 [hidden]{display:none} 还回去 */
+  [data-scope='popover'][data-part='trigger'][hidden] {
+    display: none;
+  }
+
   [data-scope='popover'][data-part='content'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-popover-icon-size, var(--xh-glyph-size-text));
+    /* 作者塞进面板里的图标按控件档取（§6.5）；关闭钮另由家族配方按 sm 档下发字形尺 */
+    --xh-icon-size: var(--xh-popover-icon-size, var(--xh-glyph-size-md));
 
     /* 尺寸档只换这两个私有槽。popover 没有 root 部件，size 落在浮层树最外层的 content 上。
        语气不接：面板是内容容器，语气该由里面的内容表达 */
-    --xh-_popover-py: var(--xh-space-3);
-    --xh-_popover-px: var(--xh-control-px-md);
+    --xh-_popover-pad: var(--xh-surface-pad-md);
     --xh-_popover-max-w: var(--xh-overlay-max-w);
 
     position: relative;
@@ -67,18 +89,32 @@
     flex-direction: column;
     gap: var(--xh-popover-gap, var(--xh-space-2));
     inline-size: max-content;
-    max-inline-size: var(--xh-popover-max-w, var(--xh-_popover-max-w));
+    /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的内容就点不到了 */
+    max-inline-size: min(var(--xh-popover-max-w, var(--xh-_popover-max-w)), var(--xh-_popover-available-w));
     /* 内容由作者给，长度不可预知：不限高就整块伸出视口且滚不到 */
     max-block-size: min(var(--xh-popover-max-h, var(--xh-overlay-max-h)), var(--xh-_popover-available-h));
     overflow-y: auto;
-    padding-block: var(--xh-popover-py, var(--xh-_popover-py));
-    padding-inline: var(--xh-popover-px, var(--xh-_popover-px));
-    border: var(--xh-stroke-thin) solid var(--xh-popover-border, var(--xh-border-default));
-    border-radius: var(--xh-popover-radius, var(--xh-shape-surface));
-    background: var(--xh-popover-bg, var(--xh-bg-surface));
-    color: var(--xh-popover-fg, var(--xh-fg-default));
-    box-shadow: var(--xh-popover-shadow, var(--xh-elevation-floating));
+    /* 浮在页面之上的 Overlay 滚动面（§6.6）：滚到头不把页面一起带走 */
+    overscroll-behavior: contain;
+    padding-block: var(--xh-popover-py, var(--xh-_popover-pad));
+    padding-inline: var(--xh-popover-px, var(--xh-_popover-pad));
+    border: var(--xh-stroke-thin) solid var(--xh-popover-border, var(--xh-material-frosted-border));
+    border-radius: var(--xh-popover-radius, var(--xh-shape-overlay));
+    /* 顶光只占内侧一像素；透明 tint 是底层，正文自己保持不透明。 */
+    background:
+      linear-gradient(
+        to bottom,
+        var(--xh-material-frosted-highlight) 0 var(--xh-stroke-thin),
+        transparent var(--xh-stroke-thin)
+      ),
+      var(--xh-popover-bg, var(--xh-material-frosted-bg));
+    color: var(--xh-popover-fg, var(--xh-material-frosted-fg));
+    box-shadow: var(--xh-popover-shadow, var(--xh-material-frosted-shadow));
+    -webkit-backdrop-filter: var(--xh-popover-backdrop, var(--xh-material-frosted-backdrop));
+    backdrop-filter: var(--xh-popover-backdrop, var(--xh-material-frosted-backdrop));
     pointer-events: auto;
+    /* 进退场的缩放锚在贴着锚点的那条边上；两个分量由 positioner 按 placement 写进私有槽 */
+    transform-origin: var(--xh-_overlay-origin-x, 50%) var(--xh-_overlay-origin-y, 50%);
   }
 
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致：
@@ -92,7 +128,9 @@
   }
 
   [data-scope='popover'][data-part='content'][data-state='open'] {
-    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+    /* 只在开着的这一档挂：合成层随 data-state 一起收走，收起后不再占着 */
+    will-change: opacity, scale, translate;
   }
 
   /* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
@@ -102,17 +140,14 @@
   }
 
   /* —— 尺寸 —— */
-  /* 缺省档写在 content 的基础规则里；行内内缩本就取 control-px 那把尺，上下各挪一档，
-     纵向内缩按 space 档同步 */
+  /* 缺省档写在 content 的基础规则里；四边等宽的面板内衬三档取 surface-pad 那把尺 */
   [data-scope='popover'][data-part='content'][data-size='sm'] {
-    --xh-_popover-py: var(--xh-space-2);
-    --xh-_popover-px: var(--xh-control-px-sm);
+    --xh-_popover-pad: var(--xh-surface-pad-sm);
     --xh-_popover-max-w: var(--xh-overlay-max-w-sm);
   }
 
   [data-scope='popover'][data-part='content'][data-size='lg'] {
-    --xh-_popover-py: var(--xh-space-4);
-    --xh-_popover-px: var(--xh-control-px-lg);
+    --xh-_popover-pad: var(--xh-surface-pad-lg);
     --xh-_popover-max-w: var(--xh-overlay-max-w-lg);
   }
 
@@ -120,12 +155,13 @@
     margin: 0;
     font-size: var(--xh-popover-title-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-popover-title-font-weight, var(--xh-font-weight-semibold));
-    color: var(--xh-popover-title-fg, var(--xh-fg-default));
+    color: var(--xh-popover-title-fg, var(--xh-material-frosted-fg));
   }
 
+  /* 说明文字走说明档（§6.4）：13px + fg-muted */
   [data-scope='popover'][data-part='description'] {
     margin: 0;
-    font-size: var(--xh-text-body-size);
+    font-size: var(--xh-popover-description-font-size, var(--xh-text-secondary-size));
     color: var(--xh-popover-description-fg, var(--xh-fg-muted));
   }
 
@@ -136,44 +172,37 @@
     padding-inline-end: calc(var(--xh-popover-close-size, var(--xh-control-h-sm)) + var(--xh-space-2));
   }
 
+  /*
+   * 关闭钮是浮层角落的单图标钮（§9.1）：正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
+   * 由家族配方给出——磨砂白面上走画布承载阶梯悬停 --xh-bg-subtle（100）→ 按下 --xh-bg-subtle-hover（200），
+   * 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与摆放，
+   * 聚焦档的 -bg-focus / -fg-focus 两槽同样桥到配方的 focus-visible 面，缺省仍是透明底与悬停字色：
+   * 贴边比 dialog 一族的面板档（--xh-surface-action-inset）小一档：气泡的面板内衬是 12px，
+   * 28px 的钮按 12px 贴边会伸出面板自己的盒子，被 content 的 overflow 裁掉。
+   * 静息前景取磨砂面的 muted 字色，悬停 / 按下回到 fg-default。
+   */
   [data-scope='popover'][data-part='close-trigger'] {
+    --xh-action-visual-size: var(--xh-popover-close-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-popover-close-radius, var(--xh-shape-control));
+    --xh-action-bg-hover: var(--xh-popover-close-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-popover-close-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-popover-close-bg-focus, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-fg-rest: var(--xh-popover-close-fg, var(--xh-material-frosted-fg-muted));
+    --xh-action-fg-hover: var(--xh-popover-close-fg-hover, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-popover-close-fg-hover, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-popover-close-fg-focus, var(--xh-popover-close-fg-hover, var(--xh-_action-variant-fg-focus-visible)));
+    /* 作者塞进按钮的图标随档取字形尺（sm = 16px），与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-popover-icon-size, var(--xh-_action-profile-glyph-size));
+
     position: absolute;
     inset-block-start: var(--xh-space-2);
     inset-inline-end: var(--xh-space-2);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    block-size: var(--xh-popover-close-size, var(--xh-control-h-sm));
-    inline-size: var(--xh-popover-close-size, var(--xh-control-h-sm));
-    border: 0;
-    border-radius: var(--xh-popover-close-radius, var(--xh-shape-control));
-    background: transparent;
-    color: var(--xh-fg-muted);
-    cursor: pointer;
-    transition:
-      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='popover'][data-part='close-trigger'][hidden] {
     display: none;
   }
 
-  [data-scope='popover'][data-part='close-trigger']:hover {
-    background: var(--xh-popover-close-bg-hover, var(--xh-bg-subtle-hover));
-    color: var(--xh-fg-default);
-  }
-
-  [data-scope='popover'][data-part='close-trigger']:active {
-    background: var(--xh-popover-close-bg-active, var(--xh-bg-subtle-active));
-    scale: var(--xh-motion-scale-press);
-  }
-
-  [data-scope='popover'][data-part='close-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
   /* 箭头的底色与描边色，几何在 overlay-arrow.css。
      交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
   [data-scope='popover'][data-part='arrow'] {
@@ -183,8 +212,8 @@
     --xh-_overlay-arrow-x: var(--xh-_popover-arrow-x);
     --xh-_overlay-arrow-y: var(--xh-_popover-arrow-y);
 
-    background: var(--xh-popover-bg, var(--xh-bg-surface));
-    border: var(--xh-stroke-thin) solid var(--xh-popover-border, var(--xh-border-default));
+    background: var(--xh-popover-bg, var(--xh-material-frosted-bg));
+    border: var(--xh-stroke-thin) solid var(--xh-popover-border, var(--xh-material-frosted-border));
   }
 
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
@@ -198,4 +227,19 @@
     -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
+
+  @media (forced-colors: active) {
+    /* 系统色接管边界与正文；装饰顶光在这一档没有信息价值，明确撤掉背景图层。 */
+    [data-scope='popover'][data-part='content'] {
+      background-image: none;
+    }
+  }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    [data-scope='popover'][data-part='positioner'] {
+      display: none;
+    }
+  }
 }

package/css/progress.css

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 progress 样式。 */
+
 @layer xihan.motion {
   /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
      动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
@@ -21,7 +28,7 @@
   /* 私有槽位：组件令牌 → 中档字面量两级回退。厚度写在 root 上而不是 track 上，
      尺寸档才改得动一处就够，track 靠继承拿到值。 */
   [data-scope='progress'][data-part='root'] {
-    --xh-_thickness: var(--xh-progress-thickness, var(--xh-track-thickness));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness));
 
     display: inline-block;
     inline-size: 100%;
@@ -30,7 +37,7 @@
   [data-scope='progress'][data-part='track'] {
     overflow: hidden;
     inline-size: 100%;
-    block-size: var(--xh-_thickness);
+    block-size: var(--xh-_progress-thickness);
     border-radius: var(--xh-progress-track-radius, var(--xh-shape-pill));
     background: var(--xh-progress-track, var(--xh-bg-subtle-active));
   }
@@ -41,17 +48,17 @@
     block-size: 100%;
     border-radius: var(--xh-progress-range-radius, var(--xh-shape-pill));
     background: var(--xh-progress-range, var(--xh-_tone, var(--xh-bg-brand)));
-    transition: inline-size var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: inline-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
   }
 
   /* —— 尺寸 —— */
   /* 线形只有厚度分档；中间档不写规则，缺省即中档 */
   [data-scope='progress'][data-part='root'][data-size='sm'] {
-    --xh-_thickness: var(--xh-progress-thickness, var(--xh-space-1));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-1));
   }
 
   [data-scope='progress'][data-part='root'][data-size='lg'] {
-    --xh-_thickness: var(--xh-progress-thickness, var(--xh-space-2));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-2));
   }
 
   /* —— 环形 —— */
@@ -59,22 +66,22 @@
      画面与环心文字叠在同一格上，文字因此恒在圆心 */
   [data-scope='progress'][data-part='root'][data-variant='circle'],
   [data-scope='progress'][data-part='root'][data-variant='dashboard'] {
-    --xh-_diameter: var(--xh-progress-size, 7.5rem);
+    --xh-_progress-diameter: var(--xh-progress-size, 7.5rem);
 
     display: inline-grid;
     place-items: center;
-    inline-size: var(--xh-_diameter);
-    block-size: var(--xh-_diameter);
+    inline-size: var(--xh-_progress-diameter);
+    block-size: var(--xh-_progress-diameter);
   }
 
   [data-scope='progress'][data-part='root'][data-variant='circle'][data-size='sm'],
   [data-scope='progress'][data-part='root'][data-variant='dashboard'][data-size='sm'] {
-    --xh-_diameter: var(--xh-progress-size, 5rem);
+    --xh-_progress-diameter: var(--xh-progress-size, 5rem);
   }
 
   [data-scope='progress'][data-part='root'][data-variant='circle'][data-size='lg'],
   [data-scope='progress'][data-part='root'][data-variant='dashboard'][data-size='lg'] {
-    --xh-_diameter: var(--xh-progress-size, 10rem);
+    --xh-_progress-diameter: var(--xh-progress-size, 10rem);
   }
 
   [data-scope='progress'][data-part='canvas'],
@@ -106,7 +113,7 @@
   [data-scope='progress'][data-part='range'][data-variant='dashboard'] {
     stroke: var(--xh-progress-range, var(--xh-_tone, var(--xh-bg-brand)));
     stroke-linecap: var(--xh-progress-linecap, round);
-    transition: stroke-dashoffset var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: stroke-dashoffset var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
   /* 进度未知：线形条改为一小段来回扫。宽度交给动画，连接层算出的 inline-size 与
@@ -120,7 +127,7 @@
     position: absolute;
     inline-size: 40%;
     transition: none;
-    animation: xh-progress-indeterminate var(--xh-progress-indeterminate-duration, calc(var(--xh-spin-duration) * 2)) var(--xh-ease-standard) infinite;
+    animation: xh-progress-indeterminate var(--xh-progress-indeterminate-duration, var(--xh-shimmer-duration)) var(--xh-motion-ease-loop) infinite;
   }
 
   /* 减弱动效档：不来回扫，改成一条铺满的静态条——进度仍然未知，只是不再动。
@@ -152,4 +159,45 @@
   [data-scope='progress'][data-part='root'][hidden] {
     display: none;
   }
+
+  /*
+   * 高对比档：走完的那段与底槽都是底色画的，这一档里两者被换成同一个系统色，
+   * 整根条子成了一色，读不出走到哪儿。走完的那段改取系统高亮色，底槽补一圈环把全长框出来。
+   * 环用 outline 不用 border：条子的厚度是写死的，加边会把它顶高一档。
+   * 环形档画的是描边，stroke 在这一档里照旧生效，两条各自换成系统色即可。
+   */
+  @media (forced-colors: active) {
+    [data-scope='progress'][data-part='track'] {
+      outline: var(--xh-stroke-thin) solid CanvasText;
+      outline-offset: calc(-1 * var(--xh-stroke-thin));
+    }
+
+    [data-scope='progress'][data-part='range'] {
+      background: Highlight;
+    }
+
+    [data-scope='progress'][data-part='track'][data-variant='circle'],
+    [data-scope='progress'][data-part='track'][data-variant='dashboard'] {
+      outline: none;
+      stroke: CanvasText;
+    }
+
+    [data-scope='progress'][data-part='range'][data-variant='circle'],
+    [data-scope='progress'][data-part='range'][data-variant='dashboard'] {
+      stroke: Highlight;
+    }
+  }
+
+  @media print {
+    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
+       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
+       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
+       并成一条之后这层配对关系在文本上就断了。 */
+    [data-scope='progress'][data-part='range'][data-state='indeterminate'] {
+      position: static;
+      inline-size: 100%;
+      opacity: 0.5;
+      animation: none;
+    }
+  }
 }

package/css/prompt-input.css

@@ -0,0 +1,224 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* PromptInput 独立皮肤同时传递引入字段视觉盒与字段内动作；full bundle 递归去重。 */
+@import '../family/field-chrome.css';
+@import '../family/action-control.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='prompt-input'] {
+    --xh-prompt-input-skin: 1;
+  }
+
+  /* root 就是视觉盒：描边、底色、圆角、聚焦环、悬停与禁用面由 Field Chrome 家族画在它身上（静息描边式：
+     canvas 底 + --xh-border-control 描边 + 无影，不用 soft，§8.3 登记例外只在 8px surface 圆角），内部 textarea
+     无边框；align-items: flex-end 让按钮随输入框长高贴着底边。
+     三个视觉轴都落在 root 上：形态三档由家族按 data-variant 生成，语气管用哪族颜色，尺寸管高度与字号 */
+  [data-scope='prompt-input'][data-part='root'] {
+    /* 圆角可由使用者槽切换，家族只过渡底、描边、影与环 */
+    transition: border-radius var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    /* 尺寸缺省档：不写 data-size 时按中档走 */
+    --xh-_prompt-input-h: var(--xh-control-h-md);
+    --xh-_prompt-input-gap: var(--xh-control-gap-md);
+    --xh-_prompt-input-px: var(--xh-control-px-sm);
+    --xh-_prompt-input-font-size: var(--xh-control-font-md);
+    --xh-_prompt-input-submit-px: var(--xh-control-px-md);
+    /* 皮肤画的兜底字形与作者塞进来的图标读同一把尺，随尺寸档一起换 */
+    --xh-icon-size: var(--xh-prompt-input-icon-size, var(--xh-glyph-size-md));
+
+    /* 家族桥接槽：既有使用者槽保留为第一参数，缺省落家族按 data-variant 生成的三档 */
+    /* 多行随内容长高，盒不定高 */
+    --xh-field-control-height: auto;
+    /* 家族的行内内衬与下面 padding 简写同值 */
+    --xh-field-control-padding-inline: var(--xh-prompt-input-p, var(--xh-_prompt-input-px));
+    --xh-field-control-gap: var(--xh-prompt-input-gap, var(--xh-_prompt-input-gap));
+    --xh-field-control-radius: var(--xh-prompt-input-radius, var(--xh-shape-surface));
+    --xh-field-bg-rest: var(--xh-prompt-input-bg, var(--xh-_field-variant-bg-rest));
+    --xh-field-bg-hover: var(--xh-prompt-input-bg-hover, var(--xh-_field-variant-bg-hover));
+    --xh-field-bg-disabled: var(--xh-prompt-input-bg-disabled, var(--xh-_field-variant-bg-disabled));
+    --xh-field-border-rest: var(--xh-prompt-input-border, var(--xh-_field-variant-border-rest));
+    --xh-field-border-hover: var(--xh-prompt-input-border-hover, var(--xh-_field-variant-border-hover));
+    --xh-field-border-focus: var(--xh-prompt-input-border-focus, var(--xh-_field-variant-border-focus));
+    --xh-field-shadow-rest: var(--xh-prompt-input-shadow, none);
+    /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
+    --xh-field-glyph-size: var(--xh-prompt-input-icon-size, var(--xh-_field-size-glyph-size));
+    /* 生成中（data-loading）这块框仍可打字：不压前景、不换等待光标，只有按钮换成停止身份 */
+    --xh-field-fg-loading: var(--xh-fg-default);
+    --xh-field-cursor-loading: text;
+
+    /* 整框内衬的当前值，随尺寸档与 --xh-prompt-input-p 一起变。
+       附件条与动作行由作者写在 root 里、不是本组件的部件，它们靠读这一支对齐同一条内衬线 */
+    --xh-prompt-input-computed-px: var(--xh-prompt-input-p, var(--xh-_prompt-input-px));
+
+    display: flex;
+    align-items: flex-end;
+    /* 整框的内衬走控件内边距尺的小档，密度收紧时随之收窄 */
+    padding: var(--xh-prompt-input-p, var(--xh-_prompt-input-px));
+  }
+
+  /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
+  [data-scope='prompt-input'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 写了输入行，root 就翻成竖排：输入框与按钮收进那一行，上下两侧腾给附件条与动作行。
+     不写就是单行，输入框与按钮并排——两种写法的皮肤是同一份 */
+  [data-scope='prompt-input'][data-part='root']:has(> [data-scope='prompt-input'][data-part='control']) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  /* —— 尺寸 —— */
+  [data-scope='prompt-input'][data-part='root'][data-size='sm'] {
+    --xh-_prompt-input-h: var(--xh-control-h-sm);
+    --xh-_prompt-input-gap: var(--xh-control-gap-sm);
+    --xh-_prompt-input-px: var(--xh-control-px-sm);
+    --xh-_prompt-input-font-size: var(--xh-control-font-sm);
+    --xh-_prompt-input-submit-px: var(--xh-control-px-sm);
+    --xh-icon-size: var(--xh-prompt-input-icon-size, var(--xh-glyph-size-sm));
+  }
+
+  [data-scope='prompt-input'][data-part='root'][data-size='md'] {
+    --xh-_prompt-input-h: var(--xh-control-h-md);
+    --xh-_prompt-input-gap: var(--xh-control-gap-md);
+    --xh-_prompt-input-px: var(--xh-control-px-md);
+    --xh-_prompt-input-font-size: var(--xh-control-font-md);
+    --xh-_prompt-input-submit-px: var(--xh-control-px-md);
+    --xh-icon-size: var(--xh-prompt-input-icon-size, var(--xh-glyph-size-md));
+  }
+
+  [data-scope='prompt-input'][data-part='root'][data-size='lg'] {
+    --xh-_prompt-input-h: var(--xh-control-h-lg);
+    --xh-_prompt-input-gap: var(--xh-control-gap-lg);
+    --xh-_prompt-input-px: var(--xh-control-px-lg);
+    --xh-_prompt-input-font-size: var(--xh-control-font-lg);
+    --xh-_prompt-input-submit-px: var(--xh-control-px-lg);
+    --xh-icon-size: var(--xh-prompt-input-icon-size, var(--xh-glyph-size-lg));
+  }
+
+  /* 输入行承接单行写法下落在 root 上的那份几何：输入框与按钮并排、按钮贴着底边。
+     它自己不画底也不画描边，边界仍由 root 表达 */
+  [data-scope='prompt-input'][data-part='control'] {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--xh-prompt-input-row-gap, var(--xh-_prompt-input-gap));
+  }
+
+  [data-scope='prompt-input'][data-part='control'][hidden] {
+    display: none;
+  }
+
+  /* 输入段透明、底由外框承担：重置、字色、占位符与自动填充由 Field Chrome 家族的 [data-xh-field-input] 给，
+     组件只映射既有使用者槽。刻意不投影 data-xh-field-layout：家族 textarea 布局的 :has() 变体会压掉
+     root 自己的 padding 与 align-items。 */
+  [data-scope='prompt-input'][data-part='input'] {
+    --xh-field-input-fg: var(--xh-prompt-input-input-fg, var(--xh-fg-default));
+    --xh-field-input-font-size: var(--xh-prompt-input-input-font-size, var(--xh-_prompt-input-font-size));
+    --xh-field-placeholder-fg: var(--xh-prompt-input-placeholder-fg, var(--xh-fg-subtle));
+    /* 框的底画在 root 上，input 本身是透明分段，自动填充铺的是外框缺省那一档的实体底 */
+    --xh-field-autofill-bg: var(--xh-prompt-input-input-autofill-bg, var(--xh-bg-canvas));
+    --xh-field-autofill-fg: var(--xh-prompt-input-input-autofill-fg, var(--xh-fg-default));
+
+    /* 多行随内容长高，不撑满外框 */
+    block-size: auto;
+    /* 上下留白把单行文本盒撑到控件高度，文字中线与按钮中线对齐。
+       级联兜底：先写一行的高度算式（输入框字号 × 行距），再写 1lh。
+       1lh 晚于本库声明的浏览器地板，取不到时旧引擎丢掉后一条、留下前一条。
+       两条取的是同一组槽——字号来自家族映射的 --xh-field-input-font-size、行距来自家族的
+       line-height，所以算出来是同一个数。 */
+    padding-block: calc((var(--xh-_prompt-input-h) - var(--xh-prompt-input-input-font-size, var(--xh-_prompt-input-font-size)) * var(--xh-leading-normal)) / 2);
+    padding-block: calc((var(--xh-_prompt-input-h) - 1lh) / 2);
+    border-radius: var(--xh-prompt-input-input-radius, var(--xh-shape-inset));
+    /* 高度由 field-sizing 随内容变，不支持的引擎退化为 rows 定下的固定行数；
+       配套禁用 resize，避免拖拽写死的高度盖掉它。封顶行数由使用者覆盖槽给。 */
+    max-block-size: var(--xh-prompt-input-max-h, calc(var(--xh-leading-normal) * 1em * 8));
+    field-sizing: content;
+    resize: none;
+  }
+
+  /* textarea 是单体表单控件，禁用走原生 disabled */
+  [data-scope='prompt-input'][data-part='input']:disabled {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 发送钮是组件的主要动作，与 Button 缺省同为品牌实心：盒几何、悬停 / 按下与 0.97 按压、焦点环、禁用面
+     全由 Action Control 的 text solid 档给（连接层按 loading 切成 subtle 的停止身份），组件只映射既有使用者槽。
+     取 text 档而不是 icon 档：icon 档把行内尺寸钉成正方，作者放文案（「发送」）会被挤；发送钮的几何本来就是
+     「至少一个控件高的方钮 + 行内内衬」，与 text 档一致 */
+  [data-scope='prompt-input'][data-part='submit-trigger'] {
+    --xh-action-visual-size: var(--xh-_prompt-input-h);
+    --xh-action-min-inline-size: var(--xh-_prompt-input-h);
+    --xh-action-padding-inline: var(--xh-prompt-input-submit-px, var(--xh-_prompt-input-submit-px));
+    --xh-action-radius: var(--xh-prompt-input-submit-radius, var(--xh-shape-control));
+    --xh-action-bg-rest: var(--xh-prompt-input-send-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-prompt-input-send-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-prompt-input-send-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-prompt-input-send-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-prompt-input-send-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-prompt-input-send-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: transparent;
+    --xh-action-highlight-rest: transparent;
+    /* 发送身份是实心底，顶边画一条极浅的内高光把这块面衬出厚度；三态同一支，禁用面由家族收掉 */
+    --xh-action-shadow-rest: var(--xh-prompt-input-submit-shadow, var(--xh-_highlight-tone));
+    --xh-action-shadow-hover: var(--xh-prompt-input-submit-shadow, var(--xh-_highlight-tone));
+    --xh-action-shadow-pressed: var(--xh-prompt-input-submit-shadow, var(--xh-_highlight-tone));
+    /* 输入为空时按钮转灰但不收起 */
+    --xh-action-bg-disabled: var(--xh-prompt-input-send-bg-off, var(--xh-bg-muted));
+    --xh-action-font-size: var(--xh-prompt-input-submit-font-size, var(--xh-text-label-size));
+    /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+       那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的 */
+    --xh-action-ring-color-focus-visible: currentColor;
+
+    /* 按钮不参与弹性伸缩 */
+    flex: none;
+    border-width: 0;
+    font-weight: var(--xh-prompt-input-submit-font-weight, var(--xh-text-label-weight));
+  }
+
+  /* 家族那条 display 会把 UA 的 [hidden]{display:none} 盖掉 */
+  [data-scope='prompt-input'][data-part='submit-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 停止身份只换配色，从主色降到中性淡底（连接层同时把家族档切成 subtle）；文案与可访问名由连接层切换。
+     淡底面上没有厚度可言，内高光收掉；环色回到公共焦点色 */
+  [data-scope='prompt-input'][data-part='submit-trigger'][data-mode='stop'] {
+    --xh-action-bg-rest: var(--xh-prompt-input-stop-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-prompt-input-stop-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-prompt-input-stop-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-prompt-input-stop-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-prompt-input-stop-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-prompt-input-stop-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-shadow-rest: none;
+    --xh-action-shadow-hover: none;
+    --xh-action-shadow-pressed: none;
+    --xh-action-ring-color-focus-visible: var(--xh-ring-focus);
+  }
+
+  /* 按钮没写内容就由皮肤画兜底字形，两种身份各画一枚；
+     作者往部件里塞了自己的图形或文案，这两条即不命中 */
+  [data-scope='prompt-input'][data-part='submit-trigger'][data-mode='send']: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-arrow-up) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-arrow-up) center / contain no-repeat;
+  }
+
+  /* 停止身份画一枚实心圆角方块：它不是「反过来的发送」，用一个不指向任何方向的形状 */
+  [data-scope='prompt-input'][data-part='submit-trigger'][data-mode='stop']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-prompt-input-stop-mark-size, calc(var(--xh-icon-size, var(--xh-glyph-size-text)) * 0.6));
+    block-size: var(--xh-prompt-input-stop-mark-size, calc(var(--xh-icon-size, var(--xh-glyph-size-text)) * 0.6));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    border-radius: var(--xh-prompt-input-stop-mark-radius, var(--xh-shape-inset));
+    background-color: currentColor;
+  }
+}