@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/number-animation.css

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 number animation 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-number-animation {
+    --xh-number-animation-skin: 1;
+  }
+
+  .xh-scope-number-animation[data-part='root'] {
+    /* 不写尺寸就跟着上下文的字号走：这个数常常摆在别人的标题、卡片标题或统计数值槽里，
+       自带一个字号只会跟摆放它的地方打架。三个档位各自换掉这个私有槽 */
+    --xh-_number-animation-size: inherit;
+
+    display: inline-block;
+    color: var(--xh-number-animation-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
+    font-size: var(--xh-number-animation-font-size, var(--xh-_number-animation-size));
+    /* 等宽数字：逐位宽度一致，逐帧换数时后面的字符不会左右挪动，整块也不会一跳一跳地变宽 */
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-tight);
+  }
+
+  /* 上面声明了 display，会盖掉 UA 的 [hidden] 规则，收起态要在这里接回来 */
+  .xh-scope-number-animation[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  .xh-scope-number-animation[data-part='root'][data-size='sm'] {
+    --xh-_number-animation-size: var(--xh-control-font-lg);
+  }
+
+  .xh-scope-number-animation[data-part='root'][data-size='md'] {
+    --xh-_number-animation-size: var(--xh-text-heading-1-size);
+  }
+
+  .xh-scope-number-animation[data-part='root'][data-size='lg'] {
+    --xh-_number-animation-size: var(--xh-text-display-size);
+  }
+}

package/dist/css/number-field.css

