@xihan-ui/styles 2.1.0 → 3.0.0

package/css/toast.css

@@ -1,499 +0,0 @@
-/*
- * Copyright (c) 2021-Present XiHanFun and contributors.
- * Licensed under the MIT License. See LICENSE in the project root for license information.
- */
-
-/* 定义 toast 样式。 */
-
-/* Toast 独立皮肤同时传递引入操作 / 关闭钮的动作控件配方；full bundle 递归去重。 */
-@import '../family/action-control.css';
-
-@layer xihan.motion {
-  /* 新条目从视口边缘外进入，同时落到自己的折叠层级。 */
-  @keyframes xh-toast-in {
-    from {
-      opacity: 0;
-      transform: translateY(calc(var(--xh-toast-dir, 1) * (var(--xh-toast-offset-collapsed, 0px) - 100%)))
-        scale(var(--xh-toast-scale-collapsed, 1));
-    }
-
-    to {
-      opacity: 1;
-      transform: translateY(calc(var(--xh-toast-dir, 1) * var(--xh-toast-offset-collapsed, 0px)))
-        scale(var(--xh-toast-scale-collapsed, 1));
-    }
-  }
-
-  @keyframes xh-toast-spin {
-    to {
-      rotate: 360deg;
-    }
-  }
-
-  /* 倒计时条：从占满一整条收到零。走一遍就到头，时长由连接层写进时长槽 */
-  @keyframes xh-countdown {
-    from {
-      inline-size: 100%;
-    }
-
-    to {
-      inline-size: 0%;
-    }
-  }
-
-  @keyframes xh-toast-out {
-    from {
-      opacity: 1;
-      transform: translateY(calc(var(--xh-toast-dir, 1) * var(--xh-toast-y, 0px)))
-        scale(var(--xh-toast-scale, 1));
-    }
-
-    to {
-      opacity: 0;
-      transform: translateY(calc(var(--xh-toast-dir, 1) * (var(--xh-toast-y, 0px) - 100%)))
-        scale(var(--xh-toast-scale, 1));
-    }
-  }
-}
-
-@layer xihan.components {
-  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
-  [data-scope='toast'] {
-    --xh-toast-skin: 1;
-  }
-
-  /* 固定宽度的堆叠定位面；每条 Toast 在其中绝对定位。 */
-  [data-scope='toast'][data-part='group'] {
-    position: fixed;
-    z-index: var(--xh-toast-layer, var(--xh-layer-toast));
-    display: block;
-    inline-size: min(var(--xh-toast-inline-size, 28.75rem), calc(100vw - var(--xh-space-8)));
-    block-size: 0;
-    pointer-events: none;
-  }
-
-  [data-scope='toast'][data-part='group'][hidden] {
-    display: none;
-  }
-
-  [data-scope='toast'][data-part='group'][data-placement='bottom'] {
-    inset-block-end: max(var(--xh-toast-inset, var(--xh-space-4)), env(safe-area-inset-bottom));
-    inset-inline-start: 50%;
-    translate: -50% 0;
-  }
-
-  [data-scope='toast'][data-part='group'][data-placement='top'] {
-    inset-block-start: max(var(--xh-toast-inset, var(--xh-space-4)), env(safe-area-inset-top));
-    inset-inline-start: 50%;
-    translate: -50% 0;
-  }
-
-  [data-scope='toast'][data-part='group'][data-placement$='-start'] {
-    inset-inline-start: max(var(--xh-toast-inset, var(--xh-space-4)), env(safe-area-inset-left));
-  }
-
-  [data-scope='toast'][data-part='group'][data-placement$='-end'] {
-    inset-inline-end: max(var(--xh-toast-inset, var(--xh-space-4)), env(safe-area-inset-right));
-  }
-
-  [data-scope='toast'][data-part='group'][data-placement^='bottom'][data-placement$='-start'],
-  [data-scope='toast'][data-part='group'][data-placement^='bottom'][data-placement$='-end'] {
-    inset-block-end: max(var(--xh-toast-inset, var(--xh-space-4)), env(safe-area-inset-bottom));
-  }
-
-  [data-scope='toast'][data-part='group'][data-placement^='top'][data-placement$='-start'],
-  [data-scope='toast'][data-part='group'][data-placement^='top'][data-placement$='-end'] {
-    inset-block-start: max(var(--xh-toast-inset, var(--xh-space-4)), env(safe-area-inset-top));
-  }
-
-  /* 中性浮层承载整条反馈，语气只落到状态字形和标题。
-     面走 sheet 三件套（--xh-material-elevated-bg / -border / -shadow，亮暗两档同有 1px 描边）。 */
-  [data-scope='toast'][data-part='root'] {
-    /* 作者塞进指示符槽的图标与皮肤画的兜底字形同一把尺：Feedback 指示符统一 md 档 */
-    --xh-icon-size: var(--xh-toast-icon-size, var(--xh-glyph-size-md));
-
-    --xh-toast-y: var(--xh-toast-offset-collapsed, 0px);
-    --xh-toast-scale: var(--xh-toast-scale-collapsed, 1);
-
-    position: relative;
-    display: flex;
-    flex: none;
-    align-items: flex-start;
-    gap: var(--xh-toast-gap, var(--xh-space-1_5));
-    inline-size: min(var(--xh-toast-inline-size, 28.75rem), 100%);
-    padding-block: var(--xh-toast-py, var(--xh-space-3));
-    padding-inline: var(--xh-toast-px, var(--xh-space-4));
-    border: var(--xh-stroke-thin) solid var(--xh-toast-border, var(--xh-material-elevated-border));
-    border-radius: var(--xh-toast-radius, var(--xh-shape-overlay));
-    background: var(--xh-toast-bg, var(--xh-material-elevated-bg));
-    color: var(--xh-toast-fg, var(--xh-material-elevated-fg));
-    box-shadow: var(--xh-toast-shadow, var(--xh-material-elevated-shadow));
-    font-size: var(--xh-toast-font-size, var(--xh-text-label-size));
-    line-height: var(--xh-toast-leading, var(--xh-text-body-leading));
-    /* 摞的定位面整面铺开且不吃指针，条子必须自己吃回来：
-       悬停按住计时、按钮可点、焦点进出，全指着这一条 */
-    pointer-events: auto;
-    transform: translateY(calc(var(--xh-toast-dir, 1) * var(--xh-toast-y))) scale(var(--xh-toast-scale));
-    transform-origin: bottom center;
-    transition:
-      transform var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
-      block-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous),
-      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
-  }
-
-  [data-scope='toast'][data-part='group'] [data-scope='toast'][data-part='root'] {
-    position: absolute;
-    inset-inline: 0;
-    inline-size: 100%;
-  }
-
-  [data-scope='toast'][data-part='root'][data-placement^='bottom'] {
-    --xh-toast-dir: -1;
-    inset-block-end: 0;
-  }
-
-  [data-scope='toast'][data-part='root'][data-placement^='top'] {
-    --xh-toast-dir: 1;
-    inset-block-start: 0;
-    transform-origin: top center;
-  }
-
-  /* 退场窗口走完连接层给的是 hidden 属性，而上面声明了 display——
-     漏掉这条，已经"卸载"的提示会一直杵在屏幕上，且再也没人来收 */
-  [data-scope='toast'][data-part='root'][hidden] {
-    display: none;
-  }
-
-  /* 生命周期只有三段，unmounted 那段由上面的 [hidden] 收走，这里只管前两段 */
-  [data-scope='toast'][data-part='root'][data-state='visible'] {
-    animation: xh-toast-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
-  }
-
-  [data-scope='toast'][data-part='root'][data-stack-index]:not([data-frontmost]):not([data-expanded]) {
-    block-size: var(--xh-toast-front-height, auto);
-    overflow: hidden;
-  }
-
-  [data-scope='toast'][data-part='root'][data-stack-index]:not([data-frontmost]):not([data-expanded])
-  > :not([data-part='close-trigger']) {
-    opacity: 0;
-  }
-
-  [data-scope='toast'][data-part='root'][data-expanded] {
-    --xh-toast-y: var(--xh-toast-offset-expanded, 0px);
-    --xh-toast-scale: 1;
-    block-size: var(--xh-toast-height, auto);
-  }
-
-  [data-scope='toast'][data-part='root'] > :not([data-part='close-trigger']) {
-    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
-  }
-
-  /* forwards 不能省：退场窗口（removeDelay 默认 300ms）比退场动画长，
-     不定住末帧的话动画跑完会弹回全不透明，条子在被收起前先闪一下 */
-  [data-scope='toast'][data-part='root'][data-state='dismissing'] {
-    animation: xh-toast-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
-  }
-
-  /*
-   * 语气的非颜色通道。行首字形按 data-tone 区分信息、成功、警告与失败；加载中另由 data-loading 说，
-   * 字形换成转圈但配色仍照语气走。
-   * 作者未渲染 indicator 时由 root 的伪元素补上。
-   */
-  [data-scope='toast'][data-part='root']::before {
-    content: '';
-    flex: none;
-    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: var(--xh-toast-icon-fg, var(--xh-_tone-fg));
-    -webkit-mask: var(--xh-glyph-mark-info) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-info) center / contain no-repeat;
-  }
-
-  [data-scope='toast'][data-part='root'][data-tone='success']::before {
-    -webkit-mask-image: var(--xh-glyph-mark-check);
-    mask-image: var(--xh-glyph-mark-check);
-  }
-
-  [data-scope='toast'][data-part='root'][data-tone='warning']::before {
-    -webkit-mask-image: var(--xh-glyph-mark-warning);
-    mask-image: var(--xh-glyph-mark-warning);
-  }
-
-  [data-scope='toast'][data-part='root'][data-tone='danger']::before {
-    -webkit-mask-image: var(--xh-glyph-mark-close);
-    mask-image: var(--xh-glyph-mark-close);
-  }
-
-  /* 加载中不是语气：只换字形，颜色沿用当前语气的前景档；写在四档语气之后，转圈压过它们 */
-  [data-scope='toast'][data-part='root'][data-loading]::before {
-    -webkit-mask-image: var(--xh-glyph-mark-rotate-right);
-    mask-image: var(--xh-glyph-mark-rotate-right);
-    animation: xh-toast-spin var(--xh-spin-duration) var(--xh-motion-ease-loop) infinite;
-  }
-
-  /* 减少动效：转圈停下，静止的箭头仍然读得出「还没好」；「在等什么」由条子上的
-     role=status 与可见文案继续承担。
-     两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='toast'][data-part='root'][data-loading]::before {
-      animation: none;
-    }
-  }
-
-  :where([data-motion='reduce']) [data-scope='toast'][data-part='root'][data-loading]::before {
-    animation: none;
-  }
-
-  /* 作者渲染了指示符部件，行首那枚兜底字形就让位给它，一行里不出现两枚图形 */
-  [data-scope='toast'][data-part='root']:has([data-part='indicator'])::before {
-    content: none;
-  }
-
-  /* 指示符部件：字形与 root 上那枚同尺同色，作者往里塞节点即整枚换掉 */
-  [data-scope='toast'][data-part='indicator'] {
-    flex: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: content-box;
-    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    padding: var(--xh-toast-indicator-p, var(--xh-space-1));
-    color: var(--xh-toast-icon-fg, var(--xh-_tone-fg));
-  }
-
-  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
-  [data-scope='toast'][data-part='indicator']: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-info) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-info) center / contain no-repeat;
-  }
-
-  [data-scope='toast'][data-part='indicator'][data-tone='success']:empty::before {
-    -webkit-mask-image: var(--xh-glyph-mark-check);
-    mask-image: var(--xh-glyph-mark-check);
-  }
-
-  [data-scope='toast'][data-part='indicator'][data-tone='warning']:empty::before {
-    -webkit-mask-image: var(--xh-glyph-mark-warning);
-    mask-image: var(--xh-glyph-mark-warning);
-  }
-
-  [data-scope='toast'][data-part='indicator'][data-tone='danger']:empty::before {
-    -webkit-mask-image: var(--xh-glyph-mark-close);
-    mask-image: var(--xh-glyph-mark-close);
-  }
-
-  [data-scope='toast'][data-part='indicator'][data-loading]:empty::before {
-    -webkit-mask-image: var(--xh-glyph-mark-rotate-right);
-    mask-image: var(--xh-glyph-mark-rotate-right);
-    animation: xh-toast-spin var(--xh-spin-duration) var(--xh-motion-ease-loop) infinite;
-  }
-
-  /* 减少动效：与 root 上那枚同一处理——转圈停下，静止的箭头仍读得出「还没好」。
-     两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='toast'][data-part='indicator'][data-loading]:empty::before {
-      animation: none;
-    }
-  }
-
-  :where([data-motion='reduce']) [data-scope='toast'][data-part='indicator'][data-loading]:empty::before {
-    animation: none;
-  }
-
-  [data-scope='toast'][data-part='indicator'][hidden] {
-    display: none;
-  }
-
-  [data-scope='toast'][data-part='content'] {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    align-self: center;
-    min-inline-size: 0;
-  }
-
-  [data-scope='toast'][data-part='title'],
-  [data-scope='toast'][data-part='description'] {
-    margin: 0;
-    min-inline-size: 0;
-  }
-
-  [data-scope='toast'][data-part='title'] {
-    color: var(--xh-toast-title-fg, var(--xh-_tone-fg));
-    font-size: var(--xh-toast-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-toast-title-font-weight, var(--xh-font-weight-semibold));
-    line-height: var(--xh-toast-title-leading, var(--xh-text-body-leading));
-  }
-
-  [data-scope='toast'][data-part='description'] {
-    color: var(--xh-toast-description-fg, var(--xh-fg-muted));
-    font-size: var(--xh-toast-description-font-size, var(--xh-text-secondary-size));
-    line-height: var(--xh-toast-description-leading, var(--xh-leading-normal));
-  }
-
-  /* 没给文案时仍然要留在 DOM 里（aria-labelledby 指着它），
-     但空盒子会照吃一份 gap，条子看着就多出一截莫名的留白 */
-  [data-scope='toast'][data-part='title']:empty {
-    display: none;
-  }
-
-  [data-scope='toast'][data-part='description']:empty {
-    display: none;
-  }
-
-  [data-scope='toast'][data-part='title'][hidden] {
-    display: none;
-  }
-
-  /* 操作钮是带文案的离散动作钮：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由 Action Control
-     的 text outline 档给（连接层投 sm；非 Button 的触发器缺省中性描边、透明底），组件只映射既有使用者槽。
-     语气只落到状态字形和标题：这颗钮坐在带 data-tone 的条子里，底 / 边 / 字钉在中性语义面上，不随语气；
-     条子是 sheet 白面承载：hover --xh-bg-subtle（100）→ pressed --xh-bg-subtle-hover（200）。
-     条子是单行 flex，按钮不参与伸缩：文案长了该换行的是文字 */
-  [data-scope='toast'][data-part='action-trigger'] {
-    --xh-action-visual-size: var(--xh-toast-action-h, var(--xh-_action-profile-visual-size));
-    --xh-action-padding-inline: var(--xh-toast-action-px, var(--xh-_action-profile-padding-inline));
-    --xh-action-radius: var(--xh-toast-action-radius, var(--xh-shape-control));
-    --xh-action-bg-rest: var(--xh-toast-action-bg, transparent);
-    --xh-action-bg-hover: var(--xh-toast-action-bg-hover, var(--xh-bg-subtle));
-    --xh-action-bg-pressed: var(--xh-toast-action-bg-active, var(--xh-bg-subtle-hover));
-    --xh-action-fg-rest: var(--xh-toast-action-fg, var(--xh-fg-default));
-    --xh-action-fg-hover: var(--xh-toast-action-fg, var(--xh-fg-default));
-    --xh-action-fg-pressed: var(--xh-toast-action-fg, var(--xh-fg-default));
-    --xh-action-border-rest: var(--xh-toast-action-border, var(--xh-border-control));
-    --xh-action-border-hover: var(--xh-toast-action-border, var(--xh-border-control-hover));
-    --xh-action-border-pressed: var(--xh-toast-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;
-
-    flex: none;
-    align-self: center;
-    font-weight: var(--xh-toast-action-font-weight, var(--xh-font-weight-medium));
-  }
-
-  /* 家族那条 display 会把 UA 的 [hidden]{display:none} 盖掉 */
-  [data-scope='toast'][data-part='action-trigger'][hidden] {
-    display: none;
-  }
-
-  /*
-   * 倒计时条。总时长由连接层写进 --xh-toast-progress-duration（不自动消失的那些整条收起），
-   * 计时被按住时动画一并停住——停表这件事此前没有任何可画的地方。
-   * 取装饰档 --xh-_tone-soft：压在同族淡底上仍看得出来。
-   */
-  [data-scope='toast'][data-part='progress'] {
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    overflow: hidden;
-    inline-size: 100%;
-    block-size: var(--xh-toast-progress-thickness, var(--xh-space-0_5));
-    background: var(--xh-toast-progress-bg, var(--xh-_tone-soft));
-    animation: xh-countdown var(--xh-toast-progress-duration, var(--xh-motion-duration-slide)) var(--xh-motion-ease-loop) forwards;
-  }
-
-  [data-scope='toast'][data-part='root'][data-paused] [data-part='progress'] {
-    animation-play-state: paused;
-  }
-
-  [data-scope='toast'][data-part='progress'][hidden] {
-    display: none;
-  }
-
-  /* 关闭钮是只有字形的离散动作钮：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由 Action Control
-     的 icon ghost 档给（连接层投 xs：24px 正方盒，与此前 --xh-control-action-size 同尺寸；那颗叉排在单行短消息里，
-     走行级动作钮那一档），组件只映射既有使用者槽。静息透明，sheet 白面承载 hover 100 → pressed 200，
-     写了语气时悬停底跟着语气走（--xh-_tone-subtle）。
-     有悬停能力的设备上默认静默、指针进入条子或焦点落进条子后显现——不走家族的 hover-focus 显示策略：
-     那一档用 visibility 收起，这颗叉占 Tab 位，收成 visibility: hidden 后键盘就够不到它了；
-     这里只压 opacity 与 pointer-events，焦点仍能落进来 */
-  [data-scope='toast'][data-part='close-trigger'] {
-    --xh-action-visual-size: var(--xh-toast-close-size, var(--xh-_action-profile-visual-size));
-    --xh-action-min-inline-size: var(--xh-toast-close-size, var(--xh-_action-profile-visual-size));
-    --xh-action-radius: var(--xh-toast-close-radius, var(--xh-shape-control));
-    --xh-action-bg-rest: var(--xh-toast-close-bg, var(--xh-_action-variant-bg-rest));
-    --xh-action-bg-hover: var(--xh-toast-close-bg-hover, var(--xh-_action-variant-bg-hover));
-    --xh-action-bg-pressed: var(--xh-toast-close-bg-active, var(--xh-_action-variant-bg-pressed));
-    --xh-action-fg-rest: var(--xh-toast-close-fg, var(--xh-fg-muted));
-    --xh-action-fg-hover: var(--xh-toast-close-fg-hover, var(--xh-fg-default));
-    --xh-action-fg-pressed: var(--xh-toast-close-fg-hover, var(--xh-fg-default));
-    --xh-action-border-rest: var(--xh-toast-close-border, var(--xh-_action-variant-border-rest));
-    --xh-action-highlight-rest: transparent;
-    --xh-action-shadow-rest: none;
-    --xh-action-shadow-hover: none;
-    --xh-action-shadow-pressed: none;
-    /* 叉的字形按钮档取值（xs → 16px），与 root 上给指示符的 md 档分开 */
-    --xh-icon-size: var(--xh-toast-icon-size, var(--xh-_action-profile-glyph-size));
-
-    flex: none;
-    align-self: center;
-  }
-
-  @media (hover: hover) {
-    [data-scope='toast'][data-part='close-trigger'] {
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    [data-scope='toast'][data-part='root']:hover [data-part='close-trigger'],
-    [data-scope='toast'][data-part='root']:focus-within [data-part='close-trigger'] {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-
-  /* 折叠堆叠只允许最前一条露出关闭入口；触屏没有 hover，必须显式收起后台按钮。 */
-  [data-scope='toast'][data-part='root'][data-stack-index]:not([data-frontmost]):not([data-expanded])
-  [data-part='close-trigger'] {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  /* closable=false 时连接层同时给了 hidden 与 disabled，这条是它真正收起的那一半：
-     上面声明了 display，不补回来就会留下一个按不动的叉，比压根没有叉更让人困惑 */
-  [data-scope='toast'][data-part='close-trigger'][hidden] {
-    display: none;
-  }
-
-  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
-  [data-scope='toast'][data-part='close-trigger']: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-close) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-close) center / contain no-repeat;
-  }
-
-  @media print {
-    /* 打印：轻提示是瞬态的，打印那一刻恰好在场就会横在正文上，且它已经错过了被读到的时机。 */
-    [data-scope='toast'][data-part='group'] {
-      display: none;
-    }
-
-    /* 摞收起后条子本不该出现在纸上；这一条兜的是作者把条子摆在别处的用法：
-       动画会被定格在任意一帧——转了一半的圈。取值与减弱动效那一档相同。 */
-    [data-scope='toast'][data-part='root'][data-loading]::before {
-      animation: none;
-    }
-  }
-
-  [data-scope='toast'][data-part='content'][hidden],
-  [data-scope='toast'][data-part='description'][hidden] {
-    display: none;
-  }
-}