@xihan-ui/styles 3.1.0 → 4.0.0

package/css/breadcrumb.css

@@ -23,7 +23,8 @@
 
     /* 尺寸档只换这两个私有槽，列表与链接都从 root 继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_breadcrumb-font-size: var(--xh-control-font-md);
-    --xh-_breadcrumb-gap: var(--xh-space-2);
+    /* 链接自带 4px 横向内衬，列表间距再给 4px：文字到分隔符一共 8px */
+    --xh-_breadcrumb-gap: var(--xh-space-1);
     /* 当前项与链接悬停的强调色随语气走。没写 data-tone 时 --xh-_tone-fg 没被声明，
        退回原来的前景色。聚焦环不在其列，它恒是 --xh-ring-focus */
     --xh-_breadcrumb-accent-text: var(--xh-_tone-fg, var(--xh-fg-default));
@@ -38,12 +39,12 @@
      不在控件间距那把尺上（那把尺的大档与中档同值），三档一律取空间尺 */
   [data-scope='breadcrumb'][data-part='root'][data-size='sm'] {
     --xh-_breadcrumb-font-size: var(--xh-control-font-sm);
-    --xh-_breadcrumb-gap: var(--xh-space-1_5);
+    --xh-_breadcrumb-gap: var(--xh-space-0_5);
   }
 
   [data-scope='breadcrumb'][data-part='root'][data-size='lg'] {
     --xh-_breadcrumb-font-size: var(--xh-control-font-lg);
-    --xh-_breadcrumb-gap: var(--xh-space-3);
+    --xh-_breadcrumb-gap: var(--xh-space-2);
   }
 
   /* ol 的项目符号与内外边距是 UA 给的，库里没有全局 preflight，只能在这儿自己抹平 */
@@ -75,8 +76,9 @@
     display: none;
   }
 
-  /* 链接的几何、字号与面全经家族桥接槽：静息 muted / regular，悬停走白底承载 hover 100 + 随语气的字色，
-     按下 pressed 200 只换面；当前页那条不再是"可去的地方"：连接层投影
+  /* 链接的几何、字号与面全经家族桥接槽：静息 muted / regular，悬停走白底承载 hover 100 + 品牌字（写了语气随语气），
+     按下 pressed 200 + 深一档品牌字（品牌字压在 200 档上只有 4:1，按下必须取 strong）；
+     链接盒最少 24px 高，够得上目标尺寸下限；当前页那条不再是"可去的地方"：连接层投影
      data-xh-collection-terminal，家族给透明面 + 随语气的 fg-default + medium + cursor default，不响应悬停与按下，
      并压过它同时带的 aria-disabled 禁用面。本条 (0,2,0) 压过家族基础块 (0,1,0)，不能再写 color / background */
   [data-scope='breadcrumb'][data-part='link'] {
@@ -88,14 +90,16 @@
     --xh-collection-glyph-size: var(--xh-breadcrumb-icon-size, var(--xh-glyph-size-text));
     --xh-collection-fg-rest: var(--xh-breadcrumb-fg, var(--xh-fg-muted));
     --xh-collection-bg-hover: var(--xh-breadcrumb-link-bg-hover, var(--xh-bg-subtle));
-    --xh-collection-fg-hover: var(--xh-breadcrumb-link-fg-hover, var(--xh-_breadcrumb-accent-text));
+    --xh-collection-fg-hover: var(--xh-breadcrumb-link-fg-hover, var(--xh-_tone-fg, var(--xh-fg-brand)));
     --xh-collection-bg-pressed: var(--xh-breadcrumb-link-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-collection-fg-pressed: var(--xh-breadcrumb-link-fg-pressed, var(--xh-_tone-fg, var(--xh-fg-brand-strong)));
     --xh-collection-fg-terminal: var(--xh-breadcrumb-link-fg-current, var(--xh-_breadcrumb-accent-text));
     --xh-collection-font-weight-terminal: var(--xh-breadcrumb-link-font-weight-current, var(--xh-font-weight-medium));
 
     display: inline-flex;
     align-items: center;
     gap: var(--xh-breadcrumb-link-gap, var(--xh-space-1));
+    min-block-size: var(--xh-breadcrumb-link-h, var(--xh-control-action-size));
     /* 一层的名字可能很长（文档标题、订单号），压不住会把整条路径撑开 */
     max-inline-size: var(--xh-breadcrumb-link-max-w, var(--xh-nav-link-max-w));
     /* 行高随 root 的行距槽：家族基础块给条目写了 leading-normal，这里接回 root 那一支 */
@@ -133,7 +137,8 @@
     margin: 0;
     align-items: center;
     justify-content: center;
-    color: var(--xh-breadcrumb-separator-fg, var(--xh-fg-subtle));
+    /* 分隔符是 aria-hidden 的纯装饰，取最弱一档前景，不与可点的链接抢层级 */
+    color: var(--xh-breadcrumb-separator-fg, var(--xh-fg-disabled));
     user-select: none;
   }
 
@@ -167,11 +172,13 @@
     --xh-collection-glyph-size: var(--xh-breadcrumb-icon-size, var(--xh-glyph-size-text));
     --xh-collection-fg-rest: var(--xh-breadcrumb-fg, var(--xh-fg-muted));
     --xh-collection-bg-hover: var(--xh-bg-subtle);
-    --xh-collection-fg-hover: var(--xh-_breadcrumb-accent-text);
+    --xh-collection-fg-hover: var(--xh-_tone-fg, var(--xh-fg-brand));
     --xh-collection-bg-pressed: var(--xh-bg-subtle-hover);
+    --xh-collection-fg-pressed: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 
     display: inline-flex;
     align-items: center;
+    min-block-size: var(--xh-breadcrumb-ellipsis-trigger-h, var(--xh-breadcrumb-link-h, var(--xh-control-action-size)));
     line-height: var(--xh-breadcrumb-leading, var(--xh-leading-tight));
   }
 
