@xihan-ui/styles 2.0.0 → 3.0.0

package/css/calendar-picker.css

@@ -15,7 +15,7 @@
   }
 
   [data-scope='calendar-picker'][data-part='root'] {
-    /* 翻页钮是 sm 档的图标钮（--xh-control-h-sm 见方），钮里的图标按 sm 档取 --xh-glyph-size-sm（§6.5）；
+    /* 翻页钮是 sm 档的图标钮（--xh-control-h-sm 见方），钮里的图标按 sm 档取 --xh-glyph-size-sm；
        作者塞进去的图标与皮肤画的兜底字形同一把尺 */
     --xh-icon-size: var(--xh-calendar-picker-icon-size, var(--xh-glyph-size-sm));
 
@@ -54,7 +54,7 @@
 
   /* 标题里的年与月：点它们逐级钻上去（年 → 十年格、月 → 月格）。
      长得像标题而不像按钮——它本来就是标题，只是可点 */
-  /* 标题里的年与月接 Action Control text 档（§9.1 日期翻页按钮同族）：盒、按下 / 禁用面、0.97 缩放与换底、焦点环与过渡
+  /* 标题里的年与月接 Action Control text 档（日期翻页按钮同族）：盒、按下 / 禁用面、0.97 缩放与换底、焦点环与过渡
      由家族配方给，这里只把使用者槽映射到桥接槽。长得像标题而不像按钮——它本来就是标题，只是可点：静息透明（ghost），
      悬停只换字色不换底（标题不是一枚按钮面），按下换到 200 档中性面（白底承载）；到顶那一层只作标题显示，
      光标别装成能点，也不再换面 */
@@ -80,7 +80,7 @@
     display: none;
   }
 
-  /* 四颗方向钮接 Action Control icon 档（§9.1 日期翻页按钮）、ghost 形态：正方盒、悬停 / 按下 / 禁用面、0.97 缩放与换底、
+  /* 四颗方向钮接 Action Control icon 档（日期翻页按钮）、ghost 形态：正方盒、悬停 / 按下 / 禁用面、0.97 缩放与换底、
      粗指针热区、焦点环与过渡由家族配方给，这里只把使用者槽映射到桥接槽；钮坐在日历的白底上，悬停 100 → 按下 200 */
   [data-scope='calendar-picker'][data-part='prev-year-trigger'],
   [data-scope='calendar-picker'][data-part='prev-trigger'],
@@ -138,7 +138,7 @@
     align-content: start;
     max-block-size: var(--xh-calendar-picker-year-grid-max-h, var(--xh-viewport-h-sm));
     padding-inline-end: var(--xh-calendar-picker-year-grid-pe, var(--xh-space-1));
-    /* 页内结构容器走原生细条（reset 层统一给）、滚动链保持 auto（§6.6）；嵌进 date-picker 浮层时由那份皮肤补 contain */
+    /* 页内结构容器走原生细条（reset 层统一给）、滚动链保持 auto；嵌进 date-picker 浮层时由那份皮肤补 contain */
     overflow-y: auto;
   }
 
@@ -239,7 +239,7 @@
     display: none;
   }
 
-  /* 日期格接 Action Control text 档（§9.1 日历格是定尺控件；§4.1 格状当前）、ghost 形态：悬停 / 按下 / 禁用面、
+  /* 日期格接 Action Control text 档（日历格是定尺控件，属格状当前）、ghost 形态：悬停 / 按下 / 禁用面、
      0.97 缩放与换底、焦点环与过渡由家族配方给，这里只把使用者槽映射到桥接槽。几何仍由网格给：宽度由 week-row 的
      等分轨道给、高度按 aspect-ratio 跟着走（block-size 归 auto，不取家族的固定高），日历才不会被长月份拉扁。
      格子坐在日历的白底上：悬停 100 → 按下 200；今天 / 选中 / 邻月 / 不可用只换下面的私有槽 */
@@ -304,7 +304,7 @@
     --xh-_calendar-picker-cell-fg: var(--xh-calendar-picker-cell-fg-outside, var(--xh-fg-subtle));
   }
 
