@xihan-ui/styles 1.0.0-alpha.0

package/css/popselect.css

@@ -0,0 +1,207 @@
+@layer xihan.components {
+  [data-scope='popselect'][data-part='root'] {
+    /* 尺寸档只换这四个私有槽，触发器与条目都从 root 继承它们，换档不必给每个部件各写一条选择器。
+       浮层在 positioner 里、也是 root 的后代，一并继承 */
+    --xh-_popselect-h: var(--xh-control-h-md);
+    --xh-_popselect-px: var(--xh-control-px-md);
+    --xh-_popselect-gap: var(--xh-control-gap-md);
+    --xh-_popselect-font-size: var(--xh-text-body-size);
+
+    /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
+    --xh-_popselect-trigger-bg: var(--xh-bg-canvas);
+    --xh-_popselect-trigger-border: var(--xh-border-default);
+    --xh-_popselect-trigger-border-hover: var(--xh-border-strong);
+
+    /* 强调色随语气走，只落在聚焦与选中上，正文文字色不动。
+       没写 data-tone 时 --xh-_tone 没被声明，三处都退回原来的取值 */
+    --xh-_popselect-ring: var(--xh-ring-focus);
+    --xh-_popselect-accent: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_popselect-item-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --xh-_popselect-item-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
+
+    display: inline-flex;
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  [data-scope='popselect'][data-part='root'][data-size='sm'] {
+    --xh-_popselect-h: var(--xh-control-h-sm);
+    --xh-_popselect-px: var(--xh-control-px-sm);
+    --xh-_popselect-gap: var(--xh-control-gap-sm);
+    --xh-_popselect-font-size: var(--xh-font-size-sm);
+  }
+
+  [data-scope='popselect'][data-part='root'][data-size='lg'] {
+    --xh-_popselect-h: var(--xh-control-h-lg);
+    --xh-_popselect-px: var(--xh-control-px-lg);
+    --xh-_popselect-gap: var(--xh-control-gap-lg);
+    --xh-_popselect-font-size: var(--xh-font-size-lg);
+  }
+
+  /* —— 形态 —— */
+  /* 形态只决定描边与底色怎么用，用哪族颜色由 data-tone 决定 */
+  [data-scope='popselect'][data-part='root'][data-variant='outline'] {
+    --xh-_popselect-trigger-bg: var(--xh-bg-canvas);
+    --xh-_popselect-trigger-border: var(--xh-border-default);
+    --xh-_popselect-trigger-border-hover: var(--xh-border-strong);
+  }
+
+  /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
+  [data-scope='popselect'][data-part='root'][data-variant='subtle'] {
+    --xh-_popselect-trigger-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_popselect-trigger-border: transparent;
+    --xh-_popselect-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  }
+
+  [data-scope='popselect'][data-part='root'][data-variant='ghost'] {
+    --xh-_popselect-trigger-bg: transparent;
+    --xh-_popselect-trigger-border: transparent;
+    --xh-_popselect-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  }
+
+  [data-scope='popselect'][data-part='trigger'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--xh-popselect-trigger-gap, var(--xh-_popselect-gap));
+    block-size: var(--xh-popselect-trigger-h, var(--xh-_popselect-h));
+    padding-inline: var(--xh-popselect-trigger-px, var(--xh-_popselect-px));
+    border: var(--xh-stroke-thin) solid var(--xh-popselect-trigger-border, var(--xh-_popselect-trigger-border));
+    border-radius: var(--xh-popselect-trigger-radius, var(--xh-shape-control));
+    background: var(--xh-popselect-trigger-bg, var(--xh-_popselect-trigger-bg));
+    color: var(--xh-popselect-trigger-fg, var(--xh-fg-default));
+    font-size: var(--xh-popselect-trigger-font-size, var(--xh-_popselect-font-size));
+    line-height: var(--xh-leading-none);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  [data-scope='popselect'][data-part='trigger']:hover:not(:disabled) {
+    border-color: var(--xh-popselect-trigger-border-hover, var(--xh-_popselect-trigger-border-hover));
+  }
+
+  [data-scope='popselect'][data-part='trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-_popselect-ring);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* trigger 是单体控件，用原生 disabled（条目那边一律 aria-disabled） */
+  [data-scope='popselect'][data-part='trigger']:disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 无选中：触发器上显示的是占位文字，画淡一档 */
+  [data-scope='popselect'][data-part='trigger'][data-placeholder] {
+    color: var(--xh-popselect-placeholder-fg, var(--xh-fg-subtle));
+  }
+
+  /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
+  [data-scope='popselect'][data-part='positioner'] {
+    position: fixed;
+    z-index: var(--xh-layer-popover);
+    /* 空壳不吃指针，交互只发生在 content 上 */
+    pointer-events: none;
+  }
+
+  /* 锚点被滚出可视区：整个浮层随之收起 */
+  [data-scope='popselect'][data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  [data-scope='popselect'][data-part='content'] {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: var(--xh-popselect-content-min-w, var(--xh-overlay-min-w));
+    max-inline-size: var(--xh-popselect-content-max-w, var(--xh-overlay-max-w));
+    max-block-size: var(--xh-popselect-content-max-h, var(--xh-overlay-max-h));
+    padding: var(--xh-popselect-content-p, var(--xh-space-1));
+    border: var(--xh-stroke-thin) solid var(--xh-popselect-content-border, var(--xh-border-default));
+    border-radius: var(--xh-popselect-content-radius, var(--xh-shape-surface));
+    background: var(--xh-popselect-content-bg, var(--xh-bg-surface));
+    color: var(--xh-popselect-content-fg, var(--xh-fg-default));
+    box-shadow: var(--xh-popselect-content-shadow, var(--xh-elevation-2));
+    overflow-y: auto;
+    pointer-events: auto;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则，收起态显式让位 */
+  [data-scope='popselect'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  /* 容器只是焦点域兜底落点，落焦不画环：高亮永远长在条目上 */
+  [data-scope='popselect'][data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='popselect'][data-part='content'][data-state='open'] {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='popselect'][data-part='item'] {
+    display: flex;
+    align-items: center;
+    gap: var(--xh-popselect-item-gap, var(--xh-_popselect-gap));
+    padding-block: var(--xh-popselect-item-py, var(--xh-space-1));
+    padding-inline: var(--xh-popselect-item-px, var(--xh-control-px-sm));
+    border-radius: var(--xh-popselect-item-radius, var(--xh-shape-control));
+    color: var(--xh-popselect-item-fg, var(--xh-fg-default));
+    font-size: var(--xh-popselect-item-font-size, var(--xh-_popselect-font-size));
+    /* 行高留出文字的上下伸展空间，行内那层 overflow:hidden 才不会把字削掉 */
+    line-height: var(--xh-popselect-item-leading, var(--xh-leading-normal));
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  /* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边 */
+  [data-scope='popselect'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
+    background: var(--xh-popselect-item-bg-highlight, var(--xh-_popselect-item-highlight-bg));
+  }
+
+  /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，两者因此能同时看见 */
+  [data-scope='popselect'][data-part='item'][data-state='checked'] {
+    color: var(--xh-popselect-item-fg-selected, var(--xh-_popselect-item-selected-fg));
+    font-weight: var(--xh-popselect-item-font-weight-selected, var(--xh-font-weight-medium));
+  }
+
+  [data-scope='popselect'][data-part='item']:focus {
+    outline: none;
+  }
+
+  /* 禁用走 aria-disabled 而非原生 disabled，条目仍可聚焦，样式由 data-disabled 表达 */
+  [data-scope='popselect'][data-part='item'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='popselect'][data-part='item-text'] {
+    flex: 1;
+    /* 弹性子项默认最小尺寸是内容尺寸，不归零则长文本把行撑破、省略号轮不上 */
+    min-inline-size: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* 勾选标记只在选中项上出现；未选中时占位不塌，切换选中不引起行宽抖动 */
+  [data-scope='popselect'][data-part='item-indicator'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-popselect-item-indicator-size, var(--xh-control-indicator-size));
+    color: var(--xh-popselect-item-indicator-fg, var(--xh-_popselect-accent));
+    visibility: hidden;
+  }
+
+  /* 没写内容就由皮肤画勾；作者往部件里塞了自己的图形，这条规则即不命中 */
+  [data-scope='popselect'][data-part='item-indicator']:empty::before {
+    content: '✓';
+  }
+
+  [data-scope='popselect'][data-part='item-indicator'][data-state='checked'] {
+    visibility: visible;
+  }
+}

package/css/progress.css

@@ -0,0 +1,37 @@
+@layer xihan.components {
+  /* 私有槽位：组件令牌 → 中档字面量两级回退。厚度写在 root 上而不是 track 上，
+     尺寸档才改得动一处就够，track 靠继承拿到值。 */
+  [data-scope='progress'][data-part='root'] {
+    --xh-_thickness: var(--xh-progress-thickness, 6px);
+
+    display: inline-block;
+    inline-size: 100%;
+  }
+
+  [data-scope='progress'][data-part='track'] {
+    overflow: hidden;
+    inline-size: 100%;
+    block-size: var(--xh-_thickness);
+    border-radius: var(--xh-shape-pill);
+    background: var(--xh-progress-track, var(--xh-bg-subtle-active));
+  }
+
+  /* 语气槽由 root 上的 data-tone 声明、经继承发下来；没写 data-tone 时退回原来的品牌色。
+     轨道不跟着换族：只有已完成的那段换色，底槽保持中性才读得出"完成了多少"。 */
+  [data-scope='progress'][data-part='range'] {
+    block-size: 100%;
+    border-radius: var(--xh-shape-pill);
+    background: var(--xh-progress-range, var(--xh-_tone, var(--xh-bg-brand)));
+    transition: inline-size var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* —— 尺寸 —— */
+  /* 只有厚度分档；中间档不写规则，缺省即中档 */
+  [data-scope='progress'][data-part='root'][data-size='sm'] {
+    --xh-_thickness: var(--xh-progress-thickness, var(--xh-space-1));
+  }
+
+  [data-scope='progress'][data-part='root'][data-size='lg'] {
+    --xh-_thickness: var(--xh-progress-thickness, var(--xh-space-2));
+  }
+}

package/css/qr-code.css

@@ -0,0 +1,50 @@
+@layer xihan.components {
+  /*
+   * 根 <svg>。深浅两色取固定档而不是语义前景/背景：语义色跟着主题走，深色主题下整张码
+   * 会翻成浅底深模块的反相图，一部分读码器不认反相码。要换配色改下面这三个覆盖槽。
+   *
+   * 换色只有一条硬约束：码点必须比底色深，且两者对比要足。反相（浅码点深底）与
+   * 深浅相近都会让一部分读码器扫不出来，而这件事肉眼看不出来。
+   *
+   *   --xh-qr-code-fg      码点色，同时经 currentColor 传给码眼
+   *   --xh-qr-code-bg      底色，挖空矩形也用它
+   *   --xh-qr-code-eye-fg  码眼色，缺省跟随码点色
+   */
+  [data-scope='qr-code'][data-part='root'] {
+    display: block;
+    border-radius: var(--xh-qr-code-radius, var(--xh-radius-md));
+    background: var(--xh-qr-code-bg, var(--xh-color-neutral-0));
+
+    /* 模块那条 path 不带自己的填充色，从这里继承下去 */
+    color: var(--xh-qr-code-fg, var(--xh-color-neutral-950));
+    fill: currentColor;
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  [data-scope='qr-code'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 码眼那条 path 恒在（与形状无关），没单独指定就退回 currentColor，跟码点同色 */
+  [data-scope='qr-code'][data-part='root'] > [data-xh-geom='eyes'] {
+    fill: var(--xh-qr-code-eye-fg, currentColor);
+  }
+
+  /*
+   * logo 底下那块挖空：填的必须与根的背景逐字同一个表达式，两处一起改。
+   * 差一点就会在 logo 四周露出一圈色差，读码器会把那圈当成模块边界。
+   */
+  [data-scope='qr-code'][data-part='root'] > [data-xh-geom='logo-clear'] {
+    fill: var(--xh-qr-code-bg, var(--xh-color-neutral-0));
+  }
+
+  /*
+   * 没有可编码的内容、以及内容超出容量：两种情形都一个模块不铺，留一块带描边的占位。
+   * 占位用的是语义色——它是界面元素不是码面，跟着主题走才对。
+   */
+  [data-scope='qr-code'][data-part='root'][data-state='empty'],
+  [data-scope='qr-code'][data-part='root'][data-state='error'] {
+    background: var(--xh-qr-code-placeholder-bg, var(--xh-bg-subtle));
+    box-shadow: inset 0 0 0 var(--xh-stroke-thin) var(--xh-qr-code-placeholder-border, var(--xh-border-default));
+  }
+}

package/css/radio-group.css

@@ -0,0 +1,101 @@
+@layer xihan.components {
+  [data-scope='radio-group'][data-part='root'] {
+    /* 尺寸档只换这两个私有槽，标题与条目都从 root 继承它们，换档不必给每个部件各写一条选择器 */
+    --xh-_radio-group-item-gap: var(--xh-control-gap-md);
+    --xh-_radio-group-font-size: var(--xh-text-label-size);
+    /* 选中色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的品牌色 */
+    --xh-_radio-group-accent: var(--xh-_tone, var(--xh-bg-brand));
+
+    display: flex;
+    gap: var(--xh-radio-group-gap, var(--xh-stack-gap-md));
+  }
+
+  [data-scope='radio-group'][data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  [data-scope='radio-group'][data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  /* —— 尺寸 —— */
+  [data-scope='radio-group'][data-part='root'][data-size='sm'] {
+    --xh-_radio-group-item-gap: var(--xh-control-gap-sm);
+    --xh-_radio-group-font-size: var(--xh-font-size-sm);
+  }
+
+  [data-scope='radio-group'][data-part='root'][data-size='lg'] {
+    --xh-_radio-group-item-gap: var(--xh-control-gap-lg);
+    --xh-_radio-group-font-size: var(--xh-font-size-lg);
+  }
+
+  [data-scope='radio-group'][data-part='label'] {
+    color: var(--xh-radio-group-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-radio-group-label-font-size, var(--xh-_radio-group-font-size));
+    font-weight: var(--xh-radio-group-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+  }
+
+  /* position 是给条目内那份视觉隐藏的原生输入做定位基准，别去掉 */
+  [data-scope='radio-group'][data-part='item'] {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-radio-group-item-gap, var(--xh-_radio-group-item-gap));
+    border-radius: var(--xh-radio-group-item-radius, var(--xh-shape-control));
+    color: var(--xh-radio-group-item-fg, var(--xh-fg-default));
+    font-size: var(--xh-radio-group-item-font-size, var(--xh-_radio-group-font-size));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+  }
+
+  [data-scope='radio-group'][data-part='item']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 禁用走 aria-disabled 而非原生 disabled，条目仍可聚焦，样式由 data-disabled 表达 */
+  [data-scope='radio-group'][data-part='item'][data-disabled] {
+    color: var(--xh-radio-group-item-fg-disabled, var(--xh-fg-disabled));
+    cursor: not-allowed;
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
+  [data-scope='radio-group'][data-part='indicator'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: 16px;
+    block-size: 16px;
+    border: var(--xh-stroke-thin) solid var(--xh-radio-group-indicator-border, var(--xh-border-default));
+    border-radius: var(--xh-shape-pill);
+    background: var(--xh-radio-group-indicator-bg, var(--xh-bg-canvas));
+    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='radio-group'][data-part='indicator'][data-state='checked'] {
+    border-color: var(--xh-radio-group-indicator-border-checked, var(--xh-_radio-group-accent));
+  }
+
+  /* 圆点用 scale 收放，选中态切换不引起布局抖动 */
+  [data-scope='radio-group'][data-part='indicator']::before {
+    content: '';
+    inline-size: 8px;
+    block-size: 8px;
+    border-radius: var(--xh-shape-pill);
+    background: var(--xh-radio-group-indicator-dot, var(--xh-_radio-group-accent));
+    scale: 0;
+    transition: scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='radio-group'][data-part='indicator'][data-state='checked']::before {
+    scale: 1;
+  }
+
+  [data-scope='radio-group'][data-part='item-text'] {
+    color: inherit;
+    user-select: none;
+  }
+}

package/css/rating.css

@@ -0,0 +1,141 @@
+@layer xihan.components {
+  /* position 是给表单影子做定位基准的：那份输入被连接层内联写成绝对定位，
+     根上不留基准它就会贴到更外层的定位祖先上，原生校验提示跟着飘到页面别处。 */
+  [data-scope='rating'][data-part='root'] {
+    /* 尺寸档只换这三个私有槽，标题与星星都从 root 继承它们，换档不必给每个部件各写一条选择器 */
+    --xh-_rating-item-gap: var(--xh-space-1);
+    --xh-_rating-item-size: var(--xh-font-size-2xl);
+    --xh-_rating-font-size: var(--xh-text-label-size);
+    /* 点亮色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的警示色 */
+    --xh-_rating-accent: var(--xh-_tone, var(--xh-color-warning-500));
+
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--xh-rating-gap, var(--xh-stack-gap-md));
+  }
+
+  /* —— 尺寸 —— */
+  [data-scope='rating'][data-part='root'][data-size='sm'] {
+    --xh-_rating-item-gap: var(--xh-control-gap-sm);
+    --xh-_rating-item-size: var(--xh-font-size-xl);
+    --xh-_rating-font-size: var(--xh-font-size-sm);
+  }
+
+  [data-scope='rating'][data-part='root'][data-size='lg'] {
+    --xh-_rating-item-gap: var(--xh-control-gap-lg);
+    --xh-_rating-item-size: var(--xh-font-size-3xl);
+    --xh-_rating-font-size: var(--xh-font-size-lg);
+  }
+
+  /* 整体压暗只做一次，落在最外层：星星逐颗再叠 opacity 会越叠越黑 */
+  [data-scope='rating'][data-part='root'][data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
+  [data-scope='rating'][data-part='label'] {
+    color: var(--xh-rating-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-rating-label-font-size, var(--xh-_rating-font-size));
+    font-weight: var(--xh-rating-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+  }
+
+  [data-scope='rating'][data-part='label'][data-disabled] {
+    color: var(--xh-fg-subtle);
+  }
+
+  [data-scope='rating'][data-part='control'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-rating-item-gap, var(--xh-_rating-item-gap));
+  }
+
+  /* 容器只是焦点域的兜底落点（焦点从带外进来先落在它身上，随即被转投给某颗星），
+     落焦不画环：高亮永远长在星星上，容器再画一圈只是重影。 */
+  [data-scope='rating'][data-part='control']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='rating'][data-part='control'][data-readonly] {
+    cursor: default;
+  }
+
+  [data-scope='rating'][data-part='control'][data-disabled] {
+    cursor: not-allowed;
+  }
+
+  /* 星星字符由作者写，皮肤只负责上色与盒子。
+     inline-block 是判定"点在左半边还是右半边"的前提：连接层拿 offsetX / clientWidth 算比例，
+     行内盒会把字符两侧的换行空白算进宽度，半颗的分界线就偏了。 */
+  [data-scope='rating'][data-part='item'] {
+    display: inline-block;
+    border-radius: var(--xh-rating-item-radius, var(--xh-shape-control));
+    color: var(--xh-rating-item-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-rating-item-font-size, var(--xh-_rating-item-size));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+    /* 从一颗星划到另一颗会把中间的字符连着选中，星带看上去像被刷蓝了 */
+    user-select: none;
+    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 点亮的判据是 data-highlighted，不是 aria-checked：
+     aria-checked 只认落定的值，而悬停预览要求手划过去当场就亮。
+     两者共用同一档颜色，预览与选中因此看不出差别——这正是"预览"该有的样子。 */
+  [data-scope='rating'][data-part='item'][data-highlighted] {
+    color: var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent));
+  }
+
+  /* 半颗：一道 50% 硬边渐变裁到字形上，左半亮右半灰。
+     必须排在 data-highlighted 之后：半颗那颗星同时带着 data-highlighted，两条选择器特异度相同，
+     顺序一反 color 就把 transparent 覆盖回实色，渐变整个看不见。 */
+  [data-scope='rating'][data-part='item'][data-half] {
+    background-image: linear-gradient(
+      to right,
+      var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent)) 50%,
+      var(--xh-rating-item-fg, var(--xh-fg-subtle)) 50%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  /* rtl 下"半颗"落在星的右半边（连接层按 1 - offsetX/width 判），亮的那半得跟着掉头。
+     渐变方向没有逻辑关键字可用，只能靠 :dir() 分流，不能指望逻辑属性自动换向。 */
+  [data-scope='rating'][data-part='item'][data-half]:dir(rtl) {
+    background-image: linear-gradient(
+      to left,
+      var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent)) 50%,
+      var(--xh-rating-item-fg, var(--xh-fg-subtle)) 50%
+    );
+  }
+
+  [data-scope='rating'][data-part='item']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 只读仍进得了 Tab 序列、读屏也念得出，只是改不动：收掉手型，别暗示"点这儿能改" */
+  [data-scope='rating'][data-part='item'][data-readonly] {
+    cursor: default;
+  }
+
+  /* 集合条目一律 aria-disabled、没有原生 disabled，:disabled 永远命不中，只能认 data-disabled */
+  [data-scope='rating'][data-part='item'][data-disabled] {
+    cursor: not-allowed;
+  }
+
+  /* 表单影子的视觉隐藏（绝对定位 + 1px + clip-path）连接层内联给全了，这里不重复也不覆盖，
+     只掐掉指针命中：那个 1px 的框压在星带上会截走本该落到星星上的点击。 */
+  [data-scope='rating'][data-part='hidden-input'] {
+    pointer-events: none;
+  }
+
+  /* display 会盖掉 UA 的 [hidden]{display:none}，凡是被赋了 display 的角色节点都要显式让位 */
+  [data-scope='rating'][data-part='root'][hidden],
+  [data-scope='rating'][data-part='control'][hidden],
+  [data-scope='rating'][data-part='item'][hidden] {
+    display: none;
+  }
+}

package/css/reset.css

@@ -0,0 +1,22 @@
+/*
+ * 库自己的基线，只作用于带 data-scope 的库节点，不碰宿主页面的任何元素。
+ *
+ * 层序上 xihan.reset 在 xihan.components 之前，所以组件皮肤里的任何显式声明都盖得住这里。
+ */
+@layer xihan.reset {
+  /* 尺寸一律含边框：皮肤里的宽高都是照可见盒子写的。 */
+  [data-scope],
+  [data-scope]::before,
+  [data-scope]::after {
+    box-sizing: border-box;
+  }
+
+  /*
+   * UA 样式会把表单控件的字体锁成系统默认，不跟随页面。
+   * 这几个元素是 UA 唯一强制字体的地方，标题一类不在其中，故不做全局 font: inherit。
+   */
+  [data-scope]:where(button, input, optgroup, select, textarea) {
+    font: inherit;
+    letter-spacing: inherit;
+  }
+}

package/css/result.css

@@ -0,0 +1,104 @@
+@layer xihan.components {
+  [data-scope='result'][data-part='root'] {
+    /* 三个尺寸档只换这几个私有槽，图标与标题都从 root 继承它们，
+       换档不必给每个部件各写一条选择器 */
+    --xh-_result-gap: var(--xh-stack-gap-md);
+    --xh-_result-py: var(--xh-section-py);
+    --xh-_result-icon-size: 3.5rem;
+    --xh-_result-title-size: var(--xh-font-size-xl);
+    /* 说明的读行宽度：整句话不收窄就会拉成一条难读的长行 */
+    --xh-_result-measure: 32rem;
+    /* 图标区的语气色，由 data-status 换掉；没写 status 就退成中性 */
+    --xh-_result-accent: var(--xh-fg-subtle);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-result-gap, var(--xh-_result-gap));
+    padding-block: var(--xh-result-py, var(--xh-_result-py));
+    padding-inline: var(--xh-result-px, var(--xh-space-6));
+    color: var(--xh-result-fg, var(--xh-fg-default));
+    text-align: center;
+  }
+
+  /* 上面声明了 display，会盖掉 UA 的 [hidden] 规则，收起态要在这里接回来 */
+  [data-scope='result'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  [data-scope='result'][data-part='root'][data-size='sm'] {
+    --xh-_result-gap: var(--xh-space-3);
+    --xh-_result-py: var(--xh-space-6);
+    --xh-_result-icon-size: 2.5rem;
+    --xh-_result-title-size: var(--xh-font-size-lg);
+  }
+
+  [data-scope='result'][data-part='root'][data-size='lg'] {
+    --xh-_result-gap: var(--xh-space-6);
+    --xh-_result-py: var(--xh-space-8);
+    --xh-_result-icon-size: 4.5rem;
+    --xh-_result-title-size: var(--xh-font-size-2xl);
+  }
+
+  /* —— 语气 —— */
+  /* 三个状态码各并进最接近的一族：找不到=提示，没权限=警示，服务出错=危险。
+     用 500 档而不是 600：500 是装饰性强调档，600 是给实心底与文字用的 */
+  [data-scope='result'][data-part='root'][data-status='success'] {
+    --xh-_result-accent: var(--xh-color-success-500);
+  }
+
+  [data-scope='result'][data-part='root'][data-status='warning'],
+  [data-scope='result'][data-part='root'][data-status='403'] {
+    --xh-_result-accent: var(--xh-color-warning-500);
+  }
+
+  [data-scope='result'][data-part='root'][data-status='error'],
+  [data-scope='result'][data-part='root'][data-status='500'] {
+    --xh-_result-accent: var(--xh-color-danger-500);
+  }
+
+  [data-scope='result'][data-part='root'][data-status='info'],
+  [data-scope='result'][data-part='root'][data-status='404'] {
+    --xh-_result-accent: var(--xh-color-info-500);
+  }
+
+  /* —— 各段 —— */
+  [data-scope='result'][data-part='icon'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    block-size: var(--xh-result-icon-size, var(--xh-_result-icon-size));
+    inline-size: var(--xh-result-icon-size, var(--xh-_result-icon-size));
+    color: var(--xh-result-icon-fg, var(--xh-_result-accent));
+    /* 图标常是一个字形，字号跟着图标框走，line-height 不再另占高度 */
+    font-size: var(--xh-result-icon-font-size, var(--xh-_result-icon-size));
+    line-height: var(--xh-leading-none);
+  }
+
+  [data-scope='result'][data-part='title'] {
+    margin: 0;
+    color: var(--xh-result-title-fg, var(--xh-fg-default));
+    font-size: var(--xh-result-title-font-size, var(--xh-_result-title-size));
+    font-weight: var(--xh-result-title-font-weight, var(--xh-font-weight-semibold));
+    line-height: var(--xh-result-title-leading, var(--xh-leading-tight));
+  }
+
+  [data-scope='result'][data-part='description'] {
+    margin: 0;
+    max-inline-size: var(--xh-result-description-max-w, var(--xh-_result-measure));
+    color: var(--xh-result-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-result-description-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-result-description-leading, var(--xh-text-body-leading));
+  }
+
+  [data-scope='result'][data-part='action'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-result-action-gap, var(--xh-space-2));
+  }
+}