@@ -190,7 +197,7 @@
     display: none;
   }
 
-  /* 没写内容就由皮肤画兜底字形（向前的尖角）；作者写了斜杠或自己的图形，这条即不命中 */
+  /* 没写内容就由皮肤画兜底字形（一条斜线）；作者写了自己的字符或图形，这条即不命中 */
   [data-scope='breadcrumb'][data-part='separator']:empty::before {
     content: '';
     display: inline-block;
@@ -198,13 +205,8 @@
     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;
-  }
-
-  /* 从右往左排版时「向前」在左边 */
-  [dir='rtl'] [data-scope='breadcrumb'][data-part='separator']:empty::before {
-    rotate: 180deg;
+    -webkit-mask: var(--xh-glyph-mark-slash) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-slash) center / contain no-repeat;
   }
 
   @media (forced-colors: active) {

package/css/button-group.css

@@ -31,12 +31,10 @@
        后者是使用者的入口，写死它，进了组的胶囊按钮就再也圆不起来 */
     --xh-_button-group-radius: 0;
 
-    /* 段与段共边焊成一条，solid 段静息不落贴地软影、悬停那一档不抬：抬起其中一段，投影会压到
-       左右两段的面上。两档都只留实心面顶边那条高光；其余形态的影本来就是 none，这两支只被
-       button.css 的 solid 块消费。颜色不在这里灌：段自带 data-xh-action-variant，底 / 前景 / 描边由
-       家族形态矩阵按段自己的形态给出 */
-    --xh-_button-group-shadow-rest: var(--xh-_highlight-tone);
-    --xh-_button-group-shadow-hover: var(--xh-_highlight-tone);
+    /* 段与段共边焊成一条，solid 段悬停那一档不抬：抬起其中一段，投影会压到左右两段的面上。
+       其余形态的影本来就是 none，这一支只被 button.css 的 solid 块消费。颜色不在这里灌：段自带
+       data-xh-action-variant，底 / 前景 / 描边由家族形态矩阵按段自己的形态给出 */
+    --xh-_button-group-shadow-hover: none;
     --xh-_group-separator-size: calc(var(--xh-_button-group-h, var(--xh-control-h-md)) / 2);
 
     display: inline-flex;

package/css/button.css

@@ -50,14 +50,11 @@
     font-weight: var(--xh-button-font-weight, var(--xh-text-label-weight));
   }
 
-  /* Button soft 是登记在册的 raised 消费者：solid 一档静息带顶光与贴地软影，悬停抬到 raised，按下只留顶光。
-     成组时段与段共边焊成一条，静息不落软影、悬停不抬起——投影会压到左右两段的面上，
-     ButtonGroup 用 --xh-_button-group-shadow-rest / -hover 只留顶光 */
+  /* Button 是登记在册的 raised 消费者：solid 一档悬停抬到 raised。raised 缺省 none，实心钮是平的——
+     不画顶光、不落软影，层级只靠面色（主题给 raised 一层影，悬停才抬起来）。
+     成组时段与段共边焊成一条，悬停不抬起：投影会压到左右两段的面上，ButtonGroup 用 --xh-_button-group-shadow-hover 关掉 */
   [data-scope='button'][data-part='root'][data-variant='solid'] {
-    --xh-action-highlight-pressed: var(--xh-_highlight-tone);
-    --xh-_button-shadow-rest: var(--xh-_button-group-shadow-rest, var(--xh-_highlight-tone), var(--xh-material-soft-shadow));
-    --xh-_button-shadow-hover: var(--xh-_button-group-shadow-hover, var(--xh-_highlight-tone), var(--xh-elevation-raised));
-    --xh-_button-shadow-pressed: var(--xh-_highlight-tone);
+    --xh-_button-shadow-hover: var(--xh-_button-group-shadow-hover, var(--xh-elevation-raised));
   }
 
   /* 实心面用对比前景作内环，再加品牌外环；不覆盖表面 box-shadow。 */
@@ -156,16 +153,20 @@
     content: none;
   }
 
+  /* 作者的图形是任意节点，规则主体没有可认的特征：加载与否写在 indicator 自己的私有槽上，
+     图形只读槽。翻转 data-loading 时失效的只有 indicator 本身，不会让全页同名属性的变化整棵子树重算 */
   [data-scope='button'][data-part='indicator'] > * {
-    opacity: 0;
+    opacity: var(--xh-_button-indicator-opacity, 0);
     transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition-delay: calc(var(--xh-motion-duration-micro) * var(--xh-_button-indicator-delay, 0));
     animation: xh-spin var(--xh-button-spin-duration, var(--xh-motion-loop-spin)) var(--xh-motion-ease-loop) infinite paused;
+    animation-play-state: var(--xh-_button-indicator-play, paused);
   }
 
