@xihan-ui/styles 1.0.0-alpha.0

package/css/badge.css

@@ -0,0 +1,50 @@
+@layer xihan.components {
+  [data-scope='badge'][data-part='root'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-space-1);
+    padding-inline: var(--xh-space-2);
+    padding-block: var(--xh-space-0_5);
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-shape-pill);
+    background: var(--xh-badge-bg, var(--xh-bg-subtle));
+    color: var(--xh-badge-fg, var(--xh-fg-default));
+    font-size: var(--xh-badge-font-size, var(--xh-font-size-xs));
+    font-weight: var(--xh-badge-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+  }
+
+  /* —— 变体 —— */
+  /* 形态只决定颜色怎么用；用哪族颜色由 data-tone 决定，没写 tone 就沿用原来的品牌/中性配色 */
+  [data-scope='badge'][data-part='root'][data-variant='solid'] {
+    background: var(--xh-_tone, var(--xh-bg-brand));
+    color: var(--xh-_tone-on, var(--xh-fg-on-brand));
+  }
+
+  [data-scope='badge'][data-part='root'][data-variant='subtle'] {
+    background: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    color: var(--xh-_tone-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='badge'][data-part='root'][data-variant='outline'] {
+    border-color: var(--xh-_tone-border, var(--xh-border-default));
+    background: transparent;
+    color: var(--xh-_tone-fg, var(--xh-fg-default));
+  }
+
+  /* —— 尺寸 —— */
+  /* 徽标是随文排的药丸，不占控件行高，档位走间距与字号而不是 control-h */
+  [data-scope='badge'][data-part='root'][data-size='sm'] {
+    gap: var(--xh-space-0_5);
+    padding-inline: var(--xh-space-1_5);
+    padding-block: var(--xh-space-0);
+  }
+
+  [data-scope='badge'][data-part='root'][data-size='lg'] {
+    gap: var(--xh-space-1_5);
+    padding-inline: var(--xh-space-3);
+    padding-block: var(--xh-space-1);
+    font-size: var(--xh-font-size-sm);
+  }
+}

package/css/breadcrumb.css

