@greypan/web-ui 10.1.1 → 10.2.0
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/README.CN.md +41 -1547
- package/README.md +41 -1554
- package/dist/assets/overlay-motion.js +1 -1
- package/dist/assets/overlay-motion.js.map +1 -1
- package/dist/components/context-menu/index.d.ts +27 -4
- package/dist/components/context-menu/index.js +20 -14
- package/dist/components/context-menu/index.js.map +1 -1
- package/dist/components/image-preview/style.js +1 -1
- package/dist/components/image-preview/style.js.map +1 -1
- package/dist/components/theme/style.js +1 -1
- package/dist/components/theme/style.js.map +1 -1
- package/dist/components/toast/style.js +1 -1
- package/dist/components/toast/style.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/image-preview/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{display:contents}dialog{box-sizing:border-box;width:100%;max-width:none;height:100dvh;max-height:none;color:var(--wui-color-text,#1b1b1b);opacity:1;background:0 0;border:none;margin:0;padding:0;font-family:inherit;position:fixed;overflow:hidden}.wui-image-preview-backdrop{pointer-events:none;opacity:0;background:var(--wui-image-preview-overlay-bg,#000000b8);transition:opacity var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1));position:absolute;inset:0}.wui-image-preview-content{position:absolute;inset:0}.wui-image-preview-surface{transform:scale(var(--wui-scale-enter,.
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{display:contents}dialog{box-sizing:border-box;width:100%;max-width:none;height:100dvh;max-height:none;color:var(--wui-color-text,#1b1b1b);opacity:1;background:0 0;border:none;margin:0;padding:0;font-family:inherit;position:fixed;overflow:hidden}.wui-image-preview-backdrop{pointer-events:none;opacity:0;background:var(--wui-image-preview-overlay-bg,#000000b8);transition:opacity var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1));position:absolute;inset:0}.wui-image-preview-content{position:absolute;inset:0}.wui-image-preview-surface{transform:scale(var(--wui-scale-enter,.9));opacity:0;transition:opacity var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1)), transform var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1));position:absolute;inset:0}.wui-image-preview-counter,.wui-image-preview-toolbar,.wui-image-preview-close::part(button),.wui-image-preview-nav::part(button){opacity:0;transition:opacity var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1))}dialog::backdrop{background:0 0}.wui-image-preview-stage{touch-action:none;cursor:zoom-in;width:100%;height:100%;position:relative;overflow:hidden}.wui-image-preview-stage.is-zoomed{cursor:grab}.wui-image-preview-stage.is-dragging{cursor:grabbing}.wui-image-preview-track{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.wui-image-preview-slide{pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.wui-image-preview-slide.is-prev{left:-100%}.wui-image-preview-slide.is-next{left:100%}.wui-image-preview-image{pointer-events:auto;-webkit-user-select:none;user-select:none;opacity:0;object-fit:contain;max-width:100%;max-height:100%;transition:opacity var(--wui-duration-trigger,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), transform var(--wui-duration-trigger,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));-webkit-user-drag:none;display:block}.wui-image-preview-image.is-loaded{opacity:1}.wui-image-preview-stage.is-dragging .wui-image-preview-image{transition:opacity var(--wui-duration-trigger,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1))}.wui-image-preview-stage.is-settling .wui-image-preview-track{transition:transform var(--wui-duration-swipe-settle,.22s) var(--wui-ease-swipe,cubic-bezier(.32, .72, 0, 1))}.wui-image-preview-stage.is-dragging .wui-image-preview-track{transition:none}@media (prefers-reduced-motion:reduce){.wui-image-preview-image,.wui-image-preview-stage.is-dragging .wui-image-preview-image,.wui-image-preview-stage.is-settling .wui-image-preview-track{transition:opacity var(--wui-duration-feedback,.1s)}}.wui-image-preview-controls{pointer-events:none;position:absolute;inset:0}.wui-image-preview-controls>*{pointer-events:auto}.wui-image-preview-counter{--wui-glass-corner-radius:12px;top:var(--wui-image-preview-edge-gap,20px);left:var(--wui-image-preview-edge-gap,20px);padding:var(--wui-space-1,4px) var(--wui-space-3,12px);border-radius:var(--wui-radius-control,calc(infinity * 1px));font-size:var(--wui-font-size-readout,13px);font-variant-numeric:tabular-nums;color:var(--wui-color-text,#1b1b1b);position:absolute}.wui-image-preview-close{top:var(--wui-image-preview-edge-gap,20px);right:var(--wui-image-preview-edge-gap,20px);position:absolute}.wui-image-preview-nav{position:absolute;top:50%;translate:0 -50%}.wui-image-preview-nav-prev{left:var(--wui-image-preview-edge-gap,20px)}.wui-image-preview-nav-next{right:var(--wui-image-preview-edge-gap,20px)}.wui-image-preview-toolbar{--wui-glass-corner-radius:21px;bottom:var(--wui-image-preview-edge-gap,20px);border-radius:var(--wui-radius-control,calc(infinity * 1px));align-items:center;gap:6px;padding:6px;display:flex;position:absolute;left:50%;translate:-50%}.wui-image-preview-scale{min-width:48px;font-size:var(--wui-font-size-readout,13px);font-variant-numeric:tabular-nums;color:var(--wui-color-text,#1b1b1b);text-align:center}dialog[open].is-visible .wui-image-preview-surface{transform:scale(1)}dialog[open].is-visible .wui-image-preview-backdrop,dialog[open].is-visible .wui-image-preview-surface,dialog[open].is-visible .wui-image-preview-counter,dialog[open].is-visible .wui-image-preview-toolbar,dialog[open].is-visible .wui-image-preview-close::part(button),dialog[open].is-visible .wui-image-preview-nav::part(button){opacity:1}dialog[open].is-closing{pointer-events:none;transition-duration:var(--wui-duration-dialog-exit,.26s)}dialog[open].is-closing .wui-image-preview-backdrop,dialog[open].is-closing .wui-image-preview-surface,dialog[open].is-closing .wui-image-preview-counter,dialog[open].is-closing .wui-image-preview-toolbar,dialog[open].is-closing .wui-image-preview-close::part(button),dialog[open].is-closing .wui-image-preview-nav::part(button){transition-duration:var(--wui-duration-dialog-exit,.26s)}@media (prefers-reduced-motion:reduce){dialog,dialog[open].is-visible{transition-duration:var(--wui-duration-feedback,.1s)}:is(dialog,dialog[open].is-visible) .wui-image-preview-surface{transition-duration:var(--wui-duration-feedback,.1s);transform:none}:is(dialog,dialog[open].is-visible) .wui-image-preview-backdrop,:is(dialog,dialog[open].is-visible) .wui-image-preview-surface,:is(dialog,dialog[open].is-visible) .wui-image-preview-counter,:is(dialog,dialog[open].is-visible) .wui-image-preview-toolbar,:is(dialog,dialog[open].is-visible) .wui-image-preview-close::part(button),:is(dialog,dialog[open].is-visible) .wui-image-preview-nav::part(button){transition-duration:var(--wui-duration-feedback,.1s)}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/image-preview/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: contents;\n}\n\n/*\n * 全视口 dialog：遮罩由独立 .wui-image-preview-backdrop 层提供（而非 ::backdrop /\n * dialog 自身背景）。dialog 自身 opacity 恒 1、无任何 transform——opacity < 1 会让\n * dialog 成为 backdrop root，后代玻璃控件（toolbar/counter/nav）的 backdrop-filter\n * 在过渡期被禁用、blur 在端点生硬跳变；transform 会把遮罩一起缩放。进场缩放\n * （scale 0.
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/image-preview/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: contents;\n}\n\n/*\n * 全视口 dialog：遮罩由独立 .wui-image-preview-backdrop 层提供（而非 ::backdrop /\n * dialog 自身背景）。dialog 自身 opacity 恒 1、无任何 transform——opacity < 1 会让\n * dialog 成为 backdrop root，后代玻璃控件（toolbar/counter/nav）的 backdrop-filter\n * 在过渡期被禁用、blur 在端点生硬跳变；transform 会把遮罩一起缩放。进场缩放\n * （scale 0.9→1）由 .wui-image-preview-surface 图片舞台层承担（见下）。本组件是满视口\n * 表面，起点 >1 会越出视口，只能用 <1 的档位；缩放也不能落在包住控件层的\n * .wui-image-preview-content 上，否则贴边控件会随缩放从视口边缘向内飞行。遮罩、图片\n * 舞台各自用独立层 opacity 过渡；控件层不参与 opacity 过渡，玻璃控件永不在 opacity < 1\n * 的祖先内，blur 全程连续。\n */\ndialog {\n /* 显式 position: fixed（防御性）：UA 的 dialog:modal 默认 fixed，但作者样式若覆盖\n position 会把它退回文档流——top layer 里的 modal dialog 变成按文档流定位，出现在\n 页面顶部且跟随页面滚动。image-preview 的 dialog 铺满视口，fixed 是硬前提。 */\n position: fixed;\n\n overflow: hidden;\n\n box-sizing: border-box;\n width: 100%;\n max-width: none;\n height: 100%;\n height: 100dvh;\n max-height: none;\n margin: 0;\n padding: 0;\n border: none;\n\n font-family: inherit;\n color: var(--wui-color-text, #1b1b1b);\n\n opacity: 1;\n background: transparent;\n}\n\n/* 遮罩层：承接原先 dialog 背景的淡入淡出，自身 opacity 过渡不构成 backdrop root。 */\n.wui-image-preview-backdrop {\n pointer-events: none;\n\n position: absolute;\n inset: 0;\n\n opacity: 0;\n background: var(--wui-image-preview-overlay-bg, rgb(0 0 0 / 0.72));\n\n transition: opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* 内容包裹层：仅作「图片舞台层 + 控件层」的结构容器，自身不做任何过渡。\n scale 不能放在 dialog 上（会带着遮罩一起缩放），也不能放在本层（控件层在其内，\n 带 transform 会让贴边控件从视口边缘向内飞行）。 */\n.wui-image-preview-content {\n position: absolute;\n inset: 0;\n}\n\n/* 图片舞台层：与遮罩同尺寸叠放，承接图片的进场缩放与淡入淡出（0.9→1）。内部无玻璃\n 元素，自身 opacity 过渡不影响 backdrop-filter；transform 不构成 backdrop root，\n 也不会波及兄弟的控件层。 */\n.wui-image-preview-surface {\n position: absolute;\n inset: 0;\n transform: scale(var(--wui-scale-enter, 0.9));\n\n opacity: 0;\n\n transition:\n opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1)),\n transform var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* 玻璃控件（counter/toolbar）各自做 own opacity 过渡：玻璃元素自身 opacity 淡入\n 不禁用自身 backdrop-filter（backdrop root 只关闭后代 blur），因此控件淡入淡出时\n blur 仍连续；nav/close 是 glass 按钮，blur 在其 shadow 内层原生 button 上，必须\n 经 ::part(button) 落在该玻璃元素自身，若对按钮 host 做 opacity 过渡反而会让\n host 成为 backdrop root、禁掉内层 blur（与祖先 opacity 禁后代 blur 同一机制）。 */\n.wui-image-preview-counter,\n.wui-image-preview-toolbar,\n.wui-image-preview-close::part(button),\n.wui-image-preview-nav::part(button) {\n opacity: 0;\n transition: opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* 模态表面的焦点环抑制（<dialog> 壳 + 面板滚动区）集中在 assets/modal-surface.css，见组件 index.ts 的 static styles。 */\n\n/* dialog 已铺满视口，原生遮罩不再叠加着色，避免双重变暗。 */\ndialog::backdrop {\n background: transparent;\n}\n\n.wui-image-preview-stage {\n touch-action: none;\n cursor: zoom-in;\n\n position: relative;\n\n overflow: hidden;\n\n width: 100%;\n height: 100%;\n}\n\n.wui-image-preview-stage.is-zoomed {\n cursor: grab;\n}\n\n.wui-image-preview-stage.is-dragging {\n cursor: grabbing;\n}\n\n/* 单轨道轮播（相邻图渲染）：轨道撑满舞台，当前图在原点、左右相邻用绝对定位放在\n ±100%（= 舞台宽度）处，与当前图同尺寸同基线；舞台 overflow 裁切，轨道整体随跟手\n 位移平移。相邻图只在当前索引两侧各渲染一张（loop 环绕、非 loop 缺省一侧），任何\n 索引拖拽（含首尾环绕）相邻图都真实跟手，不会越过轨道末端滑空。\n pointer-events: none 让空白的轨道区域穿透命中到舞台（空白点击仍算遮罩），图片自身\n 恢复 auto 接收手势。 */\n.wui-image-preview-track {\n pointer-events: none;\n\n position: absolute;\n inset: 0;\n\n width: 100%;\n height: 100%;\n}\n\n.wui-image-preview-slide {\n pointer-events: none;\n\n position: absolute;\n top: 0;\n left: 0;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 100%;\n height: 100%;\n}\n\n.wui-image-preview-slide.is-prev {\n left: -100%;\n}\n\n.wui-image-preview-slide.is-next {\n left: 100%;\n}\n\n.wui-image-preview-image {\n pointer-events: auto;\n user-select: none;\n\n display: block;\n\n max-width: 100%;\n max-height: 100%;\n\n opacity: 0;\n object-fit: contain;\n\n /* 拖拽（平移）不参与 transform 过渡（见 .is-dragging），避免跟手位移滞后；\n swipe 只动轨道，图片 transform 在滑动期间不变。 */\n transition:\n opacity var(--wui-duration-trigger, 160ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n transform var(--wui-duration-trigger, 160ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n -webkit-user-drag: none;\n}\n\n.wui-image-preview-image.is-loaded {\n opacity: 1;\n}\n\n.wui-image-preview-stage.is-dragging .wui-image-preview-image {\n transition: opacity var(--wui-duration-trigger, 160ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n/* 轮播滑入/回位：跟手结束后把轨道 transform 过渡到目标位（当前图滑出、相邻图入位或\n 弹回）。transitionend 会触发组件内的收尾提交；时长/缓动可用组件级变量覆盖。 */\n.wui-image-preview-stage.is-settling .wui-image-preview-track {\n transition: transform var(--wui-duration-swipe-settle, 220ms) var(--wui-ease-swipe, cubic-bezier(0.32, 0.72, 0, 1));\n}\n\n.wui-image-preview-stage.is-dragging .wui-image-preview-track {\n transition: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .wui-image-preview-image,\n .wui-image-preview-stage.is-dragging .wui-image-preview-image,\n .wui-image-preview-stage.is-settling .wui-image-preview-track {\n transition: opacity var(--wui-duration-feedback, 100ms);\n }\n}\n\n.wui-image-preview-controls {\n pointer-events: none;\n position: absolute;\n inset: 0;\n}\n\n.wui-image-preview-controls > * {\n pointer-events: auto;\n}\n\n.wui-image-preview-counter {\n /* pill 高 ≈ 24px（13px 行盒 + 上下 4px padding），光影取短边一半 */\n --wui-glass-corner-radius: 12px;\n\n position: absolute;\n top: var(--wui-image-preview-edge-gap, 20px);\n left: var(--wui-image-preview-edge-gap, 20px);\n\n padding: var(--wui-space-1, 4px) var(--wui-space-3, 12px);\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n font-size: var(--wui-font-size-readout, 13px);\n font-variant-numeric: tabular-nums;\n color: var(--wui-color-text, #1b1b1b);\n}\n\n.wui-image-preview-close {\n position: absolute;\n top: var(--wui-image-preview-edge-gap, 20px);\n right: var(--wui-image-preview-edge-gap, 20px);\n}\n\n.wui-image-preview-nav {\n position: absolute;\n top: 50%;\n translate: 0 -50%;\n}\n\n.wui-image-preview-nav-prev {\n left: var(--wui-image-preview-edge-gap, 20px);\n}\n\n.wui-image-preview-nav-next {\n right: var(--wui-image-preview-edge-gap, 20px);\n}\n\n.wui-image-preview-toolbar {\n /* 高 = 30px 图标按钮 + 上下 6px padding，光影取短边一半 */\n --wui-glass-corner-radius: 21px;\n\n position: absolute;\n bottom: var(--wui-image-preview-edge-gap, 20px);\n left: 50%;\n translate: -50% 0;\n\n display: flex;\n gap: 6px;\n align-items: center;\n\n padding: 6px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n}\n\n.wui-image-preview-scale {\n min-width: 48px;\n\n font-size: var(--wui-font-size-readout, 13px);\n font-variant-numeric: tabular-nums;\n color: var(--wui-color-text, #1b1b1b);\n text-align: center;\n}\n\ndialog[open].is-visible {\n .wui-image-preview-surface {\n transform: scale(1);\n }\n\n .wui-image-preview-backdrop,\n .wui-image-preview-surface,\n .wui-image-preview-counter,\n .wui-image-preview-toolbar {\n opacity: 1;\n }\n\n .wui-image-preview-close::part(button),\n .wui-image-preview-nav::part(button) {\n opacity: 1;\n }\n}\n\ndialog[open].is-closing {\n pointer-events: none;\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n\n .wui-image-preview-backdrop,\n .wui-image-preview-surface,\n .wui-image-preview-counter,\n .wui-image-preview-toolbar {\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n }\n\n .wui-image-preview-close::part(button),\n .wui-image-preview-nav::part(button) {\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n dialog,\n dialog[open].is-visible {\n transition-duration: var(--wui-duration-feedback, 100ms);\n\n .wui-image-preview-surface {\n transform: none;\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n\n .wui-image-preview-backdrop,\n .wui-image-preview-surface,\n .wui-image-preview-counter,\n .wui-image-preview-toolbar {\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n\n .wui-image-preview-close::part(button),\n .wui-image-preview-nav::part(button) {\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n }\n}\n"],"mappings":""}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/theme/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{--wui-font-size-caption:12px;--wui-font-size-readout:13px;--wui-font-size:14px;--wui-font-size-title:18px;--wui-font-weight-medium:500;--wui-font-weight-semibold:600;--wui-line-height-tight:1.2;--wui-line-height-snug:1.4;--wui-line-height-normal:1.5;--wui-line-height-relaxed:1.6;--wui-space-1:4px;--wui-space-2:8px;--wui-space-3:12px;--wui-space-4:16px;--wui-space-5:20px;--wui-space-6:24px;--wui-input-width:200px;--wui-control-size:36px;--wui-overlay-min-width:200px;--wui-selection-control-size:18px;--wui-radio-group-gap:var(--wui-space-2);--wui-checkbox-group-gap:var(--wui-space-2);--wui-layer-inline-overlay:1;--wui-layer-header:10;--wui-layer-auxiliary:20;--wui-layer-banner:30;--wui-layer-tabbar:40;--wui-layer-sidebar:50;--wui-layer-menu:100;--wui-layer-menu-nested:110;--wui-layer-toast:200;--wui-layer-loading:300;--wui-duration-press:80ms;--wui-duration-feedback:.1s;--wui-duration-trigger:.16s;--wui-duration-focus:.2s;--wui-duration-float-enter:.24s;--wui-duration-float-exit:.16s;--wui-duration-dialog-enter:.32s;--wui-duration-dialog-exit:.26s;--wui-duration-drawer-enter:.28s;--wui-duration-drawer-exit:.24s;--wui-duration-drawer-nested:.45s;--wui-duration-toast-enter:.28s;--wui-duration-toast-exit:.2s;--wui-duration-collapse-enter:.2s;--wui-duration-collapse-exit:.16s;--wui-duration-layout:.2s;--wui-duration-swipe-settle:.22s;--wui-duration-spin:.6s;--wui-duration-spinner:.8s;--wui-theme-transition-duration:.5s;--wui-theme-transition-easing:ease-in;--wui-ease-enter:cubic-bezier(.23, 1, .32, 1);--wui-ease-dialog:cubic-bezier(.2, 0, 0, 1);--wui-ease-slide:cubic-bezier(.77, 0, .175, 1);--wui-ease-swipe:cubic-bezier(.32, .72, 0, 1);--wui-ease-float:cubic-bezier(.4, .38, .2, 1);--wui-scale-enter:.
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{--wui-font-size-caption:12px;--wui-font-size-readout:13px;--wui-font-size:14px;--wui-font-size-title:18px;--wui-font-weight-medium:500;--wui-font-weight-semibold:600;--wui-line-height-tight:1.2;--wui-line-height-snug:1.4;--wui-line-height-normal:1.5;--wui-line-height-relaxed:1.6;--wui-space-1:4px;--wui-space-2:8px;--wui-space-3:12px;--wui-space-4:16px;--wui-space-5:20px;--wui-space-6:24px;--wui-input-width:200px;--wui-control-size:36px;--wui-overlay-min-width:200px;--wui-selection-control-size:18px;--wui-radio-group-gap:var(--wui-space-2);--wui-checkbox-group-gap:var(--wui-space-2);--wui-layer-inline-overlay:1;--wui-layer-header:10;--wui-layer-auxiliary:20;--wui-layer-banner:30;--wui-layer-tabbar:40;--wui-layer-sidebar:50;--wui-layer-menu:100;--wui-layer-menu-nested:110;--wui-layer-toast:200;--wui-layer-loading:300;--wui-duration-press:80ms;--wui-duration-feedback:.1s;--wui-duration-trigger:.16s;--wui-duration-focus:.2s;--wui-duration-float-enter:.24s;--wui-duration-float-exit:.16s;--wui-duration-dialog-enter:.32s;--wui-duration-dialog-exit:.26s;--wui-duration-drawer-enter:.28s;--wui-duration-drawer-exit:.24s;--wui-duration-drawer-nested:.45s;--wui-duration-toast-enter:.28s;--wui-duration-toast-exit:.2s;--wui-duration-collapse-enter:.2s;--wui-duration-collapse-exit:.16s;--wui-duration-layout:.2s;--wui-duration-swipe-settle:.22s;--wui-duration-spin:.6s;--wui-duration-spinner:.8s;--wui-theme-transition-duration:.5s;--wui-theme-transition-easing:ease-in;--wui-ease-enter:cubic-bezier(.23, 1, .32, 1);--wui-ease-dialog:cubic-bezier(.2, 0, 0, 1);--wui-ease-slide:cubic-bezier(.77, 0, .175, 1);--wui-ease-swipe:cubic-bezier(.32, .72, 0, 1);--wui-ease-float:cubic-bezier(.4, .38, .2, 1);--wui-scale-enter:.9;--wui-dialog-scale-enter:1.1;--wui-focus-ring-width:3px;--wui-radius-control:calc(infinity * 1px);--wui-radius-menu:18px;--wui-radius-overlay:28px;display:contents}:host([motion=reduced]){--wui-duration-press:0s;--wui-duration-feedback:0s;--wui-duration-trigger:0s;--wui-duration-focus:0s;--wui-duration-float-enter:0s;--wui-duration-float-exit:0s;--wui-duration-dialog-enter:0s;--wui-duration-dialog-exit:0s;--wui-duration-drawer-enter:0s;--wui-duration-drawer-exit:0s;--wui-duration-drawer-nested:0s;--wui-duration-toast-enter:0s;--wui-duration-toast-exit:0s;--wui-duration-collapse-enter:0s;--wui-duration-collapse-exit:0s;--wui-duration-layout:0s;--wui-duration-swipe-settle:0s;--wui-theme-transition-duration:0s;--wui-duration-spin:1.6s;--wui-duration-spinner:1.6s;--wui-scale-enter:1;--wui-dialog-scale-enter:1}@media (prefers-reduced-motion:reduce){:host([motion=system]){--wui-duration-press:0s;--wui-duration-feedback:0s;--wui-duration-trigger:0s;--wui-duration-focus:0s;--wui-duration-float-enter:0s;--wui-duration-float-exit:0s;--wui-duration-dialog-enter:0s;--wui-duration-dialog-exit:0s;--wui-duration-drawer-enter:0s;--wui-duration-drawer-exit:0s;--wui-duration-drawer-nested:0s;--wui-duration-toast-enter:0s;--wui-duration-toast-exit:0s;--wui-duration-collapse-enter:0s;--wui-duration-collapse-exit:0s;--wui-duration-layout:0s;--wui-duration-swipe-settle:0s;--wui-theme-transition-duration:0s;--wui-duration-spin:1.6s;--wui-duration-spinner:1.6s;--wui-scale-enter:1;--wui-dialog-scale-enter:1}}:host([appearance=light]),:host([appearance=system]){--wui-color-page:#fff;--wui-color-surface:#fff;--wui-color-surface-raised:#f2f2f7;--wui-color-surface-control:#dfdfdf;--wui-color-surface-track:#e5e5ea;--wui-color-surface-menu:#fafafac2;--wui-color-surface-glass:#fafafa57;--wui-color-surface-glass-hover:color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));--wui-color-surface-glass-active:color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));--wui-color-surface-overlay:#f8f8f8eb;--wui-color-surface-sidebar:#e9e9e9d1;--wui-color-surface-segmented:#e5e5ea;--wui-color-surface-selected:#fff;--wui-color-text:#1b1b1b;--wui-color-text-secondary:#6a6a6a;--wui-color-text-tertiary:color-mix(in srgb, var(--wui-color-text) 35%, transparent);--wui-color-text-disabled:color-mix(in srgb, var(--wui-color-text) 32%, transparent);--wui-color-state-layer-hover:color-mix(in srgb, var(--wui-color-text) 6%, transparent);--wui-color-state-layer-active:color-mix(in srgb, var(--wui-color-text) 15%, transparent);--wui-color-border:#0000001a;--wui-color-glass-highlight:#ffffffe6;--wui-color-glass-ring:#0000000d;--wui-color-glass-ring-sheen:#ffffff80;--wui-color-glass-ring-shade:#00000008;--wui-glass-brightness:1.06;--wui-color-accent:#08f;--wui-color-on-accent:#fff;--wui-color-on-control:#fff;--wui-color-success:#16a34a;--wui-color-warning:#d97706;--wui-color-danger:#dc2626;--wui-color-info:#2563eb;--wui-color-backdrop:#0000001f;--wui-shadow-overlay:2px 16px 40px #0006;--wui-shadow-panel:0 3px 9px #00000045;--wui-shadow-glass:0 0 1px #00000005, 0 0 8px #00000008, 0 2px 16px #00000006, 0 8px 32px #00000004;--wui-color-focus-ring:color-mix(in srgb, var(--wui-color-accent,#08f) 40%, transparent);--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:host([appearance=dark]){--wui-color-page:#242628;--wui-color-surface:#2c2c2e;--wui-color-surface-raised:#2c2c2e;--wui-color-surface-control:#3a3a3c;--wui-color-surface-track:#444446;--wui-color-surface-menu:#313032bd;--wui-color-surface-glass:#2c2c2e6b;--wui-color-surface-glass-hover:color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));--wui-color-surface-glass-active:color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));--wui-color-surface-overlay:#202222eb;--wui-color-surface-sidebar:#2c2c2ecc;--wui-color-surface-segmented:#3a3a3c;--wui-color-surface-selected:#5c5c5e;--wui-color-text:#e9eaea;--wui-color-text-secondary:#a1a1a6;--wui-color-text-tertiary:color-mix(in srgb, var(--wui-color-text) 42%, transparent);--wui-color-text-disabled:color-mix(in srgb, var(--wui-color-text) 38%, transparent);--wui-color-state-layer-hover:color-mix(in srgb, var(--wui-color-text) 6%, transparent);--wui-color-state-layer-active:color-mix(in srgb, var(--wui-color-text) 15%, transparent);--wui-color-border:#ffffff24;--wui-color-glass-highlight:#ffffff1a;--wui-color-glass-ring:#ffffff0d;--wui-color-glass-ring-sheen:#fff3;--wui-color-glass-ring-shade:#00000080;--wui-glass-brightness:1.02;--wui-color-accent:#0a84ff;--wui-color-on-accent:#fff;--wui-color-on-control:#f2f2f7;--wui-color-success:#30d158;--wui-color-warning:#ff9f0a;--wui-color-danger:#ff453a;--wui-color-info:#64d2ff;--wui-color-backdrop:#0000007a;--wui-shadow-overlay:0 18px 48px #0000007a;--wui-shadow-panel:0 4px 16px #00000052;--wui-shadow-glass:0 8px 24px #00000014;--wui-color-focus-ring:color-mix(in srgb, var(--wui-color-accent,#0a84ff) 62%, transparent);--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:dark){:host([appearance=system]){--wui-color-page:#242628;--wui-color-surface:#2c2c2e;--wui-color-surface-raised:#2c2c2e;--wui-color-surface-control:#3a3a3c;--wui-color-surface-track:#444446;--wui-color-surface-menu:#313032bd;--wui-color-surface-glass:#2c2c2e6b;--wui-color-surface-glass-hover:color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));--wui-color-surface-glass-active:color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));--wui-color-surface-overlay:#202222eb;--wui-color-surface-sidebar:#2c2c2ecc;--wui-color-surface-segmented:#3a3a3c;--wui-color-surface-selected:#5c5c5e;--wui-color-text:#e9eaea;--wui-color-text-secondary:#a1a1a6;--wui-color-text-tertiary:color-mix(in srgb, var(--wui-color-text) 42%, transparent);--wui-color-text-disabled:color-mix(in srgb, var(--wui-color-text) 38%, transparent);--wui-color-state-layer-hover:color-mix(in srgb, var(--wui-color-text) 6%, transparent);--wui-color-state-layer-active:color-mix(in srgb, var(--wui-color-text) 15%, transparent);--wui-color-border:#ffffff24;--wui-color-glass-highlight:#ffffff1a;--wui-color-glass-ring:#ffffff0d;--wui-color-glass-ring-sheen:#fff3;--wui-color-glass-ring-shade:#00000080;--wui-glass-brightness:1.02;--wui-color-accent:#0a84ff;--wui-color-on-accent:#fff;--wui-color-on-control:#f2f2f7;--wui-color-success:#30d158;--wui-color-warning:#ff9f0a;--wui-color-danger:#ff453a;--wui-color-info:#64d2ff;--wui-color-backdrop:#0000007a;--wui-shadow-overlay:0 18px 48px #0000007a;--wui-shadow-panel:0 4px 16px #00000052;--wui-shadow-glass:0 8px 24px #00000014;--wui-color-focus-ring:color-mix(in srgb, var(--wui-color-accent,#0a84ff) 62%, transparent);--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/theme/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n /*\n * 排版族：按角色命名，不引入数字阶（与 §6.3 的 radius 决策同构——名字回答\n * 「这块文字是什么」，不回答「它是第几号」）。\n *\n * 字号四档，各自对应一个真实角色而非尺寸偏好：\n * caption 12px 密集 chrome 标签（badge、toast 时间戳、menu 分组头）\n * readout 13px 数字读数（image-preview 计数与缩放比，带 tabular-nums；\n * 13px 是承重的——它要装进 min-width:48px 的胶囊）\n * 14px 正文基准，即下面的 --wui-font-size\n * title 18px 有界卡片标题（dialog、drawer）\n *\n * 行高同理分四档。组件里的 line-height:1 与 0 刻意不 token 化：前者是控件内\n * 单行标签的垂直居中手段，后者是让包裹盒高收缩到内容的技巧，两者都不是\n * 排版行高，token 化会误导后来者以为可以整体调它们。\n */\n --wui-font-size-caption: 12px;\n --wui-font-size-readout: 13px;\n --wui-font-size: 14px;\n --wui-font-size-title: 18px;\n --wui-font-weight-medium: 500;\n --wui-font-weight-semibold: 600;\n --wui-line-height-tight: 1.2;\n --wui-line-height-snug: 1.4;\n --wui-line-height-normal: 1.5;\n --wui-line-height-relaxed: 1.6;\n\n /*\n * 间距阶：4px 基准的 6 级，止于组件层以生效的静态节奏字面量写入的最大值 24px（唯一更宽的\n * empty padding 由 --wui-empty-size 在 JS 侧派生，属尺寸那根轴）。它不替代组件的\n * 局部覆盖 token（--wui-button-px、--wui-dialog-padding 等），而是充当那些\n * token 的 fallback 默认值——组件继续决定「我的 padding 是多少」，本族提供\n * 「这个值在整套尺度里的位置」，嵌入方因此拿到一个全局密度杠杆。\n *\n * 本族刻意不含 1px / 2px / 6px / 7.5px / 10px 与负值。1px 是发丝线与描边环的\n * 结构宽度；2px、6px、7.5px 是光学修正；10px 是 4px 阶之外的半档耦合值；负\n * margin 用来抵消 flex gap 或按钮 padding。它们都是「为什么是这个数」各自独立\n * 的答案，不共享「间距」语义，收进同一把尺子只会让覆盖其中之一时误伤其余。\n */\n --wui-space-1: 4px;\n --wui-space-2: 8px;\n --wui-space-3: 12px;\n --wui-space-4: 16px;\n --wui-space-5: 20px;\n --wui-space-6: 24px;\n\n --wui-input-width: 200px;\n --wui-control-size: 36px;\n --wui-overlay-min-width: 200px;\n\n /* radio / checkbox 指示器尺寸。宿主高度由内容撑开，不继承页面行高。 */\n --wui-selection-control-size: 18px;\n\n /* radio-group / checkbox-group 成员间距，两个 group 各自可覆盖。 */\n --wui-radio-group-gap: var(--wui-space-2);\n --wui-checkbox-group-gap: var(--wui-space-2);\n\n --wui-layer-inline-overlay: 1;\n --wui-layer-header: 10;\n --wui-layer-auxiliary: 20;\n --wui-layer-banner: 30;\n --wui-layer-tabbar: 40;\n --wui-layer-sidebar: 50;\n\n --wui-layer-menu: 100;\n --wui-layer-menu-nested: 110;\n --wui-layer-toast: 200;\n --wui-layer-loading: 300;\n --wui-duration-press: 80ms;\n --wui-duration-feedback: 100ms;\n --wui-duration-trigger: 160ms;\n --wui-duration-focus: 200ms;\n\n /* 锚定浮动面板（menu/popover/select/dropdown/tooltip/autocomplete）的进场与退场时长，\n 出场快于入场。 */\n --wui-duration-float-enter: 240ms;\n --wui-duration-float-exit: 160ms;\n --wui-duration-dialog-enter: 320ms;\n --wui-duration-dialog-exit: 260ms;\n --wui-duration-drawer-enter: 280ms;\n --wui-duration-drawer-exit: 240ms;\n --wui-duration-drawer-nested: 450ms;\n --wui-duration-toast-enter: 280ms;\n --wui-duration-toast-exit: 200ms;\n --wui-duration-collapse-enter: 200ms;\n --wui-duration-collapse-exit: 160ms;\n --wui-duration-layout: 200ms;\n\n /* image-preview 轮播回位：跟手结束后把轨道过渡到目标位。不属于进出场族，故单独成 token。 */\n --wui-duration-swipe-settle: 220ms;\n\n /* 无限循环的加载指示：icon 旋转与 spinner 叶片追光。周期属于动画自身而非转场，\n 但同样受 motion 契约约束，reduce 下只放慢不停。 */\n --wui-duration-spin: 600ms;\n --wui-duration-spinner: 800ms;\n --wui-theme-transition-duration: 500ms;\n --wui-theme-transition-easing: ease-in;\n\n --wui-ease-enter: cubic-bezier(0.23, 1, 0.32, 1);\n --wui-ease-dialog: cubic-bezier(0.2, 0, 0, 1);\n --wui-ease-slide: cubic-bezier(0.77, 0, 0.175, 1);\n\n /* 轮播回位的缓动：起步快、末段极慢，与 --wui-ease-slide（整卡位移）区分开。 */\n --wui-ease-swipe: cubic-bezier(0.32, 0.72, 0, 1);\n\n /* 锚定浮动面板专属进场缓动，无回弹弹簧拟合曲线。若改用 --wui-ease-enter，\n 开局 30% 的时间就走完 85% 进度，观感是先弹出再落位。 */\n --wui-ease-float: cubic-bezier(0.4, 0.38, 0.2, 1);\n\n /* 进场缩放起点。两族方向相反，各自成 token：浮动面板与 image-preview 由小到大展开\n （0.95 → 1），dialog 由大到小收缩（1.1 → 1，退场反向）。\n 方向由承载层决定。image-preview 是满视口表面，起点 >1 会把贴边的 counter/close/\n toolbar 推出视口并裁掉图片四边，只能留在 <1 的档位。dialog 是有界卡片，起点须低于\n 零越界上限 1/0.9 ≈ 1.111（min(90vw, --wui-dialog-width) 两分支在 400px 视口汇合）；\n 1.1 在任意视口都不越界。曾用 1.2，窄视口会短暂越界（约 57ms、卡片不透明度 ≤44.4%，\n 分析见 ADR-0006），260919 下调。 */\n --wui-scale-enter: 0.95;\n --wui-dialog-scale-enter: 1.1;\n --wui-focus-ring-width: 3px;\n\n /* control=胶囊控件、menu=浮动菜单面板、overlay=大型覆盖层卡片 */\n --wui-radius-control: calc(infinity * 1px);\n --wui-radius-menu: 18px;\n --wui-radius-overlay: 28px;\n\n /* contents：主题宿主不生成盒、不绘制页面背景，嵌入方保留对宿主背景的完全控制\n （组件库不在宿主页面画背景）。自定义属性仍沿 DOM 树正常继承到 slotted 内容。 */\n display: contents;\n}\n\n:host([motion='reduced']) {\n --wui-duration-press: 0ms;\n --wui-duration-feedback: 0ms;\n --wui-duration-trigger: 0ms;\n --wui-duration-focus: 0ms;\n --wui-duration-float-enter: 0ms;\n --wui-duration-float-exit: 0ms;\n --wui-duration-dialog-enter: 0ms;\n --wui-duration-dialog-exit: 0ms;\n --wui-duration-drawer-enter: 0ms;\n --wui-duration-drawer-exit: 0ms;\n --wui-duration-drawer-nested: 0ms;\n --wui-duration-toast-enter: 0ms;\n --wui-duration-toast-exit: 0ms;\n --wui-duration-collapse-enter: 0ms;\n --wui-duration-collapse-exit: 0ms;\n --wui-duration-layout: 0ms;\n --wui-duration-swipe-settle: 0ms;\n --wui-theme-transition-duration: 0ms;\n\n /* 加载循环不在 reduce 下归零：它是「正在进行」的唯一信号，停掉会被读成界面卡死，只放慢。 */\n --wui-duration-spin: 1600ms;\n --wui-duration-spinner: 1600ms;\n\n --wui-scale-enter: 1;\n --wui-dialog-scale-enter: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host([motion='system']) {\n --wui-duration-press: 0ms;\n --wui-duration-feedback: 0ms;\n --wui-duration-trigger: 0ms;\n --wui-duration-focus: 0ms;\n --wui-duration-float-enter: 0ms;\n --wui-duration-float-exit: 0ms;\n --wui-duration-dialog-enter: 0ms;\n --wui-duration-dialog-exit: 0ms;\n --wui-duration-drawer-enter: 0ms;\n --wui-duration-drawer-exit: 0ms;\n --wui-duration-drawer-nested: 0ms;\n --wui-duration-toast-enter: 0ms;\n --wui-duration-toast-exit: 0ms;\n --wui-duration-collapse-enter: 0ms;\n --wui-duration-collapse-exit: 0ms;\n --wui-duration-layout: 0ms;\n --wui-duration-swipe-settle: 0ms;\n --wui-theme-transition-duration: 0ms;\n\n /* 加载循环不在 reduce 下归零：它是「正在进行」的唯一信号，停掉会被读成界面卡死，只放慢。 */\n --wui-duration-spin: 1600ms;\n --wui-duration-spinner: 1600ms;\n\n --wui-scale-enter: 1;\n --wui-dialog-scale-enter: 1;\n }\n}\n\n:host([appearance='light']),\n:host([appearance='system']) {\n --wui-color-page: #fff;\n --wui-color-surface: #fff;\n --wui-color-surface-raised: #f2f2f7;\n --wui-color-surface-control: #dfdfdf;\n --wui-color-surface-track: #e5e5ea;\n --wui-color-surface-menu: rgb(250 250 250 / 0.76);\n --wui-color-surface-glass: rgb(250 250 250 / 0.34);\n --wui-color-surface-glass-hover: color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));\n --wui-color-surface-glass-active: color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));\n --wui-color-surface-overlay: rgb(248 248 248 / 0.92);\n\n /* 侧边栏专用表面：浅色保持中性分层，深色单独抬升一档（见下方 dark 块注释）。 */\n --wui-color-surface-sidebar: rgb(233 233 233 / 0.82);\n --wui-color-surface-segmented: #e5e5ea;\n --wui-color-surface-selected: #fff;\n --wui-color-text: #1b1b1b;\n --wui-color-text-secondary: #6a6a6a;\n --wui-color-text-tertiary: color-mix(in srgb, var(--wui-color-text) 35%, transparent);\n --wui-color-text-disabled: color-mix(in srgb, var(--wui-color-text) 32%, transparent);\n --wui-color-state-layer-hover: color-mix(in srgb, var(--wui-color-text) 6%, transparent);\n --wui-color-state-layer-active: color-mix(in srgb, var(--wui-color-text) 15%, transparent);\n --wui-color-border: rgb(0 0 0 / 0.1);\n\n /*\n * 玻璃色按「绘制在哪一层」分组，两个前缀对应两个互不相干的层：\n *\n * glass-highlight → 元素自身的 box-shadow inset 高光（不是描边环的一部分）\n * glass-ring-* → ::before 用 mask 挖出来的 1px 描边环，共三枚：\n * ring 是铺满整圈的底色，ring-sheen / ring-shade 是其上\n * 两枚对角 radial，只覆盖四个角\n *\n * 底色必须存在：四枚 radial 都锚在角点且半径固定（sheen 2R、shade R），一条边\n * 长过约 3R 就有一段落在所有 radial 之外，只靠 radial 时那段会整段消失。\n */\n --wui-color-glass-highlight: rgb(255 255 255 / 0.9);\n --wui-color-glass-ring: rgb(0 0 0 / 0.05);\n --wui-color-glass-ring-sheen: rgb(255 255 255 / 0.5);\n --wui-color-glass-ring-shade: rgb(0 0 0 / 0.03);\n --wui-glass-brightness: 1.06;\n --wui-color-accent: #08f;\n --wui-color-on-accent: #fff;\n --wui-color-on-control: #fff;\n --wui-color-success: #16a34a;\n --wui-color-warning: #d97706;\n --wui-color-danger: #dc2626;\n --wui-color-info: #2563eb;\n --wui-color-backdrop: rgb(0 0 0 / 0.12);\n --wui-shadow-overlay: 2px 16px 40px rgb(0 0 0 / 0.4);\n --wui-shadow-panel: 0 3px 9px rgb(0 0 0 / 0.27);\n --wui-shadow-glass:\n 0 0 1px rgb(0 0 0 / 0.02), 0 0 8px rgb(0 0 0 / 0.03), 0 2px 16px rgb(0 0 0 / 0.025), 0 8px 32px rgb(0 0 0 / 0.015);\n --wui-color-focus-ring: color-mix(in srgb, var(--wui-color-accent, #08f) 40%, transparent);\n color-scheme: light;\n}\n\n:host([appearance='dark']) {\n --wui-color-page: #242628;\n --wui-color-surface: #2c2c2e;\n --wui-color-surface-raised: #2c2c2e;\n --wui-color-surface-control: #3a3a3c;\n --wui-color-surface-track: #444446;\n --wui-color-surface-menu: rgb(49 48 50 / 0.74);\n --wui-color-surface-glass: rgb(44 44 46 / 0.42);\n --wui-color-surface-glass-hover: color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));\n --wui-color-surface-glass-active: color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));\n --wui-color-surface-overlay: rgb(32 34 34 / 0.92);\n\n /* 深色 elevation：浮动面板与侧边栏都比 page 浅一档。取 --wui-color-surface\n （#2c2c2e）作为「page 之上一档」的基准色，面板按自身 alpha 叠在 page 上，\n 合成结果约 rgb(46 45 47)，与 #2c2c2e 相差不超过 2/255。\n alpha 低于早期的 0.92/0.9：颜色抬升后高 alpha 会让面板读成实心纸片，\n 降到 0.74/0.8 恢复旧版的透感（模糊底内容可透出），层级方向不变。\n overlay 是唯一的例外：dialog/drawer/toast 背后的内容是被遮住的主体内容，\n 透过去会与浮层自身文字叠出干扰读的对比，因此单独抬到 0.92 换取可读性，\n 代价是失去透感——它本来也不属于「面板透出 page」的层级语义。 */\n --wui-color-surface-sidebar: rgb(44 44 46 / 0.8);\n --wui-color-surface-segmented: #3a3a3c;\n --wui-color-surface-selected: #5c5c5e;\n --wui-color-text: #e9eaea;\n --wui-color-text-secondary: #a1a1a6;\n --wui-color-text-tertiary: color-mix(in srgb, var(--wui-color-text) 42%, transparent);\n --wui-color-text-disabled: color-mix(in srgb, var(--wui-color-text) 38%, transparent);\n --wui-color-state-layer-hover: color-mix(in srgb, var(--wui-color-text) 6%, transparent);\n --wui-color-state-layer-active: color-mix(in srgb, var(--wui-color-text) 15%, transparent);\n --wui-color-border: rgb(255 255 255 / 0.14);\n --wui-color-glass-highlight: rgb(255 255 255 / 0.1);\n --wui-color-glass-ring: rgb(255 255 255 / 0.05);\n --wui-color-glass-ring-sheen: rgb(255 255 255 / 0.2);\n --wui-color-glass-ring-shade: rgb(0 0 0 / 0.5);\n --wui-glass-brightness: 1.02;\n --wui-color-accent: #0a84ff;\n --wui-color-on-accent: #fff;\n --wui-color-on-control: #f2f2f7;\n --wui-color-success: #30d158;\n --wui-color-warning: #ff9f0a;\n --wui-color-danger: #ff453a;\n --wui-color-info: #64d2ff;\n --wui-color-backdrop: rgb(0 0 0 / 0.48);\n --wui-shadow-overlay: 0 18px 48px rgb(0 0 0 / 0.48);\n --wui-shadow-panel: 0 4px 16px rgb(0 0 0 / 0.32);\n --wui-shadow-glass: 0 8px 24px rgb(0 0 0 / 0.08);\n --wui-color-focus-ring: color-mix(in srgb, var(--wui-color-accent, #0a84ff) 62%, transparent);\n color-scheme: dark;\n}\n\n@media (prefers-color-scheme: dark) {\n :host([appearance='system']) {\n --wui-color-page: #242628;\n --wui-color-surface: #2c2c2e;\n --wui-color-surface-raised: #2c2c2e;\n --wui-color-surface-control: #3a3a3c;\n --wui-color-surface-track: #444446;\n --wui-color-surface-menu: rgb(49 48 50 / 0.74);\n --wui-color-surface-glass: rgb(44 44 46 / 0.42);\n --wui-color-surface-glass-hover: color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));\n --wui-color-surface-glass-active: color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));\n --wui-color-surface-overlay: rgb(32 34 34 / 0.92);\n --wui-color-surface-sidebar: rgb(44 44 46 / 0.8);\n --wui-color-surface-segmented: #3a3a3c;\n --wui-color-surface-selected: #5c5c5e;\n --wui-color-text: #e9eaea;\n --wui-color-text-secondary: #a1a1a6;\n --wui-color-text-tertiary: color-mix(in srgb, var(--wui-color-text) 42%, transparent);\n --wui-color-text-disabled: color-mix(in srgb, var(--wui-color-text) 38%, transparent);\n --wui-color-state-layer-hover: color-mix(in srgb, var(--wui-color-text) 6%, transparent);\n --wui-color-state-layer-active: color-mix(in srgb, var(--wui-color-text) 15%, transparent);\n --wui-color-border: rgb(255 255 255 / 0.14);\n --wui-color-glass-highlight: rgb(255 255 255 / 0.1);\n --wui-color-glass-ring: rgb(255 255 255 / 0.05);\n --wui-color-glass-ring-sheen: rgb(255 255 255 / 0.2);\n --wui-color-glass-ring-shade: rgb(0 0 0 / 0.5);\n --wui-glass-brightness: 1.02;\n --wui-color-accent: #0a84ff;\n --wui-color-on-accent: #fff;\n --wui-color-on-control: #f2f2f7;\n --wui-color-success: #30d158;\n --wui-color-warning: #ff9f0a;\n --wui-color-danger: #ff453a;\n --wui-color-info: #64d2ff;\n --wui-color-backdrop: rgb(0 0 0 / 0.48);\n --wui-shadow-overlay: 0 18px 48px rgb(0 0 0 / 0.48);\n --wui-shadow-panel: 0 4px 16px rgb(0 0 0 / 0.32);\n --wui-shadow-glass: 0 8px 24px rgb(0 0 0 / 0.08);\n --wui-color-focus-ring: color-mix(in srgb, var(--wui-color-accent, #0a84ff) 62%, transparent);\n color-scheme: dark;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/theme/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n /*\n * 排版族：按角色命名，不引入数字阶（与 §6.3 的 radius 决策同构——名字回答\n * 「这块文字是什么」，不回答「它是第几号」）。\n *\n * 字号四档，各自对应一个真实角色而非尺寸偏好：\n * caption 12px 密集 chrome 标签（badge、toast 时间戳、menu 分组头）\n * readout 13px 数字读数（image-preview 计数与缩放比，带 tabular-nums；\n * 13px 是承重的——它要装进 min-width:48px 的胶囊）\n * 14px 正文基准，即下面的 --wui-font-size\n * title 18px 有界卡片标题（dialog、drawer）\n *\n * 行高同理分四档。组件里的 line-height:1 与 0 刻意不 token 化：前者是控件内\n * 单行标签的垂直居中手段，后者是让包裹盒高收缩到内容的技巧，两者都不是\n * 排版行高，token 化会误导后来者以为可以整体调它们。\n */\n --wui-font-size-caption: 12px;\n --wui-font-size-readout: 13px;\n --wui-font-size: 14px;\n --wui-font-size-title: 18px;\n --wui-font-weight-medium: 500;\n --wui-font-weight-semibold: 600;\n --wui-line-height-tight: 1.2;\n --wui-line-height-snug: 1.4;\n --wui-line-height-normal: 1.5;\n --wui-line-height-relaxed: 1.6;\n\n /*\n * 间距阶：4px 基准的 6 级，止于组件层以生效的静态节奏字面量写入的最大值 24px（唯一更宽的\n * empty padding 由 --wui-empty-size 在 JS 侧派生，属尺寸那根轴）。它不替代组件的\n * 局部覆盖 token（--wui-button-px、--wui-dialog-padding 等），而是充当那些\n * token 的 fallback 默认值——组件继续决定「我的 padding 是多少」，本族提供\n * 「这个值在整套尺度里的位置」，嵌入方因此拿到一个全局密度杠杆。\n *\n * 本族刻意不含 1px / 2px / 6px / 7.5px / 10px 与负值。1px 是发丝线与描边环的\n * 结构宽度；2px、6px、7.5px 是光学修正；10px 是 4px 阶之外的半档耦合值；负\n * margin 用来抵消 flex gap 或按钮 padding。它们都是「为什么是这个数」各自独立\n * 的答案，不共享「间距」语义，收进同一把尺子只会让覆盖其中之一时误伤其余。\n */\n --wui-space-1: 4px;\n --wui-space-2: 8px;\n --wui-space-3: 12px;\n --wui-space-4: 16px;\n --wui-space-5: 20px;\n --wui-space-6: 24px;\n\n --wui-input-width: 200px;\n --wui-control-size: 36px;\n --wui-overlay-min-width: 200px;\n\n /* radio / checkbox 指示器尺寸。宿主高度由内容撑开，不继承页面行高。 */\n --wui-selection-control-size: 18px;\n\n /* radio-group / checkbox-group 成员间距，两个 group 各自可覆盖。 */\n --wui-radio-group-gap: var(--wui-space-2);\n --wui-checkbox-group-gap: var(--wui-space-2);\n\n --wui-layer-inline-overlay: 1;\n --wui-layer-header: 10;\n --wui-layer-auxiliary: 20;\n --wui-layer-banner: 30;\n --wui-layer-tabbar: 40;\n --wui-layer-sidebar: 50;\n\n --wui-layer-menu: 100;\n --wui-layer-menu-nested: 110;\n --wui-layer-toast: 200;\n --wui-layer-loading: 300;\n --wui-duration-press: 80ms;\n --wui-duration-feedback: 100ms;\n --wui-duration-trigger: 160ms;\n --wui-duration-focus: 200ms;\n\n /* 锚定浮动面板（menu/popover/select/dropdown/tooltip/autocomplete）的进场与退场时长，\n 出场快于入场。 */\n --wui-duration-float-enter: 240ms;\n --wui-duration-float-exit: 160ms;\n --wui-duration-dialog-enter: 320ms;\n --wui-duration-dialog-exit: 260ms;\n --wui-duration-drawer-enter: 280ms;\n --wui-duration-drawer-exit: 240ms;\n --wui-duration-drawer-nested: 450ms;\n --wui-duration-toast-enter: 280ms;\n --wui-duration-toast-exit: 200ms;\n --wui-duration-collapse-enter: 200ms;\n --wui-duration-collapse-exit: 160ms;\n --wui-duration-layout: 200ms;\n\n /* image-preview 轮播回位：跟手结束后把轨道过渡到目标位。不属于进出场族，故单独成 token。 */\n --wui-duration-swipe-settle: 220ms;\n\n /* 无限循环的加载指示：icon 旋转与 spinner 叶片追光。周期属于动画自身而非转场，\n 但同样受 motion 契约约束，reduce 下只放慢不停。 */\n --wui-duration-spin: 600ms;\n --wui-duration-spinner: 800ms;\n --wui-theme-transition-duration: 500ms;\n --wui-theme-transition-easing: ease-in;\n\n --wui-ease-enter: cubic-bezier(0.23, 1, 0.32, 1);\n --wui-ease-dialog: cubic-bezier(0.2, 0, 0, 1);\n --wui-ease-slide: cubic-bezier(0.77, 0, 0.175, 1);\n\n /* 轮播回位的缓动：起步快、末段极慢，与 --wui-ease-slide（整卡位移）区分开。 */\n --wui-ease-swipe: cubic-bezier(0.32, 0.72, 0, 1);\n\n /* 锚定浮动面板专属进场缓动，无回弹弹簧拟合曲线。若改用 --wui-ease-enter，\n 开局 30% 的时间就走完 85% 进度，观感是先弹出再落位。 */\n --wui-ease-float: cubic-bezier(0.4, 0.38, 0.2, 1);\n\n /* 进场缩放起点。两族方向相反，各自成 token：浮动面板与 image-preview 由小到大展开\n （0.9 → 1），dialog 由大到小收缩（1.1 → 1，退场反向）。\n 方向由承载层决定。image-preview 是满视口表面，起点 >1 会把贴边的 counter/close/\n toolbar 推出视口并裁掉图片四边，只能留在 <1 的档位。dialog 是有界卡片，起点须低于\n 零越界上限 1/0.9 ≈ 1.111（min(90vw, --wui-dialog-width) 两分支在 400px 视口汇合）；\n 1.1 在任意视口都不越界。曾用 1.2，窄视口会短暂越界（约 57ms、卡片不透明度 ≤44.4%，\n 分析见 ADR-0006），260919 下调。 */\n --wui-scale-enter: 0.9;\n --wui-dialog-scale-enter: 1.1;\n --wui-focus-ring-width: 3px;\n\n /* control=胶囊控件、menu=浮动菜单面板、overlay=大型覆盖层卡片 */\n --wui-radius-control: calc(infinity * 1px);\n --wui-radius-menu: 18px;\n --wui-radius-overlay: 28px;\n\n /* contents：主题宿主不生成盒、不绘制页面背景，嵌入方保留对宿主背景的完全控制\n （组件库不在宿主页面画背景）。自定义属性仍沿 DOM 树正常继承到 slotted 内容。 */\n display: contents;\n}\n\n:host([motion='reduced']) {\n --wui-duration-press: 0ms;\n --wui-duration-feedback: 0ms;\n --wui-duration-trigger: 0ms;\n --wui-duration-focus: 0ms;\n --wui-duration-float-enter: 0ms;\n --wui-duration-float-exit: 0ms;\n --wui-duration-dialog-enter: 0ms;\n --wui-duration-dialog-exit: 0ms;\n --wui-duration-drawer-enter: 0ms;\n --wui-duration-drawer-exit: 0ms;\n --wui-duration-drawer-nested: 0ms;\n --wui-duration-toast-enter: 0ms;\n --wui-duration-toast-exit: 0ms;\n --wui-duration-collapse-enter: 0ms;\n --wui-duration-collapse-exit: 0ms;\n --wui-duration-layout: 0ms;\n --wui-duration-swipe-settle: 0ms;\n --wui-theme-transition-duration: 0ms;\n\n /* 加载循环不在 reduce 下归零：它是「正在进行」的唯一信号，停掉会被读成界面卡死，只放慢。 */\n --wui-duration-spin: 1600ms;\n --wui-duration-spinner: 1600ms;\n\n --wui-scale-enter: 1;\n --wui-dialog-scale-enter: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host([motion='system']) {\n --wui-duration-press: 0ms;\n --wui-duration-feedback: 0ms;\n --wui-duration-trigger: 0ms;\n --wui-duration-focus: 0ms;\n --wui-duration-float-enter: 0ms;\n --wui-duration-float-exit: 0ms;\n --wui-duration-dialog-enter: 0ms;\n --wui-duration-dialog-exit: 0ms;\n --wui-duration-drawer-enter: 0ms;\n --wui-duration-drawer-exit: 0ms;\n --wui-duration-drawer-nested: 0ms;\n --wui-duration-toast-enter: 0ms;\n --wui-duration-toast-exit: 0ms;\n --wui-duration-collapse-enter: 0ms;\n --wui-duration-collapse-exit: 0ms;\n --wui-duration-layout: 0ms;\n --wui-duration-swipe-settle: 0ms;\n --wui-theme-transition-duration: 0ms;\n\n /* 加载循环不在 reduce 下归零：它是「正在进行」的唯一信号，停掉会被读成界面卡死，只放慢。 */\n --wui-duration-spin: 1600ms;\n --wui-duration-spinner: 1600ms;\n\n --wui-scale-enter: 1;\n --wui-dialog-scale-enter: 1;\n }\n}\n\n:host([appearance='light']),\n:host([appearance='system']) {\n --wui-color-page: #fff;\n --wui-color-surface: #fff;\n --wui-color-surface-raised: #f2f2f7;\n --wui-color-surface-control: #dfdfdf;\n --wui-color-surface-track: #e5e5ea;\n --wui-color-surface-menu: rgb(250 250 250 / 0.76);\n --wui-color-surface-glass: rgb(250 250 250 / 0.34);\n --wui-color-surface-glass-hover: color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));\n --wui-color-surface-glass-active: color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));\n --wui-color-surface-overlay: rgb(248 248 248 / 0.92);\n\n /* 侧边栏专用表面：浅色保持中性分层，深色单独抬升一档（见下方 dark 块注释）。 */\n --wui-color-surface-sidebar: rgb(233 233 233 / 0.82);\n --wui-color-surface-segmented: #e5e5ea;\n --wui-color-surface-selected: #fff;\n --wui-color-text: #1b1b1b;\n --wui-color-text-secondary: #6a6a6a;\n --wui-color-text-tertiary: color-mix(in srgb, var(--wui-color-text) 35%, transparent);\n --wui-color-text-disabled: color-mix(in srgb, var(--wui-color-text) 32%, transparent);\n --wui-color-state-layer-hover: color-mix(in srgb, var(--wui-color-text) 6%, transparent);\n --wui-color-state-layer-active: color-mix(in srgb, var(--wui-color-text) 15%, transparent);\n --wui-color-border: rgb(0 0 0 / 0.1);\n\n /*\n * 玻璃色按「绘制在哪一层」分组，两个前缀对应两个互不相干的层：\n *\n * glass-highlight → 元素自身的 box-shadow inset 高光（不是描边环的一部分）\n * glass-ring-* → ::before 用 mask 挖出来的 1px 描边环，共三枚：\n * ring 是铺满整圈的底色，ring-sheen / ring-shade 是其上\n * 两枚对角 radial，只覆盖四个角\n *\n * 底色必须存在：四枚 radial 都锚在角点且半径固定（sheen 2R、shade R），一条边\n * 长过约 3R 就有一段落在所有 radial 之外，只靠 radial 时那段会整段消失。\n */\n --wui-color-glass-highlight: rgb(255 255 255 / 0.9);\n --wui-color-glass-ring: rgb(0 0 0 / 0.05);\n --wui-color-glass-ring-sheen: rgb(255 255 255 / 0.5);\n --wui-color-glass-ring-shade: rgb(0 0 0 / 0.03);\n --wui-glass-brightness: 1.06;\n --wui-color-accent: #08f;\n --wui-color-on-accent: #fff;\n --wui-color-on-control: #fff;\n --wui-color-success: #16a34a;\n --wui-color-warning: #d97706;\n --wui-color-danger: #dc2626;\n --wui-color-info: #2563eb;\n --wui-color-backdrop: rgb(0 0 0 / 0.12);\n --wui-shadow-overlay: 2px 16px 40px rgb(0 0 0 / 0.4);\n --wui-shadow-panel: 0 3px 9px rgb(0 0 0 / 0.27);\n --wui-shadow-glass:\n 0 0 1px rgb(0 0 0 / 0.02), 0 0 8px rgb(0 0 0 / 0.03), 0 2px 16px rgb(0 0 0 / 0.025), 0 8px 32px rgb(0 0 0 / 0.015);\n --wui-color-focus-ring: color-mix(in srgb, var(--wui-color-accent, #08f) 40%, transparent);\n color-scheme: light;\n}\n\n:host([appearance='dark']) {\n --wui-color-page: #242628;\n --wui-color-surface: #2c2c2e;\n --wui-color-surface-raised: #2c2c2e;\n --wui-color-surface-control: #3a3a3c;\n --wui-color-surface-track: #444446;\n --wui-color-surface-menu: rgb(49 48 50 / 0.74);\n --wui-color-surface-glass: rgb(44 44 46 / 0.42);\n --wui-color-surface-glass-hover: color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));\n --wui-color-surface-glass-active: color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));\n --wui-color-surface-overlay: rgb(32 34 34 / 0.92);\n\n /* 深色 elevation：浮动面板与侧边栏都比 page 浅一档。取 --wui-color-surface\n （#2c2c2e）作为「page 之上一档」的基准色，面板按自身 alpha 叠在 page 上，\n 合成结果约 rgb(46 45 47)，与 #2c2c2e 相差不超过 2/255。\n alpha 低于早期的 0.92/0.9：颜色抬升后高 alpha 会让面板读成实心纸片，\n 降到 0.74/0.8 恢复旧版的透感（模糊底内容可透出），层级方向不变。\n overlay 是唯一的例外：dialog/drawer/toast 背后的内容是被遮住的主体内容，\n 透过去会与浮层自身文字叠出干扰读的对比，因此单独抬到 0.92 换取可读性，\n 代价是失去透感——它本来也不属于「面板透出 page」的层级语义。 */\n --wui-color-surface-sidebar: rgb(44 44 46 / 0.8);\n --wui-color-surface-segmented: #3a3a3c;\n --wui-color-surface-selected: #5c5c5e;\n --wui-color-text: #e9eaea;\n --wui-color-text-secondary: #a1a1a6;\n --wui-color-text-tertiary: color-mix(in srgb, var(--wui-color-text) 42%, transparent);\n --wui-color-text-disabled: color-mix(in srgb, var(--wui-color-text) 38%, transparent);\n --wui-color-state-layer-hover: color-mix(in srgb, var(--wui-color-text) 6%, transparent);\n --wui-color-state-layer-active: color-mix(in srgb, var(--wui-color-text) 15%, transparent);\n --wui-color-border: rgb(255 255 255 / 0.14);\n --wui-color-glass-highlight: rgb(255 255 255 / 0.1);\n --wui-color-glass-ring: rgb(255 255 255 / 0.05);\n --wui-color-glass-ring-sheen: rgb(255 255 255 / 0.2);\n --wui-color-glass-ring-shade: rgb(0 0 0 / 0.5);\n --wui-glass-brightness: 1.02;\n --wui-color-accent: #0a84ff;\n --wui-color-on-accent: #fff;\n --wui-color-on-control: #f2f2f7;\n --wui-color-success: #30d158;\n --wui-color-warning: #ff9f0a;\n --wui-color-danger: #ff453a;\n --wui-color-info: #64d2ff;\n --wui-color-backdrop: rgb(0 0 0 / 0.48);\n --wui-shadow-overlay: 0 18px 48px rgb(0 0 0 / 0.48);\n --wui-shadow-panel: 0 4px 16px rgb(0 0 0 / 0.32);\n --wui-shadow-glass: 0 8px 24px rgb(0 0 0 / 0.08);\n --wui-color-focus-ring: color-mix(in srgb, var(--wui-color-accent, #0a84ff) 62%, transparent);\n color-scheme: dark;\n}\n\n@media (prefers-color-scheme: dark) {\n :host([appearance='system']) {\n --wui-color-page: #242628;\n --wui-color-surface: #2c2c2e;\n --wui-color-surface-raised: #2c2c2e;\n --wui-color-surface-control: #3a3a3c;\n --wui-color-surface-track: #444446;\n --wui-color-surface-menu: rgb(49 48 50 / 0.74);\n --wui-color-surface-glass: rgb(44 44 46 / 0.42);\n --wui-color-surface-glass-hover: color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));\n --wui-color-surface-glass-active: color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));\n --wui-color-surface-overlay: rgb(32 34 34 / 0.92);\n --wui-color-surface-sidebar: rgb(44 44 46 / 0.8);\n --wui-color-surface-segmented: #3a3a3c;\n --wui-color-surface-selected: #5c5c5e;\n --wui-color-text: #e9eaea;\n --wui-color-text-secondary: #a1a1a6;\n --wui-color-text-tertiary: color-mix(in srgb, var(--wui-color-text) 42%, transparent);\n --wui-color-text-disabled: color-mix(in srgb, var(--wui-color-text) 38%, transparent);\n --wui-color-state-layer-hover: color-mix(in srgb, var(--wui-color-text) 6%, transparent);\n --wui-color-state-layer-active: color-mix(in srgb, var(--wui-color-text) 15%, transparent);\n --wui-color-border: rgb(255 255 255 / 0.14);\n --wui-color-glass-highlight: rgb(255 255 255 / 0.1);\n --wui-color-glass-ring: rgb(255 255 255 / 0.05);\n --wui-color-glass-ring-sheen: rgb(255 255 255 / 0.2);\n --wui-color-glass-ring-shade: rgb(0 0 0 / 0.5);\n --wui-glass-brightness: 1.02;\n --wui-color-accent: #0a84ff;\n --wui-color-on-accent: #fff;\n --wui-color-on-control: #f2f2f7;\n --wui-color-success: #30d158;\n --wui-color-warning: #ff9f0a;\n --wui-color-danger: #ff453a;\n --wui-color-info: #64d2ff;\n --wui-color-backdrop: rgb(0 0 0 / 0.48);\n --wui-shadow-overlay: 0 18px 48px rgb(0 0 0 / 0.48);\n --wui-shadow-panel: 0 4px 16px rgb(0 0 0 / 0.32);\n --wui-shadow-glass: 0 8px 24px rgb(0 0 0 / 0.08);\n --wui-color-focus-ring: color-mix(in srgb, var(--wui-color-accent, #0a84ff) 62%, transparent);\n color-scheme: dark;\n }\n}\n"],"mappings":""}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/toast/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{display:block}:host([hidden]){display:none}.toast{--wui-internal-glass-shadow:var(--wui-shadow-panel,0 3px 9px #00000045);--wui-glass-corner-radius:var(--wui-radius-menu,18px);transform:translate(var(--toast-slide-x,0), var(--toast-slide-y,-8px)) scale(var(--wui-scale-enter,.
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{display:block}:host([hidden]){display:none}.toast{--wui-internal-glass-shadow:var(--wui-shadow-panel,0 3px 9px #00000045);--wui-glass-corner-radius:var(--wui-radius-menu,18px);transform:translate(var(--toast-slide-x,0), var(--toast-slide-y,-8px)) scale(var(--wui-scale-enter,.9));gap:var(--wui-space-2,8px);width:min(320px, calc(100dvw - 2 * var(--wui-toast-viewport-gap,16px)));min-height:36px;padding:var(--wui-space-2,8px);border-radius:var(--wui-radius-menu,18px);font-size:var(--wui-font-size,14px);line-height:var(--wui-line-height-normal,1.5);color:var(--wui-color-text,#1b1b1b);opacity:0;background-color:var(--wui-color-surface-overlay,#f8f8f8eb);-webkit-backdrop-filter:blur(0) saturate(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(0) saturate(160%) brightness(var(--wui-glass-brightness,1.06));transition:opacity var(--wui-duration-toast-enter,.28s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), -webkit-backdrop-filter var(--wui-duration-toast-enter,.28s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), backdrop-filter var(--wui-duration-toast-enter,.28s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), transform var(--wui-duration-toast-enter,.28s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));display:flex;position:relative}:host([visible]) .toast{opacity:1;-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));transform:translate(0)scale(1)}:host(:not([visible])) .toast{transition-duration:var(--wui-duration-toast-exit,.2s)}web-ui-button.toast-close-btn{pointer-events:none;cursor:default;opacity:0;transition:opacity var(--wui-duration-trigger,.16s) ease;position:absolute;top:-8px;right:-8px}web-ui-button.toast-close-btn:focus-within{pointer-events:auto;opacity:1}@media (hover:hover) and (pointer:fine){web-ui-button.toast-close-btn:hover,.toast:hover web-ui-button.toast-close-btn{pointer-events:auto;opacity:1}}.toast web-ui-button[icon]{--wui-button-color:var(--wui-color-text-secondary,#6a6a6a)}.toast-icon{border-radius:var(--wui-radius-control,calc(infinity * 1px));flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;margin-bottom:auto;display:flex}.toast.success .toast-icon{color:var(--wui-color-success,#16a34a);background-color:color-mix(in srgb, var(--wui-color-success,#16a34a) 10%, transparent)}.toast.info .toast-icon{color:var(--wui-color-info,#2563eb);background-color:color-mix(in srgb, var(--wui-color-info,#2563eb) 10%, transparent)}.toast.warning .toast-icon{color:var(--wui-color-warning,#d97706);background-color:color-mix(in srgb, var(--wui-color-warning,#d97706) 10%, transparent)}.toast.error .toast-icon{color:var(--wui-color-danger,#dc2626);background-color:color-mix(in srgb, var(--wui-color-danger,#dc2626) 10%, transparent)}.toast-body{flex:1;min-width:0}.toast-heading{font-size:var(--wui-font-size,14px);font-weight:var(--wui-font-weight-semibold,600);line-height:var(--wui-line-height-snug,1.4);color:var(--wui-color-text,#1b1b1b);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.toast-message{-webkit-line-clamp:3;font-size:calc(var(--wui-font-size,14px) - 1px);line-height:var(--wui-line-height-snug,1.4);color:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 55%, transparent);word-break:break-all;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.toast-time{font-size:var(--wui-font-size-caption,12px);color:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 30%, transparent);white-space:nowrap}@media (prefers-reduced-motion:reduce){.toast,:host([visible]) .toast{transition-duration:var(--wui-duration-feedback,.1s);transform:none}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -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/* 单层玻璃：.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(var(--wui-scale-enter, 0.
|
|
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/* 单层玻璃：.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(var(--wui-scale-enter, 0.9));\n\n display: flex;\n gap: var(--wui-space-2, 8px);\n\n width: min(320px, calc(100dvw - 2 * var(--wui-toast-viewport-gap, 16px)));\n min-height: 36px;\n padding: var(--wui-space-2, 8px);\n border-radius: var(--wui-radius-menu, 18px);\n\n font-size: var(--wui-font-size, 14px);\n line-height: var(--wui-line-height-normal, 1.5);\n color: var(--wui-color-text, #1b1b1b);\n\n opacity: 0;\n background-color: var(--wui-color-surface-overlay, rgb(248 248 248 / 0.92));\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.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.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: var(--wui-font-weight-semibold, 600);\n line-height: var(--wui-line-height-snug, 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: var(--wui-line-height-snug, 1.4);\n color: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 55%, transparent);\n word-break: break-all;\n}\n\n.toast-time {\n font-size: var(--wui-font-size-caption, 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":""}
|