@xihan-ui/styles 1.0.0 → 2.0.0

package/css/notification.css

@@ -1,3 +1,13 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 notification 样式。 */
+
+/* Notification 独立皮肤同时传递引入操作 / 关闭钮的动作控件配方；full bundle 递归去重。 */
+@import '../family/action-control.css';
+
 @layer xihan.motion {
   /*
    * 九个位共用同一条进出场，位移不跟着落位走：要按位置分方向，就得从 group 的
@@ -26,6 +36,17 @@
     }
   }
 
+  /* 倒计时条：从占满一整条收到零。走一遍就到头，时长由连接层写进时长槽 */
+  @keyframes xh-countdown {
+    from {
+      inline-size: 100%;
+    }
+
+    to {
+      inline-size: 0%;
+    }
+  }
+
   @keyframes xh-notification-out {
     from {
       opacity: 1;
@@ -36,7 +57,7 @@
     to {
       opacity: 0;
       translate: 0 var(--xh-motion-distance-md);
-      scale: var(--xh-motion-scale-enter);
+      scale: var(--xh-motion-scale-exit);
     }
   }
 }
@@ -79,8 +100,17 @@
     /* 基线按默认落位 bottom-end 写，下面只覆盖跟它不同的那几个位 */
     justify-content: flex-end;
     align-items: center;
-    padding-block: var(--xh-notification-inset, var(--xh-space-6));
-    padding-inline: var(--xh-notification-inset, var(--xh-space-6));
+    /* 贴边与安全区取大的一头：刘海、圆角与底部横条压住的那一段由系统给出，
+       贴边比它窄时卡片会被切掉一角。桌面上 env() 恒为 0，取值与贴边槽完全一致。
+       两条内联的 env 一起取大值：安全区只有物理方向的四个名字，
+       分左右写在 RTL 下会翻错边，两侧同取较宽的那一段。 */
+    padding-block-start: max(var(--xh-notification-inset, var(--xh-space-6)), env(safe-area-inset-top));
+    padding-block-end: max(var(--xh-notification-inset, var(--xh-space-6)), env(safe-area-inset-bottom));
+    padding-inline: max(
+      var(--xh-notification-inset, var(--xh-space-6)),
+      env(safe-area-inset-left),
+      env(safe-area-inset-right)
+    );
     /* 摞内间距由连接层写进内联 style（两个适配器共用同一份），这里绝不重复写：
        写了也会被内联盖掉，只会让人误以为间距归样式层管 */
     /* 整面铺开就等于罩住了整块视口。面本身不吃指针，只有卡片吃（见下），
@@ -121,31 +151,35 @@
    * 竖排 flex 里这两件事都做不到（叉会变成第三行）。
    * 底与描边一律中性，语气只由左列那枚字形承载：整片兑色是轻提示那条的做法，
    * 一张有标题有正文的卡片全片染色会把两层文字都压在同一片语气色上。
+   * 面走 sheet 三件套（§8.4：--xh-material-elevated-bg / -border / -shadow，与 toast 同一套）。
+   *
+   * 卡片的槽带 item 段（--xh-notification-item-*），与摞的 --xh-notification-inset 分开。
    */
   [data-scope='notification'][data-part='item'] {
-    /* 叉与操作钮的兜底字形按控件指示符那一档走；左列那枚类型字形另有自己的尺寸 */
-    --xh-icon-size: var(--xh-notification-icon-size, var(--xh-control-indicator-size));
+    /* 作者塞进卡片里的图标与皮肤画的兜底字形同一把尺：Feedback 指示符统一 md 档（§6.5）；
+       左列那枚类型字形另有自己的尺寸槽，叉与操作钮的字形各按按钮档取值 */
+    --xh-icon-size: var(--xh-notification-icon-size, var(--xh-glyph-size-md));
 
     position: relative;
     display: grid;
     /* 左列宽度由字形自己决定，作者不放指示符时它就是 0，正文自然贴到左内衬 */
     grid-template-columns: auto 1fr;
     align-items: start;
-    column-gap: var(--xh-notification-gap, var(--xh-space-3));
-    row-gap: var(--xh-notification-row-gap, var(--xh-space-2));
-    inline-size: var(--xh-notification-w, var(--xh-overlay-max-w-lg));
+    column-gap: var(--xh-notification-item-gap, var(--xh-space-3));
+    row-gap: var(--xh-notification-item-row-gap, var(--xh-space-2));
+    inline-size: var(--xh-notification-item-w, var(--xh-overlay-max-w-lg));
     /* 摞是整面视口宽的定位面且带内边距，取 100% 就等于自动让出两侧留白，
        窄屏上不必再算一遍 viewport 减法 */
     max-inline-size: 100%;
-    padding-block: var(--xh-notification-py, var(--xh-space-4));
-    padding-inline: var(--xh-notification-px, var(--xh-space-4));
-    border: var(--xh-stroke-thin) solid var(--xh-notification-border, var(--xh-border-default));
-    border-radius: var(--xh-notification-radius, var(--xh-shape-surface));
-    background: var(--xh-notification-bg, var(--xh-bg-surface-raised));
-    color: var(--xh-notification-fg, var(--xh-fg-default));
-    box-shadow: var(--xh-notification-shadow, var(--xh-elevation-sheet));
-    font-size: var(--xh-notification-font-size, var(--xh-text-body-size));
-    line-height: var(--xh-notification-leading, var(--xh-text-body-leading));
+    padding-block: var(--xh-notification-item-py, var(--xh-surface-pad-lg));
+    padding-inline: var(--xh-notification-item-px, var(--xh-surface-pad-lg));
+    border: var(--xh-stroke-thin) solid var(--xh-notification-item-border, var(--xh-material-elevated-border));
+    border-radius: var(--xh-notification-item-radius, var(--xh-shape-overlay));
+    background: var(--xh-notification-item-bg, var(--xh-material-elevated-bg));
+    color: var(--xh-notification-item-fg, var(--xh-material-elevated-fg));
+    box-shadow: var(--xh-notification-item-shadow, var(--xh-material-elevated-shadow));
+    font-size: var(--xh-notification-item-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-notification-item-leading, var(--xh-text-body-leading));
     /* 摞的定位面整面铺开且不吃指针，卡片必须自己吃回来：
        悬停按住计时、按钮可点、焦点进出，全指着这一条 */
     pointer-events: auto;
@@ -164,7 +198,29 @@
 
   /* 生命周期只有三段，unmounted 那段由上面的 [hidden] 收走，这里只管前两段 */
   [data-scope='notification'][data-part='item'][data-state='visible'] {
-    animation: xh-notification-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    animation: xh-notification-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
+  }
+
+  /* 一摞里的多条按位次错开开幕。backwards 不能省：等待期间起帧不生效的话，
+     卡片会先以全不透明度露一下再跳回起帧。第 6 条起并到同一拍上 */
+  [data-scope='notification'][data-part='item'][data-state='visible']:nth-child(2) {
+    animation-delay: calc(var(--xh-motion-stagger-step) * 1);
+  }
+
+  [data-scope='notification'][data-part='item'][data-state='visible']:nth-child(3) {
+    animation-delay: calc(var(--xh-motion-stagger-step) * 2);
+  }
+
+  [data-scope='notification'][data-part='item'][data-state='visible']:nth-child(4) {
+    animation-delay: calc(var(--xh-motion-stagger-step) * 3);
+  }
+
+  [data-scope='notification'][data-part='item'][data-state='visible']:nth-child(5) {
+    animation-delay: calc(var(--xh-motion-stagger-step) * 4);
+  }
+
+  [data-scope='notification'][data-part='item'][data-state='visible']:nth-child(n + 6) {
+    animation-delay: calc(var(--xh-motion-stagger-step) * 5);
   }
 
   /* forwards 不能省：退场窗口（removeDelay 默认 200ms）比退场动画长，
@@ -205,42 +261,38 @@
     mask: var(--xh-glyph-mark-info) center / contain no-repeat;
   }
 
-  [data-scope='notification'][data-part='item'][data-type='success'] [data-part='item-indicator']:empty::before {
+  [data-scope='notification'][data-part='item'][data-tone='success'] [data-part='item-indicator']:empty::before {
     -webkit-mask-image: var(--xh-glyph-mark-check);
     mask-image: var(--xh-glyph-mark-check);
   }
 
-  [data-scope='notification'][data-part='item'][data-type='warning'] [data-part='item-indicator']:empty::before {
+  [data-scope='notification'][data-part='item'][data-tone='warning'] [data-part='item-indicator']:empty::before {
     -webkit-mask-image: var(--xh-glyph-mark-warning);
     mask-image: var(--xh-glyph-mark-warning);
   }
 
-  [data-scope='notification'][data-part='item'][data-type='error'] [data-part='item-indicator']:empty::before {
+  [data-scope='notification'][data-part='item'][data-tone='danger'] [data-part='item-indicator']:empty::before {
     -webkit-mask-image: var(--xh-glyph-mark-close);
     mask-image: var(--xh-glyph-mark-close);
   }
 
-  /* loading 说的是「事情还没完」，不是好消息也不是坏消息：走中性前景档而不是语气色 */
-  [data-scope='notification'][data-part='item'][data-type='loading'] [data-part='item-indicator'] {
-    color: var(--xh-notification-indicator-fg, var(--xh-fg-muted));
-  }
-
-  [data-scope='notification'][data-part='item'][data-type='loading'] [data-part='item-indicator']:empty::before {
+  /* 加载中不是语气：只换字形，颜色沿用当前语气的前景档；写在四档语气之后，转圈压过它们 */
+  [data-scope='notification'][data-part='item'][data-loading] [data-part='item-indicator']:empty::before {
     -webkit-mask-image: var(--xh-glyph-mark-rotate-right);
     mask-image: var(--xh-glyph-mark-rotate-right);
-    animation: xh-notification-spin var(--xh-spin-duration) linear infinite;
+    animation: xh-notification-spin var(--xh-spin-duration) var(--xh-motion-ease-loop) infinite;
   }
 
   /* 减少动效：转圈停下，静止的箭头仍然读得出「还没好」；
      "在等什么"由卡片上的 role=status 与可见文案继续承担。
      两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
   @media (prefers-reduced-motion: reduce) {
-    [data-scope='notification'][data-part='item'][data-type='loading'] [data-part='item-indicator']:empty::before {
+    [data-scope='notification'][data-part='item'][data-loading] [data-part='item-indicator']:empty::before {
       animation: none;
     }
   }
 
-  :where([data-motion='reduce']) [data-scope='notification'][data-part='item'][data-type='loading'] [data-part='item-indicator']:empty::before {
+  :where([data-motion='reduce']) [data-scope='notification'][data-part='item'][data-loading] [data-part='item-indicator']:empty::before {
     animation: none;
   }
 
@@ -253,9 +305,13 @@
     line-height: var(--xh-notification-title-leading, var(--xh-leading-tight));
   }
 
-  /* 叉钉在右上角，标题得给它让位；说明与操作在第二行往下，不受影响 */
+  /* 叉钉在右上角，标题得给它让位；说明与操作在第二行往下，不受影响。
+     让位量与叉的贴边取同一个值，作者改了贴边槽，标题让出的那段跟着走 */
   [data-scope='notification'][data-part='item']:has([data-part='item-close-trigger']) [data-part='item-title'] {
-    padding-inline-end: calc(var(--xh-notification-close-size, var(--xh-control-h-sm)) + var(--xh-space-2));
+    padding-inline-end: calc(
+      var(--xh-notification-close-size, var(--xh-control-h-sm)) +
+      var(--xh-notification-close-inset, var(--xh-surface-action-inset))
+    );
   }
 
   [data-scope='notification'][data-part='item-description'] {
@@ -276,91 +332,98 @@
     display: none;
   }
 
-  [data-scope='notification'][data-part='item-action-trigger'] {
-    /* 网格列默认拉满，按钮要贴着起始侧收成自己的宽度 */
-    justify-self: start;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    block-size: var(--xh-notification-action-h, var(--xh-control-h-sm));
-    padding-inline: var(--xh-notification-action-px, var(--xh-control-px-sm));
-    border: var(--xh-stroke-thin) solid var(--xh-notification-action-border, var(--xh-border-default));
-    border-radius: var(--xh-notification-action-radius, var(--xh-shape-control));
-    background: var(--xh-notification-action-bg, var(--xh-bg-subtle));
-    color: var(--xh-notification-action-fg, var(--xh-fg-default));
-    /* 按钮不继承字族字号，不接回来的话卡片里会突然冒出一段系统 UI 字体 */
-    font: inherit;
-    font-weight: var(--xh-notification-action-font-weight, var(--xh-font-weight-medium));
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
+  /* 倒计时条横跨整张卡片：它不是正文的一部分，不跟着第二列走 */
+  [data-scope='notification'][data-part='item'] > [data-part='item-progress'] {
+    grid-column: 1 / -1;
   }
 
-  [data-scope='notification'][data-part='item-action-trigger'][hidden] {
-    display: none;
+  /*
+   * 倒计时条。总时长由连接层写进 --xh-notification-progress-duration（不自动消失的那些
+   * 整条收起），计时被按住时动画一并停住——停表这件事此前没有任何可画的地方。
+   * 取装饰档 --xh-_tone-soft：压在卡片底色上仍看得出来。
+   */
+  [data-scope='notification'][data-part='item-progress'] {
+    overflow: hidden;
+    inline-size: 100%;
+    block-size: var(--xh-notification-progress-thickness, var(--xh-space-0_5));
+    border-radius: var(--xh-notification-progress-radius, var(--xh-shape-pill));
+    background: var(--xh-notification-progress-bg, var(--xh-_tone-soft));
+    animation: xh-countdown var(--xh-notification-progress-duration, var(--xh-motion-duration-slide)) var(--xh-motion-ease-loop) forwards;
   }
 
-  [data-scope='notification'][data-part='item-action-trigger']:hover:not(:disabled) {
-    background: var(--xh-notification-action-bg-hover, var(--xh-bg-subtle-hover));
+  [data-scope='notification'][data-part='item'][data-paused] [data-part='item-progress'] {
+    animation-play-state: paused;
   }
 
-  [data-scope='notification'][data-part='item-action-trigger']:active:not(:disabled) {
-    background: var(--xh-notification-action-bg-active, var(--xh-bg-subtle-active));
+  [data-scope='notification'][data-part='item-progress'][hidden] {
+    display: none;
   }
 
-  [data-scope='notification'][data-part='item-action-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
+  /* 操作钮是带文案的离散动作钮：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由 Action Control
+     的 text outline 档给（连接层投 sm；非 Button 的触发器缺省中性描边、透明底，§7.2.2），组件只映射既有使用者槽。
+     语气只落到左列字形：这颗钮坐在带 data-tone 的卡片里，底 / 边 / 字钉在中性语义面上，不随语气；
+     卡片是 sheet 白面承载：hover --xh-bg-subtle（100）→ pressed --xh-bg-subtle-hover（200） */
+  [data-scope='notification'][data-part='item-action-trigger'] {
+    --xh-action-visual-size: var(--xh-notification-action-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-notification-action-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-notification-action-radius, var(--xh-shape-control));
+    --xh-action-bg-rest: var(--xh-notification-action-bg, transparent);
+    --xh-action-bg-hover: var(--xh-notification-action-bg-hover, var(--xh-bg-subtle));
+    --xh-action-bg-pressed: var(--xh-notification-action-bg-active, var(--xh-bg-subtle-hover));
+    --xh-action-fg-rest: var(--xh-notification-action-fg, var(--xh-fg-default));
+    --xh-action-fg-hover: var(--xh-notification-action-fg, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-notification-action-fg, var(--xh-fg-default));
+    --xh-action-border-rest: var(--xh-notification-action-border, var(--xh-border-control));
+    --xh-action-border-hover: var(--xh-notification-action-border, var(--xh-border-control-hover));
+    --xh-action-border-pressed: var(--xh-notification-action-border, var(--xh-border-control-hover));
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: none;
+    --xh-action-shadow-hover: none;
+    --xh-action-shadow-pressed: none;
+    /* 作者塞进钮里的图标按按钮档取字形尺寸 */
+    --xh-icon-size: var(--xh-notification-icon-size, var(--xh-_action-profile-glyph-size));
 
-  /* 钉在右上角的内衬处，不参与网格排布——留在流里它会变成正文下面的第三行 */
-  [data-scope='notification'][data-part='item-close-trigger'] {
-    position: absolute;
-    inset-block-start: var(--xh-notification-close-inset, var(--xh-space-3));
-    inset-inline-end: var(--xh-notification-close-inset, var(--xh-space-3));
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    block-size: var(--xh-notification-close-size, var(--xh-control-h-sm));
-    inline-size: var(--xh-notification-close-size, var(--xh-control-h-sm));
-    border: 0;
-    border-radius: var(--xh-notification-close-radius, var(--xh-shape-control));
-    background: transparent;
-    color: var(--xh-notification-close-fg, var(--xh-fg-muted));
-    font: inherit;
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    /* 网格列默认拉满，按钮要贴着起始侧收成自己的宽度 */
+    justify-self: start;
+    font-weight: var(--xh-notification-action-font-weight, var(--xh-font-weight-medium));
   }
 
-  /* closable=false 时连接层同时给了 hidden 与 disabled，这条是它真正收起的那一半：
-     上面声明了 display，不补回来就会留下一个按不动的叉，比压根没有叉更让人困惑 */
-  [data-scope='notification'][data-part='item-close-trigger'][hidden] {
+  /* 家族那条 display 会把 UA 的 [hidden]{display:none} 盖掉 */
+  [data-scope='notification'][data-part='item-action-trigger'][hidden] {
     display: none;
   }
 
-  [data-scope='notification'][data-part='item-close-trigger']:hover:not(:disabled) {
-    background: var(--xh-notification-close-bg-hover, var(--xh-bg-subtle-hover));
-    color: var(--xh-notification-close-fg-hover, var(--xh-fg-default));
-  }
-
-  [data-scope='notification'][data-part='item-close-trigger']:active {
-    background: var(--xh-notification-close-bg-active, var(--xh-bg-subtle-active));
-    scale: var(--xh-motion-scale-press);
-  }
+  /* 关闭钮是只有字形的离散动作钮：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由 Action Control
+     的 icon ghost 档给（连接层投 sm：32px 正方盒，面板角上的叉与此前 --xh-control-h-sm 同尺寸），组件只映射既有
+     使用者槽。静息透明，sheet 白面承载 hover 100 → pressed 200，写了语气时悬停底跟着语气走（--xh-_tone-subtle）。
+     钉在右上角的内衬处，不参与网格排布——留在流里它会变成正文下面的第三行 */
+  [data-scope='notification'][data-part='item-close-trigger'] {
+    --xh-action-visual-size: var(--xh-notification-close-size, var(--xh-_action-profile-visual-size));
+    --xh-action-min-inline-size: var(--xh-notification-close-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-notification-close-radius, var(--xh-shape-control));
+    --xh-action-bg-hover: var(--xh-notification-close-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-notification-close-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-notification-close-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-notification-close-fg-hover, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-notification-close-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;
+    /* 叉的字形按钮档取值（sm → 16px），与左列那枚 md 档的类型字形分开 */
+    --xh-icon-size: var(--xh-notification-icon-size, var(--xh-_action-profile-glyph-size));
 
-  /* 单体控件用原生 disabled。常规路径下它与 hidden 同时出现看不见，
-     但作者若在覆盖层把收起改了回来，至少还能看出这颗叉是按不动的 */
-  [data-scope='notification'][data-part='item-close-trigger']:disabled {
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+    position: absolute;
+    inset-block-start: var(--xh-notification-close-inset, var(--xh-surface-action-inset));
+    inset-inline-end: var(--xh-notification-close-inset, var(--xh-surface-action-inset));
+    border-width: 0;
   }
 
-  [data-scope='notification'][data-part='item-close-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* closable=false 时连接层同时给了 hidden 与 disabled，这条是它真正收起的那一半：
+     家族那条 display 会把 UA 的 [hidden]{display:none} 盖掉，不补回来就会留下一个按不动的叉 */
+  [data-scope='notification'][data-part='item-close-trigger'][hidden] {
+    display: none;
   }
 
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
@@ -374,4 +437,19 @@
     -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
     mask: var(--xh-glyph-mark-close) center / contain no-repeat;
   }
+
+  @media print {
+    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
+       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
+       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
+       并成一条之后这层配对关系在文本上就断了。 */
+    /* 通知组固定在视口上，打印那一刻在场就会盖住正文。 */
+    [data-scope='notification'][data-part='group'] {
+      display: none;
+    }
+
+    [data-scope='notification'][data-part='item'][data-loading] [data-part='item-indicator']:empty::before {
+      animation: none;
+    }
+  }
 }

package/css/number-animation.css

@@ -1,3 +1,10 @@
+/*
+ * 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 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='number-animation'] {