@xihan-ui/styles 1.0.0 → 2.0.0

package/css/anchor.css

@@ -1,3 +1,15 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 anchor 样式。 */
+
+/* 链接归 Collection Item 导航当前（nav 语境）：面、字色、字重、光标与按压时间线由家族配方按投影的家族角色给，
+   本皮肤只映射桥接槽。2px 指示线由本皮肤画：目录里放了 indicator 部件就由部件在轨道上滑动，
+   没放则当前那一节的链接自画一条静态线 */
+@import '../family/collection-item.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='anchor'] {
@@ -10,11 +22,12 @@
     /* 尺寸档只换这两个私有槽，链接从 root 继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_anchor-font-size: var(--xh-control-font-md);
     --xh-_anchor-link-px: var(--xh-control-px-md);
-    /* 当前那一节的指示条与文字随语气走。没写 data-tone 时这两个槽都没被声明，退回原来的品牌色。
-       指示条是装饰性的色条，取柔和档；文字要压在普通背景上读，取语气的文字档。
+    /* 当前那一节的指示条与文字随语气走。没写 data-tone 时这两个槽都没被声明，退回品牌色。
+       指示条是装饰性的色条，取柔和档；文字要压在普通背景上读，取语气的文字档——
+       导航当前页（§7.3）缺省是 --xh-fg-brand-strong，比指示条深一档。
        聚焦环不在其列，它恒是 --xh-ring-focus */
     --xh-_anchor-accent: var(--xh-_tone-soft, var(--xh-fg-brand));
-    --xh-_anchor-accent-text: var(--xh-_tone-fg, var(--xh-fg-brand));
+    --xh-_anchor-accent-text: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 
     color: var(--xh-anchor-fg, var(--xh-fg-muted));
     font-size: var(--xh-anchor-font-size, var(--xh-_anchor-font-size));
@@ -72,44 +85,51 @@
     display: none;
   }
 
