@xihan-ui/styles 1.0.0 → 2.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xihan-ui/styles",
   "type": "module",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "XiHan.UI styled layer — pure CSS skins driven by data-attributes and design tokens.",
   "author": {
     "name": "XiHanFun",
@@ -29,74 +29,99 @@
   ],
   "exports": {
     ".": "./index.css",
+    "./component-tokens": {
+      "types": "./component-tokens.d.ts",
+      "import": "./component-tokens.js"
+    },
+    "./action-control.css": "./family/action-control.css",
+    "./collection-item.css": "./family/collection-item.css",
+    "./field-chrome.css": "./family/field-chrome.css",
+    "./motion.css": "./family/motion.css",
+    "./swatch.css": "./family/swatch.css",
+    "./components.tokens.json": "./components.tokens.json",
     "./accordion.css": "./css/accordion.css",
     "./affix.css": "./css/affix.css",
     "./alert.css": "./css/alert.css",
     "./anchor.css": "./css/anchor.css",
     "./avatar-group.css": "./css/avatar-group.css",
+    "./approval.css": "./css/approval.css",
     "./avatar.css": "./css/avatar.css",
     "./back-top.css": "./css/back-top.css",
     "./badge.css": "./css/badge.css",
+    "./bar-code.css": "./css/bar-code.css",
     "./breadcrumb.css": "./css/breadcrumb.css",
     "./button-group.css": "./css/button-group.css",
     "./button.css": "./css/button.css",
-    "./calendar.css": "./css/calendar.css",
+    "./calendar-picker.css": "./css/calendar-picker.css",
+    "./calendar-range-picker.css": "./css/calendar-range-picker.css",
     "./card.css": "./css/card.css",
     "./carousel.css": "./css/carousel.css",
     "./cascader.css": "./css/cascader.css",
     "./checkbox-group.css": "./css/checkbox-group.css",
     "./checkbox.css": "./css/checkbox.css",
     "./clipboard.css": "./css/clipboard.css",
-    "./code-block.css": "./css/code-block.css",
+    "./code-view.css": "./css/code-view.css",
     "./collapsible.css": "./css/collapsible.css",
+    "./color-field.css": "./css/color-field.css",
     "./color-picker.css": "./css/color-picker.css",
+    "./color-slider.css": "./css/color-slider.css",
+    "./color-swatch.css": "./css/color-swatch.css",
+    "./color-swatch-picker.css": "./css/color-swatch-picker.css",
     "./combobox.css": "./css/combobox.css",
-    "./composer.css": "./css/composer.css",
+    "./command.css": "./css/command.css",
     "./context-menu.css": "./css/context-menu.css",
-    "./countdown.css": "./css/countdown.css",
     "./date-field.css": "./css/date-field.css",
     "./date-picker.css": "./css/date-picker.css",
+    "./date-range-picker.css": "./css/date-range-picker.css",
+    "./description.css": "./css/description.css",
     "./descriptions.css": "./css/descriptions.css",
     "./dialog.css": "./css/dialog.css",
+    "./diff-view.css": "./css/diff-view.css",
     "./download-trigger.css": "./css/download-trigger.css",
     "./drawer.css": "./css/drawer.css",
-    "./dynamic-input.css": "./css/dynamic-input.css",
     "./editable.css": "./css/editable.css",
-    "./ellipsis.css": "./css/ellipsis.css",
     "./empty-state.css": "./css/empty-state.css",
+    "./field-array.css": "./css/field-array.css",
     "./field.css": "./css/field.css",
     "./fieldset.css": "./css/fieldset.css",
     "./file-upload.css": "./css/file-upload.css",
     "./flex.css": "./css/flex.css",
     "./float-button.css": "./css/float-button.css",
+    "./focus.css": "./css/focus.css",
     "./floating-panel.css": "./css/floating-panel.css",
+    "./forced-colors.css": "./css/forced-colors.css",
     "./form.css": "./css/form.css",
     "./gradient-text.css": "./css/gradient-text.css",
     "./grid.css": "./css/grid.css",
     "./heatmap.css": "./css/heatmap.css",
     "./highlight.css": "./css/highlight.css",
-    "./hotkeys.css": "./css/hotkeys.css",
     "./hover-card.css": "./css/hover-card.css",
     "./icon-wrapper.css": "./css/icon-wrapper.css",
     "./icon.css": "./css/icon.css",
+    "./kbd.css": "./css/kbd.css",
     "./image-cropper.css": "./css/image-cropper.css",
     "./image-viewer.css": "./css/image-viewer.css",
     "./image.css": "./css/image.css",
     "./index.css": "./index.css",
     "./index.unlayered.css": "./index.unlayered.css",
     "./infinite-scroll.css": "./css/infinite-scroll.css",
+    "./input-group.css": "./css/input-group.css",
     "./json-viewer.css": "./css/json-viewer.css",
+    "./label.css": "./css/label.css",
     "./layers.css": "./css/layers.css",
     "./layout.css": "./css/layout.css",
     "./list.css": "./css/list.css",
     "./listbox.css": "./css/listbox.css",
     "./loading-bar.css": "./css/loading-bar.css",
     "./log.css": "./css/log.css",
+    "./markdown-stream.css": "./css/markdown-stream.css",
     "./marquee.css": "./css/marquee.css",
     "./masonry.css": "./css/masonry.css",
+    "./matrix-code.css": "./css/matrix-code.css",
     "./mention.css": "./css/mention.css",
     "./menu.css": "./css/menu.css",
     "./menubar.css": "./css/menubar.css",
+    "./message-feed.css": "./css/message-feed.css",
     "./navigation-menu.css": "./css/navigation-menu.css",
     "./notification.css": "./css/notification.css",
     "./number-animation.css": "./css/number-animation.css",
@@ -106,15 +131,17 @@
     "./pagination.css": "./css/pagination.css",
     "./password-input.css": "./css/password-input.css",
     "./pin-input.css": "./css/pin-input.css",
+    "./pointer.css": "./css/pointer.css",
     "./popconfirm.css": "./css/popconfirm.css",
     "./popover.css": "./css/popover.css",
-    "./popselect.css": "./css/popselect.css",
     "./progress.css": "./css/progress.css",
-    "./qr-code.css": "./css/qr-code.css",
+    "./prompt-input.css": "./css/prompt-input.css",
+    "./question-flow.css": "./css/question-flow.css",
     "./radio-group.css": "./css/radio-group.css",
     "./rating.css": "./css/rating.css",
     "./reset.css": "./css/reset.css",
-    "./result.css": "./css/result.css",
+    "./reasoning.css": "./css/reasoning.css",
+    "./resizable.css": "./css/resizable.css",
     "./scroll-area.css": "./css/scroll-area.css",
     "./scrollbar.css": "./css/scrollbar.css",
     "./segmented.css": "./css/segmented.css",
@@ -124,33 +151,36 @@
     "./signature-pad.css": "./css/signature-pad.css",
     "./skeleton.css": "./css/skeleton.css",
     "./slider.css": "./css/slider.css",
-    "./space.css": "./css/space.css",
     "./spinner.css": "./css/spinner.css",
+    "./sortable.css": "./css/sortable.css",
     "./splitter.css": "./css/splitter.css",
     "./statistic.css": "./css/statistic.css",
     "./steps.css": "./css/steps.css",
     "./switch.css": "./css/switch.css",
     "./table.css": "./css/table.css",
     "./tabs.css": "./css/tabs.css",
+    "./tag-group.css": "./css/tag-group.css",
     "./tag.css": "./css/tag.css",
     "./tags-input.css": "./css/tags-input.css",
     "./text-field.css": "./css/text-field.css",
-    "./thread.css": "./css/thread.css",
     "./time-field.css": "./css/time-field.css",
     "./time-picker.css": "./css/time-picker.css",
-    "./time.css": "./css/time.css",
+    "./time-range-picker.css": "./css/time-range-picker.css",
     "./timeline.css": "./css/timeline.css",
     "./timer.css": "./css/timer.css",
+    "./timestamp.css": "./css/timestamp.css",
     "./toast.css": "./css/toast.css",
     "./toggle-group.css": "./css/toggle-group.css",
     "./toggle.css": "./css/toggle.css",
     "./tone.css": "./css/tone.css",
+    "./tool-call.css": "./css/tool-call.css",
     "./toolbar.css": "./css/toolbar.css",
     "./tooltip.css": "./css/tooltip.css",
     "./tour.css": "./css/tour.css",
     "./transfer.css": "./css/transfer.css",
     "./tree-select.css": "./css/tree-select.css",
     "./tree.css": "./css/tree.css",
+    "./truncate.css": "./css/truncate.css",
     "./typography.css": "./css/typography.css",
     "./undefined.css": "./css/undefined.css",
     "./virtualizer.css": "./css/virtualizer.css",
@@ -159,7 +189,11 @@
   },
   "files": [
     "CHANGELOG.md",
+    "component-tokens.d.ts",
+    "component-tokens.js",
+    "components.tokens.json",
     "css",
+    "family",
     "index.css",
     "index.unlayered.css"
   ],
@@ -171,10 +205,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@xihan-ui/tokens": "^1.0.0"
+    "@xihan-ui/tokens": "^2.0.0"
   },
   "scripts": {
-    "gen": "node build/emit-unlayered.mjs",
-    "build": "node build/emit-unlayered.mjs"
+    "gen": "node build/action-control-recipe.mjs && node build/field-chrome-recipe.mjs && node build/collection-item-recipe.mjs && node build/swatch-recipe.mjs && node build/emit-component-tokens.mjs && node build/emit-entries.mjs",
+    "build": "node build/action-control-recipe.mjs && node build/field-chrome-recipe.mjs && node build/collection-item-recipe.mjs && node build/swatch-recipe.mjs && node build/emit-component-tokens.mjs && node build/emit-entries.mjs"
   }
 }

package/css/calendar.css

@@ -1,367 +0,0 @@
-@layer xihan.components {
-  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
-  [data-scope='calendar'] {
-    --xh-calendar-skin: 1;
-  }
-
-  [data-scope='calendar'][data-part='root'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-calendar-icon-size, var(--xh-glyph-size-text));
-
-    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='heading-year-trigger']:not([hidden]),
-  [data-scope='calendar'][data-part='heading-month-trigger']:not([hidden]) {
-    display: inline-flex;
-    align-items: center;
-    padding-inline: var(--xh-calendar-heading-trigger-px, var(--xh-space-1));
-    border: var(--xh-stroke-thin) solid transparent;
-    border-radius: var(--xh-calendar-heading-trigger-radius, var(--xh-shape-control));
-    background: transparent;
-    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);
-    cursor: pointer;
-    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
-  }
-
-  [data-scope='calendar'][data-part='heading-year-trigger'][hidden],
-  [data-scope='calendar'][data-part='heading-month-trigger'][hidden] {
-    display: none;
-  }
-
-  [data-scope='calendar'][data-part='heading-year-trigger']:hover:not(:disabled),
-  [data-scope='calendar'][data-part='heading-month-trigger']:hover:not(:disabled) {
-    color: var(--xh-calendar-heading-trigger-fg-hover, var(--xh-fg-brand));
-  }
-
-  /* 到顶那一层（年视图的年那一截）只作标题显示：不再是可点的东西，光标也别装成能点 */
-  [data-scope='calendar'][data-part='heading-year-trigger']:disabled,
-  [data-scope='calendar'][data-part='heading-month-trigger']:disabled {
-    cursor: default;
-  }
-
-  [data-scope='calendar'][data-part='heading-year-trigger']:focus-visible,
-  [data-scope='calendar'][data-part='heading-month-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  [data-scope='calendar'][data-part='prev-year-trigger'],
-  [data-scope='calendar'][data-part='prev-trigger'],
-  [data-scope='calendar'][data-part='next-year-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-year-trigger'][hidden],
-  [data-scope='calendar'][data-part='prev-trigger'][hidden],
-  [data-scope='calendar'][data-part='next-year-trigger'][hidden],
-  [data-scope='calendar'][data-part='next-trigger'][hidden] {
-    display: none;
-  }
-
-  [data-scope='calendar'][data-part='prev-year-trigger']:hover:not(:disabled),
-  [data-scope='calendar'][data-part='prev-trigger']:hover:not(:disabled),
-  [data-scope='calendar'][data-part='next-year-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-year-trigger']:disabled,
-  [data-scope='calendar'][data-part='prev-trigger']:disabled,
-  [data-scope='calendar'][data-part='next-year-trigger']:disabled,
-  [data-scope='calendar'][data-part='next-trigger']:disabled {
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
-  }
-
-  [data-scope='calendar'][data-part='prev-year-trigger']:focus-visible,
-  [data-scope='calendar'][data-part='prev-trigger']:focus-visible,
-  [data-scope='calendar'][data-part='next-year-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));
-  }
-
-  /* 粗粒度视图：格子直接铺进网格，不再有周行那一层。
-     月 3 列 × 4 行、季度 4 列一行、年 3 列——与常见日期控件同一套排布 */
-  [data-scope='calendar'][data-part='grid'][data-view='month'],
-  [data-scope='calendar'][data-part='grid'][data-view='year'] {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: var(--xh-calendar-period-gap, var(--xh-space-1));
-  }
-
-  [data-scope='calendar'][data-part='grid'][data-view='quarter'] {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: var(--xh-calendar-period-gap, var(--xh-space-1));
-  }
-
-  /* 粗粒度的格子比日子宽，文字居中、留出上下气口 */
-  [data-scope='calendar'][data-part='grid']:is([data-view='month'], [data-view='quarter'], [data-view='year']) [data-part='cell-trigger'] {
-    padding-block: var(--xh-calendar-period-py, var(--xh-space-2));
-    inline-size: 100%;
-  }
-
-  [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));
-  }
-
-  /* 摆了周序号格的行多让出行首一列。写 :not([hidden]) 而不是靠顺序压过下面那条兜底——
-     同特指度的规则谁在后面谁赢,收起态会被这条 display 掀开 */
-  [data-scope='calendar'][data-part='week-row']:not([hidden]):has(> [data-part='week-number']) {
-    display: grid;
-    grid-template-columns: var(--xh-calendar-week-number-w, 2.25rem) repeat(7, minmax(0, 1fr));
-  }
-
-  /* 周序号只是行的标号:比日子小一号、颜色压下去,不跟着选中态走 */
-  [data-scope='calendar'][data-part='week-number'] {
-    display: grid;
-    place-items: center;
-    color: var(--xh-calendar-week-number-fg, var(--xh-fg-subtle));
-    font-size: var(--xh-calendar-week-number-font-size, var(--xh-text-caption-size));
-    font-variant-numeric: tabular-nums;
-    user-select: none;
-  }
-
-  [data-scope='calendar'][data-part='week-number'][hidden] {
-    display: none;
-  }
-  [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-text-caption-size));
-    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;
-  }
-
-  /* 格子是区间底色的画布：底色由格子的 ::before 铺出来，圆角的选中片留给 trigger。
-     铺在 trigger 上会被格间空隙切断，区间看起来就是一串断开的圆点 */
-  [data-scope='calendar'][data-part='cell'] {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--xh-calendar-cell-gap, var(--xh-space-0_5));
-  }
-
-  [data-scope='calendar'][data-part='cell'][hidden] {
-    display: none;
-  }
-
-  /* 区间底色：横向铺满格子，相邻两格接成一条；纵向收在格子内衬里，行与行之间留出空当 */
-  [data-scope='calendar'][data-part='cell'][data-in-range]::before {
-    content: '';
-    position: absolute;
-    inset-block: var(--xh-calendar-cell-gap, var(--xh-space-0_5));
-    inset-inline: 0;
-    background: var(--xh-calendar-range-bg, var(--xh-bg-brand-subtle));
-  }
-
-  /* 两端那一格只铺半格，另外半格由选中片占满：区间收在圆点上而不是收在格子边上。
-     起止落在同一格时两条一起生效，底色宽度归零，只剩那枚圆点 */
-  [data-scope='calendar'][data-part='cell'][data-in-range][data-range-start]::before {
-    inset-inline-start: 50%;
-  }
-
-  [data-scope='calendar'][data-part='cell'][data-in-range][data-range-end]::before {
-    inset-inline-end: 50%;
-  }
-
-  /* 行首与行尾收圆：区间跨周时每一行各是一条两头圆的横杠。
-     摆了周序号格的行里，行首那一格排在它后面 */
-  [data-scope='calendar'][data-part='week-row'] > [data-part='cell'][data-in-range]:first-child::before,
-  [data-scope='calendar'][data-part='week-row'] > [data-part='week-number'] + [data-part='cell'][data-in-range]::before {
-    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='week-row'] > [data-part='cell'][data-in-range]:last-child::before {
-    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='grid']:is([data-view='month'], [data-view='quarter'], [data-view='year']) > [data-part='cell'][data-in-range]::before {
-    border-radius: var(--xh-calendar-cell-radius, var(--xh-shape-pill));
-  }
-
-  [data-scope='calendar'][data-part='cell-trigger'] {
-    /* 区间底色是格子上绝对定位的伪元素，选中片得定位才排在它之后 */
-    position: relative;
-    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-control));
-  }
-
-  [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));
-  }
-
-  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
-  [data-scope='calendar'][data-part='prev-trigger']:empty::before {
-    content: '';
-    display: inline-block;
-    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    vertical-align: var(--xh-glyph-baseline-shift);
-    background-color: currentColor;
-    -webkit-mask: var(--xh-glyph-mark-chevron-left) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-chevron-left) center / contain no-repeat;
-  }
-
-  [data-scope='calendar'][data-part='next-trigger']:empty::before {
-    content: '';
-    display: inline-block;
-    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    vertical-align: var(--xh-glyph-baseline-shift);
-    background-color: currentColor;
-    -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
-  }
-}

package/css/code-block.css

@@ -1,91 +0,0 @@
-@layer xihan.components {
-  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
-  [data-scope='code-block'] {
-    --xh-code-block-skin: 1;
-  }
-
-  /* overflow: hidden 让内部 <pre> 的滚动内容沿圆角收边；不设 display，排布由作者决定 */
-  [data-scope='code-block'][data-part='root'] {
-    overflow: hidden;
-    border-radius: var(--xh-code-block-radius, var(--xh-shape-surface));
-    background: var(--xh-code-block-bg, var(--xh-bg-subtle));
-  }
-
-  /* 显式 block 使作者用 <span> 时也能吃进 padding-block；user-select: none 让它不被框选带走 */
-  [data-scope='code-block'][data-part='lang-label'] {
-    display: block;
-    padding-inline: var(--xh-code-block-label-px, var(--xh-space-3));
-    padding-block: var(--xh-code-block-label-py, var(--xh-space-1));
-    color: var(--xh-code-block-label-fg, var(--xh-fg-muted));
-    font-size: var(--xh-code-block-label-font-size, var(--xh-text-label-size));
-    line-height: var(--xh-leading-none);
-    user-select: none;
-  }
-
-  /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
-  [data-scope='code-block'][data-part='lang-label'][hidden] {
-    display: none;
-  }
-
-  /* margin: 0 去掉 UA 给 <pre> 的默认外边距。
-     --xh-code-block-line-height 的兜底值须与连接层内联 min-block-size 用的一致，
-     且因参与 calc 乘法必须是长度而非无单位倍数。 */
-  [data-scope='code-block'][data-part='pre'] {
-    /* 逻辑属性 overflow-inline 尚无可用实现，写物理轴 */
-    overflow-x: auto;
-    padding: var(--xh-code-block-p, var(--xh-space-3));
-    margin: 0;
-    line-height: var(--xh-code-block-line-height, 1.5rem);
-  }
-
-  /* <pre> 带 tabindex=0，需要焦点环；偏移取负画在内侧，避免被 root 的 overflow: hidden 裁掉 */
-  [data-scope='code-block'][data-part='pre']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(-1 * var(--xh-ring-width));
-  }
-
-  /* white-space: pre 保留缩进不自动换行，长行改为横向滚动 */
-  [data-scope='code-block'][data-part='code'] {
-    font-family: var(--xh-code-block-font, var(--xh-font-family-mono));
-    white-space: pre;
-  }
-
-  /* 开了换行：pre-wrap 仍保留缩进与连续空白，只是允许行尾折下来；
-     anywhere 让没有空格的长串（url、base64）也能断，否则照样撑出横向滚动 */
-  [data-scope='code-block'][data-part='code'][data-wrap] {
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-  }
-
-  /* 语法配色：注释与标点复用既有语义色，三种真需要色相的走 --xh-syntax-* 语法令牌（随主题明暗切换）。 */
-  [data-scope='code-block'][data-part='root'] {
-    --xh-code-block-comment-fg: var(--xh-fg-muted);
-    --xh-code-block-punctuation-fg: var(--xh-fg-subtle);
-    --xh-code-block-string-fg: var(--xh-syntax-string);
-    --xh-code-block-number-fg: var(--xh-syntax-number);
-    --xh-code-block-keyword-fg: var(--xh-syntax-keyword);
-  }
-
-  /* 记号本身不带任何布局，只上色：它是 <code> 里的行内片段，多一点盒模型都会破坏对齐 */
-  [data-scope='code-block'][data-part='token'][data-kind='comment'] {
-    color: var(--xh-code-block-comment-fg);
-    font-style: italic;
-  }
-
-  [data-scope='code-block'][data-part='token'][data-kind='string'] {
-    color: var(--xh-code-block-string-fg);
-  }
-
-  [data-scope='code-block'][data-part='token'][data-kind='number'] {
-    color: var(--xh-code-block-number-fg);
-  }
-
-  [data-scope='code-block'][data-part='token'][data-kind='keyword'] {
-    color: var(--xh-code-block-keyword-fg);
-    font-weight: var(--xh-code-block-keyword-weight, var(--xh-font-weight-semibold));
-  }
-
-  [data-scope='code-block'][data-part='token'][data-kind='punctuation'] {
-    color: var(--xh-code-block-punctuation-fg);
-  }
-}