-  [data-scope='button'][data-part='root'][data-loading] > [data-scope='button'][data-part='indicator'] > * {
-    opacity: 1;
-    transition-delay: var(--xh-motion-duration-micro);
-    animation-play-state: running;
+  [data-scope='button'][data-part='root'][data-loading] > [data-scope='button'][data-part='indicator'] {
+    --xh-_button-indicator-opacity: 1;
+    --xh-_button-indicator-delay: 1;
+    --xh-_button-indicator-play: running;
   }
 
   /* 钮里原有的内容与环交叉：进入在途同样等一个 micro 才淡出、留位不塌，退出不等 */

package/css/calendar-picker.css

@@ -14,14 +14,11 @@
     --xh-calendar-picker-skin: 1;
   }
 
+  /* 标题栏与网格各自带内衬、彼此不留空当：标题栏下沿那道分隔线就是两块的界 */
   [data-scope='calendar-picker'][data-part='root'] {
-    /* 翻页钮是 sm 档的图标钮（--xh-control-h-sm 见方），钮里的图标按 sm 档取 --xh-glyph-size-sm；
-       作者塞进去的图标与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-calendar-picker-icon-size, var(--xh-glyph-size-sm));
-
     display: flex;
     flex-direction: column;
-    gap: var(--xh-calendar-picker-gap, var(--xh-space-2));
+    gap: var(--xh-calendar-picker-gap, var(--xh-space-0));
     /* 数字等宽：1 与 7 的字形宽度在比例字体里并不相同，不定住会让整张网格随月份抖动 */
     font-variant-numeric: tabular-nums;
   }
@@ -30,12 +27,20 @@
     display: none;
   }
 
+  /* 标题栏：上下 8、左右 16 的内衬里放一排 24 高的钮与标题，下沿一道通栏分隔线。
+     翻页钮里的字形取 xs 图标钮的字形档（--xh-glyph-size-sm），作者塞进钮里的图标与皮肤画的兜底字形同一把尺；
+     这一档写在标题栏上而不是日历根上：日期选择器里的日历没有根节点，标题栏两边都有 */
   [data-scope='calendar-picker'][data-part='header'] {
+    --xh-icon-size: var(--xh-calendar-picker-icon-size, var(--xh-glyph-size-sm));
+
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--xh-calendar-picker-header-gap, var(--xh-space-2));
-    min-block-size: var(--xh-control-h-sm);
+    gap: var(--xh-calendar-picker-header-gap, var(--xh-space-1));
+    min-block-size: calc(var(--xh-control-action-size) + 2 * var(--xh-calendar-picker-header-py, var(--xh-space-2)) + var(--xh-stroke-thin));
+    padding-block: var(--xh-calendar-picker-header-py, var(--xh-space-2));
+    padding-inline: var(--xh-calendar-picker-header-px, var(--xh-space-4));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-calendar-picker-header-border, var(--xh-material-solid-border));
   }
 
   [data-scope='calendar-picker'][data-part='header'][hidden] {
@@ -47,32 +52,30 @@
     text-align: center;
     color: var(--xh-calendar-picker-heading-fg, var(--xh-fg-default));
     font-size: var(--xh-calendar-picker-heading-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-calendar-picker-heading-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-calendar-picker-heading-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-none);
     user-select: none;
   }
 
   /* 标题里的年与月：点它们逐级钻上去（年 → 十年格、月 → 月格）。
-     长得像标题而不像按钮——它本来就是标题，只是可点 */
-  /* 标题里的年与月接 Action Control text 档（日期翻页按钮同族）：盒、按下 / 禁用面、0.97 缩放与换底、焦点环与过渡
-     由家族配方给，这里只把使用者槽映射到桥接槽。长得像标题而不像按钮——它本来就是标题，只是可点：静息透明（ghost），
-     悬停只换字色不换底（标题不是一枚按钮面），按下换到 200 档中性面（白底承载）；到顶那一层只作标题显示，
-     光标别装成能点，也不再换面 */
+     接 Action Control text 档（日期翻页按钮同族）、xs 档 24 高：盒、悬停 / 按下 / 禁用面、焦点环与过渡由家族配方给，
+     这里只把使用者槽映射到桥接槽。长得像标题而不像按钮——它本来就是标题，只是可点：静息透明（ghost）、
+     字色始终是标题色，悬停 100 → 按下 200 只换底（白底承载）；到顶那一层只作标题显示，光标别装成能点 */
   [data-scope='calendar-picker'][data-part='heading-year-trigger']:not([hidden]),
   [data-scope='calendar-picker'][data-part='heading-month-trigger']:not([hidden]) {
-    --xh-action-padding-inline: var(--xh-calendar-picker-heading-trigger-px, var(--xh-space-1));
+    --xh-action-padding-inline: var(--xh-calendar-picker-heading-trigger-px, var(--xh-space-0_5));
     --xh-action-radius: var(--xh-calendar-picker-heading-trigger-radius, var(--xh-shape-control));
-    --xh-action-bg-hover: transparent;
+    --xh-action-bg-hover: var(--xh-calendar-picker-heading-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
     --xh-action-bg-pressed: var(--xh-calendar-picker-heading-trigger-bg-pressed, var(--xh-_action-variant-bg-pressed));
     --xh-action-fg-rest: var(--xh-calendar-picker-heading-fg, var(--xh-fg-default));
-    --xh-action-fg-hover: var(--xh-calendar-picker-heading-trigger-fg-hover, var(--xh-fg-brand));
-    --xh-action-fg-pressed: var(--xh-calendar-picker-heading-trigger-fg-hover, var(--xh-fg-brand));
+    --xh-action-fg-hover: var(--xh-calendar-picker-heading-fg, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-calendar-picker-heading-fg, var(--xh-fg-default));
     --xh-action-fg-focus-visible: var(--xh-calendar-picker-heading-fg, var(--xh-fg-default));
     --xh-action-fg-disabled: var(--xh-calendar-picker-heading-fg, var(--xh-fg-default));
     --xh-action-font-size: var(--xh-calendar-picker-heading-font-size, var(--xh-text-label-size));
     --xh-action-cursor-disabled: default;
 
-    font-weight: var(--xh-calendar-picker-heading-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-calendar-picker-heading-font-weight, var(--xh-font-weight-medium));
   }
 
   [data-scope='calendar-picker'][data-part='heading-year-trigger'][hidden],
@@ -80,15 +83,15 @@
     display: none;
   }
 
