@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/family/motion.css

@@ -0,0 +1,363 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 motion 样式。 */
+
+/* 共享关键帧的唯一真源。
+ *
+ * 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+ * 动画会静默地整个不跑。所以引用这里任一名字的皮肤都 @import 本文件，单独引入那份皮肤时
+ * 关键帧仍在场；全量入口由 emit-unlayered 按物理文件去重，有层入口靠打包器对同一 URL 的
+ * @import 去重，同名同帧体即使重复插入也无副作用。
+ *
+ * 本文件只放跨皮肤共用的关键帧，皮肤内不得重定义这些名字（check-keyframe-refs 判红）；
+ * 组件专属关键帧仍住在各自皮肤。幅度只引 --xh-motion-distance-sm / -md 与 --xh-motion-scale-enter /
+ * -exit，整幅位移经私有槽取 --xh-motion-travel，减弱动效档由令牌层把它们归零。四个方向槽
+ * --xh-_overlay-enter-* 由浮层皮肤按 placement 写在 positioner 上，四个都没写时位移退回 0。
+ */
+@layer xihan.motion {
+  /* ── 锚定列表 / 菜单：沿落位方向短位移，不缩放文字与选中标记 ──
+     Menu、Select、Combobox、Cascader、ContextMenu、Menubar、Mention、TreeSelect、
+     Date / Time picker、ColorPicker、Tooltip */
+  @keyframes xh-overlay-slide-in {
+    from {
+      opacity: var(--xh-_enter-from-opacity, 0);
+      translate:
+        calc((var(--xh-_overlay-enter-right, 0) - var(--xh-_overlay-enter-left, 0)) * var(--xh-motion-distance-sm))
+        calc((var(--xh-_overlay-enter-down, 0) - var(--xh-_overlay-enter-up, 0)) * var(--xh-motion-distance-sm));
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  @keyframes xh-overlay-slide-out {
+    from {
+      opacity: 1;
+      translate: 0 0;
+    }
+
+    to {
+      opacity: 0;
+      translate:
+        calc((var(--xh-_overlay-enter-right, 0) - var(--xh-_overlay-enter-left, 0)) * var(--xh-motion-distance-sm))
+        calc((var(--xh-_overlay-enter-down, 0) - var(--xh-_overlay-enter-up, 0)) * var(--xh-motion-distance-sm));
+    }
+  }
+
+  /* ── 锚定面板：从锚点那一侧冒出来，缩放叠短位移 ──
+     Popover、HoverCard、Popconfirm、Tour、Command。
+     起点朝哪个方向退让由 placement 写进四个方向槽（那一侧写 1），四个都没写就退回原地缩放 */
+  @keyframes xh-overlay-pop-in {
+    from {
+      opacity: var(--xh-_enter-from-opacity, 0);
+      scale: var(--xh-motion-scale-enter);
+      translate:
+        calc((var(--xh-_overlay-enter-right, 0) - var(--xh-_overlay-enter-left, 0)) * var(--xh-motion-distance-sm))
+        calc((var(--xh-_overlay-enter-down, 0) - var(--xh-_overlay-enter-up, 0)) * var(--xh-motion-distance-sm));
+    }
+
+    to {
+      opacity: 1;
+      scale: 1;
+      translate: 0 0;
+    }
+  }
+
+  /* 退场只缩放淡出，不再沿方向退让；锚定面板与无锚定弹出共用 */
+  @keyframes xh-pop-out {
+    from {
+      opacity: 1;
+      scale: 1;
+    }
+
+    to {
+      opacity: 0;
+      scale: var(--xh-motion-scale-exit);
+    }
+  }
+
+  /* ── 无锚定弹出：原地缩放淡入，没有方向 ──
+     NavigationMenu、SideNav popout、FloatingPanel、FloatButton 列表、Pagination 弹层；
+     页内浮现的小件也取它：Approval、QuestionFlow 的结果标记，MessageFeed、Log 的回底钮；
+     行内横排的胶囊集合（TagsInput、TagGroup、Select 标签行）加入一枚也取它：竖向上浮与来源方向不符，还会探出字段外壳 */
+  @keyframes xh-pop-in {
+    from {
+      opacity: var(--xh-_enter-from-opacity, 0);
+      scale: var(--xh-motion-scale-enter);
+    }
+
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  /* ── 遮罩与全屏面：只动不透明度 ──
+     Dialog / Drawer / ImageViewer / Tour / Command 的遮罩，Avatar / Image 的载入揭示，
+     Cascader 列项的淡入 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: var(--xh-_enter-from-opacity, 0);
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes xh-fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  /* 页内内容的上浮进场：淡入叠一小段向上位移。Command 的分组、EmptyState、QuestionFlow */
+  @keyframes xh-rise-in {
+    from {
+      opacity: var(--xh-_enter-from-opacity, 0);
+      translate: 0 var(--xh-motion-distance-sm);
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  /* ── Surface 级 disclosure：行高 0fr → 1fr，内缩同帧动 ──
+     Accordion、Collapsible、Reasoning、ToolCall 的 content。
+     内缩不归零的话，border-box 会把盒子钳在上下内缩之和上，收不干净。
+     两端内缩由各皮肤在 content 上写进 --xh-_disclosure-pt / --xh-_disclosure-pb，
+     没写的那一端按 0 动（与该端本来就没有内缩的皮肤一致） */
+  @keyframes xh-disclosure-expand {
+    from {
+      grid-template-rows: 0fr;
+      padding-block-start: 0;
+      padding-block-end: 0;
+    }
+
+    to {
+      grid-template-rows: 1fr;
+      padding-block-start: var(--xh-_disclosure-pt, 0);
+      padding-block-end: var(--xh-_disclosure-pb, 0);
+    }
+  }
+
+  @keyframes xh-disclosure-collapse {
+    from {
+      grid-template-rows: 1fr;
+      padding-block-start: var(--xh-_disclosure-pt, 0);
+      padding-block-end: var(--xh-_disclosure-pb, 0);
+    }
+
+    to {
+      grid-template-rows: 0fr;
+      padding-block-start: 0;
+      padding-block-end: 0;
+    }
+  }
+
+  /* ── 列表条目进场：淡入叠一段向上位移，比页内上浮大一档 ──
+     Approval、MessageFeed、QuestionFlow、ToolCall 的条目 */
+  @keyframes xh-item-in {
+    from {
+      opacity: var(--xh-_enter-from-opacity, 0);
+      translate: 0 var(--xh-motion-distance-md);
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  /* 自上而下的显现：新揭开的内容从上方落位。DiffView 展开的折叠块、Form 的错误汇总 */
+  @keyframes xh-drop-in {
+    from {
+      opacity: var(--xh-_enter-from-opacity, 0);
+      translate: 0 calc(-1 * var(--xh-motion-distance-sm));
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  /* ── 面板（sheet）：模态与强反馈面，竖向一小段位移叠缩放 ──
+     位移与缩放写独立属性，互不覆盖，手势期间写 translate 也不会把 scale 抹掉。Dialog、Notification */
+  @keyframes xh-sheet-in {
+    from {
+      opacity: var(--xh-_enter-from-opacity, 0);
+      translate: 0 var(--xh-motion-distance-md);
+      scale: var(--xh-motion-scale-enter);
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+      scale: 1;
+    }
+  }
+
+  @keyframes xh-sheet-out {
+    from {
+      opacity: 1;
+      translate: 0 0;
+      scale: 1;
+    }
+
+    to {
+      opacity: 0;
+      translate: 0 var(--xh-motion-distance-md);
+      scale: var(--xh-motion-scale-exit);
+    }
+  }
+
+  /* ── 整幅滑入（slide）：面板从所在边整条推入推出 ──
+     方向由皮肤在元素上写进 --xh-_slide-from-x / --xh-_slide-from-y（取正负整幅位移令牌或 0），
+     两个都没写时位移退回 0。整幅位移令牌在减弱动效下归零，进出场只剩时长。Drawer */
+  @keyframes xh-slide-in {
+    from {
+      translate: var(--xh-_slide-from-x, 0) var(--xh-_slide-from-y, 0);
+    }
+
+    to {
+      translate: 0 0;
+    }
+  }
+
+  @keyframes xh-slide-out {
+    from {
+      translate: 0 0;
+    }
+
+    to {
+      translate: var(--xh-_slide-from-x, 0) var(--xh-_slide-from-y, 0);
+    }
+  }
+
+  /* 整幅滑入配套的淡变：起止端取 --xh-motion-travel-opacity，缺省为 1 即不淡变，
+     减弱动效下为 0，整幅位移归零后由它接住进出场。与 xh-slide-in / -out 并列播放，
+     时长取淡变档（enter / exit），不随几何时长一起归零。Drawer */
+  @keyframes xh-slide-fade-in {
+    from {
+      opacity: var(--xh-_enter-from-opacity, var(--xh-motion-travel-opacity));
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes xh-slide-fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: var(--xh-motion-travel-opacity);
+    }
+  }
+
+  /* ── 循环：匀速转圈与扫过的流光 ──
+     时长取循环令牌，减弱动效下由各皮肤停掉并换成静态替代。
+     转圈写独立的 rotate 属性，与元素自身的 transform 叠加而不互相覆盖。
+     流光的亮带从右扫到左：消费方把渐变画成自身两倍宽（background-size: 200% 100%），
+     只移动背景位置，不动布局也不动 transform。Reasoning、ToolCall 的在跑文字 */
+  @keyframes xh-spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+
+  @keyframes xh-shimmer {
+    from {
+      background-position: 150% center;
+    }
+
+    to {
+      background-position: -50% center;
+    }
+  }
+
+  /* 呼吸：进行中、给不出进度、需要被察觉的状态点。明暗与缩放一起起伏，峰值落在 42%，
+     周期 --xh-motion-loop-breathe、缓动 --xh-motion-ease-breathe。只动 opacity 与 scale。
+     光环画在状态点的 ::after 上，同周期从点本身的大小外扩淡尽，只播 3 个周期，状态点本身持续到状态结束。
+     减弱动效下两者都停，状态点停在满不透明度。Badge 的 pulse */
+  @keyframes xh-breathe {
+    0%,
+    100% {
+      opacity: 0.5;
+      scale: var(--xh-motion-scale-breathe);
+    }
+
+    42% {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @keyframes xh-breathe-halo {
+    from {
+      opacity: 0.32;
+      scale: 1;
+    }
+
+    60%,
+    to {
+      opacity: 0;
+      scale: var(--xh-motion-scale-halo);
+    }
+  }
+
+  /* ── 交互光：一道光沿 1px 描边环扫过一次 ──
+     光带画在三倍宽的背景里、居中，遮罩只留描边环；背景位置从 100% 走到 0%，光带从起始缘外扫到末缘外。
+     只动背景位置，不动几何；只播一遍，不循环 */
+  @keyframes xh-glint {
+    from {
+      background-position: 100% 0;
+    }
+
+    to {
+      background-position: 0% 0;
+    }
+  }
+
+  /* ── 数值：倒计时条从占满一整条收到零 ──
+     条子自己不改尺寸，靠裁切从行尾往行首收：只重绘、不重排。裁掉哪一侧随书写方向由
+     --xh-_countdown-cut-left / -right 给出，缺省按 LTR 收掉右侧；前端的圆角取
+     --xh-_countdown-radius。走一遍就到头，时长由连接层写进 Notification 的时长槽。 */
+  @keyframes xh-countdown {
+    from {
+      clip-path: inset(0 0 0 0 round var(--xh-_countdown-radius, 0));
+    }
+
+    to {
+      clip-path: inset(0 var(--xh-_countdown-cut-right, 100%) 0 var(--xh-_countdown-cut-left, 0) round var(--xh-_countdown-radius, 0));
+    }
+  }
+
+  /* ── 数据：新出现的折线从头描到尾 ──
+     连接层给路径写 pathLength="1" 把长度归一，消费方把虚线设成一整段（stroke-dasharray: 1），
+     虚线偏移从 1 走到 0。只动 stroke-dashoffset，不动几何。时长取 reveal、曲线取 continuous，
+     与柱从基线长出同一档；减弱动效下时长降到 1ms，折线直接在场。CartesianChart */
+  @keyframes xh-draw {
+    from {
+      stroke-dashoffset: 1;
+    }
+
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+}

package/dist/family/swatch.css

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* AUTO-GENERATED by build/swatch-recipe.mjs — do not edit. */
+@layer xihan.components {
+  [data-xh-swatch] {
+    --xh-_swatch-size: var(--xh-glyph-size-md);
+    --xh-_swatch-checker-tile: var(--xh-space-1);
+    --xh-_swatch-color: transparent;
+
+    display: inline-block;
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--xh-swatch-size, var(--xh-_swatch-size));
+    block-size: var(--xh-swatch-size, var(--xh-_swatch-size));
+    border: var(--xh-stroke-thin) solid var(--xh-swatch-border, var(--xh-border-default));
+    border-radius: var(--xh-swatch-radius, var(--xh-shape-inset));
+    background-color: var(--xh-swatch-checker-base, var(--xh-bg-surface));
+    background-image:
+      linear-gradient(var(--xh-_swatch-color), var(--xh-_swatch-color)),
+      linear-gradient(45deg, var(--xh-swatch-checker, var(--xh-color-neutral-300)) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--xh-swatch-checker, var(--xh-color-neutral-300)) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--xh-swatch-checker, var(--xh-color-neutral-300)) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--xh-swatch-checker, var(--xh-color-neutral-300)) 75%);
+    background-position:
+      0 0,
+      0 0,
+      0 var(--xh-_swatch-checker-tile),
+      var(--xh-_swatch-checker-tile) calc(-1 * var(--xh-_swatch-checker-tile)),
+      calc(-1 * var(--xh-_swatch-checker-tile)) 0;
+    background-size:
+      100% 100%,
+      calc(var(--xh-_swatch-checker-tile) * 2) calc(var(--xh-_swatch-checker-tile) * 2),
+      calc(var(--xh-_swatch-checker-tile) * 2) calc(var(--xh-_swatch-checker-tile) * 2),
+      calc(var(--xh-_swatch-checker-tile) * 2) calc(var(--xh-_swatch-checker-tile) * 2),
+      calc(var(--xh-_swatch-checker-tile) * 2) calc(var(--xh-_swatch-checker-tile) * 2);
+    background-clip: padding-box;
+    print-color-adjust: exact;
+  }
+
+  [data-xh-swatch][data-xh-swatch-size='sm'] {
+    --xh-_swatch-size: var(--xh-glyph-size-sm);
+    --xh-_swatch-checker-tile: var(--xh-space-1);
+  }
+
+  [data-xh-swatch][data-xh-swatch-size='lg'] {
+    --xh-_swatch-size: var(--xh-glyph-size-lg);
+    --xh-_swatch-checker-tile: var(--xh-space-1_5);
+  }
+
+  @media (forced-colors: active) {
+    [data-xh-swatch] {
+      forced-color-adjust: none;
+      border-color: CanvasText;
+    }
+  }
+}

package/dist/family/tag-list.css

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/*
+ * 标签行家族配方：多选控件把已选值摆成一行标签，Select、Combobox、TreeSelect、Cascader 共用这一份排法。
+ *
+ * 连接层在标签行上投影 data-xh-tag-list。行里每一枚都是库里的 tag（data-scope="tag"），样子归 tag.css，
+ * 这里只管行怎么排、标签怎么进出：
+ *   - 行是弹性子项，只缩不涨：允许被压缩并把溢出裁掉，标签不冲出字段盒、不把盒尾的钮挤出去；
+ *   - 行装不下时各枚标签各自缩短，截断落在 tag 自己的 label 上；+N 那一枚（带 data-count）不缩，始终完整可见；
+ *   - 新选中的标签原地弹出（横排胶囊不用竖向上浮，会探出字段外壳的底边），同一批按到达顺序错开，首帧就在的直接呈现；
+ *     取消选中的由列表动效在原处放一个替身淡出，其余标签沿 translate 滑到新位置。
+ * 行与标签之间的间距经桥接槽 --xh-tag-list-gap 交给皮肤，皮肤把自己的公开槽接进来。
+ *
+ * 进退场的关键帧走 motion.css：引入本配方的皮肤同时 @import 它；家族文件之间不互相引入，
+ * 全量入口里每份家族只内联一次。
+ */
+@layer xihan.components {
+  [data-xh-tag-list] {
+    /* 取消选中的标签由列表动效在原处放一个绝对定位的替身：行自己作定位容器，替身才裁在行里 */
+    position: relative;
+    display: inline-flex;
+    flex: 0 1 auto;
+    align-items: center;
+    gap: var(--xh-tag-list-gap, var(--xh-space-1));
+    /* 弹性子项默认最小尺寸是内容尺寸，不归零则标签把行撑破、省略号永远轮不到 */
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+
+  /* 无选中时连接层给 hidden：上面给了 display，UA 的 [hidden]{display:none} 已被盖掉，这里补回来 */
+  [data-xh-tag-list][hidden] {
+    display: none;
+  }
+
+  [data-xh-tag-list] > .xh-scope-tag[data-part='root'] {
+    flex: 0 1 auto;
+    min-inline-size: 0;
+    /* 选中、取消选中一枚时，其余标签由列表动效先反向补偿、再沿这条滑到新位置 */
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* 新选中的标签原地弹出，同一批按到达顺序错开；首帧就在的直接呈现（列表动效接上之前行带 data-instant）。+N 那一枚不是到达的条目，不播 */
+  [data-xh-tag-list]:not([data-instant]) > .xh-scope-tag[data-part='root'][data-value]:not([data-instant], [data-state='closed']) {
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
+    animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
+  }
+
+  /* 取消选中的标签：替身留在原处淡出，播完即移除 */
+  [data-xh-tag-list] > .xh-scope-tag[data-part='root'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  [data-xh-tag-list] > .xh-scope-tag[data-part='root'][data-count] {
+    flex: none;
+  }
+}

package/family/action-control.css

@@ -256,25 +256,16 @@
     inline-size: var(--xh-action-visual-size, var(--xh-_action-profile-visual-size));
   }
 
-  [data-xh-action-control][data-xh-action-profile='floating'][data-xh-action-size='xs'] {
-    --xh-_action-profile-visual-size: var(--xh-control-box-sm);
-  }
-
   [data-xh-action-control][data-xh-action-profile='floating'][data-xh-action-size='sm'] {
-    --xh-_action-profile-visual-size: var(--xh-control-box-md);
-    --xh-_action-profile-glyph-size: var(--xh-glyph-size-md);
-    --xh-_action-profile-font-size: var(--xh-control-font-md);
+    --xh-_action-profile-visual-size: var(--xh-control-box-sm);
   }
 
   [data-xh-action-control][data-xh-action-profile='floating'][data-xh-action-size='md'] {
-    --xh-_action-profile-visual-size: var(--xh-control-box-lg);
-    --xh-_action-profile-glyph-size: var(--xh-glyph-size-lg);
-    --xh-_action-profile-font-size: var(--xh-control-font-lg);
+    --xh-_action-profile-visual-size: var(--xh-control-box-md);
   }
 
   [data-xh-action-control][data-xh-action-profile='floating'][data-xh-action-size='lg'] {
-    --xh-_action-profile-visual-size: calc(var(--xh-control-box-lg) + var(--xh-space-2));
-    --xh-_action-profile-glyph-size: var(--xh-glyph-size-xl);
+    --xh-_action-profile-visual-size: var(--xh-control-box-lg);
   }
 
   [data-xh-action-control][data-xh-action-profile='row'] {