@xihan-ui/styles 3.0.0 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @xihan-ui/styles
 
+## 3.2.0
+
+### Minor Changes
+
+- 0d4e616: Carousel 分页点新增组件槽 `--xh-carousel-indicator-thickness`：垂直于轨道的粗细单独可调（横轨管高、纵轨管宽），缺省与 `--xh-carousel-indicator-size` 同值，现有圆点与胶囊不变。此前分页点的宽高共用一个长度槽，只画得出圆点与拉长的胶囊，想要细横条只能覆盖指示点盒子本身的尺寸与底色，粗指针下盒子撑成 44px 命中区、点改由伪元素画，覆盖的底色就把整块命中区涂满。现在粗细调小即成细横条（圆角另把 `--xh-carousel-indicator-radius` 换成 `var(--xh-shape-pill)`）：细指针的命中区垂直于轨道多外扩一些、不低于 24px，粗指针下伪元素画的点与自动播放进度条同样按粗细画，44px 命中区不变。
+- 8b8d520: 浮在内容之上的圆钮（Action Control `floating` 档）整体下移一档：sm / md / lg 由 40 / 48 / 56px 改为 32 / 40 / 48px（compact 28 / 36 / 44px），图标 16 / 20 / 24px，缺省 md 即 40px。48px 的钮在矮视口与小卡片里会叠住内容与彼此（走马灯的翻页钮与播放钮、纵向轨道压住正文）。
+
+  视觉默认变化：BackTop、FloatButton（含展开列表里的动作项）缺省由 48px 变为 40px，`size="lg"` 由 56px 变为 48px；ImageViewer 翻页钮由 48px 变为 40px、关闭钮由 40px 变为 32px；Carousel 翻页与播放钮为 40px。Log / MessageFeed 的回到底部钮缺省仍是 32px。
+
+  新增尺寸档：
+
+  - Carousel 新增 `size`（sm / md / lg，缺省 md），翻页、播放三颗钮同档。
+  - ImageViewer 新增 `size`（sm / md / lg，缺省 md），翻页钮同档，关闭钮比它低一档、最低 sm。
+  - Log、MessageFeed 的回到底部钮随组件已有的 `size` 换档：比组件低一档、最低 sm（sm / md 时 32px，lg 时 40px）。
+
+  新增的 `size` 与其他组件一样接全局配置，没写时取全局尺寸。
+
+- 831acc9: 每个角色节点另带皮肤挂载类 `xh-scope-<组件名>`，与 `data-scope` 一一对应（`data-scope="dialog"` 的节点带 `xh-scope-dialog`）。解剖产出的 attrs 多一项 `class`，Vue 与作者的 class 合并、React 落成 `className` 并与作者的拼接、Web Components 按词增删不覆盖作者写的类；asChild 把部件属性合进自带解剖的子节点时，挂载类随 `data-scope` 一起让位，一个节点不会同时吃两个组件的皮肤。core 新增导出 `SCOPE_CLASS_PREFIX`、`scopeClass()` 与 `stripScopeClass()`。
+
+  挂载类是皮肤产物改以类名领头的前提：浏览器按类名给规则分桶，属性选择器只按属性名分桶，几千条以 `[data-scope=…]` 领头的皮肤规则挤在同一个桶里，每个组件节点每次样式重算都要逐条试一遍。`data-scope` / `data-part` 仍是公开的样式契约，作者的覆盖写法不变。节点的 class 属性因此多了一个词：对 DOM 做快照或精确比对 `className` 的测试需要随之更新。只用 `@xihan-ui/styles`、自己书写标记的页面，要给每个带 `data-scope="x"` 的节点补上 `class="xh-scope-x"`，否则皮肤不命中。
+
+### Patch Changes
+
+- fca75b0: 皮肤里挂在运行期状态后面的后代与兄弟规则，主体都带上了组件特征。浏览器按属性名 / 伪类全局登记「某个属性一变要重算哪些节点」，不看取值也不看同一节里的组件限定：主体只靠 `[data-part]`（或 `> *` 这类没有特征的主体）时，页面上任何元素翻转 `data-state`、`data-current`、`data-disabled`、`data-instant` 等，都会把它整棵子树一起标脏。3500 个组件节点的容器上翻一次 `data-state` 由 150ms 降到 4ms，`data-current` 152ms → 2ms，`data-disabled` 155ms → 8ms，`data-instant` 80ms → 11ms。
+
+  本组件的部件补 `:where([data-scope='x'])`（产物里成为 `:where(.xh-scope-x)`，不加特异性，层叠不变）；作者放进来的任意子节点（按钮加载环与色板徽标里的图形、组合框展开钮的箭头、日期输入的段位、浮动按钮的动作项）改为由父节点写私有槽、子节点只读槽。浮动按钮动作项的冒出与缩回交错改由名次与收起标记算出，收起时的指针关闭挪到 list 上继承。
+
+  - @xihan-ui/tokens@3.2.0
+
+## 3.1.0
+
+### Minor Changes
+
+- b96f8ac: ColorPicker 的值改为恒为颜色串数组，并支持多选。
+
+  - **破坏**：`onValueChange` / `value-change` 的 `value`、Vue `update:value`、`api.value` 由字符串改为 `string[]`：单选恒为一项；`setValue` 接收数组。宿主写入的 `value` / `defaultValue` 仍可写裸串，按一项处理。工作色（触发钮色块与值文字显示的那个）改由新增的 `api.color` 读出。迁移：读值处取 `value[0]`，写值处包一层数组。
+  - 新增 `selectionMode="multiple"`：浮层里调出的工作色是草稿，按新部件 `confirm-trigger`（`XhColorPickerConfirmTrigger`，文字由作者写）收进值，浮层不收；预设色板点一下切换选中；`maxSelected` 限制个数；同一个颜色按颜色比较只收一份。
+  - 多选的选中值在输入行里排成标签：新增 `tag-list` 部件与 `XhColorPickerTagList` / `XhColorPickerTag` / `XhColorPickerTagLabel` / `XhColorPickerOverflowTag` / `XhColorPickerItemDeleteTrigger`，与 Select 多选同一套库内标签，每枚前一个该颜色的色点；值文字收起，触发钮只留色块并成为键盘入口（退格摘掉最后一个）；标签不截短、放不下折行，超过 `maxTagCount`（默认 3）折进 +N；`translations` 新增 `deleteItem` / `overflowTag`；表单一个选中值一份同名隐藏输入。
+
+- 570af4d: DatePicker 多选（`selectionMode="multiple"`）的选中值在输入行里排成标签：新增 `tag-list` 部件与 `XhDatePickerTagList` / `XhDatePickerTag` / `XhDatePickerTagLabel` / `XhDatePickerOverflowTag` / `XhDatePickerItemDeleteTrigger`（Vue / React 的标签行不写子节点即按 `tags` 铺好；Web Components 按 `tags` 渲染 `tag` 节点），与 Select 多选同一套库内标签。段位在多选时收起，日历钮常驻并成为键盘入口：退格摘掉最后一个、点标签上的叉摘掉那一个；超过新增的 `maxTagCount`（默认 3）的折进 +N，`translations` 新增 `deleteItem` / `overflowTag`；没有选中时整条 `placeholder` 落在标签行上；表单一个选中值一份同名隐藏输入（`field.getHiddenInputProps({ value })`）。此前多选时输入行只显示、只编辑第一个日期，隐藏输入也只提交第一个。
+- 9ba6c54: DateField / DatePicker 的 `placeholder` 接受字符串：一段都没填、焦点也不在段上时，输入行显示这句整条占位（「请选择生效时间」），段位与分隔符淡出让位，焦点一进到段上就换回 yyyy / mm / dd 段位；给对象仍是逐段的占位串。DatePicker 此前不转发 `placeholder`，现在两种写法都转给内嵌的分段输入。DateRangePicker 新增 `startPlaceholder` / `endPlaceholder`（两组各自的整条占位）与两端共用的逐段 `placeholder`。整条占位以段位组上的 `data-placeholder-shown` 与 `data-placeholder-text` 表出，由皮肤用生成内容画，前景走新增的 `--xh-date-picker-placeholder-fg` / `--xh-date-range-picker-placeholder-fg`（DateField 沿用 `--xh-date-field-placeholder-fg`）；headless 新导出类型 `DateSegmentPlaceholders`。
+- 50c535f: 字段族控件（文本框、下拉、组合框、级联、树选择、数字、日期 / 时间族、标签输入等 21 份皮肤）放进表单字段（Field）即铺满字段宽：Field 根上把 `--xh-control-w` 设为 `100%`，控件随表单的列走，不必再按组件种类逐个写 `inline-size: 100%`，新加一种控件也不会宽窄不一。单独摆放的控件仍是 16rem 缺省宽；单类槽 `--xh-<组件>-control-w` 照旧压过字段给的宽；横排一行流（`layout="inline"`）的表单里字段按内容收，那一档的字段仍取表单根上的缺省宽。
+- df5d988: FloatButton 支持拖动与贴边：`draggable`（Web Components 为 `button-draggable`，避开 HTML 全局属性 `draggable`）打开后可按住触发器拖到别处，移动过激活距离才跟手，起拖时展开的动作组先收起、拖完补派的点击不开合；松手按 `snap` 贴边（`inline` 缺省贴左右两边里近的那条、`block` 贴上下、`nearest` 贴四边里最近的、`none` 停在放手处），甩一下贴到甩去的那一边，弹簧带着松手速度落定。新增 `position` / `defaultPosition` / `onPositionChange`（Vue `v-model:position`、Web Components `position-change` 事件）：贴边位置写 `{ edge, ratio }`，按比例记、换个视口尺寸照样贴在同一侧，停在一点写像素坐标 `{ x, y }`；不给时仍停在 `placement` 那一角。展开组恒朝页面中间长。
+- f04c49e: Notification 的正文（`item-description`）有了上限：缺省取中档滚动面高 `--xh-viewport-h-md`（16rem），长文在正文里竖滚、滚到头不带动页面，标题与操作钮留在卡片上；新增覆盖槽 `--xh-notification-description-max-h` 调这条上限。此前推一段长文（公告全文）会把卡片撑到整屏高，而整摞是不吃指针、不裁切的视口定位面，撑出视口的部分既看不到也滚不到。
+- cf0da15: Table Column 新增 `align` 属性，支持 `'start' | 'center' | 'end'` 三档对齐，写入列头（`column-header`）与数据格（`cell`）的 `data-align`，皮肤按此调整 `text-align` 与 `justify-content`。
+- 97fce6f: TimePicker 的值改为恒为 ISO 时间串数组，并支持多选。
+
+  - **破坏**：`onValueChange` / `value-change` 的 `value`、Vue `update:value`、`api.value` 由字符串改为 `string[]`：单选至多一项，还没填全时为空数组（此前是空串）；`setValue` 接收数组。宿主写入的 `value` / `defaultValue` 仍可写裸串，按一项处理。迁移：读值处取 `value[0] ?? ''`，写值处包一层数组。
+  - 新增 `selectionMode="multiple"`：各列拼出的是草稿，按新部件 `confirm-trigger`（`XhTimePickerConfirmTrigger`，文字由作者写）收进值，浮层不收；快捷选项点一下切换选中；`maxSelected` 限制个数。
+  - 多选的选中值在输入行里排成标签：新增 `tag-list` 部件与 `XhTimePickerTagList` / `XhTimePickerTag` / `XhTimePickerTagLabel` / `XhTimePickerOverflowTag` / `XhTimePickerItemDeleteTrigger`，与 Select 多选同一套库内标签；段位收起，展开钮常驻并成为键盘入口（退格摘掉最后一个）；标签不截短、放不下折行，超过 `maxTagCount`（默认 3）折进 +N；`translations` 新增 `deleteItem` / `overflowTag`；表单一个选中值一份同名隐藏输入。
+  - `segment` 不再列为必备部件（`meta.requiredParts` 去掉一条，属放宽）：多选时段位收起，Web Components 作者在多选里不写段不再报 `wc.missing-part`，与 DatePicker 同。
+
+- 0d75a3f: Tree 的 `lines` 从每层一道贯穿到底的竖线改为完整的连接线：竖线仍从父节点展开箭头的中线引出，每个子节点从竖线横出一段接到行首（分支接到展开箭头，叶子穿过占位那一格接到正文前），最后一个子节点的竖线止于它那一行的中线并拐向行首；展开着的非末位分支，竖线沿它的整棵子树接到下一个兄弟，子节点之间与分支行下方的间距由线补齐、不断开。顶层节点不画线，强制色下取 GrayText。
+
+### Patch Changes
+
+- 0ee35f3: 日期选择器与日期范围选择器的浮层尺寸只按 px 结算，根字号不是 16px 时不再错位：与日历网格并排的时间列高 `--xh-overlay-calendar-column-h` 改为纯 px（周名一行加六周），不再与按 rem 的滚动面中档取小，根字号 14px 时列底不再比网格短 28px；浮层 `--xh-date-picker-max-h` / `--xh-date-range-picker-max-h` 的缺省值从按 rem 的 `--xh-viewport-h-lg` 改为定位引擎算出的可用高度，带时刻的面板在 14px 根字号或紧凑密度下不再把确认钮挤进滚动里。
+- 8e5081f: 新增语义令牌 `--xh-overlay-toast-w`（28.75rem），Notification 的 toast 预设卡宽与叠放定位面改从它取值，不再在皮肤里写字面尺寸。像素不变；要让全站轻提示统一变宽或变窄，在根上改这一个令牌即可，单个实例照旧用 `--xh-notification-item-w` 覆盖。
+- Updated dependencies [8f69093]
+- Updated dependencies [0ee35f3]
+- Updated dependencies [8e5081f]
+  - @xihan-ui/tokens@3.1.0
+
 ## 3.0.0
 
 ### Major Changes

