@xihan-ui/styles 2.0.0 → 3.0.0

package/css/progress.css

@@ -8,13 +8,26 @@
 @layer xihan.motion {
   /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
      动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  /* 固定宽度的一段从轨道行首外扫到行尾外：只动 translate，不动布局。
+     百分比参照这一段自身的宽度（轨道的 40%），RTL 下两端由私有槽换号 */
   @keyframes xh-progress-indeterminate {
     from {
-      inset-inline-start: -40%;
+      translate: var(--xh-_progress-sweep-from, -100%) 0;
     }
 
     to {
-      inset-inline-start: 100%;
+      translate: var(--xh-_progress-sweep-to, 250%) 0;
+    }
+  }
+
+  /* 条纹沿行向流动：每轮挪过一整格纹理，首尾两帧的图案重合，循环无缝。RTL 下行尾在左，位移随方向符号翻转 */
+  @keyframes xh-progress-stripes {
+    from {
+      background-position: 0 0;
+    }
+
+    to {
+      background-position: calc(var(--xh-_progress-stripe-size) * var(--xh-direction-sign)) 0;
     }
   }
 }
@@ -30,11 +43,17 @@
   [data-scope='progress'][data-part='root'] {
     --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness));
 
+    /* 目标刻度与环形的刻度值按根落位 */
+    position: relative;
     display: inline-block;
     inline-size: 100%;
   }
 
+  /* 线形轨道把填充放在交叉轴正中：子弹图的填充比轨道窄，压在色带正中 */
   [data-scope='progress'][data-part='track'] {
+    position: relative;
+    display: flex;
+    align-items: center;
     overflow: hidden;
     inline-size: 100%;
     block-size: var(--xh-_progress-thickness);
@@ -45,10 +64,73 @@
   /* 语气槽由 root 上的 data-tone 声明、经继承发下来；没写 data-tone 时退回原来的品牌色。
      轨道不跟着换族：只有已完成的那段换色，底槽保持中性才读得出"完成了多少"。 */
   [data-scope='progress'][data-part='range'] {
-    block-size: 100%;
+    /* 填充铺满轨道，按未完成的比例往行首平移、由轨道裁掉：进度变化只走合成，不重排也不重绘。
+       露出来的前端保留自己的圆角，行首那一侧由轨道的圆角裁出 */
+    /* 定位后才压得住同在轨道里的色带 */
+    position: relative;
+    flex: none;
+    inline-size: 100%;
+    block-size: var(--xh-_progress-range-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-enter) var(--xh-motion-ease-continuous);
+    translate: calc((var(--xh-_progress-value, 0) - 1) * 100%) 0;
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* translate 只认物理方向：RTL 下行首在右边，平移与不定进度的扫向一起翻转 */
+  [data-scope='progress'][data-part='range'][data-variant='line']:dir(rtl) {
+    --xh-_progress-sweep-from: 100%;
+    --xh-_progress-sweep-to: -250%;
+
+    translate: calc((1 - var(--xh-_progress-value, 0)) * 100%) 0;
+  }
+
+  /* —— 线形的三样外观：分段、条纹与缓冲 —— */
+  /* 分段：遮罩把轨道切成等宽的格，格间留一道间隙，填充、缓冲与色带随轨道一起被切开。
+     周期是（全长 + 一道间隙）÷ 格数，最后一格恰好收在行尾，图案左右对称，RTL 下不必翻转 */
+  [data-scope='progress'][data-part='track'][data-stepped] {
+    --xh-_progress-step-gap: var(--xh-progress-step-gap, var(--xh-space-0_5));
+    --xh-_progress-step-period: calc((100% + var(--xh-_progress-step-gap)) / var(--xh-_progress-steps, 1));
+    --xh-_progress-step-mask: repeating-linear-gradient(
+      to right,
+      black 0 calc(var(--xh-_progress-step-period) - var(--xh-_progress-step-gap)),
+      transparent 0 var(--xh-_progress-step-period)
+    );
+
+    -webkit-mask-image: var(--xh-_progress-step-mask);
+    mask-image: var(--xh-_progress-step-mask);
+  }
+
+  /* 条纹：填充上铺一层 45° 斜纹，颜色取填充同族更深一档。纹理是正方形平铺，45° 才能首尾相接；
+     RTL 下斜向随方向符号镜像 */
+  [data-scope='progress'][data-part='range'][data-striped] {
+    --xh-_progress-stripe: var(--xh-progress-stripe-color, var(--xh-_tone-active, var(--xh-bg-brand-active)));
+    --xh-_progress-stripe-size: var(--xh-progress-stripe-size, var(--xh-space-4));
+
+    background-image: linear-gradient(
+      calc(45deg * var(--xh-direction-sign)),
+      var(--xh-_progress-stripe) 25%,
+      transparent 25% 50%,
+      var(--xh-_progress-stripe) 50% 75%,
+      transparent 75%
+    );
+    background-size: var(--xh-_progress-stripe-size) var(--xh-_progress-stripe-size);
+  }
+
+  /* 只在进行中流动：完成了就停下；进度未知时整段已在往复扫，不再叠一层流动 */
+  [data-scope='progress'][data-part='range'][data-striped][data-state='loading'] {
+    animation: xh-progress-stripes var(--xh-progress-stripe-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-loop) infinite;
+  }
+
+  /* 缓冲段与填充同一种画法：铺满轨道、按缓冲比例往行首平移、由轨道裁掉，只走合成。
+     颜色取填充那一族的淡色，排在填充之前、被它压住。物理方向的平移量乘方向符号，RTL 下往右收 */
+  [data-scope='progress'][data-part='buffer'] {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--xh-progress-buffer-radius, var(--xh-progress-range-radius, var(--xh-shape-pill)));
+    background: var(--xh-progress-buffer, var(--xh-_tone-subtle-active));
+    translate: calc((var(--xh-_progress-buffer, 0) - 1) * 100% * var(--xh-direction-sign)) 0;
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
   /* —— 尺寸 —— */
@@ -113,11 +195,157 @@
   [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-enter) var(--xh-motion-ease-enter);
+    /* 环形的走完多少由虚线偏移表达，线形那一套按比例的平移在这里归零：SVG 图元的百分比平移按整个 viewBox 算，会把整段弧挪出画面 */
+    translate: none;
+    transition: stroke-dashoffset var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* —— 量的刻画：分段色带、目标刻度、量程刻度与指针 —— */
+  /* 子弹图：有分段时轨道加厚一档，填充收窄成中间一条压在色带上，色带在填充两侧照样读得出。
+     三档厚度各比普通线形高一档，阶梯次序不变 */
+  [data-scope='progress'][data-part='root'][data-variant='line'][data-banded] {
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-3));
+    --xh-_progress-range-size: 50%;
   }
 