-  /* 今天：1px 品牌环 + 品牌字（§7.3 brand-subtle 退出 today 语义），底透明、悬停走普通格的阶梯；
+  /* 今天：1px 品牌环 + 品牌字（brand-subtle 退出 today 语义），底透明、悬停走普通格的阶梯；
      选中仍用后面的实心强调面，两个状态叠加时不会混成同一种反馈 */
   [data-scope='calendar-picker'][data-part='cell-trigger'][data-today] {
     --xh-_calendar-picker-cell-bg: var(--xh-calendar-picker-today-bg, transparent);
@@ -312,7 +312,7 @@
     --xh-_calendar-picker-cell-fg: var(--xh-calendar-picker-today-fg, var(--xh-fg-brand));
   }
 
-  /* 实心强调面给单选 / 多选的选中格（§7.3 格状当前）：悬停不换面，按下压到 active 档（光缩放在深色底上看不出回执）。
+  /* 实心强调面给单选 / 多选的选中格（格状当前）：悬停不换面，按下压到 active 档（光缩放在深色底上看不出回执）。
      面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
      那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的 */
   [data-scope='calendar-picker'][data-part='cell-trigger'][data-selected] {
@@ -352,7 +352,7 @@
     --xh-action-ring-color-focus-visible: var(--xh-ring-focus);
   }
 
-  /* 不可用又选中的格：退到中性淡底 + 置灰字（§7.2 禁用面），选中身份仍由这块底与未选中的透明格分开 */
+  /* 不可用又选中的格：退到中性淡底 + 置灰字（禁用面），选中身份仍由这块底与未选中的透明格分开 */
   [data-scope='calendar-picker'][data-part='cell-trigger'][data-disabled][data-selected] {
     --xh-action-bg-disabled: var(--xh-calendar-picker-cell-bg-selected-disabled, var(--xh-bg-subtle));
   }
@@ -445,4 +445,23 @@
       font-weight: var(--xh-font-weight-bold);
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='calendar-picker']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='prev-year-trigger'], [data-part='next-year-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='calendar-picker']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='prev-year-trigger'], [data-part='next-year-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='calendar-picker']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='prev-year-trigger'], [data-part='next-year-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/calendar-range-picker.css

@@ -15,7 +15,7 @@
   }
 
   [data-scope='calendar-range-picker'][data-part='root'] {
-    /* 翻页钮是 sm 档的图标钮（--xh-control-h-sm 见方），钮里的图标按 sm 档取 --xh-glyph-size-sm（§6.5）；
+    /* 翻页钮是 sm 档的图标钮（--xh-control-h-sm 见方），钮里的图标按 sm 档取 --xh-glyph-size-sm；
        作者塞进去的图标与皮肤画的兜底字形同一把尺 */
     --xh-icon-size: var(--xh-calendar-range-picker-icon-size, var(--xh-glyph-size-sm));
 
@@ -54,7 +54,7 @@
 
   /* 标题里的年与月：点它们逐级钻上去（年 → 十年格、月 → 月格）。
      长得像标题而不像按钮——它本来就是标题，只是可点 */
-  /* 标题里的年与月接 Action Control text 档（§9.1 日期翻页按钮同族）：盒、按下 / 禁用面、0.97 缩放与换底、焦点环与过渡
+  /* 标题里的年与月接 Action Control text 档（日期翻页按钮同族）：盒、按下 / 禁用面、0.97 缩放与换底、焦点环与过渡
      由家族配方给，这里只把使用者槽映射到桥接槽。长得像标题而不像按钮——它本来就是标题，只是可点：静息透明（ghost），
      悬停只换字色不换底（标题不是一枚按钮面），按下换到 200 档中性面（白底承载）；到顶那一层只作标题显示，
      光标别装成能点，也不再换面 */
@@ -80,7 +80,7 @@
     display: none;
   }
 
