@xihan-ui/styles 3.0.0 → 3.1.0

package/index.css

@@ -5464,6 +5464,104 @@
     inset-inline-end: max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right));
   }
 
+  /* —— 位置 ——
+     拖到别处、或作者给了位置时，角落那两条贴边里有一条换掉：data-placement 由连接层按位置推出
+     （离触发器最近的恒是视口的那条边、展开组朝页面中间长），这里只换沿边的那一条。
+     百分比按固定定位的包含块（视口去掉滚动条）量，与连接层量的视口同一块；
+     夹取的上下界与四角同样和安全区取大的一头，比例再怎么写，钮也不会压进刘海与横条。
+     触发器边长取它自己那一档（使用者槽在前）：沿边的比例量的是触发器中心 */
+  [data-scope='float-button'][data-part='root'] {
+    --xh-_float-button-span: var(--xh-float-button-size, var(--xh-_float-button-size));
+  }
+
+  /* 贴左右边：上下按比例，锚在离触发器近的那一头 */
+  [data-scope='float-button'][data-part='root'][data-edge^='inline'][data-placement^='top'] {
+    inset-block-start: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-top)),
+      calc(var(--xh-_float-button-ratio) * 100% - var(--xh-_float-button-span) / 2),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-bottom)))
+    );
+  }
+
+  [data-scope='float-button'][data-part='root'][data-edge^='inline'][data-placement^='bottom'] {
+    inset-block-end: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-bottom)),
+      calc((1 - var(--xh-_float-button-ratio)) * 100% - var(--xh-_float-button-span) / 2),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-top)))
+    );
+  }
+
+  /* 贴上下边：行内方向按比例，从行首量起 */
+  [data-scope='float-button'][data-part='root'][data-edge^='block'][data-placement$='-start'] {
+    inset-inline-start: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right)),
+      calc(var(--xh-_float-button-ratio) * 100% - var(--xh-_float-button-span) / 2),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right)))
+    );
+  }
+
+  [data-scope='float-button'][data-part='root'][data-edge^='block'][data-placement$='-end'] {
+    inset-inline-end: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right)),
+      calc((1 - var(--xh-_float-button-ratio)) * 100% - var(--xh-_float-button-span) / 2),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right)))
+    );
+  }
+
+  /* 停在一点、或正跟着指针走：坐标是触发器左上角的物理像素，横向一律从左边量，不随书写方向翻。
+     竖向锚在离触发器近的那一头：朝下长的锚上沿，朝上长的锚下沿，展开组冒出来时触发器不挪窝。
+     停着的点仍夹在视口里（视口变小时不跑出去）；跟手的坐标由连接层夹好，这里原样用 */
+  [data-scope='float-button'][data-part='root'][data-point][data-placement] {
+    inset-inline: auto;
+    /* stylelint-disable-next-line property-disallowed-list -- 停点由连接层按指针的物理坐标写成 x，横向从左边量、不随书写方向翻 */
+    left: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-left)),
+      var(--xh-_float-button-x),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-right)))
+    );
+  }
+
+  [data-scope='float-button'][data-part='root'][data-point][data-placement^='top'] {
+    top: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-top)),
+      var(--xh-_float-button-y),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-bottom)))
+    );
+  }
+
+  [data-scope='float-button'][data-part='root'][data-point][data-placement^='bottom'] {
+    bottom: clamp(
+      max(var(--xh-_float-button-offset), env(safe-area-inset-bottom)),
+      calc(100% - var(--xh-_float-button-y) - var(--xh-_float-button-span)),
+      calc(100% - var(--xh-_float-button-span) - max(var(--xh-_float-button-offset), env(safe-area-inset-top)))
+    );
+  }
+
+  /* 跟手排在贴边与停点之后：拖动与落定途中压过提交了的位置 */
+  [data-scope='float-button'][data-part='root'][data-moving][data-placement] {
+    inset-inline: auto;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上：跟手坐标是指针的物理 x */
+    left: var(--xh-_float-button-x);
+  }
+
+  [data-scope='float-button'][data-part='root'][data-moving][data-placement^='top'] {
+    top: var(--xh-_float-button-y);
+  }
+
+  [data-scope='float-button'][data-part='root'][data-moving][data-placement^='bottom'] {
+    bottom: calc(100% - var(--xh-_float-button-y) - var(--xh-_float-button-span));
+  }
+
+  /* 能拖时触屏手指在触发器上的移动归拖动，不让浏览器拿去滚页面；光标提示能抓、正抓着 */
+  [data-scope='float-button'][data-part='root'][data-draggable] [data-scope='float-button'][data-part='trigger'] {
+    touch-action: none;
+    cursor: grab;
+  }
+
+  [data-scope='float-button'][data-part='root'][data-dragging] [data-scope='float-button'][data-part='trigger'] {
+    cursor: grabbing;
+  }
+
   /* —— 尺寸：原生动作项与触发器的 floating 档逐档同表 —— */
   [data-scope='float-button'][data-part='root'][data-size='sm'] {
     --xh-_float-button-size: var(--xh-control-box-md);
@@ -23689,6 +23787,46 @@
     display: none;
   }
 