-  /* 四颗方向钮接 Action Control icon 档（日期翻页按钮）、ghost 形态：正方盒、悬停 / 按下 / 禁用面、0.97 缩放与换底、
-     粗指针热区、焦点环与过渡由家族配方给，这里只把使用者槽映射到桥接槽；钮坐在日历的白底上，悬停 100 → 按下 200 */
+  /* 四颗方向钮接 Action Control icon 档 xs（24 见方）、ghost 形态：悬停 / 按下 / 禁用面、粗指针热区、焦点环与过渡
+     由家族配方给，这里只把使用者槽映射到桥接槽。钮是正方的单图标动作，取圆；坐在日历的白底上，悬停 100 → 按下 200 */
   [data-scope='calendar-picker'][data-part='prev-year-trigger'],
   [data-scope='calendar-picker'][data-part='prev-trigger'],
   [data-scope='calendar-picker'][data-part='next-year-trigger'],
   [data-scope='calendar-picker'][data-part='next-trigger'] {
     --xh-action-visual-size: var(--xh-calendar-picker-nav-size, var(--xh-_action-profile-visual-size));
     --xh-action-min-inline-size: var(--xh-calendar-picker-nav-size, var(--xh-_action-profile-visual-size));
-    --xh-action-radius: var(--xh-calendar-picker-nav-radius, var(--xh-shape-control));
+    --xh-action-radius: var(--xh-calendar-picker-nav-radius, var(--xh-shape-circle));
     --xh-action-bg-rest: var(--xh-calendar-picker-nav-bg, var(--xh-_action-variant-bg-rest));
     --xh-action-bg-hover: var(--xh-calendar-picker-nav-bg-hover, var(--xh-_action-variant-bg-hover));
     --xh-action-bg-pressed: var(--xh-calendar-picker-nav-bg-pressed, var(--xh-_action-variant-bg-pressed));
@@ -106,18 +109,25 @@
     display: none;
   }
 
-
+  /* 网格：上下 12、左右 16 的内衬；星期行与第一行日期之间不留空当 */
   [data-scope='calendar-picker'][data-part='grid'] {
     display: flex;
     flex-direction: column;
-    gap: var(--xh-calendar-picker-grid-gap, var(--xh-space-1));
+    gap: var(--xh-calendar-picker-grid-gap, var(--xh-space-0));
+    padding-block: var(--xh-calendar-picker-grid-py, var(--xh-space-3));
+    padding-inline: var(--xh-calendar-picker-grid-px, var(--xh-space-4));
   }
 
-  /* 周期视图：格子直接铺进网格，不再有周行那一层。 */
+  /* 周期视图与日视图同宽：钻上一层看月、年时面板不变窄，宽度按七列日期格加两侧内衬算 */
+  [data-scope='calendar-picker'][data-part='grid']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) {
+    min-inline-size: calc(7 * var(--xh-calendar-picker-cell-min-w, var(--xh-control-h-md)) + 2 * var(--xh-calendar-picker-grid-px, var(--xh-space-4)));
+  }
+
+  /* 周期视图：格子直接铺进网格，不再有周行那一层；格与格之间不留缝，区间的底色在一行里连成一条 */
   [data-scope='calendar-picker'][data-part='grid'][data-view='week'] {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
-    gap: var(--xh-calendar-picker-period-gap, var(--xh-space-1));
+    gap: var(--xh-calendar-picker-period-gap, var(--xh-space-0));
   }
 
   /* 月 3 列 × 4 行、季度 4 列一行、年 3 列。 */
@@ -125,40 +135,23 @@
   [data-scope='calendar-picker'][data-part='grid'][data-view='year'] {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: var(--xh-calendar-picker-period-gap, var(--xh-space-1));
+    gap: var(--xh-calendar-picker-period-gap, var(--xh-space-0));
   }
 
   [data-scope='calendar-picker'][data-part='grid'][data-view='quarter'] {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: var(--xh-calendar-picker-period-gap, var(--xh-space-1));
+    gap: var(--xh-calendar-picker-period-gap, var(--xh-space-0));
   }
 
