@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/mention.css

@@ -0,0 +1,395 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* Mention 独立皮肤同时传递引入字段视觉盒与浮层集合行；full bundle 递归去重。 */
+@import '../family/field-chrome.css';
+@import '../family/collection-item.css';
+@import '../family/loading-ring.css';
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/material.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-mention {
+    --xh-mention-skin: 1;
+  }
+
+  /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
+  .xh-scope-mention[data-part='positioner'] {
+    /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
+       引擎没算（尚未落位 / 无引擎）时不额外限高 */
+    --xh-_mention-available-h: 100vh;
+    /* 落定那一侧的可用宽度，同样由定位引擎经内联自定义属性写进来，行内轴据此夹取；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时退到视口宽 */
+    --xh-_mention-available-w: 100vw;
+    /* 本层先清空祖先方向，再使用实际落位方向。 */
+    --xh-_overlay-enter-up: 0;
+    --xh-_overlay-enter-down: 0;
+    --xh-_overlay-enter-left: 0;
+    --xh-_overlay-enter-right: 0;
+
+    /* 候选列表的自绘条浮在内容之上：轨道不上底色，实色轨道会在列表右缘糊一条竖灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
+    position: fixed;
+    /* listbox 与同级状态文字占同一个格；content 始终是唯一拥有材质的表面。 */
+    display: grid;
+    z-index: var(--xh-mention-layer, var(--xh-_layer, var(--xh-layer-popover)));
+    /* 空壳不吃指针，交互只发生在 content 上 */
+    pointer-events: none;
+  }
+
+  /* 输入框被滚出可视区：整个浮层随之收起 */
+  .xh-scope-mention[data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  .xh-scope-mention[data-part='positioner'][hidden] {
+    display: none;
+  }
+
+  /* 进退场按实际落位的物理方向移动，不随书写方向翻转。 */
+  .xh-scope-mention[data-part='positioner'][data-placement^='top'] {
+    --xh-_overlay-enter-down: 1;
+  }
+
+  .xh-scope-mention[data-part='positioner'][data-placement^='bottom'] {
+    --xh-_overlay-enter-up: 1;
+  }
+
+  .xh-scope-mention[data-part='positioner'][data-placement^='left'] {
+    --xh-_overlay-enter-right: 1;
+  }
+
+  .xh-scope-mention[data-part='positioner'][data-placement^='right'] {
+    --xh-_overlay-enter-left: 1;
+  }
+
+  /* 私有槽同时声明在根与 positioner 上：浮层被搬到 portal 落点，不是根的后代，继承不过去 */
+  .xh-scope-mention:is([data-part='root'], [data-part='positioner']) {
+    /* 尺寸档只换这六个私有槽，输入框与候选都从这两处继承它们，换档不必给每个部件各写一条选择器 */
+    --xh-_mention-h: var(--xh-control-h-md);
+    --xh-_mention-px: var(--xh-control-px-md);
+    --xh-_mention-item-py: var(--xh-list-option-py-md);
+    --xh-_mention-item-h: var(--xh-list-option-h-md);
+    --xh-_mention-item-px: var(--xh-control-px-md);
+    --xh-_mention-gap: var(--xh-control-gap-md);
+    --xh-_mention-font-size: var(--xh-control-font-md);
+  }
+
+  .xh-scope-mention[data-part='root'] {
+    display: block;
+
+    /* 不传尺寸时一律这么宽，宽度不随内容走；父容器给不出这么宽时整件跟着收，地板同步让步，不越出父容器。
+       地板不高过缺省宽：使用者把缺省宽钉到底线以下时不必再放开底线 */
+    inline-size: var(--xh-mention-input-w, var(--xh-control-w));
+    min-inline-size: min(var(--xh-mention-input-w, var(--xh-control-w)), var(--xh-mention-input-min-w, var(--xh-control-min-w)), 100%);
+    max-inline-size: 100%;
+  }
+
+  /* 只要声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  .xh-scope-mention[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 标题：与输入框上下排，行距不留额外空白 */
+  .xh-scope-mention[data-part='label'] {
+    display: block;
+    margin-block-end: var(--xh-mention-label-gap, var(--xh-space-2));
+    color: var(--xh-mention-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-mention-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-mention-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+  }
+
+  .xh-scope-mention[data-part='label'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-mention[data-part='label'][data-disabled] {
+    color: var(--xh-mention-label-fg-disabled, var(--xh-fg-muted));
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  .xh-scope-mention:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
+    --xh-_mention-h: var(--xh-control-h-sm);
+    --xh-_mention-px: var(--xh-control-px-sm);
+    --xh-_mention-item-py: var(--xh-list-option-py-sm);
+    --xh-_mention-item-h: var(--xh-list-option-h-sm);
+    --xh-_mention-item-px: var(--xh-control-px-sm);
+    --xh-_mention-gap: var(--xh-control-gap-sm);
+    --xh-_mention-font-size: var(--xh-control-font-sm);
+  }
+
+  .xh-scope-mention:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
+    --xh-_mention-h: var(--xh-control-h-lg);
+    --xh-_mention-px: var(--xh-control-px-lg);
+    --xh-_mention-item-py: var(--xh-list-option-py-lg);
+    --xh-_mention-item-h: var(--xh-list-option-h-lg);
+    --xh-_mention-item-px: var(--xh-control-px-lg);
+    --xh-_mention-gap: var(--xh-control-gap-lg);
+    --xh-_mention-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 框与聚焦环都长在输入框自己身上：这里没有把输入框和别的控件裹成一体的输入行，
+     整个组件在视觉上就是这一个可打字的方框。描边、底色、圆角、聚焦环、五态与悬停由 Field Chrome
+     家族画在它身上（自身聚焦同样命中家族的 :focus-within）；组件只映射既有公开槽。
+     家族 chrome 不设字号，输入框的字号仍由本皮肤给；形态三档由家族按 data-variant 生成 */
+  .xh-scope-mention[data-part='input'] {
+    --xh-field-control-height: var(--xh-mention-input-h, var(--xh-_mention-h));
+    --xh-field-control-padding-inline: var(--xh-mention-input-px, var(--xh-_mention-px));
+    --xh-field-control-gap: 0;
+    --xh-field-control-min-inline-size: var(--xh-mention-input-min-w, var(--xh-control-min-w));
+    --xh-field-control-radius: var(--xh-mention-input-radius, var(--xh-shape-control));
+    --xh-field-bg-rest: var(--xh-mention-input-bg, var(--xh-_field-variant-bg-rest));
+    --xh-field-bg-hover: var(--xh-mention-input-bg-hover, var(--xh-_field-variant-bg-hover));
+    --xh-field-bg-read-only: var(--xh-mention-input-bg-readonly, var(--xh-_field-variant-bg-read-only));
+    --xh-field-bg-disabled: var(--xh-mention-input-bg-disabled, var(--xh-_field-variant-bg-disabled));
+    --xh-field-fg-rest: var(--xh-mention-input-fg, var(--xh-fg-default));
+    --xh-field-border-rest: var(--xh-mention-input-border, var(--xh-_field-variant-border-rest));
+    --xh-field-border-hover: var(--xh-mention-input-border-hover, var(--xh-_field-variant-border-hover));
+    --xh-field-border-focus: var(--xh-mention-input-border-focus, var(--xh-_field-variant-border-focus));
+    --xh-field-border-invalid: var(--xh-mention-input-border-invalid, var(--xh-_field-variant-border-invalid));
+    --xh-field-shadow-rest: var(--xh-mention-input-shadow, none);
+
+    inline-size: 100%;
+    /* 表单控件不继承页面字体，只给字号会让输入框用 UA 默认字族，与周围文本对不上 */
+    font-family: inherit;
+    font-size: var(--xh-mention-input-font-size, var(--xh-_mention-font-size));
+    line-height: var(--xh-leading-normal);
+  }
+
+  .xh-scope-mention[data-part='input'][hidden] {
+    display: none;
+  }
+
+  /* 多行形态：正文可以换行，框随 rows 定起始高度、不钉单行控件高（家族的多行布局给）；
+     框自己就是 chrome，家族多行布局把上下内衬归零，这里按文本字段多行档同一支令牌补回，只许纵向拉伸 */
+  .xh-scope-mention[data-part='input'][data-xh-field-layout='textarea'] {
+    padding-block: var(--xh-mention-textarea-py, var(--xh-space-1));
+    resize: vertical;
+  }
+
+  /* 输入框自身即 chrome，家族按 data-xh-field-input 给的占位色命不中它，占位色仍由本皮肤给 */
+  .xh-scope-mention[data-part='input']::placeholder {
+    color: var(--xh-mention-placeholder-fg, var(--xh-fg-subtle));
+  }
+
+  /* 自动填充：引擎给填过的框强加一套系统色（多数是黄底黑字），盖得过 background 与 color，
+     深色档下就剩一个不跟主题走的黄框。底改用 inset 阴影铺回来，扩散量 100vmax 填满内容盒；
+     字改用 -webkit-text-fill-color 接回来，那是这个态下唯一还听样式表的前景通道。
+     不去拉长 transition 把系统底推迟显现：那只是把它藏起来，减弱动效通道一关过渡就当场露出。
+     两个选择器名分写两条：一条选择器列表里只要有一个名字不被认识，整条规则就被丢弃。
+     家族按 data-xh-field-input 给的两条命不中自身即 chrome 的输入框，这里自写；底取不透明的面令牌，
+     ghost 档下透明底铺了等于没铺。描边式静息无影，不再叠落影 */
+  .xh-scope-mention[data-part='input']:autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-mention-input-autofill-bg, var(--xh-bg-canvas));
+    -webkit-text-fill-color: var(--xh-mention-input-autofill-fg, var(--xh-fg-default));
+  }
+
+  .xh-scope-mention[data-part='input']:-webkit-autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-mention-input-autofill-bg, var(--xh-bg-canvas));
+    -webkit-text-fill-color: var(--xh-mention-input-autofill-fg, var(--xh-fg-default));
+  }
+
+  .xh-scope-mention[data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-mention-content-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-mention-content-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-mention-content-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-mention-content-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-mention-content-backdrop, var(--xh-_material-backdrop));
+    --xh-frosted-highlight: var(--xh-mention-content-highlight, var(--xh-_material-highlight));
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-mention-content-gap, var(--xh-list-option-gap));
+    grid-area: 1 / 1;
+    min-inline-size: min(var(--xh-mention-content-min-w, var(--xh-overlay-min-w)), var(--xh-_mention-available-w));
+    /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的内容就点不到了 */
+    max-inline-size: min(var(--xh-mention-content-max-w, var(--xh-overlay-max-w)), var(--xh-_mention-available-w));
+    /* 状态文字先隐藏时仍保留完整退场面，不塌回一条空边。 */
+    min-block-size: var(--xh-mention-content-min-h, var(--xh-_mention-h));
+    max-block-size: min(var(--xh-mention-content-max-h, var(--xh-overlay-max-h)), var(--xh-_mention-available-h));
+    padding-block: var(--xh-mention-content-py, var(--xh-space-1));
+    padding-inline: var(--xh-mention-content-px, 0);
+    border-radius: var(--xh-mention-content-radius, var(--xh-shape-overlay));
+    overflow-y: auto;
+    /* 浮层滚动面：滚到头不把页面一起带走 */
+    overscroll-behavior: contain;
+    pointer-events: auto;
+  }
+
+  /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致：
+     收起态连接层会给 content 打 hidden，而上面那条 display 正是要盖掉 UA 的
+     [hidden]{display:none}——退场动画得先能播。presence 读的是 content 的 animationName，
+     真正的收起由宿主在退场结束后落成内联 display:none（Vue 那边直接不渲染）。
+     其余声明了 display 的角色节点仍补 [hidden]，那几处没有退场动画。 */
+
+  /* 列表从不承载焦点（焦点恒在输入框，高亮走 aria-activedescendant），
+     可滚动容器在某些浏览器里会被自动塞进 Tab 序列，落焦时不画环 */
+  .xh-scope-mention[data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  .xh-scope-mention[data-part='content'][data-state='open'] {
+    animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
+     免得动画结束到真收起之间闪一下原样 */
+  .xh-scope-mention[data-part='content'][data-state='closed'] {
+    animation: xh-overlay-slide-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 候选行：网格、尺寸档、悬停 / 高亮 100、按下 200 与禁用面由 Collection Item 家族按 overlay 语境给，
+     公开 Mention 槽只映射到家族合同。提及即选即执行，aria-selected 只标当前高亮那一条：
+     overlay 语境的选中面透明，高亮与悬停同走 --xh-bg-subtle，正文保持常规字重 */
+  .xh-scope-mention[data-part='item'] {
+    --xh-collection-block-padding: var(--xh-mention-item-py, var(--xh-_mention-item-py));
+    --xh-collection-row-h: var(--xh-mention-item-h, var(--xh-_mention-item-h));
+    --xh-collection-inline-padding: var(--xh-mention-item-px, var(--xh-_mention-item-px));
+    --xh-collection-gap: var(--xh-mention-item-gap, var(--xh-_mention-gap));
+    --xh-collection-font-size: var(--xh-mention-item-font-size, var(--xh-_mention-font-size));
+    --xh-collection-radius: var(--xh-mention-item-radius, 0);
+    --xh-collection-fg-rest: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
+    --xh-collection-fg-hover: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
+    --xh-collection-fg-keyboard-highlight: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
+    --xh-collection-fg-selected: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
+    --xh-collection-fg-selected-highlight: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
+    --xh-collection-fg-selected-hover: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
+    --xh-collection-fg-selected-pressed: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
+    --xh-collection-fg-pressed: var(--xh-mention-item-fg, var(--xh-material-frosted-fg));
+    --xh-collection-font-weight-selected: var(--xh-font-weight-regular);
+    --xh-collection-font-weight-selected-highlight: var(--xh-font-weight-regular);
+    --xh-collection-font-weight-selected-hover: var(--xh-font-weight-regular);
+    --xh-collection-font-weight-selected-pressed: var(--xh-font-weight-regular);
+    --xh-collection-bg-hover: var(--xh-mention-item-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-keyboard-highlight: var(--xh-mention-item-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-selected-highlight: var(--xh-mention-item-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-selected-hover: var(--xh-mention-item-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-bg-pressed: var(--xh-mention-item-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-collection-bg-selected-pressed: var(--xh-mention-item-bg-pressed, var(--xh-bg-subtle-hover));
+    /* data-highlighted 同时覆盖指针与键盘路径；焦点恒在输入框，候选不接环 */
+    --xh-collection-outline-keyboard-highlight: transparent;
+    --xh-collection-outline-selected-highlight: transparent;
+
+    /* 行高留出文字的上下伸展空间，行内那层 overflow:hidden 才不会把字削掉 */
+    line-height: var(--xh-mention-item-leading, var(--xh-leading-normal));
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  /* 家族给了 display，UA 的 [hidden]{display:none} 已被盖掉，这里补回来 */
+  .xh-scope-mention[data-part='item'][hidden] {
+    display: none;
+  }
+
+  /* 只读时正文插不进东西，候选也就不该再摆出可点的样子。
+     标记读定位层那一份：候选被搬到 portal 落点，根上的只读标记够不着它们。
+     排掉禁用条目是因为这条选择器权重高过上面那条，不排就会把 not-allowed 覆盖回 default */
+  .xh-scope-mention[data-part='positioner'][data-readonly]
+    [data-part='item']:where(.xh-scope-mention):not([data-disabled]) {
+    cursor: default;
+  }
+
+  /* 正文落在家族网格的 text 列；网格项默认最小尺寸是内容尺寸，不归零则长文本把行撑破、省略号轮不上 */
+  .xh-scope-mention[data-part='item-text'] {
+    min-inline-size: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .xh-scope-mention[data-part='item-text'][hidden] {
+    display: none;
+  }
+
+
+
+  /* 空态保持为 listbox 的同级 role=status，只把文字叠到 content 的唯一表面。 */
+  .xh-scope-mention[data-part='empty'] {
+    /* 同级定位保证状态文字绘制在磨砂 content 上方，不需要额外层号。 */
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    grid-area: 1 / 1;
+    padding-block: var(--xh-mention-empty-py, var(--xh-space-3));
+    padding-inline: var(--xh-mention-empty-px, var(--xh-_mention-item-px));
+    color: var(--xh-mention-empty-fg, var(--xh-material-frosted-fg-muted));
+    font-size: var(--xh-mention-empty-font-size, var(--xh-_mention-font-size));
+    line-height: var(--xh-leading-none);
+    text-align: center;
+  }
+
+  .xh-scope-mention[data-part='empty'][hidden] {
+    display: none;
+  }
+
+  /* 在途占位与空态同格、两者不同屏；它同样不重复绘制表面。 */
+  .xh-scope-mention[data-part='loading'] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-_mention-gap);
+    grid-area: 1 / 1;
+    padding-block: var(--xh-mention-loading-py, var(--xh-space-3));
+    padding-inline: var(--xh-mention-loading-px, var(--xh-_mention-item-px));
+    color: var(--xh-mention-loading-fg, var(--xh-material-frosted-fg-muted));
+    font-size: var(--xh-mention-loading-font-size, var(--xh-_mention-font-size));
+    line-height: var(--xh-leading-none);
+    text-align: center;
+  }
+
+  .xh-scope-mention[data-part='loading'][hidden] {
+    display: none;
+  }
+
+  /* 首次加载：文案前一枚加载环，由加载环配方画（连接层投影 data-xh-loading-ring 与 data-loading），
+     直径取所在尺寸档的图标档 */
+  .xh-scope-mention[data-part='loading']::before {
+    content: '';
+    flex: none;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+  }
+
+  .xh-scope-mention[data-part='empty']:empty,
+  .xh-scope-mention[data-part='loading']:empty {
+    display: none;
+  }
+
+  /* 刷新：已有候选时后台在取，保留上一帧，候选按 micro 淡下，数据到了再淡回；在途占位此时让位。
+     淡的是候选不是面：content 是整块磨砂面，整块淡下去面就透了 */
+  .xh-scope-mention[data-part='content'][aria-busy='true'] .xh-scope-mention[data-part='item'] {
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
+  /* 手写结构可以把全部候选留在 DOM 里只加 hidden；没有可见 item 也没有状态文案时，
+     打开的空 listbox 不画无意义框。closed 不命中，content 仍能完成 Presence 退场。 */
+  .xh-scope-mention[data-part='positioner']:not(:has(
+    > .xh-scope-mention[data-part='empty']:not([hidden]):not(:empty),
+    > .xh-scope-mention[data-part='loading']:not([hidden]):not(:empty)
+  )) > .xh-scope-mention[data-part='content'][data-state='open']:not(:has(
+    > .xh-scope-mention[data-part='item']:not([hidden])
+  )) {
+    visibility: hidden;
+  }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    .xh-scope-mention[data-part='positioner'] {
+      display: none;
+    }
+  }
+}