-  /* 进度未知：线形条改为一小段来回扫。宽度交给动画，连接层算出的 inline-size 与
-     那条过渡都得让开，否则每帧都在跟动画抢同一个属性 */
+  [data-scope='progress'][data-part='root'][data-variant='line'][data-banded][data-size='sm'] {
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-2));
+  }
+
+  [data-scope='progress'][data-part='root'][data-variant='line'][data-banded][data-size='lg'] {
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-4));
+  }
+
+  /* 色带取本段语气的淡色：同一族颜色里填充是实色、色带浅一档，读得出填充落在哪一段 */
+  [data-scope='progress'][data-part='threshold'] {
+    --xh-_progress-threshold: var(--xh-progress-threshold-color, var(--xh-_tone-subtle-active));
+  }
+
+  [data-scope='progress'][data-part='threshold'][data-variant='line'] {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--xh-_progress-from, 0) * 100%);
+    inline-size: calc((var(--xh-_progress-to, 0) - var(--xh-_progress-from, 0)) * 100%);
+    background: var(--xh-_progress-threshold);
+  }
+
+  [data-scope='progress'][data-part='threshold'][data-variant='circle'],
+  [data-scope='progress'][data-part='threshold'][data-variant='dashboard'] {
+    stroke: var(--xh-_progress-threshold);
+  }
+
+  /* 目标刻度：一道竖线横穿轨道、上下各探出一点，读者一眼看出离目标还差多少 */
+  [data-scope='progress'][data-part='target'] {
+    --xh-_progress-target: var(--xh-progress-target-color, var(--xh-fg-default));
+  }
+
+  [data-scope='progress'][data-part='target'][data-variant='line'] {
+    position: absolute;
+    inset-block-start: calc(-1 * var(--xh-space-1));
+    inset-inline-start: calc(var(--xh-_progress-at, 0) * 100%);
+    inline-size: var(--xh-stroke-thick);
+    block-size: calc(var(--xh-_progress-thickness) + 2 * var(--xh-space-1));
+    border-radius: var(--xh-progress-target-radius, var(--xh-shape-pill));
+    background: var(--xh-_progress-target);
+    translate: -50% 0;
+  }
+
+  [data-scope='progress'][data-part='target'][data-variant='line']:dir(rtl) {
+    translate: 50% 0;
+  }
+
+  [data-scope='progress'][data-part='target'][data-variant='circle'],
+  [data-scope='progress'][data-part='target'][data-variant='dashboard'] {
+    stroke: var(--xh-_progress-target);
+    stroke-width: var(--xh-stroke-thick);
+    stroke-linecap: round;
+    vector-effect: non-scaling-stroke;
+  }
+
+  /* 量程刻度：图表家具，线与字都取图表的标注色，数字等宽，不随进度的语气换色 */
+  [data-scope='progress'][data-part='scale'] {
+    color: var(--xh-chart-label);
+    font-size: var(--xh-text-caption-size);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-tight);
+    pointer-events: none;
+  }
+
+  [data-scope='progress'][data-part='scale'][data-variant='line'] {
+    position: relative;
+    block-size: calc(var(--xh-chart-tick-length) + var(--xh-chart-label-gap) + var(--xh-text-caption-size) * var(--xh-leading-tight));
+    margin-block-start: var(--xh-space-1);
+  }
+
+  [data-scope='progress'][data-part='scale-tick'][data-variant='line'] {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(var(--xh-_progress-at, 0) * 100%);
+    inline-size: var(--xh-stroke-thin);
+    block-size: var(--xh-chart-tick-length);
+    background: var(--xh-chart-axis);
+    translate: -50% 0;
+  }
+
+  [data-scope='progress'][data-part='scale-tick'][data-variant='line']:dir(rtl) {
+    translate: 50% 0;
+  }
+
+  /* 两端的刻度值贴着轨道两端对齐，中间的居中在刻度线上：连接层给出对齐比例 */
+  [data-scope='progress'][data-part='scale-label'][data-variant='line'] {
+    position: absolute;
+    inset-block-start: calc(var(--xh-chart-tick-length) + var(--xh-chart-label-gap));
+    inset-inline-start: calc(var(--xh-_progress-at, 0) * 100%);
+    white-space: nowrap;
+    translate: calc(var(--xh-_progress-label-align) * -100%) 0;
+  }
+
+  [data-scope='progress'][data-part='scale-label'][data-variant='line']:dir(rtl) {
+    translate: calc(var(--xh-_progress-label-align) * 100%) 0;
+  }
+
+  [data-scope='progress'][data-part='scale-tick'][data-variant='circle'],
+  [data-scope='progress'][data-part='scale-tick'][data-variant='dashboard'] {
+    stroke: var(--xh-chart-axis);
+    stroke-width: var(--xh-stroke-thin);
+    vector-effect: non-scaling-stroke;
+  }
+
+  /* 环形的刻度值叠在环上：与画面同一格，按连接层给出的百分比坐标落位。环形不随 RTL 镜像 */
+  [data-scope='progress'][data-part='scale'][data-variant='circle'],
+  [data-scope='progress'][data-part='scale'][data-variant='dashboard'] {
+    position: relative;
+    grid-area: 1 / 1;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  [data-scope='progress'][data-part='scale-label'][data-variant='circle'],
+  [data-scope='progress'][data-part='scale-label'][data-variant='dashboard'] {
+    position: absolute;
+    inset-block-start: var(--xh-_progress-y, 50%);
+    /* stylelint-disable-next-line property-disallowed-list -- 环形不随 RTL 镜像，刻度值横坐标由连接层按物理左缘写入 */
+    left: var(--xh-_progress-x, 50%);
+    white-space: nowrap;
+    translate: -50% -50%;
+  }
+
+  /* 仪表盘的指针：朝 3 点钟画好，按当前值的角度绕环心转过去。转动是数值变化，不是部件原地形变：
+     与圆弧填充同一档时长与曲线，同一次值变化两者一起起步一起落定 */
+  [data-scope='progress'][data-part='needle'] {
+    fill: var(--xh-progress-needle-color, var(--xh-fg-default));
+    transform-box: view-box;
+    transform-origin: 50% 50%;
+    rotate: var(--xh-_progress-needle-angle, 0deg);
+    transition: rotate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* 指针从环心伸出：环心内容让到缺口那一侧 */
+  [data-scope='progress'][data-part='label'][data-indicator='needle'] {
+    align-self: end;
+  }
+
+  /* 进度未知：线形条改为固定宽度的一小段来回扫，位移交给动画，按比例的平移与它的过渡让开 */
   [data-scope='progress'][data-part='track'][data-state='indeterminate'] {
     position: relative;
     overflow: hidden;
@@ -125,9 +353,10 @@
 
   [data-scope='progress'][data-part='range'][data-state='indeterminate'] {
     position: absolute;
+    inset-inline-start: 0;
     inline-size: 40%;
     transition: none;
-    animation: xh-progress-indeterminate var(--xh-progress-indeterminate-duration, var(--xh-shimmer-duration)) var(--xh-motion-ease-loop) infinite;
+    animation: xh-progress-indeterminate var(--xh-progress-indeterminate-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-loop) infinite;
   }
 
   /* 减弱动效档：不来回扫，改成一条铺满的静态条——进度仍然未知，只是不再动。
@@ -137,6 +366,12 @@
       position: static;
       inline-size: 100%;
       opacity: 0.5;
+      translate: none;
+      animation: none;
+    }
+
+    /* 条纹留着、不再流动：纹理本身是静态的非颜色通道 */
+    [data-scope='progress'][data-part='range'][data-striped][data-state='loading'] {
       animation: none;
     }
   }
@@ -145,10 +380,15 @@
     position: static;
     inline-size: 100%;
     opacity: 0.5;
+    translate: none;
     animation: none;
   }
 
-  /* 零进度：圆角端点会在长度为 0 处画出一个圆点，收掉它 */
+  :where([data-motion='reduce']) [data-scope='progress'][data-part='range'][data-striped][data-state='loading'] {
+    animation: none;
+  }
+
+  /* 零进度：整段不画，从零起步的那一帧也不留一粒圆点 */
   [data-scope='progress'][data-part='range'][data-empty] {
     visibility: hidden;
   }
@@ -156,7 +396,20 @@
 
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
-  [data-scope='progress'][data-part='root'][hidden] {
+  [data-scope='progress'][data-part='root'][hidden],
+  [data-scope='progress'][data-part='track'][hidden] {
+    display: none;
+  }
+
+  /* 指针档由指针指出当前值，弧上的填充收起、只留色带 */
+  [data-scope='progress'][data-part='range'][data-indicator='needle'] {
+    display: none;
+  }
+
+  /* SVG 里的部件不吃 UA 的 [hidden] 规则：作者自己写的目标刻度、指针在不适用时得自己收 */
+  [data-scope='progress'][data-part='target'][hidden],
+  [data-scope='progress'][data-part='scale'][hidden],
+  [data-scope='progress'][data-part='needle'][hidden] {
     display: none;
   }
 
@@ -186,6 +439,46 @@
     [data-scope='progress'][data-part='range'][data-variant='dashboard'] {
       stroke: Highlight;
     }
+
+    /* 色带在这一档里只剩分界：线形每段末端画一道灰线，环形的色带退掉，分段名仍由读屏文字给出 */
+    [data-scope='progress'][data-part='threshold'][data-variant='line'] {
+      forced-color-adjust: none;
+      border-inline-end: var(--xh-stroke-thin) solid GrayText;
+      background: Canvas;
+    }
+
+    [data-scope='progress'][data-part='threshold'][data-variant='circle'],
+    [data-scope='progress'][data-part='threshold'][data-variant='dashboard'] {
+      stroke: transparent;
+    }
+
+    [data-scope='progress'][data-part='target'][data-variant='line'],
+    [data-scope='progress'][data-part='scale-tick'][data-variant='line'] {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+
+    [data-scope='progress'][data-part='target'][data-variant='circle'],
+    [data-scope='progress'][data-part='target'][data-variant='dashboard'],
+    [data-scope='progress'][data-part='scale-tick'][data-variant='circle'],
+    [data-scope='progress'][data-part='scale-tick'][data-variant='dashboard'] {
+      stroke: CanvasText;
+    }
+
+    [data-scope='progress'][data-part='needle'] {
+      fill: CanvasText;
+    }
+
+    /* 条纹在这一档里退掉：填充整段取高亮色才读得出走到哪儿，斜纹会把它切碎 */
+    [data-scope='progress'][data-part='range'][data-striped] {
+      background-image: none;
+    }
+
+    /* 缓冲段取灰：与底槽的 Canvas、填充的高亮色三者分得开 */
+    [data-scope='progress'][data-part='buffer'] {
+      forced-color-adjust: none;
+      background: GrayText;
+    }
   }
 
   @media print {
@@ -197,6 +490,11 @@
       position: static;
       inline-size: 100%;
       opacity: 0.5;
+      translate: none;
+      animation: none;
+    }
+
+    [data-scope='progress'][data-part='range'][data-striped][data-state='loading'] {
       animation: none;
     }
   }

package/css/prompt-input.css

@@ -6,6 +6,8 @@
 /* PromptInput 独立皮肤同时传递引入字段视觉盒与字段内动作；full bundle 递归去重。 */
 @import '../family/field-chrome.css';
 @import '../family/action-control.css';
+/* 字形换身份时的淡入由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -14,7 +16,7 @@
   }
 
   /* root 就是视觉盒：描边、底色、圆角、聚焦环、悬停与禁用面由 Field Chrome 家族画在它身上（静息描边式：
-     canvas 底 + --xh-border-control 描边 + 无影，不用 soft，§8.3 登记例外只在 8px surface 圆角），内部 textarea
+     canvas 底 + --xh-border-control 描边 + 无影，不用 soft，登记的例外只在 8px surface 圆角），内部 textarea
      无边框；align-items: flex-end 让按钮随输入框长高贴着底边。
      三个视觉轴都落在 root 上：形态三档由家族按 data-variant 生成，语气管用哪族颜色，尺寸管高度与字号 */
   [data-scope='prompt-input'][data-part='root'] {
@@ -221,4 +223,38 @@
     border-radius: var(--xh-prompt-input-stop-mark-radius, var(--xh-shape-inset));
     background-color: currentColor;
   }
+
+  /* 身份切换时换上来的那一枚字形淡入，与按钮换面同一拍：停止的方块从略小处浮出，发送的箭头只淡入。
+     两种身份各取一支关键帧，切换时动画名跟着换才会重播。首帧就在的字形直接呈现（data-instant）；
+     减弱动效下缩放归一、只剩淡入。粗指针下 ::after 是家族的命中区，字形只有 ::before 这一层，
+     旧字形与新字形不在两层上叠着淡 */
+  [data-scope='prompt-input'][data-part='submit-trigger'][data-mode='send']:not([data-instant]):empty::before {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='prompt-input'][data-part='submit-trigger'][data-mode='stop']:not([data-instant]):empty::before {
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='prompt-input'][data-part='submit-trigger'][data-mode='send']:empty::before,
+    [data-scope='prompt-input'][data-part='submit-trigger'][data-mode='stop']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='prompt-input'][data-part='submit-trigger'][data-mode='send']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before,
+    [data-scope='prompt-input'][data-part='submit-trigger'][data-mode='stop']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='prompt-input'][data-part='submit-trigger'][data-mode='send'][data-disabled]:empty::before,
+    [data-scope='prompt-input'][data-part='submit-trigger'][data-mode='stop'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }