@greypan/web-ui 6.3.0 → 6.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/glass.js +1 -1
- package/dist/assets/glass.js.map +1 -1
- package/dist/assets/overlay-motion.js.map +1 -1
- package/dist/components/autocomplete/style.js.map +1 -1
- package/dist/components/dialog/style.js.map +1 -1
- package/dist/components/input/style.js.map +1 -1
- package/dist/components/segmented/style.js.map +1 -1
- package/dist/components/svg-draw-lines/style.js +1 -1
- package/dist/components/svg-draw-lines/style.js.map +1 -1
- package/dist/components/textarea/style.js.map +1 -1
- package/dist/components/toast/style.js.map +1 -1
- package/package.json +1 -1
package/dist/assets/glass.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/assets/glass.css?inline
|
|
2
|
-
var e = ".wui-glass{--wui-internal-glass-shadow:var(--wui-shadow-glass,0 0 1px #0000000d, 0 0 8px #00000008, 0 2px 16px #00000006, 0 8px 32px #00000004);background-color:var(--wui-color-surface-glass,#fafafa57);-webkit-backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06));box-shadow:inset 0 0 0 .5px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 38%, transparent), inset 0 1px .5px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 52%, transparent), inset 0 -.5px 1px #00000008, var(--wui-internal-glass-shadow,var(--wui-shadow-glass,0 0 1px #0000000d, 0 0 8px #00000008, 0 2px 16px #00000006, 0 8px 32px #00000004));background-clip:padding-box;border:none;position:relative}.wui-glass:before{pointer-events:none;content:\"\";border-radius:inherit;background-color:var(--wui-color-glass-border,transparent);background-image:radial-gradient(var(--wui-glass-corner-radius,32px) at 100% 0, var(--wui-color-glass-shade,#0000000f), transparent), radial-gradient(var(--wui-glass-corner-radius,32px) at 0 100%, var(--wui-color-glass-shade,#0000000f), transparent), radial-gradient(calc(var(--wui-glass-corner-radius,32px) * 2) at 0 0, var(--wui-color-glass-corner,#ffffff14), transparent), radial-gradient(calc(var(--wui-glass-corner-radius,32px) * 2) at 100% 100%, var(--wui-color-glass-corner,#ffffff14), transparent);-webkit-mask-composite:xor;-webkit-mask-
|
|
2
|
+
var e = ".wui-glass{--wui-internal-glass-shadow:var(--wui-shadow-glass,0 0 1px #0000000d, 0 0 8px #00000008, 0 2px 16px #00000006, 0 8px 32px #00000004);background-color:var(--wui-color-surface-glass,#fafafa57);-webkit-backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06));box-shadow:inset 0 0 0 .5px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 38%, transparent), inset 0 1px .5px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 52%, transparent), inset 0 -.5px 1px #00000008, var(--wui-internal-glass-shadow,var(--wui-shadow-glass,0 0 1px #0000000d, 0 0 8px #00000008, 0 2px 16px #00000006, 0 8px 32px #00000004));background-clip:padding-box;border:none;position:relative}.wui-glass:before{pointer-events:none;content:\"\";border-radius:inherit;background-color:var(--wui-color-glass-border,transparent);background-image:radial-gradient(var(--wui-glass-corner-radius,32px) at 100% 0, var(--wui-color-glass-shade,#0000000f), transparent), radial-gradient(var(--wui-glass-corner-radius,32px) at 0 100%, var(--wui-color-glass-shade,#0000000f), transparent), radial-gradient(calc(var(--wui-glass-corner-radius,32px) * 2) at 0 0, var(--wui-color-glass-corner,#ffffff14), transparent), radial-gradient(calc(var(--wui-glass-corner-radius,32px) * 2) at 100% 100%, var(--wui-color-glass-corner,#ffffff14), transparent);-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
package/dist/assets/glass.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"glass.js","names":[],"sources":["../../src/assets/glass.css?inline"],"sourcesContent":["/*\n * 玻璃公共样式\n */\n\n.wui-glass {\n /*\n * 内部阴影变量在 glass 元素上自声明默认值，切断从祖先 glass 容器（drawer/dialog\n * body 等声明了 overlay 阴影的元素）沿 flattened tree 继承进 slotted 内容的\n * 通道；各组件在自身元素上的同变量配置（特异性/源顺序恒胜出）不受影响。\n */\n --wui-internal-glass-shadow: var(\n --wui-shadow-glass,\n 0 0 1px rgb(0 0 0 / 0.05),\n 0 0 8px rgb(0 0 0 / 0.03),\n 0 2px 16px rgb(0 0 0 / 0.025),\n 0 8px 32px rgb(0 0 0 / 0.015)\n );\n\n position: relative;\n\n border: none;\n\n background-color: var(--wui-color-surface-glass, rgb(250 250 250 / 0.34));\n background-clip: padding-box;\n\n /* Safari 16.4 只支持带 -webkit- 前缀的 backdrop-filter（无前缀 18
|
|
1
|
+
{"version":3,"file":"glass.js","names":[],"sources":["../../src/assets/glass.css?inline"],"sourcesContent":["/*\n * 玻璃公共样式\n */\n\n.wui-glass {\n /*\n * 内部阴影变量在 glass 元素上自声明默认值，切断从祖先 glass 容器（drawer/dialog\n * body 等声明了 overlay 阴影的元素）沿 flattened tree 继承进 slotted 内容的\n * 通道；各组件在自身元素上的同变量配置（特异性/源顺序恒胜出）不受影响。\n */\n --wui-internal-glass-shadow: var(\n --wui-shadow-glass,\n 0 0 1px rgb(0 0 0 / 0.05),\n 0 0 8px rgb(0 0 0 / 0.03),\n 0 2px 16px rgb(0 0 0 / 0.025),\n 0 8px 32px rgb(0 0 0 / 0.015)\n );\n\n position: relative;\n\n border: none;\n\n background-color: var(--wui-color-surface-glass, rgb(250 250 250 / 0.34));\n background-clip: padding-box;\n\n /* Safari 16.4 只支持带 -webkit- 前缀的 backdrop-filter（无前缀 18 才支持）；\n 前缀由 lightningcss 按 ?inline 管线默认 targets（含 ios16.4）自动生成，无需手写。 */\n backdrop-filter: blur(4px) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n box-shadow:\n inset 0 0 0 0.5px color-mix(in srgb, var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)) 38%, transparent),\n inset 0 1px 0.5px color-mix(in srgb, var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)) 52%, transparent),\n inset 0 -0.5px 1px rgb(0 0 0 / 0.03),\n var(\n --wui-internal-glass-shadow,\n var(\n --wui-shadow-glass,\n 0 0 1px rgb(0 0 0 / 0.05),\n 0 0 8px rgb(0 0 0 / 0.03),\n 0 2px 16px rgb(0 0 0 / 0.025),\n 0 8px 32px rgb(0 0 0 / 0.015)\n )\n );\n}\n\n/*\n * 玻璃描边：底环 + 对角受光/背光。background-color 用 border 色铺满整圈（含圆角\n * 弧段，修复胶囊弧段无着色发暗的问题）；叠两枚 corner→transparent radial 作左上/\n * 右下受光光泽，再叠两枚 shade→transparent radial（置于最上层）压暗右上/左下背光\n * 角，形成对角光影的玻璃立体感。四枚渐变均为锚定角点、半径 --wui-glass-corner-radius\n * 的固定物理尺寸正圆——视觉覆盖范围不随元素宽高缩放（百分比方案在大面板上暗边\n * 过长、小控件上过弱），各组件用与自身 border-radius 同源的值覆盖该变量即可联动。\n * 颜色由 theme 按明暗主题提供 --wui-color-glass-corner / --wui-color-glass-shade /\n * --wui-color-glass-border；-webkit-mask-* 旧语法（含 mask-composite:xor）由\n * lightningcss 按 targets 自动生成，无前缀 mask-composite 留给 Chrome 120+。\n */\n.wui-glass::before {\n pointer-events: none;\n content: '';\n\n position: absolute;\n inset: 0;\n\n padding: 1px;\n border-radius: inherit;\n\n background-color: var(--wui-color-glass-border, transparent);\n background-image:\n radial-gradient(\n var(--wui-glass-corner-radius, 32px) at 100% 0,\n var(--wui-color-glass-shade, rgb(0 0 0 / 0.06)),\n transparent\n ),\n radial-gradient(\n var(--wui-glass-corner-radius, 32px) at 0 100%,\n var(--wui-color-glass-shade, rgb(0 0 0 / 0.06)),\n transparent\n ),\n radial-gradient(\n calc(var(--wui-glass-corner-radius, 32px) * 2) at 0 0,\n var(--wui-color-glass-corner, rgb(255 255 255 / 0.08)),\n transparent\n ),\n radial-gradient(\n calc(var(--wui-glass-corner-radius, 32px) * 2) at 100% 100%,\n var(--wui-color-glass-corner, rgb(255 255 255 / 0.08)),\n transparent\n );\n\n mask:\n linear-gradient(#000 0 0) content-box,\n linear-gradient(#000 0 0);\n mask-composite: exclude;\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay-motion.js","names":[],"sources":["../../src/assets/overlay-motion.css?inline"],"sourcesContent":["/*\n * 浮层面板共享动效（单层玻璃）。\n *\n * backdrop-filter 的 blur(0px) ↔ blur(4px) 在 Chrome/Safari 均平滑插值（Manager\n * 双引擎实测，Safari 逐帧采样 blur 值连续），当年「生硬跳变」的根因是 none↔blur\n * 不可插值，而不是 backdrop-filter 不可动画。因此面板自身直接承担玻璃：背景、\n * 阴影与 backdrop-filter 都在面板元素上（wui-glass 类也回面板），打开/关闭时\n * opacity 与 backdrop-filter 同步过渡，无需双层结构——双层带来的全部层间问题\n * （变白、关闭残影、双重模糊、阴影作用域承接）一并消失。\n */\n\n.wui-floating-panel {\n transform-origin: var(--wui-internal-overlay-transform-origin, center);\n transform: scale(1);\n\n opacity: 1;\n\n /* 玻璃由面板自身承担（wui-glass 提供背景/描边/阴影）。打开目标态 blur(4px)，\n entering/closing 切到 blur(0px) 作为插值起点——blur(0px) 与 blur(4px) 平滑过渡\n （none↔blur 不可插值才是当年生硬跳变的根因）。 */\n
|
|
1
|
+
{"version":3,"file":"overlay-motion.js","names":[],"sources":["../../src/assets/overlay-motion.css?inline"],"sourcesContent":["/*\n * 浮层面板共享动效（单层玻璃）。\n *\n * backdrop-filter 的 blur(0px) ↔ blur(4px) 在 Chrome/Safari 均平滑插值（Manager\n * 双引擎实测，Safari 逐帧采样 blur 值连续），当年「生硬跳变」的根因是 none↔blur\n * 不可插值，而不是 backdrop-filter 不可动画。因此面板自身直接承担玻璃：背景、\n * 阴影与 backdrop-filter 都在面板元素上（wui-glass 类也回面板），打开/关闭时\n * opacity 与 backdrop-filter 同步过渡，无需双层结构——双层带来的全部层间问题\n * （变白、关闭残影、双重模糊、阴影作用域承接）一并消失。\n */\n\n.wui-floating-panel {\n transform-origin: var(--wui-internal-overlay-transform-origin, center);\n transform: scale(1);\n\n opacity: 1;\n\n /* 玻璃由面板自身承担（wui-glass 提供背景/描边/阴影）。打开目标态 blur(4px)，\n entering/closing 切到 blur(0px) 作为插值起点——blur(0px) 与 blur(4px) 平滑过渡\n （none↔blur 不可插值才是当年生硬跳变的根因）。 */\n backdrop-filter: blur(4px) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n\n /* transition 列表需手写 -webkit-backdrop-filter：lightningcss 不会在 transition\n value 内追加 -webkit 项，iOS 16.4 上 blur 过渡依赖它（属性前缀会自动生成）。 */\n transition:\n opacity var(--wui-internal-duration-float-enter, var(--wui-duration-float-enter, 160ms))\n var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n -webkit-backdrop-filter var(--wui-internal-duration-float-enter, var(--wui-duration-float-enter, 160ms))\n var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n backdrop-filter var(--wui-internal-duration-float-enter, var(--wui-duration-float-enter, 160ms))\n var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n transform var(--wui-internal-duration-float-enter, var(--wui-duration-float-enter, 160ms))\n var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.wui-floating-panel[data-wui-presence='entering'],\n.wui-floating-panel[data-wui-presence='closing'] {\n transform: scale(var(--wui-scale-enter, 0.97));\n opacity: 0;\n backdrop-filter: blur(0) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n}\n\n.wui-floating-panel[data-wui-presence='closing'] {\n pointer-events: none;\n transition-duration: var(--wui-internal-duration-float-exit, var(--wui-duration-float-exit, 120ms));\n}\n\n@media (prefers-reduced-motion: reduce) {\n .wui-floating-panel,\n .wui-floating-panel[data-wui-presence='entering'],\n .wui-floating-panel[data-wui-presence='closing'] {\n transform: none;\n transition-duration: 120ms;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/autocomplete/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n --wui-autocomplete-max-width: 500px;\n display: inline-block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.wui-autocomplete-inner {\n /* 与 select 的 .wui-select-inner 对齐：为本地绝对定位面板提供包含块，\n 避免面板 offsetParent（BODY）与实际包含块（远端定位祖先，如 layout header）不一致导致定位偏移。 */\n position: relative;\n}\n\n.input-wrapper {\n --wui-glass-corner-radius: calc(var(--wui-control-size, 36px) / 2);\n\n display: flex;\n gap: 8px;\n align-items: center;\n\n box-sizing: border-box;\n width: var(--wui-input-width, 200px);\n min-width: var(--wui-control-size, 36px);\n height: var(--wui-control-size, 36px);\n padding: 0 12px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n}\n\n/* ===== Borderless ===== */\n\n:host([borderless]) .input-wrapper {\n border: none;\n
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/autocomplete/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n --wui-autocomplete-max-width: 500px;\n display: inline-block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.wui-autocomplete-inner {\n /* 与 select 的 .wui-select-inner 对齐：为本地绝对定位面板提供包含块，\n 避免面板 offsetParent（BODY）与实际包含块（远端定位祖先，如 layout header）不一致导致定位偏移。 */\n position: relative;\n}\n\n.input-wrapper {\n --wui-glass-corner-radius: calc(var(--wui-control-size, 36px) / 2);\n\n display: flex;\n gap: 8px;\n align-items: center;\n\n box-sizing: border-box;\n width: var(--wui-input-width, 200px);\n min-width: var(--wui-control-size, 36px);\n height: var(--wui-control-size, 36px);\n padding: 0 12px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n}\n\n/* ===== Borderless ===== */\n\n:host([borderless]) .input-wrapper {\n border: none;\n background: transparent;\n backdrop-filter: none;\n box-shadow: none;\n}\n\n/* borderless 只移除输入容器的 glass 描边环（.wui-glass::before），\n 下拉浮层 .autocomplete-overlay 的 glass 描边不受影响 */\n:host([borderless]) .input-wrapper::before {\n content: none;\n}\n\n.autocomplete-input {\n flex: 1;\n\n min-width: 0;\n height: 100%;\n margin: 0;\n padding: 0;\n border: none;\n\n /* 表单控件不继承字体；显式继承以对齐宿主排版，避免 UA 默认字体差异 */\n font: inherit;\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text, #1b1b1b);\n\n background: transparent;\n outline: none;\n\n &::placeholder {\n color: var(--wui-color-text-secondary, #6a6a6a);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n}\n\n/* Coarse pointers include iOS Safari, where a sub-16px font triggers focus zoom. */\n@media (pointer: coarse) {\n .autocomplete-input {\n font-size: max(16px, var(--wui-font-size, 14px));\n }\n}\n\n/* Focus ring 独立成 ::after 层：base/focused 都是显式 box-shadow，保证所有变体都能过渡 */\n.input-wrapper::after {\n pointer-events: none;\n content: '';\n\n position: absolute;\n inset: 0;\n\n border-radius: inherit;\n\n box-shadow:\n inset 0 0 0 1px transparent,\n 0 0 0 var(--wui-focus-ring-width, 3px) transparent;\n\n transition: box-shadow var(--wui-duration-focus, 200ms);\n}\n\n:host([focused]) .input-wrapper::after {\n box-shadow:\n inset 0 0 0 1px var(--wui-color-accent, #08f),\n 0 0 0 var(--wui-focus-ring-width, 3px) var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n}\n\n/* ===== 浮层（glass 样式参考 select） ===== */\n\n.autocomplete-overlay {\n /* autocomplete 不表示选中状态；隐藏共享 option 的勾选图标及其布局占位 */\n --wui-option-check-display: none;\n --wui-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n --wui-glass-corner-radius: var(--wui-radius-menu, 18px);\n --wui-internal-duration-float-enter: var(--wui-duration-float-enter, 160ms);\n --wui-internal-duration-float-exit: var(--wui-duration-float-exit, 120ms);\n position: absolute;\n z-index: var(--wui-layer-inline-overlay, 1);\n\n overflow: hidden;\n\n box-sizing: border-box;\n min-width: var(--wui-overlay-min-width, 200px);\n max-width: var(--wui-autocomplete-max-width, 500px);\n border-radius: var(--wui-radius-menu, 18px);\n\n /* 玻璃背景：wui-glass 在面板自身，这里覆盖其默认玻璃底为菜单表面色 */\n background-color: var(--wui-color-surface-menu, rgb(246 246 246 / 0.82));\n\n &.portal {\n position: fixed;\n z-index: var(--wui-layer-menu, 100);\n }\n\n &.hidden {\n display: none;\n }\n}\n\n.autocomplete-scroll {\n overflow-y: auto;\n max-height: var(--wui-autocomplete-max-height, 200px);\n}\n\n.autocomplete-content {\n padding: 4px;\n}\n\n.autocomplete-empty {\n padding: 8px 12px;\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text-secondary, #6a6a6a);\n text-align: center;\n}\n\n/* 非匹配候选隐藏：本地模式经 slot 投影，portal 模式为面板直接子元素 */\n::slotted(web-ui-option[data-filtered]) {\n display: none;\n}\n\n.autocomplete-content web-ui-option[data-filtered] {\n display: none;\n}\n\n:host([portal]) .autocomplete-overlay {\n display: none;\n}\n\n/* Shadow DOM idref 不能跨越 Portal 或 light DOM；保留同根可访问的语义镜像。 */\n.autocomplete-a11y-only,\n.autocomplete-a11y-listbox {\n position: absolute;\n\n overflow: hidden;\n\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n\n white-space: nowrap;\n\n clip-path: inset(50%);\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dialog/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: contents;\n}\n\ndialog {\n /* 必须显式 position: fixed：UA 的 dialog:modal 默认就是 fixed，但作者样式若出现\n position: relative（本轮单层重构曾引入）会把它覆盖回文档流——top layer 里的\n modal dialog 变成按文档流定位：渲染在页面顶部（用户看到的“残影”）且跟随页面\n 滚动（“没有固定居中”）。显式写死 fixed 防御未来任何作者类再覆盖。 */\n position: fixed;\n\n /* 本元素不参与 opacity 过渡：opacity < 1 会让 dialog 成为 backdrop root，后代\n backdrop-filter 在该过渡期间被整体禁用。玻璃卡片（.wui-dialog-body）自身\n opacity + backdrop-filter 插值过渡（own opacity 不禁用自身 blur，见下）。 */\n transform: scale(var(--wui-scale-enter, 0.97));\n\n overflow: visible;\n\n box-sizing: border-box;\n width: min(90vw, var(--wui-dialog-width, 360px));\n max-height: 90vh;\n max-height: min(90vh, 90dvh);\n padding: 0;\n border: none;\n\n font-family: inherit;\n color: var(--wui-color-text, #1b1b1b);\n\n background: transparent;\n\n transition: transform var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n\n &::backdrop {\n opacity: 0;\n background: var(--wui-dialog-overlay-bg, var(--wui-color-backdrop, rgb(0 0 0 / 0.12)));\n transition: opacity var(--wui-duration-dialog-enter, 320ms) ease;\n }\n}\n\n/* 面板本身是模态表面，不作为可聚焦控件；Safari showModal() 会把焦点放到 dialog，不应画 UA ring。内部控件保留 focus ring。 */\ndialog:focus,\ndialog:focus-visible {\n outline: none;\n}\n\ndialog[open].is-visible {\n transform: scale(1);\n}\n\ndialog[open].is-closing {\n pointer-events: none;\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\ndialog.is-closing::backdrop {\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\ndialog[open].is-visible::backdrop {\n opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n dialog,\n dialog[open].is-visible {\n transform: none;\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n}\n\n/* ===== 玻璃卡片主体（样式由 glass.css 提供） ===== */\n\n/* 单层玻璃：卡片自身承担背景/阴影/backdrop-filter。blur(0px) ↔ blur(4px) 平滑插值\n （none↔blur 不可插值才是当年生硬跳变的根因），own opacity 过渡不禁用自身 blur，\n 因此卡片直接 opacity + backdrop-filter 同步过渡即可，无需双层。 */\n.wui-dialog-body {\n --wui-internal-glass-shadow: var(--wui-shadow-overlay, 2px 16px 40px rgb(0 0 0 / 0.4));\n --wui-glass-corner-radius: var(--wui-radius-overlay, 28px);\n padding: var(--wui-dialog-padding, 20px 24px 24px);\n border-radius: var(--wui-radius-overlay, 28px);\n\n opacity: 0;\n background-color: var(--wui-dialog-bg, var(--wui-color-surface-overlay, rgb(246 246 246 / 0.82)));\n
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dialog/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: contents;\n}\n\ndialog {\n /* 必须显式 position: fixed：UA 的 dialog:modal 默认就是 fixed，但作者样式若出现\n position: relative（本轮单层重构曾引入）会把它覆盖回文档流——top layer 里的\n modal dialog 变成按文档流定位：渲染在页面顶部（用户看到的“残影”）且跟随页面\n 滚动（“没有固定居中”）。显式写死 fixed 防御未来任何作者类再覆盖。 */\n position: fixed;\n\n /* 本元素不参与 opacity 过渡：opacity < 1 会让 dialog 成为 backdrop root，后代\n backdrop-filter 在该过渡期间被整体禁用。玻璃卡片（.wui-dialog-body）自身\n opacity + backdrop-filter 插值过渡（own opacity 不禁用自身 blur，见下）。 */\n transform: scale(var(--wui-scale-enter, 0.97));\n\n overflow: visible;\n\n box-sizing: border-box;\n width: min(90vw, var(--wui-dialog-width, 360px));\n max-height: 90vh;\n max-height: min(90vh, 90dvh);\n padding: 0;\n border: none;\n\n font-family: inherit;\n color: var(--wui-color-text, #1b1b1b);\n\n background: transparent;\n\n transition: transform var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n\n &::backdrop {\n opacity: 0;\n background: var(--wui-dialog-overlay-bg, var(--wui-color-backdrop, rgb(0 0 0 / 0.12)));\n transition: opacity var(--wui-duration-dialog-enter, 320ms) ease;\n }\n}\n\n/* 面板本身是模态表面，不作为可聚焦控件；Safari showModal() 会把焦点放到 dialog，不应画 UA ring。内部控件保留 focus ring。 */\ndialog:focus,\ndialog:focus-visible {\n outline: none;\n}\n\ndialog[open].is-visible {\n transform: scale(1);\n}\n\ndialog[open].is-closing {\n pointer-events: none;\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\ndialog.is-closing::backdrop {\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\ndialog[open].is-visible::backdrop {\n opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n dialog,\n dialog[open].is-visible {\n transform: none;\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n}\n\n/* ===== 玻璃卡片主体（样式由 glass.css 提供） ===== */\n\n/* 单层玻璃：卡片自身承担背景/阴影/backdrop-filter。blur(0px) ↔ blur(4px) 平滑插值\n （none↔blur 不可插值才是当年生硬跳变的根因），own opacity 过渡不禁用自身 blur，\n 因此卡片直接 opacity + backdrop-filter 同步过渡即可，无需双层。 */\n.wui-dialog-body {\n --wui-internal-glass-shadow: var(--wui-shadow-overlay, 2px 16px 40px rgb(0 0 0 / 0.4));\n --wui-glass-corner-radius: var(--wui-radius-overlay, 28px);\n padding: var(--wui-dialog-padding, 20px 24px 24px);\n border-radius: var(--wui-radius-overlay, 28px);\n\n opacity: 0;\n background-color: var(--wui-dialog-bg, var(--wui-color-surface-overlay, rgb(246 246 246 / 0.82)));\n backdrop-filter: blur(0) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n\n /* transition 列表需手写 -webkit-backdrop-filter：lightningcss 不会在 transition\n 的 value 内追加 -webkit 项，而 iOS 16.4 上 blur 过渡依赖它（属性前缀会自动生成）。 */\n transition:\n opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1)),\n -webkit-backdrop-filter var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1)),\n backdrop-filter var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n}\n\ndialog.is-closing .wui-dialog-body {\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\ndialog[open].is-visible .wui-dialog-body {\n opacity: 1;\n backdrop-filter: blur(4px) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n}\n\n@media (prefers-reduced-motion: reduce) {\n dialog.is-closing .wui-dialog-body,\n dialog[open].is-visible .wui-dialog-body {\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n}\n\n/* ===== 标题 ===== */\n\n.title {\n margin: 0 0 var(--wui-dialog-title-gap, 16px);\n padding: 0;\n\n font-size: 18px;\n font-weight: 600;\n line-height: 1.2;\n color: var(--wui-color-text, #1b1b1b);\n}\n\n/* ===== 描述 ===== */\n\n.desc {\n margin: 0 0 var(--wui-dialog-desc-gap, 24px);\n padding: 0;\n\n font-size: 14px;\n line-height: 1.5;\n color: var(--wui-color-text, #1b1b1b);\n}\n\n/* ===== 按钮区域 ===== */\n\n.wui-dialog-footer {\n display: flex;\n flex-direction: column;\n gap: var(--wui-dialog-footer-gap, 10px);\n justify-content: var(--wui-dialog-footer-justify, flex-end);\n\n /* ===== 按钮全宽（默认垂直排列） ===== */\n\n & ::slotted(web-ui-button) {\n display: flex;\n width: 100%;\n }\n}\n\n/* ===== horizontal 模式 ===== */\n\n:host([horizontal]) .wui-dialog-footer {\n flex-direction: row;\n gap: 12px;\n justify-content: var(--wui-dialog-footer-justify, center);\n\n /* 非 full 按钮：居中，不拉伸 */\n\n & ::slotted(web-ui-button:not([full])) {\n width: auto;\n }\n\n /* full 按钮：平分剩余空间 */\n\n & ::slotted(web-ui-button[full]) {\n flex: 1;\n min-width: 0;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/input/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n --wui-input-clear-color: var(--wui-color-text-tertiary, color-mix(in srgb, var(--wui-color-text) 35%, transparent));\n display: inline-block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.wui-input-inner {\n --wui-glass-corner-radius: calc(var(--wui-control-size, 36px) / 2);\n position: relative;\n\n display: flex;\n gap: 8px;\n align-items: center;\n\n box-sizing: border-box;\n width: var(--wui-input-width, 200px);\n min-width: var(--wui-control-size, 36px);\n height: var(--wui-control-size, 36px);\n padding: 0 12px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n}\n\n:host([full]) {\n display: block;\n}\n\n:host([full]) .wui-input-inner {\n width: 100%;\n}\n\n/* ===== Borderless ===== */\n\n:host([borderless]) .wui-input-inner {\n border: none;\n
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/input/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n --wui-input-clear-color: var(--wui-color-text-tertiary, color-mix(in srgb, var(--wui-color-text) 35%, transparent));\n display: inline-block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.wui-input-inner {\n --wui-glass-corner-radius: calc(var(--wui-control-size, 36px) / 2);\n position: relative;\n\n display: flex;\n gap: 8px;\n align-items: center;\n\n box-sizing: border-box;\n width: var(--wui-input-width, 200px);\n min-width: var(--wui-control-size, 36px);\n height: var(--wui-control-size, 36px);\n padding: 0 12px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n}\n\n:host([full]) {\n display: block;\n}\n\n:host([full]) .wui-input-inner {\n width: 100%;\n}\n\n/* ===== Borderless ===== */\n\n:host([borderless]) .wui-input-inner {\n border: none;\n background: transparent;\n backdrop-filter: none;\n box-shadow: none;\n}\n\n/* borderless 必须移除 glass 描边环（.wui-glass::before 底环 + 对角光泽），\n 否则无框后仍残留 1px 胶囊描边 */\n:host([borderless]) .wui-input-inner::before {\n content: none;\n}\n\n/* Focus ring 独立成 ::after 层：base/focused 都是显式 box-shadow，保证所有变体都能过渡 */\n.wui-input-inner::after {\n pointer-events: none;\n content: '';\n\n position: absolute;\n inset: 0;\n\n border-radius: inherit;\n\n box-shadow:\n inset 0 0 0 1px transparent,\n 0 0 0 var(--wui-focus-ring-width, 3px) transparent;\n\n transition: box-shadow var(--wui-duration-focus, 200ms);\n}\n\n:host([focused]) .wui-input-inner::after {\n box-shadow:\n inset 0 0 0 1px var(--wui-color-accent, #08f),\n 0 0 0 var(--wui-focus-ring-width, 3px) var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n}\n\n/* ===== Input ===== */\n\ninput {\n flex: 1;\n\n min-width: 0;\n height: 100%;\n margin: 0;\n padding: 0;\n border: none;\n\n /* 表单控件不继承字体；显式继承以对齐宿主排版，避免 UA 默认字体差异 */\n font: inherit;\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text, #1b1b1b);\n\n background: transparent;\n outline: none;\n\n &::placeholder {\n color: var(--wui-color-text-secondary, #6a6a6a);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n}\n\n/* Coarse pointers include iOS Safari, where a sub-16px font triggers focus zoom. */\n@media (pointer: coarse) {\n input {\n font-size: max(16px, var(--wui-font-size, 14px));\n }\n}\n\n/* ===== Prefix / Suffix ===== */\n\nslot {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text-secondary, #6a6a6a);\n}\n\n/* slot 无 slotted 内容时折叠 */\nslot.empty {\n display: none;\n}\n\n/* ===== Clear button ===== */\n\n/* 复用 web-ui-button icon ghost：仅覆盖颜色为 faint，保持弱意图清除图标观感；\n 负 margin-left 抵消容器 flex gap，让清除按钮紧贴输入文本\n 负 margin-right 抵消 button padding，让清除按钮右侧 spacing 视觉上协调 */\n.wui-input-inner web-ui-button[variant='ghost'] {\n --wui-button-color: var(--wui-input-clear-color);\n margin-right: -4px;\n margin-left: -8px;\n}\n\n/* ===== Disabled ===== */\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/segmented/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n touch-action: none;\n user-select: none;\n display: inline-block;\n}\n\n.wui-segmented {\n touch-action: none;\n cursor: default;\n\n position: relative;\n\n display: inline-flex;\n align-items: stretch;\n\n padding: 4px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n background-color: var(--wui-color-surface-segmented, #e5e5ea);\n\n &.is-disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n &.is-disabled .wui-segmented-trigger.is-disabled {\n opacity: 1;\n }\n}\n\n.wui-segmented-indicator {\n position: absolute;\n z-index: 0;\n top: 4px;\n bottom: 4px;\n left: var(--indicator-left, 0);\n transform-origin: center center;\n transform: scale(1);\n\n display: block;\n\n width: var(--indicator-width, 0);\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n /* 静止态实体白指示器；按压/拖拽时切换为玻璃（半透明玻璃背景 + backdrop blur +\n 描边）并放大 1.5x，回到最初修复不跟手问题时期的视觉结构。 */\n background-color: var(--wui-color-surface-selected, #fff);\n box-shadow:\n 0 1px 3px rgb(0 0 0 / 0.12),\n 0 1px 2px rgb(0 0 0 / 0.08);\n\n transition:\n transform var(--wui-duration-press, 80ms) cubic-bezier(0.4, 0, 0.2, 1),\n background-color var(--wui-duration-press, 80ms) ease,\n box-shadow var(--wui-duration-press, 80ms) ease;\n\n /* transition 只在首帧定位后且非拖拽状态启用，避免组件进入视口时触发初始化动画或拖拽跟手产生延迟 */\n .is-indicator-ready:not(.is-dragging) & {\n transition:\n left var(--wui-duration-trigger, 160ms) var(--wui-ease-slide, cubic-bezier(0.77, 0, 0.175, 1)),\n width var(--wui-duration-trigger, 160ms) var(--wui-ease-slide, cubic-bezier(0.77, 0, 0.175, 1)),\n transform var(--wui-duration-press, 80ms) cubic-bezier(0.4, 0, 0.2, 1),\n background-color var(--wui-duration-press, 80ms) ease,\n box-shadow var(--wui-duration-press, 80ms) ease;\n }\n}\n\n.wui-segmented.is-pressed .wui-segmented-indicator,\n.wui-segmented.is-dragging .wui-segmented-indicator {\n transform: scale(1.5);\n
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/segmented/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n touch-action: none;\n user-select: none;\n display: inline-block;\n}\n\n.wui-segmented {\n touch-action: none;\n cursor: default;\n\n position: relative;\n\n display: inline-flex;\n align-items: stretch;\n\n padding: 4px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n background-color: var(--wui-color-surface-segmented, #e5e5ea);\n\n &.is-disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n &.is-disabled .wui-segmented-trigger.is-disabled {\n opacity: 1;\n }\n}\n\n.wui-segmented-indicator {\n position: absolute;\n z-index: 0;\n top: 4px;\n bottom: 4px;\n left: var(--indicator-left, 0);\n transform-origin: center center;\n transform: scale(1);\n\n display: block;\n\n width: var(--indicator-width, 0);\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n /* 静止态实体白指示器；按压/拖拽时切换为玻璃（半透明玻璃背景 + backdrop blur +\n 描边）并放大 1.5x，回到最初修复不跟手问题时期的视觉结构。 */\n background-color: var(--wui-color-surface-selected, #fff);\n box-shadow:\n 0 1px 3px rgb(0 0 0 / 0.12),\n 0 1px 2px rgb(0 0 0 / 0.08);\n\n transition:\n transform var(--wui-duration-press, 80ms) cubic-bezier(0.4, 0, 0.2, 1),\n background-color var(--wui-duration-press, 80ms) ease,\n box-shadow var(--wui-duration-press, 80ms) ease;\n\n /* transition 只在首帧定位后且非拖拽状态启用，避免组件进入视口时触发初始化动画或拖拽跟手产生延迟 */\n .is-indicator-ready:not(.is-dragging) & {\n transition:\n left var(--wui-duration-trigger, 160ms) var(--wui-ease-slide, cubic-bezier(0.77, 0, 0.175, 1)),\n width var(--wui-duration-trigger, 160ms) var(--wui-ease-slide, cubic-bezier(0.77, 0, 0.175, 1)),\n transform var(--wui-duration-press, 80ms) cubic-bezier(0.4, 0, 0.2, 1),\n background-color var(--wui-duration-press, 80ms) ease,\n box-shadow var(--wui-duration-press, 80ms) ease;\n }\n}\n\n.wui-segmented.is-pressed .wui-segmented-indicator,\n.wui-segmented.is-dragging .wui-segmented-indicator {\n transform: scale(1.5);\n background-color: var(--wui-color-surface-glass, rgb(250 250 250 / 0.34));\n backdrop-filter: blur(4px) saturate(160%);\n\n /* 按下/拖拽时加深投影（立体玻璃感）。直接写死值、不经过 var 中转：iOS Safari 对\n var 离散切换驱动的 box-shadow 不触发过渡且可能整体不生效（上一轮真机「回退之前」）。 */\n box-shadow:\n 0 0 1px rgb(0 0 0 / 0.1),\n 0 5px 14px rgb(0 0 0 / 0.16),\n 0 12px 28px rgb(0 0 0 / 0.1);\n}\n\n.wui-segmented.is-dragging:not(.is-disabled) {\n --wui-internal-segmented-trigger-cursor: grabbing;\n cursor: grabbing;\n}\n"],"mappings":""}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/svg-draw-lines/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;display:inline-
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;line-height:0;display:inline-flex}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/svg-draw-lines/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n user-select: none;\n display: inline-
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/svg-draw-lines/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n/* 行为型包裹器：inline-flex + line-height:0 使宿主盒高收缩到被包裹内容（不引入\n inline-block 的行盒导致 24px 抬升），同时宿主仍是可 transform 的盒子——interweave\n prototype 依赖对宿主的 scale 动画（#126）。 */\n:host {\n user-select: none;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n line-height: 0;\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/textarea/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n --wui-textarea-clear-color: var(\n --wui-color-text-tertiary,\n color-mix(in srgb, var(--wui-color-text) 35%, transparent)\n );\n display: block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n/* ===== Textarea ===== */\n\n.wui-textarea-inner {\n --wui-glass-corner-radius: var(--wui-radius-menu, 18px);\n position: relative;\n\n display: flex;\n gap: 8px;\n align-items: flex-start;\n\n box-sizing: border-box;\n width: var(--wui-textarea-width, 200px);\n min-width: var(--wui-control-size, 36px);\n min-height: var(--wui-control-size, 36px);\n padding: 7.5px 12px;\n border-radius: var(--wui-radius-menu, 18px);\n}\n\n:host([full]) .wui-textarea-inner {\n width: 100%;\n}\n\n/* ===== Borderless ===== */\n\n:host([borderless]) .wui-textarea-inner {\n border: none;\n
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/textarea/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n --wui-textarea-clear-color: var(\n --wui-color-text-tertiary,\n color-mix(in srgb, var(--wui-color-text) 35%, transparent)\n );\n display: block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n/* ===== Textarea ===== */\n\n.wui-textarea-inner {\n --wui-glass-corner-radius: var(--wui-radius-menu, 18px);\n position: relative;\n\n display: flex;\n gap: 8px;\n align-items: flex-start;\n\n box-sizing: border-box;\n width: var(--wui-textarea-width, 200px);\n min-width: var(--wui-control-size, 36px);\n min-height: var(--wui-control-size, 36px);\n padding: 7.5px 12px;\n border-radius: var(--wui-radius-menu, 18px);\n}\n\n:host([full]) .wui-textarea-inner {\n width: 100%;\n}\n\n/* ===== Borderless ===== */\n\n:host([borderless]) .wui-textarea-inner {\n border: none;\n background: transparent;\n backdrop-filter: none;\n box-shadow: none;\n}\n\n/* borderless 必须移除 glass 描边环（.wui-glass::before 底环 + 对角光泽），\n 否则无框后仍残留 1px 描边 */\n:host([borderless]) .wui-textarea-inner::before {\n content: none;\n}\n\ntextarea {\n resize: vertical;\n\n display: block;\n flex: 1;\n\n box-sizing: border-box;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n\n /* 表单控件不继承字体；显式继承以对齐宿主排版，避免 UA 默认字体差异 */\n font: inherit;\n font-size: var(--wui-font-size, 14px);\n line-height: 1.5;\n color: var(--wui-color-text, #1b1b1b);\n\n background: transparent;\n outline: none;\n\n &::placeholder {\n color: var(--wui-color-text-secondary, #6a6a6a);\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:read-only {\n cursor: default;\n }\n}\n\n/* Coarse pointers include iOS Safari, where a sub-16px font triggers focus zoom. */\n@media (pointer: coarse) {\n textarea {\n font-size: max(16px, var(--wui-font-size, 14px));\n }\n}\n\n/* Focus ring 独立成 ::after 层：base/focused 都是显式 box-shadow，保证所有变体都能过渡 */\n.wui-textarea-inner::after {\n pointer-events: none;\n content: '';\n\n position: absolute;\n inset: 0;\n\n border-radius: inherit;\n\n box-shadow:\n inset 0 0 0 1px transparent,\n 0 0 0 var(--wui-focus-ring-width, 3px) transparent;\n\n transition: box-shadow var(--wui-duration-focus, 200ms);\n}\n\n:host([focused]) .wui-textarea-inner::after {\n box-shadow:\n inset 0 0 0 1px var(--wui-color-accent, #08f),\n 0 0 0 var(--wui-focus-ring-width, 3px) var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n}\n\n/* ===== Prefix / Suffix ===== */\n\nslot {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text-secondary, #6a6a6a);\n}\n\nslot.empty {\n display: none;\n}\n\n/* ===== Clear button ===== */\n\n/* 复用 web-ui-button icon ghost：仅覆盖颜色为 faint 并对齐首行，保持弱意图清除图标观感；\n 负 margin-left 抵消容器 flex gap，让清除按钮紧贴文本域内容\n 负 margin-right 抵消 button padding，让清除按钮右侧 spacing 视觉上协调 */\n.wui-textarea-inner web-ui-button[variant='ghost'] {\n --wui-button-color: var(--wui-textarea-clear-color);\n\n /* 与首行文字垂直居中对齐：容器 align-items: flex-start 使按钮贴内容区顶部，\n 首行中心 = padding-top + 行高/2；24px 按钮需相对内容区上移 (行高 − 按钮高度) / 2 */\n margin-top: calc((var(--wui-font-size, 14px) * 1.5 - 24px) / 2);\n margin-right: -4px;\n margin-left: -8px;\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/toast/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n/* ===== 入场 / 退场动画 ===== */\n\n/* 单层玻璃：.toast 自身承担背景/阴影/backdrop-filter。blur(0px) ↔ blur(4px) 平滑\n 插值（none↔blur 不可插值才是当年生硬跳变的根因），own opacity 过渡不禁用自身\n blur，因此 toast 直接 opacity + backdrop-filter + transform 同步过渡，无需双层。 */\n.toast {\n --wui-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n --wui-glass-corner-radius: var(--wui-radius-menu, 18px);\n position: relative;\n transform: translate(var(--toast-slide-x, 0), var(--toast-slide-y, -8px)) scale(0.97);\n\n display: flex;\n gap: 8px;\n\n width: min(320px, calc(100dvw - 2 * var(--wui-toast-viewport-gap, 16px)));\n min-height: 36px;\n padding: 8px;\n border-radius: var(--wui-radius-menu, 18px);\n\n font-size: var(--wui-font-size, 14px);\n line-height: 1.5;\n color: var(--wui-color-text, #1b1b1b);\n\n opacity: 0;\n background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.82));\n
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/toast/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n/* ===== 入场 / 退场动画 ===== */\n\n/* 单层玻璃：.toast 自身承担背景/阴影/backdrop-filter。blur(0px) ↔ blur(4px) 平滑\n 插值（none↔blur 不可插值才是当年生硬跳变的根因），own opacity 过渡不禁用自身\n blur，因此 toast 直接 opacity + backdrop-filter + transform 同步过渡，无需双层。 */\n.toast {\n --wui-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n --wui-glass-corner-radius: var(--wui-radius-menu, 18px);\n position: relative;\n transform: translate(var(--toast-slide-x, 0), var(--toast-slide-y, -8px)) scale(0.97);\n\n display: flex;\n gap: 8px;\n\n width: min(320px, calc(100dvw - 2 * var(--wui-toast-viewport-gap, 16px)));\n min-height: 36px;\n padding: 8px;\n border-radius: var(--wui-radius-menu, 18px);\n\n font-size: var(--wui-font-size, 14px);\n line-height: 1.5;\n color: var(--wui-color-text, #1b1b1b);\n\n opacity: 0;\n background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.82));\n backdrop-filter: blur(0) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n\n /* transition 列表需手写 -webkit-backdrop-filter：lightningcss 不会在 transition\n value 内追加 -webkit 项，iOS 16.4 上 blur 过渡依赖它（属性前缀会自动生成）。 */\n transition:\n opacity var(--wui-duration-toast-enter, 280ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n -webkit-backdrop-filter var(--wui-duration-toast-enter, 280ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n backdrop-filter var(--wui-duration-toast-enter, 280ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n transform var(--wui-duration-toast-enter, 280ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n:host([visible]) .toast {\n transform: translate(0, 0) scale(1);\n opacity: 1;\n backdrop-filter: blur(4px) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n}\n\n:host(:not([visible])) .toast {\n transition-duration: var(--wui-duration-toast-exit, 200ms);\n}\n\n/* ===== 关闭按钮（放在 hover 规则之前，避免 specificity 降序） ===== */\n\nweb-ui-button.toast-close-btn {\n pointer-events: none;\n cursor: default;\n\n position: absolute;\n top: -8px;\n right: -8px;\n\n opacity: 0;\n\n transition: opacity var(--wui-duration-trigger, 160ms) ease;\n\n /* 内层原生按钮获得键盘焦点时宿主同样可见 */\n &:focus-within {\n pointer-events: auto;\n opacity: 1;\n }\n}\n\n@media (hover: hover) and (pointer: fine) {\n web-ui-button.toast-close-btn:hover,\n .toast:hover web-ui-button.toast-close-btn {\n pointer-events: auto;\n opacity: 1;\n }\n}\n\n/* secondary 变体默认用文本色，恢复原关闭按钮的 muted 观感 */\n.toast web-ui-button[icon] {\n --wui-button-color: var(--wui-color-text-secondary, #6a6a6a);\n}\n\n/* ===== 图标 ===== */\n\n.toast-icon {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n width: 20px;\n height: 20px;\n margin-bottom: auto;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n}\n\n.toast.success .toast-icon {\n color: var(--wui-color-success, #16a34a);\n background-color: color-mix(in srgb, var(--wui-color-success, #16a34a) 10%, transparent);\n}\n\n.toast.info .toast-icon {\n color: var(--wui-color-info, #2563eb);\n background-color: color-mix(in srgb, var(--wui-color-info, #2563eb) 10%, transparent);\n}\n\n.toast.warning .toast-icon {\n color: var(--wui-color-warning, #d97706);\n background-color: color-mix(in srgb, var(--wui-color-warning, #d97706) 10%, transparent);\n}\n\n.toast.error .toast-icon {\n color: var(--wui-color-danger, #dc2626);\n background-color: color-mix(in srgb, var(--wui-color-danger, #dc2626) 10%, transparent);\n}\n\n/* ===== 内容区 ===== */\n\n.toast-body {\n flex: 1;\n min-width: 0;\n}\n\n.toast-heading {\n overflow: hidden;\n\n font-size: var(--wui-font-size, 14px);\n font-weight: 600;\n line-height: 1.4;\n color: var(--wui-color-text, #1b1b1b);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.toast-message {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n\n font-size: calc(var(--wui-font-size, 14px) - 1px);\n line-height: 1.4;\n color: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 55%, transparent);\n word-break: break-all;\n}\n\n/* ===== 时间戳 ===== */\n\n.toast-time {\n font-size: 12px;\n color: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 30%, transparent);\n white-space: nowrap;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .toast,\n :host([visible]) .toast {\n transform: none;\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n}\n"],"mappings":""}
|