-  /* 四颗方向钮接 Action Control icon 档（§9.1 日期翻页按钮）、ghost 形态：正方盒、悬停 / 按下 / 禁用面、0.97 缩放与换底、
+  /* 四颗方向钮接 Action Control icon 档（日期翻页按钮）、ghost 形态：正方盒、悬停 / 按下 / 禁用面、0.97 缩放与换底、
      粗指针热区、焦点环与过渡由家族配方给，这里只把使用者槽映射到桥接槽；钮坐在日历的白底上，悬停 100 → 按下 200 */
   [data-scope='calendar-range-picker'][data-part='prev-year-trigger'],
   [data-scope='calendar-range-picker'][data-part='prev-trigger'],
@@ -138,7 +138,7 @@
     align-content: start;
     max-block-size: var(--xh-calendar-range-picker-year-grid-max-h, var(--xh-viewport-h-sm));
     padding-inline-end: var(--xh-calendar-range-picker-year-grid-pe, var(--xh-space-1));
-    /* 页内结构容器走原生细条（reset 层统一给）、滚动链保持 auto（§6.6）；嵌进 date-picker 浮层时由那份皮肤补 contain */
+    /* 页内结构容器走原生细条（reset 层统一给）、滚动链保持 auto；嵌进 date-picker 浮层时由那份皮肤补 contain */
     overflow-y: auto;
   }
 
@@ -245,14 +245,21 @@
     display: none;
   }
 
-  /* 区间底色：横向铺满格子，相邻两格接成一条；纵向收在格子内衬里，行与行之间留出空当 */
+  /* 区间底色：横向铺满格子，相邻两格接成一条；纵向收在格子内衬里，行与行之间留出空当。
+     轨道随 data-in-range 生灭，出现与消失都是当场的；过渡只在同一段轨道换底时走——
+     挑到一半的预览落定成区间，中性淡底淡变到品牌淡底 */
   [data-scope='calendar-range-picker'][data-part='cell'][data-in-range]:not([data-outside-month])::before {
     content: '';
     position: absolute;
     inset-block: var(--xh-calendar-range-picker-cell-gap, var(--xh-space-0_5));
     inset-inline: 0;
     background: var(--xh-calendar-range-picker-range-bg, var(--xh-bg-brand-subtle));
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 挑到一半的预览还不是选中：品牌淡底专属选中 / 当前，预览铺中性淡底，与已落定的区间分开 */
+  [data-scope='calendar-range-picker'][data-part='cell'][data-in-range][data-range-preview]:not([data-outside-month])::before {
+    background: var(--xh-calendar-range-picker-range-preview-bg, var(--xh-bg-subtle));
   }
 
   /* 行首与行尾收圆：区间跨周时每一行各是一条两头圆的横杠。
@@ -283,7 +290,7 @@
     border-radius: var(--xh-calendar-range-picker-cell-radius, var(--xh-shape-inset));
   }
 
-  /* 日期格接 Action Control text 档（§9.1 日历格是定尺控件；§4.1 格状当前）、ghost 形态：悬停 / 按下 / 禁用面、
+  /* 日期格接 Action Control text 档（日历格是定尺控件，属格状当前）、ghost 形态：悬停 / 按下 / 禁用面、
      0.97 缩放与换底、焦点环与过渡由家族配方给，这里只把使用者槽映射到桥接槽。几何仍由网格给：宽度由 week-row 的
      等分轨道给、高度按 aspect-ratio 跟着走（block-size 归 auto，不取家族的固定高），日历才不会被长月份拉扁。
      格子坐在日历的白底上：悬停 100 → 按下 200；今天 / 选中 / 邻月 / 不可用只换下面的私有槽 */
@@ -348,13 +355,19 @@
     --xh-_calendar-range-picker-cell-fg: var(--xh-calendar-range-picker-cell-fg-outside, var(--xh-fg-subtle));
   }
 
