@xihan-ui/styles 1.0.0 → 2.0.0

package/css/clipboard.css

@@ -1,3 +1,32 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 clipboard 样式。 */
+
+@import '../family/action-control.css';
+
+@layer xihan.motion {
+  @keyframes xh-clipboard-rotate {
+    to {
+      rotate: 360deg;
+    }
+  }
+
+  @keyframes xh-clipboard-loading-reveal {
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes xh-clipboard-loading-hide {
+    to {
+      opacity: 0;
+    }
+  }
+}
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='clipboard'] {
@@ -6,9 +35,53 @@
 
   /* 与文本框同一套堆叠：标签一行、输入行一行 */
   [data-scope='clipboard'][data-part='root'] {
+    /* 输入框与按钮同取一档高度，换尺寸只改这一个私有槽 */
+    --xh-_clipboard-h: var(--xh-control-h-md);
+    --xh-_clipboard-px: var(--xh-control-px-md);
+    --xh-_clipboard-font-size: var(--xh-control-font-md);
+
     display: inline-flex;
     flex-direction: column;
     gap: var(--xh-clipboard-gap, var(--xh-space-1));
+    isolation: isolate;
+
+    /* 父容器给不出这么宽时整件跟着收，不越出父容器 */
+    max-inline-size: 100%;
+  }
+
+  /* 带输入框的用法是一件字段：不传尺寸时一律这么宽，宽度不随内容走；父容器给不出这么宽时整件跟着收，
+     地板同步让步，地板不高过缺省宽。只放复制钮的用法是一颗独立按钮，宽随文字走，不吃字段缺省宽 */
+  [data-scope='clipboard'][data-part='root']:has([data-scope='clipboard'][data-part='control']) {
+    inline-size: var(--xh-clipboard-control-w, var(--xh-control-w));
+    min-inline-size: min(var(--xh-clipboard-control-w, var(--xh-control-w)), var(--xh-clipboard-control-min-w, var(--xh-control-min-w)), 100%);
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  [data-scope='clipboard'][data-part='root'][data-size='sm'] {
+    --xh-_clipboard-h: var(--xh-control-h-sm);
+    --xh-_clipboard-px: var(--xh-control-px-sm);
+    --xh-_clipboard-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-scope='clipboard'][data-part='root'][data-size='lg'] {
+    --xh-_clipboard-h: var(--xh-control-h-lg);
+    --xh-_clipboard-px: var(--xh-control-px-lg);
+    --xh-_clipboard-font-size: var(--xh-control-font-lg);
+  }
+
+  /* —— 形态 ——
+     四档的底 / 前景 / 描边由家族形态矩阵按复制钮上的 data-xh-action-variant 给出（缺省 subtle 由连接层显式
+     投影，只有 solid 才品牌实心），用哪族颜色由 data-tone 决定；这里只剩实心面上的环色。
+     面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的 */
+  [data-scope='clipboard'][data-part='copy-trigger'][data-xh-action-variant='solid']:focus-visible {
+    --xh-action-ring-color-focus-visible: currentColor;
+  }
+
+  /* 整件禁用：输入框仍可选中复制，只有那颗写剪贴板的钮点不动 */
+  [data-scope='clipboard'][data-part='root'][data-disabled] {
+    cursor: not-allowed;
   }
 
   /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
@@ -27,11 +100,11 @@
     display: none;
   }
 
-  /* 输入框与按钮并排，两者各自把高度对齐即可成一体 */
+  /* 输入框与复制按钮共享一条连续轮廓。 */
   [data-scope='clipboard'][data-part='control'] {
     display: inline-flex;
     align-items: center;
-    gap: var(--xh-clipboard-control-gap, var(--xh-control-gap-md));
+    gap: var(--xh-clipboard-control-gap, 0);
   }
 
   [data-scope='clipboard'][data-part='control'][hidden] {
@@ -39,9 +112,12 @@
   }
 
   [data-scope='clipboard'][data-part='input'] {
-    min-inline-size: var(--xh-clipboard-input-min-w, var(--xh-control-min-w));
-    block-size: var(--xh-clipboard-input-h, var(--xh-control-h-md));
-    padding-inline: var(--xh-clipboard-input-px, var(--xh-control-px-md));
+    /* 撑满复制钮之外的剩余宽度；min-inline-size 归零解开原生 input 按字符数算出来的自动最小宽，
+       根被压窄时输入框跟着收，不是钮先被顶出去 */
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    block-size: var(--xh-clipboard-input-h, var(--xh-_clipboard-h));
+    padding-inline: var(--xh-clipboard-input-px, var(--xh-_clipboard-px));
     padding-block: 0;
     border: var(--xh-stroke-thin) solid var(--xh-clipboard-input-border, var(--xh-border-control));
     border-radius: var(--xh-clipboard-input-radius, var(--xh-shape-control));
@@ -57,83 +133,226 @@
     text-overflow: ellipsis;
   }
 
+  [data-scope='clipboard'][data-part='control'] > [data-scope='clipboard'][data-part='input']:not(:last-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  /* 焦点边一律 --xh-border-control-focus，不随 tone（§7.2 第 5 条） */
   [data-scope='clipboard'][data-part='input']:focus-visible {
-    border-color: var(--xh-clipboard-input-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+    border-color: var(--xh-clipboard-input-border-focus, var(--xh-border-control-focus));
   }
 
-  [data-scope='clipboard'][data-part='trigger'] {
-    display: inline-flex;
+  /* 自动填充：引擎给填过的框强加一套系统色（多数是黄底黑字），盖得过 background 与 color，
+     深色档下就剩一个不跟主题走的黄框。底改用 inset 阴影铺回来，扩散量 100vmax 填满内容盒；
+     字改用 -webkit-text-fill-color 接回来，那是这个态下唯一还听样式表的前景通道。
+     不去拉长 transition 把系统底推迟显现：那只是把它藏起来，减弱动效通道一关过渡就当场露出。
+     两个选择器名分写两条：一条选择器列表里只要有一个名字不被认识，整条规则就被丢弃。
+     铺的底跟着这个框自己那档压低的底走，不然填过之后它会比没填时亮一块。 */
+  [data-scope='clipboard'][data-part='input']:autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-clipboard-input-autofill-bg, var(--xh-bg-subtle));
+    -webkit-text-fill-color: var(--xh-clipboard-input-autofill-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='clipboard'][data-part='input']:-webkit-autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-clipboard-input-autofill-bg, var(--xh-bg-subtle));
+    -webkit-text-fill-color: var(--xh-clipboard-input-autofill-fg, var(--xh-fg-default));
+  }
+
+  /* 复制钮是定尺的独立动作按钮（§9.1）：盒型、四态面、0.97 按压与粗指针命中区由家族配方给出，
+     这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射。
+     叠格布局要保留：两侧指示器叠在同一格，切换时不抖宽度 */
+  [data-scope='clipboard'][data-part='copy-trigger'] {
+    --xh-action-bg-rest: var(--xh-clipboard-copy-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-clipboard-copy-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-clipboard-copy-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-clipboard-copy-trigger-bg, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-bg-loading: var(--xh-clipboard-copy-trigger-bg, var(--xh-_action-variant-bg-loading));
+    --xh-action-bg-disabled: var(--xh-clipboard-copy-trigger-bg-disabled, var(--xh-_action-variant-bg-disabled));
+    --xh-action-fg-rest: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-focus-visible));
+    --xh-action-fg-loading: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-loading));
+    --xh-action-border-rest: var(--xh-clipboard-copy-trigger-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-hover: var(--xh-clipboard-copy-trigger-border-hover, var(--xh-_action-variant-border-hover));
+    --xh-action-border-pressed: var(--xh-clipboard-copy-trigger-border-hover, var(--xh-_action-variant-border-pressed));
+    --xh-action-border-focus-visible: var(--xh-clipboard-copy-trigger-border, var(--xh-_action-variant-border-focus-visible));
+    --xh-action-border-disabled: var(--xh-clipboard-copy-trigger-border-disabled, var(--xh-_action-variant-border-disabled));
+    /* 矩阵各态无影（§8.3 淡底与阴影互斥）：solid 也不再悬停抬影，使用者槽仍可自行加 */
+    --xh-action-shadow-hover: var(--xh-clipboard-copy-trigger-shadow-hover, none);
+    --xh-action-radius: var(--xh-clipboard-copy-trigger-radius, var(--xh-shape-control));
+    --xh-action-visual-size: var(--xh-clipboard-copy-trigger-h, var(--xh-_clipboard-h));
+    --xh-action-padding-inline: var(--xh-clipboard-copy-trigger-px, var(--xh-_clipboard-px));
+    --xh-action-gap: var(--xh-clipboard-copy-trigger-gap, var(--xh-control-gap-sm));
+    --xh-action-font-size: var(--xh-clipboard-copy-trigger-font-size, var(--xh-_clipboard-font-size));
+
+    display: inline-grid;
     flex: none;
-    align-items: center;
-    justify-content: center;
-    gap: var(--xh-clipboard-trigger-gap, var(--xh-control-gap-sm));
-    block-size: var(--xh-clipboard-trigger-h, var(--xh-control-h-md));
-    padding-inline: var(--xh-clipboard-trigger-px, var(--xh-control-px-md));
-    padding-block: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-clipboard-trigger-border, var(--xh-border-control));
-    border-radius: var(--xh-clipboard-trigger-radius, var(--xh-shape-control));
-    background: var(--xh-clipboard-trigger-bg, var(--xh-bg-canvas));
-    color: var(--xh-clipboard-trigger-fg, var(--xh-fg-default));
-    font-family: inherit;
-    font-size: var(--xh-clipboard-trigger-font-size, var(--xh-text-body-size));
-    line-height: var(--xh-leading-none);
-    white-space: nowrap;
-    cursor: pointer;
+    font-weight: var(--xh-clipboard-copy-trigger-font-weight, var(--xh-text-label-weight));
     /* 复制按钮常被连点，触屏上默认会当成双击缩放 */