+  /* 多选的标签行：选中的颜色在盒里排成标签，超过 maxTagCount 的折进 +N。
+     行里每一枚都是 tag（data-scope="tag"），样子归 tag.css；行怎么排、标签怎么进出归标签行家族配方。
+     基准取 0：只吃触发钮剩下的宽度、在自己里面折行；按内容宽算基准的话，盒子会先在钮前面折行，把钮挤到最后一行 */
+  [data-scope='color-picker'][data-part='tag-list'] {
+    --xh-tag-list-gap: var(--xh-color-picker-tag-list-gap, var(--xh-space-1));
+
+    flex: 1 1 0;
+    flex-wrap: wrap;
+  }
+
+  /* 颜色标签是定长的值串，截短了就读不出是哪个颜色：不收缩，排不下就折到下一行，
+     盒随行数长高（字段家族的 multi-tag 布局给），到上限后在盒内滚动 */
+  [data-scope='color-picker'][data-part='tag-list'] > [data-scope='tag'][data-part='root'] {
+    flex: none;
+  }
+
+  /* 每枚标签前一个色点，颜色由连接层写进内联私有槽；+N 那一枚没有 data-value，不画。
+     白色与近底色的颜色靠一圈默认描边从标签底上分出来 */
+  [data-scope='color-picker'][data-part='tag-list'] > [data-scope='tag'][data-part='root'][data-value]::before {
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--xh-color-picker-tag-dot-size, var(--xh-control-indicator-sm));
+    block-size: var(--xh-color-picker-tag-dot-size, var(--xh-control-indicator-sm));
+    border: var(--xh-stroke-thin) solid var(--xh-color-picker-tag-dot-border, var(--xh-border-default));
+    border-radius: var(--xh-shape-circle);
+    background-color: var(--xh-_color-picker-tag-color, transparent);
+    content: '';
+    print-color-adjust: exact;
+  }
+
+  [data-scope='color-picker'][data-part='control'][data-xh-field-layout='multi-tag'] {
+    max-block-size: var(--xh-color-picker-control-max-h, var(--xh-viewport-h-sm));
+    overflow-y: auto;
+  }
+
+  /* 多选时值文字让位，触发钮只剩一颗显示工作色的色块：不再占满剩余宽度，标签行吃掉余下的位置 */
+  [data-scope='color-picker'][data-part='control'][data-xh-field-layout='multi-tag'] > [data-scope='color-picker'][data-part='trigger'] {
+    flex: none;
+  }
+
   /* 盒内那颗可聚焦的按钮：不画描边不铺底也不自带高度，只占满剩余宽度、排布色块与值文本 */
   [data-scope='color-picker'][data-part='trigger'] {
     display: inline-flex;
@@ -24026,6 +24164,39 @@
     color: var(--xh-fg-disabled);
   }
 
+  /* 「添加」沉到面板的行尾：它是多选时整块面板的出口，不跟取色面左对齐 */
+  [data-scope='color-picker'][data-part='content'] > [data-scope='color-picker'][data-part='confirm-trigger'] {
+    flex: none;
+    align-self: flex-end;
+  }
+
+  /* 「添加」是面板里唯一的主要动作：品牌实心、悬停 / 按下与 0.97 按压、焦点环全由 Action Control 的
+     text solid 档给；槽名统一按部件取 --xh-color-picker-confirm-trigger-*，只映射到家族桥接槽 */
+  [data-scope='color-picker'][data-part='confirm-trigger'] {
+    --xh-action-visual-size: var(--xh-color-picker-confirm-trigger-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-color-picker-confirm-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-color-picker-confirm-trigger-radius, var(--xh-shape-control));
+    --xh-action-bg-rest: var(--xh-color-picker-confirm-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-color-picker-confirm-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-color-picker-confirm-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-color-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-color-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-color-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: transparent;
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: var(--xh-color-picker-confirm-trigger-shadow, none);
+    --xh-action-shadow-hover: var(--xh-color-picker-confirm-trigger-shadow, none);
+    --xh-action-shadow-pressed: var(--xh-color-picker-confirm-trigger-shadow, none);
+    --xh-action-font-size: var(--xh-text-secondary-size);
+
+    border-width: 0;
+  }
+
+  /* 单选时连接层给的是 hidden 属性；家族那条 display 会把 UA 规则盖掉 */
+  [data-scope='color-picker'][data-part='confirm-trigger'][hidden] {
+    display: none;
+  }
+
   /* 预设色板的挂载点，同时充当色板的根节点：color-swatch-picker 那份皮的 root 规则落在
      [data-scope='color-swatch-picker'][data-part='root'] 上，而这里没有那个节点，所以根上挂的那几个私有槽
      （格子边长、间距、徽标尺寸、语气色、图标尺）与排布得在这儿照抄一遍；格子的皮仍归色板那一份。
@@ -24109,6 +24280,12 @@
       outline: var(--xh-stroke-thin) solid ButtonBorder;
       outline-offset: calc(-1 * var(--xh-stroke-thin));
     }
+
+    /* 标签前的色点画的也是颜色本身：同样退出强制着色，用系统文字色描一圈 */
+    [data-scope='color-picker'][data-part='tag-list'] > [data-scope='tag'][data-part='root'][data-value]::before {
+      forced-color-adjust: none;
+      border-color: CanvasText;
+    }
   }
 }
 