@@ -0,0 +1,127 @@
+@layer xihan.components {
+  /* 根节点是 nav 地标，不参与排版：整条路径的行为全在 list 上，
+     这里不给 display，UA 的 [hidden]{display:none} 就仍然压得住 */
+  [data-scope='breadcrumb'][data-part='root'] {
+    /* 尺寸档只换这两个私有槽，列表与链接都从 root 继承它们，换档不必给每个部件各写一条选择器 */
+    --xh-_breadcrumb-font-size: var(--xh-text-label-size);
+    --xh-_breadcrumb-gap: var(--xh-space-2);
+    /* 当前项与链接悬停的强调色随语气走。没写 data-tone 时 --xh-_tone-fg 没被声明，
+       退回原来的前景色。聚焦环不在其列，它恒是 --xh-ring-focus */
+    --xh-_breadcrumb-accent-text: var(--xh-_tone-fg, var(--xh-fg-default));
+
+    color: var(--xh-breadcrumb-fg, var(--xh-fg-muted));
+    font-size: var(--xh-breadcrumb-font-size, var(--xh-_breadcrumb-font-size));
+    line-height: var(--xh-breadcrumb-leading, var(--xh-leading-tight));
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里。间距量的是路径里文字与分隔符之间的距离，
+     不在控件间距那把尺上（那把尺的大档与中档同值），三档一律取空间尺 */
+  [data-scope='breadcrumb'][data-part='root'][data-size='sm'] {
+    --xh-_breadcrumb-font-size: var(--xh-font-size-sm);
+    --xh-_breadcrumb-gap: var(--xh-space-1_5);
+  }
+
+  [data-scope='breadcrumb'][data-part='root'][data-size='lg'] {
+    --xh-_breadcrumb-font-size: var(--xh-font-size-lg);
+    --xh-_breadcrumb-gap: var(--xh-space-3);
+  }
+
+  /* ol 的项目符号与内外边距是 UA 给的，库里没有全局 preflight，只能在这儿自己抹平 */
+  [data-scope='breadcrumb'][data-part='list'] {
+    display: flex;
+    align-items: center;
+    /* 层级多到一行放不下就换行：宁可折行，也不要把路径压扁或撑出横向滚动 */
+    flex-wrap: wrap;
+    gap: var(--xh-breadcrumb-gap, var(--xh-_breadcrumb-gap));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  [data-scope='breadcrumb'][data-part='list'][hidden] {
+    display: none;
+  }
+
+  [data-scope='breadcrumb'][data-part='item'] {
+    display: inline-flex;
+    align-items: center;
+    /* 库里没有全局 preflight，列表项的外边距在这里自己抹平 */
+    margin: 0;
+    /* 允许被压缩，链接内部的省略号才有生效的余地 */
+    min-inline-size: 0;
+  }
+
+  [data-scope='breadcrumb'][data-part='item'][hidden] {
+    display: none;
+  }
+
+  [data-scope='breadcrumb'][data-part='link'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-breadcrumb-link-gap, var(--xh-space-1));
+    /* 一层的名字可能很长（文档标题、订单号），压不住会把整条路径撑开 */
+    max-inline-size: var(--xh-breadcrumb-link-max-w, 12rem);
+    padding-inline: var(--xh-breadcrumb-link-px, var(--xh-space-1));
+    border-radius: var(--xh-breadcrumb-link-radius, var(--xh-shape-control));
+    color: inherit;
+    text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition:
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='breadcrumb'][data-part='link'][hidden] {
+    display: none;
+  }
+
+  /* 当前页那条不再是"可去的地方"：不给悬停反馈，指针也不摆出可点的样子。
+     连接层同时拦下了它的点击并把它移出了 Tab 序列，这里只负责说清楚这件事 */
+  [data-scope='breadcrumb'][data-part='link']:not([data-current]):hover {
+    background: var(--xh-breadcrumb-link-bg-hover, var(--xh-bg-subtle-hover));
+    color: var(--xh-breadcrumb-link-fg-hover, var(--xh-_breadcrumb-accent-text));
+  }
+
+  [data-scope='breadcrumb'][data-part='link']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 当前页用字重与前景色区分，不加下划线：下划线是"可点"的信号，而它点不动 */
+  [data-scope='breadcrumb'][data-part='link'][data-current] {
+    color: var(--xh-breadcrumb-current-fg, var(--xh-_breadcrumb-accent-text));
+    font-weight: var(--xh-breadcrumb-current-font-weight, var(--xh-font-weight-medium));
+    cursor: default;
+  }
+
+  /* 分隔符与省略号都是纯视觉占位，读屏那边已被 aria-hidden 摘掉 */
+  [data-scope='breadcrumb'][data-part='separator'],
+  [data-scope='breadcrumb'][data-part='ellipsis'] {
+    display: inline-flex;
+    flex: none;
+    /* 两者也是列表项，宿主给 li 的外边距会把它们顶离同一行 */
+    margin: 0;
+    align-items: center;
+    justify-content: center;
+    color: var(--xh-breadcrumb-separator-fg, var(--xh-fg-subtle));
+    user-select: none;
+  }
+
+  [data-scope='breadcrumb'][data-part='separator'][hidden],
+  [data-scope='breadcrumb'][data-part='ellipsis'][hidden] {
+    display: none;
+  }
+
+  /* 分隔符常常是个图标：给一个跟着字号走的方框，斜杠与图标混用时基线才不跳 */
+  [data-scope='breadcrumb'][data-part='separator'] {
+    inline-size: var(--xh-breadcrumb-separator-size, 1em);
+  }
+
+  [data-scope='breadcrumb'][data-part='ellipsis'] {
+    inline-size: var(--xh-breadcrumb-ellipsis-size, var(--xh-space-5));
+    cursor: default;
+  }
+}

package/css/button-group.css

@@ -0,0 +1,131 @@
+@layer xihan.components {
+  /* 一组按钮连成一条：段与段之间不留缝，靠共边接上，所以不设 gap。
+     排布只能读 data-orientation——role=group 不收 aria-orientation，连接层根本不输出它。
+     圆角槽位在容器上先收成 0，组内每段都取得到，两端的圆角再逐段补回来 */
+  [data-scope='button-group'][data-part='root'] {
+    --xh-button-radius: 0;
+
+    display: inline-flex;
+    align-items: stretch;
+  }
+
+  [data-scope='button-group'][data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  [data-scope='button-group'][data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
+     不补的话作者给节点加 hidden 后它照样显示 */
+  [data-scope='button-group'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  /* 高度、内边距、间距、字号在容器上写一次，沿继承流给组内每一段。
+     三档都写出来：自定义属性会一路继承，组里再套一组时内层不写就会沿用外层的档 */
+  [data-scope='button-group'][data-part='root'][data-size='sm'] {
+    --xh-button-h: var(--xh-control-h-sm);
+    --xh-button-px: var(--xh-control-px-sm);
+    --xh-button-gap: var(--xh-control-gap-sm);
+    --xh-button-font-size: var(--xh-font-size-sm);
+  }
+
+  [data-scope='button-group'][data-part='root'][data-size='md'] {
+    --xh-button-h: var(--xh-control-h-md);
+    --xh-button-px: var(--xh-control-px-md);
+    --xh-button-gap: var(--xh-control-gap-md);
+    --xh-button-font-size: var(--xh-font-size-md);
+  }
+
+  [data-scope='button-group'][data-part='root'][data-size='lg'] {
+    --xh-button-h: var(--xh-control-h-lg);
+    --xh-button-px: var(--xh-control-px-lg);
+    --xh-button-gap: var(--xh-control-gap-lg);
+    --xh-button-font-size: var(--xh-font-size-lg);
+  }
+
+  /* —— 形态 —— */
+  /* 只写按钮暴露出来的颜色槽位：段自己写了形态时走的是它自己那条规则，这里的槽位不参与。
+     用哪族颜色由根上的 data-tone 决定，语气槽沿继承流下来，没写语气就沿用品牌/中性配色 */
+  [data-scope='button-group'][data-part='root'][data-variant='solid'] {
+    --xh-button-bg: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-button-bg-hover: var(--xh-_tone-hover, var(--xh-bg-brand-hover));
+    --xh-button-bg-active: var(--xh-_tone-active, var(--xh-bg-brand-active));
+    --xh-button-fg: var(--xh-_tone-on, var(--xh-fg-on-brand));
+  }
+
+  [data-scope='button-group'][data-part='root'][data-variant='subtle'] {
+    --xh-button-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-button-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --xh-button-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
+    --xh-button-fg: var(--xh-_tone-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='button-group'][data-part='root'][data-variant='outline'],
+  [data-scope='button-group'][data-part='root'][data-variant='ghost'] {
+    --xh-button-bg: transparent;
+    --xh-button-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-button-bg-active: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-active));
+    --xh-button-fg: var(--xh-_tone-fg, var(--xh-fg-default));
+  }
+
+  /* 段的描边归组画（两个适配器各一条选择器：Vue 的段就是直接子节点，WC 的段在行为宿主里面）：合边本来就是组的事，按钮那边没有描边色的槽位可以流 */
+  [data-scope='button-group'][data-part='root'][data-variant='outline'] > *,
+  [data-scope='button-group'][data-part='root'][data-variant='outline'] > * [data-scope='button'][data-part='root'] {
+    border-color: var(--xh-_tone-border, var(--xh-border-default));
+  }
+
+  /* —— 合边 —— */
+  /* 相邻两段的边重合在同一像素上，谁的描边浮在上面必须能指定，
+     因此每一段都是定位元素——静态元素的 z-index 不生效 */
+  [data-scope='button-group'][data-part='root'] > * {
+    position: relative;
+  }
+
+  /* 后一段往回挪一个描边宽度，相邻的两条边重合成一条。
+     方向跟着 data-orientation 走，横排收 inline 轴、竖排收 block 轴 */
+  [data-scope='button-group'][data-part='root'][data-orientation='horizontal'] > * + * {
+    margin-inline-start: calc(-1 * var(--xh-stroke-thin));
+  }
+
+  [data-scope='button-group'][data-part='root'][data-orientation='vertical'] > * + * {
+    margin-block-start: calc(-1 * var(--xh-stroke-thin));
+  }
+
+  /* 悬停或拿到焦点的那一段抬到最上层：焦点环画在元素外侧，
+     不抬层就会被后一段的底色与描边盖掉一半 */
+  [data-scope='button-group'][data-part='root'] > *:hover,
+  [data-scope='button-group'][data-part='root'] > *:focus-within {
+    z-index: 1;
+  }
+
+  /* —— 两端圆角 —— */
+  /* 逻辑角属性写，rtl 与竖排都跟着换边，不必另写一套。
+     只认直接子节点：段之间插了别的节点时宁可退化成直角，也不要圆错位置 */
+  [data-scope='button-group'][data-part='root'][data-orientation='horizontal'] > *:first-child,
+  [data-scope='button-group'][data-part='root'][data-orientation='horizontal'] > *:first-child [data-scope='button'][data-part='root'] {
+    border-start-start-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+    border-end-start-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+  }
+
+  [data-scope='button-group'][data-part='root'][data-orientation='horizontal'] > *:last-child,
+  [data-scope='button-group'][data-part='root'][data-orientation='horizontal'] > *:last-child [data-scope='button'][data-part='root'] {
+    border-start-end-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+    border-end-end-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+  }
+
+  [data-scope='button-group'][data-part='root'][data-orientation='vertical'] > *:first-child,
+  [data-scope='button-group'][data-part='root'][data-orientation='vertical'] > *:first-child [data-scope='button'][data-part='root'] {
+    border-start-start-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+    border-start-end-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+  }
+
+  [data-scope='button-group'][data-part='root'][data-orientation='vertical'] > *:last-child,
+  [data-scope='button-group'][data-part='root'][data-orientation='vertical'] > *:last-child [data-scope='button'][data-part='root'] {
+    border-end-start-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+    border-end-end-radius: var(--xh-button-group-radius, var(--xh-shape-control));
+  }
+}

package/css/button.css

@@ -0,0 +1,98 @@
+@layer xihan.components {
+  [data-scope='button'][data-part='root'] {
+    /* 私有槽位：组件令牌 → 语义令牌两级回退，变体只改这几个槽位 */
+    --xh-_bg: var(--xh-button-bg, var(--xh-bg-subtle));
+    --xh-_bg-hover: var(--xh-button-bg-hover, var(--xh-bg-subtle-hover));
+    --xh-_bg-active: var(--xh-button-bg-active, var(--xh-bg-subtle-active));
+    --xh-_fg: var(--xh-button-fg, var(--xh-fg-default));
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-button-gap, var(--xh-control-gap-md));
+    block-size: var(--xh-button-h, var(--xh-control-h-md));
+    padding-inline: var(--xh-button-px, var(--xh-control-px-md));
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-button-radius, var(--xh-shape-control));
+    background: var(--xh-_bg);
+    color: var(--xh-_fg);
+    font-size: var(--xh-button-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-button-font-weight, var(--xh-text-label-weight));
+    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),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='button'][data-part='root']:hover {
+    background: var(--xh-_bg-hover);
+  }
+
+  [data-scope='button'][data-part='root']:active {
+    background: var(--xh-_bg-active);
+  }
+
+  [data-scope='button'][data-part='root']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='button'][data-part='root'][data-disabled],
+  [data-scope='button'][data-part='root'][data-loading] {
+    cursor: not-allowed;
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
+  /* —— 变体 —— */
+  /* 形态只决定颜色怎么用；用哪族颜色由 data-tone 决定，没写 tone 就沿用原来的品牌/中性配色 */
+  [data-scope='button'][data-part='root'][data-variant='solid'] {
+    --xh-_bg: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_bg-hover: var(--xh-_tone-hover, var(--xh-bg-brand-hover));
+    --xh-_bg-active: var(--xh-_tone-active, var(--xh-bg-brand-active));
+    --xh-_fg: var(--xh-_tone-on, var(--xh-fg-on-brand));
+  }
+
+  [data-scope='button'][data-part='root'][data-variant='subtle'] {
+    --xh-_bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --xh-_bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
+    --xh-_fg: var(--xh-_tone-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='button'][data-part='root'][data-variant='outline'] {
+    --xh-_bg: transparent;
+    --xh-_bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_bg-active: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-active));
+    --xh-_fg: var(--xh-_tone-fg, var(--xh-fg-default));
+
+    border-color: var(--xh-_tone-border, var(--xh-border-default));
+  }
+
+  [data-scope='button'][data-part='root'][data-variant='ghost'] {
+    --xh-_bg: transparent;
+    --xh-_bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_bg-active: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-active));
+    --xh-_fg: var(--xh-_tone-fg, var(--xh-fg-default));
+  }
+
+  /* —— 尺寸 —— */
+  [data-scope='button'][data-part='root'][data-size='sm'] {
+    block-size: var(--xh-control-h-sm);
+    padding-inline: var(--xh-control-px-sm);
+    font-size: var(--xh-font-size-sm);
+  }
+
+  [data-scope='button'][data-part='root'][data-size='lg'] {
+    block-size: var(--xh-control-h-lg);
+    padding-inline: var(--xh-control-px-lg);
+    font-size: var(--xh-font-size-lg);
+  }
+
+  [data-scope='button'][data-part='indicator'] {
+    display: inline-flex;
+    animation: xh-spin 0.6s linear infinite;
+  }
+}