-    user-select: none;
     touch-action: manipulation;
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 接在只读输入框后面时补回外轮廓：与输入框共享一条连续的可操作区描边 */
+  [data-scope='clipboard'][data-part='control']
+    > [data-scope='clipboard'][data-part='copy-trigger']:not(:first-child) {
+    --xh-action-border-rest: var(--xh-clipboard-copy-trigger-border, var(--xh-border-control));
+    --xh-action-border-hover: var(--xh-clipboard-copy-trigger-border-hover, var(--xh-border-control-hover));
+    --xh-action-border-pressed: var(--xh-clipboard-copy-trigger-border-hover, var(--xh-border-control-hover));
+    --xh-action-border-focus-visible: var(--xh-clipboard-copy-trigger-border, var(--xh-border-control));
+  }
+
+  [data-scope='clipboard'][data-part='control'] > [data-scope='clipboard'][data-part='copy-trigger']:not(:first-child) {
+    position: relative;
+    margin-inline-start: calc(-1 * var(--xh-stroke-thin));
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    border-start-end-radius: var(
+      --xh-clipboard-copy-trigger-attached-radius,
+      var(--xh-clipboard-input-radius, var(--xh-shape-control))
+    );
+    border-end-end-radius: var(
+      --xh-clipboard-copy-trigger-attached-radius,
+      var(--xh-clipboard-input-radius, var(--xh-shape-control))
+    );
+  }
+
+  [data-scope='clipboard'][data-part='control'] > [data-scope='clipboard'][data-part='input']:focus-visible,
+  [data-scope='clipboard'][data-part='control'] > [data-scope='clipboard'][data-part='copy-trigger']:focus-visible,
+  [data-scope='clipboard'][data-part='control'] > [data-scope='clipboard'][data-part='copy-trigger']:hover {
+    position: relative;
+    z-index: var(--xh-clipboard-control-active-layer, 1);
   }
 
   /* 上面给了 display，UA 的 [hidden]{display:none} 已被盖掉，这里补回来 */