-  /* 区间中段的格坐在品牌淡底的轨道上（§7.3 页内选中 12%）：悬停 20%、按下 28%，铺在格子自己的选中片上 */
+  /* 区间中段的格坐在品牌淡底的轨道上（页内选中 12%）：悬停 20%、按下 28%，铺在格子自己的选中片上 */
   [data-scope='calendar-range-picker'][data-part='cell-trigger'][data-in-range]:not([data-outside-month], [data-disabled], [data-range-start], [data-range-end]) {
     --xh-_calendar-range-picker-cell-bg-hover: var(--xh-calendar-range-picker-range-cell-bg-hover, var(--xh-bg-brand-subtle-hover));
     --xh-_calendar-range-picker-cell-bg-pressed: var(--xh-calendar-range-picker-range-cell-bg-pressed, var(--xh-bg-brand-subtle-active));
   }
 
-  /* 今天：1px 品牌环 + 品牌字（§7.3 brand-subtle 退出 today 语义），底透明、悬停走普通格的阶梯；
+  /* 预览中段坐在中性淡底上：交互阶梯按淡底承载走，悬停 200、按下 300 */
+  [data-scope='calendar-range-picker'][data-part='cell-trigger'][data-in-range][data-range-preview]:not([data-outside-month], [data-disabled], [data-range-start], [data-range-end]) {
+    --xh-_calendar-range-picker-cell-bg-hover: var(--xh-calendar-range-picker-range-preview-cell-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-_calendar-range-picker-cell-bg-pressed: var(--xh-calendar-range-picker-range-preview-cell-bg-pressed, var(--xh-bg-subtle-active));
+  }
+
+  /* 今天：1px 品牌环 + 品牌字（brand-subtle 退出 today 语义），底透明、悬停走普通格的阶梯；
      落在区间里时环压在轨道上，选中仍用后面的实心强调面，状态叠加时不会混成同一种反馈 */
   [data-scope='calendar-range-picker'][data-part='cell-trigger'][data-today] {
     --xh-_calendar-range-picker-cell-bg: var(--xh-calendar-range-picker-today-bg, transparent);
@@ -362,7 +375,7 @@
     --xh-_calendar-range-picker-cell-fg: var(--xh-calendar-range-picker-today-fg, var(--xh-fg-brand));
   }
 
-  /* 实心强调面只给单选 / 多选的选中格与区间的两端（§7.3 格状当前）：悬停不换面，按下压到 active 档（光缩放在深色底上
+  /* 实心强调面只给单选 / 多选的选中格与区间的两端（格状当前）：悬停不换面，按下压到 active 档（光缩放在深色底上
      看不出回执）；区间中段的格子由格子上的轨道铺底，自己不换面——不然一整段都是实心圆，就分不出哪两格是端点。
      面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
      那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的 */
@@ -393,6 +406,11 @@
       border-color: Highlight;
     }
 
+    /* 预览与落定的区间在这一档没有底色可分：还没确认的那一段在轨道上下沿画虚线 */
+    [data-scope='calendar-range-picker'][data-part='cell'][data-in-range][data-range-preview]:not([data-outside-month])::before {
+      border-block: var(--xh-stroke-thin) dashed Highlight;
+    }
+
     /* 按下换的底在这一档由家族的按压块换成 Highlight（格子、方向钮与标题钮同走），这里不再另画 */
   }
 
@@ -404,7 +422,7 @@
     --xh-action-ring-color-focus-visible: var(--xh-ring-focus);
   }
 
-  /* 不可用又选中的格：退到中性淡底 + 置灰字（§7.2 禁用面），选中身份仍由这块底与未选中的透明格分开 */
+  /* 不可用又选中的格：退到中性淡底 + 置灰字（禁用面），选中身份仍由这块底与未选中的透明格分开 */
   [data-scope='calendar-range-picker'][data-part='cell-trigger'][data-disabled][data-selected] {
     --xh-action-bg-disabled: var(--xh-calendar-range-picker-cell-bg-selected-disabled, var(--xh-bg-subtle));
   }
