@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/truncate.css

@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 truncate 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-truncate {
+    --xh-truncate-skin: 1;
+  }
+
+  /* 单行：一行装不下就收成省略号。
+     行数由连接层写进这个盒子的内联 style，样式表这一行只是它缺席时的落点 */
+  .xh-scope-truncate[data-part='root'] {
+    --xh-_truncate-lines: 1;
+
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* 多行：按行数裁，裁掉的那一行末尾收省略号 */
+  .xh-scope-truncate[data-part='root'][data-multiline] {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    /* 使用者槽排在前面：连接层把行数写成根上的内联私有槽，
+       在外层写一句 --xh-truncate-lines 即可整片改档，不必逐处改标记 */
+    -webkit-line-clamp: var(--xh-truncate-lines, var(--xh-_truncate-lines));
+    white-space: normal;
+    /* 一长串没有断点的字符（网址、编号）也得断开，否则它一路撑出去，裁不住 */
+    overflow-wrap: break-word;
+  }
+
+  /* 铺开：裁剪整个撤掉。写在两档之后，压得住上面同权重的那两条 */
+  .xh-scope-truncate[data-part='root'][data-state='open'] {
+    display: block;
+    overflow: visible;
+    white-space: normal;
+  }
+
+  /* —— 中间省略 —— */
+  /* 盒子里的原文照旧排着、只是不上色：溢出照它量，读屏照它念，选中与复制拿到的也是整段。
+     看得见的两段由两个伪元素画：前一半从头排、末尾收省略号，后一半从尾排、开头直接截断，
+     两段各占一半宽度，拼起来就是省略号落在中间的那一版 */
+  .xh-scope-truncate[data-part='root'][data-middle-text] {
+    position: relative;
+    text-overflow: clip;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .xh-scope-truncate[data-part='root'][data-middle-text]::before,
+  .xh-scope-truncate[data-part='root'][data-middle-text]::after {
+    position: absolute;
+    inset-block: 0;
+    inline-size: 50%;
+    overflow: hidden;
+    white-space: nowrap;
+    -webkit-text-fill-color: currentColor;
+    pointer-events: none;
+  }
+
+  /* 替代文字给空串：这两段只是画出来的样子，读屏念的是盒子里的原文 */
+  .xh-scope-truncate[data-part='root'][data-middle-text]::before {
+    content: attr(data-middle-text) / '';
+    inset-inline-start: 0;
+    text-overflow: ellipsis;
+  }
+
+  /* 后一半的盒子贴在末尾侧，文字照正文的方向排：弹性容器按末端对齐，放不下的部分从起始侧溢出，
+     露出来的正是原文的结尾。不翻方向，也就不用分书写方向各写一版 */
+  .xh-scope-truncate[data-part='root'][data-middle-text]::after {
+    content: attr(data-middle-text) / '';
+    inset-inline-end: 0;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  /* —— 展开按钮 —— */
+  /* 盒型、悬停与按下面由 Action Control 的文字档给（ghost、sm）；排在文字盒子之后另起一行，
+     起始端对齐正文，不被外层的弹性布局拉宽 */
+  .xh-scope-truncate[data-part='trigger'] {
+    flex: none;
+  }
+
+  @media (forced-colors: active) {
+    /* 这一档不保证文字填色照写的走：退回末尾省略，原文按系统色直接显示 */
+    .xh-scope-truncate[data-part='root'][data-middle-text] {
+      text-overflow: ellipsis;
+      -webkit-text-fill-color: currentColor;
+    }
+
+    .xh-scope-truncate[data-part='root'][data-middle-text]::before,
+    .xh-scope-truncate[data-part='root'][data-middle-text]::after {
+      content: none;
+    }
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-truncate[data-part='root'][hidden],
+  .xh-scope-truncate[data-part='trigger'][hidden] {
+    display: none;
+  }
+}

package/dist/css/typography.css

@@ -0,0 +1,475 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 typography 样式。 */
+
+@layer xihan.components {
+  /* 渐变字的前景：缺省透明，透出裁进字形的渐变；高对比作用域里换成实色，盖住渐变。
+     轴边界上只路由这一个简单值，渐变本身仍在文字上按本地的两端颜色与走向求值，
+     内层 default / more 能双向重置，也不会把未解析的组件变量冻结在祖先上。 */
+  :where(:root, [data-contrast='default']) {
+    --xh-_typography-gradient-fg: transparent;
+  }
+
+  :where([data-contrast='more']) {
+    --xh-_typography-gradient-fg: var(--xh-fg-default);
+  }
+
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-typography {
+    --xh-typography-skin: 1;
+  }
+
+  .xh-scope-typography[data-part='root'] {
+    /* 尺寸档只换这几个私有槽，各段从根上继承它们，换档不必给每个部件各写一条选择器 */
+    --xh-_typography-body-size: var(--xh-text-body-size);
+    --xh-_typography-block-gap: var(--xh-space-4);
+    --xh-_typography-heading-gap: var(--xh-space-6);
+    /* 六级标题沿字号阶梯从 36 逐档降到 16：最小的 h6 仍比正文大一号 */
+    --xh-_typography-h1: var(--xh-font-size-5xl);
+    --xh-_typography-h2: var(--xh-font-size-4xl);
+    --xh-_typography-h3: var(--xh-font-size-3xl);
+    --xh-_typography-h4: var(--xh-font-size-2xl);
+    --xh-_typography-h5: var(--xh-font-size-xl);
+    --xh-_typography-h6: var(--xh-font-size-lg);
+    /* 读行宽度：整块正文不收窄就会拉成一行行难读的长句 */
+    --xh-_typography-measure: 68ch;
+    /* 行内代码跟着所在那行的字号缩：以「随文字走」的字形尺寸为基数按比例收一点，不取固定档位 */
+    --xh-_typography-code-size: calc(var(--xh-glyph-size-text) * 0.9);
+
+    /* 建块级格式化上下文，段落的外边距不越过根往外塌 */
+    display: flow-root;
+    max-inline-size: var(--xh-typography-measure, var(--xh-_typography-measure));
+    color: var(--xh-typography-fg, var(--xh-fg-default));
+    font-size: var(--xh-typography-font-size, var(--xh-_typography-body-size));
+    font-weight: var(--xh-typography-font-weight, var(--xh-text-body-weight));
+    line-height: var(--xh-typography-leading, var(--xh-text-body-leading));
+  }
+
+  /* 上面声明了 display，会盖掉 UA 的 [hidden] 规则，收起态要在这里接回来 */
+  .xh-scope-typography[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 中间没有断点的长串——网址、令牌、无空格的标识——排到行尾就断开，不把整块正文顶宽。
+     属性由后代继承，这里逐个部件写一遍，是为了任一部件单独用时也盖得到 */
+  .xh-scope-typography:is([data-part='root'], [data-part='heading'], [data-part='paragraph'], [data-part='prose']) {
+    overflow-wrap: break-word;
+  }
+
+  /* —— 尺寸 —— */
+  /* 小档整体降一级字号档位 */
+  .xh-scope-typography[data-part='root'][data-size='sm'] {
+    --xh-_typography-body-size: var(--xh-font-size-sm);
+    --xh-_typography-block-gap: var(--xh-space-3);
+    --xh-_typography-heading-gap: var(--xh-space-5);
+    --xh-_typography-h1: var(--xh-font-size-4xl);
+    --xh-_typography-h2: var(--xh-font-size-3xl);
+    --xh-_typography-h3: var(--xh-font-size-2xl);
+    --xh-_typography-h4: var(--xh-font-size-xl);
+    --xh-_typography-h5: var(--xh-font-size-lg);
+    --xh-_typography-h6: var(--xh-font-size-md);
+  }
+
+  /* 大档只放大正文与段距：标题档位在 5xl 见顶，六档保持原样 */
+  .xh-scope-typography[data-part='root'][data-size='lg'] {
+    --xh-_typography-body-size: var(--xh-font-size-lg);
+    --xh-_typography-block-gap: var(--xh-space-5);
+    --xh-_typography-heading-gap: var(--xh-space-8);
+  }
+
+  /* —— 对齐与字重 —— */
+  /* 两轴都画在根上，整块正文一起换；各段沿继承拿到 */
+  .xh-scope-typography[data-part='root'][data-align='start'] {
+    text-align: start;
+  }
+
+  .xh-scope-typography[data-part='root'][data-align='center'] {
+    text-align: center;
+  }
+
+  .xh-scope-typography[data-part='root'][data-align='end'] {
+    text-align: end;
+  }
+
+  .xh-scope-typography[data-part='root'][data-align='justify'] {
+    text-align: justify;
+  }
+
+  .xh-scope-typography[data-part='root'][data-weight='regular'] {
+    font-weight: var(--xh-typography-font-weight, var(--xh-font-weight-regular));
+  }
+
+  .xh-scope-typography[data-part='root'][data-weight='medium'] {
+    font-weight: var(--xh-typography-font-weight, var(--xh-font-weight-medium));
+  }
+
+  .xh-scope-typography[data-part='root'][data-weight='semibold'] {
+    font-weight: var(--xh-typography-font-weight, var(--xh-font-weight-semibold));
+  }
+
+  .xh-scope-typography[data-part='root'][data-weight='bold'] {
+    font-weight: var(--xh-typography-font-weight, var(--xh-font-weight-bold));
+  }
+
+  /* —— 块级段落 —— */
+  /* 库里没有全局 preflight，作者写的 hN / p 带着 UA 外边距，在这儿抹平 */
+  .xh-scope-typography[data-part='heading'],
+  .xh-scope-typography[data-part='paragraph'] {
+    margin: 0;
+  }
+
+  .xh-scope-typography[data-part='heading'] {
+    color: var(--xh-typography-heading-fg, var(--xh-fg-default));
+    font-size: var(--xh-typography-heading-font-size, var(--xh-_typography-h3));
+    font-weight: var(--xh-typography-heading-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-typography-heading-leading, var(--xh-leading-tight));
+    /* 标题折行时把各行拉得一样长 */
+    text-wrap: balance;
+  }
+
+  /* —— 标题档位 —— */
+  /* 使用者槽位排在档位之前：写死一个值即盖过全部六档 */
+  .xh-scope-typography[data-part='heading'][data-level='1'] {
+    font-size: var(--xh-typography-heading-font-size, var(--xh-_typography-h1));
+  }
+
+  .xh-scope-typography[data-part='heading'][data-level='2'] {
+    font-size: var(--xh-typography-heading-font-size, var(--xh-_typography-h2));
+  }
+
+  .xh-scope-typography[data-part='heading'][data-level='3'] {
+    font-size: var(--xh-typography-heading-font-size, var(--xh-_typography-h3));
+  }
+
+  .xh-scope-typography[data-part='heading'][data-level='4'] {
+    font-size: var(--xh-typography-heading-font-size, var(--xh-_typography-h4));
+  }
+
+  .xh-scope-typography[data-part='heading'][data-level='5'] {
+    font-size: var(--xh-typography-heading-font-size, var(--xh-_typography-h5));
+  }
+
+  .xh-scope-typography[data-part='heading'][data-level='6'] {
+    font-size: var(--xh-typography-heading-font-size, var(--xh-_typography-h6));
+  }
+
+  /* —— 段间距 —— */
+  /* 间距画在后一块的上边，块与块之间只留一份，正文末尾也不多出一截 */
+  .xh-scope-typography:is([data-part='heading'], [data-part='paragraph'])
+    + .xh-scope-typography:is([data-part='heading'], [data-part='paragraph']) {
+    margin-block-start: var(--xh-typography-block-gap, var(--xh-_typography-block-gap));
+  }
+
+  /* 标题上面留得更开，它带起的是下面一整段 */
+  .xh-scope-typography:is([data-part='heading'], [data-part='paragraph'])
+    + .xh-scope-typography[data-part='heading'] {
+    margin-block-start: var(--xh-typography-heading-gap, var(--xh-_typography-heading-gap));
+  }
+
+  /* —— 行内文字 —— */
+  /* 不写形态与语气时就是一段普通正文，这里只声明形态各自加的那一层 */
+  /* 次要文字与语气文字各有各的槽：两者同特异度、共用一个槽的话，
+     调淡次要文字会把六族语气一并换成同一个灰。 */
+  .xh-scope-typography[data-part='text'][data-variant='muted'] {
+    color: var(--xh-typography-text-fg-muted, var(--xh-fg-muted));
+  }
+
+  .xh-scope-typography[data-part='text'][data-variant='strong'] {
+    font-weight: var(--xh-typography-text-font-weight, var(--xh-font-weight-medium));
+  }
+
+  .xh-scope-typography[data-part='text'][data-variant='code'] {
+    padding-block: var(--xh-typography-code-py, var(--xh-space-0_5));
+    padding-inline: var(--xh-typography-code-px, var(--xh-space-2));
+    border-radius: var(--xh-typography-code-radius, var(--xh-shape-inset));
+    background: var(--xh-typography-code-bg, var(--xh-bg-subtle));
+    color: var(--xh-typography-code-fg, var(--xh-fg-muted));
+    font-family: var(--xh-typography-code-font, var(--xh-font-family-mono));
+    font-size: var(--xh-typography-code-font-size, var(--xh-_typography-code-size));
+  }
+
+  /* 语气排在形态之后：两个轴一起写时，用哪族颜色由语气说了算 */
+  .xh-scope-typography[data-part='text'][data-tone] {
+    color: var(--xh-typography-text-fg-tone, var(--xh-_tone-fg));
+  }
+
+  /* 删除线与下划线是同一条装饰线的两个取值，两个开关都开时两条都画 */
+  .xh-scope-typography[data-part='text'][data-strikethrough] {
+    text-decoration-line: line-through;
+  }
+
+  .xh-scope-typography[data-part='text'][data-underline] {
+    text-decoration-line: underline;
+    text-underline-offset: var(--xh-typography-text-underline-offset, var(--xh-space-0_5));
+  }
+
+  .xh-scope-typography[data-part='text'][data-underline][data-strikethrough] {
+    text-decoration-line: underline line-through;
+  }
+
+  /* 标记：与文本高亮的命中片段同一副淡底、字色与收边，两处被标出的文字看起来是一回事。
+     排在语气之后：同时写语气时底与字色一起换成该族，只写语气不写标记仍只换字色。
+     跨行时两半各自收边，否则圆角与内边距只画在整段的首尾；两条都写：WebKit 只认带前缀那条 */
+  .xh-scope-typography[data-part='text'][data-marked] {
+    padding-inline: var(--xh-typography-mark-px, var(--xh-space-0_5));
+    border-radius: var(--xh-typography-mark-radius, var(--xh-shape-inset));
+    background: var(--xh-typography-mark-bg, var(--xh-bg-mark));
+    color: var(--xh-typography-mark-fg, var(--xh-fg-default));
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+
+  .xh-scope-typography[data-part='text'][data-marked][data-tone] {
+    background: var(--xh-typography-mark-bg, var(--xh-_tone-subtle));
+    color: var(--xh-typography-mark-fg, var(--xh-_tone-fg));
+  }
+
+  /* 字重排在形态之后：与 strong 一起写时，粗到哪一档由字重说了算 */
+  .xh-scope-typography[data-part='text'][data-weight='regular'] {
+    font-weight: var(--xh-font-weight-regular);
+  }
+
+  .xh-scope-typography[data-part='text'][data-weight='medium'] {
+    font-weight: var(--xh-font-weight-medium);
+  }
+
+  .xh-scope-typography[data-part='text'][data-weight='semibold'] {
+    font-weight: var(--xh-font-weight-semibold);
+  }
+
+  .xh-scope-typography[data-part='text'][data-weight='bold'] {
+    font-weight: var(--xh-font-weight-bold);
+  }
+
+  /* —— 渐变字 —— */
+  /* 渐变画在背景上，再用 background-clip 把背景裁进字形里；前景必须透明才透得出底下的渐变。
+     两条 background-clip 都写：WebKit 只认带前缀那条。
+     -webkit-text-fill-color 在 WebKit 里决定字形填充色并盖过 color，跟着 color 走。
+     排在语气之后：语气写的是前景色，渐变字的前景要留给上面那支透明槽 */
+  .xh-scope-typography[data-part='text'][data-variant='gradient'] {
+    /* 两端颜色各收一个私有槽：语气档换的是这两支，使用者槽仍排在它们前面 */
+    --xh-_typography-gradient-from: var(--xh-gradient-brand-from);
+    --xh-_typography-gradient-to: var(--xh-gradient-brand-to);
+
+    background-image: linear-gradient(
+      var(--xh-typography-gradient-direction, to right),
+      var(--xh-typography-gradient-from, var(--xh-_typography-gradient-from)),
+      var(--xh-typography-gradient-to, var(--xh-_typography-gradient-to))
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: var(--xh-_typography-gradient-fg);
+    -webkit-text-fill-color: currentColor;
+  }
+
+  /* 语气换的是两端颜色：取该族主色与它压深一档的取值，深浅两态自动跟随 */
+  .xh-scope-typography[data-part='text'][data-variant='gradient'][data-tone] {
+    --xh-_typography-gradient-from: var(--xh-_tone);
+    --xh-_typography-gradient-to: var(--xh-_tone-active);
+  }
+
+  /* 无 JS 时的系统高对比、强制色与打印统一退回单色；显式局部轴由文件头那支前景槽负责 */
+  @media (prefers-contrast: more), (forced-colors: active), print {
+    .xh-scope-typography[data-part='text'][data-variant='gradient'] {
+      background-image: none;
+      color: inherit;
+      -webkit-text-fill-color: currentColor;
+    }
+  }
+
+  /* —— 行内链接 —— */
+  .xh-scope-typography[data-part='link'] {
+    border-radius: var(--xh-typography-link-radius, var(--xh-shape-inset));
+    color: var(--xh-typography-link-fg, var(--xh-fg-brand));
+    text-decoration: underline;
+    text-underline-offset: var(--xh-typography-link-underline-offset, var(--xh-space-0_5));
+    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 悬停只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态 */
+  @media (hover: hover) {
+    .xh-scope-typography[data-part='link']:hover {
+      color: var(--xh-typography-link-fg-hover, var(--xh-fg-brand-strong));
+    }
+  }
+
+  /* —— 富文本 —— */
+  /*
+   * 外来的整段 HTML 铺在这里：Markdown 渲染结果、后端返回的富文本，节点由内容自己带，
+   * 作者写不出 data-part，所以样式按标签给。
+   *
+   * 标签一律包进 :where()，整条规则的特异度只剩 prose 这一层，块里嵌 XiHan 组件时
+   * 那份皮肤仍然赢。字号档位与段间距取根上那几支私有槽，跟着 data-size 一起换。
+   */
+  .xh-scope-typography[data-part='prose'] {
+    color: var(--xh-typography-prose-fg, var(--xh-fg-default));
+    font-size: var(--xh-typography-prose-font-size, var(--xh-_typography-body-size));
+    line-height: var(--xh-typography-prose-leading, var(--xh-text-prose-leading));
+  }
+
+  /* 库里没有全局 preflight，外来节点带着 UA 外边距，先在这儿抹平 */
+  .xh-scope-typography[data-part='prose']
+    :where(h1, h2, h3, h4, h5, h6, p, ul, ol, pre, blockquote, table, hr) {
+    margin: 0;
+  }
+
+  /* 间距画在后一块的上边，块与块之间只留一份，末块也不多出一截 */
+  .xh-scope-typography[data-part='prose']
+    :where(h1, h2, h3, h4, h5, h6, p, ul, ol, pre, blockquote, table, hr)
+    + :where(h1, h2, h3, h4, h5, h6, p, ul, ol, pre, blockquote, table, hr) {
+    margin-block-start: var(--xh-typography-prose-block-gap, var(--xh-_typography-block-gap));
+  }
+
+  /* 标题上面留得更开，它带起的是下面一整段 */
+  .xh-scope-typography[data-part='prose']
+    :where(h1, h2, h3, h4, h5, h6, p, ul, ol, pre, blockquote, table, hr)
+    + :where(h1, h2, h3, h4, h5, h6) {
+    margin-block-start: var(--xh-typography-prose-heading-gap, var(--xh-_typography-heading-gap));
+  }
+
+  .xh-scope-typography[data-part='prose'] :where(h1, h2, h3, h4, h5, h6) {
+    color: var(--xh-typography-prose-heading-fg, var(--xh-fg-default));
+    font-weight: var(--xh-typography-prose-heading-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-tight);
+    text-wrap: balance;
+  }
+
+  /* 六档字号与 heading 部件同源：同一块正文里，作者写的标题与外来的标题一样大 */
+  .xh-scope-typography[data-part='prose'] :where(h1) {
+    font-size: var(--xh-typography-prose-h1, var(--xh-_typography-h1));
+  }
+
+  .xh-scope-typography[data-part='prose'] :where(h2) {
+    font-size: var(--xh-typography-prose-h2, var(--xh-_typography-h2));
+  }
+
+  .xh-scope-typography[data-part='prose'] :where(h3) {
+    font-size: var(--xh-typography-prose-h3, var(--xh-_typography-h3));
+  }
+
+  .xh-scope-typography[data-part='prose'] :where(h4) {
+    font-size: var(--xh-typography-prose-h4, var(--xh-_typography-h4));
+  }
+
+  .xh-scope-typography[data-part='prose'] :where(h5) {
+    font-size: var(--xh-typography-prose-h5, var(--xh-_typography-h5));
+  }
+
+  .xh-scope-typography[data-part='prose'] :where(h6) {
+    font-size: var(--xh-typography-prose-h6, var(--xh-_typography-h6));
+  }
+
+  /* 列表：项目符号要留在容器里面，缩进画在列表自己的起始内衬上 */
+  .xh-scope-typography[data-part='prose'] :where(ul, ol) {
+    padding-inline-start: var(--xh-typography-prose-list-ps, var(--xh-space-5));
+  }
+
+  .xh-scope-typography[data-part='prose'] :where(li + li) {
+    margin-block-start: var(--xh-typography-prose-item-gap, var(--xh-space-1));
+  }
+
+  /* 嵌套列表贴着上一项走，不按块与块之间那一档拉开 */
+  .xh-scope-typography[data-part='prose'] :where(li) > :where(ul, ol) {
+    margin-block-start: var(--xh-typography-prose-item-gap, var(--xh-space-1));
+  }
+
+  /* 富文本里的链接缺省跟着 link 部件走：同一块正文里两处不同源就会有两种链接样式 */
+  .xh-scope-typography[data-part='prose'] :where(a) {
+    border-radius: var(--xh-typography-prose-link-radius, var(--xh-typography-link-radius, var(--xh-shape-inset)));
+    color: var(--xh-typography-prose-link-fg, var(--xh-typography-link-fg, var(--xh-fg-brand)));
+    text-decoration: underline;
+    text-underline-offset: var(
+      --xh-typography-prose-link-underline-offset,
+      var(--xh-typography-link-underline-offset, var(--xh-space-0_5))
+    );
+  }
+
+  .xh-scope-typography[data-part='prose'] :where(strong) {
+    font-weight: var(--xh-typography-prose-strong-font-weight, var(--xh-font-weight-medium));
+  }
+
+  /* 行内代码与 text 部件的 code 形态同源，同一块正文里两条路写出来一个样 */
+  .xh-scope-typography[data-part='prose'] :where(code) {
+    padding-block: var(--xh-typography-code-py, var(--xh-space-0_5));
+    padding-inline: var(--xh-typography-code-px, var(--xh-space-2));
+    border-radius: var(--xh-typography-code-radius, var(--xh-shape-inset));
+    background: var(--xh-typography-code-bg, var(--xh-bg-subtle));
+    color: var(--xh-typography-code-fg, var(--xh-fg-muted));
+    font-family: var(--xh-typography-code-font, var(--xh-font-family-mono));
+    font-size: var(--xh-typography-code-font-size, var(--xh-_typography-code-size));
+  }
+
+  /* 代码块自己成一片面，长行横向滚动而不是把整块正文撑宽 */
+  .xh-scope-typography[data-part='prose'] :where(pre) {
+    overflow-x: auto;
+    padding: var(--xh-typography-prose-pre-padding, var(--xh-space-4));
+    border-radius: var(--xh-typography-prose-pre-radius, var(--xh-shape-surface));
+    background: var(--xh-typography-prose-pre-bg, var(--xh-bg-subtle));
+    font-family: var(--xh-typography-code-font, var(--xh-font-family-mono));
+    font-size: var(--xh-typography-code-font-size, var(--xh-_typography-code-size));
+  }
+
+  /* 代码块里的 code 已经在 pre 那片面里，不再各自套一层内衬与底色 */
+  .xh-scope-typography[data-part='prose'] :where(pre) :where(code) {
+    padding: 0;
+    border-radius: 0;
+    background: none;
+    font-size: inherit;
+  }
+
+  .xh-scope-typography[data-part='prose'] :where(blockquote) {
+    padding-inline-start: var(--xh-typography-prose-quote-ps, var(--xh-space-2));
+    border-inline-start: var(--xh-stroke-thick) solid
+      var(--xh-typography-prose-quote-border, var(--xh-border-strong));
+    color: var(--xh-typography-prose-quote-fg, inherit);
+  }
+
+  .xh-scope-typography[data-part='prose'] :where(hr) {
+    border: none;
+    border-block-start: var(--xh-stroke-thin) solid
+      var(--xh-typography-prose-rule-border, var(--xh-border-subtle));
+  }
+
+  /* 图片不许把整块正文撑宽，高度跟着缩才不变形 */
+  .xh-scope-typography[data-part='prose'] :where(img) {
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+
+  .xh-scope-typography[data-part='prose'] :where(table) {
+    inline-size: 100%;
+    border-collapse: collapse;
+  }
+
+  .xh-scope-typography[data-part='prose'] :where(th, td) {
+    padding-block: var(--xh-typography-prose-cell-py, var(--xh-space-2));
+    padding-inline: var(--xh-typography-prose-cell-px, var(--xh-space-3));
+    border-block-end: var(--xh-stroke-thin) solid
+      var(--xh-typography-prose-cell-border, var(--xh-border-subtle));
+    text-align: start;
+    /* 表格的宽度由各格的最小宽度撑出来，格里的长串断得开，整张表才收得进正文的宽度 */
+    overflow-wrap: anywhere;
+  }
+
+  .xh-scope-typography[data-part='prose'] :where(th) {
+    font-weight: var(--xh-typography-prose-th-font-weight, var(--xh-font-weight-semibold));
+  }
+
+  @media (forced-colors: active) {
+    /* 这一档里自定义底色一律被换成 Canvas，标记会与正文分不开；用系统高亮反色把那一段画回来 */
+    .xh-scope-typography[data-part='text'][data-marked] {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+
+  @media print {
+    /* 打印默认丢底色，标记只剩字色，被标出的那段在纸上就不显眼了 */
+    .xh-scope-typography[data-part='text'][data-marked] {
+      print-color-adjust: exact;
+    }
+  }
+}

package/dist/css/undefined.css

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/*
+ * 元素升级前的形态。
+ *
+ * 收起态由元素在 wire() 里用内联 display 做，而 data-scope / data-part 也是那一刻才打上，
+ * 所以 JS 到达之前这段子树既没有皮肤也没有收起——内容会以裸文本堆在页面流里，
+ * 并被搜索引擎与读屏当作正文。SSR / SSG 直出时这段时间尤其长。
+ *
+ * 这里按作者写的 data-xh-part 选中，那是升级前唯一存在的标记。
+ * 名单与元素的对应由 check-undefined-guard.mjs 双向守着。
+ */
+@layer xihan.components {
+  :where(
+    xh-accordion,
+    xh-cascader,
+    xh-collapsible,
+    xh-color-picker,
+    xh-combobox,
+    xh-command,
+    xh-context-menu,
+    xh-date-picker,
+    xh-date-range-picker,
+    xh-dialog,
+    xh-drawer,
+    xh-floating-panel,
+    xh-hover-card,
+    xh-image-viewer,
+    xh-mention,
+    xh-menu,
+    xh-menubar,
+    xh-navigation-menu,
+    xh-pagination,
+    xh-popconfirm,
+    xh-popover,
+    xh-reasoning,
+    xh-select,
+    xh-side-nav,
+    xh-steps,
+    xh-time-picker,
+    xh-time-range-picker,
+    xh-tool-call,
+    xh-tooltip,
+    xh-tour,
+    xh-tree-select
+  ):not(:defined)
+    :where(
+      [data-xh-part='backdrop'],
+      [data-xh-part='content'],
+      [data-xh-part='positioner'],
+      [data-xh-part='viewport']
+    ) {
+    display: none;
+  }
+}