@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/message-feed.css

@@ -0,0 +1,318 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 message feed 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+/* 独立皮肤同时传递引入回底钮的动作控件配方，full bundle 递归去重。 */
+@import '../family/action-control.css';
+@import '../family/material.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-message-feed {
+    --xh-message-feed-skin: 1;
+  }
+
+  /* 根是定位基准：回到底部按钮贴在它的右下角。高度由使用者的版面给，这里不定高 */
+  .xh-scope-message-feed[data-part='root'] {
+    /* 尺寸缺省档：不写 data-size 时的取值。三档都只写这两个私有槽，
+       公开槽留在读处当首选，作者在祖先上设的覆盖才赢得过档位声明 */
+    --xh-_message-feed-gap: var(--xh-space-4);
+    --xh-_message-feed-p: var(--xh-space-4);
+
+    position: relative;
+    display: flex;
+    min-block-size: 0;
+    flex-direction: column;
+  }
+
+  .xh-scope-message-feed[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 滚动容器：粘底视口，走 reset 层的原生细条。overscroll-behavior 挡住滚到头之后把整页一起带走 */
+  .xh-scope-message-feed[data-part='viewport'] {
+    overflow-y: auto;
+    flex: 1 1 auto;
+    min-block-size: 0;
+    overscroll-behavior: contain;
+  }
+
+  /* 流式视口的内容高度一直在变，还在用原生滚动条的视口留一条空道，滚动条出现与消失时不推动文字。
+     带 data-xh-scrollbar 的容器已经把原生条藏成零宽，这条空道对它没有布局作用，排除掉 */
+  .xh-scope-message-feed[data-part='viewport']:not([data-xh-scrollbar]) {
+    scrollbar-gutter: stable;
+  }
+
+  .xh-scope-message-feed[data-part='list'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-message-feed-gap, var(--xh-_message-feed-gap));
+    padding: var(--xh-message-feed-p, var(--xh-_message-feed-p));
+  }
+
+  .xh-scope-message-feed[data-part='list'][hidden] {
+    display: none;
+  }
+
+  /* 已发送、等首个片段：列表之后一颗呼吸的圆点，行首与消息内容对齐。
+     呼吸只表达「正在进行、给不出进度」：明暗与缩放的起伏持续到首个片段到来，外扩光环同周期播 3 轮后停下。
+     连接层只在 submitted 时撤掉 hidden */
+  .xh-scope-message-feed[data-part='pending-indicator'] {
+    position: relative;
+    display: block;
+    inline-size: var(--xh-message-feed-pending-indicator-size, var(--xh-space-2));
+    block-size: var(--xh-message-feed-pending-indicator-size, var(--xh-space-2));
+    margin-block-end: var(--xh-message-feed-p, var(--xh-_message-feed-p));
+    margin-inline-start: var(--xh-message-feed-p, var(--xh-_message-feed-p));
+    border-radius: var(--xh-message-feed-pending-indicator-radius, var(--xh-shape-circle));
+    background: var(--xh-message-feed-pending-indicator-color, var(--xh-fg-muted));
+    animation: xh-breathe var(--xh-motion-loop-breathe) var(--xh-motion-ease-breathe) infinite;
+  }
+
+  .xh-scope-message-feed[data-part='pending-indicator']::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: inherit;
+    opacity: 0;
+    pointer-events: none;
+    animation: xh-breathe-halo var(--xh-motion-loop-breathe) var(--xh-motion-ease-breathe) 3;
+  }
+
+  /* 减弱动效：两者都停，圆点停在满不透明度，光环不出现 */
+  @media (prefers-reduced-motion: reduce) {
+    .xh-scope-message-feed[data-part='pending-indicator'],
+    .xh-scope-message-feed[data-part='pending-indicator']::after {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) .xh-scope-message-feed[data-part='pending-indicator'],
+  :where([data-motion='reduce']) .xh-scope-message-feed[data-part='pending-indicator']::after {
+    animation: none;
+  }
+
+  .xh-scope-message-feed[data-part='pending-indicator'][hidden] {
+    display: none;
+  }
+
+  /* 一条消息。默认整行铺开，左右分侧由使用者按 data-role 自己写 */
+  .xh-scope-message-feed[data-part='item'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-message-feed-item-gap, var(--xh-space-1));
+    border-radius: var(--xh-message-feed-item-radius, var(--xh-shape-surface));
+  }
+
+  /* 新到的消息进场，同一批按到达顺序错开；首帧就在的历史消息直接呈现（自己或 list 带 data-instant）。
+     进场只动 opacity 与 translate：改高度会扰动粘底补偿量到的 scrollHeight */
+  .xh-scope-message-feed[data-part='item']:not([data-instant], [data-instant] > :where(.xh-scope-message-feed)) {
+    animation: xh-item-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));
+  }
+
+  .xh-scope-message-feed[data-part='item'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-message-feed[data-part='item-label'] {
+    display: block;
+    color: var(--xh-message-feed-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-message-feed-label-font-size, var(--xh-text-caption-size));
+    line-height: var(--xh-leading-tight);
+  }
+
+  .xh-scope-message-feed[data-part='item-label'][hidden] {
+    display: none;
+  }
+
+  /* 回到底部：浮在滚动区右下角，收起时不卸载只隐藏。盒型、悬停 / 按下面与缩放由 Action Control 的
+     floating 档给（circle 正方盒、ghost 形态：白底承载 hover 100 → pressed 200）；材质随角落浮钮族走
+     frosted 四件套（底 + 边 + 影 + 磨砂），这里只把使用者槽映射到桥接槽：
+     字形按 xs 档取 --xh-_action-profile-glyph-size（16px），与 log / back-top 同一把尺 */
+  .xh-scope-message-feed[data-part='scroll-to-end-trigger'] {
+    /* 面走材质家族配方（family/material.css）：frosted 档的底、交互阶梯、描边、投影、1px 顶光与背景滤镜，
+       liquid 档由配方换成液态面；这里把使用者槽接到 Action Control 的桥接槽 */
+    --xh-action-bg-rest: var(--xh-message-feed-scroll-to-end-trigger-bg, var(--xh-_material-bg));
+    --xh-action-bg-hover: var(--xh-message-feed-scroll-to-end-trigger-bg-hover, var(--xh-_material-bg-hover));
+    --xh-action-bg-pressed: var(--xh-_material-bg-pressed);
+    --xh-action-bg-focus-visible: var(--xh-message-feed-scroll-to-end-trigger-bg, var(--xh-_material-bg-focus));
+    --xh-action-bg-disabled: var(--xh-message-feed-scroll-to-end-trigger-bg, var(--xh-_material-bg));
+    --xh-action-fg-rest: var(--xh-message-feed-scroll-to-end-trigger-fg, var(--xh-_material-fg));
+    --xh-action-fg-hover: var(--xh-message-feed-scroll-to-end-trigger-fg, var(--xh-_material-fg));
+    --xh-action-fg-pressed: var(--xh-message-feed-scroll-to-end-trigger-fg, var(--xh-_material-fg));
+    --xh-action-fg-focus-visible: var(--xh-message-feed-scroll-to-end-trigger-fg, var(--xh-_material-fg));
+    --xh-action-border-rest: var(--xh-message-feed-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-border-hover: var(--xh-message-feed-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-border-pressed: var(--xh-message-feed-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-border-focus-visible: var(--xh-message-feed-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-border-disabled: var(--xh-message-feed-scroll-to-end-trigger-border, var(--xh-_material-border));
+    --xh-action-shadow-rest: var(--xh-message-feed-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-hover: var(--xh-message-feed-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-pressed: var(--xh-message-feed-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-focus-visible: var(--xh-message-feed-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-shadow-disabled: var(--xh-message-feed-scroll-to-end-trigger-shadow, var(--xh-_material-shadow));
+    --xh-action-highlight-rest: var(--xh-_material-highlight);
+    --xh-action-highlight-hover: var(--xh-_material-highlight);
+    --xh-action-highlight-pressed: var(--xh-_material-highlight);
+    --xh-action-highlight-focus-visible: var(--xh-_material-highlight);
+    --xh-action-highlight-disabled: var(--xh-_material-highlight);
+    --xh-action-visual-size: var(--xh-message-feed-scroll-to-end-trigger-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-message-feed-scroll-to-end-trigger-radius, var(--xh-shape-circle));
+    --xh-icon-size: var(--xh-message-feed-icon-size, var(--xh-_action-profile-glyph-size));
+
+    position: absolute;
+    inset-block-end: var(--xh-message-feed-scroll-to-end-trigger-inset, var(--xh-space-4));
+    inset-inline-end: var(--xh-message-feed-scroll-to-end-trigger-inset, var(--xh-space-4));
+  }
+
+  /* 连接层收起按钮时写 hidden 属性，家族那条 display 会盖掉 UA 规则，这里补回 */
+  .xh-scope-message-feed[data-part='scroll-to-end-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 收起不卸载：离底时冒出来播进场，回底时先播完退场、连接层才写 hidden 藏起。
+     不写 display，可见性归上面那条 [hidden] 管；退场途中不再接指针 */
+  .xh-scope-message-feed[data-part='scroll-to-end-trigger'][data-state='visible'] {
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  .xh-scope-message-feed[data-part='scroll-to-end-trigger'][data-state='hidden']:not([hidden]) {
+    pointer-events: none;
+    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 没写内容（或只放了未读数角标）就由皮肤画一枚向下的字形；作者往按钮里塞了自己的图形，这条规则即不命中 */
+  .xh-scope-message-feed[data-part='scroll-to-end-trigger']:empty::before,
+  .xh-scope-message-feed[data-part='scroll-to-end-trigger']:has(> [data-part='unread-count']:only-child)::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-chevron-down) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-down) center / contain no-repeat;
+  }
+
+  /* 尺寸档只改消息之间的距离与内边距；宽松档把消息之间再放开一级，内边距不跟 */
+  .xh-scope-message-feed[data-part='root'][data-size='sm'] {
+    --xh-_message-feed-gap: var(--xh-space-2);
+    --xh-_message-feed-p: var(--xh-space-2);
+  }
+
+  .xh-scope-message-feed[data-part='root'][data-size='md'] {
+    --xh-_message-feed-gap: var(--xh-space-4);
+    --xh-_message-feed-p: var(--xh-space-4);
+  }
+
+  .xh-scope-message-feed[data-part='root'][data-size='lg'] {
+    --xh-_message-feed-gap: var(--xh-space-8);
+    --xh-_message-feed-p: var(--xh-space-6);
+  }
+
+  /* 视觉隐藏的原子播报区：不能 display:none，那样读屏就取不到它了 */
+  .xh-scope-message-feed[data-part='live-region'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* 消息之间的分隔（按日期分组）：一行次级标注居中，两侧各一道内部分隔线 */
+  .xh-scope-message-feed[data-part='separator'] {
+    display: flex;
+    align-items: center;
+    gap: var(--xh-message-feed-separator-gap, var(--xh-space-3));
+    color: var(--xh-message-feed-separator-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-message-feed-separator-font-size, var(--xh-text-caption-size));
+  }
+
+  .xh-scope-message-feed[data-part='separator']::before,
+  .xh-scope-message-feed[data-part='separator']::after {
+    flex: 1;
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-message-feed-separator-line, var(--xh-border-subtle));
+    content: '';
+  }
+
+  .xh-scope-message-feed[data-part='separator'][hidden] {
+    display: none;
+  }
+
+  /* 回到底部上的未读数：状态 chip，钉在按钮行尾上角外侧，不改按钮盒 */
+  .xh-scope-message-feed[data-part='unread-count'] {
+    position: absolute;
+    inset-block-start: calc(-1 * var(--xh-space-1));
+    inset-inline-end: calc(-1 * var(--xh-space-1));
+    box-sizing: border-box;
+    min-inline-size: var(--xh-message-feed-unread-count-size, var(--xh-space-4));
+    block-size: var(--xh-message-feed-unread-count-size, var(--xh-space-4));
+    padding-inline: var(--xh-message-feed-unread-count-px, var(--xh-space-1));
+    border-radius: var(--xh-message-feed-unread-count-radius, var(--xh-shape-pill));
+    background: var(--xh-message-feed-unread-count-bg, var(--xh-bg-brand));
+    color: var(--xh-message-feed-unread-count-fg, var(--xh-fg-on-brand));
+    font-size: var(--xh-message-feed-unread-count-font-size, var(--xh-text-caption-size));
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-message-feed-unread-count-size, var(--xh-space-4));
+    text-align: center;
+    pointer-events: none;
+  }
+
+  .xh-scope-message-feed[data-part='unread-count'][hidden] {
+    display: none;
+  }
+
+  @media print {
+    /* 打印：回到底部这颗钮只有在能滚的地方才成立，落到纸上是一颗按不动的按钮；
+       等首个片段的呼吸点是一瞬间的状态，纸上没有「正在进行」。 */
+    .xh-scope-message-feed[data-part='scroll-to-end-trigger'],
+    .xh-scope-message-feed[data-part='pending-indicator'] {
+      display: none;
+    }
+  }
+
+  /* 强制色：底色会被系统背景吃掉，圆点改用系统前景色 */
+  @media (forced-colors: active) {
+    .xh-scope-message-feed[data-part='pending-indicator'] {
+      background: CanvasText;
+    }
+
+    .xh-scope-message-feed[data-part='unread-count'] {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-message-feed[data-part='scroll-to-end-trigger']:empty::before,
+    .xh-scope-message-feed[data-part='scroll-to-end-trigger']:has(> [data-part='unread-count']:only-child)::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-message-feed[data-part='scroll-to-end-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before,
+    .xh-scope-message-feed[data-part='scroll-to-end-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):has(> [data-part='unread-count']:only-child)::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-message-feed[data-part='scroll-to-end-trigger'][data-disabled]:empty::before,
+    .xh-scope-message-feed[data-part='scroll-to-end-trigger'][data-disabled]:has(> [data-part='unread-count']:only-child)::before {
+      background-color: GrayText;
+    }
+  }
+}