package/README.md

@@ -1,6 +1,6 @@
 # @xihan-ui/styles
 
-默认皮肤：152 份纯 CSS，零 JS。只按 `[data-scope][data-part]` 与 `data-*` 选中，不匹配标签名也不匹配 class——所以整套换掉它不影响任何行为。
+默认皮肤：纯 CSS，零 JS。只按 `[data-scope][data-part]` 与 `data-*` 选中，不匹配标签名也不匹配 class——所以整套换掉它不影响任何行为。
 
 **谁会装它**：不想自己写样式的人装它。要做自己的设计语言，就不装，照解剖文档写一套自己的。
 

package/component-tokens.d.ts

@@ -380,6 +380,7 @@ export type ComponentTokenName
     | '--xh-carousel-indicator-size'
     | '--xh-carousel-indicator-size-current'
     | '--xh-carousel-indicator-target-size'
+    | '--xh-carousel-indicator-thickness'
     | '--xh-carousel-trigger-bg'
     | '--xh-carousel-trigger-bg-active'
     | '--xh-carousel-trigger-bg-hover'
@@ -791,6 +792,14 @@ export type ComponentTokenName
     | '--xh-color-picker-action-radius'
     | '--xh-color-picker-action-size'
     | '--xh-color-picker-alpha-slider-gap'
+    | '--xh-color-picker-confirm-trigger-bg'
+    | '--xh-color-picker-confirm-trigger-bg-active'
+    | '--xh-color-picker-confirm-trigger-bg-hover'
+    | '--xh-color-picker-confirm-trigger-fg'
+    | '--xh-color-picker-confirm-trigger-h'
+    | '--xh-color-picker-confirm-trigger-px'
+    | '--xh-color-picker-confirm-trigger-radius'
+    | '--xh-color-picker-confirm-trigger-shadow'
     | '--xh-color-picker-content-bg'
     | '--xh-color-picker-content-border'
     | '--xh-color-picker-content-fg'
@@ -810,6 +819,7 @@ export type ComponentTokenName
     | '--xh-color-picker-control-fg'
     | '--xh-color-picker-control-gap'
     | '--xh-color-picker-control-h'
+    | '--xh-color-picker-control-max-h'
     | '--xh-color-picker-control-min-w'
     | '--xh-color-picker-control-px'
     | '--xh-color-picker-control-radius'
@@ -843,6 +853,9 @@ export type ComponentTokenName
     | '--xh-color-picker-swatch-picker-gap'
     | '--xh-color-picker-swatch-radius'
     | '--xh-color-picker-swatch-size'
+    | '--xh-color-picker-tag-dot-border'
+    | '--xh-color-picker-tag-dot-size'
+    | '--xh-color-picker-tag-list-gap'
     | '--xh-color-picker-thumb-border'
     | '--xh-color-picker-thumb-radius'
     | '--xh-color-picker-thumb-scale-dragging'
@@ -1160,6 +1173,7 @@ export type ComponentTokenName
     | '--xh-date-picker-control-fg'
     | '--xh-date-picker-control-gap'
     | '--xh-date-picker-control-h'
+    | '--xh-date-picker-control-max-h'
     | '--xh-date-picker-control-min-w'
     | '--xh-date-picker-control-px'
     | '--xh-date-picker-control-radius'
@@ -1177,6 +1191,7 @@ export type ComponentTokenName
     | '--xh-date-picker-max-h'
     | '--xh-date-picker-panel-divider'
     | '--xh-date-picker-panel-gap'
+    | '--xh-date-picker-placeholder-fg'
     | '--xh-date-picker-preset-bg-hover'
     | '--xh-date-picker-preset-bg-pressed'
     | '--xh-date-picker-preset-check-fg'
@@ -1189,6 +1204,7 @@ export type ComponentTokenName
     | '--xh-date-picker-preset-px'
     | '--xh-date-picker-preset-py'
     | '--xh-date-picker-preset-radius'
+    | '--xh-date-picker-tag-list-gap'
     | '--xh-date-picker-time-column-gap'
     | '--xh-date-picker-time-column-h'
     | '--xh-date-picker-time-column-min-w'
@@ -1268,6 +1284,7 @@ export type ComponentTokenName
     | '--xh-date-range-picker-max-h'
     | '--xh-date-range-picker-panel-divider'
     | '--xh-date-range-picker-panel-gap'