+  /* 年网格限高自滚：原生细条落在内衬之外的边缘，内衬两侧仍对称 */
   [data-scope='calendar-picker'][data-part='grid'][data-view='year'] {
     align-content: start;
     max-block-size: var(--xh-calendar-picker-year-grid-max-h, var(--xh-viewport-h-sm));
-    padding-inline-end: var(--xh-calendar-picker-year-grid-pe, var(--xh-space-1));
     /* 页内结构容器走原生细条（reset 层统一给）、滚动链保持 auto；嵌进 date-picker 浮层时由那份皮肤补 contain */
     overflow-y: auto;
   }
 
-  /* 周期格沿横轴铺开，但始终保持控制件高度；选中面只换颜色，不改变几何尺寸。 */
-  [data-scope='calendar-picker'][data-part='grid']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) [data-part='cell-trigger'] {
-    flex: 0 0 auto;
-    aspect-ratio: auto;
-    min-inline-size: 0;
-    inline-size: min(3.5rem, 100%);
-    padding-block: var(--xh-calendar-picker-period-py, var(--xh-space-2));
-    border-radius: var(--xh-calendar-picker-period-radius, var(--xh-shape-control));
-  }
-
-  [data-scope='calendar-picker'][data-part='grid'][data-view='week'] [data-part='cell-trigger'] {
-    flex: 1 1 auto;
-    justify-content: flex-start;
-    inline-size: 100%;
-    padding-inline: var(--xh-calendar-picker-week-cell-px, var(--xh-space-3));
-  }
-
   [data-scope='calendar-picker'][data-part='grid'][hidden] {
     display: none;
   }
@@ -180,17 +173,20 @@
     display: none;
   }
 
-  /* 七等分：表头行与日期行共用同一条轨道定义，列才对得齐 */
+  /* 七等分：表头行与日期行共用同一条轨道定义，列才对得齐。每列不窄于中号控件高，
+     浮层里的日历按内容收时由这条下限撑出面板宽（七列加两侧内衬） */
   [data-scope='calendar-picker'][data-part='week-row'] {
     display: grid;
-    grid-template-columns: repeat(7, minmax(0, 1fr));
+    grid-template-columns: repeat(7, minmax(var(--xh-calendar-picker-cell-min-w, var(--xh-control-h-md)), 1fr));
   }
 
   /* 摆了周序号格的行多让出行首一列。写 :not([hidden]) 而不是靠顺序压过下面那条兜底——
      同特指度的规则谁在后面谁赢,收起态会被这条 display 掀开 */
   [data-scope='calendar-picker'][data-part='week-row']:not([hidden]):has(> [data-part='week-number']) {
     display: grid;
-    grid-template-columns: var(--xh-calendar-picker-week-number-w, var(--xh-control-h-md)) repeat(7, minmax(0, 1fr));
+    grid-template-columns:
+      var(--xh-calendar-picker-week-number-w, var(--xh-control-h-md))
+      repeat(7, minmax(var(--xh-calendar-picker-cell-min-w, var(--xh-control-h-md)), 1fr));
   }
 
   /* 周序号只是行的标号:比日子小一号、颜色压下去,不跟着选中态走 */
@@ -210,14 +206,15 @@
     display: none;
   }
 
+  /* 星期行：与中号控件同高，正文字号、常规字重，颜色压一档 */
   [data-scope='calendar-picker'][data-part='week-day'] {
     display: flex;
     align-items: center;
     justify-content: center;
-    block-size: var(--xh-calendar-picker-week-day-h, var(--xh-control-h-sm));
+    block-size: var(--xh-calendar-picker-week-day-h, var(--xh-control-h-md));
     color: var(--xh-calendar-picker-week-day-fg, var(--xh-fg-subtle));
-    font-size: var(--xh-calendar-picker-week-day-font-size, var(--xh-text-caption-size));
-    font-weight: var(--xh-calendar-picker-week-day-font-weight, var(--xh-font-weight-medium));
+    font-size: var(--xh-calendar-picker-week-day-font-size, var(--xh-text-body-size));
+    font-weight: var(--xh-calendar-picker-week-day-font-weight, var(--xh-font-weight-regular));
     line-height: var(--xh-leading-none);
     user-select: none;
   }
@@ -226,93 +223,171 @@
     display: none;
   }
 
-  /* 格子只是等分轨道里的一格，圆角的选中片留给 trigger */
+  /* 格子是等分轨道里的一格，也是格内几样东西的定位盒：禁用横条画在 ::before、今天的圆点画在 ::after，
+     日期钮的命中区（钮的 ::after）同样以它为包含块。上下各 6 的内衬把 24 高的钮撑成 36 的行距。
+     格子自成一层：横条压在钮的下面，不盖住钮（钮不当定位盒） */
   [data-scope='calendar-picker'][data-part='cell'] {
+    /* 这副行距的半高：格内横条以格子中线为轴、按它收边，行距被拉高（粗指针）时横条不跟着变粗 */
+    --xh-_calendar-picker-row-half: calc(
+      var(--xh-calendar-picker-cell-size, var(--xh-control-action-size)) / 2
+      + var(--xh-calendar-picker-cell-py, var(--xh-space-1_5))
+    );
+
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--xh-calendar-picker-cell-gap, var(--xh-space-0_5));
+    isolation: isolate;
+    padding-block: var(--xh-calendar-picker-cell-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-calendar-picker-cell-px, var(--xh-space-0));
+  }
+
+  /* 周期格左右各留 4：钮在格里缩进一截，相邻两格的钮不贴在一起 */
+  [data-scope='calendar-picker'][data-part='cell']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) {
+    padding-inline: var(--xh-calendar-picker-period-px, var(--xh-space-1));
   }
 
   [data-scope='calendar-picker'][data-part='cell'][hidden] {
     display: none;
   }
 