@@ -26140,6 +26317,30 @@
     display: none;
   }
 
+  /* 整条占位：一段都没填、焦点也不在段上时，段位与分隔符让位给一句占位文字，焦点一进到段上就换回段位。
+     段位只是淡出（仍可聚焦、仍在读屏树里），文字以生成内容压在同一行上、不吃指针，点下去落到底下的段位 */
+  [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown] {
+    position: relative;
+    color: transparent;
+  }
+
+  [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown] > * {
+    opacity: 0;
+  }
+
+  [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown]::before {
+    content: attr(data-placeholder-text);
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 50%;
+    overflow: hidden;
+    color: var(--xh-date-field-placeholder-fg, var(--xh-fg-subtle));
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    pointer-events: none;
+    translate: 0 -50%;
+  }
+
   [data-scope='date-field'][data-part='segment-group'] > :not([data-scope]) {
     color: var(--xh-date-field-literal-fg, var(--xh-fg-subtle));
   }
@@ -26252,6 +26453,15 @@
   }
 
   @media (forced-colors: active) {
+    /* 整条占位的文字照系统的弱色画；段位让位时的透明字不被强制换色顶回来 */
+    [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown] {
+      forced-color-adjust: none;
+    }
+
+    [data-scope='date-field'][data-part='segment-group'][data-placeholder-shown]::before {
+      color: GrayText;
+    }
+
     [data-scope='date-field'][data-part='segment'][data-invalid]:is([data-focus], :focus-visible) {
       outline: var(--xh-ring-width) solid Highlight;
       outline-offset: var(--xh-ring-offset);
@@ -26489,11 +26699,69 @@
     color: var(--xh-date-picker-literal-fg, var(--xh-fg-subtle));
   }
 
+  /* 整条占位：一段都没填、焦点也不在段上时，段位与分隔符让位给一句占位文字，焦点一进到段上就换回段位。
+     段位只是淡出（仍可聚焦、仍在读屏树里），文字以生成内容压在同一行上、不吃指针，点下去落到底下的段位 */
+  [data-scope='date-picker'][data-part='segment-group'][data-placeholder-shown] {
+    position: relative;
+    color: transparent;
+  }
+
+  [data-scope='date-picker'][data-part='segment-group'][data-placeholder-shown] > * {
+    opacity: 0;
+  }
+
+  [data-scope='date-picker'][data-part='segment-group'][data-placeholder-shown]::before {
+    content: attr(data-placeholder-text);
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 50%;
+    overflow: hidden;
+    color: var(--xh-date-picker-placeholder-fg, var(--xh-fg-subtle));
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    pointer-events: none;
+    translate: 0 -50%;
+  }
+
   /* 容器自己不占 Tab 位、也不承载焦点，环由 control 画，这里不再套一圈 */
   [data-scope='date-picker'][data-part='segment-group']:focus-visible {
     outline: none;
   }
 
+  /* 多选的标签行：段位让位，选中的日期在盒里排成标签，超过 maxTagCount 的折进 +N。
+     行里每一枚都是 tag（data-scope="tag"），样子归 tag.css；行怎么排、标签怎么进出归标签行家族配方，
+     这里只接使用者的间距槽，并让它像段位那样占满输入行剩下的宽度 */
+  [data-scope='date-picker'][data-part='tag-list'] {
+    --xh-tag-list-gap: var(--xh-date-picker-tag-list-gap, var(--xh-space-1));
+
+    /* 基准取 0：只吃两颗钮剩下的宽度、在自己里面折行；按内容宽算基准的话，盒子会先在钮前面折行，把钮挤到最后一行 */
+    flex: 1 1 0;
+    flex-wrap: wrap;
+    font-size: var(--xh-date-picker-font-size, var(--xh-_date-picker-font-size));
+  }
+
+  /* 日期标签是定长文字，截短了就读不出是哪天：不收缩，排不下就折到下一行（与标签输入同一种排法），
+     盒随行数长高（字段家族的 multi-tag 布局给），到上限后在盒内滚动 */
+  [data-scope='date-picker'][data-part='tag-list'] > [data-scope='tag'][data-part='root'] {
+    flex: none;
+  }
+
+  [data-scope='date-picker'][data-part='control'][data-xh-field-layout='multi-tag'] {
+    max-block-size: var(--xh-date-picker-control-max-h, var(--xh-viewport-h-sm));
+    overflow-y: auto;
+  }
+
+  /* 没有选中时这一行承载整条占位：与单选那条占位同一句文字、同一个颜色槽 */
+  [data-scope='date-picker'][data-part='tag-list'][data-placeholder-shown]::before {
+    content: attr(data-placeholder-text);
+    min-inline-size: 0;
+    overflow: hidden;
+    color: var(--xh-date-picker-placeholder-fg, var(--xh-fg-subtle));
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    pointer-events: none;
+  }
+
   /* 两个按钮同一副长相：贴在框内末端的小方钮，不占宽度也不撑高 control。正方视觉盒、inset 圆角、
      悬停 100 / 按下 200 与 0.97 按压、粗指针热区、禁用面与 :focus-visible 关环（盒的 :focus-within
      已画了一圈）全由 Action Control 的 field-inset ghost 档给，组件只映射既有覆盖槽。
@@ -26533,10 +26801,11 @@
     --xh-action-fg-rest: var(--xh-date-picker-action-fg-hover, var(--xh-fg-default));
   }
 
-  /* 有值时清空钮顶上来，日历钮让位：两颗并排堆着用户分不清点哪个 */
+  /* 有值时清空钮顶上来，日历钮让位：两颗并排堆着用户分不清点哪个。
+     多选不让位：段位收起后日历钮是唯一的键盘入口（退格摘标签也在它身上），藏了键盘就进不来 */
   [data-scope='date-picker'][data-part='control']:has(
       > [data-scope='date-picker'][data-part='clear-trigger']:not([hidden])
-    )
+    ):not(:has(> [data-scope='date-picker'][data-part='tag-list']:not([hidden])))
     > [data-scope='date-picker'][data-part='trigger'] {
     display: none;
   }