+    | '--xh-date-range-picker-placeholder-fg'
     | '--xh-date-range-picker-preset-bg-hover'
     | '--xh-date-range-picker-preset-bg-pressed'
     | '--xh-date-range-picker-preset-check-fg'
@@ -2505,6 +2522,7 @@ export type ComponentTokenName
     | '--xh-notification-description-fg'
     | '--xh-notification-description-font-size'
     | '--xh-notification-description-leading'
+    | '--xh-notification-description-max-h'
     | '--xh-notification-icon-size'
     | '--xh-notification-indicator-fg'
     | '--xh-notification-indicator-p'
@@ -3758,6 +3776,15 @@ export type ComponentTokenName
     | '--xh-time-picker-column-h'
     | '--xh-time-picker-column-min-w'
     | '--xh-time-picker-column-px'
+    | '--xh-time-picker-confirm-trigger-bg'
+    | '--xh-time-picker-confirm-trigger-bg-active'
+    | '--xh-time-picker-confirm-trigger-bg-hover'
+    | '--xh-time-picker-confirm-trigger-fg'
+    | '--xh-time-picker-confirm-trigger-gap'
+    | '--xh-time-picker-confirm-trigger-h'
+    | '--xh-time-picker-confirm-trigger-px'
+    | '--xh-time-picker-confirm-trigger-radius'
+    | '--xh-time-picker-confirm-trigger-shadow'
     | '--xh-time-picker-content-bg'
     | '--xh-time-picker-content-border'
     | '--xh-time-picker-content-fg'
@@ -3777,6 +3804,7 @@ export type ComponentTokenName
     | '--xh-time-picker-control-fg'
     | '--xh-time-picker-control-gap'
     | '--xh-time-picker-control-h'
+    | '--xh-time-picker-control-max-h'
     | '--xh-time-picker-control-min-w'
     | '--xh-time-picker-control-px'
     | '--xh-time-picker-control-radius'
@@ -3825,6 +3853,7 @@ export type ComponentTokenName
     | '--xh-time-picker-segment-fg-invalid-focus'
     | '--xh-time-picker-segment-px'
     | '--xh-time-picker-segment-radius'
+    | '--xh-time-picker-tag-list-gap'
     | '--xh-time-range-picker-action-bg'
     | '--xh-time-range-picker-action-bg-active'
     | '--xh-time-range-picker-action-bg-hover'