@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/prompt-input.css

@@ -0,0 +1,260 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* PromptInput 独立皮肤同时传递引入字段视觉盒与字段内动作；full bundle 递归去重。 */
+@import '../family/field-chrome.css';
+@import '../family/action-control.css';
+/* 字形换身份时的淡入由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-prompt-input {
+    --xh-prompt-input-skin: 1;
+  }
+
+  /* root 就是视觉盒：描边、底色、圆角、聚焦面、悬停与禁用面由 Field Chrome 家族画在它身上（静息描边式：
+     字段淡底 + --xh-border-control 描边 + 无影，聚焦换承载面底 + 品牌描边、不画环；登记的例外只在 surface 圆角），内部 textarea
+     无边框；align-items: flex-end 让按钮随输入框长高贴着底边。
+     三个视觉轴都落在 root 上：形态三档由家族按 data-variant 生成，语气管用哪族颜色，尺寸管高度与字号 */
+  .xh-scope-prompt-input[data-part='root'] {
+    /* 圆角可由使用者槽切换，家族只过渡底、描边与影 */
+    transition: border-radius var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    /* 尺寸缺省档：不写 data-size 时按中档走 */
+    --xh-_prompt-input-h: var(--xh-control-h-md);
+    --xh-_prompt-input-gap: var(--xh-control-gap-md);
+    --xh-_prompt-input-px: var(--xh-control-px-sm);
+    --xh-_prompt-input-font-size: var(--xh-control-font-md);
+    --xh-_prompt-input-submit-px: var(--xh-control-px-md);
+    /* 皮肤画的兜底字形与作者塞进来的图标读同一把尺，随尺寸档一起换 */
+    --xh-icon-size: var(--xh-prompt-input-icon-size, var(--xh-glyph-size-md));
+
+    /* 家族桥接槽：既有使用者槽保留为第一参数，缺省落家族按 data-variant 生成的三档 */
+    /* 多行随内容长高，盒不定高 */
+    --xh-field-control-height: auto;
+    /* 家族的行内内衬与下面 padding 简写同值 */
+    --xh-field-control-padding-inline: var(--xh-prompt-input-p, var(--xh-_prompt-input-px));
+    --xh-field-control-gap: var(--xh-prompt-input-gap, var(--xh-_prompt-input-gap));
+    --xh-field-control-radius: var(--xh-prompt-input-radius, var(--xh-shape-surface));
+    --xh-field-bg-rest: var(--xh-prompt-input-bg, var(--xh-_field-variant-bg-rest));
+    --xh-field-bg-hover: var(--xh-prompt-input-bg-hover, var(--xh-_field-variant-bg-hover));
+    --xh-field-bg-disabled: var(--xh-prompt-input-bg-disabled, var(--xh-_field-variant-bg-disabled));
+    --xh-field-border-rest: var(--xh-prompt-input-border, var(--xh-_field-variant-border-rest));
+    --xh-field-border-hover: var(--xh-prompt-input-border-hover, var(--xh-_field-variant-border-hover));
+    --xh-field-border-focus: var(--xh-prompt-input-border-focus, var(--xh-_field-variant-border-focus));
+    --xh-field-shadow-rest: var(--xh-prompt-input-shadow, none);
+    /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
+    --xh-field-glyph-size: var(--xh-prompt-input-icon-size, var(--xh-_field-size-glyph-size));
+    /* 生成中（data-loading）这块框仍可打字：不压前景、不换等待光标，只有按钮换成停止身份 */
+    --xh-field-fg-loading: var(--xh-fg-default);
+    --xh-field-cursor-loading: text;
+
+    /* 整框内衬的当前值，随尺寸档与 --xh-prompt-input-p 一起变。
+       附件条与动作行由作者写在 root 里、不是本组件的部件，它们靠读这一支对齐同一条内衬线 */
+    --xh-prompt-input-computed-px: var(--xh-prompt-input-p, var(--xh-_prompt-input-px));
+
+    display: flex;
+    align-items: flex-end;
+    /* 整框的内衬走控件内边距尺的小档，密度收紧时随之收窄 */
+    padding: var(--xh-prompt-input-p, var(--xh-_prompt-input-px));
+  }
+
+  /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
+  .xh-scope-prompt-input[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 写了输入行，root 就翻成竖排：输入框与按钮收进那一行，上下两侧腾给附件条与动作行。
+     不写就是单行，输入框与按钮并排——两种写法的皮肤是同一份 */
+  .xh-scope-prompt-input[data-part='root']:has(> .xh-scope-prompt-input[data-part='control']) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  /* —— 尺寸 —— */
+  .xh-scope-prompt-input[data-part='root'][data-size='sm'] {
+    --xh-_prompt-input-h: var(--xh-control-h-sm);
+    --xh-_prompt-input-gap: var(--xh-control-gap-sm);
+    --xh-_prompt-input-px: var(--xh-control-px-sm);
+    --xh-_prompt-input-font-size: var(--xh-control-font-sm);
+    --xh-_prompt-input-submit-px: var(--xh-control-px-sm);
+    --xh-icon-size: var(--xh-prompt-input-icon-size, var(--xh-glyph-size-sm));
+  }
+
+  .xh-scope-prompt-input[data-part='root'][data-size='md'] {
+    --xh-_prompt-input-h: var(--xh-control-h-md);
+    --xh-_prompt-input-gap: var(--xh-control-gap-md);
+    --xh-_prompt-input-px: var(--xh-control-px-md);
+    --xh-_prompt-input-font-size: var(--xh-control-font-md);
+    --xh-_prompt-input-submit-px: var(--xh-control-px-md);
+    --xh-icon-size: var(--xh-prompt-input-icon-size, var(--xh-glyph-size-md));
+  }
+
+  .xh-scope-prompt-input[data-part='root'][data-size='lg'] {
+    --xh-_prompt-input-h: var(--xh-control-h-lg);
+    --xh-_prompt-input-gap: var(--xh-control-gap-lg);
+    --xh-_prompt-input-px: var(--xh-control-px-lg);
+    --xh-_prompt-input-font-size: var(--xh-control-font-lg);
+    --xh-_prompt-input-submit-px: var(--xh-control-px-lg);
+    --xh-icon-size: var(--xh-prompt-input-icon-size, var(--xh-glyph-size-lg));
+  }
+
+  /* 输入行承接单行写法下落在 root 上的那份几何：输入框与按钮并排、按钮贴着底边。
+     它自己不画底也不画描边，边界仍由 root 表达 */
+  .xh-scope-prompt-input[data-part='control'] {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--xh-prompt-input-row-gap, var(--xh-_prompt-input-gap));
+  }
+
+  .xh-scope-prompt-input[data-part='control'][hidden] {
+    display: none;
+  }
+
+  /* 输入段透明、底由外框承担：重置、字色、占位符与自动填充由 Field Chrome 家族的 [data-xh-field-input] 给，
+     组件只映射既有使用者槽。刻意不投影 data-xh-field-layout：家族 textarea 布局的 :has() 变体会压掉
+     root 自己的 padding 与 align-items。 */
+  .xh-scope-prompt-input[data-part='input'] {
+    --xh-field-input-fg: var(--xh-prompt-input-input-fg, var(--xh-fg-default));
+    --xh-field-input-font-size: var(--xh-prompt-input-input-font-size, var(--xh-_prompt-input-font-size));
+    --xh-field-placeholder-fg: var(--xh-prompt-input-placeholder-fg, var(--xh-fg-subtle));
+    /* 框的底画在 root 上，input 本身是透明分段，自动填充铺的是外框缺省那一档的实体底 */
+    --xh-field-autofill-bg: var(--xh-prompt-input-input-autofill-bg, var(--xh-bg-canvas));
+    --xh-field-autofill-fg: var(--xh-prompt-input-input-autofill-fg, var(--xh-fg-default));
+
+    /* 多行随内容长高，不撑满外框 */
+    block-size: auto;
+    /* 上下留白把单行文本盒撑到控件高度，文字中线与按钮中线对齐。
+       级联兜底：先写一行的高度算式（输入框字号 × 行距），再写 1lh。
+       1lh 晚于本库声明的浏览器地板，取不到时旧引擎丢掉后一条、留下前一条。
+       两条取的是同一组槽——字号来自家族映射的 --xh-field-input-font-size、行距来自家族的
+       line-height，所以算出来是同一个数。 */
+    padding-block: calc((var(--xh-_prompt-input-h) - var(--xh-prompt-input-input-font-size, var(--xh-_prompt-input-font-size)) * var(--xh-leading-normal)) / 2);
+    padding-block: calc((var(--xh-_prompt-input-h) - 1lh) / 2);
+    border-radius: var(--xh-prompt-input-input-radius, var(--xh-shape-inset));
+    /* 高度由 field-sizing 随内容变，不支持的引擎退化为 rows 定下的固定行数；
+       配套禁用 resize，避免拖拽写死的高度盖掉它。封顶行数由使用者覆盖槽给。 */
+    max-block-size: var(--xh-prompt-input-max-h, calc(var(--xh-leading-normal) * 1em * 8));
+    field-sizing: content;
+    resize: none;
+  }
+
+  /* textarea 是单体表单控件，禁用走原生 disabled */
+  .xh-scope-prompt-input[data-part='input']:disabled {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 发送钮是组件的主要动作，与 Button 缺省同为品牌实心：盒几何、悬停 / 按下与 0.97 按压、焦点环、禁用面
+     全由 Action Control 的 text solid 档给（连接层按 loading 切成 subtle 的停止身份），组件只映射既有使用者槽。
+     取 text 档而不是 icon 档：icon 档把行内尺寸钉成正方，作者放文案（「发送」）会被挤；发送钮的几何本来就是
+     「至少一个控件高的方钮 + 行内内衬」，与 text 档一致 */
+  .xh-scope-prompt-input[data-part='submit-trigger'] {
+    --xh-action-visual-size: var(--xh-_prompt-input-h);
+    --xh-action-min-inline-size: var(--xh-_prompt-input-h);
+    --xh-action-padding-inline: var(--xh-prompt-input-submit-px, var(--xh-_prompt-input-submit-px));
+    --xh-action-radius: var(--xh-prompt-input-submit-radius, var(--xh-shape-control));
+    --xh-action-bg-rest: var(--xh-prompt-input-send-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-prompt-input-send-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-prompt-input-send-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-prompt-input-send-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-prompt-input-send-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-prompt-input-send-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: transparent;
+    --xh-action-highlight-rest: transparent;
+    /* 发送身份是实心底，顶边画一条极浅的内高光把这块面衬出厚度；三态同一支，禁用面由家族收掉 */
+    --xh-action-shadow-rest: var(--xh-prompt-input-submit-shadow, var(--xh-_highlight-tone));
+    --xh-action-shadow-hover: var(--xh-prompt-input-submit-shadow, var(--xh-_highlight-tone));
+    --xh-action-shadow-pressed: var(--xh-prompt-input-submit-shadow, var(--xh-_highlight-tone));
+    /* 输入为空时按钮转灰但不收起 */
+    --xh-action-bg-disabled: var(--xh-prompt-input-send-bg-off, var(--xh-bg-muted));
+    --xh-action-font-size: var(--xh-prompt-input-submit-font-size, var(--xh-text-label-size));
+    /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+       那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的 */
+    --xh-action-ring-color-focus-visible: currentColor;
+
+    /* 按钮不参与弹性伸缩 */
+    flex: none;
+    border-width: 0;
+    font-weight: var(--xh-prompt-input-submit-font-weight, var(--xh-text-label-weight));
+  }
+
+  /* 家族那条 display 会把 UA 的 [hidden]{display:none} 盖掉 */
+  .xh-scope-prompt-input[data-part='submit-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 停止身份只换配色，从主色降到中性淡底（连接层同时把家族档切成 subtle）；文案与可访问名由连接层切换。
+     淡底面上没有厚度可言，内高光收掉；环色回到公共焦点色 */
+  .xh-scope-prompt-input[data-part='submit-trigger'][data-mode='stop'] {
+    --xh-action-bg-rest: var(--xh-prompt-input-stop-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-prompt-input-stop-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-prompt-input-stop-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-prompt-input-stop-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-prompt-input-stop-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-prompt-input-stop-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-shadow-rest: none;
+    --xh-action-shadow-hover: none;
+    --xh-action-shadow-pressed: none;
+    --xh-action-ring-color-focus-visible: var(--xh-ring-focus);
+  }
+
+  /* 按钮没写内容就由皮肤画兜底字形，两种身份各画一枚；
+     作者往部件里塞了自己的图形或文案，这两条即不命中 */
+  .xh-scope-prompt-input[data-part='submit-trigger'][data-mode='send']: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-arrow-up) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-arrow-up) center / contain no-repeat;
+  }
+
+  /* 停止身份画一枚实心圆角方块：它不是「反过来的发送」，用一个不指向任何方向的形状 */
+  .xh-scope-prompt-input[data-part='submit-trigger'][data-mode='stop']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-prompt-input-stop-mark-size, calc(var(--xh-icon-size, var(--xh-glyph-size-text)) * 0.6));
+    block-size: var(--xh-prompt-input-stop-mark-size, calc(var(--xh-icon-size, var(--xh-glyph-size-text)) * 0.6));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    border-radius: var(--xh-prompt-input-stop-mark-radius, var(--xh-shape-inset));
+    background-color: currentColor;
+  }
+
+  /* 身份切换时换上来的那一枚字形淡入，与按钮换面同一拍：停止的方块从略小处浮出，发送的箭头只淡入。
+     两种身份各取一支关键帧，切换时动画名跟着换才会重播。首帧就在的字形直接呈现（data-instant）；
+     减弱动效下缩放归一、只剩淡入。粗指针下 ::after 是家族的命中区，字形只有 ::before 这一层，
+     旧字形与新字形不在两层上叠着淡 */
+  .xh-scope-prompt-input[data-part='submit-trigger'][data-mode='send']:not([data-instant]):empty::before {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-prompt-input[data-part='submit-trigger'][data-mode='stop']:not([data-instant]):empty::before {
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-prompt-input[data-part='submit-trigger'][data-mode='send']:empty::before,
+    .xh-scope-prompt-input[data-part='submit-trigger'][data-mode='stop']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-prompt-input[data-part='submit-trigger'][data-mode='send']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before,
+    .xh-scope-prompt-input[data-part='submit-trigger'][data-mode='stop']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-prompt-input[data-part='submit-trigger'][data-mode='send'][data-disabled]:empty::before,
+    .xh-scope-prompt-input[data-part='submit-trigger'][data-mode='stop'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
+}