-  /* 日期格接 Action Control text 档（日历格是定尺控件，属格状当前）、ghost 形态：悬停 / 按下 / 禁用面、
-     0.97 缩放与换底、焦点环与过渡由家族配方给，这里只把使用者槽映射到桥接槽。几何仍由网格给：宽度由 week-row 的
-     等分轨道给、高度按 aspect-ratio 跟着走（block-size 归 auto，不取家族的固定高），日历才不会被长月份拉扁。
-     格子坐在日历的白底上：悬停 100 → 按下 200；今天 / 选中 / 邻月 / 不可用只换下面的私有槽 */
+  /* 不可用的日子：整格一条淡底横条，上下各收 2，相邻几天的横条连成一条带 */
+  [data-scope='calendar-picker'][data-part='cell'][data-disabled]::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    inset-block: calc(50% - var(--xh-_calendar-picker-row-half) + var(--xh-calendar-picker-disabled-inset, var(--xh-space-0_5)));
+    inset-inline: 0;
+    background-color: var(--xh-calendar-picker-cell-bg-disabled, var(--xh-bg-subtle));
+    pointer-events: none;
+  }
+
+  /* 今天：数字下方一颗 4px 品牌圆点，数字保持正文色（brand-subtle 只留给选中）；
+     选中格换实心面后圆点仍落在面的外面，两个状态叠加时互不遮挡 */
+  [data-scope='calendar-picker'][data-part='cell'][data-today]::after {
+    content: '';
+    position: absolute;
+    inset-block-start: calc(50% + var(--xh-calendar-picker-cell-size, var(--xh-control-action-size)) / 2 + var(--xh-space-0_5));
+    inset-inline-start: 50%;
+    inline-size: var(--xh-calendar-picker-today-mark-size, var(--xh-space-1));
+    block-size: var(--xh-calendar-picker-today-mark-size, var(--xh-space-1));
+    border-radius: var(--xh-shape-circle);
+    background-color: var(--xh-calendar-picker-today-mark-bg, var(--xh-fg-brand));
+    translate: -50% 0;
+    pointer-events: none;
+  }
+
+  [dir='rtl'] [data-scope='calendar-picker'][data-part='cell'][data-today]::after {
+    translate: 50% 0;
+  }
+
+  /* 日期格接 Action Control text 档 xs（日历格是定尺控件，属格状当前）、ghost 形态：悬停 / 按下 / 禁用面、
+     焦点环与过渡由家族配方给，这里只把使用者槽映射到桥接槽。日视图是 24 见方的圆（下一条），
+     周期视图是铺满格宽的 24 高钮、控件圆角。钮不当定位盒：命中区挂在格子上。
+     格子坐在日历的白底上：悬停 100 → 按下 200；选中 / 邻月 / 不可用只换下面的私有槽 */
   [data-scope='calendar-picker'][data-part='cell-trigger'] {
     --xh-_calendar-picker-cell-bg: transparent;
     --xh-_calendar-picker-cell-bg-hover: var(--xh-calendar-picker-cell-bg-hover, var(--xh-_action-variant-bg-hover));
     --xh-_calendar-picker-cell-bg-pressed: var(--xh-calendar-picker-cell-bg-pressed, var(--xh-_action-variant-bg-pressed));
-    --xh-_calendar-picker-cell-border: transparent;
     --xh-_calendar-picker-cell-fg: var(--xh-calendar-picker-cell-fg, var(--xh-fg-default));
 
-    --xh-action-visual-size: auto;
-    --xh-action-min-inline-size: var(--xh-calendar-picker-cell-size, var(--xh-control-h-sm));
+    --xh-action-visual-size: var(--xh-calendar-picker-cell-size, var(--xh-_action-profile-visual-size));
+    --xh-action-min-inline-size: var(--xh-calendar-picker-cell-size, var(--xh-_action-profile-visual-size));
     --xh-action-padding-inline: 0;
-    --xh-action-radius: var(--xh-calendar-picker-cell-radius, var(--xh-shape-inset));
+    --xh-action-radius: var(--xh-calendar-picker-period-radius, var(--xh-shape-control));
     --xh-action-bg-rest: var(--xh-_calendar-picker-cell-bg);
     --xh-action-bg-hover: var(--xh-_calendar-picker-cell-bg-hover);
     --xh-action-bg-pressed: var(--xh-_calendar-picker-cell-bg-pressed);
     --xh-action-bg-focus-visible: var(--xh-_calendar-picker-cell-bg);
     --xh-action-bg-disabled: var(--xh-_calendar-picker-cell-bg);
-    --xh-action-border-rest: var(--xh-_calendar-picker-cell-border);
-    --xh-action-border-hover: var(--xh-_calendar-picker-cell-border);
-    --xh-action-border-pressed: var(--xh-_calendar-picker-cell-border);
-    --xh-action-border-focus-visible: var(--xh-_calendar-picker-cell-border);
-    --xh-action-border-disabled: var(--xh-_calendar-picker-cell-border);
+    --xh-action-border-rest: transparent;
+    --xh-action-border-hover: transparent;
+    --xh-action-border-pressed: transparent;
+    --xh-action-border-focus-visible: transparent;
+    --xh-action-border-disabled: transparent;
     --xh-action-fg-rest: var(--xh-_calendar-picker-cell-fg);
     --xh-action-fg-hover: var(--xh-_calendar-picker-cell-fg);
     --xh-action-fg-pressed: var(--xh-_calendar-picker-cell-fg);
     --xh-action-fg-focus-visible: var(--xh-_calendar-picker-cell-fg);
     --xh-action-font-size: var(--xh-calendar-picker-cell-font-size, var(--xh-text-body-size));
+    /* 按下只换面不缩放：缩放会让钮成为包含块，挂在格子上的命中区当场缩回钮里，抬起落空 */
+    --xh-action-scale-pressed: none;
 
-    display: flex;
-    flex: 1;
-    /* 正方格：宽度由 week-row 的等分轨道给，高度跟着走 */
-    aspect-ratio: 1;
+    position: static;
+    flex: none;
     font-weight: var(--xh-calendar-picker-cell-font-weight, var(--xh-font-weight-medium));
   }
 
