@greypan/web-ui 10.2.1 → 11.0.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 +68 -68
- package/README.md +43 -43
- package/dist/assets/glass.js.map +1 -1
- package/dist/assets/menu-portal.js.map +1 -1
- package/dist/assets/modal-surface.js.map +1 -1
- package/dist/assets/overlay-motion.js.map +1 -1
- package/dist/assets/selection-control.js.map +1 -1
- package/dist/components/autocomplete/index.d.ts +6 -6
- package/dist/components/autocomplete/index.js +1 -1
- package/dist/components/autocomplete/index.js.map +1 -1
- package/dist/components/autocomplete/style.js.map +1 -1
- package/dist/components/avatar/index.js.map +1 -1
- package/dist/components/back-top/index.js.map +1 -1
- package/dist/components/back-top/style.js.map +1 -1
- package/dist/components/badge/index.js +1 -1
- package/dist/components/badge/index.js.map +1 -1
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/button/style.js.map +1 -1
- package/dist/components/checkbox/index.d.ts +1 -1
- package/dist/components/checkbox/index.js +1 -1
- package/dist/components/checkbox/index.js.map +1 -1
- package/dist/components/checkbox/style.js.map +1 -1
- package/dist/components/checkbox-group/index.js +1 -1
- package/dist/components/checkbox-group/index.js.map +1 -1
- package/dist/components/collapse/index.d.ts +5 -5
- package/dist/components/collapse/index.js.map +1 -1
- package/dist/components/collapse/style.js.map +1 -1
- package/dist/components/context-menu/index.d.ts +60 -60
- package/dist/components/context-menu/index.js +2 -2
- package/dist/components/context-menu/index.js.map +1 -1
- package/dist/components/context-menu/scrim.js.map +1 -1
- package/dist/components/context-menu/style.js.map +1 -1
- package/dist/components/dialog/index.d.ts +4 -4
- package/dist/components/dialog/index.js +1 -1
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/dialog/style.js.map +1 -1
- package/dist/components/drawer/index.d.ts +8 -8
- package/dist/components/drawer/index.js +1 -1
- package/dist/components/drawer/index.js.map +1 -1
- package/dist/components/drawer/style.js.map +1 -1
- package/dist/components/dropdown/index.d.ts +6 -6
- package/dist/components/dropdown/index.js.map +1 -1
- package/dist/components/dropdown-item/index.js.map +1 -1
- package/dist/components/editable-text/index.d.ts +2 -2
- package/dist/components/editable-text/index.js.map +1 -1
- package/dist/components/editable-text/style.js.map +1 -1
- package/dist/components/empty/index.d.ts +3 -3
- package/dist/components/empty/index.js.map +1 -1
- package/dist/components/image-preview/index.d.ts +5 -5
- package/dist/components/image-preview/index.js +7 -7
- package/dist/components/image-preview/index.js.map +1 -1
- package/dist/components/image-preview/style.js.map +1 -1
- package/dist/components/input/index.js +1 -1
- package/dist/components/input/index.js.map +1 -1
- package/dist/components/input/style.js.map +1 -1
- package/dist/components/input-number/index.js.map +1 -1
- package/dist/components/layout/index.d.ts +7 -7
- package/dist/components/layout/index.js +4 -4
- package/dist/components/layout/index.js.map +1 -1
- package/dist/components/layout/style.js.map +1 -1
- package/dist/components/middle-ellipsis/index.d.ts +1 -1
- package/dist/components/middle-ellipsis/index.js.map +1 -1
- package/dist/components/middle-ellipsis/truncate.d.ts +1 -1
- package/dist/components/middle-ellipsis/truncate.js.map +1 -1
- package/dist/components/popover/index.d.ts +1 -1
- package/dist/components/popover/index.js.map +1 -1
- package/dist/components/popover/style.js.map +1 -1
- package/dist/components/radio/index.d.ts +1 -1
- package/dist/components/radio/index.js +1 -1
- package/dist/components/radio/index.js.map +1 -1
- package/dist/components/radio-group/index.d.ts +1 -1
- package/dist/components/radio-group/index.js +1 -1
- package/dist/components/radio-group/index.js.map +1 -1
- package/dist/components/segmented/index.js.map +1 -1
- package/dist/components/segmented/style.js.map +1 -1
- package/dist/components/segmented-trigger/style.js.map +1 -1
- package/dist/components/select/index.js +1 -1
- package/dist/components/select/index.js.map +1 -1
- package/dist/components/select/style.js.map +1 -1
- package/dist/components/slider/index.js +1 -1
- package/dist/components/slider/index.js.map +1 -1
- package/dist/components/slider/style.js +1 -1
- package/dist/components/slider/style.js.map +1 -1
- package/dist/components/spinner/index.js +1 -1
- package/dist/components/spinner/index.js.map +1 -1
- package/dist/components/switch/index.js +1 -1
- package/dist/components/switch/index.js.map +1 -1
- package/dist/components/switch/style.js.map +1 -1
- package/dist/components/textarea/index.js +1 -1
- package/dist/components/textarea/index.js.map +1 -1
- package/dist/components/textarea/style.js.map +1 -1
- package/dist/components/theme/index.js.map +1 -1
- package/dist/components/theme/style.js.map +1 -1
- package/dist/components/toast/style.js.map +1 -1
- package/dist/components/toast/toast.js +1 -1
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/tooltip/index.d.ts +1 -1
- package/dist/components/tooltip/index.js.map +1 -1
- package/dist/components/tooltip/style.js.map +1 -1
- package/dist/scrollbars/index.d.ts +8 -8
- package/dist/scrollbars/index.js.map +1 -1
- package/dist/scrollbars/internal.js.map +1 -1
- package/dist/shared/element-height/index.js.map +1 -1
- package/dist/shared/focus/pointer-focus.js.map +1 -1
- package/dist/shared/label-emptiness/index.js.map +1 -1
- package/dist/shared/menu-behavior/index.js.map +1 -1
- package/dist/shared/menu-portal/menu-portal.js.map +1 -1
- package/dist/shared/menu-portal/menu-tree.js.map +1 -1
- package/dist/shared/option-portal/combobox-shell.js.map +1 -1
- package/dist/shared/option-portal/index.js.map +1 -1
- package/dist/shared/overlay/anchored-panel.js.map +1 -1
- package/dist/shared/overlay/native-dialog-presence.js.map +1 -1
- package/dist/shared/overlay/nested-drawer-layers.js.map +1 -1
- package/dist/shared/overlay/open-overlay.js.map +1 -1
- package/dist/shared/overlay/overlay.js.map +1 -1
- package/dist/shared/overlay/portal.js.map +1 -1
- package/dist/shared/overlay/presence.js.map +1 -1
- package/dist/shared/scroll-lock/scroll-lock.js.map +1 -1
- package/dist/shared/theme/root-sync.js.map +1 -1
- package/package.json +2 -2
- package/dist/icons/generated/heroicons-arrow-down-16-solid.d.ts +0 -6
- package/dist/icons/generated/heroicons-arrow-up-16-solid.d.ts +0 -6
- package/dist/icons/generated/jam-volume.d.ts +0 -8
- package/dist/icons/generated/jam-watch-f.d.ts +0 -8
- package/dist/icons/generated/ooui-check.d.ts +0 -6
- package/dist/icons/generated/radix-icons-check.d.ts +0 -6
- package/dist/icons/generated/si-check-alt-fill.d.ts +0 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/theme/index.ts"],"sourcesContent":["import { html, LitElement, nothing, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { normalizeLiteral } from '@/shared/normalize'\nimport { applyOverlayRootStyles } from '@/shared/overlay/overlay-root'\nimport { parseDuration } from '@/shared/theme/duration'\nimport {\n registerThemeRootSync,\n subscribeThemeSystemAppearanceChange,\n unregisterThemeRootSync\n} from '@/shared/theme/root-sync'\n\nimport style from './style.css?inline'\n\nexport type ThemeAppearance = 'light' | 'dark' | 'system'\nexport type ResolvedThemeAppearance = 'light' | 'dark'\nexport type ThemeMotion = 'full' | 'reduced' | 'system'\n\nconst APPEARANCES = ['light', 'dark', 'system'] as const\nconst MOTIONS = ['full', 'reduced', 'system'] as const\n\ninterface ViewTransitionLike {\n readonly ready: Promise<void>\n readonly finished: Promise<void>\n skipTransition?: () => void\n}\n\n// 主 theme 组件不知道触发它的控件;pointerdown 记录坐标。键盘或程序化调用回退中心。\nconst transitionOrigin = { x: Number.NaN, y: Number.NaN }\nlet transitionSequence = 0\nlet transitionOriginCount = 0\nlet themeTransitionFlightToken: object | null = null\nconst recordTransitionOrigin = (event: Event) => {\n const pointer = event as PointerEvent\n transitionOrigin.x = pointer.clientX\n transitionOrigin.y = pointer.clientY\n}\nconst forgetTransitionOrigin = () => {\n transitionOrigin.x = Number.NaN\n transitionOrigin.y = Number.NaN\n}\n\nfunction addTransitionOriginListeners() {\n if (transitionOriginCount++ > 0) return\n window.addEventListener('pointerdown', recordTransitionOrigin, true)\n window.addEventListener('keydown', forgetTransitionOrigin, true)\n}\n\nfunction removeTransitionOriginListeners() {\n if (--transitionOriginCount > 0) return\n window.removeEventListener('pointerdown', recordTransitionOrigin, true)\n window.removeEventListener('keydown', forgetTransitionOrigin, true)\n}\n\nconst TRANSITION_SKIP_INPUT_EVENTS = ['pointerdown', 'wheel'] as const\n\n/*\n * rendering suppression 期间,规范强制 pointer hit-test 指向 documentElement;\n * 伪元素的 pointer-events 或 host 覆写窗口都无法覆盖这条渲染规则。只有按下或滚轮\n * 才取消揭示,牺牲剩余动画换回交互;移动和抬起不取消,避免切换控件的收尾事件或\n * 过渡期间的普通移动打断动画。触发事件本身仍按规范以 html 为目标,因此这里缩短的\n * 是失效窗口,不是对首个事件的追溯改道。\n */\nfunction addTransitionInputSkipListeners(transition: ViewTransitionLike): () => void {\n let listening = true\n const remove = () => {\n if (!listening) return\n listening = false\n for (const event of TRANSITION_SKIP_INPUT_EVENTS) {\n window.removeEventListener(event, skip, true)\n }\n }\n const skip = () => {\n if (!listening) return\n remove()\n transition.skipTransition?.()\n }\n for (const event of TRANSITION_SKIP_INPUT_EVENTS) {\n window.addEventListener(event, skip, { capture: true, passive: true })\n }\n return remove\n}\n\nfunction resolveAppearance(appearance: ThemeAppearance | undefined): ResolvedThemeAppearance {\n if (appearance === 'dark') return 'dark'\n if (appearance !== 'system') return 'light'\n try {\n return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n } catch {\n return 'light'\n }\n}\n\nfunction transitionPoint(x: number, y: number): { x: number; y: number } {\n if (Number.isFinite(x) && Number.isFinite(y)) return { x, y }\n return {\n x: (window.innerWidth || 0) / 2,\n y: (window.innerHeight || 0) / 2\n }\n}\n\n@customElement('web-ui-theme')\nexport class WebUiTheme extends LitElement {\n static override styles = unsafeCSS(style)\n\n @property({ type: String, reflect: true })\n get appearance(): ThemeAppearance | undefined {\n return this._appearance\n }\n set appearance(v: string | undefined) {\n const old = this._appearance\n const next = v !== undefined ? (normalizeLiteral(v, APPEARANCES, 'light') as ThemeAppearance) : undefined\n const resolvedNext = resolveAppearance(next)\n const request = ++this._appearanceRequest\n if (\n next !== undefined &&\n !this._transitionRequested &&\n themeTransitionFlightToken === null &&\n this._shouldAnimateAppearance(next, resolvedNext)\n ) {\n // async helper 可能把函数体排到当前栈后;flight gate 必须在当前 setter 栈内生效。\n this._transitionRequested = true\n const flightToken = { requestId: request }\n themeTransitionFlightToken = flightToken\n void this._startThemeTransition(next, resolvedNext, old!, request, flightToken).catch(() => {\n this._cleanupThemeTransition()\n this._transitionRequested = false\n if (themeTransitionFlightToken === flightToken) themeTransitionFlightToken = null\n if (this._appearanceRequest === request) {\n this._appearance = next\n this._syncResolvedAppearance()\n this.requestUpdate('appearance', old)\n }\n })\n return\n }\n this._appearance = next\n this._syncResolvedAppearance()\n this.requestUpdate('appearance', old)\n }\n private _appearance?: ThemeAppearance\n private _appearanceRequest = 0\n\n /*\n * resolved-appearance 是派生输出,不是第二个输入:像 selected-value 一样由组件独占写入,\n * 外部改动在同一 attribute reaction 内恢复,避免消费者把 system 的解析结果当成可设状态。\n */\n @property({ type: String, reflect: true, attribute: 'resolved-appearance' })\n private _resolvedAppearance: ResolvedThemeAppearance = 'light'\n\n get resolvedAppearance(): ResolvedThemeAppearance {\n return this._resolvedAppearance\n }\n\n private _setResolvedAppearance(value: ResolvedThemeAppearance) {\n const old = this._resolvedAppearance\n if (old === value && this.getAttribute('resolved-appearance') === value) return\n this._resolvedAppearance = value\n // 立即写 attribute:View Transition 的 update callback 要在同一次快照里换掉它。\n this.setAttribute('resolved-appearance', value)\n }\n\n private _syncResolvedAppearance() {\n this._setResolvedAppearance(resolveAppearance(this._appearance))\n this._syncSystemAppearanceSubscription()\n }\n\n private _syncSystemAppearanceSubscription() {\n const shouldSubscribe = this.isConnected && this._hasAppearance() && this._appearance === 'system'\n if (shouldSubscribe) {\n if (this._unsubscribeSystemAppearance) return\n this._unsubscribeSystemAppearance = subscribeThemeSystemAppearanceChange(() => {\n this._setResolvedAppearance(resolveAppearance(this._appearance))\n })\n return\n }\n this._unsubscribeSystemAppearance?.()\n this._unsubscribeSystemAppearance = undefined\n }\n private _unsubscribeSystemAppearance?: () => void\n\n @property({ type: String, reflect: true })\n get motion(): ThemeMotion {\n return this._motion\n }\n set motion(v: string) {\n const old = this._motion\n this._motion = normalizeLiteral(v, MOTIONS, 'system') as ThemeMotion\n this.requestUpdate('motion', old)\n }\n private _motion: ThemeMotion = 'system'\n\n private _transitionOriginListening = false\n private _transitionRequested = false\n\n private _warned = false\n\n override connectedCallback() {\n super.connectedCallback()\n this._syncResolvedAppearance()\n // 揭示开关曾由 transition prop 单独控制;现在统一由 motion 决定,\n // 因此连接期间始终记录圆心来源,真正是否动画仍看 _shouldAnimateAppearance。\n this._syncTransitionOriginListeners(true)\n this._syncRootPageColorSync()\n this._warnWhenAppearanceIsMissing()\n }\n\n override disconnectedCallback() {\n this._syncTransitionOriginListeners(false)\n this._unsubscribeSystemAppearance?.()\n this._unsubscribeSystemAppearance = undefined\n unregisterThemeRootSync(this)\n this._activeTransition?.skipTransition?.()\n this._cleanupThemeTransition()\n super.disconnectedCallback()\n }\n\n protected override updated() {\n this._warnWhenAppearanceIsMissing()\n this._syncRootPageColorSync()\n }\n\n override attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\n super.attributeChangedCallback(name, oldValue, newValue)\n // super 已把外部值写进 backing field,所以这里必须按 appearance 重算,不能与字段比较。\n if (name === 'resolved-appearance') this._setResolvedAppearance(resolveAppearance(this._appearance))\n }\n\n /*\n * root page 色同步的登记态:只有 active(有 appearance)的主题参与,\n * appearance 被清掉时撤销登记、把同步权顺延给下一个已连接实例。\n * updated() 里重复登记是幂等的,因此这里同时承担「appearance 变化后刷新 root 值」。\n */\n private _syncRootPageColorSync() {\n if (this._hasAppearance()) registerThemeRootSync(this)\n else unregisterThemeRootSync(this)\n }\n\n // 返回该主题拥有的浮层挂载点;未设置 appearance 时不创建。\n getOverlayRoot(): HTMLElement | undefined {\n if (!this._hasAppearance()) return undefined\n return this.renderRoot.querySelector<HTMLElement>('[data-wui-overlay-container]') ?? undefined\n }\n\n // 当前范围是否应减少动效;`system` 跟随用户的系统偏好。\n isReducedMotion(): boolean {\n if (this.motion === 'reduced') return true\n if (this.motion === 'full') return false\n\n try {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches\n } catch {\n return false\n }\n }\n\n private _findThemeAncestor(): WebUiTheme | null {\n let node = this.parentNode\n while (node) {\n if (node instanceof WebUiTheme && node !== this && node._hasAppearance()) return node\n if (node instanceof ShadowRoot) {\n node = node.host\n } else {\n node = node.parentElement\n }\n }\n return null\n }\n\n private _transitionOrigin(): { x: number; y: number } {\n if (Number.isFinite(transitionOrigin.x) && Number.isFinite(transitionOrigin.y)) {\n return transitionOrigin\n }\n\n const box = this.getBoundingClientRect()\n if (box.width > 0 && box.height > 0) {\n return { x: box.left + box.width / 2, y: box.top + box.height / 2 }\n }\n return transitionPoint(Number.NaN, Number.NaN)\n }\n\n private _syncTransitionOriginListeners(listening: boolean) {\n if (listening === this._transitionOriginListening) return\n this._transitionOriginListening = listening\n if (listening) addTransitionOriginListeners()\n else removeTransitionOriginListeners()\n }\n\n private _transitionMotion(): { duration: number; easing: string } {\n const style = getComputedStyle(this)\n const duration = parseDuration(style.getPropertyValue('--wui-theme-transition-duration')) ?? 500\n const easing = style.getPropertyValue('--wui-theme-transition-easing').trim() || 'ease-in'\n const safeEasing = globalThis.CSS?.supports('animation-timing-function', easing) ? easing : 'ease-in'\n return { duration: Math.max(0, duration), easing: safeEasing }\n }\n\n private _shouldAnimateAppearance(next: ThemeAppearance, resolvedNext: ResolvedThemeAppearance): boolean {\n const previous = this._appearance\n if (!previous || previous === next) return false\n if (resolveAppearance(previous) === resolvedNext) return false\n return (\n typeof document.startViewTransition === 'function' &&\n Array.isArray(document.adoptedStyleSheets) &&\n !this.isReducedMotion() &&\n this._transitionMotion().duration > 0\n )\n }\n\n // 嵌套主题只做局部揭示;View Transitions 需要 capture box,因此飞行期间临时生成一个 host box。\n private async _startThemeTransition(\n next: ThemeAppearance,\n resolvedNext: ResolvedThemeAppearance,\n previous: ThemeAppearance,\n request: number,\n flightToken: object\n ): Promise<void> {\n const root = this._findThemeAncestor() === null\n const transitionName = root ? undefined : `wui-theme-transition-${++transitionSequence}`\n const styleSheet = new CSSStyleSheet()\n if (transitionName) {\n styleSheet.replaceSync(`\n ::view-transition-old(root), ::view-transition-new(root) { animation: none; }\n ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }\n ::view-transition-image-pair(root), ::view-transition-image-pair(${transitionName}) { mix-blend-mode: normal; }\n ::view-transition-group(${transitionName}) { animation: none; }\n ::view-transition-old(${transitionName}), ::view-transition-new(${transitionName}) {\n animation: none;\n mix-blend-mode: normal;\n }\n ::view-transition-old(${transitionName}) { z-index: ${resolvedNext === 'dark' ? 1 : 2}; }\n ::view-transition-new(${transitionName}) { z-index: ${resolvedNext === 'dark' ? 2 : 1}; }\n `)\n } else {\n styleSheet.replaceSync(`\n ::view-transition-old(root), ::view-transition-new(root) {\n animation: none;\n mix-blend-mode: normal;\n }\n ::view-transition-image-pair(root) { mix-blend-mode: normal; }\n ::view-transition-old(root) { z-index: ${resolvedNext === 'dark' ? 1 : 2}; }\n ::view-transition-new(root) { z-index: ${resolvedNext === 'dark' ? 2 : 1}; }\n `)\n }\n\n const hadDisplay = this.style.getPropertyValue('display')\n const hadTransitionName = transitionName ? this.style.getPropertyValue('view-transition-name') : undefined\n if (transitionName) {\n this.style.setProperty('display', 'block')\n this.style.setProperty('view-transition-name', transitionName)\n }\n\n const restoreCapture = () => {\n try {\n document.adoptedStyleSheets = document.adoptedStyleSheets.filter(sheet => sheet !== styleSheet)\n } catch {\n // 拒绝写入的 setter 也拒绝回收,样式表本就没进去;host 内联态的恢复不能因此中断。\n }\n if (!transitionName) return\n if (hadTransitionName) this.style.setProperty('view-transition-name', hadTransitionName)\n else this.style.removeProperty('view-transition-name')\n if (hadDisplay) this.style.setProperty('display', hadDisplay)\n else this.style.removeProperty('display')\n }\n\n const commit = () => {\n if (this._appearanceRequest !== request) return this.updateComplete\n this._appearance = next\n this._syncResolvedAppearance()\n this.requestUpdate('appearance', previous)\n return this.updateComplete\n }\n // cleanup 必须在 adoptedStyleSheets 写入之前登记:写入同步抛错时 setter 的 .catch 才拿得到它,\n // 否则 host 上的 view-transition-name 会残留,污染之后每一次 view transition(issue #146)。\n this._transitionCleanup = restoreCapture\n document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet]\n const transition = document.startViewTransition(commit) as unknown as ViewTransitionLike\n this._activeTransition = transition\n this._transitionInputSkipCleanup = addTransitionInputSkipListeners(transition)\n const animations: Animation[] = []\n\n transition.ready\n .then(() => {\n const { duration, easing } = this._transitionMotion()\n if (duration <= 0) return\n const { x, y } = this._transitionOrigin()\n const target = resolvedNext === 'dark' ? '::view-transition-new(root)' : '::view-transition-old(root)'\n if (!root) {\n const box = this.getBoundingClientRect()\n const relative = { x: x - box.left, y: y - box.top }\n const radius = Math.ceil(\n Math.hypot(Math.max(relative.x, box.width - relative.x), Math.max(relative.y, box.height - relative.y))\n )\n const frames = this._transitionKeyframes(relative.x, relative.y, radius, resolvedNext)\n const target =\n resolvedNext === 'dark'\n ? `::view-transition-new(${transitionName})`\n : `::view-transition-old(${transitionName})`\n animations.push(\n document.documentElement.animate(frames, {\n duration,\n easing,\n fill: 'both',\n pseudoElement: target\n } as KeyframeAnimationOptions)\n )\n return\n }\n\n const radius = Math.ceil(Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y)))\n animations.push(\n document.documentElement.animate(this._transitionKeyframes(x, y, radius, resolvedNext), {\n duration,\n easing,\n fill: 'both',\n pseudoElement: target\n } as KeyframeAnimationOptions)\n )\n })\n .catch(() => undefined)\n\n try {\n await transition.finished\n } catch {\n // API 缺失、capture 冲突或用户 skip 都不是状态错误;appearance 已由 update callback 提交。\n } finally {\n this._transitionInputSkipCleanup?.()\n this._transitionInputSkipCleanup = undefined\n this._activeTransition = undefined\n this._transitionCleanup = undefined\n for (const animation of animations) animation.cancel()\n restoreCapture()\n // disconnected skip 会提前清掉 active;flight token/request 必须无条件释放。\n this._transitionRequested = false\n if (themeTransitionFlightToken === flightToken) themeTransitionFlightToken = null\n }\n }\n\n private _transitionKeyframes(\n x: number,\n y: number,\n radius: number,\n resolvedNext: ResolvedThemeAppearance\n ): Keyframe[] {\n const from = `circle(0px at ${x}px ${y}px)`\n const to = `circle(${radius}px at ${x}px ${y}px)`\n return resolvedNext === 'dark' ? [{ clipPath: from }, { clipPath: to }] : [{ clipPath: to }, { clipPath: from }]\n }\n\n private _cleanupThemeTransition(restoreCapture = true) {\n this._transitionInputSkipCleanup?.()\n this._transitionInputSkipCleanup = undefined\n this._activeTransition = undefined\n const cleanup = this._transitionCleanup\n this._transitionCleanup = undefined\n if (restoreCapture) cleanup?.()\n }\n\n private _activeTransition?: ViewTransitionLike\n private _transitionCleanup?: () => void\n private _transitionInputSkipCleanup?: () => void\n\n override render() {\n return html`<slot></slot>${this._hasAppearance() ? html`<div data-wui-overlay-container></div>` : nothing}`\n }\n\n override firstUpdated() {\n if (this.renderRoot instanceof ShadowRoot) {\n applyOverlayRootStyles(this.renderRoot)\n }\n }\n\n private _hasAppearance(): this is this & { appearance: ThemeAppearance } {\n return this.appearance !== undefined && (APPEARANCES as readonly string[]).includes(this.appearance)\n }\n\n private _warnWhenAppearanceIsMissing() {\n if (this._hasAppearance() || this._warned || !import.meta.env.DEV) return\n this._warned = true\n console.warn('[web-ui-theme] appearance is required; this theme scope is inactive until it is set.')\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-theme': WebUiTheme\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/theme/index.ts"],"sourcesContent":["import { html, LitElement, nothing, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { normalizeLiteral } from '@/shared/normalize'\nimport { applyOverlayRootStyles } from '@/shared/overlay/overlay-root'\nimport { parseDuration } from '@/shared/theme/duration'\nimport {\n registerThemeRootSync,\n subscribeThemeSystemAppearanceChange,\n unregisterThemeRootSync\n} from '@/shared/theme/root-sync'\n\nimport style from './style.css?inline'\n\nexport type ThemeAppearance = 'light' | 'dark' | 'system'\nexport type ResolvedThemeAppearance = 'light' | 'dark'\nexport type ThemeMotion = 'full' | 'reduced' | 'system'\n\nconst APPEARANCES = ['light', 'dark', 'system'] as const\nconst MOTIONS = ['full', 'reduced', 'system'] as const\n\ninterface ViewTransitionLike {\n readonly ready: Promise<void>\n readonly finished: Promise<void>\n skipTransition?: () => void\n}\n\n// 主 theme 组件不知道触发它的控件;pointerdown 记录坐标。键盘或程序化调用回退中心。\nconst transitionOrigin = { x: Number.NaN, y: Number.NaN }\nlet transitionSequence = 0\nlet transitionOriginCount = 0\nlet themeTransitionFlightToken: object | null = null\nconst recordTransitionOrigin = (event: Event) => {\n const pointer = event as PointerEvent\n transitionOrigin.x = pointer.clientX\n transitionOrigin.y = pointer.clientY\n}\nconst forgetTransitionOrigin = () => {\n transitionOrigin.x = Number.NaN\n transitionOrigin.y = Number.NaN\n}\n\nfunction addTransitionOriginListeners() {\n if (transitionOriginCount++ > 0) return\n window.addEventListener('pointerdown', recordTransitionOrigin, true)\n window.addEventListener('keydown', forgetTransitionOrigin, true)\n}\n\nfunction removeTransitionOriginListeners() {\n if (--transitionOriginCount > 0) return\n window.removeEventListener('pointerdown', recordTransitionOrigin, true)\n window.removeEventListener('keydown', forgetTransitionOrigin, true)\n}\n\nconst TRANSITION_SKIP_INPUT_EVENTS = ['pointerdown', 'wheel'] as const\n\n/*\n * rendering suppression 期间,规范强制 pointer hit-test 指向 documentElement;\n * 伪元素的 pointer-events 或 host 覆写窗口都无法覆盖这条渲染规则。只有按下或滚轮\n * 才取消揭示,牺牲剩余动画换回交互;移动和抬起不取消,避免切换控件的收尾事件或\n * 过渡期间的普通移动打断动画。触发事件本身仍按规范以 html 为目标,因此这里缩短的\n * 是失效窗口,不是对首个事件的追溯改道。\n */\nfunction addTransitionInputSkipListeners(transition: ViewTransitionLike): () => void {\n let listening = true\n const remove = () => {\n if (!listening) return\n listening = false\n for (const event of TRANSITION_SKIP_INPUT_EVENTS) {\n window.removeEventListener(event, skip, true)\n }\n }\n const skip = () => {\n if (!listening) return\n remove()\n transition.skipTransition?.()\n }\n for (const event of TRANSITION_SKIP_INPUT_EVENTS) {\n window.addEventListener(event, skip, { capture: true, passive: true })\n }\n return remove\n}\n\nfunction resolveAppearance(appearance: ThemeAppearance | undefined): ResolvedThemeAppearance {\n if (appearance === 'dark') return 'dark'\n if (appearance !== 'system') return 'light'\n try {\n return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n } catch {\n return 'light'\n }\n}\n\nfunction transitionPoint(x: number, y: number): { x: number; y: number } {\n if (Number.isFinite(x) && Number.isFinite(y)) return { x, y }\n return {\n x: (window.innerWidth || 0) / 2,\n y: (window.innerHeight || 0) / 2\n }\n}\n\n@customElement('web-ui-theme')\nexport class WebUiTheme extends LitElement {\n static override styles = unsafeCSS(style)\n\n @property({ type: String, reflect: true })\n get appearance(): ThemeAppearance | undefined {\n return this._appearance\n }\n set appearance(v: string | undefined) {\n const old = this._appearance\n const next = v !== undefined ? (normalizeLiteral(v, APPEARANCES, 'light') as ThemeAppearance) : undefined\n const resolvedNext = resolveAppearance(next)\n const request = ++this._appearanceRequest\n if (\n next !== undefined &&\n !this._transitionRequested &&\n themeTransitionFlightToken === null &&\n this._shouldAnimateAppearance(next, resolvedNext)\n ) {\n // async helper 可能把函数体排到当前栈后;flight gate 必须在当前 setter 栈内生效。\n this._transitionRequested = true\n const flightToken = { requestId: request }\n themeTransitionFlightToken = flightToken\n void this._startThemeTransition(next, resolvedNext, old!, request, flightToken).catch(() => {\n this._cleanupThemeTransition()\n this._transitionRequested = false\n if (themeTransitionFlightToken === flightToken) themeTransitionFlightToken = null\n if (this._appearanceRequest === request) {\n this._appearance = next\n this._syncResolvedAppearance()\n this.requestUpdate('appearance', old)\n }\n })\n return\n }\n this._appearance = next\n this._syncResolvedAppearance()\n this.requestUpdate('appearance', old)\n }\n private _appearance?: ThemeAppearance\n private _appearanceRequest = 0\n\n /*\n * resolved-appearance 是派生输出,不是第二个输入:像 selected-value 一样由组件独占写入,\n * 外部改动在同一 attribute reaction 内恢复,避免消费者把 system 的解析结果当成可设状态。\n */\n @property({ type: String, reflect: true, attribute: 'resolved-appearance' })\n private _resolvedAppearance: ResolvedThemeAppearance = 'light'\n\n get resolvedAppearance(): ResolvedThemeAppearance {\n return this._resolvedAppearance\n }\n\n private _setResolvedAppearance(value: ResolvedThemeAppearance) {\n const old = this._resolvedAppearance\n if (old === value && this.getAttribute('resolved-appearance') === value) return\n this._resolvedAppearance = value\n // 立即写 attribute:View Transition 的 update callback 要在同一次快照里换掉它。\n this.setAttribute('resolved-appearance', value)\n }\n\n private _syncResolvedAppearance() {\n this._setResolvedAppearance(resolveAppearance(this._appearance))\n this._syncSystemAppearanceSubscription()\n }\n\n private _syncSystemAppearanceSubscription() {\n const shouldSubscribe = this.isConnected && this._hasAppearance() && this._appearance === 'system'\n if (shouldSubscribe) {\n if (this._unsubscribeSystemAppearance) return\n this._unsubscribeSystemAppearance = subscribeThemeSystemAppearanceChange(() => {\n this._setResolvedAppearance(resolveAppearance(this._appearance))\n })\n return\n }\n this._unsubscribeSystemAppearance?.()\n this._unsubscribeSystemAppearance = undefined\n }\n private _unsubscribeSystemAppearance?: () => void\n\n @property({ type: String, reflect: true })\n get motion(): ThemeMotion {\n return this._motion\n }\n set motion(v: string) {\n const old = this._motion\n this._motion = normalizeLiteral(v, MOTIONS, 'system') as ThemeMotion\n this.requestUpdate('motion', old)\n }\n private _motion: ThemeMotion = 'system'\n\n private _transitionOriginListening = false\n private _transitionRequested = false\n\n private _warned = false\n\n override connectedCallback() {\n super.connectedCallback()\n this._syncResolvedAppearance()\n // reveal toggle 曾由 transition prop 单独控制;现在统一由 motion 决定,\n // 因此连接期间始终记录圆心来源,真正是否动画仍看 _shouldAnimateAppearance。\n this._syncTransitionOriginListeners(true)\n this._syncRootPageColorSync()\n this._warnWhenAppearanceIsMissing()\n }\n\n override disconnectedCallback() {\n this._syncTransitionOriginListeners(false)\n this._unsubscribeSystemAppearance?.()\n this._unsubscribeSystemAppearance = undefined\n unregisterThemeRootSync(this)\n this._activeTransition?.skipTransition?.()\n this._cleanupThemeTransition()\n super.disconnectedCallback()\n }\n\n protected override updated() {\n this._warnWhenAppearanceIsMissing()\n this._syncRootPageColorSync()\n }\n\n override attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\n super.attributeChangedCallback(name, oldValue, newValue)\n // super 已把外部值写进 backing field,所以这里必须按 appearance 重算,不能与字段比较。\n if (name === 'resolved-appearance') this._setResolvedAppearance(resolveAppearance(this._appearance))\n }\n\n /*\n * root page 色同步的登记态:只有 active(有 appearance)的主题参与,\n * appearance 被清掉时撤销登记、把同步权顺延给下一个已连接实例。\n * updated() 里重复登记是幂等的,因此这里同时承担「appearance 变化后刷新 root 值」。\n */\n private _syncRootPageColorSync() {\n if (this._hasAppearance()) registerThemeRootSync(this)\n else unregisterThemeRootSync(this)\n }\n\n // 返回该主题拥有的 overlay 挂载点;未设置 appearance 时不创建。\n getOverlayRoot(): HTMLElement | undefined {\n if (!this._hasAppearance()) return undefined\n return this.renderRoot.querySelector<HTMLElement>('[data-wui-overlay-container]') ?? undefined\n }\n\n // 当前范围是否应减少动效;`system` 跟随用户的系统偏好。\n isReducedMotion(): boolean {\n if (this.motion === 'reduced') return true\n if (this.motion === 'full') return false\n\n try {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches\n } catch {\n return false\n }\n }\n\n private _findThemeAncestor(): WebUiTheme | null {\n let node = this.parentNode\n while (node) {\n if (node instanceof WebUiTheme && node !== this && node._hasAppearance()) return node\n if (node instanceof ShadowRoot) {\n node = node.host\n } else {\n node = node.parentElement\n }\n }\n return null\n }\n\n private _transitionOrigin(): { x: number; y: number } {\n if (Number.isFinite(transitionOrigin.x) && Number.isFinite(transitionOrigin.y)) {\n return transitionOrigin\n }\n\n const box = this.getBoundingClientRect()\n if (box.width > 0 && box.height > 0) {\n return { x: box.left + box.width / 2, y: box.top + box.height / 2 }\n }\n return transitionPoint(Number.NaN, Number.NaN)\n }\n\n private _syncTransitionOriginListeners(listening: boolean) {\n if (listening === this._transitionOriginListening) return\n this._transitionOriginListening = listening\n if (listening) addTransitionOriginListeners()\n else removeTransitionOriginListeners()\n }\n\n private _transitionMotion(): { duration: number; easing: string } {\n const style = getComputedStyle(this)\n const duration = parseDuration(style.getPropertyValue('--wui-theme-transition-duration')) ?? 500\n const easing = style.getPropertyValue('--wui-theme-transition-easing').trim() || 'ease-in'\n const safeEasing = globalThis.CSS?.supports('animation-timing-function', easing) ? easing : 'ease-in'\n return { duration: Math.max(0, duration), easing: safeEasing }\n }\n\n private _shouldAnimateAppearance(next: ThemeAppearance, resolvedNext: ResolvedThemeAppearance): boolean {\n const previous = this._appearance\n if (!previous || previous === next) return false\n if (resolveAppearance(previous) === resolvedNext) return false\n return (\n typeof document.startViewTransition === 'function' &&\n Array.isArray(document.adoptedStyleSheets) &&\n !this.isReducedMotion() &&\n this._transitionMotion().duration > 0\n )\n }\n\n // 嵌套主题只做局部揭示;View Transitions 需要 capture box,因此飞行期间临时生成一个 host box。\n private async _startThemeTransition(\n next: ThemeAppearance,\n resolvedNext: ResolvedThemeAppearance,\n previous: ThemeAppearance,\n request: number,\n flightToken: object\n ): Promise<void> {\n const root = this._findThemeAncestor() === null\n const transitionName = root ? undefined : `wui-theme-transition-${++transitionSequence}`\n const styleSheet = new CSSStyleSheet()\n if (transitionName) {\n styleSheet.replaceSync(`\n ::view-transition-old(root), ::view-transition-new(root) { animation: none; }\n ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }\n ::view-transition-image-pair(root), ::view-transition-image-pair(${transitionName}) { mix-blend-mode: normal; }\n ::view-transition-group(${transitionName}) { animation: none; }\n ::view-transition-old(${transitionName}), ::view-transition-new(${transitionName}) {\n animation: none;\n mix-blend-mode: normal;\n }\n ::view-transition-old(${transitionName}) { z-index: ${resolvedNext === 'dark' ? 1 : 2}; }\n ::view-transition-new(${transitionName}) { z-index: ${resolvedNext === 'dark' ? 2 : 1}; }\n `)\n } else {\n styleSheet.replaceSync(`\n ::view-transition-old(root), ::view-transition-new(root) {\n animation: none;\n mix-blend-mode: normal;\n }\n ::view-transition-image-pair(root) { mix-blend-mode: normal; }\n ::view-transition-old(root) { z-index: ${resolvedNext === 'dark' ? 1 : 2}; }\n ::view-transition-new(root) { z-index: ${resolvedNext === 'dark' ? 2 : 1}; }\n `)\n }\n\n const hadDisplay = this.style.getPropertyValue('display')\n const hadTransitionName = transitionName ? this.style.getPropertyValue('view-transition-name') : undefined\n if (transitionName) {\n this.style.setProperty('display', 'block')\n this.style.setProperty('view-transition-name', transitionName)\n }\n\n const restoreCapture = () => {\n try {\n document.adoptedStyleSheets = document.adoptedStyleSheets.filter(sheet => sheet !== styleSheet)\n } catch {\n // 拒绝写入的 setter 也拒绝回收,样式表本就没进去;host 内联态的恢复不能因此中断。\n }\n if (!transitionName) return\n if (hadTransitionName) this.style.setProperty('view-transition-name', hadTransitionName)\n else this.style.removeProperty('view-transition-name')\n if (hadDisplay) this.style.setProperty('display', hadDisplay)\n else this.style.removeProperty('display')\n }\n\n const commit = () => {\n if (this._appearanceRequest !== request) return this.updateComplete\n this._appearance = next\n this._syncResolvedAppearance()\n this.requestUpdate('appearance', previous)\n return this.updateComplete\n }\n // cleanup 必须在 adoptedStyleSheets 写入之前登记:写入同步抛错时 setter 的 .catch 才拿得到它,\n // 否则 host 上的 view-transition-name 会残留,污染之后每一次 view transition(issue #146)。\n this._transitionCleanup = restoreCapture\n document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet]\n const transition = document.startViewTransition(commit) as unknown as ViewTransitionLike\n this._activeTransition = transition\n this._transitionInputSkipCleanup = addTransitionInputSkipListeners(transition)\n const animations: Animation[] = []\n\n transition.ready\n .then(() => {\n const { duration, easing } = this._transitionMotion()\n if (duration <= 0) return\n const { x, y } = this._transitionOrigin()\n const target = resolvedNext === 'dark' ? '::view-transition-new(root)' : '::view-transition-old(root)'\n if (!root) {\n const box = this.getBoundingClientRect()\n const relative = { x: x - box.left, y: y - box.top }\n const radius = Math.ceil(\n Math.hypot(Math.max(relative.x, box.width - relative.x), Math.max(relative.y, box.height - relative.y))\n )\n const frames = this._transitionKeyframes(relative.x, relative.y, radius, resolvedNext)\n const target =\n resolvedNext === 'dark'\n ? `::view-transition-new(${transitionName})`\n : `::view-transition-old(${transitionName})`\n animations.push(\n document.documentElement.animate(frames, {\n duration,\n easing,\n fill: 'both',\n pseudoElement: target\n } as KeyframeAnimationOptions)\n )\n return\n }\n\n const radius = Math.ceil(Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y)))\n animations.push(\n document.documentElement.animate(this._transitionKeyframes(x, y, radius, resolvedNext), {\n duration,\n easing,\n fill: 'both',\n pseudoElement: target\n } as KeyframeAnimationOptions)\n )\n })\n .catch(() => undefined)\n\n try {\n await transition.finished\n } catch {\n // API 缺失、capture 冲突或用户 skip 都不是状态错误;appearance 已由 update callback 提交。\n } finally {\n this._transitionInputSkipCleanup?.()\n this._transitionInputSkipCleanup = undefined\n this._activeTransition = undefined\n this._transitionCleanup = undefined\n for (const animation of animations) animation.cancel()\n restoreCapture()\n // disconnected skip 会提前清掉 active;flight token/request 必须无条件释放。\n this._transitionRequested = false\n if (themeTransitionFlightToken === flightToken) themeTransitionFlightToken = null\n }\n }\n\n private _transitionKeyframes(\n x: number,\n y: number,\n radius: number,\n resolvedNext: ResolvedThemeAppearance\n ): Keyframe[] {\n const from = `circle(0px at ${x}px ${y}px)`\n const to = `circle(${radius}px at ${x}px ${y}px)`\n return resolvedNext === 'dark' ? [{ clipPath: from }, { clipPath: to }] : [{ clipPath: to }, { clipPath: from }]\n }\n\n private _cleanupThemeTransition(restoreCapture = true) {\n this._transitionInputSkipCleanup?.()\n this._transitionInputSkipCleanup = undefined\n this._activeTransition = undefined\n const cleanup = this._transitionCleanup\n this._transitionCleanup = undefined\n if (restoreCapture) cleanup?.()\n }\n\n private _activeTransition?: ViewTransitionLike\n private _transitionCleanup?: () => void\n private _transitionInputSkipCleanup?: () => void\n\n override render() {\n return html`<slot></slot>${this._hasAppearance() ? html`<div data-wui-overlay-container></div>` : nothing}`\n }\n\n override firstUpdated() {\n if (this.renderRoot instanceof ShadowRoot) {\n applyOverlayRootStyles(this.renderRoot)\n }\n }\n\n private _hasAppearance(): this is this & { appearance: ThemeAppearance } {\n return this.appearance !== undefined && (APPEARANCES as readonly string[]).includes(this.appearance)\n }\n\n private _warnWhenAppearanceIsMissing() {\n if (this._hasAppearance() || this._warned || !import.meta.env.DEV) return\n this._warned = true\n console.warn('[web-ui-theme] appearance is required; this theme scope is inactive until it is set.')\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-theme': WebUiTheme\n }\n}\n"],"mappings":";;;;;;;;;OAkBM,IAAc;CAAC;CAAS;CAAQ;AAAQ,GACxC,IAAU;CAAC;CAAQ;CAAW;AAAQ,GAStC,IAAmB;CAAE,GAAG;CAAY,GAAG;AAAW,GACpD,IAAqB,GACrB,IAAwB,GACxB,IAA4C,MAC1C,KAA0B,MAAiB;CAC/C,IAAM,IAAU;CAEhB,AADA,EAAiB,IAAI,EAAQ,SAC7B,EAAiB,IAAI,EAAQ;AAC/B,GACM,UAA+B;CAEnC,AADA,EAAiB,IAAI,KACrB,EAAiB,IAAI;AACvB;AAEA,SAAS,IAA+B;CAClC,MAA0B,MAC9B,OAAO,iBAAiB,eAAe,GAAwB,EAAI,GACnE,OAAO,iBAAiB,WAAW,GAAwB,EAAI;AACjE;AAEA,SAAS,IAAkC;CACrC,EAAE,IAAwB,MAC9B,OAAO,oBAAoB,eAAe,GAAwB,EAAI,GACtE,OAAO,oBAAoB,WAAW,GAAwB,EAAI;AACpE;AAEA,IAAM,IAA+B,CAAC,eAAe,OAAO;AAS5D,SAAS,EAAgC,GAA4C;CACnF,IAAI,IAAY,IACV,UAAe;EACd,OACL;OAAY;GACZ,KAAK,IAAM,KAAS,GAClB,OAAO,oBAAoB,GAAO,GAAM,EAAI;EAFlC;CAId,GACM,UAAa;EACZ,MACL,EAAO,GACP,EAAW,iBAAiB;CAC9B;CACA,KAAK,IAAM,KAAS,GAClB,OAAO,iBAAiB,GAAO,GAAM;EAAE,SAAS;EAAM,SAAS;CAAK,CAAC;CAEvE,OAAO;AACT;AAEA,SAAS,EAAkB,GAAkE;CAC3F,IAAI,MAAe,QAAQ,OAAO;CAClC,IAAI,MAAe,UAAU,OAAO;CACpC,IAAI;EACF,OAAO,OAAO,WAAW,8BAA8B,CAAC,CAAC,UAAU,SAAS;CAC9E,QAAQ;EACN,OAAO;CACT;AACF;AAEA,SAAS,EAAgB,GAAW,GAAqC;CAEvE,OADI,OAAO,SAAS,CAAC,KAAK,OAAO,SAAS,CAAC,IAAU;EAAE;EAAG;CAAE,IACrD;EACL,IAAI,OAAO,cAAc,KAAK;EAC9B,IAAI,OAAO,eAAe,KAAK;CACjC;AACF;AAGO,IAAM,IAAN,cAAyB,EAAW;;;;;EA6FvB,aAtDW,KAAA,qBAAA,GAO0B,KAAA,sBAAA,SA0CxB,KAAA,UAAA,UAEM,KAAA,6BAAA,IACN,KAAA,uBAAA,IAEb,KAAA,UAAA;;;EA5FO,KAAA,SAAA,EAAU,CAAK;;CAExC,IACI,aAA0C;EAC5C,OAAO,KAAK;CACd;CACA,IAAI,WAAW,GAAuB;EACpC,IAAM,IAAM,KAAK,aACX,IAAO,MAAM,KAAA,IAA6E,KAAA,IAAhE,EAAiB,GAAG,GAAa,OAAO,GAClE,IAAe,EAAkB,CAAI,GACrC,IAAU,EAAE,KAAK;EACvB,IACE,MAAS,KAAA,KACT,CAAC,KAAK,wBACN,MAA+B,QAC/B,KAAK,yBAAyB,GAAM,CAAY,GAChD;GAEA,KAAK,uBAAuB;GAC5B,IAAM,IAAc,EAAE,WAAW,EAAQ;GAEzC,AADA,IAA6B,GAC7B,KAAU,sBAAsB,GAAM,GAAc,GAAM,GAAS,CAAW,CAAC,CAAC,YAAY;IAI1F,AAHA,KAAK,wBAAwB,GAC7B,KAAK,uBAAuB,IACxB,MAA+B,MAAa,IAA6B,OACzE,KAAK,uBAAuB,MAC9B,KAAK,cAAc,GACnB,KAAK,wBAAwB,GAC7B,KAAK,cAAc,cAAc,CAAG;GAExC,CAAC;GACD;EACF;EAGA,AAFA,KAAK,cAAc,GACnB,KAAK,wBAAwB,GAC7B,KAAK,cAAc,cAAc,CAAG;CACtC;CAWA,IAAI,qBAA8C;EAChD,OAAO,KAAK;CACd;CAEA,uBAA+B,GAAgC;EACjD,MAAK,wBACL,KAAS,KAAK,aAAa,qBAAqB,MAAM,OAClE,KAAK,sBAAsB,GAE3B,KAAK,aAAa,uBAAuB,CAAK;CAChD;CAEA,0BAAkC;EAEhC,AADA,KAAK,uBAAuB,EAAkB,KAAK,WAAW,CAAC,GAC/D,KAAK,kCAAkC;CACzC;CAEA,oCAA4C;EAE1C,IADwB,KAAK,eAAe,KAAK,eAAe,KAAK,KAAK,gBAAgB,UACrE;GACnB,IAAI,KAAK,8BAA8B;GACvC,KAAK,+BAA+B,QAA2C;IAC7E,KAAK,uBAAuB,EAAkB,KAAK,WAAW,CAAC;GACjE,CAAC;GACD;EACF;EAEA,AADA,KAAK,+BAA+B,GACpC,KAAK,+BAA+B,KAAA;CACtC;CAGA,IACI,SAAsB;EACxB,OAAO,KAAK;CACd;CACA,IAAI,OAAO,GAAW;EACpB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,UAAU,EAAiB,GAAG,GAAS,QAAQ,GACpD,KAAK,cAAc,UAAU,CAAG;CAClC;CAQA,oBAA6B;EAO3B,AANA,MAAM,kBAAkB,GACxB,KAAK,wBAAwB,GAG7B,KAAK,+BAA+B,EAAI,GACxC,KAAK,uBAAuB,GAC5B,KAAK,6BAA6B;CACpC;CAEA,uBAAgC;EAO9B,AANA,KAAK,+BAA+B,EAAK,GACzC,KAAK,+BAA+B,GACpC,KAAK,+BAA+B,KAAA,GACpC,EAAwB,IAAI,GAC5B,KAAK,mBAAmB,iBAAiB,GACzC,KAAK,wBAAwB,GAC7B,MAAM,qBAAqB;CAC7B;CAEA,UAA6B;EAE3B,AADA,KAAK,6BAA6B,GAClC,KAAK,uBAAuB;CAC9B;CAEA,yBAAkC,GAAc,GAAyB,GAAyB;EAGhG,AAFA,MAAM,yBAAyB,GAAM,GAAU,CAAQ,GAEnD,MAAS,yBAAuB,KAAK,uBAAuB,EAAkB,KAAK,WAAW,CAAC;CACrG;CAOA,yBAAiC;EAC/B,AAAI,KAAK,eAAe,IAAG,EAAsB,IAAI,IAChD,EAAwB,IAAI;CACnC;CAGA,iBAA0C;EACnC,SAAK,eAAe,GACzB,OAAO,KAAK,WAAW,cAA2B,8BAA8B,KAAK,KAAA;CACvF;CAGA,kBAA2B;EACzB,IAAI,KAAK,WAAW,WAAW,OAAO;EACtC,IAAI,KAAK,WAAW,QAAQ,OAAO;EAEnC,IAAI;GACF,OAAO,OAAO,WAAW,kCAAkC,CAAC,CAAC;EAC/D,QAAQ;GACN,OAAO;EACT;CACF;CAEA,qBAAgD;EAC9C,IAAI,IAAO,KAAK;EAChB,OAAO,IAAM;GACX,IAAI,aAAA,KAA8B,MAAS,QAAQ,EAAK,eAAe,GAAG,OAAO;GACjF,AAGE,IAHE,aAAgB,aACX,EAAK,OAEL,EAAK;EAEhB;EACA,OAAO;CACT;CAEA,oBAAsD;EACpD,IAAI,OAAO,SAAS,EAAiB,CAAC,KAAK,OAAO,SAAS,EAAiB,CAAC,GAC3E,OAAO;EAGT,IAAM,IAAM,KAAK,sBAAsB;EAIvC,OAHI,EAAI,QAAQ,KAAK,EAAI,SAAS,IACzB;GAAE,GAAG,EAAI,OAAO,EAAI,QAAQ;GAAG,GAAG,EAAI,MAAM,EAAI,SAAS;EAAE,IAE7D,EAAgB,KAAY,GAAU;CAC/C;CAEA,+BAAuC,GAAoB;EACrD,MAAc,KAAK,+BACvB,KAAK,6BAA6B,GAC9B,IAAW,EAA6B,IACvC,EAAgC;CACvC;CAEA,oBAAkE;EAChE,IAAM,IAAQ,iBAAiB,IAAI,GAC7B,IAAW,EAAc,EAAM,iBAAiB,iCAAiC,CAAC,KAAK,KACvF,IAAS,EAAM,iBAAiB,+BAA+B,CAAC,CAAC,KAAK,KAAK,WAC3E,IAAa,WAAW,KAAK,SAAS,6BAA6B,CAAM,IAAI,IAAS;EAC5F,OAAO;GAAE,UAAU,KAAK,IAAI,GAAG,CAAQ;GAAG,QAAQ;EAAW;CAC/D;CAEA,yBAAiC,GAAuB,GAAgD;EACtG,IAAM,IAAW,KAAK;EAGtB,OAFI,CAAC,KAAY,MAAa,KAC1B,EAAkB,CAAQ,MAAM,IAAqB,KAEvD,OAAO,SAAS,uBAAwB,cACxC,MAAM,QAAQ,SAAS,kBAAkB,KACzC,CAAC,KAAK,gBAAgB,KACtB,KAAK,kBAAkB,CAAC,CAAC,WAAW;CAExC;CAGA,MAAc,sBACZ,GACA,GACA,GACA,GACA,GACe;EACf,IAAM,IAAO,KAAK,mBAAmB,MAAM,MACrC,IAAiB,IAAO,KAAA,IAAY,wBAAwB,EAAE,KAC9D,IAAa,IAAI,cAAc;EACrC,AAAI,IACF,EAAW,YAAY;;;2EAG8C,EAAe;kCACxD,EAAe;gCACjB,EAAe,2BAA2B,EAAe;;;;gCAIzD,EAAe,eAAe,MAAiB,SAAS,IAAI,EAAE;gCAC9D,EAAe,eAAe,MAAiB,SAAS,IAAI,EAAE;OACvF,IAED,EAAW,YAAY;;;;;;iDAMoB,MAAiB,SAAS,IAAI,EAAE;iDAChC,MAAiB,SAAS,IAAI,EAAE;OAC1E;EAGH,IAAM,IAAa,KAAK,MAAM,iBAAiB,SAAS,GAClD,IAAoB,IAAiB,KAAK,MAAM,iBAAiB,sBAAsB,IAAI,KAAA;EACjG,AAAI,MACF,KAAK,MAAM,YAAY,WAAW,OAAO,GACzC,KAAK,MAAM,YAAY,wBAAwB,CAAc;EAG/D,IAAM,UAAuB;GAC3B,IAAI;IACF,SAAS,qBAAqB,SAAS,mBAAmB,QAAO,MAAS,MAAU,CAAU;GAChG,QAAQ,CAER;GACK,MACD,IAAmB,KAAK,MAAM,YAAY,wBAAwB,CAAiB,IAClF,KAAK,MAAM,eAAe,sBAAsB,GACjD,IAAY,KAAK,MAAM,YAAY,WAAW,CAAU,IACvD,KAAK,MAAM,eAAe,SAAS;EAC1C,GAEM,UACA,KAAK,uBAAuB,KAChC,KAAK,cAAc,GACnB,KAAK,wBAAwB,GAC7B,KAAK,cAAc,cAAc,CAAQ,GAClC,KAAK,kBAJoC,KAAK;EASvD,AADA,KAAK,qBAAqB,GAC1B,SAAS,qBAAqB,CAAC,GAAG,SAAS,oBAAoB,CAAU;EACzE,IAAM,IAAa,SAAS,oBAAoB,CAAM;EAEtD,AADA,KAAK,oBAAoB,GACzB,KAAK,8BAA8B,EAAgC,CAAU;EAC7E,IAAM,IAA0B,CAAC;EAEjC,EAAW,MACR,WAAW;GACV,IAAM,EAAE,aAAU,cAAW,KAAK,kBAAkB;GACpD,IAAI,KAAY,GAAG;GACnB,IAAM,EAAE,MAAG,SAAM,KAAK,kBAAkB,GAClC,IAAS,MAAiB,SAAS,gCAAgC;GACzE,IAAI,CAAC,GAAM;IACT,IAAM,IAAM,KAAK,sBAAsB,GACjC,IAAW;KAAE,GAAG,IAAI,EAAI;KAAM,GAAG,IAAI,EAAI;IAAI,GAC7C,IAAS,KAAK,KAClB,KAAK,MAAM,KAAK,IAAI,EAAS,GAAG,EAAI,QAAQ,EAAS,CAAC,GAAG,KAAK,IAAI,EAAS,GAAG,EAAI,SAAS,EAAS,CAAC,CAAC,CACxG,GACM,IAAS,KAAK,qBAAqB,EAAS,GAAG,EAAS,GAAG,GAAQ,CAAY,GAC/E,IACJ,MAAiB,SACb,yBAAyB,EAAe,KACxC,yBAAyB,EAAe;IAC9C,EAAW,KACT,SAAS,gBAAgB,QAAQ,GAAQ;KACvC;KACA;KACA,MAAM;KACN,eAAe;IACjB,CAA6B,CAC/B;IACA;GACF;GAEA,IAAM,IAAS,KAAK,KAAK,KAAK,MAAM,KAAK,IAAI,GAAG,OAAO,aAAa,CAAC,GAAG,KAAK,IAAI,GAAG,OAAO,cAAc,CAAC,CAAC,CAAC;GAC5G,EAAW,KACT,SAAS,gBAAgB,QAAQ,KAAK,qBAAqB,GAAG,GAAG,GAAQ,CAAY,GAAG;IACtF;IACA;IACA,MAAM;IACN,eAAe;GACjB,CAA6B,CAC/B;EACF,CAAC,CAAC,CACD,YAAY,KAAA,CAAS;EAExB,IAAI;GACF,MAAM,EAAW;EACnB,QAAQ,CAER,UAAU;GAIR,AAHA,KAAK,8BAA8B,GACnC,KAAK,8BAA8B,KAAA,GACnC,KAAK,oBAAoB,KAAA,GACzB,KAAK,qBAAqB,KAAA;GAC1B,KAAK,IAAM,KAAa,GAAY,EAAU,OAAO;GAIrD,AAHA,EAAe,GAEf,KAAK,uBAAuB,IACxB,MAA+B,MAAa,IAA6B;EAC/E;CACF;CAEA,qBACE,GACA,GACA,GACA,GACY;EACZ,IAAM,IAAO,iBAAiB,EAAE,KAAK,EAAE,MACjC,IAAK,UAAU,EAAO,QAAQ,EAAE,KAAK,EAAE;EAC7C,OAAO,MAAiB,SAAS,CAAC,EAAE,UAAU,EAAK,GAAG,EAAE,UAAU,EAAG,CAAC,IAAI,CAAC,EAAE,UAAU,EAAG,GAAG,EAAE,UAAU,EAAK,CAAC;CACjH;CAEA,wBAAgC,IAAiB,IAAM;EAGrD,AAFA,KAAK,8BAA8B,GACnC,KAAK,8BAA8B,KAAA,GACnC,KAAK,oBAAoB,KAAA;EACzB,IAAM,IAAU,KAAK;EAErB,AADA,KAAK,qBAAqB,KAAA,GACtB,KAAgB,IAAU;CAChC;CAMA,SAAkB;EAChB,OAAO,CAAI,gBAAgB,KAAK,eAAe,IAAI,CAAI,2CAA2C;CACpG;CAEA,eAAwB;EACtB,AAAI,KAAK,sBAAsB,cAC7B,EAAuB,KAAK,UAAU;CAE1C;CAEA,iBAAyE;EACvE,OAAO,KAAK,eAAe,KAAA,KAAc,EAAkC,SAAS,KAAK,UAAU;CACrG;CAEA,+BAAuC;EACjC,KAAK,eAAe,KAAK,KAAK;CAGpC;AACF;AAvXG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,IAAA,GA0CxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAsB,CAAC,CAAA,GAAA,EAAA,WAAA,uBAAA,KAAA,CAAA,GAkC1E,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,IAAA,GAhF1C,IAAA,IAAA,EAAA,CAAA,EAAc,cAAc,CAAA,GAAA,CAAA"}
|
|
@@ -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.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
|
+
{"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 label(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 * 单行 label 的垂直居中手段,后者是让包裹盒高收缩到内容的技巧,两者都不是\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 或 button 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 indicator 尺寸。宿主高度由内容撑开,不继承页面行高。 */\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 /* 锚定浮动 panel(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 轮播回位:跟手结束后把 track 过渡到目标位。不属于进出场族,故单独成 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 /* 锚定浮动 panel 专属进场缓动,无回弹弹簧拟合曲线。若改用 --wui-ease-enter,\n 开局 30% 的时间就走完 85% 进度,观感是先弹出再落位。 */\n --wui-ease-float: cubic-bezier(0.4, 0.38, 0.2, 1);\n\n /* 进场缩放起点。两族方向相反,各自成 token:浮动 panel 与 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=浮动 menu panel、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:浮动 panel 与侧边栏都比 page 浅一档。取 --wui-color-surface\n (#2c2c2e)作为「page 之上一档」的基准色,panel 按自身 alpha 叠在 page 上,\n 合成结果约 rgb(46 45 47),与 #2c2c2e 相差不超过 2/255。\n alpha 低于早期的 0.92/0.9:颜色抬升后高 alpha 会让 panel 读成实心纸片,\n 降到 0.74/0.8 恢复旧版的透感(模糊底内容可透出),层级方向不变。\n overlay 是唯一的例外:dialog/drawer/toast 背后的内容是被遮住的主体内容,\n 透过去会与 overlay 自身文字叠出干扰读的对比,因此单独抬到 0.92 换取可读性,\n 代价是失去透感——它本来也不属于「panel 透出 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 +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.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/* =====
|
|
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/* ===== 关闭 button(放在 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 /* 内层原生 button 获得键盘焦点时宿主同样可见 */\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 变体默认用文本色,恢复原关闭 button 的 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":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.js","names":[],"sources":["../../../src/components/toast/toast.ts"],"sourcesContent":["// web-ui-button 复用 icon 变体的焦点环与统一样式(secondary 变体,浅灰底贴合 toast 角落)\nimport '@/components/button'\nimport '@/components/icon'\n\nimport type { IconifyIcon } from '@iconify/types'\nimport { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport {\n lucideInfo,\n lucideTriangleAlert,\n lucideCircleAlert,\n heroiconsXMark16Solid,\n heroiconsCheck16Solid\n} from '@/icons'\nimport { getTransitionDuration } from '@/shared/overlay/presence'\n\nimport style from './style.css?inline'\nimport type { ToastCloseReason, ToastPosition, ToastType } from './types'\n\nconst TYPE_ICONS: Record<ToastType, IconifyIcon> = {\n success: heroiconsCheck16Solid,\n info: lucideInfo,\n warning: lucideTriangleAlert,\n error: lucideCircleAlert\n}\n\nfunction _formatTime(): string {\n const now = new Date()\n const h = now.getHours().toString().padStart(2, '0')\n const m = now.getMinutes().toString().padStart(2, '0')\n return `${h}:${m}`\n}\n\n@customElement('web-ui-toast')\nexport class WebUiToast extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: String, attribute: false }) toastId = ''\n @property({ type: String, reflect: true }) type: ToastType = 'info'\n @property({ type: String, reflect: true }) position: ToastPosition = 'top-right'\n @property({ type: String }) heading = ''\n @property({ type: String }) message = ''\n @property({ type: Number }) duration = 3000\n @property({ type: Boolean, reflect: true, attribute: 'no-close-button' }) noCloseButton = false\n @property({ type: Boolean, reflect: true }) visible = false\n\n private _closeTimer?: ReturnType<typeof setTimeout>\n private _deadline = 0\n /**\n * 暂停自动关闭时记下的剩余时间。`undefined` 表示暂停时本来就没有计时器(`duration` 为 0、\n * 或元素尚未 `show()`),与「已到期」(剩余 0)是两件事,不能共用一个 0。\n */\n private _pausedRemaining?: number\n /** 指针停在 toast 上:计时处于悬停暂停态,只有指针离开才能续跑。 */\n private _hoverPaused = false\n private _dismissing = false\n\n /**\n * 退场已开始、`toast-close` 尚未派发。这段窗口内元素仍连接在 DOM、也仍被 manager 的映射\n * 持有,但已不再接受属性更新:manager 的 upsert 据此走新建路径,否则「更新」会写进一条\n * 正在消失的元素里 —— 调用方拿到同一个 id,却看不到任何可见通知。\n */\n get dismissing(): boolean {\n return this._dismissing\n }\n\n /** 指针仍停在 toast 上,自动关闭计时处于暂停态。 */\n get hoverPaused(): boolean {\n return this._hoverPaused\n }\n\n override connectedCallback() {\n super.connectedCallback()\n this.addEventListener('pointerenter', this._onPointerEnter)\n this.addEventListener('pointerleave', this._onPointerLeave)\n // 悬停中被搬迁(不支持 moveBefore 的引擎走摘出重插)时暂停态要连兜底一起带回来,\n // 否则新位置上既没有 document 监听、也不会再补发 pointerenter,这条 toast 又变成永久停留。\n if (this._hoverPaused) this._attachHoverFallback()\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this.removeEventListener('pointerenter', this._onPointerEnter)\n this.removeEventListener('pointerleave', this._onPointerLeave)\n this._detachHoverFallback()\n this._clearTimer()\n }\n\n /**\n * 定义该回调后,`Element.moveBefore()` 搬迁节点不再触发 disconnected/connected,\n * 自动关闭计时与动画状态得以保留;未定义时旧引擎会走摘出重插,计时被 `_clearTimer()` 清掉。\n */\n connectedMoveCallback() {}\n\n protected override updated(changed: PropertyValues) {\n if (changed.has('position')) {\n this._applySlideDirection()\n }\n }\n\n private _applySlideDirection() {\n const SLIDE_OFFSET = 20\n let x = 0\n let y = 0\n\n if (this.position.includes('left')) x = -SLIDE_OFFSET\n else if (this.position.includes('right')) x = SLIDE_OFFSET\n\n if (this.position.startsWith('top')) y = -SLIDE_OFFSET\n else if (this.position.startsWith('bottom')) y = SLIDE_OFFSET\n\n this.style.setProperty('--toast-slide-x', `${x}px`)\n this.style.setProperty('--toast-slide-y', `${y}px`)\n }\n\n startAutoClose() {\n this._clearTimer()\n if (this.duration > 0) {\n this._deadline = Date.now() + this.duration\n this._closeTimer = setTimeout(() => {\n this.dismiss('auto')\n }, this.duration)\n }\n }\n\n /**\n * 由 manager 调用:显式 `duration` 更新。悬停暂停期间只记新值、不点火 —— 否则指针还压在\n * toast 上时计时就被重启,「悬停暂停」在这条路径上直接失效。恢复时按新 duration 计满:\n * 调用方显式改了生命周期,续跑按旧时长算出的剩余没有意义。`0` 表示不自动关闭,记成\n * 「没有计时器」,否则恢复时会被当成「已到期」立即退场。\n */\n setDuration(ms: number) {\n this.duration = ms\n if (this._hoverPaused) {\n this._pausedRemaining = ms > 0 ? ms : undefined\n return\n }\n this.startAutoClose()\n }\n\n // 不支持 moveBefore 的引擎上搬迁节点前调用:记下剩余时间,搬完由 resumeAutoClose() 续跑。\n pauseAutoClose() {\n // 已经在暂停态时保留既有剩余:悬停暂停期间若发生搬迁,降级路径也会走到这里,无条件\n // 重算会把悬停记下的剩余抹成「没有计时器」,指针离开后这条 toast 就再也不会关闭。\n if (this._closeTimer === undefined && this._pausedRemaining !== undefined) return\n // 计时器仍在跑时剩余时间可能算出 0:deadline 已过、回调还排在队列里没执行。这一支与\n // 「本来就没有计时器」必须分开记(undefined vs 0),否则续跑无法区分两者。\n this._pausedRemaining = this._closeTimer === undefined ? undefined : Math.max(0, this._deadline - Date.now())\n this._clearTimer()\n }\n\n // 与 pauseAutoClose() 成对:暂停时没有计时器就保持原状,不重启满时长;\n // 已到期则立即退场 —— 而不是把「已到期」当成「从来没有计时器」放过,那样这条 toast 会永不关闭。\n resumeAutoClose() {\n // 悬停还没结束时只交还剩余时间、不点火:搬迁降级路径也会走到这里,真正的续跑等指针\n // 离开(_resumeFromHover)再开始,否则鼠标还停着就已经在倒计时了。\n if (this._hoverPaused) return\n const remaining = this._pausedRemaining\n this._pausedRemaining = undefined\n if (remaining === undefined) return\n // 装新计时器前先拆掉可能仍在跑的旧计时器:pause/resume 一旦不再严格成对(调用序被重排),\n // 直接覆盖 `_closeTimer` 会留下两个 deadline 同时倒计时,先到的那个把 toast 提前关掉。\n this._clearTimer()\n if (remaining <= 0) {\n this.dismiss('auto')\n return\n }\n this._deadline = Date.now() + remaining\n this._closeTimer = setTimeout(() => {\n this.dismiss('auto')\n }, remaining)\n }\n\n // 由 manager 调用:播放入场动画后自动开始计时\n show() {\n this._dismissing = false\n this.visible = true\n // 挂载时指针已经压在上面(光标停在 toast 将要出现的位置):入场后直接进入暂停,\n // 不能点火 —— 那条计时会在指针还停着的时候把 toast 关掉。\n if (this._hoverPaused) {\n this._pausedRemaining = this.duration > 0 ? this.duration : undefined\n return\n }\n this.startAutoClose()\n }\n\n // 含退场动画,结束由 transitionend 驱动后派发 close。\n dismiss(reason: ToastCloseReason = 'programmatic') {\n if (this._dismissing) return\n this._dismissing = true\n // 退场优先于悬停:暂停态不再有意义,document 兜底监听也要收掉,否则退场中的\n // 元素会继续持有「指针还在上面」的状态。\n this._hoverPaused = false\n this._detachHoverFallback()\n if (!this.visible) {\n // 尚未 show()(manager 挂载之后、rAF 之前)或从未显示过:没有退场动画可播,立即派发,\n // 由 manager 的 toast-close 监听摘除元素。若在这里早退,close()/clear() 落在这段窗口\n // 里就会静默失效 —— 元素照常入场,调用方却以为已经关掉了。\n this._dispatchClose(reason)\n return\n }\n this.visible = false\n this._clearTimer()\n const onEnd = () => {\n this.removeEventListener('transitionend', onEnd)\n this._dispatchClose(reason)\n }\n this.addEventListener('transitionend', onEnd)\n // fallback: transitionend 不触发时(display:none 等)\n const toast = this.shadowRoot?.querySelector<HTMLElement>('.toast')\n setTimeout(onEnd, getTransitionDuration(toast ?? this) + 80)\n }\n\n private _clearTimer() {\n if (this._closeTimer !== undefined) {\n clearTimeout(this._closeTimer)\n this._closeTimer = undefined\n }\n }\n\n private _onPointerEnter = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (this._hoverPaused) return\n this._hoverPaused = true\n this.pauseAutoClose()\n // pointerleave 是唯一的恢复入口时,漏掉一次(指针拖出窗口、元素在悬停期间被搬迁或\n // 摘出、光标静止时布局把 toast 移走)这条 toast 就永久停在屏幕上。document 级兜底\n // 补上这个缺口:指针落到别的元素上、或离开文档,都判定悬停结束。三个信号互相兜底,\n // 因为单一信号在不同引擎上都有漏派发的场景。\n this._attachHoverFallback()\n }\n\n private _onPointerLeave = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n this._resumeFromHover()\n }\n\n // 兜底路径:指针移到别的元素上(冒泡到 document)。路径不含本元素说明指针已经不在\n // toast 上;composedPath() 覆盖 shadow DOM,指针在 toast 内部节点之间移动不算离开。\n private _onDocumentPointerOver = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (e.composedPath().includes(this)) return\n this._resumeFromHover()\n }\n\n // 兜底路径:指针移出窗口。部分引擎不保证 document 上的 pointerleave,用 relatedTarget\n // 为空的 pointerout 补上 —— 悬停中的 toast 被摘除时同样会派发这种 pointerout。\n private _onDocumentPointerOut = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (e.relatedTarget !== null) return\n this._resumeFromHover()\n }\n\n // 兜底路径:指针离开整个文档(移出窗口)。文档内的元素间移动不会派发到 document。\n private _onDocumentPointerLeave = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n this._resumeFromHover()\n }\n\n private _resumeFromHover() {\n if (!this._hoverPaused) return\n this._hoverPaused = false\n this._detachHoverFallback()\n this.resumeAutoClose()\n }\n\n private _attachHoverFallback() {\n document.addEventListener('pointerover', this._onDocumentPointerOver)\n document.addEventListener('pointerout', this._onDocumentPointerOut)\n document.addEventListener('pointerleave', this._onDocumentPointerLeave)\n }\n\n private _detachHoverFallback() {\n document.removeEventListener('pointerover', this._onDocumentPointerOver)\n document.removeEventListener('pointerout', this._onDocumentPointerOut)\n document.removeEventListener('pointerleave', this._onDocumentPointerLeave)\n }\n\n private _onCloseClick = () => {\n this.dismiss('manual')\n }\n\n private _dispatchClose(reason: ToastCloseReason) {\n this.dispatchEvent(\n new CustomEvent('toast-close', {\n detail: { id: this.toastId, reason },\n bubbles: true,\n composed: true\n })\n )\n }\n\n override render() {\n const icon = TYPE_ICONS[this.type]\n const ariaLive = this.type === 'error' ? 'assertive' : 'polite'\n // role=\"alert\" 会强制隐式 aria-live=\"assertive\",覆盖掉上方 aria-live 设置,\n // 因此仅 error toast 使用 alert(本就应 assertive);其余类型交给容器 role=\"log\" 的 polite 播报。\n const role = this.type === 'error' ? 'alert' : nothing\n\n return html`\n <div class=\"toast wui-glass ${this.type}\" role=${role} aria-live=${ariaLive} aria-atomic=\"true\">\n <span class=\"toast-icon\" aria-hidden=\"true\">\n <web-ui-icon .icon=${icon} size=\"14\"></web-ui-icon>\n </span>\n <div class=\"toast-body\">\n ${this.heading ? html`<div class=\"toast-heading\">${this.heading}</div>` : nothing}\n <div class=\"toast-message\">${this.message}</div>\n </div>\n <span class=\"toast-time\">${_formatTime()}</span>\n ${\n !this.noCloseButton\n ? html`\n <web-ui-button\n class=\"toast-close-btn\"\n icon\n variant=\"secondary\"\n size=\"24\"\n aria-label=\"关闭\"\n @click=${this._onCloseClick}\n >\n <web-ui-icon .icon=${heroiconsXMark16Solid} size=\"16\"></web-ui-icon>\n </web-ui-button>\n `\n : nothing\n }\n </div>\n `\n }\n\n declare readonly $events: {\n 'toast-close': CustomEvent<{ id: string; reason: ToastCloseReason }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-toast': WebUiToast\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"toast.js","names":[],"sources":["../../../src/components/toast/toast.ts"],"sourcesContent":["// web-ui-button 复用 icon 变体的焦点环与统一样式(secondary 变体,浅灰底贴合 toast 角落)\nimport '@/components/button'\nimport '@/components/icon'\n\nimport type { IconifyIcon } from '@iconify/types'\nimport { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport {\n lucideInfo,\n lucideTriangleAlert,\n lucideCircleAlert,\n heroiconsXMark16Solid,\n heroiconsCheck16Solid\n} from '@/icons'\nimport { getTransitionDuration } from '@/shared/overlay/presence'\n\nimport style from './style.css?inline'\nimport type { ToastCloseReason, ToastPosition, ToastType } from './types'\n\nconst TYPE_ICONS: Record<ToastType, IconifyIcon> = {\n success: heroiconsCheck16Solid,\n info: lucideInfo,\n warning: lucideTriangleAlert,\n error: lucideCircleAlert\n}\n\nfunction _formatTime(): string {\n const now = new Date()\n const h = now.getHours().toString().padStart(2, '0')\n const m = now.getMinutes().toString().padStart(2, '0')\n return `${h}:${m}`\n}\n\n@customElement('web-ui-toast')\nexport class WebUiToast extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: String, attribute: false }) toastId = ''\n @property({ type: String, reflect: true }) type: ToastType = 'info'\n @property({ type: String, reflect: true }) position: ToastPosition = 'top-right'\n @property({ type: String }) heading = ''\n @property({ type: String }) message = ''\n @property({ type: Number }) duration = 3000\n @property({ type: Boolean, reflect: true, attribute: 'no-close-button' }) noCloseButton = false\n @property({ type: Boolean, reflect: true }) visible = false\n\n private _closeTimer?: ReturnType<typeof setTimeout>\n private _deadline = 0\n /**\n * 暂停自动关闭时记下的剩余时间。`undefined` 表示暂停时本来就没有计时器(`duration` 为 0、\n * 或元素尚未 `show()`),与「已到期」(剩余 0)是两件事,不能共用一个 0。\n */\n private _pausedRemaining?: number\n /** 指针停在 toast 上:计时处于悬停暂停态,只有指针离开才能续跑。 */\n private _hoverPaused = false\n private _dismissing = false\n\n /**\n * 退场已开始、`toast-close` 尚未派发。这段窗口内元素仍连接在 DOM、也仍被 manager 的映射\n * 持有,但已不再接受属性更新:manager 的 upsert 据此走新建路径,否则「更新」会写进一条\n * 正在消失的元素里 —— 调用方拿到同一个 id,却看不到任何可见通知。\n */\n get dismissing(): boolean {\n return this._dismissing\n }\n\n /** 指针仍停在 toast 上,自动关闭计时处于暂停态。 */\n get hoverPaused(): boolean {\n return this._hoverPaused\n }\n\n override connectedCallback() {\n super.connectedCallback()\n this.addEventListener('pointerenter', this._onPointerEnter)\n this.addEventListener('pointerleave', this._onPointerLeave)\n // 悬停中被搬迁(不支持 moveBefore 的引擎走摘出重插)时暂停态要连兜底一起带回来,\n // 否则新位置上既没有 document 监听、也不会再补发 pointerenter,这条 toast 又变成永久停留。\n if (this._hoverPaused) this._attachHoverFallback()\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this.removeEventListener('pointerenter', this._onPointerEnter)\n this.removeEventListener('pointerleave', this._onPointerLeave)\n this._detachHoverFallback()\n this._clearTimer()\n }\n\n /**\n * 定义该回调后,`Element.moveBefore()` 搬迁节点不再触发 disconnected/connected,\n * 自动关闭计时与动画状态得以保留;未定义时旧引擎会走摘出重插,计时被 `_clearTimer()` 清掉。\n */\n connectedMoveCallback() {}\n\n protected override updated(changed: PropertyValues) {\n if (changed.has('position')) {\n this._applySlideDirection()\n }\n }\n\n private _applySlideDirection() {\n const SLIDE_OFFSET = 20\n let x = 0\n let y = 0\n\n if (this.position.includes('left')) x = -SLIDE_OFFSET\n else if (this.position.includes('right')) x = SLIDE_OFFSET\n\n if (this.position.startsWith('top')) y = -SLIDE_OFFSET\n else if (this.position.startsWith('bottom')) y = SLIDE_OFFSET\n\n this.style.setProperty('--toast-slide-x', `${x}px`)\n this.style.setProperty('--toast-slide-y', `${y}px`)\n }\n\n startAutoClose() {\n this._clearTimer()\n if (this.duration > 0) {\n this._deadline = Date.now() + this.duration\n this._closeTimer = setTimeout(() => {\n this.dismiss('auto')\n }, this.duration)\n }\n }\n\n /**\n * 由 manager 调用:显式 `duration` 更新。悬停暂停期间只记新值、不点火 —— 否则指针还压在\n * toast 上时计时就被重启,「悬停暂停」在这条路径上直接失效。恢复时按新 duration 计满:\n * 调用方显式改了生命周期,续跑按旧时长算出的剩余没有意义。`0` 表示不自动关闭,记成\n * 「没有计时器」,否则恢复时会被当成「已到期」立即退场。\n */\n setDuration(ms: number) {\n this.duration = ms\n if (this._hoverPaused) {\n this._pausedRemaining = ms > 0 ? ms : undefined\n return\n }\n this.startAutoClose()\n }\n\n // 不支持 moveBefore 的引擎上搬迁节点前调用:记下剩余时间,搬完由 resumeAutoClose() 续跑。\n pauseAutoClose() {\n // 已经在暂停态时保留既有剩余:悬停暂停期间若发生搬迁,降级路径也会走到这里,无条件\n // 重算会把悬停记下的剩余抹成「没有计时器」,指针离开后这条 toast 就再也不会关闭。\n if (this._closeTimer === undefined && this._pausedRemaining !== undefined) return\n // 计时器仍在跑时剩余时间可能算出 0:deadline 已过、回调还排在队列里没执行。这一支与\n // 「本来就没有计时器」必须分开记(undefined vs 0),否则续跑无法区分两者。\n this._pausedRemaining = this._closeTimer === undefined ? undefined : Math.max(0, this._deadline - Date.now())\n this._clearTimer()\n }\n\n // 与 pauseAutoClose() 成对:暂停时没有计时器就保持原状,不重启满时长;\n // 已到期则立即退场 —— 而不是把「已到期」当成「从来没有计时器」放过,那样这条 toast 会永不关闭。\n resumeAutoClose() {\n // 悬停还没结束时只交还剩余时间、不点火:搬迁降级路径也会走到这里,真正的续跑等指针\n // 离开(_resumeFromHover)再开始,否则鼠标还停着就已经在倒计时了。\n if (this._hoverPaused) return\n const remaining = this._pausedRemaining\n this._pausedRemaining = undefined\n if (remaining === undefined) return\n // 装新计时器前先拆掉可能仍在跑的旧计时器:pause/resume 一旦不再严格成对(调用序被重排),\n // 直接覆盖 `_closeTimer` 会留下两个 deadline 同时倒计时,先到的那个把 toast 提前关掉。\n this._clearTimer()\n if (remaining <= 0) {\n this.dismiss('auto')\n return\n }\n this._deadline = Date.now() + remaining\n this._closeTimer = setTimeout(() => {\n this.dismiss('auto')\n }, remaining)\n }\n\n // 由 manager 调用:播放入场动画后自动开始计时\n show() {\n this._dismissing = false\n this.visible = true\n // 挂载时指针已经压在上面(光标停在 toast 将要出现的位置):入场后直接进入暂停,\n // 不能点火 —— 那条计时会在指针还停着的时候把 toast 关掉。\n if (this._hoverPaused) {\n this._pausedRemaining = this.duration > 0 ? this.duration : undefined\n return\n }\n this.startAutoClose()\n }\n\n // 含退场动画,结束由 transitionend 驱动后派发 close。\n dismiss(reason: ToastCloseReason = 'programmatic') {\n if (this._dismissing) return\n this._dismissing = true\n // 退场优先于悬停:暂停态不再有意义,document 兜底监听也要收掉,否则退场中的\n // 元素会继续持有「指针还在上面」的状态。\n this._hoverPaused = false\n this._detachHoverFallback()\n if (!this.visible) {\n // 尚未 show()(manager 挂载之后、rAF 之前)或从未显示过:没有退场动画可播,立即派发,\n // 由 manager 的 toast-close 监听摘除元素。若在这里早退,close()/clear() 落在这段窗口\n // 里就会静默失效 —— 元素照常入场,调用方却以为已经关掉了。\n this._dispatchClose(reason)\n return\n }\n this.visible = false\n this._clearTimer()\n const onEnd = () => {\n this.removeEventListener('transitionend', onEnd)\n this._dispatchClose(reason)\n }\n this.addEventListener('transitionend', onEnd)\n // fallback: transitionend 不触发时(display:none 等)\n const toast = this.shadowRoot?.querySelector<HTMLElement>('.toast')\n setTimeout(onEnd, getTransitionDuration(toast ?? this) + 80)\n }\n\n private _clearTimer() {\n if (this._closeTimer !== undefined) {\n clearTimeout(this._closeTimer)\n this._closeTimer = undefined\n }\n }\n\n private _onPointerEnter = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (this._hoverPaused) return\n this._hoverPaused = true\n this.pauseAutoClose()\n // pointerleave 是唯一的恢复入口时,漏掉一次(指针拖出窗口、元素在悬停期间被搬迁或\n // 摘出、光标静止时布局把 toast 移走)这条 toast 就永久停在屏幕上。document 级兜底\n // 补上这个缺口:指针落到别的元素上、或离开文档,都判定悬停结束。三个信号互相兜底,\n // 因为单一信号在不同引擎上都有漏派发的场景。\n this._attachHoverFallback()\n }\n\n private _onPointerLeave = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n this._resumeFromHover()\n }\n\n // 兜底路径:指针移到别的元素上(冒泡到 document)。路径不含本元素说明指针已经不在\n // toast 上;composedPath() 覆盖 shadow DOM,指针在 toast 内部节点之间移动不算离开。\n private _onDocumentPointerOver = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (e.composedPath().includes(this)) return\n this._resumeFromHover()\n }\n\n // 兜底路径:指针移出窗口。部分引擎不保证 document 上的 pointerleave,用 relatedTarget\n // 为空的 pointerout 补上 —— 悬停中的 toast 被摘除时同样会派发这种 pointerout。\n private _onDocumentPointerOut = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (e.relatedTarget !== null) return\n this._resumeFromHover()\n }\n\n // 兜底路径:指针离开整个文档(移出窗口)。文档内的元素间移动不会派发到 document。\n private _onDocumentPointerLeave = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n this._resumeFromHover()\n }\n\n private _resumeFromHover() {\n if (!this._hoverPaused) return\n this._hoverPaused = false\n this._detachHoverFallback()\n this.resumeAutoClose()\n }\n\n private _attachHoverFallback() {\n document.addEventListener('pointerover', this._onDocumentPointerOver)\n document.addEventListener('pointerout', this._onDocumentPointerOut)\n document.addEventListener('pointerleave', this._onDocumentPointerLeave)\n }\n\n private _detachHoverFallback() {\n document.removeEventListener('pointerover', this._onDocumentPointerOver)\n document.removeEventListener('pointerout', this._onDocumentPointerOut)\n document.removeEventListener('pointerleave', this._onDocumentPointerLeave)\n }\n\n private _onCloseClick = () => {\n this.dismiss('manual')\n }\n\n private _dispatchClose(reason: ToastCloseReason) {\n this.dispatchEvent(\n new CustomEvent('toast-close', {\n detail: { id: this.toastId, reason },\n bubbles: true,\n composed: true\n })\n )\n }\n\n override render() {\n const icon = TYPE_ICONS[this.type]\n const ariaLive = this.type === 'error' ? 'assertive' : 'polite'\n // role=\"alert\" 会强制隐式 aria-live=\"assertive\",覆盖掉上方 aria-live 设置,\n // 因此仅 error toast 使用 alert(本就应 assertive);其余类型交给容器 role=\"log\" 的 polite 播报。\n const role = this.type === 'error' ? 'alert' : nothing\n\n return html`\n <div class=\"toast wui-glass ${this.type}\" role=${role} aria-live=${ariaLive} aria-atomic=\"true\">\n <span class=\"toast-icon\" aria-hidden=\"true\">\n <web-ui-icon .icon=${icon} size=\"14\"></web-ui-icon>\n </span>\n <div class=\"toast-body\">\n ${this.heading ? html`<div class=\"toast-heading\">${this.heading}</div>` : nothing}\n <div class=\"toast-message\">${this.message}</div>\n </div>\n <span class=\"toast-time\">${_formatTime()}</span>\n ${\n !this.noCloseButton\n ? html`\n <web-ui-button\n class=\"toast-close-btn\"\n icon\n variant=\"secondary\"\n size=\"24\"\n aria-label=\"Close\"\n @click=${this._onCloseClick}\n >\n <web-ui-icon .icon=${heroiconsXMark16Solid} size=\"16\"></web-ui-icon>\n </web-ui-button>\n `\n : nothing\n }\n </div>\n `\n }\n\n declare readonly $events: {\n 'toast-close': CustomEvent<{ id: string; reason: ToastCloseReason }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-toast': WebUiToast\n }\n}\n"],"mappings":"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"}
|
|
@@ -27,7 +27,7 @@ export declare class WebUiTooltip extends LitElement {
|
|
|
27
27
|
private _shouldOpenInstantly;
|
|
28
28
|
private _portal?;
|
|
29
29
|
/**
|
|
30
|
-
* 实例作用域的帧事务入口。`requestClose`
|
|
30
|
+
* 实例作用域的帧事务入口。`requestClose` 是关闭入口的唯一接线:panel 的
|
|
31
31
|
* `arbitration: 'none'` 让 tooltip 在组合树里但永不成候选,因此这条**现在不会被
|
|
32
32
|
* 模块调用**。保留它是不想把「怎么关」藏起来,也让仲裁策略变化时依然成立。
|
|
33
33
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/tooltip/index.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport overlayMotion from '@/assets/overlay-motion.css?inline'\nimport { UserChangeController } from '@/shared/events/user-change'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\nimport { dispatchOpenChangeEvent } from '@/shared/open-state'\nimport { defineAnchoredPanel } from '@/shared/overlay/anchored-panel'\nimport { defineOpenOverlay } from '@/shared/overlay/open-overlay'\nimport { FLOATING_PLACEMENTS } from '@/shared/overlay/placement-props'\nimport { defineOverlayPortal, type OverlayContainer, type OverlayPortal } from '@/shared/overlay/portal'\n\nimport style from './style.css?inline'\n\nlet visibleTooltipCount = 0\n\n@customElement('web-ui-tooltip')\nexport class WebUiTooltip extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(overlayMotion), unsafeCSS(style)]\n\n @property({ type: String, reflect: true })\n get placement(): Placement {\n return this._placement\n }\n set placement(v: string) {\n const old = this._placement\n this._placement = normalizeLiteral(v, FLOATING_PLACEMENTS, 'top')\n this.requestUpdate('placement', old)\n }\n private _placement: Placement = 'top'\n\n @property({ type: Number, attribute: 'show-delay' })\n get showDelay(): number {\n return this._showDelay\n }\n set showDelay(v: number) {\n const old = this._showDelay\n this._showDelay = normalizeNumber(v, 0, 5000, 200)\n this.requestUpdate('showDelay', old)\n }\n private _showDelay = 200\n\n @property({ type: Number, attribute: 'hide-delay' })\n get hideDelay(): number {\n return this._hideDelay\n }\n set hideDelay(v: number) {\n const old = this._hideDelay\n this._hideDelay = normalizeNumber(v, 0, 5000, 100)\n this.requestUpdate('hideDelay', old)\n }\n private _hideDelay = 100\n\n @property({ type: Boolean, reflect: true }) disabled = false\n\n @property({ type: Number })\n get offset(): number {\n return this._offset\n }\n set offset(v: number) {\n const old = this._offset\n this._offset = normalizeNumber(v, 0, 100, 6)\n this.requestUpdate('offset', old)\n }\n private _offset = 6\n\n @property({ type: String }) content = ''\n\n @property({ type: Boolean, reflect: true }) open = false\n @property({ type: Boolean, reflect: true }) portal = false\n @property({ attribute: false }) overlayContainer?: OverlayContainer\n\n private _showTimer?: ReturnType<typeof setTimeout>\n private _hideTimer?: ReturnType<typeof setTimeout>\n private _isCountedVisible = false\n private readonly _userOpenChange = new UserChangeController()\n private _shouldOpenInstantly = true\n private _portal?: OverlayPortal\n /**\n * 实例作用域的帧事务入口。`requestClose` 是关闭入口的唯一接线:面板的\n * `arbitration: 'none'` 让 tooltip 在组合树里但永不成候选,因此这条**现在不会被\n * 模块调用**。保留它是不想把「怎么关」藏起来,也让仲裁策略变化时依然成立。\n */\n private readonly _overlay = defineOpenOverlay().make({\n requestClose: () => this._hide(),\n isConnected: () => this.isConnected\n })\n private readonly _panel = defineAnchoredPanel().make({\n getAnchor: () => this.shadowRoot?.querySelector<HTMLElement>('.tooltip-trigger') ?? null,\n getLocalPanel: () => this.shadowRoot?.querySelector<HTMLElement>('.tooltip-panel') ?? null,\n getPositioning: () => ({\n placement: this.placement,\n offset: this.offset,\n strategy: this.portal ? 'fixed' : 'absolute'\n }),\n isPortal: () => this.portal,\n createPortal: () => this._createPortal(),\n openOverlay: this._overlay,\n // tooltip 在逻辑组合树里(面板迁移后仍要判对「谁在谁里面」),但从不作为 Escape\n // 候选:按键穿过它落到下层浮层,与重构前一致。\n arbitration: 'none'\n })\n\n get isOpen(): boolean {\n return this.open\n }\n\n override connectedCallback() {\n super.connectedCallback()\n this._overlay.resume()\n this.addEventListener('pointerenter', this._onPointerEnter)\n this.addEventListener('pointerleave', this._onPointerLeave)\n this.addEventListener('focusin', this._onFocusIn)\n this.addEventListener('focusout', this._onFocusOut)\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this.removeEventListener('pointerenter', this._onPointerEnter)\n this.removeEventListener('pointerleave', this._onPointerLeave)\n this.removeEventListener('focusin', this._onFocusIn)\n this.removeEventListener('focusout', this._onFocusOut)\n clearTimeout(this._showTimer)\n clearTimeout(this._hideTimer)\n // 停止帧调度;撤销登记由 _panel.dispose() 完成(句柄归它持有)。\n this._overlay.suspend()\n this._syncVisibleTooltipCount(false)\n this._panel.dispose()\n }\n\n override firstUpdated() {\n if (this.open) {\n this._openOverlay(this._shouldOpenInstantly)\n this._shouldOpenInstantly = true\n }\n }\n\n protected override updated(changed: Map<string, unknown>) {\n if (changed.has('portal') || changed.has('overlayContainer')) {\n // 同帧 open + reconfigure 可能重复建事务;invalidate 保证 reconfigure 是当前唯一帧回调。\n this._overlay.invalidate()\n this._overlay.scheduleFrame(() => this._reconfigureOverlay())\n } else if (changed.has('placement') || changed.has('offset'))\n requestAnimationFrame(() => this._panel.updatePosition())\n\n if (changed.has('open')) {\n this._syncVisibleTooltipCount(this.open)\n if (this.open) {\n this._openOverlay(this._shouldOpenInstantly)\n this._shouldOpenInstantly = true\n } else {\n this._overlay.invalidate()\n void this._closeOverlay()\n }\n if (this._userOpenChange.consume()) this._dispatchChange(this.open)\n }\n if (changed.has('content')) this._syncPortalContent()\n }\n\n private _onPointerEnter = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (this.disabled) return\n clearTimeout(this._hideTimer)\n // 已有 tooltip 在场时(指针滑到相邻目标):既不等延迟,也不播入场动画。\n const isRepeat = visibleTooltipCount > 0\n this._showTimer = setTimeout(() => this._show(isRepeat), isRepeat ? 0 : this.showDelay)\n }\n\n private _onPointerLeave = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (this.disabled) return\n clearTimeout(this._showTimer)\n this._hideTimer = setTimeout(() => this._hide(), this.hideDelay)\n }\n\n private _onFocusIn = (event: FocusEvent) => {\n if (this.disabled) return\n if (!(event.target instanceof Element) || !event.target.matches(':focus-visible')) return\n\n clearTimeout(this._hideTimer)\n this._show(true)\n }\n\n private _onFocusOut = () => {\n if (this.disabled) return\n clearTimeout(this._showTimer)\n this._hide()\n }\n\n private _show(isInstant = false) {\n if (this.open) return\n this._shouldOpenInstantly = isInstant\n this._userOpenChange.mark()\n this.open = true\n }\n\n private _hide() {\n if (!this.open) return\n this._userOpenChange.mark()\n this.open = false\n }\n\n private _openOverlay(isInstant = false) {\n this._panel.open(isInstant)\n }\n\n private _createPortal(): OverlayPortal {\n const portal = defineOverlayPortal().make({\n container: this.overlayContainer,\n target: this,\n style: `${glass}\\n${overlayMotion}\\n${style}`,\n className: 'tooltip-panel portal wui-glass wui-floating-panel',\n // 已迁移节点被框架删除后的解除追踪是 portal 内建默认行为,这里无需 onContentChange\n // 打开期实时渲染:新增的 slot=content 元素实时迁入面板(注释锚点无法携带\n // slot 属性,天然留在宿主作为框架 patch 的插入基准)。\n migrateAddedNodes: addedNodes =>\n addedNodes.filter(node => node instanceof Element && node.getAttribute('slot') === 'content')\n })\n this._portal = portal\n if (this.content) {\n const text = document.createElement('span')\n text.className = 'tooltip-text'\n text.textContent = this.content\n portal.panel.append(text)\n } else portal.moveContent(Array.from(this.querySelectorAll('[slot=\"content\"]')))\n portal.panel.setAttribute('role', 'tooltip')\n return portal\n }\n\n private async _closeOverlay() {\n await this._panel.close(() => this.open)\n }\n\n private _reconfigureOverlay() {\n this._panel.reconfigure(this.open)\n }\n\n private _syncPortalContent() {\n if (!this.portal || !this.open) return\n const localPanel = this._panel.getPanel()\n if (!localPanel) return\n const panel = this._portal?.panel ?? localPanel\n const text = localPanel.querySelector<HTMLElement>('.tooltip-text')\n if (text) {\n text.textContent = this.content\n return\n }\n if (!this.content) return\n panel.replaceChildren()\n const nextText = document.createElement('span')\n nextText.className = 'tooltip-text'\n nextText.textContent = this.content\n panel.append(nextText)\n }\n\n private _dispatchChange(open: boolean) {\n dispatchOpenChangeEvent(this, open)\n }\n\n private _syncVisibleTooltipCount(isVisible: boolean) {\n if (isVisible && !this._isCountedVisible) {\n visibleTooltipCount += 1\n this._isCountedVisible = true\n } else if (!isVisible && this._isCountedVisible) {\n visibleTooltipCount = Math.max(0, visibleTooltipCount - 1)\n this._isCountedVisible = false\n }\n }\n\n override render() {\n return html`\n <div class=\"tooltip-anchor\">\n <div class=\"tooltip-trigger\"><slot></slot></div>\n <div class=\"tooltip-panel wui-floating-panel wui-glass\" hidden role=\"tooltip\">\n ${this.content ? html`<span class=\"tooltip-text\">${this.content}</span>` : html`<slot name=\"content\"></slot>`}\n </div>\n </div>\n `\n }\n\n declare readonly $events: {\n 'open-change': CustomEvent<{ open: boolean }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-tooltip': WebUiTooltip\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/tooltip/index.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport overlayMotion from '@/assets/overlay-motion.css?inline'\nimport { UserChangeController } from '@/shared/events/user-change'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\nimport { dispatchOpenChangeEvent } from '@/shared/open-state'\nimport { defineAnchoredPanel } from '@/shared/overlay/anchored-panel'\nimport { defineOpenOverlay } from '@/shared/overlay/open-overlay'\nimport { FLOATING_PLACEMENTS } from '@/shared/overlay/placement-props'\nimport { defineOverlayPortal, type OverlayContainer, type OverlayPortal } from '@/shared/overlay/portal'\n\nimport style from './style.css?inline'\n\nlet visibleTooltipCount = 0\n\n@customElement('web-ui-tooltip')\nexport class WebUiTooltip extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(overlayMotion), unsafeCSS(style)]\n\n @property({ type: String, reflect: true })\n get placement(): Placement {\n return this._placement\n }\n set placement(v: string) {\n const old = this._placement\n this._placement = normalizeLiteral(v, FLOATING_PLACEMENTS, 'top')\n this.requestUpdate('placement', old)\n }\n private _placement: Placement = 'top'\n\n @property({ type: Number, attribute: 'show-delay' })\n get showDelay(): number {\n return this._showDelay\n }\n set showDelay(v: number) {\n const old = this._showDelay\n this._showDelay = normalizeNumber(v, 0, 5000, 200)\n this.requestUpdate('showDelay', old)\n }\n private _showDelay = 200\n\n @property({ type: Number, attribute: 'hide-delay' })\n get hideDelay(): number {\n return this._hideDelay\n }\n set hideDelay(v: number) {\n const old = this._hideDelay\n this._hideDelay = normalizeNumber(v, 0, 5000, 100)\n this.requestUpdate('hideDelay', old)\n }\n private _hideDelay = 100\n\n @property({ type: Boolean, reflect: true }) disabled = false\n\n @property({ type: Number })\n get offset(): number {\n return this._offset\n }\n set offset(v: number) {\n const old = this._offset\n this._offset = normalizeNumber(v, 0, 100, 6)\n this.requestUpdate('offset', old)\n }\n private _offset = 6\n\n @property({ type: String }) content = ''\n\n @property({ type: Boolean, reflect: true }) open = false\n @property({ type: Boolean, reflect: true }) portal = false\n @property({ attribute: false }) overlayContainer?: OverlayContainer\n\n private _showTimer?: ReturnType<typeof setTimeout>\n private _hideTimer?: ReturnType<typeof setTimeout>\n private _isCountedVisible = false\n private readonly _userOpenChange = new UserChangeController()\n private _shouldOpenInstantly = true\n private _portal?: OverlayPortal\n /**\n * 实例作用域的帧事务入口。`requestClose` 是关闭入口的唯一接线:panel 的\n * `arbitration: 'none'` 让 tooltip 在组合树里但永不成候选,因此这条**现在不会被\n * 模块调用**。保留它是不想把「怎么关」藏起来,也让仲裁策略变化时依然成立。\n */\n private readonly _overlay = defineOpenOverlay().make({\n requestClose: () => this._hide(),\n isConnected: () => this.isConnected\n })\n private readonly _panel = defineAnchoredPanel().make({\n getAnchor: () => this.shadowRoot?.querySelector<HTMLElement>('.tooltip-trigger') ?? null,\n getLocalPanel: () => this.shadowRoot?.querySelector<HTMLElement>('.tooltip-panel') ?? null,\n getPositioning: () => ({\n placement: this.placement,\n offset: this.offset,\n strategy: this.portal ? 'fixed' : 'absolute'\n }),\n isPortal: () => this.portal,\n createPortal: () => this._createPortal(),\n openOverlay: this._overlay,\n // tooltip 在逻辑组合树里(panel 迁移后仍要判对「谁在谁里面」),但从不作为 Escape\n // 候选:按键穿过它落到下层 overlay,与重构前一致。\n arbitration: 'none'\n })\n\n get isOpen(): boolean {\n return this.open\n }\n\n override connectedCallback() {\n super.connectedCallback()\n this._overlay.resume()\n this.addEventListener('pointerenter', this._onPointerEnter)\n this.addEventListener('pointerleave', this._onPointerLeave)\n this.addEventListener('focusin', this._onFocusIn)\n this.addEventListener('focusout', this._onFocusOut)\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this.removeEventListener('pointerenter', this._onPointerEnter)\n this.removeEventListener('pointerleave', this._onPointerLeave)\n this.removeEventListener('focusin', this._onFocusIn)\n this.removeEventListener('focusout', this._onFocusOut)\n clearTimeout(this._showTimer)\n clearTimeout(this._hideTimer)\n // 停止帧调度;撤销登记由 _panel.dispose() 完成(handle 归它持有)。\n this._overlay.suspend()\n this._syncVisibleTooltipCount(false)\n this._panel.dispose()\n }\n\n override firstUpdated() {\n if (this.open) {\n this._openOverlay(this._shouldOpenInstantly)\n this._shouldOpenInstantly = true\n }\n }\n\n protected override updated(changed: Map<string, unknown>) {\n if (changed.has('portal') || changed.has('overlayContainer')) {\n // 同帧 open + reconfigure 可能重复建事务;invalidate 保证 reconfigure 是当前唯一帧回调。\n this._overlay.invalidate()\n this._overlay.scheduleFrame(() => this._reconfigureOverlay())\n } else if (changed.has('placement') || changed.has('offset'))\n requestAnimationFrame(() => this._panel.updatePosition())\n\n if (changed.has('open')) {\n this._syncVisibleTooltipCount(this.open)\n if (this.open) {\n this._openOverlay(this._shouldOpenInstantly)\n this._shouldOpenInstantly = true\n } else {\n this._overlay.invalidate()\n void this._closeOverlay()\n }\n if (this._userOpenChange.consume()) this._dispatchChange(this.open)\n }\n if (changed.has('content')) this._syncPortalContent()\n }\n\n private _onPointerEnter = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (this.disabled) return\n clearTimeout(this._hideTimer)\n // 已有 tooltip 在场时(指针滑到相邻目标):既不等延迟,也不播入场动画。\n const isRepeat = visibleTooltipCount > 0\n this._showTimer = setTimeout(() => this._show(isRepeat), isRepeat ? 0 : this.showDelay)\n }\n\n private _onPointerLeave = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (this.disabled) return\n clearTimeout(this._showTimer)\n this._hideTimer = setTimeout(() => this._hide(), this.hideDelay)\n }\n\n private _onFocusIn = (event: FocusEvent) => {\n if (this.disabled) return\n if (!(event.target instanceof Element) || !event.target.matches(':focus-visible')) return\n\n clearTimeout(this._hideTimer)\n this._show(true)\n }\n\n private _onFocusOut = () => {\n if (this.disabled) return\n clearTimeout(this._showTimer)\n this._hide()\n }\n\n private _show(isInstant = false) {\n if (this.open) return\n this._shouldOpenInstantly = isInstant\n this._userOpenChange.mark()\n this.open = true\n }\n\n private _hide() {\n if (!this.open) return\n this._userOpenChange.mark()\n this.open = false\n }\n\n private _openOverlay(isInstant = false) {\n this._panel.open(isInstant)\n }\n\n private _createPortal(): OverlayPortal {\n const portal = defineOverlayPortal().make({\n container: this.overlayContainer,\n target: this,\n style: `${glass}\\n${overlayMotion}\\n${style}`,\n className: 'tooltip-panel portal wui-glass wui-floating-panel',\n // 已迁移节点被框架删除后的解除追踪是 portal 内建默认行为,这里无需 onContentChange\n // 打开期实时渲染:新增的 slot=content 元素实时迁入 panel(注释锚点无法携带\n // slot 属性,天然留在宿主作为框架 patch 的插入基准)。\n migrateAddedNodes: addedNodes =>\n addedNodes.filter(node => node instanceof Element && node.getAttribute('slot') === 'content')\n })\n this._portal = portal\n if (this.content) {\n const text = document.createElement('span')\n text.className = 'tooltip-text'\n text.textContent = this.content\n portal.panel.append(text)\n } else portal.moveContent(Array.from(this.querySelectorAll('[slot=\"content\"]')))\n portal.panel.setAttribute('role', 'tooltip')\n return portal\n }\n\n private async _closeOverlay() {\n await this._panel.close(() => this.open)\n }\n\n private _reconfigureOverlay() {\n this._panel.reconfigure(this.open)\n }\n\n private _syncPortalContent() {\n if (!this.portal || !this.open) return\n const localPanel = this._panel.getPanel()\n if (!localPanel) return\n const panel = this._portal?.panel ?? localPanel\n const text = localPanel.querySelector<HTMLElement>('.tooltip-text')\n if (text) {\n text.textContent = this.content\n return\n }\n if (!this.content) return\n panel.replaceChildren()\n const nextText = document.createElement('span')\n nextText.className = 'tooltip-text'\n nextText.textContent = this.content\n panel.append(nextText)\n }\n\n private _dispatchChange(open: boolean) {\n dispatchOpenChangeEvent(this, open)\n }\n\n private _syncVisibleTooltipCount(isVisible: boolean) {\n if (isVisible && !this._isCountedVisible) {\n visibleTooltipCount += 1\n this._isCountedVisible = true\n } else if (!isVisible && this._isCountedVisible) {\n visibleTooltipCount = Math.max(0, visibleTooltipCount - 1)\n this._isCountedVisible = false\n }\n }\n\n override render() {\n return html`\n <div class=\"tooltip-anchor\">\n <div class=\"tooltip-trigger\"><slot></slot></div>\n <div class=\"tooltip-panel wui-floating-panel wui-glass\" hidden role=\"tooltip\">\n ${this.content ? html`<span class=\"tooltip-text\">${this.content}</span>` : html`<slot name=\"content\"></slot>`}\n </div>\n </div>\n `\n }\n\n declare readonly $events: {\n 'open-change': CustomEvent<{ open: boolean }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-tooltip': WebUiTooltip\n }\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/tooltip/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: inline-flex;\n}\n\n.tooltip-trigger {\n display: inline-flex;\n}\n\n.tooltip-anchor {\n position: relative;\n display: inline-flex;\n}\n\n.tooltip-panel {\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\n /* 环底色转 transparent
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/tooltip/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: inline-flex;\n}\n\n.tooltip-trigger {\n display: inline-flex;\n}\n\n.tooltip-anchor {\n position: relative;\n display: inline-flex;\n}\n\n.tooltip-panel {\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\n /* 环底色转 transparent,宽 panel 的长边中段不留铺底,见 menu-portal.css 同处注释。 */\n --wui-color-glass-ring: transparent;\n\n pointer-events: none;\n\n position: absolute;\n z-index: var(--wui-layer-inline-overlay, 1);\n top: -9999px;\n left: -9999px;\n\n box-sizing: border-box;\n width: max-content;\n max-width: var(--wui-tooltip-max-width, 240px);\n padding: 6px 10px;\n border-radius: var(--wui-radius-menu, 18px);\n\n font-size: var(--wui-tooltip-font-size, 13px);\n color: var(--wui-color-text, #1b1b1b);\n\n /* 玻璃背景:wui-glass 在 panel 自身,这里覆盖其默认玻璃底为 menu surface 色 */\n background-color: var(--wui-color-surface-menu, rgb(250 250 250 / 0.76));\n}\n\n.tooltip-panel.portal {\n position: fixed;\n z-index: var(--wui-layer-menu, 100);\n}\n\n.tooltip-panel.hidden {\n display: none;\n}\n\n.tooltip-text {\n display: block;\n overflow-wrap: break-word;\n white-space: normal;\n}\n\n:host([portal]) .tooltip-panel {\n display: none;\n}\n"],"mappings":""}
|
|
@@ -4,7 +4,7 @@ import { PartialOptions } from 'overlayscrollbars';
|
|
|
4
4
|
*/
|
|
5
5
|
export declare const WEB_UI_SCROLLBARS_THEME = "os-theme-macos";
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* 全仓统一的 scrollbar 行为:外观对齐 macOS、自动隐藏、滚动时短暂显示、track 点击直达。
|
|
8
8
|
*
|
|
9
9
|
* 内容尺寸或平台变化都不需要改这里,只有三条产品要求本身变了才改。覆盖层要实现的是
|
|
10
10
|
* 同一套手势语言,所以用法是把它整个传给 OverlayScrollbars 初始化,而不是逐项拼接:
|
|
@@ -14,17 +14,17 @@ export declare const WEB_UI_SCROLLBARS_THEME = "os-theme-macos";
|
|
|
14
14
|
* import '@greypan/web-ui/scrollbars.css'
|
|
15
15
|
* ```
|
|
16
16
|
*
|
|
17
|
-
* - `autoHide: 'scroll'
|
|
17
|
+
* - `autoHide: 'scroll'`:scrollbar 只在滚动时出现,停下 `autoHideDelay` 之后自动隐去。用户明确选了
|
|
18
18
|
* 这一档而不是 `'move'`——`'move'` 会让指针在滚动区域内移动就唤出,比 macOS 原生积极得多。
|
|
19
|
-
* 代价写清楚:**hover
|
|
19
|
+
* 代价写清楚:**hover 本身不再唤出 scrollbar**(隐藏态的元素不可命中,指针根本落不到它上面),
|
|
20
20
|
* 所以 issue 里「hover 的时候短暂显示」那条只以「滚动时短暂显示」的形式满足。
|
|
21
|
-
* - `autoHideDelay: 2000`:这一档同时是「track
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
* - `autoHideSuspend`
|
|
21
|
+
* - `autoHideDelay: 2000`:这一档同时是「track 点击跳转」的可用窗口——scrollbar 隐去后它就不可命中。
|
|
22
|
+
* 指针从滚动的位置移到 track、再点下去,实测预算在 1s 上下,默认的 1300ms 太贴边;2000ms 留出
|
|
23
|
+
* 余量,又不至于让半透明 scrollbar 在静止画面上久留(macOS 原生的淡出也在 2s 这个量级)。
|
|
24
|
+
* - `autoHideSuspend` 保持关闭:打开会让 scrollbar 在首次滚动前一直可见,与「自动隐藏」相反。
|
|
25
25
|
* - `clickScroll` 走函数形态:`true` 只是「按一个视口步进」,跳到的是当前位置的下/上一屏,
|
|
26
26
|
* 与点击处的距离无关。`clickScrollDistance: 0` 才是「以点击处为目标」——库把 0 定义为
|
|
27
|
-
*
|
|
27
|
+
* 「距离等于目标距离」。函数形态是必需的:这个 option 只在实现里经过 `isFunction` 分支才会被读到,
|
|
28
28
|
* 直接传对象会被静默忽略。
|
|
29
29
|
* - `clickScrollDuration: 0`:库默认用 200ms 缓动滚到点击处,在渲染虚拟列表的资源列表上会卡顿,
|
|
30
30
|
* 这里改成即时落位。0 是合法时长而不是「非法值被忽略」:`animateNumber` 先用 `Math.max(0, ms)`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/scrollbars/index.ts"],"sourcesContent":["import './style.css'\n\nimport { ClickScrollPlugin, OverlayScrollbars, type PartialOptions } from 'overlayscrollbars'\n\n/**\n * `scrollbars.theme` 的取值,同时也是 `@greypan/web-ui/scrollbars.css` 里主题类的名字。\n */\nexport const WEB_UI_SCROLLBARS_THEME = 'os-theme-macos'\n\n/*\n * track 点击滚动由 ClickScrollPlugin 提供;插件未注册时 `clickScroll` 静默失效——\n *
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/scrollbars/index.ts"],"sourcesContent":["import './style.css'\n\nimport { ClickScrollPlugin, OverlayScrollbars, type PartialOptions } from 'overlayscrollbars'\n\n/**\n * `scrollbars.theme` 的取值,同时也是 `@greypan/web-ui/scrollbars.css` 里主题类的名字。\n */\nexport const WEB_UI_SCROLLBARS_THEME = 'os-theme-macos'\n\n/*\n * track 点击滚动由 ClickScrollPlugin 提供;插件未注册时 `clickScroll` 静默失效——\n * 不报错、不打日志,track 只是没有反应。注册写在模块作用域,只要消费方用了本模块,\n * 插件就一定在位,不会因为漏掉一行 bootstrap 而退化。\n */\nOverlayScrollbars.plugin(ClickScrollPlugin)\n\n/**\n * 全仓统一的 scrollbar 行为:外观对齐 macOS、自动隐藏、滚动时短暂显示、track 点击直达。\n *\n * 内容尺寸或平台变化都不需要改这里,只有三条产品要求本身变了才改。覆盖层要实现的是\n * 同一套手势语言,所以用法是把它整个传给 OverlayScrollbars 初始化,而不是逐项拼接:\n *\n * ```ts\n * import { webUiScrollbarsOptions } from '@greypan/web-ui/scrollbars'\n * import '@greypan/web-ui/scrollbars.css'\n * ```\n *\n * - `autoHide: 'scroll'`:scrollbar 只在滚动时出现,停下 `autoHideDelay` 之后自动隐去。用户明确选了\n * 这一档而不是 `'move'`——`'move'` 会让指针在滚动区域内移动就唤出,比 macOS 原生积极得多。\n * 代价写清楚:**hover 本身不再唤出 scrollbar**(隐藏态的元素不可命中,指针根本落不到它上面),\n * 所以 issue 里「hover 的时候短暂显示」那条只以「滚动时短暂显示」的形式满足。\n * - `autoHideDelay: 2000`:这一档同时是「track 点击跳转」的可用窗口——scrollbar 隐去后它就不可命中。\n * 指针从滚动的位置移到 track、再点下去,实测预算在 1s 上下,默认的 1300ms 太贴边;2000ms 留出\n * 余量,又不至于让半透明 scrollbar 在静止画面上久留(macOS 原生的淡出也在 2s 这个量级)。\n * - `autoHideSuspend` 保持关闭:打开会让 scrollbar 在首次滚动前一直可见,与「自动隐藏」相反。\n * - `clickScroll` 走函数形态:`true` 只是「按一个视口步进」,跳到的是当前位置的下/上一屏,\n * 与点击处的距离无关。`clickScrollDistance: 0` 才是「以点击处为目标」——库把 0 定义为\n * 「距离等于目标距离」。函数形态是必需的:这个 option 只在实现里经过 `isFunction` 分支才会被读到,\n * 直接传对象会被静默忽略。\n * - `clickScrollDuration: 0`:库默认用 200ms 缓动滚到点击处,在渲染虚拟列表的资源列表上会卡顿,\n * 这里改成即时落位。0 是合法时长而不是「非法值被忽略」:`animateNumber` 先用 `Math.max(0, ms)`\n * 得到时长 0,首帧(同步执行、不经 rAF)就判定已到期并落到终点。\n */\nexport const webUiScrollbarsOptions: PartialOptions = {\n scrollbars: {\n theme: WEB_UI_SCROLLBARS_THEME,\n autoHide: 'scroll',\n autoHideDelay: 2000,\n clickScroll: () => ({ clickScrollDistance: 0, clickScrollDuration: 0 })\n }\n}\n"],"mappings":";;;AAOA,IAAa,IAA0B;AAOvC,EAAkB,OAAO,CAAiB;AA6B1C,IAAa,IAAyC,EACpD,YAAY;CACV,OAAO;CACP,UAAU;CACV,eAAe;CACf,oBAAoB;EAAE,qBAAqB;EAAG,qBAAqB;CAAE;AACvE,EACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","names":[],"sources":["../../src/scrollbars/internal.css?inline"],"sourcesContent":["/*\n *
|
|
1
|
+
{"version":3,"file":"internal.js","names":[],"sources":["../../src/scrollbars/internal.css?inline"],"sourcesContent":["/*\n * 组件内部滚动容器的原生 scrollbar 主题。\n *\n * 为什么不是直接上 OverlayScrollbars:库的结构样式挂在 `.os-scrollbar` 上、主题类\n * `.os-theme-macos` 也靠文档层的选择器命中,两者都进不了组件的 shadow——shadow 里既匹配不到\n * `web-ui-theme[...]` 这类后代选择器,也匹配不到 `html:has()`。库还会把宿主改成 flex 行、把\n * 子节点搬进它生成的 viewport,会破坏组件自身承重的布局。唯一能跨 shadow 边界的是继承的\n * 自定义属性,所以这里只**读**主题里同一组 `--wui-scrollbar-*`(由 `web-ui-theme` 的外观分支\n * 写、`.os-theme-macos` 的回退值兜底),颜色因此与整页的覆盖式 scrollbar 同源。\n *\n * 刻意**不写 `::-webkit-scrollbar`**:一旦给某条 scrollbar 声明了自定义 webkit 伪元素,引擎就会\n * 放弃平台自带的覆盖式 scrollbar,改用经典 scrollbar 并固定占一条布局宽度。实测(macOS Chromium,一条\n * `width: 7px` 的 `::-webkit-scrollbar`):同尺寸容器的 `offsetWidth - clientWidth` 从 0 变成 7。\n * 那正好违反 issue #225 的第 (1) 条「不占用宽度」。`scrollbar-color` / `scrollbar-width` 不触发\n * 这个切换:覆盖式平台上 scrollbar 保持零宽覆盖,经典平台上才按它们上色、收窄。\n *\n * 覆盖式平台(macOS、无头 Chromium)上这条规则几乎不可见——原生的覆盖 scrollbar 由系统绘制,并不\n * 看这两个属性;它真正的用处在经典 scrollbar 的平台(Windows / Linux)。想拿到与库逐像素一致的\n * 几何、圆角与自动隐藏只有上库这一条路,那需要把库初始化进每个 shadow root,超出 issue #225\n * 「组件不必引入第三方依赖」的范围。\n *\n * `scrollbar-color` 与 `scrollbar-width` 都是**继承属性**,写一次即可作用于容器自身及其后代;\n * 调用方只在组件自己的 shadow 里 adopted 本文件(见各组件 `static styles`),所以样式天然隔离,\n * 不会漏到文档层,满足第 (3) 条。\n */\n.wui-scroll {\n scrollbar-color: var(--wui-scrollbar-handle, rgb(0 0 0 / 0.39)) transparent;\n scrollbar-width: thin;\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/shared/element-height/index.ts"],"sourcesContent":["/**\n * 跟踪宿主的某个子元素的 border-box 高度。\n *\n * 用途是「元素的高度是动态的,但布局里另有一处要按它让位」——例如 drawer
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/shared/element-height/index.ts"],"sourcesContent":["/**\n * 跟踪宿主的某个子元素的 border-box 高度。\n *\n * 用途是「元素的高度是动态的,但布局里另有一处要按它让位」——例如 drawer 的拖拽 drag zone 必须\n * 避开 header,而 header 的高度由 slotted 内容与 consumer 的 padding 决定(窄屏下还可能\n * 被 `max-[640px]:h-14` 改写)。这种让位关系在 CSS 里没有纯表达:drag zone 是 dialog 的绝对\n * 定位兄弟节点,拿不到 header 的盒子尺寸;写成 `top: 100%` 之类又会把内容区一起算进去。\n *\n * 观察的是 border-box 而不是默认的 content-box:这里的判据是「这块区域在布局里占了多高」,\n * 含 padding 与 border。改 padding 而内容不变时 content-box 尺寸可能不变,回调不会来。\n */\nimport type { LitElement, ReactiveController, ReactiveControllerHost } from 'lit'\n\ninterface Watched {\n readonly notify: (height: number) => void\n height: number\n}\n\nconst watched = new WeakMap<Element, Watched>()\nlet observer: ResizeObserver | undefined\n\n/**\n * 全模块共用一个 ResizeObserver:逐实例建观察者意味着每个目标各排一次尺寸回调,而同一屏里\n * 可能同时有几十个 overlay。没有 ResizeObserver 的环境(jsdom)没有布局可测,直接不接。\n */\nfunction getObserver(): ResizeObserver | null {\n if (typeof ResizeObserver === 'undefined') return null\n if (observer) return observer\n\n observer = new ResizeObserver(entries => {\n for (const entry of entries) {\n const target = watched.get(entry.target)\n if (!target) continue\n\n // offsetHeight 而非 entry.borderBoxSize:后者在旧引擎上可能缺席,且是分数值;\n // 布局让位只需要整数像素,与盒子自身量出来的口径一致。\n const height = (entry.target as HTMLElement).offsetHeight\n if (target.height === height) continue\n\n target.height = height\n target.notify(height)\n }\n })\n\n return observer\n}\n\nfunction watch(target: Element, notify: (height: number) => void) {\n const shared = getObserver()\n if (!shared) return\n\n // 初值取 -1 而不是 0:首帧的真实高度由 observe() 的初始回调报上来,而 0 是一个合法高度,\n // 用它当初值会把「高度就是 0」与「还没量过」混成同一种状态。\n watched.set(target, { notify, height: -1 })\n shared.observe(target, { box: 'border-box' })\n}\n\nfunction unwatch(target: Element) {\n watched.delete(target)\n observer?.unobserve(target)\n}\n\n/**\n * 把目标盒子的高度变化报给宿主;断开重连后重新接上观察。\n *\n * 目标按 selector 在宿主的 renderRoot 里查,渲染结构变化(目标被条件渲染掉再渲染回来)时\n * 重新解析——同一宿主先后观察过两个不同节点的情况是真实存在的(模式切换会换掉整棵子树)。\n */\nexport class ElementHeightController implements ReactiveController {\n private target: Element | undefined\n\n constructor(\n private readonly host: ReactiveControllerHost & LitElement,\n private readonly selector: string,\n private readonly notify: (height: number) => void\n ) {\n host.addController(this)\n }\n\n /*\n * 两个生命周期都要接:重连(移出 DOM 再放回去、列表重排、Teleport)不会排一次更新,只挂在\n * hostUpdated 上的话观察在断开时被拆掉就再也接不回来。而首连时 shadow root 还没有子节点,\n * 这里查不到目标,得靠 hostUpdated 补上第一次。\n */\n hostConnected() {\n this.attach()\n }\n\n hostUpdated() {\n this.attach()\n }\n\n hostDisconnected() {\n this.detach()\n }\n\n private attach() {\n const target = this.host.renderRoot.querySelector(this.selector)\n if (target === this.target) return\n\n if (this.target) unwatch(this.target)\n this.target = target ?? undefined\n if (this.target) watch(this.target, this.notify)\n }\n\n private detach() {\n if (!this.target) return\n unwatch(this.target)\n this.target = undefined\n }\n}\n"],"mappings":";AAkBA,IAAM,oBAAU,IAAI,QAA0B,GAC1C;AAMJ,SAAS,IAAqC;CAmB5C,OAlBI,OAAO,iBAAmB,MAAoB,OAC9C,MAEJ,IAAW,IAAI,gBAAe,MAAW;EACvC,KAAK,IAAM,KAAS,GAAS;GAC3B,IAAM,IAAS,EAAQ,IAAI,EAAM,MAAM;GACvC,IAAI,CAAC,GAAQ;GAIb,IAAM,IAAU,EAAM,OAAuB;GACzC,EAAO,WAAW,MAEtB,EAAO,SAAS,GAChB,EAAO,OAAO,CAAM;EACtB;CACF,CAAC,GAEM;AACT;AAEA,SAAS,EAAM,GAAiB,GAAkC;CAChE,IAAM,IAAS,EAAY;CACtB,MAIL,EAAQ,IAAI,GAAQ;EAAE;EAAQ,QAAQ;CAAG,CAAC,GAC1C,EAAO,QAAQ,GAAQ,EAAE,KAAK,aAAa,CAAC;AAC9C;AAEA,SAAS,EAAQ,GAAiB;CAEhC,AADA,EAAQ,OAAO,CAAM,GACrB,GAAU,UAAU,CAAM;AAC5B;AAQA,IAAa,IAAb,MAAmE;CAGjE,YACE,GACA,GACA,GACA;EACA,AAJiB,KAAA,OAAA,GACA,KAAA,WAAA,GACA,KAAA,SAAA,GAEjB,EAAK,cAAc,IAAI;CACzB;CAOA,gBAAgB;EACd,KAAK,OAAO;CACd;CAEA,cAAc;EACZ,KAAK,OAAO;CACd;CAEA,mBAAmB;EACjB,KAAK,OAAO;CACd;CAEA,SAAiB;EACf,IAAM,IAAS,KAAK,KAAK,WAAW,cAAc,KAAK,QAAQ;EAC3D,MAAW,KAAK,WAEhB,KAAK,UAAQ,EAAQ,KAAK,MAAM,GACpC,KAAK,SAAS,KAAU,KAAA,GACpB,KAAK,UAAQ,EAAM,KAAK,QAAQ,KAAK,MAAM;CACjD;CAEA,SAAiB;EACV,AAEL,KAAK,YADL,EAAQ,KAAK,MAAM,GACL,KAAA;CAChB;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pointer-focus.js","names":[],"sources":["../../../src/shared/focus/pointer-focus.ts"],"sourcesContent":["/**\n * 指针输入期间的 focus ring 抑制。\n *\n * Safari 等浏览器在 pointer 点击后仍可能让 `:focus-visible` 命中新聚焦元素,\n * 导致点击打开 drawer/dialog
|
|
1
|
+
{"version":3,"file":"pointer-focus.js","names":[],"sources":["../../../src/shared/focus/pointer-focus.ts"],"sourcesContent":["/**\n * 指针输入期间的 focus ring 抑制。\n *\n * Safari 等浏览器在 pointer 点击后仍可能让 `:focus-visible` 命中新聚焦元素,\n * 导致点击打开 drawer/dialog 时内部 button 自动出现 focus ring。这里记录最近一次\n * 指针输入,并在 focusin 时给聚焦元素打 `data-wui-pointer-focus` 标记;组件样式\n * 用该标记将 focus ring 透明化,键盘导航(Tab/方向键等)会清除标记并恢复可见。\n */\n\nconst POINTER_FOCUS_WINDOW_MS = 1000\n\nlet installed = false\nlet lastPointerAt = 0\nlet pointerActive = false\n\nfunction markPointer() {\n pointerActive = true\n lastPointerAt = Date.now()\n}\n\nfunction markKeyboard() {\n pointerActive = false\n lastPointerAt = 0\n}\n\nfunction onPointerDown() {\n markPointer()\n}\n\nfunction onKeyDown(event: KeyboardEvent) {\n if (\n event.key === 'Tab' ||\n event.key.startsWith('Arrow') ||\n event.key === 'Enter' ||\n event.key === ' ' ||\n event.key === 'Home' ||\n event.key === 'End' ||\n event.key === 'PageUp' ||\n event.key === 'PageDown'\n ) {\n markKeyboard()\n }\n}\n\nfunction onFocusIn(event: FocusEvent) {\n const target = event.target\n if (!(target instanceof HTMLElement)) return\n\n if (pointerActive && Date.now() - lastPointerAt <= POINTER_FOCUS_WINDOW_MS) {\n target.dataset.wuiPointerFocus = 'true'\n const root = target.getRootNode()\n if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {\n root.host.dataset.wuiPointerFocus = 'true'\n }\n } else {\n target.removeAttribute('data-wui-pointer-focus')\n const root = target.getRootNode()\n if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {\n root.host.removeAttribute('data-wui-pointer-focus')\n }\n }\n}\n\n/**\n * 安装一次全局 pointer/keyboard/focus 监听。重复调用幂等。\n */\nexport function installPointerFocusSuppression(): () => void {\n if (typeof window === 'undefined' || typeof document === 'undefined') return () => {}\n if (installed) return () => {}\n installed = true\n\n // 只用 document 一份 capture 监听:shadow DOM 内的 pointerdown/keydown/focusin\n // 都会 composed 冒泡到 document,避免 window/document 双份导致同一事件处理两次。\n document.addEventListener('pointerdown', onPointerDown, true)\n document.addEventListener('keydown', onKeyDown, true)\n document.addEventListener('focusin', onFocusIn, true)\n\n return () => {\n installed = false\n document.removeEventListener('pointerdown', onPointerDown, true)\n document.removeEventListener('keydown', onKeyDown, true)\n document.removeEventListener('focusin', onFocusIn, true)\n }\n}\n\n/**\n * 测试辅助:清除指针输入状态,避免用例间泄漏。\n */\nexport function resetPointerFocusState(): void {\n markKeyboard()\n}\n"],"mappings":";AASA,IAEI,IAAY,IACZ,IAAgB,GAChB,IAAgB;AAEpB,SAAS,IAAc;CAErB,AADA,IAAgB,IAChB,IAAgB,KAAK,IAAI;AAC3B;AAEA,SAAS,IAAe;CAEtB,AADA,IAAgB,IAChB,IAAgB;AAClB;AAEA,SAAS,IAAgB;CACvB,EAAY;AACd;AAEA,SAAS,EAAU,GAAsB;CACvC,CACE,EAAM,QAAQ,SACd,EAAM,IAAI,WAAW,OAAO,KAC5B,EAAM,QAAQ,WACd,EAAM,QAAQ,OACd,EAAM,QAAQ,UACd,EAAM,QAAQ,SACd,EAAM,QAAQ,YACd,EAAM,QAAQ,eAEd,EAAa;AAEjB;AAEA,SAAS,EAAU,GAAmB;CACpC,IAAM,IAAS,EAAM;CACf,iBAAkB,aAExB;MAAI,KAAiB,KAAK,IAAI,IAAI,KAAiB,KAAyB;GAC1E,EAAO,QAAQ,kBAAkB;GACjC,IAAM,IAAO,EAAO,YAAY;GAChC,AAAI,aAAgB,cAAc,EAAK,gBAAgB,gBACrD,EAAK,KAAK,QAAQ,kBAAkB;EAExC,OAAO;GACL,EAAO,gBAAgB,wBAAwB;GAC/C,IAAM,IAAO,EAAO,YAAY;GAChC,AAAI,aAAgB,cAAc,EAAK,gBAAgB,eACrD,EAAK,KAAK,gBAAgB,wBAAwB;EAEtD;;AACF;AAKA,SAAgB,IAA6C;CAW3D,OAVI,OAAO,SAAW,OAAe,OAAO,WAAa,OACrD,UAAwB,CAAC,KAC7B,IAAY,IAIZ,SAAS,iBAAiB,eAAe,GAAe,EAAI,GAC5D,SAAS,iBAAiB,WAAW,GAAW,EAAI,GACpD,SAAS,iBAAiB,WAAW,GAAW,EAAI,SAEvC;EAIX,AAHA,IAAY,IACZ,SAAS,oBAAoB,eAAe,GAAe,EAAI,GAC/D,SAAS,oBAAoB,WAAW,GAAW,EAAI,GACvD,SAAS,oBAAoB,WAAW,GAAW,EAAI;CACzD;AACF"}
|