@@ -26555,9 +26824,10 @@
     border-radius: var(--xh-date-picker-content-radius, var(--xh-shape-overlay));
     background: var(--xh-date-picker-content-bg, var(--xh-bg-surface));
     color: var(--xh-date-picker-content-fg, var(--xh-fg-default));
-    /* 日历是定高结构：六行日期加表头本来就有固定高度，上限走页内滚动面那一档；
+    /* 日历是定高结构：网格、时间列与确认行都按 px 排，天然高度就是它们的和，缺省不另设上限
+       （按 rem 的滚动面档会随根字号缩小，根字号低于 16px 时确认行就被挤到滚动里）；
        可用高度是定位引擎算出的视口余量，视口真放不下时再收一截 */
-    max-block-size: min(var(--xh-date-picker-max-h, var(--xh-viewport-h-lg)), var(--xh-_date-picker-available-h));
+    max-block-size: min(var(--xh-date-picker-max-h, var(--xh-_date-picker-available-h)), var(--xh-_date-picker-available-h));
     /* 两轴都滚：块轴放不下时面板内自己竖滚，行内轴放不下时面板内自己横滚，
        日历那几块保持各自的天然宽度，不被压 */
     overflow: auto;
@@ -27020,6 +27290,16 @@
   }
 
   @media (forced-colors: active) {
+    /* 整条占位的文字照系统的弱色画；段位让位时的透明字不被强制换色顶回来 */
+    [data-scope='date-picker'][data-part='segment-group'][data-placeholder-shown] {
+      forced-color-adjust: none;
+    }
+
+    [data-scope='date-picker'][data-part='segment-group'][data-placeholder-shown]::before,
+    [data-scope='date-picker'][data-part='tag-list'][data-placeholder-shown]::before {
+      color: GrayText;
+    }
+
     /* 系统接管底色后仍保住末端对号；禁用标记改用系统失效色。 */
     [data-scope='date-picker'][data-part='preset']::after,
     [data-scope='date-picker'][data-part='time-item']::after {
@@ -27300,6 +27580,30 @@
     color: var(--xh-date-range-picker-literal-fg, var(--xh-fg-subtle));
   }
 
+  /* 整条占位：一段都没填、焦点也不在段上时，段位与分隔符让位给一句占位文字，焦点一进到段上就换回段位。
+     段位只是淡出（仍可聚焦、仍在读屏树里），文字以生成内容压在同一行上、不吃指针，点下去落到底下的段位 */
+  [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown] {
+    position: relative;
+    color: transparent;
+  }
+
+  [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown] > * {
+    opacity: 0;
+  }
+
+  [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown]::before {
+    content: attr(data-placeholder-text);
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 50%;
+    overflow: hidden;
+    color: var(--xh-date-range-picker-placeholder-fg, var(--xh-fg-subtle));
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    pointer-events: none;
+    translate: 0 -50%;
+  }
+
   /* 容器自己不占 Tab 位、也不承载焦点，环由 control 画，这里不再套一圈 */
   [data-scope='date-range-picker'][data-part='segment-group']:focus-visible {
     outline: none;
@@ -27366,9 +27670,10 @@
     border-radius: var(--xh-date-range-picker-content-radius, var(--xh-shape-overlay));
     background: var(--xh-date-range-picker-content-bg, var(--xh-bg-surface));
     color: var(--xh-date-range-picker-content-fg, var(--xh-fg-default));
-    /* 日历是定高结构：六行日期加表头本来就有固定高度，上限走页内滚动面那一档；
+    /* 日历是定高结构：网格、时间列与确认行都按 px 排，天然高度就是它们的和，缺省不另设上限
+       （按 rem 的滚动面档会随根字号缩小，根字号低于 16px 时确认行就被挤到滚动里）；
        可用高度是定位引擎算出的视口余量，视口真放不下时再收一截 */
-    max-block-size: min(var(--xh-date-range-picker-max-h, var(--xh-viewport-h-lg)), var(--xh-_date-range-picker-available-h));
+    max-block-size: min(var(--xh-date-range-picker-max-h, var(--xh-_date-range-picker-available-h)), var(--xh-_date-range-picker-available-h));
     /* 两轴都滚：块轴放不下时面板内自己竖滚，行内轴放不下时面板内自己横滚，
        日历那几块保持各自的天然宽度，不被压 */
     overflow: auto;
@@ -27852,6 +28157,15 @@
   }
 
   @media (forced-colors: active) {
+    /* 整条占位的文字照系统的弱色画；段位让位时的透明字不被强制换色顶回来 */
+    [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown] {
+      forced-color-adjust: none;
+    }
+
+    [data-scope='date-range-picker'][data-part='segment-group'][data-placeholder-shown]::before {
+      color: GrayText;
+    }
+
     /* 系统接管底色后仍保住末端对号；禁用标记改用系统失效色。 */
     [data-scope='date-range-picker'][data-part='preset']::after,
     [data-scope='date-range-picker'][data-part='time-item']::after {
@@ -29215,6 +29529,10 @@
     display: flex;
     flex-direction: column;
     gap: var(--xh-field-gap, var(--xh-space-1));
+    /* 字段族控件放进字段即铺满字段宽：字段的宽由表单的列给，控件跟着列走，
+       不必逐个组件在根上写 inline-size: 100%。单独摆放的控件仍是 16rem 缺省宽；
+       单类钉宽（--xh-<组件>-control-w）照旧压过这一条 */
+    --xh-control-w: 100%;
   }
 
   /* 表单横排（标签左置）：字段转两列网格，标签列宽由表单的 --xh-form-label-w 统一给，
@@ -29821,6 +30139,14 @@
     flex-flow: row wrap;
     align-items: start;
     column-gap: var(--xh-form-inline-gap, var(--xh-space-4));
+    /* 一行流里字段按内容收，没有列宽可铺：在表单根上取下此处的字段缺省宽，交给下面的字段还原 */
+    --xh-_form-inline-control-w: var(--xh-control-w);
+  }
+
+  /* 字段会把里面的控件铺满字段宽，而一行流的字段宽正是由控件撑出来的，两者互相指望就塌成内容宽；
+     这一档的字段还原成表单根上的缺省宽 */
+  [data-scope='form'][data-part='root'][data-layout='inline'] [data-scope='field'][data-part='root'] {
+    --xh-control-w: var(--xh-_form-inline-control-w);
   }
 
   /* 一列是网格档的缺省，这里从两列起逐档写 */
@@ -34340,7 +34666,7 @@
   }
 
   [data-scope='notification'][data-part='group'][data-stacked][data-preset='toast'] {
-    inline-size: min(var(--xh-notification-item-w, 28.75rem), calc(100vw - var(--xh-space-8)));
+    inline-size: min(var(--xh-notification-item-w, var(--xh-overlay-toast-w)), calc(100vw - var(--xh-space-8)));
   }
 
   [data-scope='notification'][data-part='group'][data-stacked][data-placement^='bottom'] {
@@ -34449,7 +34775,7 @@
     display: flex;
     align-items: flex-start;
     column-gap: var(--xh-notification-item-gap, var(--xh-space-2));
-    inline-size: var(--xh-notification-item-w, 28.75rem);
+    inline-size: var(--xh-notification-item-w, var(--xh-overlay-toast-w));
     padding-block: var(--xh-notification-item-py, var(--xh-space-3));
     padding-inline: var(--xh-notification-item-px, var(--xh-space-4));
     font-size: var(--xh-notification-item-font-size, var(--xh-text-label-size));
@@ -34734,8 +35060,14 @@
     );
   }
 