-  /* 家族 text 档在粗指针下用 ::after 扩热区到 44px 高，这里的 ::after 是铺满整格（含四周留白）的命中区：
-     钉回 inset 那副几何，不让家族的定位与下限把它挪走或撑高压到相邻的格 */
-  @media (pointer: coarse) {
-    [data-scope='calendar-picker'][data-part='cell-trigger']::after {
-      inline-size: auto;
-      block-size: auto;
-      min-block-size: 0;
-      translate: none;
-    }
+  /* 日视图：24 见方的日期钮取圆 */
+  [data-scope='calendar-picker'][data-part='cell-trigger'][data-view='day'] {
+    --xh-action-radius: var(--xh-calendar-picker-cell-radius, var(--xh-shape-circle));
+  }
+
+  /* 周期格（周、月、季、年）：钮铺满格子的内容宽，仍是 24 高、控件圆角；选中面只换颜色，不改变几何尺寸 */
+  [data-scope='calendar-picker'][data-part='cell-trigger']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) {
+    --xh-action-min-inline-size: 0;
+
+    inline-size: 100%;
+  }
+
+  /* 一行一个整周：文字从行首排起 */
+  [data-scope='calendar-picker'][data-part='cell-trigger'][data-view='week'] {
+    --xh-action-padding-inline: var(--xh-calendar-picker-week-cell-px, var(--xh-space-3));
+
+    justify-content: flex-start;
   }
 
   [data-scope='calendar-picker'][data-part='cell-trigger'][hidden] {
     display: none;
   }
 
-  /* 命中区铺满整格：格子四周那圈留白也归它，指尖落在两格之间的空隙不会落空 */
+  /* 命中区铺满整格：格子上下那截内衬也归它，指尖落在两行之间的空隙不会落空 */
   [data-scope='calendar-picker'][data-part='cell-trigger']::after {
     content: '';
     position: absolute;
-    inset: calc(-1 * var(--xh-calendar-picker-cell-gap, var(--xh-space-0_5)));
+    inset: 0;
+  }
+
+  /* 粗指针：格子首尾相接，家族 text 档那套 ::after 外扩会压到上下相邻的格。改由格子自己长到 44 见方——
+     行距加到 44、列宽下限抬到 44，铺满整格的命中区随之到 44×44、彼此不重叠；钮仍是 24 的圆，
+     横条仍以格子中线为轴、按细指针那副行距收边。::after 钉回整格那副几何。
+     列宽下限再按视口收：七列放不下 44 时（手机窄屏）取「视口宽扣掉两侧页边、网格内衬与周数列」的七分之一，
+     日历不撑出视口；不按容器收——按内容定宽的宿主（行内块、浮层）里百分比会退成 auto，格子塌回钮宽 */
+  @media (pointer: coarse) {
+    [data-scope='calendar-picker'][data-part='grid']:is([data-view='week'], [data-view='month'], [data-view='quarter'], [data-view='year']) {
+      min-inline-size: calc(7 * max(var(--xh-calendar-picker-cell-min-w, var(--xh-control-h-md)), min(var(--xh-control-hit-coarse), calc((100vw - 2 * var(--xh-space-4) - 2 * var(--xh-calendar-picker-grid-px, var(--xh-space-4))) / 7))) + 2 * var(--xh-calendar-picker-grid-px, var(--xh-space-4)));
+    }
+
+    [data-scope='calendar-picker'][data-part='week-row'] {
+      grid-template-columns: repeat(7, minmax(max(var(--xh-calendar-picker-cell-min-w, var(--xh-control-h-md)), min(var(--xh-control-hit-coarse), calc((100vw - 2 * var(--xh-space-4) - 2 * var(--xh-calendar-picker-grid-px, var(--xh-space-4))) / 7))), 1fr));
+    }
+
+    [data-scope='calendar-picker'][data-part='week-row']:not([hidden]):has(> [data-part='week-number']) {
+      grid-template-columns:
+        var(--xh-calendar-picker-week-number-w, var(--xh-control-h-md))
+        repeat(7, minmax(max(var(--xh-calendar-picker-cell-min-w, var(--xh-control-h-md)), min(var(--xh-control-hit-coarse), calc((100vw - 2 * var(--xh-space-4) - 2 * var(--xh-calendar-picker-grid-px, var(--xh-space-4)) - var(--xh-calendar-picker-week-number-w, var(--xh-control-h-md))) / 7))), 1fr));
+    }
+
+    [data-scope='calendar-picker'][data-part='cell'] {
+      min-block-size: var(--xh-control-hit-coarse);
+    }
+
+    [data-scope='calendar-picker'][data-part='cell-trigger']::after {
+      inline-size: auto;
+      block-size: auto;
+      min-block-size: 0;
+      translate: none;
+    }
   }
 