+  /* 链接的几何、字号与面全经家族桥接槽：静息 muted / regular，悬停走白底承载 hover 100 + default 字，
+     按下 pressed 200 只换面（§7.2 / §9.2）；当前那一节（§7.3 导航当前页）brand-strong 字色（随语气的
+     --xh-_anchor-accent-text）+ medium 字重都跟着变，2px 指示线放了 indicator 部件由部件滑动、没放则由
+     下面的静态线规则画在当前链接自己身上。本条 (0,2,0) 压过家族基础块 (0,1,0)，不能再写 color / background。
+     position: relative 是静态线的定位参照 */
   [data-scope='anchor'][data-part='link'] {
+    --xh-collection-block-padding: var(--xh-anchor-link-py, var(--xh-space-1));
+    --xh-collection-inline-padding: var(--xh-anchor-link-px, var(--xh-_anchor-link-px));
+    --xh-collection-radius: var(--xh-anchor-link-radius, var(--xh-shape-control));
+    --xh-collection-font-size: var(--xh-anchor-font-size, var(--xh-_anchor-font-size));
+    --xh-collection-fg-rest: var(--xh-anchor-fg, var(--xh-fg-muted));
+    --xh-collection-bg-hover: var(--xh-anchor-link-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-fg-hover: var(--xh-anchor-link-fg-hover, var(--xh-fg-default));
+    --xh-collection-bg-pressed: var(--xh-anchor-link-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-collection-fg-current: var(--xh-anchor-link-fg-current, var(--xh-_anchor-accent-text));
+    --xh-collection-font-weight-current: var(--xh-anchor-link-font-weight-current, var(--xh-font-weight-medium));
+
+    position: relative;
     display: inline-flex;
     align-items: center;
     /* 一节的标题可能很长，压不住会把整列撑开 */
     max-inline-size: var(--xh-anchor-link-max-w, var(--xh-nav-link-max-w));
-    padding-block: var(--xh-anchor-link-py, var(--xh-space-1));
-    padding-inline: var(--xh-anchor-link-px, var(--xh-_anchor-link-px));
-    border-radius: var(--xh-anchor-link-radius, var(--xh-shape-control));
-    color: inherit;
+    /* 行高随 root 的行距槽：家族基础块给条目写了 leading-normal，这里接回 root 那一支 */
+    line-height: var(--xh-anchor-leading, var(--xh-leading-normal));
     white-space: nowrap;
     text-decoration: none;
     text-overflow: ellipsis;
     overflow: hidden;
-    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='anchor'][data-part='link'][hidden] {
     display: none;
   }
 
-  [data-scope='anchor'][data-part='link']:hover {
-    color: var(--xh-anchor-link-fg-hover, var(--xh-fg-default));
-  }
-
-  [data-scope='anchor'][data-part='link']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  /* 当前那一节：颜色与字重都跟着变，不只靠指示条——
-     指示条是可选部件，作者不渲染它时"当前在哪"仍然要看得出来 */
-  [data-scope='anchor'][data-part='link'][data-current] {
-    color: var(--xh-anchor-link-fg-active, var(--xh-_anchor-accent-text));
-    font-weight: var(--xh-anchor-link-font-weight-active, var(--xh-font-weight-medium));
+  /* 链接里另有图标时，省略号只裁这一段文字 */
+  [data-scope='anchor'][data-part='link-text'] {
+    min-inline-size: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 
   /* 主轴上的位置与长度由连接层写成内联样式（它量得到，样式表量不到）；
-     这里只管交叉轴的贴边与粗细，以及长什么样 */
+     这里只管交叉轴的贴边与粗细，以及长什么样。它是可选部件——不渲染它时，
+     当前那一节的链接自画一条同规格的静态线（见下） */
   [data-scope='anchor'][data-part='indicator'] {
     position: absolute;
     display: block;
@@ -120,8 +140,8 @@
     border-radius: var(--xh-anchor-indicator-radius, var(--xh-shape-pill));
     background: var(--xh-anchor-indicator-color, var(--xh-_anchor-accent));
     transition:
-      inset-block-start var(--xh-motion-duration-enter) var(--xh-motion-ease-enter),
-      block-size var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+      inset-block-start var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
+      block-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
   }
 
   /* display 会盖掉 hidden 属性的 UA 规则，无激活项时显式让位 */
@@ -136,7 +156,59 @@
     inline-size: auto;
     block-size: var(--xh-anchor-indicator-thickness, var(--xh-stroke-thick));
     transition:
-      inset-inline-start var(--xh-motion-duration-enter) var(--xh-motion-ease-enter),
-      inline-size var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+      inset-inline-start var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
+      inline-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
+  }
+
+  /* 目录里没放 indicator 部件时，当前那一节的链接自画一条静态指示线（§7.3 导航当前页）：
+     与 Tabs line 档同一取法，作者不必为了这条线多放一个部件。
+     线画在当前链接的 ::after 上，以链接盒为定位参照（上面已给 position: relative），
+     厚度 / 颜色 / 圆角与 indicator 部件读同一组槽与缺省——作者改一处，部件与静态线一起改。
+     不做动画：它随 data-current 在链接间跳，滑动只有部件做得到。
+     线贴在链接盒内的那条缘：链接为了省略号收着 overflow，画不到盒外；部件骑在 list 的轨道上（盒外一线宽），
+     两者同侧、差一线宽。主轴两端各退一格 --xh-space-1 避开链接的圆角（overflow 连圆角一起裁，贴满会被
+     切掉两个角），与家族 page 语境的起始侧指示条同一取法。嵌套目录里子级链接随自己的缩进走，部件则始终在
+     外层轨道上。
+     目录里一旦放了 indicator 部件，这条线就收起、位置交给部件滑动，不重复画两条：
+     由 list 按 :has 探一次，把私有槽写成 none，线的 content 读它；链接自己不必再各带一段 :has */
+  [data-scope='anchor'][data-part='list']:has([data-scope='anchor'][data-part='indicator']) {
+    --xh-_anchor-static-line: none;
+  }
+
+  [data-scope='anchor'][data-part='link'][data-current]::after {
+    content: var(--xh-_anchor-static-line, '');
+    position: absolute;
+    pointer-events: none;
+    border-radius: var(--xh-anchor-indicator-radius, var(--xh-shape-pill));
+    background: var(--xh-anchor-indicator-color, var(--xh-_anchor-accent));
+  }
+
+  /* 竖排（缺省）：贴链接的行向起始缘（与 indicator 部件同一侧，rtl 随逻辑属性镜像） */
+  [data-scope='anchor'][data-part='list'][data-orientation='vertical']
+    [data-scope='anchor'][data-part='link'][data-current]::after {
+    inset-inline-start: 0;
+    inset-block: var(--xh-space-1);
+    inline-size: var(--xh-anchor-indicator-thickness, var(--xh-stroke-thick));
+  }
+
+  /* 横排：贴链接的块向末端（底边） */
+  [data-scope='anchor'][data-part='list'][data-orientation='horizontal']
+    [data-scope='anchor'][data-part='link'][data-current]::after {
+    inset-block-end: 0;
+    inset-inline: var(--xh-space-1);
+    block-size: var(--xh-anchor-indicator-thickness, var(--xh-stroke-thick));
+  }
+
+  @media (forced-colors: active) {
+    /* 指示条画的是一块纯底色，这一档里底色被统一换成 Canvas，条子整根消失，
+       "读到哪一节"就只剩链接自己的字重。换成系统高亮色画回来 */
+    [data-scope='anchor'][data-part='indicator'] {
+      background: Highlight;
+    }
+
+    /* 没放部件时当前链接自画的那条静态线同样是一块纯底色，同一档换成系统高亮色 */
+    [data-scope='anchor'][data-part='link'][data-current]::after {
+      background: Highlight;
+    }
   }
 }

package/css/approval.css

@@ -0,0 +1,461 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 approval 样式。 */
+
+/* 独立皮肤同时传递引入授权行与两颗钮的动作控件配方，full bundle 递归去重。 */
+@import '../family/action-control.css';
+
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+
+  /* 幅度走令牌，减弱动效时由令牌层归零；位移用独立属性而非 transform 简写 */
+  @keyframes xh-approval-in {
+    from {
+      opacity: 0;
+      translate: 0 var(--xh-motion-distance-md);
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  @keyframes xh-approval-result-in {
+    from {
+      opacity: 0;
+      scale: var(--xh-motion-scale-enter);
+    }
+
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @keyframes xh-approval-rotate {
+    to {
+      rotate: 360deg;
+    }
+  }
+}
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='approval'] {
+    --xh-approval-skin: 1;
+  }
+
+  /* 一块要人做决定的静态内容面：--xh-border-default 描边 + surface 底 + 无影（§5.3 边界只由描边承担），
+     作者打了语气时描边染成语气色作强调（下面那条），判定落定后描边退回中性 */
+  [data-scope='approval'][data-part='root'] {
+    /* 作者塞进标题 / 说明 / 结果条里的图标按档取尺（§6.5），缺省 md；勾选记号另按盒比例量 */
+    --xh-_approval-icon-size: var(--xh-glyph-size-md);
+    --xh-icon-size: var(--xh-approval-icon-size, var(--xh-_approval-icon-size));
+
+    /* 尺寸缺省档：不写 data-size 时的取值。三档都只写这批私有槽，
+       公开槽留在读处当首选，作者在祖先上设的覆盖才赢得过档位声明 */
+    --xh-_approval-gap: var(--xh-space-3);
+    --xh-_approval-p: var(--xh-space-4);
+    --xh-_approval-action-h: var(--xh-control-h-md);
+    --xh-_approval-action-px: var(--xh-control-px-md);
+    --xh-_approval-item-font-size: var(--xh-control-font-md);
+    --xh-_approval-note-font-size: var(--xh-control-font-md);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-approval-gap, var(--xh-_approval-gap));
+    padding: var(--xh-approval-p, var(--xh-_approval-p));
+    border: var(--xh-stroke-thin) solid var(--xh-approval-border, var(--xh-border-default));
+    border-radius: var(--xh-approval-radius, var(--xh-shape-surface));
+    background: var(--xh-approval-bg, var(--xh-bg-surface));
+    box-shadow: var(--xh-approval-shadow, none);
+    transition: border-color var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+    animation: xh-approval-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
+  [data-scope='approval'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 语气只染描边：作者定的强调，待决时把这块面从正文里提出来 */
+  [data-scope='approval'][data-part='root'][data-tone] {
+    border-color: var(--xh-approval-border, var(--xh-_tone, var(--xh-border-default)));
+  }
+
+  /* 判过了就不再抢注意力：语气色边退回中性描边（根面外边不取 subtle，§5.3）。
+     排在语气那条之后：同等特指度，落定要盖得过语气 */
+  [data-scope='approval'][data-part='root']:not([data-state='pending']) {
+    border-color: var(--xh-approval-border-settled, var(--xh-border-default));
+  }
+
+  /* —— 形态 —— */
+  /* 缺省档即 outline，写在上面那条基础规则里。
+     两档排在落定那条之后：它们把描边整个撤掉，排在前面会被落定那条按同等特指度盖回来 */
+  /* 底色分区：描边让位给底色，闸门嵌在别人的面里时不再多一圈线；
+     淡底承载面向授权行与拒绝钮下发 hover 200 → pressed 300（§7.2） */
+  [data-scope='approval'][data-part='root'][data-variant='subtle'] {
+    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
+
+    border-color: transparent;
+    background: var(--xh-approval-bg, var(--xh-bg-subtle));
+  }
+
+  /* 无壳内联：卡中卡时不再自带一张面，跟着外层的底走 */
+  [data-scope='approval'][data-part='root'][data-variant='ghost'] {
+    border-color: transparent;
+    background: none;
+    box-shadow: none;
+  }
+
+  /* 标题走 Surface 标题档 14/600（§6.4） */
+  [data-scope='approval'][data-part='title'] {
+    display: block;
+    margin: 0;
+    color: var(--xh-approval-title-fg, var(--xh-fg-default));
+    font-size: var(--xh-approval-title-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-approval-title-font-weight, var(--xh-font-weight-semibold));
+    line-height: var(--xh-leading-tight);
+  }
+
+  [data-scope='approval'][data-part='title'][hidden] {
+    display: none;
+  }
+
+  [data-scope='approval'][data-part='description'] {
+    display: block;
+    margin: 0;
+    color: var(--xh-approval-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-approval-description-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-leading-normal);
+  }
+
+  [data-scope='approval'][data-part='description'][hidden] {
+    display: none;
+  }
+
+  /* 视觉隐藏的播报区：不能 display:none，那样读屏就取不到它了 */
+  [data-scope='approval'][data-part='live-region'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  [data-scope='approval'][data-part='group'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-approval-group-gap, var(--xh-space-1));
+  }
+
+  [data-scope='approval'][data-part='group'][hidden] {
+    display: none;
+  }
+
+  /* 一项授权：整行可点、可聚焦，勾选记号在左。盒型、悬停 / 按下 / 禁用面由 Action Control 的 row 档给
+     （ghost 形态：白底承载 hover 100 → pressed 200，按下只换面不缩放，§9.2；禁用守卫认 data-disabled），
+     这里只把使用者槽映射到桥接槽，内衬与间距沿用本组件的档位。
+     行高不吃家族的单行档：row 档允许换行、高度随内容，一条会折行的授权文案走正文行高（§6.4） */
+  [data-scope='approval'][data-part='item'] {
+    --xh-action-gap: var(--xh-approval-item-gap, var(--xh-space-1_5));
+    --xh-action-padding-inline: var(--xh-approval-item-px, var(--xh-space-2));
+    --xh-action-padding-block: var(--xh-approval-item-py, var(--xh-space-1));
+    --xh-action-radius: var(--xh-approval-item-radius, var(--xh-_action-profile-radius));
+    --xh-action-font-size: var(--xh-approval-item-font-size, var(--xh-_approval-item-font-size));
+    --xh-action-bg-hover: var(--xh-approval-item-bg-hover, var(--xh-_action-variant-bg-hover));
+
+    line-height: var(--xh-leading-normal);
+  }
+
+  [data-scope='approval'][data-part='item'][hidden] {
+    display: none;
+  }
+
+  /* 勾选记号：方框 + 选中态填色，纯装饰不进可访问名。
+     勾按盒比例量（与 Checkbox 同一比例），作者塞进来的图标读同一把尺，不随根上的整档图标放大撑破盒 */
+  [data-scope='approval'][data-part='item-indicator'] {
+    --xh-_approval-indicator-glyph: calc(var(--xh-approval-indicator-size, var(--xh-control-indicator-size)) * 0.75);
+    --xh-icon-size: var(--xh-approval-indicator-icon-size, var(--xh-_approval-indicator-glyph));
+
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    border: var(--xh-stroke-thin) solid var(--xh-approval-indicator-border, var(--xh-border-control));
+    border-radius: var(--xh-approval-indicator-radius, var(--xh-shape-inset));
+    color: var(--xh-approval-indicator-fg, var(--xh-fg-on-brand));
+    inline-size: var(--xh-approval-indicator-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-approval-indicator-size, var(--xh-control-indicator-size));
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='approval'][data-part='item-indicator'][hidden] {
+    display: none;
+  }
+
+  /* 没写内容就由皮肤画勾；作者往部件里塞了自己的图形，这条规则即不命中 */
+  [data-scope='approval'][data-part='item-indicator']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+  }
+
+  [data-scope='approval'][data-part='item-indicator'][data-state='checked'] {
+    border-color: var(--xh-approval-indicator-border-checked, var(--xh-bg-brand));
+    background: var(--xh-approval-indicator-bg-checked, var(--xh-bg-brand));
+  }
+
+  /* 没勾上时把勾隐去而不是撤掉：盒子留在原位，翻面时整行不跳 */
+  [data-scope='approval'][data-part='item-indicator'][data-state='unchecked'] {
+    color: transparent;
+  }
+
+  /* 勾上的那条读起来更重一档 */
+  [data-scope='approval'][data-part='item-text'] {
+    display: block;
+    flex: 1 1 auto;
+    color: var(--xh-approval-item-text-fg, var(--xh-fg-muted));
+  }
+
+  [data-scope='approval'][data-part='item'][data-state='checked'] [data-part='item-text'] {
+    color: var(--xh-approval-item-text-fg-checked, var(--xh-fg-default));
+  }
+
+  /* 排在勾选档之后：禁用项无论勾没勾都是禁用色 */
+  [data-scope='approval'][data-part='item'][data-disabled] [data-part='item-text'] {
+    color: var(--xh-fg-disabled);
+  }
+
+  [data-scope='approval'][data-part='item-text'][hidden] {
+    display: none;
+  }
+
+  /* 备注：附在判定上的一句自由文本，占满整行 */
+  [data-scope='approval'][data-part='note'] {
+    display: block;
+    inline-size: 100%;
+    padding-inline: var(--xh-approval-note-px, var(--xh-space-2));
+    padding-block: var(--xh-approval-note-py, var(--xh-space-1_5));
+    border: var(--xh-stroke-thin) solid var(--xh-approval-note-border, var(--xh-border-control));
+    border-radius: var(--xh-approval-note-radius, var(--xh-shape-control));
+    background: var(--xh-approval-note-bg, var(--xh-bg-surface));
+    color: var(--xh-approval-note-fg, var(--xh-fg-default));
+    font-family: inherit;
+    font-size: var(--xh-approval-note-font-size, var(--xh-_approval-note-font-size));
+    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='approval'][data-part='note'][hidden] {
+    display: none;
+  }
+
+  [data-scope='approval'][data-part='note']:disabled {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 剩余时间：等宽数字，逐秒跳字时不左右晃 */
+  [data-scope='approval'][data-part='timer'] {
+    display: block;
+    color: var(--xh-approval-timer-fg, var(--xh-fg-muted));
+    font-size: var(--xh-approval-timer-font-size, var(--xh-text-caption-size));
+    font-variant-numeric: tabular-nums;
+  }
+
+  [data-scope='approval'][data-part='timer'][hidden] {
+    display: none;
+  }
+
+  /* 判定结果条：判过了才露出，语气随判定走 */
+  [data-scope='approval'][data-part='result'] {
+    display: inline-flex;
+    align-self: flex-start;
+    align-items: center;
+    gap: var(--xh-approval-result-gap, var(--xh-space-1_5));
+    padding-inline: var(--xh-approval-result-px, var(--xh-space-2));
+    padding-block: var(--xh-approval-result-py, var(--xh-space-1));
+    border-radius: var(--xh-approval-result-radius, var(--xh-shape-pill));
+    background: var(--xh-approval-result-bg, color-mix(in oklab, var(--xh-fg-success) 12%, var(--xh-bg-surface)));
+    color: var(--xh-approval-result-fg, var(--xh-fg-success));
+    font-size: var(--xh-approval-result-font-size, var(--xh-text-caption-size));
+    font-weight: var(--xh-approval-result-font-weight, var(--xh-text-label-weight));
+    animation: xh-approval-result-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  [data-scope='approval'][data-part='result'][hidden] {
+    display: none;
+  }
+
+  /* 超时按拒绝收口，两者同档：视觉上不该看着像第三种结果 */
+  [data-scope='approval'][data-part='result']:is([data-state='denied'], [data-state='expired']) {
+    background: var(--xh-approval-result-bg-denied, color-mix(in oklab, var(--xh-fg-danger) 12%, var(--xh-bg-surface)));
+    color: var(--xh-approval-result-fg-denied, var(--xh-fg-danger));
+  }
+
+  /* 动作行：两颗按钮靠右排，间距归库管。
+     一行排不下就折行：两颗钮的文案都不折行，靠右排的行溢出时是往行首那侧漫出去，
+     漫出去的那截既不产生横滚也回不来，折行是这一行唯一取得回来的形态。 */
+  [data-scope='approval'][data-part='footer'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--xh-approval-footer-gap, var(--xh-space-2));
+  }
+
+  [data-scope='approval'][data-part='footer'][hidden] {
+    display: none;
+  }
+
+  /* 两颗按钮是离散动作控件：盒几何、悬停 / 按下与 0.97 按压、焦点环、禁用与在途面全由 Action Control 的
+     text 档给，组件只映射既有使用者槽。批准走 solid 档：判定闸门里的主要动作，与 Button 缺省同为品牌实心；
+     拒绝走 outline 档：非 Button 的触发器缺省中性描边（§7.2.2）。
+     三档守卫由连接层投影：判定在途是 data-loading + aria-disabled（保住可聚焦，家族给在途面：底色不置灰、
+     指针 progress），必选项没勾满与落定是 data-disabled（家族给禁用面：置灰底、置灰字、not-allowed）。
+     两颗共用的几何与字号写在一起 */
+  [data-scope='approval'][data-part='approve-trigger'],
+  [data-scope='approval'][data-part='deny-trigger'] {
+    --xh-action-visual-size: var(--xh-approval-action-h, var(--xh-_approval-action-h));
+    --xh-action-padding-inline: var(--xh-approval-action-px, var(--xh-_approval-action-px));
+    --xh-action-radius: var(--xh-approval-action-radius, var(--xh-shape-control));
+    --xh-action-font-size: var(--xh-approval-action-font-size, var(--xh-text-label-size));
+
+    font-weight: var(--xh-approval-action-font-weight, var(--xh-text-label-weight));
+  }
+
+  /* 家族那条 display 会把 UA 的 [hidden]{display:none} 盖掉 */
+  [data-scope='approval'][data-part='approve-trigger'][hidden],
+  [data-scope='approval'][data-part='deny-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 批准钮：品牌实心，内顶高光把实心块顶出一道边，与拒绝那颗的描边同一档厚度（三态与在途同一支，
+     禁用面由家族收掉）；底 / 字与禁用底映到 solid 档的桥接槽 */
+  [data-scope='approval'][data-part='approve-trigger'] {
+    --xh-action-bg-rest: var(--xh-approval-approve-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-approval-approve-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-loading: var(--xh-approval-approve-bg, var(--xh-_action-variant-bg-loading));
+    --xh-action-bg-disabled: var(--xh-approval-approve-bg-off, var(--xh-_action-variant-bg-disabled));
+    --xh-action-fg-rest: var(--xh-approval-approve-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-approval-approve-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-approval-approve-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-loading: var(--xh-approval-approve-fg, var(--xh-_action-variant-fg-loading));
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: var(--xh-approval-approve-shadow, var(--xh-_highlight-tone));
+    --xh-action-shadow-hover: var(--xh-approval-approve-shadow, var(--xh-_highlight-tone));
+    --xh-action-shadow-pressed: var(--xh-approval-approve-shadow, var(--xh-_highlight-tone));
+    --xh-action-shadow-loading: var(--xh-approval-approve-shadow, var(--xh-_highlight-tone));
+  }
+
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的。
+     只对着还铺着实心底的那两档：按得动的常态，与判定在途那一档；
+     禁用档的底换成置灰底、字换成置灰色，环取过来就跟底一起糊了，那一档走公共层的环 */
+  [data-scope='approval'][data-part='approve-trigger']:not([data-disabled]) {
+    --xh-action-ring-color-focus-visible: currentColor;
+  }
+
+  /* 拒绝钮：中性描边，底 / 边 / 字与禁用面映到 outline 档的桥接槽（透明底 → 100 → 200；
+     落定后描边退回中性，不再像个能按的出口） */
+  [data-scope='approval'][data-part='deny-trigger'] {
+    --xh-action-bg-rest: var(--xh-approval-deny-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-approval-deny-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-disabled: var(--xh-approval-deny-bg-off, var(--xh-_action-variant-bg-disabled));
+    --xh-action-fg-rest: var(--xh-approval-deny-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-approval-deny-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-approval-deny-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: var(--xh-approval-deny-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-disabled: var(--xh-approval-deny-border-off, 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;
+  }
+
+  /* 判定在途：两颗钮那一行里转一枚圆环（指针 progress 由家族的在途面给）。
+     两颗钮此刻确实按不动，但按不动的理由是「你按的那一下正在走」，与「必选项没勾满」
+     的那档灰不是一回事；只留灰的话两种情形长得一模一样，用户读不出系统正在想。
+     所以在途这一档不置灰：颜色与对比度都保持原样，锁住只由圆环与指针说。
+     圆环挂在这一行上而不是某一颗钮上：连接层只拿到「有一条判定在途」，
+     拿不到是哪一颗按下的，画在两颗钮上会有一颗在说假话 */
+
+  [data-scope='approval'][data-part='root'][data-loading] [data-scope='approval'][data-part='footer']::before {
+    content: '';
+    flex: none;
+
+    /* 圆环那一枚跟着两颗钮的字号走，不跟页面的：download-trigger 与 clipboard 的圆环
+       1em 量的都是它所在那颗钮，这里的宿主是整行，不锁字号就会比按钮上的大一圈 */
+    font-size: var(--xh-approval-action-font-size, var(--xh-text-label-size));
+    inline-size: 1em;
+    block-size: 1em;
+    border: var(--xh-stroke-thin) solid transparent;
+    border-block-start-color: currentColor;
+    border-radius: var(--xh-shape-circle);
+    animation: xh-approval-rotate var(--xh-approval-loading-duration, var(--xh-spin-duration)) var(--xh-motion-ease-loop) infinite;
+  }
+
+  /* 减少动效：圆环停下并整圈换成虚线，静止的形状仍然读得出"还没好"。
+     两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='approval'][data-part='root'][data-loading] [data-scope='approval'][data-part='footer']::before {
+      border-style: dotted;
+      border-color: currentColor;
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='approval'][data-part='root'][data-loading] [data-scope='approval'][data-part='footer']::before {
+    border-style: dotted;
+    border-color: currentColor;
+    animation: none;
+  }
+
+  /* 尺寸档改内衬、间距、按钮高度、行内字号与图标档 */
+  [data-scope='approval'][data-part='root'][data-size='sm'] {
+    --xh-_approval-icon-size: var(--xh-glyph-size-sm);
+    --xh-_approval-p: var(--xh-space-3);
+    --xh-_approval-gap: var(--xh-space-2);
+    --xh-_approval-action-h: var(--xh-control-h-sm);
+    --xh-_approval-action-px: var(--xh-control-px-sm);
+    --xh-_approval-item-font-size: var(--xh-control-font-sm);
+    --xh-_approval-note-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-scope='approval'][data-part='root'][data-size='md'] {
+    --xh-_approval-icon-size: var(--xh-glyph-size-md);
+    --xh-_approval-p: var(--xh-space-4);
+    --xh-_approval-gap: var(--xh-space-3);
+    --xh-_approval-action-h: var(--xh-control-h-md);
+    --xh-_approval-action-px: var(--xh-control-px-md);
+    --xh-_approval-item-font-size: var(--xh-control-font-md);
+    --xh-_approval-note-font-size: var(--xh-control-font-md);
+  }
+
+  [data-scope='approval'][data-part='root'][data-size='lg'] {
+    --xh-_approval-icon-size: var(--xh-glyph-size-lg);
+    --xh-_approval-p: var(--xh-space-5);
+    --xh-_approval-gap: var(--xh-space-4);
+    --xh-_approval-action-h: var(--xh-control-h-lg);
+    --xh-_approval-action-px: var(--xh-control-px-lg);
+    --xh-_approval-item-font-size: var(--xh-control-font-lg);
+    --xh-_approval-note-font-size: var(--xh-control-font-lg);
+  }
+}