@@ -0,0 +1,275 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* NumberField 独立皮肤同时传递引入字段视觉盒与字段内动作；full bundle 递归去重。 */
+@import '../family/field-chrome.css';
+@import '../family/action-control.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-number-field {
+    --xh-number-field-skin: 1;
+  }
+
+  /* 与文本框同一套堆叠：标签一行、输入行一行。
+     control 是必需的唯一视觉盒，输入框、加减钮与前后缀都放在里面；
+     输入与前后缀在左，减、加两颗动作依次收在逻辑末端。
+     组件层只把既有公开槽映射到家族合同；形态三档由家族按 control 上的 data-variant 生成，皮肤不再声明。 */
+  .xh-scope-number-field[data-part='root'] {
+    /* 作者塞进来的图标跟着控件的尺寸档走；它自己写了 size 时仍以作者的为准 */
+    --xh-icon-size: var(--xh-number-field-icon-size, var(--xh-glyph-size-md));
+
+    /* 尺寸档只换这几个私有槽，输入框与加减钮都从 root 继承它们，
+       换档不必给每个部件各写一条选择器 */
+    --xh-_number-field-h: var(--xh-control-h-md);
+    --xh-_number-field-px: var(--xh-control-px-md);
+    --xh-_number-field-gap: 0;
+    --xh-_number-field-font-size: var(--xh-control-font-md);
+    --xh-_number-field-trigger-font-size: var(--xh-control-font-md);
+    /* 精细指针下上下叠放的两颗钮离盒边的内收：sm 档盒矮，收半档，两颗钮与 md 档等高 */
+    --xh-_number-field-stepper-inset: var(--xh-space-1);
+
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--xh-number-field-gap, var(--xh-space-1));
+
+    /* 不传尺寸时一律这么宽，宽度不随内容走；父容器给不出这么宽时整件跟着收，地板同步让步，不越出父容器。
+       地板不高过缺省宽：使用者把缺省宽钉到底线以下时不必再放开底线 */
+    inline-size: var(--xh-number-field-control-w, var(--xh-control-w));
+    min-inline-size: min(var(--xh-number-field-control-w, var(--xh-control-w)), var(--xh-number-field-control-min-w, var(--xh-control-min-w)), 100%);
+    max-inline-size: 100%;
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  .xh-scope-number-field[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  .xh-scope-number-field[data-part='root'][data-size='sm'] {
+    --xh-icon-size: var(--xh-number-field-icon-size, var(--xh-glyph-size-sm));
+    --xh-_number-field-h: var(--xh-control-h-sm);
+    --xh-_number-field-px: var(--xh-control-px-sm);
+    --xh-_number-field-font-size: var(--xh-control-font-sm);
+    --xh-_number-field-trigger-font-size: var(--xh-control-font-sm);
+    --xh-_number-field-stepper-inset: var(--xh-space-0_5);
+  }
+
+  .xh-scope-number-field[data-part='root'][data-size='lg'] {
+    --xh-icon-size: var(--xh-number-field-icon-size, var(--xh-glyph-size-lg));
+    --xh-_number-field-h: var(--xh-control-h-lg);
+    --xh-_number-field-px: var(--xh-control-px-lg);
+    --xh-_number-field-font-size: var(--xh-control-font-lg);
+    --xh-_number-field-trigger-font-size: var(--xh-control-font-lg);
+  }
+
+  .xh-scope-number-field[data-part='label'] {
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-number-field-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-number-field-label-gap, var(--xh-space-2)) - var(--xh-number-field-gap, var(--xh-space-1)));
+    color: var(--xh-number-field-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-number-field-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-number-field-label-font-weight, var(--xh-text-label-weight));
+  }
+
+  .xh-scope-number-field[data-part='label'][data-disabled] {
+    color: var(--xh-number-field-label-fg-disabled, var(--xh-fg-muted));
+  }
+
+  /* —— 一体式 control：输入框与加减钮同框 —— */
+  /* control 是唯一的视觉盒：描边、底色、圆角、聚焦环、五态与悬停由 Field Chrome 家族画，
+     盒内三件都退成透明分段，整枚控件从头到尾只有这一道描边。
+     外观槽按所在部件取名 --xh-number-field-control-*；--xh-number-field-input-* 只管
+     input 自己的字色与内衬。控件不给内衬：内衬走 input 与钮各自的盒。 */
+  .xh-scope-number-field[data-part='control'] {
+    --xh-field-control-height: var(--xh-number-field-control-h, var(--xh-_number-field-h));
+    --xh-field-control-padding-inline: var(--xh-number-field-control-px, 0);
+    --xh-field-control-gap: var(--xh-number-field-control-gap, var(--xh-_number-field-gap));
+    --xh-field-control-min-inline-size: var(--xh-number-field-control-min-w, var(--xh-control-min-w));
+    --xh-field-control-radius: var(--xh-number-field-control-radius, var(--xh-shape-control));
+    --xh-field-bg-rest: var(--xh-number-field-control-bg, var(--xh-_field-variant-bg-rest));
+    --xh-field-bg-hover: var(--xh-number-field-control-bg-hover, var(--xh-_field-variant-bg-hover));
+    --xh-field-bg-read-only: var(--xh-number-field-control-bg-readonly, var(--xh-_field-variant-bg-read-only));
+    --xh-field-bg-disabled: var(--xh-number-field-control-bg-disabled, var(--xh-_field-variant-bg-disabled));
+    --xh-field-fg-rest: var(--xh-number-field-control-fg, var(--xh-fg-default));
+    --xh-field-border-rest: var(--xh-number-field-control-border, var(--xh-_field-variant-border-rest));
+    --xh-field-border-hover: var(--xh-number-field-control-border-hover, var(--xh-_field-variant-border-hover));
+    --xh-field-border-focus: var(--xh-number-field-control-border-focus, var(--xh-_field-variant-border-focus));
+    --xh-field-border-invalid: var(--xh-number-field-control-border-invalid, var(--xh-_field-variant-border-invalid));
+    --xh-field-shadow-rest: var(--xh-number-field-control-shadow, none);
+    /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
+    --xh-field-glyph-size: var(--xh-number-field-icon-size, var(--xh-_field-size-glyph-size));
+
+    position: relative;
+  }
+
+  /* 装饰段：货币符、单位、图标。与输入框同框，不参与分宽，弱一档前景把它与数字分开 */
+  .xh-scope-number-field[data-part='prefix'],
+  .xh-scope-number-field[data-part='suffix'] {
+    --xh-field-affix-fg: var(--xh-number-field-affix-fg, var(--xh-fg-muted));
+    --xh-field-affix-fg-disabled: var(--xh-number-field-affix-fg-disabled, var(--xh-fg-disabled));
+    --xh-field-affix-font-size: var(--xh-number-field-affix-font-size, var(--xh-_number-field-font-size));
+  }
+
+  .xh-scope-number-field[data-part='prefix'][hidden],
+  .xh-scope-number-field[data-part='suffix'][hidden] {
+    display: none;
+  }
+
+  /* 盒内 input：无边框无底无圆角无落影由家族重置，观感全归 control。
+     数字从起始缘排起，与同一列里别的字段的文字对齐，行内内衬留给它自己（control 不给内衬）；
+     前后缀图标/文字直接流式排在 input 两侧，不用再绝对定位 */
+  .xh-scope-number-field[data-part='control'] [data-part='input']:where(.xh-scope-number-field) {
+    --xh-field-input-fg: var(--xh-number-field-input-fg, var(--xh-fg-default));
+    --xh-field-input-font-size: var(--xh-number-field-input-font-size, var(--xh-_number-field-font-size));
+    --xh-field-placeholder-fg: var(--xh-number-field-placeholder-fg, var(--xh-fg-subtle));
+    --xh-field-autofill-bg: var(--xh-number-field-input-autofill-bg, var(--xh-bg-canvas));
+    --xh-field-autofill-fg: var(--xh-number-field-input-autofill-fg, var(--xh-fg-default));
+
+    inline-size: var(--xh-number-field-input-w, 5em);
+    padding-inline: var(--xh-number-field-input-px, var(--xh-_number-field-px));
+    font-variant-numeric: tabular-nums;
+    text-align: var(--xh-number-field-input-align, start);
+  }
+
+  /* 盒内按钮：正方视觉盒、inset 圆角、按承载面取的悬停 / 按下阶梯、粗指针热区与 :focus-visible 关环
+     全由 Action Control 的 field-inset ghost 档给，组件只映射既有覆盖槽。
+     常态只剩符号，符号取次要前景（钮是辅助动作，不与数字抢层级），悬停与按下才浮出底色。
+     可悬停的精细指针下平时收起、悬停或聚焦字段时显出（家族 hover-focus 档），并改成上下叠放，见下 */
+  .xh-scope-number-field[data-part='control'] [data-part='increment-trigger']:where(.xh-scope-number-field),
+  .xh-scope-number-field[data-part='control'] [data-part='decrement-trigger']:where(.xh-scope-number-field) {
+    --xh-action-visual-size: var(--xh-number-field-trigger-size, var(--xh-_action-profile-visual-size));
+    --xh-action-min-inline-size: var(--xh-number-field-trigger-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-number-field-trigger-radius, var(--xh-shape-inset));
+    /* 底色阶梯由 ghost 档给（透明 → 100 → 200），使用者槽只作覆盖入口 */
+    --xh-action-bg-pressed: var(--xh-number-field-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-number-field-trigger-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-number-field-trigger-fg-hover, var(--xh-fg-default));
+    --xh-action-border-rest: transparent;
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: none;
+    --xh-action-shadow-hover: none;
+    --xh-action-shadow-pressed: none;
+    --xh-action-font-size: var(--xh-number-field-trigger-font-size, var(--xh-_number-field-trigger-font-size));
+    /* 配方尚未把 profile 字形档灌进 --xh-icon-size，钮内字形先按 field-inset 档逐钮取值 */
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+
+    border-width: 0;
+  }
+
+  /* DOM 顺序不承担视觉位置：既有用法即使把减钮写在 input 前面，默认仍统一收进右侧动作组。 */
+  .xh-scope-number-field[data-part='control'] [data-part='decrement-trigger']:where(.xh-scope-number-field) {
+    order: 1;
+  }
+
+  .xh-scope-number-field[data-part='control'] [data-part='increment-trigger']:where(.xh-scope-number-field) {
+    order: 2;
+  }
+
+  .xh-scope-number-field[data-part='control'] [data-part='increment-trigger'][hidden]:where(.xh-scope-number-field),
+  .xh-scope-number-field[data-part='control'] [data-part='decrement-trigger'][hidden]:where(.xh-scope-number-field) {
+    display: none;
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  .xh-scope-number-field[data-part='control'] [data-part='increment-trigger']:where(.xh-scope-number-field):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-plus) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-plus) center / contain no-repeat;
+  }
+
+  .xh-scope-number-field[data-part='control'] [data-part='decrement-trigger']:where(.xh-scope-number-field):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-minus) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
+  }
+
+  /* 可悬停的精细指针：两颗钮上下叠在盒的逻辑末端，各占盒高一半（四周内收一截），宽取指示符大档；
+     显出时铺一层淡底，悬停 / 按下沿淡底阶梯升一档、两档，字形换成上下箭头、取指示符最小档：
+     一颗钮只有盒内高的一半减内收（sm / md 11px，紧凑 9px），小档 12px 的字形会比钮高出一截。
+     两颗钮共边相接，按下只换面不缩放。钮浮在盒上、不占流：盒的末端让出钮那一截，
+     输入与后缀不会排到钮底下，钮收起时也不跳。粗指针与不能悬停的设备仍是两颗正方钮横排在末端、常显，
+     那里一颗叠放的钮只有半个控件高，够不着触控目标尺寸 */
+  @media (hover: hover) and (pointer: fine) {
+    .xh-scope-number-field[data-part='control']:has([data-part='increment-trigger'], [data-part='decrement-trigger']) {
+      padding-inline-end: calc(
+        var(--xh-number-field-stepper-w, var(--xh-control-indicator-lg))
+        + 2 * var(--xh-number-field-stepper-inset, var(--xh-_number-field-stepper-inset))
+      );
+    }
+
+    .xh-scope-number-field[data-part='control'] [data-part='increment-trigger']:where(.xh-scope-number-field),
+    .xh-scope-number-field[data-part='control'] [data-part='decrement-trigger']:where(.xh-scope-number-field) {
+      --xh-action-bg-rest: var(--xh-number-field-stepper-bg, var(--xh-bg-subtle));
+      --xh-action-bg-hover: var(--xh-number-field-stepper-bg-hover, var(--xh-bg-subtle-hover));
+      --xh-action-bg-pressed: var(--xh-number-field-trigger-bg-active, var(--xh-bg-subtle-active));
+      --xh-action-bg-disabled: var(--xh-number-field-stepper-bg, var(--xh-bg-subtle));
+      --xh-action-scale-pressed: none;
+      --xh-icon-size: var(--xh-control-indicator-xs);
+
+      position: absolute;
+      inset-inline-end: var(--xh-number-field-stepper-inset, var(--xh-_number-field-stepper-inset));
+      inline-size: var(--xh-number-field-stepper-w, var(--xh-control-indicator-lg));
+      min-inline-size: 0;
+      block-size: calc(50% - var(--xh-number-field-stepper-inset, var(--xh-_number-field-stepper-inset)));
+    }
+
+    .xh-scope-number-field[data-part='control'] [data-part='increment-trigger']:where(.xh-scope-number-field) {
+      inset-block-start: var(--xh-number-field-stepper-inset, var(--xh-_number-field-stepper-inset));
+    }
+
+    .xh-scope-number-field[data-part='control'] [data-part='decrement-trigger']:where(.xh-scope-number-field) {
+      inset-block-end: var(--xh-number-field-stepper-inset, var(--xh-_number-field-stepper-inset));
+    }
+
+    .xh-scope-number-field[data-part='control'] [data-part='increment-trigger']:where(.xh-scope-number-field):empty::before {
+      -webkit-mask-image: var(--xh-glyph-mark-chevron-up);
+      mask-image: var(--xh-glyph-mark-chevron-up);
+    }
+
+    .xh-scope-number-field[data-part='control'] [data-part='decrement-trigger']:where(.xh-scope-number-field):empty::before {
+      -webkit-mask-image: var(--xh-glyph-mark-chevron-down);
+      mask-image: var(--xh-glyph-mark-chevron-down);
+    }
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-number-field[data-part='control'][hidden] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-number-field[data-part='control'] [data-part='increment-trigger']:where(.xh-scope-number-field):empty::before,
+    .xh-scope-number-field[data-part='control'] [data-part='decrement-trigger']:where(.xh-scope-number-field):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-number-field[data-part='control'] [data-part='increment-trigger']:where(.xh-scope-number-field):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before,
+    .xh-scope-number-field[data-part='control'] [data-part='decrement-trigger']:where(.xh-scope-number-field):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-number-field[data-part='control'] [data-part='increment-trigger'][data-disabled]:where(.xh-scope-number-field):empty::before,
+    .xh-scope-number-field[data-part='control'] [data-part='decrement-trigger'][data-disabled]:where(.xh-scope-number-field):empty::before {
+      background-color: GrayText;
+    }
+  }
+}