package/css/calendar.css

@@ -0,0 +1,219 @@
+@layer xihan.components {
+  [data-scope='calendar'][data-part='root'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-calendar-gap, var(--xh-space-3));
+    /* 数字等宽：1 与 7 的字形宽度在比例字体里并不相同，不定住会让整张网格随月份抖动 */
+    font-variant-numeric: tabular-nums;
+  }
+
+  [data-scope='calendar'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='calendar'][data-part='header'] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--xh-calendar-header-gap, var(--xh-space-2));
+  }
+
+  [data-scope='calendar'][data-part='header'][hidden] {
+    display: none;
+  }
+
+  [data-scope='calendar'][data-part='heading'] {
+    flex: 1;
+    text-align: center;
+    color: var(--xh-calendar-heading-fg, var(--xh-fg-default));
+    font-size: var(--xh-calendar-heading-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-calendar-heading-font-weight, var(--xh-font-weight-semibold));
+    line-height: var(--xh-leading-none);
+    user-select: none;
+  }
+
+  [data-scope='calendar'][data-part='prev-trigger'],
+  [data-scope='calendar'][data-part='next-trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-calendar-nav-size, var(--xh-control-h-sm));
+    block-size: var(--xh-calendar-nav-size, var(--xh-control-h-sm));
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-calendar-nav-radius, var(--xh-shape-control));
+    background: var(--xh-calendar-nav-bg, transparent);
+    color: var(--xh-calendar-nav-fg, var(--xh-fg-muted));
+    cursor: pointer;
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='calendar'][data-part='prev-trigger'][hidden],
+  [data-scope='calendar'][data-part='next-trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='calendar'][data-part='prev-trigger']:hover:not(:disabled),
+  [data-scope='calendar'][data-part='next-trigger']:hover:not(:disabled) {
+    background: var(--xh-calendar-nav-bg-hover, var(--xh-bg-subtle-hover));
+    color: var(--xh-fg-default);
+  }
+
+  /* 翻月是单体控件，禁用走原生 :disabled（连接层输出的正是原生 disabled） */
+  [data-scope='calendar'][data-part='prev-trigger']:disabled,
+  [data-scope='calendar'][data-part='next-trigger']:disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='calendar'][data-part='prev-trigger']:focus-visible,
+  [data-scope='calendar'][data-part='next-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='calendar'][data-part='grid'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-calendar-grid-gap, var(--xh-space-1));
+  }
+
+  [data-scope='calendar'][data-part='grid'][hidden] {
+    display: none;
+  }
+
+  /* 网格自己不落焦（焦点永远在某一格上），这里不画环 */
+  [data-scope='calendar'][data-part='grid']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='calendar'][data-part='grid-head'],
+  [data-scope='calendar'][data-part='grid-body'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-calendar-row-gap, var(--xh-space-0));
+  }
+
+  [data-scope='calendar'][data-part='grid-head'][hidden],
+  [data-scope='calendar'][data-part='grid-body'][hidden] {
+    display: none;
+  }
+
+  /* 七等分：表头行与日期行共用同一条轨道定义，列才对得齐 */
+  [data-scope='calendar'][data-part='week-row'] {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+
+  [data-scope='calendar'][data-part='week-row'][hidden] {
+    display: none;
+  }
+
+  [data-scope='calendar'][data-part='week-day'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-calendar-week-day-h, var(--xh-control-h-sm));
+    color: var(--xh-calendar-week-day-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-calendar-week-day-font-size, var(--xh-font-size-xs));
+    font-weight: var(--xh-calendar-week-day-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-none);
+    user-select: none;
+  }
+
+  [data-scope='calendar'][data-part='week-day'][hidden] {
+    display: none;
+  }
+
+  /* 格子是区间底色的画布：连续背景铺在这一层，圆角的选中片留给 trigger。
+     铺在 trigger 上会被格间空隙切断，区间看起来就是一串断开的圆点 */
+  [data-scope='calendar'][data-part='cell'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--xh-calendar-cell-gap, 2px);
+  }
+
+  [data-scope='calendar'][data-part='cell'][hidden] {
+    display: none;
+  }
+
+  [data-scope='calendar'][data-part='cell'][data-in-range] {
+    background: var(--xh-calendar-range-bg, var(--xh-bg-brand-subtle));
+  }
+
+  /* 区间两端各自收圆：中间那些格子保持直角，底色才连成一条 */
+  [data-scope='calendar'][data-part='cell'][data-range-start] {
+    border-start-start-radius: var(--xh-calendar-cell-radius, var(--xh-shape-pill));
+    border-end-start-radius: var(--xh-calendar-cell-radius, var(--xh-shape-pill));
+  }
+
+  [data-scope='calendar'][data-part='cell'][data-range-end] {
+    border-start-end-radius: var(--xh-calendar-cell-radius, var(--xh-shape-pill));
+    border-end-end-radius: var(--xh-calendar-cell-radius, var(--xh-shape-pill));
+  }
+
+  [data-scope='calendar'][data-part='cell-trigger'] {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    /* 正方格：宽度由 week-row 的等分轨道给，高度跟着走，日历才不会被长月份拉扁 */
+    aspect-ratio: 1;
+    min-inline-size: var(--xh-calendar-cell-size, var(--xh-control-h-sm));
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-calendar-cell-radius, var(--xh-shape-pill));
+    color: var(--xh-calendar-cell-fg, var(--xh-fg-default));
+    font-size: var(--xh-calendar-cell-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='calendar'][data-part='cell-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 邻月的日子照样可点，只是压暗——它们不是占位符 */
+  [data-scope='calendar'][data-part='cell-trigger'][data-outside-month] {
+    color: var(--xh-calendar-cell-fg-outside, var(--xh-fg-subtle));
+  }
+
+  [data-scope='calendar'][data-part='cell-trigger']:not([data-disabled]):not([data-selected]):hover {
+    background: var(--xh-calendar-cell-bg-hover, var(--xh-bg-subtle-hover));
+  }
+
+  /* 今天：只描一圈边，不占用选中色——今天与被选中是两件事，得能同时看得出来 */
+  [data-scope='calendar'][data-part='cell-trigger'][data-today] {
+    border-color: var(--xh-calendar-today-border, var(--xh-border-strong));
+  }
+
+  [data-scope='calendar'][data-part='cell-trigger'][data-selected] {
+    border-color: transparent;
+    background: var(--xh-calendar-cell-bg-selected, var(--xh-bg-brand));
+    color: var(--xh-calendar-cell-fg-selected, var(--xh-fg-on-brand));
+    font-weight: var(--xh-font-weight-medium);
+  }
+
+  /* 不可用走 aria-disabled 而非原生 disabled：格子仍要可聚焦（它还得当方向键的起点），
+     所以只能靠 data-disabled 表达，写 :disabled 永远不命中 */
+  [data-scope='calendar'][data-part='cell-trigger'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='calendar'][data-part='cell-trigger'][data-disabled][data-selected] {
+    background: var(--xh-bg-muted);
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 焦点环画在格子上：整张网格只有一格在 Tab 序列里，落焦点必须一眼看得见。
+     往内收一像素，免得被相邻格子的底色盖住 */
+  [data-scope='calendar'][data-part='cell-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+}