@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/form.css

@@ -0,0 +1,393 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 form 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+/* Form 独立皮肤同时传递引入提交 / 重置钮的动作控件配方；full bundle 递归去重。 */
+@import '../family/action-control.css';
+@import '../family/loading-ring.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-form {
+    --xh-form-skin: 1;
+  }
+
+  /* 表单是一列字段：竖排、字段之间留一档间距。root 就是那个原生 <form> */
+  .xh-scope-form[data-part='root'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-form-gap, var(--xh-stack-gap-md));
+    margin: 0;
+  }
+
+  /* 网格：字段排进等宽列，各列下限写 0，一段长文本不会把自己那列撑宽。
+     列数由 data-columns 逐档给，换档只改 --xh-_form-cols 这一个槽 */
+  .xh-scope-form[data-part='root'][data-layout='grid'] {
+    display: grid;
+    grid-template-columns: repeat(var(--xh-_form-cols), minmax(0, 1fr));
+
+    --xh-_form-cols: 1;
+  }
+
+  /* 只要声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  .xh-scope-form[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 横排一行流：字段并肩排，放不下自动折行 */
+  .xh-scope-form[data-part='root'][data-layout='inline'] {
+    flex-flow: row wrap;
+    align-items: start;
+    column-gap: var(--xh-form-inline-gap, var(--xh-space-4));
+    /* 一行流里字段按内容收，没有列宽可铺：在表单根上取下此处的字段缺省宽，交给下面的字段还原 */
+    --xh-_form-inline-control-w: var(--xh-control-w);
+  }
+
+  /* 字段会把里面的控件铺满字段宽，而一行流的字段宽正是由控件撑出来的，两者互相指望就塌成内容宽；
+     这一档的字段还原成表单根上的缺省宽 */
+  .xh-scope-form[data-part='root'][data-layout='inline'] .xh-scope-field[data-part='root'] {
+    --xh-control-w: var(--xh-_form-inline-control-w);
+  }
+
+  /* 一列是网格档的缺省，这里从两列起逐档写 */
+  .xh-scope-form[data-part='root'][data-columns='2'] {
+    --xh-_form-cols: 2;
+  }
+
+  .xh-scope-form[data-part='root'][data-columns='3'] {
+    --xh-_form-cols: 3;
+  }
+
+  .xh-scope-form[data-part='root'][data-columns='4'] {
+    --xh-_form-cols: 4;
+  }
+
+  /* 逐档列数：移动优先，先按 data-columns 排定，视口每宽到一档就换成那一档的列数，
+     没写的档沿用比它窄的那一档。四档自窄到宽依次写，只用 min-width：媒体查询不改选择器权重，
+     宽视口上同时命中好几档时由源码序决定谁生效。
+     宽度写字面量：自定义属性在 @media 条件里不参与求值。
+     每档都从一列写起：base 分多列、某一档收回一列同样是合法的一档 */
+  @media (min-width: 640px) {
+    .xh-scope-form[data-part='root'][data-columns-sm='1'] {
+      --xh-_form-cols: 1;
+    }
+
+    .xh-scope-form[data-part='root'][data-columns-sm='2'] {
+      --xh-_form-cols: 2;
+    }
+
+    .xh-scope-form[data-part='root'][data-columns-sm='3'] {
+      --xh-_form-cols: 3;
+    }
+
+    .xh-scope-form[data-part='root'][data-columns-sm='4'] {
+      --xh-_form-cols: 4;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .xh-scope-form[data-part='root'][data-columns-md='1'] {
+      --xh-_form-cols: 1;
+    }
+
+    .xh-scope-form[data-part='root'][data-columns-md='2'] {
+      --xh-_form-cols: 2;
+    }
+
+    .xh-scope-form[data-part='root'][data-columns-md='3'] {
+      --xh-_form-cols: 3;
+    }
+
+    .xh-scope-form[data-part='root'][data-columns-md='4'] {
+      --xh-_form-cols: 4;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .xh-scope-form[data-part='root'][data-columns-lg='1'] {
+      --xh-_form-cols: 1;
+    }
+
+    .xh-scope-form[data-part='root'][data-columns-lg='2'] {
+      --xh-_form-cols: 2;
+    }
+
+    .xh-scope-form[data-part='root'][data-columns-lg='3'] {
+      --xh-_form-cols: 3;
+    }
+
+    .xh-scope-form[data-part='root'][data-columns-lg='4'] {
+      --xh-_form-cols: 4;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .xh-scope-form[data-part='root'][data-columns-xl='1'] {
+      --xh-_form-cols: 1;
+    }
+
+    .xh-scope-form[data-part='root'][data-columns-xl='2'] {
+      --xh-_form-cols: 2;
+    }
+
+    .xh-scope-form[data-part='root'][data-columns-xl='3'] {
+      --xh-_form-cols: 3;
+    }
+
+    .xh-scope-form[data-part='root'][data-columns-xl='4'] {
+      --xh-_form-cols: 4;
+    }
+  }
+
+  /* 字段容器只管排版与状态标记：标题、控件、描述、错误文案都是里面那个 Field 的活儿 */
+  .xh-scope-form[data-part='field-group'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-form-field-gap, var(--xh-space-1));
+  }
+
+  .xh-scope-form[data-part='field-group'][hidden] {
+    display: none;
+  }
+
+  /* 网格排布下这一格占多宽，不写就占一列 */
+  .xh-scope-form[data-part='root'][data-layout='grid'] .xh-scope-form[data-part='field-group'] {
+    grid-column: var(--xh-_form-span, auto);
+  }
+
+  /* 占一列是上面的缺省，这里从跨两列起逐档写 */
+  .xh-scope-form[data-part='field-group'][data-span='2'] {
+    --xh-_form-span: auto / span 2;
+  }
+
+  .xh-scope-form[data-part='field-group'][data-span='3'] {
+    --xh-_form-span: auto / span 3;
+  }
+
+  .xh-scope-form[data-part='field-group'][data-span='4'] {
+    --xh-_form-span: auto / span 4;
+  }
+
+  /* 占满整行：从第一条列线排到最后一条，列数换档时不必跟着改跨度 */
+  .xh-scope-form[data-part='field-group'][data-span='full'] {
+    --xh-_form-span: 1 / -1;
+  }
+
+  /* 出错的字段在起始缘竖一条色带：读屏之外还得有一眼看得见的定位标记。
+     用逻辑属性，RTL 下自动换到右侧 */
+  .xh-scope-form[data-part='field-group'][data-invalid] {
+    padding-inline-start: var(--xh-form-field-invalid-px, var(--xh-space-2));
+    border-inline-start: var(--xh-stroke-thick) solid var(--xh-form-field-invalid-border, var(--xh-border-invalid));
+  }
+
+  /* 提交失败后的错误汇总。role=alert 常挂，靠 hidden 显隐 */
+  .xh-scope-form[data-part='error-summary'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-form-summary-gap, var(--xh-space-1_5));
+    padding-block: var(--xh-form-summary-py, var(--xh-space-3));
+    padding-inline: var(--xh-form-summary-px, var(--xh-control-px-md));
+    border: var(--xh-stroke-thin) solid var(--xh-form-summary-border, var(--xh-border-invalid));
+    border-radius: var(--xh-form-summary-radius, var(--xh-shape-surface));
+    background: var(--xh-form-summary-bg, var(--xh-bg-surface));
+    color: var(--xh-form-summary-fg, var(--xh-fg-danger));
+    font-size: var(--xh-form-summary-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-normal);
+    /* 静态反馈面：边界由描边承担，不带落影（solid 无影） */
+    box-shadow: var(--xh-form-summary-shadow, none);
+  }
+
+  /* 漏了这条，摘要一旦出现过就再也撤不下去（上面那条 display 盖掉了 UA 的 [hidden] 规则） */
+  .xh-scope-form[data-part='error-summary'][hidden] {
+    display: none;
+  }
+
+  /* 摘要不承载焦点（焦点直接送去出错的字段），它只是一段播报，落焦时不画环 */
+  .xh-scope-form[data-part='error-summary']:focus-visible {
+    outline: none;
+  }
+
+  /* 从收起翻成显出的那一下给一小段入场：读屏靠 role=alert 播报，
+     视觉这边也得有个"它是刚冒出来的"的交代，否则像一直杵在那儿 */
+  .xh-scope-form[data-part='error-summary'][data-state='invalid'] {
+    animation: xh-drop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 错误全改完或重置时淡出，播完连接层才写 hidden。收起态常挂 hidden，这条只在退场途中命中 */
+  .xh-scope-form[data-part='error-summary'][data-state='idle'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 摘要里的每一条是一个真链接，指向对应字段容器。铺满一行的集合行：悬停 / 按下只换面不缩放，
+     底面坐在摘要的 surface 白底上，走白底承载阶梯 100 → 200；换面按下走 press，其余走 micro */
+  .xh-scope-form[data-part='error-summary-item'] {
+    display: block;
+    padding-inline: var(--xh-form-summary-item-px, var(--xh-space-1));
+    border-radius: var(--xh-form-summary-item-radius, var(--xh-shape-control));
+    background: var(--xh-form-summary-item-bg, transparent);
+    color: inherit;
+    font-size: var(--xh-form-summary-item-font-size, var(--xh-text-secondary-size));
+    text-decoration: underline;
+    text-underline-offset: var(--xh-form-summary-item-underline-offset, var(--xh-space-0_5));
+    cursor: pointer;
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 没有对应错误的条目由连接层给 hidden；上面那条 display 已把 UA 规则盖掉 */
+  .xh-scope-form[data-part='error-summary-item'][hidden] {
+    display: none;
+  }
+
+  /* 摘要显出时条目逐条入场，越靠后起步越晚。
+     backwards 让还没轮到的条目停在首帧，不是先显出再重播 */
+  .xh-scope-form[data-part='error-summary'][data-state='invalid'] [data-part='error-summary-item']:where(.xh-scope-form) {
+    animation: xh-drop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
+  }
+
+  /* 排序按"前面有几条露面的"数，不按 nth-child：作者一次把所有字段的条目都写上，
+     没出错的那些带着 hidden 留在 DOM 里，按位置数会把空号也算进去。
+     每多一节 ~ 就多要求前面多一条露面的条目，链越长的规则排得越后、赢过短链 */
+  .xh-scope-form[data-part='error-summary'][data-state='invalid']
+    [data-part='error-summary-item']:not([hidden])
+    ~ [data-part='error-summary-item']:where(.xh-scope-form):not([hidden]) {
+    animation-delay: var(--xh-motion-stagger-step);
+  }
+
+  .xh-scope-form[data-part='error-summary'][data-state='invalid']
+    [data-part='error-summary-item']:not([hidden])
+    ~ [data-part='error-summary-item']:not([hidden])
+    ~ [data-part='error-summary-item']:where(.xh-scope-form):not([hidden]) {
+    animation-delay: calc(var(--xh-motion-stagger-step) * 2);
+  }
+
+  .xh-scope-form[data-part='error-summary'][data-state='invalid']
+    [data-part='error-summary-item']:not([hidden])
+    ~ [data-part='error-summary-item']:not([hidden])
+    ~ [data-part='error-summary-item']:not([hidden])
+    ~ [data-part='error-summary-item']:where(.xh-scope-form):not([hidden]) {
+    animation-delay: calc(var(--xh-motion-stagger-step) * 3);
+  }
+
+  .xh-scope-form[data-part='error-summary'][data-state='invalid']
+    [data-part='error-summary-item']:not([hidden])
+    ~ [data-part='error-summary-item']:not([hidden])
+    ~ [data-part='error-summary-item']:not([hidden])
+    ~ [data-part='error-summary-item']:not([hidden])
+    ~ [data-part='error-summary-item']:where(.xh-scope-form):not([hidden]) {
+    animation-delay: calc(var(--xh-motion-stagger-step) * 4);
+  }
+
+  /* 第 6 条起共用同一档延迟：这条要求前面有五条露面的，第七条往后同样命中，
+     错误多时整批的等待时间不再随条数增长 */
+  .xh-scope-form[data-part='error-summary'][data-state='invalid']
+    [data-part='error-summary-item']:not([hidden])
+    ~ [data-part='error-summary-item']:not([hidden])
+    ~ [data-part='error-summary-item']:not([hidden])
+    ~ [data-part='error-summary-item']:not([hidden])
+    ~ [data-part='error-summary-item']:not([hidden])
+    ~ [data-part='error-summary-item']:where(.xh-scope-form):not([hidden]) {
+    animation-delay: calc(var(--xh-motion-stagger-step) * 5);
+  }
+
+  .xh-scope-form[data-part='error-summary-item']:hover {
+    background: var(--xh-form-summary-item-bg-hover, var(--xh-bg-subtle));
+    color: var(--xh-form-summary-item-fg-hover, var(--xh-fg-danger-hover));
+  }
+
+  /* 指针 :active 与 Headless 投影的 data-pressed（Space / Enter 与触屏按住）看见同一副按压面 */
+  .xh-scope-form[data-part='error-summary-item']:is(:active, [data-pressed]) {
+    background: var(--xh-form-summary-item-bg-pressed, var(--xh-bg-subtle-hover));
+    color: var(--xh-form-summary-item-fg-hover, var(--xh-fg-danger-hover));
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
+  /* 高对比档里底色被系统换掉，按下那一档用系统高亮反色画回 */
+  @media (forced-colors: active) {
+    .xh-scope-form[data-part='error-summary-item']:is(:active, [data-pressed]) {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+
+  /* 两颗按钮是离散动作控件：盒几何、悬停 / 按下与 0.97 按压、焦点环、禁用面全由 Action Control 的 text 档给，
+     组件只映射既有使用者槽。提交走 solid 档：表单提交是这一组里的主要动作，与 Button 缺省同为品牌实心；
+     重置走 outline 档：非 Button 的触发器缺省中性描边。两颗共用的几何与字号写在一起 */
+  .xh-scope-form[data-part='submit-trigger'],
+  .xh-scope-form[data-part='reset-trigger'] {
+    --xh-action-visual-size: var(--xh-form-trigger-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-form-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-form-trigger-radius, var(--xh-shape-control));
+    --xh-action-font-size: var(--xh-form-trigger-font-size, var(--xh-text-body-size));
+
+    /* 按钮不参与弹性伸缩 */
+    flex: none;
+  }
+
+  /* 家族那条 display 会把 UA 的 [hidden]{display:none} 盖掉 */
+  .xh-scope-form[data-part='submit-trigger'][hidden],
+  .xh-scope-form[data-part='reset-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 重置钮：中性描边，底 / 边 / 字与禁用面映到 outline 档的桥接槽（透明底 → 100 → 200） */
+  .xh-scope-form[data-part='reset-trigger'] {
+    --xh-action-bg-rest: var(--xh-form-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-form-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-form-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-disabled: var(--xh-form-trigger-bg-disabled, var(--xh-_action-variant-bg-disabled));
+    --xh-action-fg-rest: var(--xh-form-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-form-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-form-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: var(--xh-form-trigger-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-hover: var(--xh-form-trigger-border-hover, var(--xh-_action-variant-border-hover));
+    --xh-action-border-disabled: var(--xh-form-trigger-border-disabled, var(--xh-_action-variant-border-disabled));
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: none;
+    --xh-action-shadow-hover: none;
+    --xh-action-shadow-pressed: none;
+  }
+
+  /* 提交钮：品牌实心，顶边一条极浅的内高光把这块面衬出厚度（三态同一支，禁用面由家族收掉）。
+     面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的 */
+  .xh-scope-form[data-part='submit-trigger'] {
+    --xh-action-bg-rest: var(--xh-form-submit-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-form-submit-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-form-submit-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-disabled: var(--xh-form-trigger-bg-disabled, var(--xh-_action-variant-bg-disabled));
+    --xh-action-fg-rest: var(--xh-form-submit-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-form-submit-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-form-submit-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: var(--xh-form-submit-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-hover: var(--xh-form-submit-border-hover, var(--xh-_action-variant-border-hover));
+    --xh-action-border-pressed: var(--xh-form-submit-border-active, var(--xh-_action-variant-border-pressed));
+    --xh-action-border-disabled: var(--xh-form-trigger-border-disabled, var(--xh-_action-variant-border-disabled));
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: var(--xh-form-submit-shadow, var(--xh-_highlight-brand));
+    --xh-action-shadow-hover: var(--xh-form-submit-shadow, var(--xh-_highlight-brand));
+    --xh-action-shadow-pressed: var(--xh-form-submit-shadow, var(--xh-_highlight-brand));
+    --xh-action-ring-color-focus-visible: currentColor;
+  }
+
+  /* 提交回调在途：环由加载环配方压在提交钮正中（连接层投影 data-xh-loading-ring="overlay"），直径取钮的图标档，
+     起始边取钮的真实前景、转速认使用者槽。不是禁用，焦点与对比度都保持，在途指针由家族 loading 面给。
+     提交文案随前景淡到透明留位：进入在途等一个 micro 才起淡（快速落定什么都不闪），落定时不等、按 micro 淡回 */
+  .xh-scope-form[data-part='submit-trigger'] {
+    --xh-_loading-ring-fg: var(--xh-form-submit-fg, var(--xh-_action-variant-fg-loading));
+    --xh-_loading-ring-duration: var(--xh-form-loading-duration, var(--xh-motion-loop-spin));
+  }
+
+  .xh-scope-form[data-part='submit-trigger'][data-loading] {
+    --xh-action-fg-loading: transparent;
+
+    transition-delay: var(--xh-motion-duration-micro);
+  }
+}

package/dist/css/funnel-chart.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.
+ */
+
+/* 定义 funnel chart 样式。 */
+
+/* 标题、视口、提示框、空态、焦点环与顺序色阶走 Chart 家族配方。本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/chart.css';
+@import '../family/loading-ring.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-funnel-chart {
+    --xh-funnel-chart-skin: 1;
+  }
+
+  /* 几何要用的像素值以这里的私有槽为真源：机器挂载后从计算样式读它们，作者覆盖组件槽即改变几何 */
+  .xh-scope-funnel-chart[data-part='root'] {
+    --xh-_chart-metric-bar-max: var(--xh-chart-bar-max);
+    --xh-_chart-metric-gap: var(--xh-funnel-chart-stage-gap, var(--xh-chart-gap));
+    --xh-_chart-metric-line-width: var(--xh-chart-line-width);
+    --xh-_chart-metric-point-size: var(--xh-chart-point-size);
+    --xh-_chart-metric-hit-min: var(--xh-chart-hit-min);
+    --xh-_chart-metric-tick-length: var(--xh-chart-tick-length);
+    --xh-_chart-metric-label-gap: var(--xh-chart-label-gap);
+    --xh-_chart-metric-radius: var(--xh-shape-inset);
+    --xh-_chart-metric-font-size: var(--xh-text-caption-size);
+    --xh-_chart-metric-leading: var(--xh-leading-tight);
+    --xh-_chart-gap: var(--xh-funnel-chart-gap, var(--xh-space-3));
+  }
+
+  /* —— 家族配方的组件槽：标题、视口、提示框与空态由 family/chart.css 画，本图表的覆盖槽写在
+     对应部件上接进配方的私有槽，作者在部件或它的祖先上覆盖都生效 —— */
+  .xh-scope-funnel-chart[data-part='viewport'] {
+    --xh-_chart-height: var(--xh-funnel-chart-height, var(--xh-chart-height));
+  }
+
+  .xh-scope-funnel-chart[data-part='tooltip'] {
+    --xh-_chart-tooltip-gap: var(--xh-funnel-chart-tooltip-gap, var(--xh-space-1));
+    --xh-_chart-tooltip-py: var(--xh-funnel-chart-tooltip-py, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-px: var(--xh-funnel-chart-tooltip-px, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-radius: var(--xh-funnel-chart-tooltip-radius, var(--xh-shape-overlay));
+    --xh-_chart-tooltip-shadow: var(--xh-funnel-chart-tooltip-shadow, var(--xh-material-frosted-shadow));
+  }
+
+  .xh-scope-funnel-chart[data-part='tooltip-row'] {
+    --xh-_chart-tooltip-row-gap: var(--xh-funnel-chart-tooltip-row-gap, var(--xh-space-2));
+  }
+
+  .xh-scope-funnel-chart[data-part='tooltip-swatch'] {
+    --xh-_chart-tooltip-swatch-radius: var(--xh-funnel-chart-tooltip-swatch-radius, var(--xh-shape-inset));
+  }
+
+  .xh-scope-funnel-chart[data-part='empty'][data-state='loading'] {
+    --xh-_chart-empty-gap: var(--xh-funnel-chart-empty-gap, var(--xh-space-2));
+  }
+
+  /* —— 阶段：顺序色阶由深入浅，颜色由 Chart 家族配方按段号与段内百分比兑好放在私有槽里；
+     相邻阶段之间的间隙由几何留出，不画描边；指着一个阶段时其余阶段淡出，被指着的不位移 —— */
+  .xh-scope-funnel-chart[data-part='stage'] {
+    fill: var(--xh-_chart-seq-fill);
+    stroke: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-funnel-chart[data-part='stage'][data-dimmed],
+  .xh-scope-funnel-chart[data-part='stage-label'][data-dimmed],
+  .xh-scope-funnel-chart[data-part='conversion'][data-dimmed] {
+    opacity: var(--xh-chart-dim-alpha);
+  }
+
+  /* 阶段标签与转化率是标注：标注字色，不取色阶色 */
+  .xh-scope-funnel-chart[data-part='stage-label'],
+  .xh-scope-funnel-chart[data-part='conversion'] {
+    fill: var(--xh-chart-label);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* 写在阶段里的标签压在色阶色上：深浅两端都要读得清，描一圈承载面色 */
+  .xh-scope-funnel-chart[data-part='stage-label'][data-placement='inside'] {
+    stroke: var(--xh-chart-surface);
+    stroke-width: var(--xh-stroke-thick);
+    paint-order: stroke;
+    font-weight: var(--xh-font-weight-medium);
+  }
+
+  /* 强制色：阶段改成系统色的面与描边，标注取正文色；焦点环在配方里 */
+  @media (forced-colors: active) {
+    .xh-scope-funnel-chart[data-part='stage'] {
+      fill: Canvas;
+      stroke: CanvasText;
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    .xh-scope-funnel-chart[data-part='stage-label'],
+    .xh-scope-funnel-chart[data-part='conversion'] {
+      fill: CanvasText;
+    }
+
+    .xh-scope-funnel-chart[data-part='stage-label'][data-placement='inside'] {
+      stroke: Canvas;
+    }
+  }
+}