package/dist/css/overlay-arrow.css

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/*
+ * 浮层箭头的几何，八类浮层共用一份，只匹配这些组件自身的 arrow 部件。
+ *
+ * 箭头是正方形转 45°，构成尖角的是哪两条物理边，所以贴边与摘边框都写物理属性。
+ * 行内轴上的中心点仍写逻辑属性：定位引擎在 RTL 下已把 arrow-x 镜像成逻辑量。
+ *
+ * 底色与描边色留在各组件皮肤，它们同时把自己的内联落点槽接到这里的统一名字上。
+ * 引入顺序排在消费方皮肤之后；作用域使用 :where，维持原有特异性和摘边优先级。
+ */
+@layer xihan.components {
+  :where(.xh-scope-context-menu, .xh-scope-hover-card, .xh-scope-menu, .xh-scope-menubar, .xh-scope-popconfirm, .xh-scope-popover, .xh-scope-tour, .xh-scope-tooltip)[data-part='arrow'] {
+    position: absolute;
+    inline-size: var(--xh-_overlay-arrow-size);
+    block-size: var(--xh-_overlay-arrow-size);
+    rotate: 45deg;
+  }
+
+  /* 浮层落在锚点下方：箭头贴 content 上缘，摘掉埋进 content 的下、右两条边 */
+  :where(.xh-scope-context-menu, .xh-scope-hover-card, .xh-scope-menu, .xh-scope-menubar, .xh-scope-popconfirm, .xh-scope-popover, .xh-scope-tour, .xh-scope-tooltip)[data-part='arrow'][data-placement^='bottom'] {
+    top: calc(var(--xh-_overlay-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_overlay-arrow-x) - var(--xh-_overlay-arrow-size) / 2);
+    border-right: 0;
+    border-bottom: 0;
+  }
+
+  /* 浮层落在锚点上方：箭头贴 content 下缘，摘掉上、左两条边 */
+  :where(.xh-scope-context-menu, .xh-scope-hover-card, .xh-scope-menu, .xh-scope-menubar, .xh-scope-popconfirm, .xh-scope-popover, .xh-scope-tour, .xh-scope-tooltip)[data-part='arrow'][data-placement^='top'] {
+    bottom: calc(var(--xh-_overlay-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_overlay-arrow-x) - var(--xh-_overlay-arrow-size) / 2);
+    border-top: 0;
+    border-left: 0;
+  }
+
+  /* 浮层落在锚点右侧：箭头贴 content 左缘，摘掉上、右两条边 */
+  :where(.xh-scope-context-menu, .xh-scope-hover-card, .xh-scope-menu, .xh-scope-menubar, .xh-scope-popconfirm, .xh-scope-popover, .xh-scope-tour, .xh-scope-tooltip)[data-part='arrow'][data-placement^='right'] {
+    top: calc(var(--xh-_overlay-arrow-y) - var(--xh-_overlay-arrow-size) / 2);
+    /* stylelint-disable-next-line property-disallowed-list -- 旋转是物理的，贴边跟着物理走 */
+    left: calc(var(--xh-_overlay-arrow-size) / -2);
+    border-top: 0;
+    border-right: 0;
+  }
+
+  /* 浮层落在锚点左侧：箭头贴 content 右缘，摘掉下、左两条边 */
+  :where(.xh-scope-context-menu, .xh-scope-hover-card, .xh-scope-menu, .xh-scope-menubar, .xh-scope-popconfirm, .xh-scope-popover, .xh-scope-tour, .xh-scope-tooltip)[data-part='arrow'][data-placement^='left'] {
+    top: calc(var(--xh-_overlay-arrow-y) - var(--xh-_overlay-arrow-size) / 2);
+    /* stylelint-disable-next-line property-disallowed-list -- 旋转是物理的，贴边跟着物理走 */
+    right: calc(var(--xh-_overlay-arrow-size) / -2);
+    border-bottom: 0;
+    border-left: 0;
+  }
+}