-  /* 邻月的日子照样可点，只是压暗——它们不是占位符 */
+  /* 邻月的日子照样可点，只是压暗、字重回到常规——它们不是占位符 */
   [data-scope='calendar-picker'][data-part='cell-trigger'][data-outside-month] {
     --xh-_calendar-picker-cell-fg: var(--xh-calendar-picker-cell-fg-outside, var(--xh-fg-subtle));
-  }
 
-  /* 今天：1px 品牌环 + 品牌字（brand-subtle 退出 today 语义），底透明、悬停走普通格的阶梯；
-     选中仍用后面的实心强调面，两个状态叠加时不会混成同一种反馈 */
-  [data-scope='calendar-picker'][data-part='cell-trigger'][data-today] {
-    --xh-_calendar-picker-cell-bg: var(--xh-calendar-picker-today-bg, transparent);
-    --xh-_calendar-picker-cell-border: var(--xh-calendar-picker-today-border, var(--xh-fg-brand));
-    --xh-_calendar-picker-cell-fg: var(--xh-calendar-picker-today-fg, var(--xh-fg-brand));
+    font-weight: var(--xh-calendar-picker-cell-font-weight-outside, var(--xh-font-weight-regular));
   }
 
-  /* 实心强调面给单选 / 多选的选中格（格状当前）：悬停不换面，按下压到 active 档（光缩放在深色底上看不出回执）。
+  /* 实心强调面给单选 / 多选的选中格（格状当前）：悬停不换面，按下压到 active 档。
      面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
      那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的 */
   [data-scope='calendar-picker'][data-part='cell-trigger'][data-selected] {
@@ -332,8 +407,10 @@
   }
 
   @media (forced-colors: active) {
-    [data-scope='calendar-picker'][data-part='cell-trigger'][data-today] {
-      border-color: Highlight;
+    /* 今天的圆点是一块底色，这一档会被系统抹掉：退出强制换色，直接取系统前景 */
+    [data-scope='calendar-picker'][data-part='cell'][data-today]::after {
+      forced-color-adjust: none;
+      background-color: CanvasText;
     }
 
     /* 强制色下底色被抹平，选中格只剩描边能说明身份 */
@@ -352,16 +429,17 @@
     --xh-action-ring-color-focus-visible: var(--xh-ring-focus);
   }
 
-  /* 不可用又选中的格：退到中性淡底 + 置灰字（禁用面），选中身份仍由这块底与未选中的透明格分开 */
+  /* 不可用又选中的格：压在淡底横条上，钮退到再深一档的中性面 + 置灰字（禁用面），
+     选中身份仍由这块底与未选中的透明格分开 */
   [data-scope='calendar-picker'][data-part='cell-trigger'][data-disabled][data-selected] {
-    --xh-action-bg-disabled: var(--xh-calendar-picker-cell-bg-selected-disabled, var(--xh-bg-subtle));
+    --xh-action-bg-disabled: var(--xh-calendar-picker-cell-bg-selected-disabled, var(--xh-bg-subtle-hover));
   }
 
   /* 只读：日子改不动，但不是禁用——颜色照常，只把"可点"这个暗示收回来。
      只收日视图这一档：粗粒度视图（月格、年格）点一格是往下钻一层，只读也照做，
      那些格子仍是按得动的按钮，手型不能撤 */
   [data-scope='calendar-picker'][data-part='grid'][data-readonly][data-view='day']
-    [data-part='cell-trigger']:not([data-disabled]) {
+    [data-part='cell-trigger']:where([data-scope='calendar-picker']):not([data-disabled]) {
     --xh-action-cursor-rest: default;
     --xh-action-cursor-hover: default;
     --xh-action-cursor-pressed: default;
@@ -444,6 +522,11 @@
       color: var(--xh-calendar-picker-cell-fg, var(--xh-fg-default));
       font-weight: var(--xh-font-weight-bold);
     }
+
+    /* 今天的圆点同样是底色：改由描边把这颗点画满 */
+    [data-scope='calendar-picker'][data-part='cell'][data-today]::after {
+      border: calc(var(--xh-calendar-picker-today-mark-size, var(--xh-space-1)) / 2) solid var(--xh-fg-default);
+    }
   }
 
   @media (forced-colors: active) {