+  /* 正文有上限：推一段长文（公告全文）进来时卡片不被撑到整屏高——摞是整面视口的定位面、不吃指针也不裁切，
+     撑出视口的那截既看不到也滚不到。超出的部分在正文自己里面滚，标题与操作钮留在卡片上；
+     滚到头不把滚动量传给页面 */
   [data-scope='notification'][data-part='item-description'] {
     margin: 0;
+    max-block-size: var(--xh-notification-description-max-h, var(--xh-viewport-h-md));
+    overflow-y: auto;
+    overscroll-behavior: contain;
     color: var(--xh-notification-description-fg, var(--xh-fg-muted));
     font-size: var(--xh-notification-description-font-size, var(--xh-text-secondary-size));
   }
@@ -42500,6 +42832,23 @@
     user-select: none;
   }
 
+  /* 列对齐：data-align 控制列头与数据格的文本与内容对齐方向；
+     显式写出三档以便 start 能重置自定义皮肤里可能存在的非默认对齐 */
+  [data-scope='table']:is([data-part='column-header'], [data-part='cell'])[data-align='start'] {
+    text-align: start;
+    justify-content: start;
+  }
+
+  [data-scope='table']:is([data-part='column-header'], [data-part='cell'])[data-align='center'] {
+    text-align: center;
+    justify-content: center;
+  }
+
+  [data-scope='table']:is([data-part='column-header'], [data-part='cell'])[data-align='end'] {
+    text-align: end;
+    justify-content: end;
+  }
+
   /* 列名是列头里唯一可收窄的一格：flex: 1 吃掉余量、把排序钮 / 列宽把手推到行尾，min-inline-size: 0 让它在
      窄列上收得下去并出省略号。列名不能裸写成文本节点：flex 行里的裸文本是匿名 flex item，min-inline-size 取 auto
      （nowrap 文本的 min-content）缩不下去，96px 的列配一串长列名时定尺的把手连同 auto 外边距一起被挤出列头盒、
@@ -45451,6 +45800,27 @@
     display: none;
   }
 
+  /* 多选的标签行：段位让位，选中的时刻在盒里排成标签，超过 maxTagCount 的折进 +N。
+     行里每一枚都是 tag（data-scope="tag"），样子归 tag.css；行怎么排、标签怎么进出归标签行家族配方。
+     基准取 0：只吃两颗钮剩下的宽度、在自己里面折行；按内容宽算基准的话，盒子会先在钮前面折行，把钮挤到最后一行 */
+  [data-scope='time-picker'][data-part='tag-list'] {
+    --xh-tag-list-gap: var(--xh-time-picker-tag-list-gap, var(--xh-space-1));
+
+    flex: 1 1 0;
+    flex-wrap: wrap;
+  }
+
+  /* 时刻标签是定长文字，截短了就读不出是几点：不收缩，排不下就折到下一行（与标签输入同一种排法），
+     盒随行数长高（字段家族的 multi-tag 布局给），到上限后在盒内滚动 */
+  [data-scope='time-picker'][data-part='tag-list'] > [data-scope='tag'][data-part='root'] {
+    flex: none;
+  }
+
+  [data-scope='time-picker'][data-part='control'][data-xh-field-layout='multi-tag'] {
+    max-block-size: var(--xh-time-picker-control-max-h, var(--xh-viewport-h-sm));
+    overflow-y: auto;
+  }
+
   [data-scope='time-picker'][data-part='segment-group'] > :not([data-scope]) {
     color: var(--xh-time-picker-literal-fg, var(--xh-fg-subtle));
   }
