@xihan-ui/styles 1.0.0-alpha.0

package/css/form.css

@@ -0,0 +1,185 @@
+@layer xihan.components {
+  /* 表单是一列字段：竖排、字段之间留一档间距。root 就是那个原生 <form> */
+  [data-scope='form'][data-part='root'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-form-gap, var(--xh-stack-gap-md));
+    margin: 0;
+  }
+
+  /* 只要声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  [data-scope='form'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 字段容器只管排版与状态标记：标题、控件、描述、错误文案都是里面那个 Field 的活儿 */
+  [data-scope='form'][data-part='field-group'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-form-field-gap, var(--xh-space-1));
+  }
+
+  [data-scope='form'][data-part='field-group'][hidden] {
+    display: none;
+  }
+
+  /* 出错的字段在起始缘竖一条色带：读屏之外还得有一眼看得见的定位标记。
+     用逻辑属性，RTL 下自动换到右侧 */
+  [data-scope='form'][data-part='field-group'][data-invalid] {
+    padding-inline-start: var(--xh-form-field-invalid-px, var(--xh-space-2));
+    border-inline-start: var(--xh-stroke-thick) solid var(--xh-form-field-invalid-border, var(--xh-color-danger-500));
+  }
+
+  /* 容器带着 tabindex=-1：控件全禁用时焦点会落在它自己身上，
+     那一刻必须画环，否则键盘用户看不出自己被送到了哪儿 */
+  [data-scope='form'][data-part='field-group']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 提交失败后的错误汇总。role=alert 常挂，靠 hidden 显隐 */
+  [data-scope='form'][data-part='error-summary'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-form-summary-gap, var(--xh-space-1_5));
+    padding-block: var(--xh-form-summary-py, var(--xh-space-3));
+    padding-inline: var(--xh-form-summary-px, var(--xh-control-px-md));
+    border: var(--xh-stroke-thin) solid var(--xh-form-summary-border, var(--xh-color-danger-500));
+    border-radius: var(--xh-form-summary-radius, var(--xh-shape-surface));
+    background: var(--xh-form-summary-bg, var(--xh-bg-surface));
+    color: var(--xh-form-summary-fg, var(--xh-fg-danger));
+    font-size: var(--xh-form-summary-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-normal);
+    box-shadow: var(--xh-form-summary-shadow, var(--xh-elevation-1));
+  }
+
+  /* 漏了这条，摘要一旦出现过就再也撤不下去（上面那条 display 盖掉了 UA 的 [hidden] 规则） */
+  [data-scope='form'][data-part='error-summary'][hidden] {
+    display: none;
+  }
+
+  /* 摘要不承载焦点（焦点直接送去出错的字段），它只是一段播报，落焦时不画环 */
+  [data-scope='form'][data-part='error-summary']:focus-visible {
+    outline: none;
+  }
+
+  /* 从收起翻成显出的那一下给一小段入场：读屏靠 role=alert 播报，
+     视觉这边也得有个"它是刚冒出来的"的交代，否则像一直杵在那儿 */
+  [data-scope='form'][data-part='error-summary'][data-state='invalid'] {
+    animation: xh-form-summary-enter var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* 摘要里的每一条是一个真链接，指向对应字段容器 */
+  [data-scope='form'][data-part='error-summary-item'] {
+    display: block;
+    color: inherit;
+    font-size: var(--xh-form-summary-item-font-size, var(--xh-font-size-sm));
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    cursor: pointer;
+  }
+
+  /* 没有对应错误的条目由连接层给 hidden；上面那条 display 已把 UA 规则盖掉 */
+  [data-scope='form'][data-part='error-summary-item'][hidden] {
+    display: none;
+  }
+
+  [data-scope='form'][data-part='error-summary-item']:hover {
+    color: var(--xh-form-summary-item-fg-hover, var(--xh-fg-danger-hover));
+  }
+
+  [data-scope='form'][data-part='error-summary-item']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 两颗按钮共用一份底子：它们是同一种东西，只是干的活不同，
+     分开写迟早会改了一颗忘了另一颗 */
+  [data-scope='form'][data-part='submit-trigger'],
+  [data-scope='form'][data-part='reset-trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-form-trigger-h, var(--xh-control-h-md));
+    padding-block: 0;
+    padding-inline: var(--xh-form-trigger-px, var(--xh-control-px-md));
+    border: var(--xh-stroke-thin) solid var(--xh-form-trigger-border, var(--xh-border-default));
+    border-radius: var(--xh-form-trigger-radius, var(--xh-shape-control));
+    background: var(--xh-form-trigger-bg, var(--xh-bg-subtle));
+    color: var(--xh-form-trigger-fg, var(--xh-fg-default));
+    /* 表单控件不继承页面字体，只给字号会让按钮用 UA 默认字族，与周围文本对不上 */
+    font-family: inherit;
+    font-size: var(--xh-form-trigger-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='form'][data-part='submit-trigger'][hidden],
+  [data-scope='form'][data-part='reset-trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='form'][data-part='submit-trigger']:hover:not(:disabled),
+  [data-scope='form'][data-part='reset-trigger']:hover:not(:disabled) {
+    border-color: var(--xh-form-trigger-border-hover, var(--xh-border-strong));
+    background: var(--xh-form-trigger-bg-hover, var(--xh-bg-subtle-hover));
+  }
+
+  [data-scope='form'][data-part='submit-trigger']:active:not(:disabled),
+  [data-scope='form'][data-part='reset-trigger']:active:not(:disabled) {
+    background: var(--xh-form-trigger-bg-active, var(--xh-bg-subtle-active));
+  }
+
+  [data-scope='form'][data-part='submit-trigger']:focus-visible,
+  [data-scope='form'][data-part='reset-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 单体控件用 :disabled（集合条目才用 [data-disabled]）：
+     整表禁用时提交键置灰，只读时重置键也一并落到这条上 */
+  [data-scope='form'][data-part='submit-trigger']:disabled,
+  [data-scope='form'][data-part='reset-trigger']:disabled {
+    border-color: var(--xh-form-trigger-border-disabled, var(--xh-border-subtle));
+    background: var(--xh-form-trigger-bg-disabled, var(--xh-bg-muted));
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 提交是这一组里的主操作，给它一层实心底色区分开 */
+  [data-scope='form'][data-part='submit-trigger']:not(:disabled) {
+    border-color: var(--xh-form-submit-bg, var(--xh-bg-brand));
+    background: var(--xh-form-submit-bg, var(--xh-bg-brand));
+    color: var(--xh-form-submit-fg, var(--xh-fg-on-brand));
+  }
+
+  [data-scope='form'][data-part='submit-trigger']:hover:not(:disabled) {
+    border-color: var(--xh-form-submit-bg-hover, var(--xh-bg-brand-hover));
+    background: var(--xh-form-submit-bg-hover, var(--xh-bg-brand-hover));
+  }
+
+  [data-scope='form'][data-part='submit-trigger']:active:not(:disabled) {
+    border-color: var(--xh-form-submit-bg-active, var(--xh-bg-brand-active));
+    background: var(--xh-form-submit-bg-active, var(--xh-bg-brand-active));
+  }
+}
+
+@layer xihan.motion {
+  /* 关键帧写在自己文件里、名字带组件前缀：motion.css 是公共的，
+     往那儿加一条只服务本组件的动画会让所有组件都得跟着重下载 */
+  @keyframes xh-form-summary-enter {
+    from {
+      opacity: 0;
+      translate: 0 calc(-1 * var(--xh-space-1));
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+}

package/css/gradient-text.css

@@ -0,0 +1,62 @@
+@layer xihan.components {
+  /* 渐变画在背景上，再用 background-clip 把背景裁进字形里；前景必须透明才透得出底下的渐变。
+     两条 background-clip 都写：WebKit 只认带前缀那条。
+     -webkit-text-fill-color 在 WebKit 里决定字形填充色并盖过 color，也要一并透明。 */
+  [data-scope='gradient-text'][data-part='root'] {
+    /* 走向由 data-direction 换掉这一个槽，背景那条声明只写一遍 */
+    --xh-_gradient-text-dir: to right;
+
+    background-image: linear-gradient(
+      var(--xh-_gradient-text-dir),
+      var(--xh-gradient-text-from, var(--xh-color-brand-500)),
+      var(--xh-gradient-text-to, var(--xh-color-brand-700))
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+  }
+
+  /* —— 走向 —— */
+  /* 逐档换算成 CSS 的 to <边或角>，四条边加四个角 */
+  [data-scope='gradient-text'][data-part='root'][data-direction='to-right'] {
+    --xh-_gradient-text-dir: to right;
+  }
+
+  [data-scope='gradient-text'][data-part='root'][data-direction='to-left'] {
+    --xh-_gradient-text-dir: to left;
+  }
+
+  [data-scope='gradient-text'][data-part='root'][data-direction='to-bottom'] {
+    --xh-_gradient-text-dir: to bottom;
+  }
+
+  [data-scope='gradient-text'][data-part='root'][data-direction='to-top'] {
+    --xh-_gradient-text-dir: to top;
+  }
+
+  [data-scope='gradient-text'][data-part='root'][data-direction='to-bottom-right'] {
+    --xh-_gradient-text-dir: to bottom right;
+  }
+
+  [data-scope='gradient-text'][data-part='root'][data-direction='to-bottom-left'] {
+    --xh-_gradient-text-dir: to bottom left;
+  }
+
+  [data-scope='gradient-text'][data-part='root'][data-direction='to-top-right'] {
+    --xh-_gradient-text-dir: to top right;
+  }
+
+  [data-scope='gradient-text'][data-part='root'][data-direction='to-top-left'] {
+    --xh-_gradient-text-dir: to top left;
+  }
+
+  /* 强制色模式下系统会禁掉背景图，留着透明前景整段字就彻底看不见了，这里把填充色还回去 */
+  @media (forced-colors: active) {
+    [data-scope='gradient-text'][data-part='root'] {
+      background-image: none;
+      color: inherit;
+      -webkit-text-fill-color: currentColor;
+    }
+  }
+}

package/css/grid.css

@@ -0,0 +1,428 @@
+@layer xihan.components {
+  [data-scope='grid'][data-part='root'] {
+    display: grid;
+    /* 各列等宽；下限写 0 而不是 auto，一段长文本才不会把自己那列撑宽 */
+    /* 使用者槽位排在档位之前，写死一份轨道表即盖过所有列数档 */
+    grid-template-columns: var(--xh-grid-columns, repeat(var(--xh-_grid-cols), minmax(0, 1fr)));
+    /* 不写 gap 档位就不留间距 */
+    gap: var(--xh-grid-gap, var(--xh-space-0));
+    /* 列数收在根上这一个槽位里，换档只改这里；每一层都声明一遍，嵌套时内层不吃外层的值 */
+    --xh-_grid-cols: 1;
+  }
+
+  /* —— 列数 —— */
+  /* 一列是上面的缺省，这里从两列起逐档写 */
+  [data-scope='grid'][data-part='root'][data-cols='2'] {
+    --xh-_grid-cols: 2;
+  }
+
+  [data-scope='grid'][data-part='root'][data-cols='3'] {
+    --xh-_grid-cols: 3;
+  }
+
+  [data-scope='grid'][data-part='root'][data-cols='4'] {
+    --xh-_grid-cols: 4;
+  }
+
+  [data-scope='grid'][data-part='root'][data-cols='5'] {
+    --xh-_grid-cols: 5;
+  }
+
+  [data-scope='grid'][data-part='root'][data-cols='6'] {
+    --xh-_grid-cols: 6;
+  }
+
+  [data-scope='grid'][data-part='root'][data-cols='7'] {
+    --xh-_grid-cols: 7;
+  }
+
+  [data-scope='grid'][data-part='root'][data-cols='8'] {
+    --xh-_grid-cols: 8;
+  }
+
+  [data-scope='grid'][data-part='root'][data-cols='9'] {
+    --xh-_grid-cols: 9;
+  }
+
+  [data-scope='grid'][data-part='root'][data-cols='10'] {
+    --xh-_grid-cols: 10;
+  }
+
+  [data-scope='grid'][data-part='root'][data-cols='11'] {
+    --xh-_grid-cols: 11;
+  }
+
+  [data-scope='grid'][data-part='root'][data-cols='12'] {
+    --xh-_grid-cols: 12;
+  }
+
+  /* —— 逐档列数 —— */
+  /* 移动优先：先按 data-cols 排定，视口每宽到一档就换成那一档的列数，没写的档沿用比它窄的那一档。
+     四档自窄到宽依次写，只用 min-width：媒体查询不改选择器权重，宽视口上同时命中好几档时由源码序决定谁生效。
+     宽度写字面量：自定义属性在 @media 条件里不参与求值，令牌变量写在这里等于没写条件。
+     每档都从一列写起：base 分多列、某一档收回一列同样是合法的一档。 */
+  @media (min-width: 640px) {
+    [data-scope='grid'][data-part='root'][data-cols-sm='1'] {
+      --xh-_grid-cols: 1;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-sm='2'] {
+      --xh-_grid-cols: 2;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-sm='3'] {
+      --xh-_grid-cols: 3;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-sm='4'] {
+      --xh-_grid-cols: 4;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-sm='5'] {
+      --xh-_grid-cols: 5;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-sm='6'] {
+      --xh-_grid-cols: 6;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-sm='7'] {
+      --xh-_grid-cols: 7;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-sm='8'] {
+      --xh-_grid-cols: 8;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-sm='9'] {
+      --xh-_grid-cols: 9;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-sm='10'] {
+      --xh-_grid-cols: 10;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-sm='11'] {
+      --xh-_grid-cols: 11;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-sm='12'] {
+      --xh-_grid-cols: 12;
+    }
+  }
+
+  @media (min-width: 768px) {
+    [data-scope='grid'][data-part='root'][data-cols-md='1'] {
+      --xh-_grid-cols: 1;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-md='2'] {
+      --xh-_grid-cols: 2;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-md='3'] {
+      --xh-_grid-cols: 3;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-md='4'] {
+      --xh-_grid-cols: 4;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-md='5'] {
+      --xh-_grid-cols: 5;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-md='6'] {
+      --xh-_grid-cols: 6;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-md='7'] {
+      --xh-_grid-cols: 7;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-md='8'] {
+      --xh-_grid-cols: 8;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-md='9'] {
+      --xh-_grid-cols: 9;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-md='10'] {
+      --xh-_grid-cols: 10;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-md='11'] {
+      --xh-_grid-cols: 11;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-md='12'] {
+      --xh-_grid-cols: 12;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    [data-scope='grid'][data-part='root'][data-cols-lg='1'] {
+      --xh-_grid-cols: 1;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-lg='2'] {
+      --xh-_grid-cols: 2;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-lg='3'] {
+      --xh-_grid-cols: 3;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-lg='4'] {
+      --xh-_grid-cols: 4;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-lg='5'] {
+      --xh-_grid-cols: 5;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-lg='6'] {
+      --xh-_grid-cols: 6;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-lg='7'] {
+      --xh-_grid-cols: 7;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-lg='8'] {
+      --xh-_grid-cols: 8;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-lg='9'] {
+      --xh-_grid-cols: 9;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-lg='10'] {
+      --xh-_grid-cols: 10;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-lg='11'] {
+      --xh-_grid-cols: 11;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-lg='12'] {
+      --xh-_grid-cols: 12;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    [data-scope='grid'][data-part='root'][data-cols-xl='1'] {
+      --xh-_grid-cols: 1;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-xl='2'] {
+      --xh-_grid-cols: 2;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-xl='3'] {
+      --xh-_grid-cols: 3;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-xl='4'] {
+      --xh-_grid-cols: 4;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-xl='5'] {
+      --xh-_grid-cols: 5;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-xl='6'] {
+      --xh-_grid-cols: 6;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-xl='7'] {
+      --xh-_grid-cols: 7;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-xl='8'] {
+      --xh-_grid-cols: 8;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-xl='9'] {
+      --xh-_grid-cols: 9;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-xl='10'] {
+      --xh-_grid-cols: 10;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-xl='11'] {
+      --xh-_grid-cols: 11;
+    }
+
+    [data-scope='grid'][data-part='root'][data-cols-xl='12'] {
+      --xh-_grid-cols: 12;
+    }
+  }
+
+  /* —— 间距档位 —— */
+  /* 每一档指向一个间距令牌，行与行之间也吃这同一份间距 */
+  [data-scope='grid'][data-part='root'][data-gap='xs'] {
+    gap: var(--xh-grid-gap, var(--xh-space-1));
+  }
+
+  [data-scope='grid'][data-part='root'][data-gap='sm'] {
+    gap: var(--xh-grid-gap, var(--xh-space-2));
+  }
+
+  [data-scope='grid'][data-part='root'][data-gap='md'] {
+    gap: var(--xh-grid-gap, var(--xh-space-3));
+  }
+
+  [data-scope='grid'][data-part='root'][data-gap='lg'] {
+    gap: var(--xh-grid-gap, var(--xh-space-4));
+  }
+
+  [data-scope='grid'][data-part='root'][data-gap='xl'] {
+    gap: var(--xh-grid-gap, var(--xh-space-6));
+  }
+
+  /* —— 块向对齐 —— */
+  /* 管的是每一项在自己那格里怎么摆，不是格子在容器里怎么摆：列宽由轨道表定死，容器不留富余 */
+  [data-scope='grid'][data-part='root'][data-align='start'] {
+    align-items: start;
+  }
+
+  [data-scope='grid'][data-part='root'][data-align='center'] {
+    align-items: center;
+  }
+
+  [data-scope='grid'][data-part='root'][data-align='end'] {
+    align-items: end;
+  }
+
+  [data-scope='grid'][data-part='root'][data-align='stretch'] {
+    align-items: stretch;
+  }
+
+  [data-scope='grid'][data-part='root'][data-align='baseline'] {
+    align-items: baseline;
+  }
+
+  /* —— 行内对齐 —— */
+  [data-scope='grid'][data-part='root'][data-justify='start'] {
+    justify-items: start;
+  }
+
+  [data-scope='grid'][data-part='root'][data-justify='center'] {
+    justify-items: center;
+  }
+
+  [data-scope='grid'][data-part='root'][data-justify='end'] {
+    justify-items: end;
+  }
+
+  [data-scope='grid'][data-part='root'][data-justify='stretch'] {
+    justify-items: stretch;
+  }
+
+  /* —— 格子 —— */
+  [data-scope='grid'][data-part='item'] {
+    grid-column-start: var(--xh-_grid-start);
+    grid-column-end: span var(--xh-_grid-span);
+
+    /* 两个槽位在每一格上都声明一遍，嵌套时内层的格子不吃外层那一格的值 */
+    --xh-_grid-span: 1;
+    --xh-_grid-start: auto;
+  }
+
+  /* —— 跨列 —— */
+  /* 占一列是上面的缺省，这里从跨两列起逐档写 */
+  [data-scope='grid'][data-part='item'][data-span='2'] {
+    --xh-_grid-span: 2;
+  }
+
+  [data-scope='grid'][data-part='item'][data-span='3'] {
+    --xh-_grid-span: 3;
+  }
+
+  [data-scope='grid'][data-part='item'][data-span='4'] {
+    --xh-_grid-span: 4;
+  }
+
+  [data-scope='grid'][data-part='item'][data-span='5'] {
+    --xh-_grid-span: 5;
+  }
+
+  [data-scope='grid'][data-part='item'][data-span='6'] {
+    --xh-_grid-span: 6;
+  }
+
+  [data-scope='grid'][data-part='item'][data-span='7'] {
+    --xh-_grid-span: 7;
+  }
+
+  [data-scope='grid'][data-part='item'][data-span='8'] {
+    --xh-_grid-span: 8;
+  }
+
+  [data-scope='grid'][data-part='item'][data-span='9'] {
+    --xh-_grid-span: 9;
+  }
+
+  [data-scope='grid'][data-part='item'][data-span='10'] {
+    --xh-_grid-span: 10;
+  }
+
+  [data-scope='grid'][data-part='item'][data-span='11'] {
+    --xh-_grid-span: 11;
+  }
+
+  [data-scope='grid'][data-part='item'][data-span='12'] {
+    --xh-_grid-span: 12;
+  }
+
+  /* —— 错列 —— */
+  /* 错 N 列 = 改从第 N+1 条列线起排，前面那 N 列空着。
+     列线跟着书写方向走，RTL 下自动从另一头数。
+     错的是列线不是「相对上一格再往后几格」：同一行里前面已经排到更后面时，这一格落到下一行的那条列线上。 */
+  [data-scope='grid'][data-part='item'][data-offset='1'] {
+    --xh-_grid-start: 2;
+  }
+
+  [data-scope='grid'][data-part='item'][data-offset='2'] {
+    --xh-_grid-start: 3;
+  }
+
+  [data-scope='grid'][data-part='item'][data-offset='3'] {
+    --xh-_grid-start: 4;
+  }
+
+  [data-scope='grid'][data-part='item'][data-offset='4'] {
+    --xh-_grid-start: 5;
+  }
+
+  [data-scope='grid'][data-part='item'][data-offset='5'] {
+    --xh-_grid-start: 6;
+  }
+
+  [data-scope='grid'][data-part='item'][data-offset='6'] {
+    --xh-_grid-start: 7;
+  }
+
+  [data-scope='grid'][data-part='item'][data-offset='7'] {
+    --xh-_grid-start: 8;
+  }
+
+  [data-scope='grid'][data-part='item'][data-offset='8'] {
+    --xh-_grid-start: 9;
+  }
+
+  [data-scope='grid'][data-part='item'][data-offset='9'] {
+    --xh-_grid-start: 10;
+  }
+
+  [data-scope='grid'][data-part='item'][data-offset='10'] {
+    --xh-_grid-start: 11;
+  }
+
+  [data-scope='grid'][data-part='item'][data-offset='11'] {
+    --xh-_grid-start: 12;
+  }
+}

package/css/highlight.css

@@ -0,0 +1,21 @@
+@layer xihan.components {
+  /* 文本按原样显示：命中位置是按原串逐字符算的，折叠掉连续空格与换行会让看到的
+     与算出来的对不上。pre-wrap 保留空白但仍在容器边界换行 */
+  [data-scope='highlight'][data-part='root'] {
+    white-space: pre-wrap;
+  }
+
+  /* 浏览器给 mark 的默认底色是一个固定的亮黄，暗色主题下压在深底上刺眼、
+     配的黑字也不随主题走；这里整份换成随主题走的品牌淡底 */
+  [data-scope='highlight'][data-part='mark'] {
+    padding-inline: var(--xh-space-0_5);
+    border-radius: var(--xh-highlight-radius, var(--xh-radius-sm));
+    background: var(--xh-highlight-bg, var(--xh-bg-brand-subtle));
+    color: var(--xh-highlight-fg, var(--xh-fg-brand-strong));
+    font-weight: var(--xh-font-weight-medium);
+    /* 命中片段跨行时两半各自收边，否则圆角与内边距只画在整段的首尾。
+       两条都写：WebKit 只认带前缀那条 */
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+}