-  [data-scope='clipboard'][data-part='trigger'][hidden] {
+  [data-scope='clipboard'][data-part='copy-trigger'][hidden] {
     display: none;
   }
 
-  [data-scope='clipboard'][data-part='trigger']:hover {
-    border-color: var(--xh-clipboard-trigger-border-hover, var(--xh-border-control-hover));
-    background: var(--xh-clipboard-trigger-bg-hover, var(--xh-bg-subtle-hover));
+  /* 快速写入不显示瞬时圆环；超过一个 micro 周期后才平滑换成加载状态。 */
+  [data-scope='clipboard'][data-part='root'][data-state='copying']
+    [data-scope='clipboard'][data-part='copy-trigger'][aria-busy='true'] {
+    cursor: progress;
   }
 
-  [data-scope='clipboard'][data-part='trigger']:active {
-    background: var(--xh-clipboard-trigger-bg-active, var(--xh-bg-subtle-active));
+  [data-scope='clipboard'][data-part='copy-trigger'][aria-busy='true']::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    inline-size: 1em;
+    block-size: 1em;
+    margin: auto;
+    border: var(--xh-stroke-thin) solid transparent;
+    border-block-start-color: currentColor;
+    /* 正圆的加载环：正方盒取 circle（§6.3） */
+    border-radius: var(--xh-shape-circle);
+    opacity: 0;
+    animation:
+      xh-clipboard-rotate var(--xh-clipboard-loading-duration, var(--xh-spin-duration)) var(--xh-motion-ease-loop) infinite,
+      xh-clipboard-loading-reveal var(--xh-motion-duration-micro) var(--xh-motion-ease-enter) var(--xh-motion-duration-micro) forwards;
   }
 
-  [data-scope='clipboard'][data-part='trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  [data-scope='clipboard'][data-part='copy-trigger'][aria-busy='true']
+    > [data-scope='clipboard'][data-part='indicator']:not([data-copied]) {
+    animation: xh-clipboard-loading-hide var(--xh-motion-duration-micro) var(--xh-motion-ease-enter)
+      var(--xh-motion-duration-micro) forwards;
   }
 
-  /* 写入在途：按钮还在原地不动，只把它压暗一点，免得连点 */
-  [data-scope='clipboard'][data-part='trigger'][data-state='copying'] {
-    cursor: progress;
-    opacity: 0.7;
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='clipboard'][data-part='copy-trigger'][aria-busy='true']::before {
+      animation: none;
+    }
+
+    [data-scope='clipboard'][data-part='copy-trigger'][aria-busy='true']
+      > [data-scope='clipboard'][data-part='indicator']:not([data-copied]) {
+      animation: none;
+    }
   }
 
-  /* 复制成功那一段换成成功色，撑住"这次真的写进去了"这句话 */
-  [data-scope='clipboard'][data-part='trigger'][data-copied] {
-    border-color: var(--xh-clipboard-trigger-border-copied, var(--xh-fg-success));
-    color: var(--xh-clipboard-trigger-fg-copied, var(--xh-fg-success));
+  :where([data-motion='reduce']) [data-scope='clipboard'][data-part='copy-trigger'][aria-busy='true']::before,
+  :where([data-motion='reduce']) [data-scope='clipboard'][data-part='copy-trigger'][aria-busy='true']
+    > [data-scope='clipboard'][data-part='indicator']:not([data-copied]) {
+    animation: none;
+  }
+
+  /* 复制成功只换前景与内容，轮廓和尺寸保持稳定；各态前景经桥接槽换，悬停与按下不退回平时的字色 */
+  [data-scope='clipboard'][data-part='copy-trigger'][data-copied] {
+    --xh-action-fg-rest: var(--xh-clipboard-copy-trigger-fg-copied, var(--xh-fg-success));
+    --xh-action-fg-hover: var(--xh-clipboard-copy-trigger-fg-copied, var(--xh-fg-success));
+    --xh-action-fg-pressed: var(--xh-clipboard-copy-trigger-fg-copied, var(--xh-fg-success));
+    --xh-action-fg-focus-visible: var(--xh-clipboard-copy-trigger-fg-copied, var(--xh-fg-success));
+  }
+
+  /* 实心面上复制成功仍用面配对的前景色：成功色在语气底上读不清 */
+  [data-scope='clipboard'][data-part='copy-trigger'][data-xh-action-variant='solid'][data-copied] {
+    --xh-action-fg-rest: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-clipboard-copy-trigger-fg, var(--xh-_action-variant-fg-focus-visible));
   }
 
   [data-scope='clipboard'][data-part='indicator'] {
     display: inline-flex;
     flex: none;
+    grid-area: 1 / 1;
     align-items: center;
     justify-content: center;
+    gap: var(
+      --xh-clipboard-indicator-gap,
+      var(--xh-clipboard-copy-trigger-gap, var(--xh-control-gap-sm))
+    );
+    opacity: 0;
+    visibility: hidden;
+    /* 视觉退出完成后才隐藏旧内容，避免旧侧先消失、新侧仍为透明时出现空白闪帧。 */
+    transition:
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      visibility 0s var(--xh-motion-ease-exit) var(--xh-motion-duration-micro);
   }
 
-  /* 两个指示器靠 hidden 互斥显隐；上面给了 display，这条不补的话收起态当场失效 */
+  /* 作者仍可用原生 hidden 收起整个指示器。 */
   [data-scope='clipboard'][data-part='indicator'][hidden] {
     display: none;
   }
 
+  [data-scope='clipboard'][data-part='indicator']:not([data-copied]),
+  [data-scope='clipboard'][data-part='root'][data-state='copied'] [data-scope='clipboard'][data-part='indicator'][data-copied] {
+    opacity: 1;
+    visibility: visible;
+    transition:
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      visibility 0s var(--xh-motion-ease-enter) 0s;
+  }
+
+  [data-scope='clipboard'][data-part='root'][data-state='copied'] [data-scope='clipboard'][data-part='indicator']:not([data-copied]) {
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      visibility 0s var(--xh-motion-ease-exit) var(--xh-motion-duration-micro);
+  }
+
   /* 成功那一侧的图标用成功色；平时那侧跟着按钮的文字色走 */
   [data-scope='clipboard'][data-part='indicator'][data-copied] {
     color: var(--xh-clipboard-indicator-fg-copied, var(--xh-fg-success));
   }
+
+  [data-scope='clipboard'][data-part='copy-trigger'][data-xh-action-variant='solid'] > [data-scope='clipboard'][data-part='indicator'][data-copied] {
+    color: inherit;
+  }
+
+  /* 复制成功的文字回执：读屏念得到，屏幕上不占位。
+     视觉隐藏的配方与 .xh-visually-hidden 逐条同值——1px 盒绝对定位、裁掉、文本不换行。
+     刻意不写 display：display:none 的节点读屏根本不念 */
+  [data-scope='clipboard'][data-part='status'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
 }

package/css/code-view.css

@@ -0,0 +1,279 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 code view 样式。 */
+
+/* 独立皮肤同时传递引入折叠条的动作控件配方；full bundle 递归去重。 */
+@import '../family/action-control.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='code-view'] {
+    --xh-code-view-skin: 1;
+  }
+
+  /* 一张静态内容面：--xh-border-default 描边 + surface 底 + 无影（§5.3 边界只由描边承担），
+     overflow: hidden 让内部 <pre> 的滚动内容沿圆角收边；不设 display，排布由作者决定。
+     color 给整段未着色的代码定基线，字号在这里消费一次，缺省即 sm 档。 */
+  [data-scope='code-view'][data-part='root'] {
+    /* 尺寸缺省档：不写 data-size 时的取值。三档都只写这个私有槽，
+       公开槽留在读处当首选，作者在祖先上设的覆盖才赢得过档位声明 */
+    --xh-_code-view-font-size: var(--xh-control-font-sm);
+
+    overflow: hidden;
+    border: var(--xh-stroke-thin) solid var(--xh-code-view-border, var(--xh-border-default));
+    border-radius: var(--xh-code-view-radius, var(--xh-shape-surface));
+    background: var(--xh-code-view-bg, var(--xh-bg-surface));
+    box-shadow: var(--xh-code-view-shadow, none);
+    color: var(--xh-code-view-fg, var(--xh-fg-muted));
+    font-size: var(--xh-code-view-font-size, var(--xh-_code-view-font-size));
+  }
+
+  /* min-block-size 给头部条一个不随内容塌陷的定高：只放文件名时与放进按钮时一样高 */
+  [data-scope='code-view'][data-part='header'] {
+    display: flex;
+    min-block-size: var(--xh-code-view-header-h, var(--xh-control-h-lg));
+    align-items: center;
+    gap: var(--xh-code-view-header-gap, var(--xh-space-2));
+    padding-inline: var(--xh-code-view-header-px, var(--xh-space-4));
+    padding-block: var(--xh-code-view-header-py, var(--xh-space-2));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-code-view-header-border, var(--xh-border-subtle));
+    color: var(--xh-code-view-header-fg, var(--xh-fg-muted));
+    font-size: var(--xh-code-view-header-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-leading-tight);
+  }
+
+  /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
+  [data-scope='code-view'][data-part='header'][hidden] {
+    display: none;
+  }
+
+  /* 文件名占满剩余宽度并单行截断：长路径不该把语言角标挤出去 */
+  [data-scope='code-view'][data-part='filename'] {
+    display: block;
+    overflow: hidden;
+    flex: 1 1 auto;
+    color: var(--xh-code-view-filename-fg, var(--xh-fg-default));
+    font-family: var(--xh-code-view-font, var(--xh-font-family-mono));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-scope='code-view'][data-part='filename'][hidden] {
+    display: none;
+  }
+
+  /* user-select: none 让它不被框选带走 */
+  [data-scope='code-view'][data-part='lang-label'] {
+    display: block;
+    flex: 0 0 auto;
+    color: var(--xh-code-view-label-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-code-view-label-font-size, var(--xh-text-caption-size));
+    line-height: var(--xh-leading-none);
+    user-select: none;
+  }
+
+  [data-scope='code-view'][data-part='lang-label'][hidden] {
+    display: none;
+  }
+
+  /* margin: 0 去掉 UA 给 <pre> 的默认外边距。
+     --xh-code-view-line-height 的兜底须与连接层内联 min-block-size 用的一致，
+     且因参与 calc 乘法必须是长度而非无单位倍数。 */
+  [data-scope='code-view'][data-part='pre'] {
+    /* 逻辑属性 overflow-inline 尚无可用实现，写物理轴 */
+    overflow-x: auto;
+    padding-block: var(--xh-code-view-py, var(--xh-space-3));
+    margin: 0;
+    line-height: var(--xh-code-view-line-height, var(--xh-text-code-leading));
+  }
+
+  /* 折叠时 <pre> 的高度被连接层写死，超出部分沿圆角收边 */
+  [data-scope='code-view'][data-part='root'][data-clamped] [data-part='pre'] {
+    overflow-y: hidden;
+  }
+
+  [data-scope='code-view'][data-part='code'] {
+    display: block;
+    font-family: var(--xh-code-view-font, var(--xh-font-family-mono));
+  }
+
+  [data-scope='code-view'][data-part='code'][hidden] {
+    display: none;
+  }
+
+  /* 一行是一个块：行号槽与正文并排，空行也要占满一行高 */
+  [data-scope='code-view'][data-part='line'] {
+    display: flex;
+    min-block-size: var(--xh-code-view-line-height, var(--xh-text-code-leading));
+    padding-inline-end: var(--xh-code-view-px, var(--xh-space-3));
+    /* 标出来的那几行换的是底色与那条内阴影色条，两样一起过渡才是同一个动作 */
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='code-view'][data-part='line'][hidden] {
+    display: none;
+  }
+
+  [data-scope='code-view'][data-part='line'][data-highlighted] {
+    background: var(--xh-code-view-highlight-bg, var(--xh-bg-brand-subtle));
+    box-shadow: inset var(--xh-code-view-highlight-bar, var(--xh-stroke-thick)) 0 0 0 var(--xh-code-view-highlight-fg, var(--xh-bg-brand));
+  }
+
+  /* 行号是画上去的不是写上去的：复制代码不带它，读屏也不逐行念数字。
+     节点本身由适配器按 lineNumbers 决定渲不渲，槽宽按 root 上的位数枚举定，见下方 data-digits 各档。
+     行与行之间无间隙，逐行的右边框首尾相接连成一条分隔线；行号比正文小一档、右对齐，多位数才齐。 */
+  [data-scope='code-view'][data-part='line-number'] {
+    display: block;
+    box-sizing: content-box;
+    flex: 0 0 auto;
+    padding-inline-start: var(--xh-code-view-px, var(--xh-space-3));
+    padding-inline-end: var(--xh-code-view-gutter-gap, var(--xh-space-1));
+    border-inline-end: var(--xh-stroke-thin) solid var(--xh-code-view-gutter-border, var(--xh-border-default));
+    color: var(--xh-code-view-number-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-code-view-number-font-size, var(--xh-text-caption-size));
+    inline-size: var(--xh-_code-view-gutter);
+    text-align: end;
+    user-select: none;
+  }
+
+  [data-scope='code-view'][data-part='line-number']::before {
+    content: attr(data-line-number);
+  }
+
+  [data-scope='code-view'][data-part='line-number'][hidden] {
+    display: none;
+  }
+
+  /* white-space: pre 保留缩进不自动换行，长行改为横向滚动 */
+  [data-scope='code-view'][data-part='line-content'] {
+    display: block;
+    flex: 1 1 auto;
+    white-space: pre;
+  }
+
+  [data-scope='code-view'][data-part='line-content'][hidden] {
+    display: none;
+  }
+
+  /* 开了换行：pre-wrap 仍保留缩进与连续空白，只是允许行尾折下来；
+     anywhere 让没有空格的长串（url、base64）也能断，否则照样撑出横向滚动 */
+  [data-scope='code-view'][data-part='code'][data-wrap] [data-part='line-content'] {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  /* 没开行号时正文自带左内衬；开了行号则由行号槽的内衬顶开 */
+  [data-scope='code-view'][data-part='root']:not([data-line-numbers]) [data-part='line-content'] {
+    padding-inline-start: var(--xh-code-view-px, var(--xh-space-3));
+  }
+
+  /* 行号槽宽按位数分档：连接层写不了 CSS 自定义属性，只能发 data-digits 让这里自己设 */
+  [data-scope='code-view'][data-part='root'] {
+    --xh-_code-view-gutter: 1ch;
+  }
+
+  [data-scope='code-view'][data-part='root'][data-digits='2'] {
+    --xh-_code-view-gutter: 2ch;
+  }
+
+  [data-scope='code-view'][data-part='root'][data-digits='3'] {
+    --xh-_code-view-gutter: 3ch;
+  }
+
+  [data-scope='code-view'][data-part='root'][data-digits='4'] {
+    --xh-_code-view-gutter: 4ch;
+  }
+
+  [data-scope='code-view'][data-part='root'][data-digits='5'] {
+    --xh-_code-view-gutter: 5ch;
+  }
+
+  [data-scope='code-view'][data-part='root'][data-digits='6'] {
+    --xh-_code-view-gutter: 6ch;
+  }
+
+  [data-scope='code-view'][data-part='root'][data-digits='7'] {
+    --xh-_code-view-gutter: 7ch;
+  }
+
+  /* 折叠条是铺满一行的 disclosure trigger，盒型、悬停与按下面由 Action Control 的 disclosure-trigger 档给
+     （ghost 形态：白底承载 hover 100 → pressed 200，按下只换面不缩放，§9.2）；这里只把使用者槽映射到
+     桥接槽：圆角归零贴住卡边，内衬沿用代码区的横向内距与折叠条自己的纵向内距，字号与头部条同档。
+     顶边是与头部条同一支的内部分隔线：配方按状态写 border-color 简写，四个状态的边色槽都映射到
+     这支分隔色，再把四边宽归零、只留顶边一条 */
+  [data-scope='code-view'][data-part='fold-trigger'] {
+    --xh-action-radius: 0;
+    --xh-action-padding-inline: var(--xh-code-view-px, var(--xh-space-3));
+    --xh-action-padding-block: var(--xh-code-view-fold-py, var(--xh-space-2));
+    --xh-action-font-size: var(--xh-code-view-header-font-size, var(--xh-text-secondary-size));
+    --xh-action-fg-rest: var(--xh-code-view-fold-fg, var(--xh-fg-muted));
+    --xh-action-bg-hover: var(--xh-code-view-fold-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-border-rest: var(--xh-code-view-header-border, var(--xh-border-subtle));
+    --xh-action-border-hover: var(--xh-code-view-header-border, var(--xh-border-subtle));
+    --xh-action-border-pressed: var(--xh-code-view-header-border, var(--xh-border-subtle));
+    --xh-action-border-focus-visible: var(--xh-code-view-header-border, var(--xh-border-subtle));
+
+    border-width: 0;
+    border-block-start-width: var(--xh-stroke-thin);
+  }
+
+  [data-scope='code-view'][data-part='fold-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 尺寸档写私有槽、由 root 基础规则消费一次：缺省与阶梯是同一个口子，
+     作者设的 --xh-code-view-font-size 排在读处首选，不会被这三条盖掉。
+     行号槽宽以 ch 计，随字号一起走 */
+  [data-scope='code-view'][data-part='root'][data-size='sm'] {
+    --xh-_code-view-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-scope='code-view'][data-part='root'][data-size='md'] {
+    --xh-_code-view-font-size: var(--xh-control-font-md);
+  }
+
+  [data-scope='code-view'][data-part='root'][data-size='lg'] {
+    --xh-_code-view-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 记号本身不带任何布局，只上色：它是行内片段，多一点盒模型都会破坏对齐 */
+  [data-scope='code-view'][data-part='token'][data-kind='comment'] {
+    color: var(--xh-code-view-comment-fg, var(--xh-fg-muted));
+    font-style: italic;
+  }
+
+  [data-scope='code-view'][data-part='token'][data-kind='string'] {
+    color: var(--xh-code-view-string-fg, var(--xh-syntax-string));
+  }
+
+  [data-scope='code-view'][data-part='token'][data-kind='number'] {
+    color: var(--xh-code-view-number-token-fg, var(--xh-syntax-number));
+  }
+
+  [data-scope='code-view'][data-part='token'][data-kind='keyword'] {
+    color: var(--xh-code-view-keyword-fg, var(--xh-syntax-keyword));
+    font-weight: var(--xh-code-view-keyword-weight, var(--xh-font-weight-semibold));
+  }
+
+  [data-scope='code-view'][data-part='token'][data-kind='punctuation'] {
+    color: var(--xh-code-view-punctuation-fg, var(--xh-fg-subtle));
+  }
+
+  /*
+   * 打印：标出来的那几行只有一层淡底加一条写在 inset 阴影上的实心条，
+   * 底多数打印机丢掉、投影本就不该上纸，标了哪几行在纸上完全读不出来。
+   * 改画一圈内收的实边把那几行框出来。用 outline 不用 border：
+   * 行是横排 flex，加边会把行号与正文一起往里推，没标的行不加边就对不齐了。
+   */
+  @media print {
+    [data-scope='code-view'][data-part='line'][data-highlighted] {
+      outline: var(--xh-code-view-highlight-bar, var(--xh-stroke-thick)) solid currentColor;
+      outline-offset: calc(-1 * var(--xh-code-view-highlight-bar, var(--xh-stroke-thick)));
+    }
+  }
+}