@@ -45556,10 +45926,11 @@
     --xh-action-fg-rest: var(--xh-time-picker-action-fg-hover, var(--xh-fg-default));
   }
 
-  /* 有值时清空钮顶上来，展开钮让位：两颗并排堆着用户分不清点哪个 */
+  /* 有值时清空钮顶上来，展开钮让位：两颗并排堆着用户分不清点哪个。
+     多选不让位：段位收起后展开钮是唯一的键盘入口（退格摘标签也在它身上），藏了键盘就进不来 */
   [data-scope='time-picker'][data-part='control']:has(
       > [data-scope='time-picker'][data-part='clear-trigger']:not([hidden])
-    )
+    ):not(:has(> [data-scope='time-picker'][data-part='tag-list']:not([hidden])))
     > [data-scope='time-picker'][data-part='trigger'] {
     display: none;
   }
@@ -45609,6 +45980,40 @@
     animation: xh-overlay-slide-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
+  /* 「添加」沉到各列的右下角：它是多选时整块面板的出口，不跟列顶对齐 */
+  [data-scope='time-picker'][data-part='content'] > [data-scope='time-picker'][data-part='confirm-trigger'] {
+    flex: none;
+    align-self: flex-end;
+    margin-inline-start: var(--xh-time-picker-confirm-trigger-gap, var(--xh-space-1));
+  }
+
+  /* 「添加」是面板里唯一的主要动作：品牌实心、悬停 / 按下与 0.97 按压、焦点环全由 Action Control 的
+     text solid 档给；槽名统一按部件取 --xh-time-picker-confirm-trigger-*，只映射到家族桥接槽 */
+  [data-scope='time-picker'][data-part='confirm-trigger'] {
+    --xh-action-visual-size: var(--xh-time-picker-confirm-trigger-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-time-picker-confirm-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-time-picker-confirm-trigger-radius, var(--xh-shape-control));
+    --xh-action-bg-rest: var(--xh-time-picker-confirm-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-time-picker-confirm-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-time-picker-confirm-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-time-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-time-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-time-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: transparent;
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: var(--xh-time-picker-confirm-trigger-shadow, none);
+    --xh-action-shadow-hover: var(--xh-time-picker-confirm-trigger-shadow, none);
+    --xh-action-shadow-pressed: var(--xh-time-picker-confirm-trigger-shadow, none);
+    --xh-action-font-size: var(--xh-text-secondary-size);
+
+    border-width: 0;
+  }
+
+  /* 单选时连接层给的是 hidden 属性；家族那条 display 会把 UA 规则盖掉 */
+  [data-scope='time-picker'][data-part='confirm-trigger'][hidden] {
+    display: none;
+  }
+
   /* 快捷选项也是一列，与时分秒那几列并排，排在行内起始一侧 */
   [data-scope='time-picker'][data-part='preset-group'] {
     display: flex;
@@ -49502,26 +49907,88 @@
   }
 
   /*
-   * 缩进参考线：每一层子节点的行首画一道竖线，对齐父节点展开箭头的中线，层级深时一眼看得出谁跟谁同层。
-   * 线画在子层容器自己的伪元素上：定位在子层里，只贯穿这一层的全部子孙，不越出父节点的范围。
+   * 连接线：父节点展开箭头的中线向下引一道竖线，每个子节点从竖线横出一段接到自己行首（├），
+   * 最后一个子节点的竖线止于它那一行的中线（└），层级深时一眼看得出谁挂在谁下面。
+   * 线由每个子节点自己画：子节点的行画「这一段竖线 + 横出的那一段」，展开着的非末位分支再由它的子层
+   * 把竖线接过它整棵子树，交给下一个兄弟。子节点之间、分支行与子层之间的间距由线向上下伸出补齐，竖线不断开。
+   * 只画在竖排的子层里：顶层节点没有父节点可连，横排的末端层没有行首可接。
+   * 首个与末位子节点按子层里的结构次序认：子层里只放节点，收起的子树整块不显示、不影响次序。
    * 它是内部分隔的一种，颜色取 border-subtle；行悬停与选中换面时线压在面上照样看得见
    */
   [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content'] {
     position: relative;
   }
 
-  [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content']::before {
+  /* 竖线落在父节点展开箭头的中线上：父行的行首内边距加半个箭头盒，换算到缩进了一格的子节点坐标里。
+     向上伸出的量补的是上方那段间距（首个子节点补分支行与子层之间的那段），向下补到下一个兄弟 */
+  [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content'][data-orientation='vertical'] > [data-scope='tree'][data-part='item'],
+  [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content'][data-orientation='vertical'] > [data-scope='tree'][data-part='branch'] > [data-scope='tree'][data-part='branch-control'] {
+    --xh-_tree-line-x: calc(
+      var(--xh-tree-row-px, var(--xh-_tree-row-px)) +
+        var(--xh-_tree-indicator-size) / 2 -
+        var(--xh-stroke-thin) / 2 -
+        var(--xh-tree-indent, var(--xh-_tree-indent))
+    );
+    --xh-_tree-line-top: 0px;
+    --xh-_tree-line-bottom: var(--xh-tree-branch-content-gap, var(--xh-list-option-gap));
+
+    position: relative;
+  }
+
+  [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content'][data-orientation='vertical'] > [data-scope='tree'][data-part='item']:first-child,
+  [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content'][data-orientation='vertical'] > [data-scope='tree'][data-part='branch']:first-child > [data-scope='tree'][data-part='branch-control'] {
+    --xh-_tree-line-top: var(--xh-tree-branch-gap, var(--xh-list-option-gap));
+  }
+
+  /* 展开着的非末位分支：行下面先是它自己的子层，竖线只伸到子层顶上，余下那段由子层接着画 */
+  [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content'][data-orientation='vertical'] > [data-scope='tree'][data-part='branch'] > [data-scope='tree'][data-part='branch-control'][data-state='open'] {
+    --xh-_tree-line-bottom: var(--xh-tree-branch-gap, var(--xh-list-option-gap));
+  }
+
+  [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content'][data-orientation='vertical'] > [data-scope='tree'][data-part='item']::before,
+  [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content'][data-orientation='vertical'] > [data-scope='tree'][data-part='branch'] > [data-scope='tree'][data-part='branch-control']::before {
     content: '';
     position: absolute;
-    inset-block: 0;
-    /* 父行的行首内边距加半个箭头盒：竖线正好落在父节点展开箭头的中线上 */
+    inset-block: calc(var(--xh-_tree-line-top) * -1) calc(var(--xh-_tree-line-bottom) * -1);
+    inset-inline-start: var(--xh-_tree-line-x);
+    /* 分支横出到展开箭头盒的起点；叶子没有箭头，横线穿过占位那一格接到正文前 */
+    inline-size: calc(var(--xh-tree-row-px, var(--xh-_tree-row-px)) - var(--xh-_tree-line-x));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-tree-line-color, var(--xh-border-subtle));
+    /* 横出的那段落在行的中线：线盒上下伸出的量不对称时按差值的一半补回 */
+    background: linear-gradient(var(--xh-tree-line-color, var(--xh-border-subtle)), var(--xh-tree-line-color, var(--xh-border-subtle)))
+      0 calc(50% + (var(--xh-_tree-line-top) - var(--xh-_tree-line-bottom)) / 2) / 100% var(--xh-stroke-thin) no-repeat;
+    pointer-events: none;
+  }
+
+  [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content'][data-orientation='vertical'] > [data-scope='tree'][data-part='item']::before {
+    inline-size: calc(
+      var(--xh-tree-row-px, var(--xh-_tree-row-px)) +
+        var(--xh-_tree-indicator-size) -
+        var(--xh-_tree-line-x)
+    );
+  }
+
+  /* 最后一个子节点：竖线止于行的中线并在那里拐向行首（└），下面不再有兄弟要接 */
+  [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content'][data-orientation='vertical'] > [data-scope='tree'][data-part='item']:last-child::before,
+  [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content'][data-orientation='vertical'] > [data-scope='tree'][data-part='branch']:last-child > [data-scope='tree'][data-part='branch-control']::before {
+    inset-block-end: calc(50% - var(--xh-stroke-thin) / 2);
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-tree-line-color, var(--xh-border-subtle));
+    background: none;
+  }
+
+  /* 展开着的非末位分支：它的子层把父节点那道竖线接过整棵子树，一直伸到下一个兄弟。
+     子层的盒与分支同起点（缩进是子层自己的内边距），竖线位置与分支行里那一段相同 */
+  [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content'][data-orientation='vertical'] > [data-scope='tree'][data-part='branch']:not(:last-child) > [data-scope='tree'][data-part='branch-content']::after {
+    content: '';
+    position: absolute;
+    inset-block: 0 calc(var(--xh-tree-branch-content-gap, var(--xh-list-option-gap)) * -1);
     inset-inline-start: calc(
       var(--xh-tree-row-px, var(--xh-_tree-row-px)) +
         var(--xh-tree-indicator-size, var(--xh-_tree-indicator)) / 2 -
-        var(--xh-stroke-thin) / 2
+        var(--xh-stroke-thin) / 2 -
+        var(--xh-tree-indent, var(--xh-_tree-indent))
     );
-    inline-size: var(--xh-stroke-thin);
-    background: var(--xh-tree-line-color, var(--xh-border-subtle));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-tree-line-color, var(--xh-border-subtle));
     pointer-events: none;
   }
 
@@ -49750,10 +50217,18 @@
     }
   }
 
-  /* 强制色：参考线是一块底色，系统色下会被抹成 Canvas；换成 GrayText 并只让这条线不参与强制换色 */
+  /* 强制色：连接线的横段是一块渐变底色、竖段是描边，系统色下一个被抹掉、一个被换成文字色；
+     两段都写 GrayText，并只让连接线不参与强制换色 */
   @media (forced-colors: active) {
-    [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content']::before {
-      background: GrayText;
+    [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content'][data-orientation='vertical'] > [data-scope='tree'][data-part='item']::before,
+    [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content'][data-orientation='vertical'] > [data-scope='tree'][data-part='branch'] > [data-scope='tree'][data-part='branch-control']::before {
+      border-color: GrayText;
+      background-image: linear-gradient(GrayText, GrayText);
+      forced-color-adjust: none;
+    }
+
+    [data-scope='tree'][data-part='tree'][data-lines] [data-scope='tree'][data-part='branch-content'][data-orientation='vertical'] > [data-scope='tree'][data-part='branch'] > [data-scope='tree'][data-part='branch-content']::after {
+      border-color: GrayText;
       forced-color-adjust: none;
     }
   }