@@ -514,4 +532,23 @@
       border-block-end: var(--xh-stroke-thick) solid currentColor;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='calendar-range-picker']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='prev-year-trigger'], [data-part='next-year-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='calendar-range-picker']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='prev-year-trigger'], [data-part='next-year-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='calendar-range-picker']:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='prev-year-trigger'], [data-part='next-year-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/card.css

@@ -5,6 +5,8 @@
 
 /* 定义 card 样式。 */
 
+@import '../family/motion.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='card'] {
@@ -12,7 +14,7 @@
   }
 
   /* Card 是带统一内边距与节奏的内容面；布局方向可由作者在根上覆盖。
-     边界由 --xh-border-default 描边承担，raised 落影只是抬起的加成（§5.3：Card 是唯一登记 raised 的静态面，
+     边界由 --xh-border-default 描边承担，raised 落影只是抬起的加成（Card 是唯一登记 raised 的静态面，
      且 raised 必带描边）；内衬只走 --xh-surface-* 阶梯。 */
   [data-scope='card'][data-part='root'] {
     position: relative;
@@ -34,6 +36,13 @@
   /* 形态按根面三选一：outline 即基础规则（描边 + surface 底 + raised），subtle 淡底 + 透明占位边 + 无影
      （淡底与阴影互斥），ghost 三件都不画（占位边保住 1px 边位，三档几何一致）；不承诺悬停或尺寸等额外行为。 */
   [data-scope='card'][data-part='root'][data-variant='subtle'] {
+    /* 淡底容器：坐在它上面的控件按淡底阶梯换面（200 → 300），可交互卡片自己的悬停与按下读同一支私有槽。
+       host 槽只写不读，值由私有槽供给，两边同源 */
+    --xh-_card-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-_card-host-bg-pressed: var(--xh-bg-subtle-active);
+    --xh-action-host-bg-hover: var(--xh-_card-host-bg-hover);
+    --xh-action-host-bg-pressed: var(--xh-_card-host-bg-pressed);
+
     border-color: transparent;
     background: var(--xh-card-bg, var(--xh-bg-subtle));
     box-shadow: var(--xh-card-shadow, none);
@@ -45,6 +54,106 @@
     box-shadow: var(--xh-card-shadow, none);
   }
 
+  /* —— 整卡可交互 ——
+     点击区由 trigger 的 ::after 铺满整张卡片，可及名与 Tab 位只归 trigger 这个原生链接或按钮。
+     反馈按根面分：outline 是 raised 面，悬停抬高一档海拔（raised → lifted），按下换到白底阶梯的 200；
+     subtle / ghost 没有影，按承载面阶梯换面（淡底 200 → 300，无壳 100 → 200）。
+     抬起只走影、不走位移，减弱动效下仍是淡变。按下 press 时长切面，松开按 micro 回落。
+     按下认根的 :active：点击区是 trigger 的伪元素，按在卡片任一处都会让根进入 :active；
+     脚部叠在点击区之上，按脚部里的按钮时根也是 :active，这一档排除掉 */
+  [data-scope='card'][data-part='root'][data-interactive] {
+    transition-property: background-color, box-shadow;
+    transition-duration: var(--xh-motion-duration-micro);
+    transition-timing-function: var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='card'][data-part='root'][data-interactive][data-variant='outline']:hover {
+    box-shadow: var(--xh-card-shadow-hover, var(--xh-elevation-lifted));
+  }
+
+  [data-scope='card'][data-part='root'][data-interactive][data-variant='subtle']:hover {
+    background: var(--xh-card-bg-hover, var(--xh-_card-host-bg-hover));
+  }
+
+  [data-scope='card'][data-part='root'][data-interactive][data-variant='ghost']:hover {
+    background: var(--xh-card-bg-hover, var(--xh-bg-subtle));
+  }
+
+  [data-scope='card'][data-part='root'][data-interactive]:active:not(:has([data-scope='card'][data-part='footer']:active)) {
+    transition-duration: var(--xh-motion-duration-press);
+  }
+
+  [data-scope='card'][data-part='root'][data-interactive][data-variant='outline']:active:not(:has([data-scope='card'][data-part='footer']:active)) {
+    background: var(--xh-card-bg-pressed, var(--xh-bg-subtle-hover-opaque));
+  }
+
+  [data-scope='card'][data-part='root'][data-interactive][data-variant='subtle']:active:not(:has([data-scope='card'][data-part='footer']:active)) {
+    background: var(--xh-card-bg-pressed, var(--xh-_card-host-bg-pressed));
+  }
+
+  [data-scope='card'][data-part='root'][data-interactive][data-variant='ghost']:active:not(:has([data-scope='card'][data-part='footer']:active)) {
+    background: var(--xh-card-bg-pressed, var(--xh-bg-subtle-hover));
+  }
+
+  /* trigger 读作标题本身：链接不带 UA 的蓝字下划线，按钮不带 UA 的框与底 */
+  [data-scope='card'][data-part='trigger'] {
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  /* 点击区铺满整张卡片：相对根定位（根是 position: relative），外扩一条描边宽盖住边框。
+     trigger 与根之间的祖先不能再建定位上下文，否则点击区只铺到那一层 */
+  [data-scope='card'][data-part='root'][data-interactive] [data-scope='card'][data-part='trigger']::after {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * var(--xh-stroke-thin));
+    border-radius: var(--xh-card-radius, var(--xh-shape-surface));
+  }
+
+  /* 焦点环画在整张卡片外沿：环是点击区的轮廓，读者看到的可交互范围与点得到的范围一致 */
+  [data-scope='card'][data-part='root'][data-interactive] [data-scope='card'][data-part='trigger']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='card'][data-part='root'][data-interactive] [data-scope='card'][data-part='trigger']:focus-visible::after {
+    outline: var(--xh-ring-width) solid var(--xh-_ring-color, var(--xh-ring-focus));
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* footer 叠在点击区之上：里面另放的按钮照常可点，footer 的空白处不触发整卡 */
+  [data-scope='card'][data-part='root'][data-interactive] [data-scope='card'][data-part='footer'] {
+    position: relative;
+  }
+
+  /* liquid 档的交互光：可交互卡片进入悬停时，一道光沿 1px 描边扫过一次，与 Button 实心钮同一配方。
+     光只走描边、不进面，取卡片前景色；只在细指针可悬停的设备上播，强制色下不画装饰光。
+     减弱动效下时长归 1ms，一闪即过 */
+  @media (hover: hover) and (pointer: fine) and (forced-colors: none) {
+    :where([data-material='liquid']) [data-scope='card'][data-part='root'][data-interactive]:hover::after {
+      content: '';
+      position: absolute;
+      inset: calc(-1 * var(--xh-stroke-thin));
+      border: var(--xh-stroke-thin) solid transparent;
+      border-radius: inherit;
+      background: linear-gradient(100deg, transparent 42%, currentColor 50%, transparent 58%) border-box no-repeat;
+      background-size: 300% 100%;
+      background-position: 0% 0;
+      pointer-events: none;
+      mask:
+        linear-gradient(currentColor 0 0) padding-box exclude,
+        linear-gradient(currentColor 0 0);
+      animation: xh-glint var(--xh-card-glint-duration, var(--xh-motion-duration-glint)) var(--xh-motion-ease-enter) both;
+      /* 光从行首扫向行尾：rtl 下按方向符号把这一圈水平镜像，扫向跟着掉头，缓动不变 */
+      scale: var(--xh-direction-sign) 1;
+    }
+  }
+
   [data-scope='card'][data-part='header'] {
     display: flex;
     flex-direction: column;
@@ -59,7 +168,7 @@
     color: var(--xh-card-title-fg, var(--xh-fg-default));
     font-size: var(--xh-card-title-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-card-title-font-weight, var(--xh-font-weight-semibold));
-    line-height: var(--xh-card-title-leading, var(--xh-leading-relaxed));
+    line-height: var(--xh-card-title-leading, var(--xh-leading-tight));
   }
 
   [data-scope='card'][data-part='description'] {
@@ -95,6 +204,11 @@
       border-color: CanvasText;
       box-shadow: none;
     }
+
+    /* 高对比档里换底与抬起都被系统抹平：可交互卡片的悬停与按下改由描边表出，三档形态同一条 */
+    [data-scope='card'][data-part='root'][data-interactive]:is(:hover, :active) {
+      border-color: Highlight;
+    }
   }
 
   /* 声明过 display 就盖掉 UA 的 [hidden]{display:none}，各部件在文件末尾统一还原。 */