package/dist/css/page-header.css

@@ -0,0 +1,221 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 page header 样式。 */
+
+/* 返回钮接动作钮家族：独立引入本皮肤时同样带上家族配方，full bundle 递归去重。 */
+@import '../family/action-control.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-page-header {
+    --xh-page-header-skin: 1;
+  }
+
+  .xh-scope-page-header[data-part='root'] {
+    /* 尺寸档只换这三个私有槽，各段从根上继承它们，换档不必给每个部件各写一条选择器 */
+    --xh-_page-header-py: var(--xh-space-4);
+    --xh-_page-header-row-gap: var(--xh-space-1);
+    --xh-_page-header-title-size: var(--xh-text-heading-2-size);
+    /* 形态档只换这两个：不画面的那一档左右不留内衬、也不切圆角 */
+    --xh-_page-header-px: 0;
+    --xh-_page-header-radius: 0;
+
+    /* 返回、媒体、标题、副标题与操作区分列：副标题跟在标题后面同一行，中间一条竖线隔开。
+       标题列按内容宽、但能收到 0，副标题列至少留下竖线与一个字：不可断的长标题在列内断行，不把页头撑出容器 */
+    display: grid;
+    grid-auto-flow: dense;
+    grid-template-columns: auto auto minmax(0, max-content) minmax(min-content, 1fr) auto;
+    align-items: center;
+    row-gap: var(--xh-page-header-row-gap, var(--xh-_page-header-row-gap));
+    padding-block: var(--xh-page-header-py, var(--xh-_page-header-py));
+    padding-inline: var(--xh-page-header-px, var(--xh-_page-header-px));
+    border-radius: var(--xh-page-header-radius, var(--xh-_page-header-radius));
+    color: var(--xh-page-header-fg, var(--xh-fg-default));
+  }
+
+  /* 上面声明了 display，会盖掉 UA 的 [hidden] 规则，收起态要在这里接回来 */
+  .xh-scope-page-header[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  .xh-scope-page-header[data-part='root'][data-size='sm'] {
+    --xh-_page-header-py: var(--xh-space-3);
+    --xh-_page-header-row-gap: var(--xh-space-0_5);
+    --xh-_page-header-title-size: var(--xh-control-font-lg);
+  }
+
+  .xh-scope-page-header[data-part='root'][data-size='lg'] {
+    --xh-_page-header-py: var(--xh-space-6);
+    --xh-_page-header-row-gap: var(--xh-space-2);
+    --xh-_page-header-title-size: var(--xh-text-heading-1-size);
+  }
+
+  /* 带面包屑的缺省档上下收一档：面包屑本身已在标题之上占了一行 */
+  .xh-scope-page-header[data-part='root']:not([data-size='sm'], [data-size='lg']):has(> [data-part='breadcrumb']) {
+    --xh-_page-header-py: var(--xh-space-3);
+  }
+
+  /* —— 分隔线 —— */
+  /* 只有贴底的 ghost 画这条下边线：一块切了圆角的面底下横一条直线，两头会露在圆角外面，
+     有面的两档由自己的边界接手同一件事——把页头与下面的内容分开 */
+  .xh-scope-page-header[data-part='root'][data-variant='ghost'][data-split] {
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-page-header-border, var(--xh-border-default));
+  }
+
+  /* —— 形态 —— */
+  /* ghost 不在这儿：它就是上面那套基础取值，贴在页面底色上不画面。
+     画了面的两档左右补上与上下同档的内衬，否则内容会贴着那块面的边 */
+  .xh-scope-page-header[data-part='root']:is([data-variant='outline'], [data-variant='subtle']) {
+    --xh-_page-header-px: var(--xh-_page-header-py);
+    --xh-_page-header-radius: var(--xh-shape-surface);
+  }
+
+  /* outline 是一张静态内容面：--xh-border-default 描边撑住这块面的边界 + surface 底，不叠投影；
+     --xh-border-subtle 只作 ghost 贴底那条分隔线用，不当根面外边 */
+  .xh-scope-page-header[data-part='root'][data-variant='outline'] {
+    border: var(--xh-stroke-thin) solid var(--xh-page-header-border, var(--xh-border-default));
+    background: var(--xh-page-header-bg, var(--xh-bg-surface));
+  }
+
+  /* subtle 用淡底当边界：描边让位给底色但留住 1px 边位（与 outline 同一几何）、无影 */
+  .xh-scope-page-header[data-part='root'][data-variant='subtle'] {
+    border: var(--xh-stroke-thin) solid transparent;
+    background: var(--xh-page-header-bg, var(--xh-bg-subtle));
+  }
+
+  /* —— 各段 —— */
+  /* 面包屑占满一整行排在标题之上：它写在标记的最前面，整行铺开就把标题挤到了下一行 */
+  .xh-scope-page-header[data-part='breadcrumb'] {
+    grid-column: 1 / -1;
+    color: var(--xh-page-header-breadcrumb-fg, var(--xh-fg-muted));
+    font-size: var(--xh-page-header-breadcrumb-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-leading-normal);
+  }
+
+  /* 头像 / 图标位：不参与伸缩，图形本身多大由作者定 */
+  .xh-scope-page-header[data-part='media'] {
+    grid-column: 2;
+    margin-inline-end: var(--xh-page-header-column-gap, var(--xh-space-3));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* 返回位是 icon ghost 档的动作钮：盒与三态面由家族给，这里只摆位置并把字色压到次级前景 */
+  .xh-scope-page-header[data-part='back-trigger'] {
+    --xh-action-fg-rest: var(--xh-page-header-back-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-page-header-back-fg-hover, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-page-header-back-fg-hover, var(--xh-fg-default));
+
+    grid-column: 1;
+    margin-inline-end: var(--xh-page-header-column-gap, var(--xh-space-3));
+  }
+
+  .xh-scope-page-header[data-part='title'] {
+    grid-column: 3;
+    margin: 0;
+    /* 标题不参与伸缩，长过整行时收到行宽为止，中间没有断点的长串在行尾断开，
+       不把整条页头撑出容器 */
+    max-inline-size: 100%;
+    overflow-wrap: anywhere;
+    color: var(--xh-page-header-title-fg, var(--xh-fg-default));
+    font-size: var(--xh-page-header-title-font-size, var(--xh-_page-header-title-size));
+    /* 页面级标题：字重走标题档令牌，不直接下探字重原语 */
+    font-weight: var(--xh-page-header-title-font-weight, var(--xh-text-heading-2-weight));
+    line-height: var(--xh-leading-tight);
+  }
+
+  /* 副标题跟在标题后面、吃掉到操作区之间的剩余宽度，长文本在这里收窄换行；
+     与标题之间一条 1 × 16px 的竖线，两侧各 12px */
+  .xh-scope-page-header[data-part='description'] {
+    grid-column: 4;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    min-inline-size: 0;
+    color: var(--xh-page-header-description-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-page-header-description-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-normal);
+  }
+
+  .xh-scope-page-header[data-part='title'] + .xh-scope-page-header[data-part='description']::before {
+    content: '';
+    flex: none;
+    align-self: center;
+    inline-size: var(--xh-stroke-thin);
+    block-size: var(--xh-glyph-size-sm);
+    margin-inline: var(--xh-space-3);
+    background: var(--xh-page-header-divider, var(--xh-border-default));
+  }
+
+  /* 操作区贴到行尾，没有副标题占位时也一样靠边 */
+  .xh-scope-page-header[data-part='extra'] {
+    grid-column: 5;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--xh-page-header-extra-gap, var(--xh-space-2));
+    margin-inline-start: var(--xh-page-header-column-gap, var(--xh-space-3));
+    justify-self: end;
+  }
+
+  /* 页脚占满一整行，前面有内容时自然被挤到下一行；与标题行之间再让出 12px */
+  .xh-scope-page-header[data-part='footer'] {
+    grid-column: 1 / -1;
+    margin-block-start: var(--xh-space-3);
+    color: var(--xh-page-header-footer-fg, var(--xh-fg-muted));
+    font-size: var(--xh-page-header-footer-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-leading-normal);
+  }
+
+  /* 窄于 sm 断点时标题区占满第二列、副标题回到标题下一行、操作区换到再下一行。
+     写成 min-width 的补集：640px 本身归宽档，与其余皮肤在同一宽度切换 */
+  @media not all and (min-width: 640px) {
+    .xh-scope-page-header[data-part='root'] {
+      grid-template-columns: auto minmax(0, 1fr);
+    }
+
+    .xh-scope-page-header[data-part='media'],
+    .xh-scope-page-header[data-part='title'],
+    .xh-scope-page-header[data-part='description'] {
+      grid-column: 2;
+    }
+
+    .xh-scope-page-header[data-part='title'] + .xh-scope-page-header[data-part='description']::before {
+      display: none;
+    }
+
+    .xh-scope-page-header[data-part='root']:has(> [data-part='description'])
+      > :is([data-part='back-trigger'], [data-part='media']):where(.xh-scope-page-header) {
+      grid-row: span 2;
+    }
+
+    .xh-scope-page-header[data-part='root'] > [data-part='extra']:where(.xh-scope-page-header) {
+      grid-column: 1 / -1;
+      grid-row: auto;
+      margin-inline-start: 0;
+      justify-self: start;
+    }
+  }
+
+  /* 强制色：标题与副标题之间的竖线是底色画的，系统换掉底色线就消失，改写 CanvasText */
+  @media (forced-colors: active) {
+    .xh-scope-page-header[data-part='title'] + .xh-scope-page-header[data-part='description']::before {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-page-header[data-part='back-trigger'][hidden],
+  .xh-scope-page-header[data-part='media'][hidden],
+  .xh-scope-page-header[data-part='description'][hidden],
+  .xh-scope-page-header[data-part='extra'][hidden] {
+    display: none;
+  }
+}