@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/image.css

@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 image 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-image {
+    --xh-image-skin: 1;
+  }
+
+  /* 尺寸交给三个变量而不是写死：这个组件既要能当封面图，也要能当头图与缩略图。
+     给了 --xh-image-ratio 才有确定高度，回退内容与图片在同一个盒子里换人时不会跳。 */
+  .xh-scope-image[data-part='root'] {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    inline-size: var(--xh-image-w, 100%);
+    block-size: var(--xh-image-h, auto);
+    aspect-ratio: var(--xh-image-ratio, auto);
+    border-radius: var(--xh-image-radius, var(--xh-shape-control));
+    background: var(--xh-image-bg, var(--xh-bg-subtle));
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  .xh-scope-image[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 不声明 display：加载完成前的 hidden 直接交给浏览器的 [hidden] 规则收起。
+     载完那一刻 hidden 撤掉、这个节点从不显示变为显示，淡入在那一刻起跑，
+     图片不是硬切上来盖掉占位层 */
+  .xh-scope-image[data-part='image'] {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: var(--xh-image-fit, cover);
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* 占位层还在（正淡出）时图片不再自己淡入：它在占位层底下直接落位，由占位层的淡出揭开，
+     模糊小图与图片交叉，不先透出一拍底色 */
+  .xh-scope-image[data-part='root']:has(> [data-part='placeholder']:not([hidden])) > [data-part='image']:where(.xh-scope-image) {
+    animation: none;
+  }
+
+  /* 铺满图位的占位层：加载期间占住画面，作者往里放骨架屏或模糊小图。它叠在图位自己的淡底上，
+     取不透明档，不与底下那层叠深 */
+  .xh-scope-image[data-part='placeholder'] {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--xh-image-placeholder-bg, var(--xh-bg-subtle-opaque));
+    color: var(--xh-image-placeholder-fg, var(--xh-fg-subtle));
+  }
+
+  /* 图片落位或失败：占位层原地淡出（它盖在图位之上），播完连接层才写 hidden */
+  .xh-scope-image[data-part='placeholder']:is([data-state='loaded'], [data-state='error']) {
+    animation: xh-fade-out var(--xh-motion-duration-enter) var(--xh-motion-ease-enter) forwards;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则：淡出播完之后靠这条收起 */
+  .xh-scope-image[data-part='placeholder'][hidden] {
+    display: none;
+  }
+
+  /* 回退内容：图标在上、说明在下竖排居中。自带不透明淡底，说明字的对比只看这一层，
+     不透出页底（次要字色压在半透明淡底上透出页底时到不了 4.5:1） */
+  .xh-scope-image[data-part='fallback'] {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    inline-size: 100%;
+    block-size: 100%;
+    /* 没给 ratio 时根盒子高度是 auto，回退内容自己撑出一个不塌的高度 */
+    min-block-size: var(--xh-image-fallback-min-h, var(--xh-control-h-lg));
+    padding-block: var(--xh-image-fallback-py, var(--xh-space-2));
+    padding-inline: var(--xh-image-fallback-px, var(--xh-space-4));
+    background: var(--xh-image-fallback-bg, var(--xh-bg-subtle-opaque));
+    color: var(--xh-image-fallback-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-image-fallback-font-size, var(--xh-text-caption-size));
+    line-height: var(--xh-leading-relaxed);
+    text-align: center;
+    user-select: none;
+  }
+
+  /* 图片载好：回退内容浮到图片之上原地淡出，与图片的淡入交叉；播完连接层才写 hidden */
+  .xh-scope-image[data-part='fallback'][data-state='loaded'] {
+    position: absolute;
+    inset: 0;
+    animation: xh-fade-out var(--xh-motion-duration-enter) var(--xh-motion-ease-enter) forwards;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则：延迟窗口内与淡出播完之后靠这条收起 */
+  .xh-scope-image[data-part='fallback'][hidden] {
+    display: none;
+  }
+}

package/dist/css/infinite-scroll.css

@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 infinite scroll 样式。 */
+
+/* 独立皮肤同时传递引入取下一页按钮的动作控件配方，full bundle 递归去重。 */
+@import '../family/action-control.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-infinite-scroll {
+    --xh-infinite-scroll-skin: 1;
+  }
+
+  /* 这里的 data-disabled 关掉的是「还取不取下一页」，列表本身照常可读可点：
+     光标交回给作者，不摆共享层那个「不可用」的样子 */
+  .xh-scope-infinite-scroll[data-part='root'][data-disabled] {
+    cursor: inherit;
+  }
+
+  /*
+   * 列表外壳这一层刻意不给盒模型：滚的是页面还是作者自己的 overflow 容器、列表长什么样，
+   * 都归作者的布局管，组件只往它身上挂 data-loading / data-disabled 供作者取用。
+   * 一旦声明 display，UA 的 [hidden]{display:none} 就压不住了，故连 display 也不写。
+   *
+   * 哨兵是纯机制，不是可见元素：给它一条最细的高度让它有个能被观察到的盒子，
+   * 高度为 0 的元素在部分实现里交叠比恒为 0，永远等不到进入。
+   * 不吃指针：它紧贴在列表末尾，吃了指针就会挡住最后一条的点击。
+   */
+  .xh-scope-infinite-scroll[data-part='sentinel'] {
+    display: block;
+    inline-size: 100%;
+    block-size: var(--xh-infinite-scroll-sentinel-size, var(--xh-stroke-thin));
+    pointer-events: none;
+  }
+
+  /*
+   * 取下一页的按钮：与哨兵同一条通路的键盘入口，摆在列表末尾自成一行——铺满一行的独立动作条目，
+   * 接 Action Control 的 row 档、outline 形态：宽度由容器给、高度随内容、按下只换面不缩放；
+   * 盒几何、中性描边与透明底、悬停 / 按下 / 禁用面、焦点环与粗指针热区全由家族给，
+   * 白底承载 hover 100 → pressed 200。这里只把使用者槽映射到桥接槽，文案居中写在下一条。
+   * 行高不吃家族的单行档：row 档允许换行、高度随内容，折行的文案走正文行高
+   */
+  .xh-scope-infinite-scroll[data-part='load-more-trigger'] {
+    --xh-action-gap: var(--xh-infinite-scroll-load-more-gap, var(--xh-_action-profile-gap));
+    --xh-action-visual-size: var(--xh-infinite-scroll-load-more-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-infinite-scroll-load-more-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-infinite-scroll-load-more-radius, var(--xh-_action-profile-radius));
+    --xh-action-border-rest: var(--xh-infinite-scroll-load-more-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-hover: var(--xh-infinite-scroll-load-more-border-hover, var(--xh-_action-variant-border-hover));
+    --xh-action-border-pressed: var(--xh-infinite-scroll-load-more-border-hover, var(--xh-_action-variant-border-pressed));
+    --xh-action-bg-rest: var(--xh-infinite-scroll-load-more-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-infinite-scroll-load-more-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-infinite-scroll-load-more-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-infinite-scroll-load-more-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-infinite-scroll-load-more-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-infinite-scroll-load-more-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-font-size: var(--xh-infinite-scroll-load-more-font-size, var(--xh-text-body-size));
+    /* 作者塞进钮里的图标按档取字形尺寸，与文案同一把尺 */
+    --xh-icon-size: var(--xh-infinite-scroll-load-more-icon-size, var(--xh-_action-profile-glyph-size));
+
+    line-height: var(--xh-leading-normal);
+    /* 到底了连点是常态，触屏上默认会当成双击缩放 */
+    touch-action: manipulation;
+  }
+
+  /* 文案居中（单行整段居中，折行逐行居中），盖掉 row 档的靠起始缘排布：它是一行里唯一的东西，
+     靠起始缘会像一条没对齐的列表项。选择器点名 row 档，有层与无层两份产物里都压得住它 */
+  .xh-scope-infinite-scroll[data-part='load-more-trigger'][data-xh-action-profile='row'] {
+    justify-content: center;
+    text-align: center;
+  }
+
+  /* 声明过 display 就盖掉了 UA 的 [hidden]{display:none}，作者要藏哨兵时得自己补回来 */
+  .xh-scope-infinite-scroll[data-part='sentinel'][hidden],
+  .xh-scope-infinite-scroll[data-part='load-more-trigger'][hidden] {
+    display: none;
+  }
+}

package/dist/css/input-group.css

@@ -0,0 +1,323 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 input group 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-input-group {
+    --xh-input-group-skin: 1;
+  }
+
+  /* 输入框、前后缀和动作共用一个输入表面。组只统一材质与外轮廓，语义仍归各子控件。 */
+  .xh-scope-input-group[data-part='root'] {
+    /* 段之间那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
+       既不让页面上的层号插进来，也不让它们漏出去压住别人 */
+    isolation: isolate;
+
+    /* 缺省档。item 的高度、内衬与字号从这三个槽取，换档只改这里 */
+    --xh-_input-group-h: var(--xh-control-h-md);
+    --xh-_input-group-px: var(--xh-control-px-md);
+    --xh-_input-group-font-size: var(--xh-control-font-md);
+    /* 组壳与字段外壳同形：静息字段淡底 + --xh-border-control；悬停底不变、描边升 --xh-border-strong；
+       聚焦换承载面 + --xh-border-control-focus，不画聚焦环（强制色档补一圈 Highlight 环）；无影 */
+    --xh-_input-group-bg: var(--xh-bg-field);
+    --xh-_input-group-bg-hover: var(--xh-bg-field);
+    --xh-_input-group-bg-focus: var(--xh-bg-surface);
+    --xh-_input-group-border: var(--xh-border-control);
+    --xh-_input-group-border-hover: var(--xh-border-strong);
+    --xh-_input-group-border-focus: var(--xh-border-control-focus);
+    --xh-_input-group-shadow: none;
+
+    position: relative;
+    display: inline-flex;
+    box-sizing: border-box;
+    align-items: stretch;
+    /* 整组是一个字段：不传尺寸时与单个字段同宽，组里的字段让位占满前后缀之外的那段 */
+    inline-size: var(--xh-input-group-w, var(--xh-control-w));
+    border-radius: var(--xh-input-group-radius, var(--xh-shape-control));
+    /* 面只在这一处画：各状态只换 --xh-_input-group-face 这一个槽，静息、悬停、失效、只读、禁用与聚焦
+       顺着同一条声明换色，过渡也只认这一处 */
+    --xh-_input-group-face: var(--xh-input-group-bg, var(--xh-_input-group-bg));
+    background: var(--xh-_input-group-face);
+    box-shadow: var(--xh-input-group-shadow, var(--xh-_input-group-shadow));
+
+    /* 父容器给不出这么宽时整组跟着收，不越出父容器 */
+    max-inline-size: 100%;
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 外轮廓不占盒尺寸，组内控件仍保持与独立使用时相同的高度。 */
+  .xh-scope-input-group[data-part='root']::before {
+    content: '';
+    position: absolute;
+    z-index: 2;
+    inset: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-input-group-border, var(--xh-_input-group-border));
+    border-radius: inherit;
+    pointer-events: none;
+    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* subtle：淡底顶替描边表达边界，描边只退成透明而不去掉；悬停浮出 --xh-border-control */
+  .xh-scope-input-group[data-part='root'][data-variant='subtle'] {
+    --xh-_input-group-bg: var(--xh-bg-subtle);
+    --xh-_input-group-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-_input-group-bg-focus: var(--xh-bg-subtle);
+    --xh-_input-group-border: transparent;
+    --xh-_input-group-border-hover: var(--xh-border-control);
+    --xh-_input-group-shadow: none;
+  }
+
+  /* ghost：静息不画壳，悬停与聚焦沿用下面的 hover / focus 规则浮出 --xh-border-control 与底 */
+  .xh-scope-input-group[data-part='root'][data-variant='ghost'] {
+    --xh-_input-group-bg: transparent;
+    --xh-_input-group-bg-hover: color-mix(in oklab, var(--xh-bg-subtle) 45%, transparent);
+    --xh-_input-group-bg-focus: transparent;
+    --xh-_input-group-border: transparent;
+    --xh-_input-group-border-hover: var(--xh-border-control);
+    --xh-_input-group-shadow: none;
+  }
+
+  /* 悬停浮出描边与底：组里的字段只读、禁用或失效时不浮。只读与禁用和下面的禁用面一样只认带字段外壳的那一段，
+     组里单独禁用一颗按钮不让整组失去悬停 */
+  .xh-scope-input-group[data-part='root']:not(:has([data-xh-field-chrome]:is([data-disabled], [data-readonly]), [data-invalid], [aria-invalid='true'])):not(:focus-within):hover {
+    --xh-_input-group-face: var(--xh-input-group-bg-hover, var(--xh-_input-group-bg-hover));
+  }
+
+  .xh-scope-input-group[data-part='root']:not(:has([data-xh-field-chrome]:is([data-disabled], [data-readonly]), [data-invalid], [aria-invalid='true'])):not(:focus-within):hover::before {
+    border-color: var(--xh-input-group-border-hover, var(--xh-_input-group-border-hover));
+  }
+
+  /* 组里的字段校验失败：失效描边 + 4% 失效色淡底，与字段外壳的失效档同一副面 */
+  .xh-scope-input-group[data-part='root']:has([data-invalid], [aria-invalid='true']) {
+    --xh-_input-group-face: var(--xh-input-group-bg-invalid, var(--xh-bg-field-invalid));
+  }
+
+  .xh-scope-input-group[data-part='root']:has([data-invalid], [aria-invalid='true'])::before {
+    border-color: var(--xh-input-group-border-invalid, var(--xh-border-invalid));
+  }
+
+  /* 组里的字段只读 / 禁用：组壳换淡底，禁用另把描边退到 --xh-border-default；
+     只认带字段外壳的那一段，组里单独禁用一颗按钮不让整组变灰。
+     只读用 :where() 压低特指度，拿到焦点时与字段外壳一样让位给聚焦态 */
+  .xh-scope-input-group[data-part='root']:has(:where([data-xh-field-chrome][data-readonly])) {
+    --xh-_input-group-face: var(--xh-input-group-bg-read-only, var(--xh-bg-subtle));
+  }
+
+  .xh-scope-input-group[data-part='root']:has([data-xh-field-chrome][data-disabled]) {
+    --xh-_input-group-face: var(--xh-input-group-bg-disabled, var(--xh-bg-subtle));
+  }
+
+  .xh-scope-input-group[data-part='root']:has([data-xh-field-chrome][data-disabled])::before {
+    border-color: var(--xh-input-group-border-disabled, var(--xh-border-default));
+  }
+
+  /* 聚焦排在失效之后：校验失败的字段拿到焦点时让位给聚焦态。
+     焦点由描边换色与承载面的底色差标出，不画聚焦环 */
+  .xh-scope-input-group[data-part='root']:focus-within {
+    --xh-_input-group-face: var(--xh-input-group-bg-focus, var(--xh-_input-group-bg-focus));
+  }
+
+  .xh-scope-input-group[data-part='root']:focus-within::before {
+    border-color: var(--xh-input-group-border-focus, var(--xh-_input-group-border-focus));
+  }
+
+  /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
+     不补的话作者给节点加 hidden 后它照样显示 */
+  .xh-scope-input-group[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  /* 档位跟着组内控件走：控件的档位就写在它自己的根上，组读得到，
+     于是前后缀块与邻座同高，作者不必把同一档在组上再写一遍。
+     缺省档写在上面的基础规则里 */
+  .xh-scope-input-group[data-part='root']:has([data-size='sm']) {
+    --xh-_input-group-h: var(--xh-control-h-sm);
+    --xh-_input-group-px: var(--xh-control-px-sm);
+    --xh-_input-group-font-size: var(--xh-control-font-sm);
+  }
+
+  .xh-scope-input-group[data-part='root']:has([data-size='lg']) {
+    --xh-_input-group-h: var(--xh-control-h-lg);
+    --xh-_input-group-px: var(--xh-control-px-lg);
+    --xh-_input-group-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 组上写了档位时以它为准：排在自动档后面，同特指度下压得住 */
+  .xh-scope-input-group[data-part='root'][data-size='sm'] {
+    --xh-_input-group-h: var(--xh-control-h-sm);
+    --xh-_input-group-px: var(--xh-control-px-sm);
+    --xh-_input-group-font-size: var(--xh-control-font-sm);
+  }
+
+  .xh-scope-input-group[data-part='root'][data-size='md'] {
+    --xh-_input-group-h: var(--xh-control-h-md);
+    --xh-_input-group-px: var(--xh-control-px-md);
+    --xh-_input-group-font-size: var(--xh-control-font-md);
+  }
+
+  .xh-scope-input-group[data-part='root'][data-size='lg'] {
+    --xh-_input-group-h: var(--xh-control-h-lg);
+    --xh-_input-group-px: var(--xh-control-px-lg);
+    --xh-_input-group-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 子控件不再各画一层输入表面，悬停与聚焦统一落在组的外轮廓。 */
+  .xh-scope-input-group[data-part='root'] [data-xh-field-chrome] {
+    --xh-field-bg-rest: transparent;
+    --xh-field-bg-hover: transparent;
+    --xh-field-bg-read-only: transparent;
+    --xh-field-bg-disabled: transparent;
+    --xh-field-border-rest: transparent;
+    --xh-field-border-hover: transparent;
+    --xh-field-border-focus: transparent;
+    --xh-field-border-invalid: transparent;
+    --xh-field-shadow-rest: none;
+    --xh-field-shadow-read-only: none;
+    --xh-field-shadow-disabled: none;
+
+    border-color: transparent;
+    background-color: transparent;
+    box-shadow: none;
+    /* 内层表面始终透明，不播放字段自身的边框/背景过渡，避免失焦时短暂闪回。 */
+    transition: none;
+  }
+
+  /* 聚焦换色由组的外表面承担（强制色档的系统色环也画在组壳上），子输入保留焦点语义但不再自己画一圈。 */
+  .xh-scope-input-group[data-part='root'] [data-xh-field-chrome]:focus-within {
+    outline: none;
+  }
+
+  .xh-scope-input-group[data-part='root'] [data-xh-field-chrome]:hover,
+  .xh-scope-input-group[data-part='root'] [data-xh-field-chrome]:focus-within,
+  .xh-scope-input-group[data-part='root'] [data-xh-field-chrome][data-invalid],
+  .xh-scope-input-group[data-part='root'] [data-xh-field-chrome][data-readonly],
+  .xh-scope-input-group[data-part='root'] [data-xh-field-chrome][data-disabled] {
+    border-color: transparent;
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  /* 组里的字段（带字段外壳的控件）占满前后缀与动作之外的剩余宽度，自己的缺省宽让位；
+     前后缀、按钮这些段按内容宽，不跟着撑开 */
+  .xh-scope-input-group[data-part='root'] > :is([data-xh-field-chrome], :has([data-xh-field-chrome])) {
+    flex: 1 1 0%;
+    min-inline-size: 0;
+    inline-size: auto;
+  }
+
+  /* 每一段都是定位元素，动作控件的悬停面可以浮到外轮廓之上。 */
+  .xh-scope-input-group[data-part='root'] > * {
+    position: relative;
+  }
+
+  /* 悬停或拿到焦点的动作段抬到外轮廓同层，自己的反馈不会被邻座覆盖。 */
+  .xh-scope-input-group[data-part='root'] > *:hover,
+  .xh-scope-input-group[data-part='root'] > *:focus-within {
+    z-index: 2;
+  }
+
+  /* —— 两端圆角 —— */
+  /* 画着描边的那个盒子有三种落点：段本身、段就是控件盒、控件盒在段里一层。
+     :is() 取其中最特指的一支算特指度，三种落点因此都压得住控件自己那条圆角规则。
+     只认直接子节点与它下面那一层：更深的节点是控件的内部结构，圆错了位置比直角更糟 */
+  .xh-scope-input-group[data-part='root'] > :is(*, [data-part='control'], [data-part='root']),
+  .xh-scope-input-group[data-part='root'] > * :is([data-part='control'], [data-part='root']) {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  /* 逻辑角属性写，rtl 跟着换边，不必另写一套 */
+  .xh-scope-input-group[data-part='root'] > :is(*, [data-part='control'], [data-part='root']):first-child,
+  .xh-scope-input-group[data-part='root'] > *:first-child :is([data-part='control'], [data-part='root']) {
+    border-start-start-radius: var(--xh-input-group-radius, var(--xh-shape-control));
+    border-end-start-radius: var(--xh-input-group-radius, var(--xh-shape-control));
+  }
+
+  .xh-scope-input-group[data-part='root'] > :is(*, [data-part='control'], [data-part='root']):last-child,
+  .xh-scope-input-group[data-part='root'] > *:last-child :is([data-part='control'], [data-part='root']) {
+    border-start-end-radius: var(--xh-input-group-radius, var(--xh-shape-control));
+    border-end-end-radius: var(--xh-input-group-radius, var(--xh-shape-control));
+  }
+
+  /* —— 前后缀块 —— */
+  /* 前后缀是输入表面里的静态内容：铺一层淡底与可输入的那一段分开、取正文色，两侧内距对称；
+     不单独绘制外框或焦点状态，外轮廓与聚焦换色归组壳 */
+  .xh-scope-input-group[data-part='item'] {
+    display: inline-flex;
+    box-sizing: border-box;
+    flex: none;
+    align-items: center;
+    block-size: var(--xh-input-group-item-h, var(--xh-_input-group-h));
+    padding-inline: var(--xh-input-group-item-px, var(--xh-_input-group-px));
+    background-color: var(--xh-input-group-item-bg, var(--xh-bg-subtle));
+    color: var(--xh-input-group-item-fg, var(--xh-fg-default));
+    font-size: var(--xh-input-group-item-font-size, var(--xh-_input-group-font-size));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+  }
+
+  /* 与相邻段之间一道满高的缺省描边，只画在朝里的那一侧，外侧交给组壳的外轮廓。
+     两块前后缀挨着时只由后一块画：半透明描边两道相叠会叠深 */
+  .xh-scope-input-group[data-part='root'] > .xh-scope-input-group[data-part='item']:not(:first-child) {
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-input-group-item-divider, var(--xh-border-default));
+  }
+
+  .xh-scope-input-group[data-part='root'] > .xh-scope-input-group[data-part='item']:not(:last-child):not(:has(+ .xh-scope-input-group[data-part='item'])) {
+    border-inline-end: var(--xh-stroke-thin) solid var(--xh-input-group-item-divider, var(--xh-border-default));
+  }
+
+  .xh-scope-input-group[data-part='item'][hidden] {
+    display: none;
+  }
+
+  /* 组里的字段禁用：前后缀块的字随字段禁用面换 --xh-fg-disabled，与组壳的禁用面同一个判据 */
+  .xh-scope-input-group[data-part='root']:has([data-xh-field-chrome][data-disabled]) > .xh-scope-input-group[data-part='item'] {
+    color: var(--xh-fg-disabled);
+  }
+
+  @media (forced-colors: active) {
+    .xh-scope-input-group[data-part='root'] {
+      background: Canvas;
+      box-shadow: none;
+    }
+
+    .xh-scope-input-group[data-part='root']::before {
+      border-color: ButtonText;
+    }
+
+    /* 常规档不画环、只换描边色；这一档里描边换色未必分得出来，补一圈系统色环 */
+    .xh-scope-input-group[data-part='root']:focus-within {
+      outline: var(--xh-ring-width) solid Highlight;
+      outline-offset: var(--xh-ring-offset);
+    }
+
+    .xh-scope-input-group[data-part='root']:focus-within::before,
+    .xh-scope-input-group[data-part='root']:has([data-invalid], [aria-invalid='true'])::before {
+      border-color: Highlight;
+    }
+
+    .xh-scope-input-group[data-part='root']:has([data-xh-field-chrome][data-disabled])::before {
+      border-color: GrayText;
+    }
+
+    /* 淡底在这一档被抹成 Canvas，前后缀与输入段只剩分隔线分得开：线换系统色 */
+    .xh-scope-input-group[data-part='item'] {
+      background-color: Canvas;
+      color: CanvasText;
+      border-color: ButtonText;
+    }
+
+    .xh-scope-input-group[data-part='root']:has([data-xh-field-chrome][data-disabled]) > .xh-scope-input-group[data-part='item'] {
+      color: GrayText;
+    }
+  }
+}