@greypan/web-ui 7.0.0 → 8.1.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 +109 -24
- package/README.md +149 -63
- package/dist/assets/menu-portal.js +1 -1
- package/dist/assets/menu-portal.js.map +1 -1
- package/dist/assets/selection-control.js +1 -1
- package/dist/assets/selection-control.js.map +1 -1
- package/dist/components/autocomplete/index.d.ts +17 -5
- package/dist/components/autocomplete/index.js +138 -103
- package/dist/components/autocomplete/index.js.map +1 -1
- package/dist/components/autocomplete/style.js +1 -1
- package/dist/components/autocomplete/style.js.map +1 -1
- package/dist/components/avatar/index.js +4 -4
- package/dist/components/badge/style.js.map +1 -1
- package/dist/components/button/index.d.ts +368 -1
- package/dist/components/button/index.js +61 -41
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/button/style.js +1 -1
- package/dist/components/button/style.js.map +1 -1
- package/dist/components/button-group/index.js +5 -5
- package/dist/components/checkbox/index.d.ts +3 -0
- package/dist/components/checkbox/index.js +30 -32
- package/dist/components/checkbox/index.js.map +1 -1
- package/dist/components/checkbox/style.js +1 -1
- package/dist/components/checkbox/style.js.map +1 -1
- package/dist/components/checkbox-group/index.js +4 -4
- package/dist/components/context-menu/index.js +4 -1
- package/dist/components/context-menu/index.js.map +1 -1
- package/dist/components/dialog/index.js +11 -8
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/drawer/index.js +11 -8
- package/dist/components/drawer/index.js.map +1 -1
- package/dist/components/dropdown/index.js +4 -1
- package/dist/components/dropdown/index.js.map +1 -1
- package/dist/components/dropdown-item/style.js +1 -1
- package/dist/components/dropdown-item/style.js.map +1 -1
- package/dist/components/editable-text/index.d.ts +473 -0
- package/dist/components/editable-text/index.js +226 -0
- package/dist/components/editable-text/index.js.map +1 -0
- package/dist/components/editable-text/style.js +6 -0
- package/dist/components/editable-text/style.js.map +1 -0
- package/dist/components/icon/index.js +7 -7
- package/dist/components/icon/index.js.map +1 -1
- package/dist/components/image-preview/index.js +21 -18
- package/dist/components/image-preview/index.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +39 -38
- package/dist/components/input/index.d.ts +9 -0
- package/dist/components/input/index.js +41 -30
- package/dist/components/input/index.js.map +1 -1
- package/dist/components/input-number/index.d.ts +1 -0
- package/dist/components/input-number/index.js +26 -24
- package/dist/components/input-number/index.js.map +1 -1
- package/dist/components/layout/index.js +8 -8
- package/dist/components/layout/index.js.map +1 -1
- package/dist/components/layout/style.js +1 -1
- package/dist/components/layout/style.js.map +1 -1
- package/dist/components/option/style.js +1 -1
- package/dist/components/option/style.js.map +1 -1
- package/dist/components/popover/index.js +13 -10
- package/dist/components/popover/index.js.map +1 -1
- package/dist/components/popover/style.js +1 -1
- package/dist/components/popover/style.js.map +1 -1
- package/dist/components/radio/index.d.ts +3 -0
- package/dist/components/radio/index.js +22 -18
- package/dist/components/radio/index.js.map +1 -1
- package/dist/components/radio-group/index.js +4 -4
- package/dist/components/segmented/index.d.ts +4 -1
- package/dist/components/segmented/index.js +42 -29
- package/dist/components/segmented/index.js.map +1 -1
- package/dist/components/segmented/style.js +1 -1
- package/dist/components/segmented/style.js.map +1 -1
- package/dist/components/segmented-trigger/style.js +1 -1
- package/dist/components/segmented-trigger/style.js.map +1 -1
- package/dist/components/select/index.js +35 -32
- package/dist/components/select/index.js.map +1 -1
- package/dist/components/select/style.js +1 -1
- package/dist/components/select/style.js.map +1 -1
- package/dist/components/slider/index.js +11 -11
- package/dist/components/switch/index.d.ts +1 -0
- package/dist/components/switch/index.js +34 -32
- package/dist/components/switch/index.js.map +1 -1
- package/dist/components/textarea/index.d.ts +7 -1
- package/dist/components/textarea/index.js +46 -44
- package/dist/components/textarea/index.js.map +1 -1
- package/dist/components/textarea/style.js.map +1 -1
- package/dist/components/theme/index.d.ts +10 -3
- package/dist/components/theme/index.js +133 -93
- package/dist/components/theme/index.js.map +1 -1
- package/dist/components/theme/style.js +1 -1
- package/dist/components/theme/style.js.map +1 -1
- package/dist/components/toast/toast.js +7 -7
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/tooltip/index.js +12 -9
- package/dist/components/tooltip/index.js.map +1 -1
- package/dist/components/tooltip/style.js +1 -1
- package/dist/components/tooltip/style.js.map +1 -1
- package/dist/icons/generated/akar-icons-check.d.ts +6 -0
- package/dist/icons/generated/akar-icons-check.js +10 -0
- package/dist/icons/generated/akar-icons-check.js.map +1 -0
- package/dist/icons/generated/bi-check.d.ts +6 -0
- package/dist/icons/generated/bi-check.js +10 -0
- package/dist/icons/generated/bi-check.js.map +1 -0
- package/dist/icons/index.d.ts +2 -0
- package/dist/icons/index.js +3 -1
- package/dist/shared/form-association/field-id.js +9 -0
- package/dist/shared/form-association/field-id.js.map +1 -0
- package/dist/shared/form-association/index.js +9 -1
- package/dist/shared/form-association/index.js.map +1 -1
- package/dist/shared/label-emptiness/index.js +45 -0
- package/dist/shared/label-emptiness/index.js.map +1 -0
- package/dist/shared/option-portal/combobox-shell.js +47 -5
- package/dist/shared/option-portal/combobox-shell.js.map +1 -1
- package/dist/shared/option-portal/index.js +9 -9
- package/dist/shared/overlay/anchored-panel.js +2 -2
- package/dist/shared/overlay/anchored-panel.js.map +1 -1
- package/dist/shared/overlay/open-overlay.js +38 -22
- package/dist/shared/overlay/open-overlay.js.map +1 -1
- package/dist/shared/theme/root-sync.js +48 -0
- package/dist/shared/theme/root-sync.js.map +1 -0
- package/package.json +3 -1
|
@@ -2,42 +2,60 @@ import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate
|
|
|
2
2
|
import { normalizeLiteral as t } from "../../shared/normalize/index.js";
|
|
3
3
|
import { parseDuration as n } from "../../shared/theme/duration.js";
|
|
4
4
|
import { applyOverlayRootStyles as r } from "../../shared/overlay/overlay-root.js";
|
|
5
|
-
import i from "
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
5
|
+
import { registerThemeRootSync as i, subscribeThemeSystemAppearanceChange as a, unregisterThemeRootSync as o } from "../../shared/theme/root-sync.js";
|
|
6
|
+
import s from "./style.js";
|
|
7
|
+
import { LitElement as c, html as l, nothing as u, unsafeCSS as d } from "lit";
|
|
8
|
+
import { customElement as f, property as p } from "lit/decorators.js";
|
|
8
9
|
//#region src/components/theme/index.ts
|
|
9
|
-
var
|
|
10
|
+
var m, h = [
|
|
10
11
|
"light",
|
|
11
12
|
"dark",
|
|
12
13
|
"system"
|
|
13
|
-
],
|
|
14
|
+
], g = [
|
|
14
15
|
"full",
|
|
15
16
|
"reduced",
|
|
16
17
|
"system"
|
|
17
|
-
],
|
|
18
|
+
], _ = {
|
|
18
19
|
x: NaN,
|
|
19
20
|
y: NaN
|
|
20
|
-
},
|
|
21
|
+
}, v = 0, y = 0, b = null, x = (e) => {
|
|
21
22
|
let t = e;
|
|
22
|
-
|
|
23
|
-
},
|
|
24
|
-
|
|
23
|
+
_.x = t.clientX, _.y = t.clientY;
|
|
24
|
+
}, S = () => {
|
|
25
|
+
_.x = NaN, _.y = NaN;
|
|
25
26
|
};
|
|
26
|
-
function
|
|
27
|
-
|
|
27
|
+
function C() {
|
|
28
|
+
y++ > 0 || (window.addEventListener("pointerdown", x, !0), window.addEventListener("keydown", S, !0));
|
|
28
29
|
}
|
|
29
|
-
function
|
|
30
|
-
--
|
|
30
|
+
function w() {
|
|
31
|
+
--y > 0 || (window.removeEventListener("pointerdown", x, !0), window.removeEventListener("keydown", S, !0));
|
|
31
32
|
}
|
|
32
|
-
|
|
33
|
-
|
|
33
|
+
var T = ["pointerdown", "wheel"];
|
|
34
|
+
function E(e) {
|
|
35
|
+
let t = !0, n = () => {
|
|
36
|
+
if (t) {
|
|
37
|
+
t = !1;
|
|
38
|
+
for (let e of T) window.removeEventListener(e, r, !0);
|
|
39
|
+
}
|
|
40
|
+
}, r = () => {
|
|
41
|
+
t && (n(), e.skipTransition?.());
|
|
42
|
+
};
|
|
43
|
+
for (let e of T) window.addEventListener(e, r, {
|
|
44
|
+
capture: !0,
|
|
45
|
+
passive: !0
|
|
46
|
+
});
|
|
47
|
+
return n;
|
|
48
|
+
}
|
|
49
|
+
function D(e) {
|
|
50
|
+
if (e === "dark") return "dark";
|
|
51
|
+
if (e !== "system") return "light";
|
|
34
52
|
try {
|
|
35
53
|
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
36
54
|
} catch {
|
|
37
55
|
return "light";
|
|
38
56
|
}
|
|
39
57
|
}
|
|
40
|
-
function
|
|
58
|
+
function O(e, t) {
|
|
41
59
|
return Number.isFinite(e) && Number.isFinite(t) ? {
|
|
42
60
|
x: e,
|
|
43
61
|
y: t
|
|
@@ -46,53 +64,71 @@ function C(e, t) {
|
|
|
46
64
|
y: (window.innerHeight || 0) / 2
|
|
47
65
|
};
|
|
48
66
|
}
|
|
49
|
-
var
|
|
67
|
+
var k = class extends c {
|
|
50
68
|
static {
|
|
51
|
-
|
|
69
|
+
m = this;
|
|
52
70
|
}
|
|
53
71
|
constructor(...e) {
|
|
54
|
-
super(...e), this._appearanceRequest = 0, this.
|
|
72
|
+
super(...e), this._appearanceRequest = 0, this._resolvedAppearance = "light", this._motion = "system", this._transitionOriginListening = !1, this._transitionRequested = !1, this._warned = !1;
|
|
55
73
|
}
|
|
56
74
|
static {
|
|
57
|
-
this.styles =
|
|
75
|
+
this.styles = d(s);
|
|
58
76
|
}
|
|
59
77
|
get appearance() {
|
|
60
78
|
return this._appearance;
|
|
61
79
|
}
|
|
62
80
|
set appearance(e) {
|
|
63
|
-
let n = this._appearance, r = e === void 0 ? void 0 : t(e,
|
|
64
|
-
if (r !== void 0 && !this._transitionRequested &&
|
|
81
|
+
let n = this._appearance, r = e === void 0 ? void 0 : t(e, h, "light"), i = D(r), a = ++this._appearanceRequest;
|
|
82
|
+
if (r !== void 0 && !this._transitionRequested && b === null && this._shouldAnimateAppearance(r, i)) {
|
|
65
83
|
this._transitionRequested = !0;
|
|
66
|
-
let e = { requestId:
|
|
67
|
-
|
|
68
|
-
this._cleanupThemeTransition(), this._transitionRequested = !1,
|
|
84
|
+
let e = { requestId: a };
|
|
85
|
+
b = e, this._startThemeTransition(r, i, n, a, e).catch(() => {
|
|
86
|
+
this._cleanupThemeTransition(), this._transitionRequested = !1, b === e && (b = null), this._appearanceRequest === a && (this._appearance = r, this._syncResolvedAppearance(), this.requestUpdate("appearance", n));
|
|
87
|
+
});
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
this._appearance = r, this._syncResolvedAppearance(), this.requestUpdate("appearance", n);
|
|
91
|
+
}
|
|
92
|
+
get resolvedAppearance() {
|
|
93
|
+
return this._resolvedAppearance;
|
|
94
|
+
}
|
|
95
|
+
_setResolvedAppearance(e) {
|
|
96
|
+
(this._resolvedAppearance !== e || this.getAttribute("resolved-appearance") !== e) && (this._resolvedAppearance = e, this.setAttribute("resolved-appearance", e));
|
|
97
|
+
}
|
|
98
|
+
_syncResolvedAppearance() {
|
|
99
|
+
this._setResolvedAppearance(D(this._appearance)), this._syncSystemAppearanceSubscription();
|
|
100
|
+
}
|
|
101
|
+
_syncSystemAppearanceSubscription() {
|
|
102
|
+
if (this.isConnected && this._hasAppearance() && this._appearance === "system") {
|
|
103
|
+
if (this._unsubscribeSystemAppearance) return;
|
|
104
|
+
this._unsubscribeSystemAppearance = a(() => {
|
|
105
|
+
this._setResolvedAppearance(D(this._appearance));
|
|
69
106
|
});
|
|
70
107
|
return;
|
|
71
108
|
}
|
|
72
|
-
this.
|
|
109
|
+
this._unsubscribeSystemAppearance?.(), this._unsubscribeSystemAppearance = void 0;
|
|
73
110
|
}
|
|
74
111
|
get motion() {
|
|
75
112
|
return this._motion;
|
|
76
113
|
}
|
|
77
114
|
set motion(e) {
|
|
78
115
|
let n = this._motion;
|
|
79
|
-
this._motion = t(e,
|
|
80
|
-
}
|
|
81
|
-
get transition() {
|
|
82
|
-
return this._transition;
|
|
83
|
-
}
|
|
84
|
-
set transition(e) {
|
|
85
|
-
let t = this._transition;
|
|
86
|
-
this._transition = e, this.requestUpdate("transition", t), this._syncTransitionOriginListeners(this.isConnected && this._transition);
|
|
116
|
+
this._motion = t(e, g, "system"), this.requestUpdate("motion", n);
|
|
87
117
|
}
|
|
88
118
|
connectedCallback() {
|
|
89
|
-
super.connectedCallback(), this._syncTransitionOriginListeners(this.
|
|
119
|
+
super.connectedCallback(), this._syncResolvedAppearance(), this._syncTransitionOriginListeners(!0), this._syncRootPageColorSync(), this._warnWhenAppearanceIsMissing();
|
|
90
120
|
}
|
|
91
121
|
disconnectedCallback() {
|
|
92
|
-
this._syncTransitionOriginListeners(!1), this._activeTransition?.skipTransition?.(), this._cleanupThemeTransition(), super.disconnectedCallback();
|
|
122
|
+
this._syncTransitionOriginListeners(!1), this._unsubscribeSystemAppearance?.(), this._unsubscribeSystemAppearance = void 0, o(this), this._activeTransition?.skipTransition?.(), this._cleanupThemeTransition(), super.disconnectedCallback();
|
|
93
123
|
}
|
|
94
124
|
updated() {
|
|
95
|
-
this._warnWhenAppearanceIsMissing();
|
|
125
|
+
this._warnWhenAppearanceIsMissing(), this._syncRootPageColorSync();
|
|
126
|
+
}
|
|
127
|
+
attributeChangedCallback(e, t, n) {
|
|
128
|
+
super.attributeChangedCallback(e, t, n), e === "resolved-appearance" && this._setResolvedAppearance(D(this._appearance));
|
|
129
|
+
}
|
|
130
|
+
_syncRootPageColorSync() {
|
|
131
|
+
this._hasAppearance() ? i(this) : o(this);
|
|
96
132
|
}
|
|
97
133
|
getOverlayRoot() {
|
|
98
134
|
if (this._hasAppearance()) return this.renderRoot.querySelector("[data-wui-overlay-container]") ?? void 0;
|
|
@@ -109,21 +145,21 @@ var w = class extends a {
|
|
|
109
145
|
_findThemeAncestor() {
|
|
110
146
|
let e = this.parentNode;
|
|
111
147
|
for (; e;) {
|
|
112
|
-
if (e instanceof
|
|
148
|
+
if (e instanceof m && e !== this && e._hasAppearance()) return e;
|
|
113
149
|
e = e instanceof ShadowRoot ? e.host : e.parentElement;
|
|
114
150
|
}
|
|
115
151
|
return null;
|
|
116
152
|
}
|
|
117
153
|
_transitionOrigin() {
|
|
118
|
-
if (Number.isFinite(
|
|
154
|
+
if (Number.isFinite(_.x) && Number.isFinite(_.y)) return _;
|
|
119
155
|
let e = this.getBoundingClientRect();
|
|
120
156
|
return e.width > 0 && e.height > 0 ? {
|
|
121
157
|
x: e.left + e.width / 2,
|
|
122
158
|
y: e.top + e.height / 2
|
|
123
|
-
} :
|
|
159
|
+
} : O(NaN, NaN);
|
|
124
160
|
}
|
|
125
161
|
_syncTransitionOriginListeners(e) {
|
|
126
|
-
e !== this._transitionOriginListening && (this._transitionOriginListening = e, e ?
|
|
162
|
+
e !== this._transitionOriginListening && (this._transitionOriginListening = e, e ? C() : w());
|
|
127
163
|
}
|
|
128
164
|
_transitionMotion() {
|
|
129
165
|
let e = getComputedStyle(this), t = n(e.getPropertyValue("--wui-theme-transition-duration")) ?? 500, r = e.getPropertyValue("--wui-theme-transition-easing").trim() || "ease-in", i = globalThis.CSS?.supports("animation-timing-function", r) ? r : "ease-in";
|
|
@@ -132,72 +168,75 @@ var w = class extends a {
|
|
|
132
168
|
easing: i
|
|
133
169
|
};
|
|
134
170
|
}
|
|
135
|
-
_shouldAnimateAppearance(e) {
|
|
136
|
-
let
|
|
137
|
-
return !
|
|
171
|
+
_shouldAnimateAppearance(e, t) {
|
|
172
|
+
let n = this._appearance;
|
|
173
|
+
return !n || n === e || D(n) === t ? !1 : typeof document.startViewTransition == "function" && Array.isArray(document.adoptedStyleSheets) && !this.isReducedMotion() && this._transitionMotion().duration > 0;
|
|
138
174
|
}
|
|
139
|
-
async _startThemeTransition(e, t, n, r) {
|
|
140
|
-
let
|
|
141
|
-
|
|
175
|
+
async _startThemeTransition(e, t, n, r, i) {
|
|
176
|
+
let a = this._findThemeAncestor() === null, o = a ? void 0 : `wui-theme-transition-${++v}`, s = new CSSStyleSheet();
|
|
177
|
+
o ? s.replaceSync(`
|
|
142
178
|
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
|
|
143
179
|
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
|
|
144
|
-
::view-transition-image-pair(root), ::view-transition-image-pair(${
|
|
145
|
-
::view-transition-group(${
|
|
146
|
-
::view-transition-old(${
|
|
180
|
+
::view-transition-image-pair(root), ::view-transition-image-pair(${o}) { mix-blend-mode: normal; }
|
|
181
|
+
::view-transition-group(${o}) { animation: none; }
|
|
182
|
+
::view-transition-old(${o}), ::view-transition-new(${o}) {
|
|
147
183
|
animation: none;
|
|
148
184
|
mix-blend-mode: normal;
|
|
149
185
|
}
|
|
150
|
-
::view-transition-old(${
|
|
151
|
-
::view-transition-new(${
|
|
152
|
-
`) :
|
|
186
|
+
::view-transition-old(${o}) { z-index: ${t === "dark" ? 1 : 2}; }
|
|
187
|
+
::view-transition-new(${o}) { z-index: ${t === "dark" ? 2 : 1}; }
|
|
188
|
+
`) : s.replaceSync(`
|
|
153
189
|
::view-transition-old(root), ::view-transition-new(root) {
|
|
154
190
|
animation: none;
|
|
155
191
|
mix-blend-mode: normal;
|
|
156
192
|
}
|
|
157
193
|
::view-transition-image-pair(root) { mix-blend-mode: normal; }
|
|
158
|
-
::view-transition-old(root) { z-index: ${
|
|
159
|
-
::view-transition-new(root) { z-index: ${
|
|
194
|
+
::view-transition-old(root) { z-index: ${t === "dark" ? 1 : 2}; }
|
|
195
|
+
::view-transition-new(root) { z-index: ${t === "dark" ? 2 : 1}; }
|
|
160
196
|
`);
|
|
161
|
-
let
|
|
162
|
-
|
|
163
|
-
let
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
this.
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
197
|
+
let c = this.style.getPropertyValue("display"), l = o ? this.style.getPropertyValue("view-transition-name") : void 0;
|
|
198
|
+
o && (this.style.setProperty("display", "block"), this.style.setProperty("view-transition-name", o));
|
|
199
|
+
let u = () => {
|
|
200
|
+
try {
|
|
201
|
+
document.adoptedStyleSheets = document.adoptedStyleSheets.filter((e) => e !== s);
|
|
202
|
+
} catch {}
|
|
203
|
+
o && (l ? this.style.setProperty("view-transition-name", l) : this.style.removeProperty("view-transition-name"), c ? this.style.setProperty("display", c) : this.style.removeProperty("display"));
|
|
204
|
+
}, d = () => this._appearanceRequest === r ? (this._appearance = e, this._syncResolvedAppearance(), this.requestUpdate("appearance", n), this.updateComplete) : this.updateComplete;
|
|
205
|
+
this._transitionCleanup = u, document.adoptedStyleSheets = [...document.adoptedStyleSheets, s];
|
|
206
|
+
let f = document.startViewTransition(d);
|
|
207
|
+
this._activeTransition = f, this._transitionInputSkipCleanup = E(f);
|
|
208
|
+
let p = [];
|
|
209
|
+
f.ready.then(() => {
|
|
210
|
+
let { duration: e, easing: n } = this._transitionMotion();
|
|
211
|
+
if (e <= 0) return;
|
|
212
|
+
let { x: r, y: i } = this._transitionOrigin(), s = t === "dark" ? "::view-transition-new(root)" : "::view-transition-old(root)";
|
|
213
|
+
if (!a) {
|
|
214
|
+
let a = this.getBoundingClientRect(), s = {
|
|
215
|
+
x: r - a.left,
|
|
216
|
+
y: i - a.top
|
|
217
|
+
}, c = Math.ceil(Math.hypot(Math.max(s.x, a.width - s.x), Math.max(s.y, a.height - s.y))), l = this._transitionKeyframes(s.x, s.y, c, t), u = t === "dark" ? `::view-transition-new(${o})` : `::view-transition-old(${o})`;
|
|
218
|
+
p.push(document.documentElement.animate(l, {
|
|
219
|
+
duration: e,
|
|
181
220
|
easing: n,
|
|
182
221
|
fill: "both",
|
|
183
222
|
pseudoElement: u
|
|
184
223
|
}));
|
|
185
224
|
return;
|
|
186
225
|
}
|
|
187
|
-
let c = Math.ceil(Math.hypot(Math.max(r, window.innerWidth - r), Math.max(
|
|
188
|
-
|
|
189
|
-
duration:
|
|
226
|
+
let c = Math.ceil(Math.hypot(Math.max(r, window.innerWidth - r), Math.max(i, window.innerHeight - i)));
|
|
227
|
+
p.push(document.documentElement.animate(this._transitionKeyframes(r, i, c, t), {
|
|
228
|
+
duration: e,
|
|
190
229
|
easing: n,
|
|
191
230
|
fill: "both",
|
|
192
231
|
pseudoElement: s
|
|
193
232
|
}));
|
|
194
233
|
}).catch(() => void 0);
|
|
195
234
|
try {
|
|
196
|
-
await
|
|
235
|
+
await f.finished;
|
|
197
236
|
} catch {} finally {
|
|
198
|
-
this._activeTransition = void 0, this._transitionCleanup = void 0;
|
|
199
|
-
for (let e of
|
|
200
|
-
|
|
237
|
+
this._transitionInputSkipCleanup?.(), this._transitionInputSkipCleanup = void 0, this._activeTransition = void 0, this._transitionCleanup = void 0;
|
|
238
|
+
for (let e of p) e.cancel();
|
|
239
|
+
u(), this._transitionRequested = !1, b === i && (b = null);
|
|
201
240
|
}
|
|
202
241
|
}
|
|
203
242
|
_transitionKeyframes(e, t, n, r) {
|
|
@@ -205,34 +244,35 @@ var w = class extends a {
|
|
|
205
244
|
return r === "dark" ? [{ clipPath: i }, { clipPath: a }] : [{ clipPath: a }, { clipPath: i }];
|
|
206
245
|
}
|
|
207
246
|
_cleanupThemeTransition(e = !0) {
|
|
208
|
-
this._activeTransition = void 0;
|
|
247
|
+
this._transitionInputSkipCleanup?.(), this._transitionInputSkipCleanup = void 0, this._activeTransition = void 0;
|
|
209
248
|
let t = this._transitionCleanup;
|
|
210
249
|
this._transitionCleanup = void 0, e && t?.();
|
|
211
250
|
}
|
|
212
251
|
render() {
|
|
213
|
-
return
|
|
252
|
+
return l`<slot></slot>${this._hasAppearance() ? l`<div data-wui-overlay-container></div>` : u}`;
|
|
214
253
|
}
|
|
215
254
|
firstUpdated() {
|
|
216
255
|
this.renderRoot instanceof ShadowRoot && r(this.renderRoot);
|
|
217
256
|
}
|
|
218
257
|
_hasAppearance() {
|
|
219
|
-
return this.appearance !== void 0 &&
|
|
258
|
+
return this.appearance !== void 0 && h.includes(this.appearance);
|
|
220
259
|
}
|
|
221
260
|
_warnWhenAppearanceIsMissing() {
|
|
222
261
|
this._hasAppearance() || this._warned;
|
|
223
262
|
}
|
|
224
263
|
};
|
|
225
|
-
e([
|
|
264
|
+
e([p({
|
|
226
265
|
type: String,
|
|
227
266
|
reflect: !0
|
|
228
|
-
})],
|
|
267
|
+
})], k.prototype, "appearance", null), e([p({
|
|
268
|
+
type: String,
|
|
269
|
+
reflect: !0,
|
|
270
|
+
attribute: "resolved-appearance"
|
|
271
|
+
})], k.prototype, "_resolvedAppearance", void 0), e([p({
|
|
229
272
|
type: String,
|
|
230
273
|
reflect: !0
|
|
231
|
-
})],
|
|
232
|
-
type: Boolean,
|
|
233
|
-
reflect: !0
|
|
234
|
-
})], w.prototype, "transition", null), w = d = e([l("web-ui-theme")], w);
|
|
274
|
+
})], k.prototype, "motion", null), k = m = e([f("web-ui-theme")], k);
|
|
235
275
|
//#endregion
|
|
236
|
-
export {
|
|
276
|
+
export { k as WebUiTheme };
|
|
237
277
|
|
|
238
278
|
//# sourceMappingURL=index.js.map
|
|
@@ -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'\n\nimport style from './style.css?inline'\n\nexport type ThemeAppearance = 'light' | 'dark' | 'system'\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// 根主题没有对应控件;记录最近一次触发主题变更的指针位置,键盘或程序化调用则回退中心。\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\nfunction resolveAppearance(appearance: ThemeAppearance): 'light' | 'dark' {\n if (appearance !== 'system') return appearance\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 request = ++this._appearanceRequest\n if (\n next !== undefined &&\n !this._transitionRequested &&\n themeTransitionFlightToken === null &&\n this._shouldAnimateAppearance(next)\n ) {\n // async helper 可能把函数体排到当前栈后;flight gate 必须在当前 setter 栈内生效。\n this._transitionRequested = true\n const flightToken = { requestId: request }\n themeTransitionFlightToken = flightToken\n void this._startThemeTransition(next, 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.requestUpdate('appearance', old)\n }\n })\n return\n }\n this._appearance = next\n this.requestUpdate('appearance', old)\n }\n private _appearance?: ThemeAppearance\n private _appearanceRequest = 0\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 // HTML attribute 存在即 true;动态关闭由框架写 boolean property,不解析字符串。\n @property({ type: Boolean, reflect: true })\n get transition(): boolean {\n return this._transition\n }\n set transition(v: boolean) {\n const old = this._transition\n this._transition = v\n this.requestUpdate('transition', old)\n\n this._syncTransitionOriginListeners(this.isConnected && this._transition)\n }\n private _transition = false\n private _transitionOriginListening = false\n private _transitionRequested = false\n\n private _warned = false\n\n override connectedCallback() {\n super.connectedCallback()\n this._syncTransitionOriginListeners(this.transition)\n this._warnWhenAppearanceIsMissing()\n }\n\n override disconnectedCallback() {\n this._syncTransitionOriginListeners(false)\n this._activeTransition?.skipTransition?.()\n this._cleanupThemeTransition()\n super.disconnectedCallback()\n }\n\n protected override updated() {\n this._warnWhenAppearanceIsMissing()\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): boolean {\n const previous = this._appearance\n if (!previous || previous === next) return false\n if (resolveAppearance(previous) === resolveAppearance(next)) return false\n return (\n this.transition &&\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 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: ${next === 'dark' ? 1 : 2}; }\n ::view-transition-new(${transitionName}) { z-index: ${next === '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: ${next === 'dark' ? 1 : 2}; }\n ::view-transition-new(root) { z-index: ${next === '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 document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet]\n\n const restoreCapture = () => {\n document.adoptedStyleSheets = document.adoptedStyleSheets.filter(sheet => sheet !== styleSheet)\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.requestUpdate('appearance', previous)\n return this.updateComplete\n }\n this._transitionCleanup = restoreCapture\n const transition = document.startViewTransition(commit) as unknown as ViewTransitionLike\n this._activeTransition = 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 = next === '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, next)\n const target =\n next === 'dark' ? `::view-transition-new(${transitionName})` : `::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, next), {\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._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(x: number, y: number, radius: number, next: ThemeAppearance): Keyframe[] {\n const from = `circle(0px at ${x}px ${y}px)`\n const to = `circle(${radius}px at ${x}px ${y}px)`\n return next === 'dark' ? [{ clipPath: from }, { clipPath: to }] : [{ clipPath: to }, { clipPath: from }]\n }\n\n private _cleanupThemeTransition(restoreCapture = true) {\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\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":";;;;;;;;OAYM,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,SAAS,EAAkB,GAA+C;CACxE,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;;;;;EAiEvB,aA7BW,KAAA,qBAAA,GAWE,KAAA,UAAA,UAcT,KAAA,cAAA,IACe,KAAA,6BAAA,IACN,KAAA,uBAAA,IAEb,KAAA,UAAA;;;EAhEO,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,IAAU,EAAE,KAAK;EACvB,IACE,MAAS,KAAA,KACT,CAAC,KAAK,wBACN,MAA+B,QAC/B,KAAK,yBAAyB,CAAI,GAClC;GAEA,KAAK,uBAAuB;GAC5B,IAAM,IAAc,EAAE,WAAW,EAAQ;GAEzC,AADA,IAA6B,GAC7B,KAAU,sBAAsB,GAAM,GAAM,GAAS,CAAW,CAAC,CAAC,YAAY;IAI5E,AAHA,KAAK,wBAAwB,GAC7B,KAAK,uBAAuB,IACxB,MAA+B,MAAa,IAA6B,OACzE,KAAK,uBAAuB,MAC9B,KAAK,cAAc,GACnB,KAAK,cAAc,cAAc,CAAG;GAExC,CAAC;GACD;EACF;EAEA,AADA,KAAK,cAAc,GACnB,KAAK,cAAc,cAAc,CAAG;CACtC;CAIA,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;CAIA,IACI,aAAsB;EACxB,OAAO,KAAK;CACd;CACA,IAAI,WAAW,GAAY;EACzB,IAAM,IAAM,KAAK;EAIjB,AAHA,KAAK,cAAc,GACnB,KAAK,cAAc,cAAc,CAAG,GAEpC,KAAK,+BAA+B,KAAK,eAAe,KAAK,WAAW;CAC1E;CAOA,oBAA6B;EAG3B,AAFA,MAAM,kBAAkB,GACxB,KAAK,+BAA+B,KAAK,UAAU,GACnD,KAAK,6BAA6B;CACpC;CAEA,uBAAgC;EAI9B,AAHA,KAAK,+BAA+B,EAAK,GACzC,KAAK,mBAAmB,iBAAiB,GACzC,KAAK,wBAAwB,GAC7B,MAAM,qBAAqB;CAC7B;CAEA,UAA6B;EAC3B,KAAK,6BAA6B;CACpC;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,GAAgC;EAC/D,IAAM,IAAW,KAAK;EAGtB,OAFI,CAAC,KAAY,MAAa,KAC1B,EAAkB,CAAQ,MAAM,EAAkB,CAAI,IAAU,KAElE,KAAK,cACL,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,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,MAAS,SAAS,IAAI,EAAE;gCACtD,EAAe,eAAe,MAAS,SAAS,IAAI,EAAE;OAC/E,IAED,EAAW,YAAY;;;;;;iDAMoB,MAAS,SAAS,IAAI,EAAE;iDACxB,MAAS,SAAS,IAAI,EAAE;OAClE;EAGH,IAAM,IAAa,KAAK,MAAM,iBAAiB,SAAS,GAClD,IAAoB,IAAiB,KAAK,MAAM,iBAAiB,sBAAsB,IAAI,KAAA;EAKjG,AAJI,MACF,KAAK,MAAM,YAAY,WAAW,OAAO,GACzC,KAAK,MAAM,YAAY,wBAAwB,CAAc,IAE/D,SAAS,qBAAqB,CAAC,GAAG,SAAS,oBAAoB,CAAU;EAEzE,IAAM,UAAuB;GAC3B,SAAS,qBAAqB,SAAS,mBAAmB,QAAO,MAAS,MAAU,CAAU,GACzF,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,cAAc,cAAc,CAAQ,GAClC,KAAK,kBAHoC,KAAK;EAKvD,KAAK,qBAAqB;EAC1B,IAAM,IAAa,SAAS,oBAAoB,CAAM;EACtD,KAAK,oBAAoB;EACzB,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,MAAS,SAAS,gCAAgC;GACjE,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,CAAI,GACvE,IACJ,MAAS,SAAS,yBAAyB,EAAe,KAAK,yBAAyB,EAAe;IACzG,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,CAAI,GAAG;IAC9E;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;GAER,AADA,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,qBAA6B,GAAW,GAAW,GAAgB,GAAmC;EACpG,IAAM,IAAO,iBAAiB,EAAE,KAAK,EAAE,MACjC,IAAK,UAAU,EAAO,QAAQ,EAAE,KAAK,EAAE;EAC7C,OAAO,MAAS,SAAS,CAAC,EAAE,UAAU,EAAK,GAAG,EAAE,UAAU,EAAG,CAAC,IAAI,CAAC,EAAE,UAAU,EAAG,GAAG,EAAE,UAAU,EAAK,CAAC;CACzG;CAEA,wBAAgC,IAAiB,IAAM;EACrD,KAAK,oBAAoB,KAAA;EACzB,IAAM,IAAU,KAAK;EAErB,AADA,KAAK,qBAAqB,KAAA,GACtB,KAAgB,IAAU;CAChC;CAKA,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;AA/SG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,IAAA,GAmCxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,IAAA,GAYxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,IAAA,GAnD3C,IAAA,IAAA,EAAA,CAAA,EAAc,cAAc,CAAA,GAAA,CAAA"}
|
|
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,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/theme/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{--wui-font-size:14px;--wui-input-width:200px;--wui-control-size:36px;--wui-overlay-min-width:200px;--wui-selection-control-size:18px;--wui-radio-group-gap:8px;--wui-checkbox-group-gap:8px;--wui-layer-base:0;--wui-layer-inline-overlay:1;--wui-layer-header:10;--wui-layer-auxiliary:20;--wui-layer-banner:30;--wui-layer-tabbar:40;--wui-layer-sidebar:50;--wui-layer-menu:100;--wui-layer-menu-nested:110;--wui-layer-toast:200;--wui-layer-loading:300;--wui-duration-press:80ms;--wui-duration-feedback:.1s;--wui-duration-trigger:.16s;--wui-duration-focus:.2s;--wui-duration-float-enter:.24s;--wui-duration-float-exit:.16s;--wui-duration-dialog-enter:.32s;--wui-duration-dialog-exit:.26s;--wui-duration-drawer-enter:.28s;--wui-duration-drawer-exit:.24s;--wui-duration-drawer-nested:.45s;--wui-duration-toast-enter:.28s;--wui-duration-toast-exit:.2s;--wui-duration-collapse-enter:.2s;--wui-duration-collapse-exit:.16s;--wui-duration-layout:.2s;--wui-duration-swipe-settle:.22s;--wui-duration-spin:.6s;--wui-duration-spinner:.8s;--wui-theme-transition-duration:.5s;--wui-theme-transition-easing:ease-in;--wui-ease-enter:cubic-bezier(.23, 1, .32, 1);--wui-ease-dialog:cubic-bezier(.2, 0, 0, 1);--wui-ease-slide:cubic-bezier(.77, 0, .175, 1);--wui-ease-swipe:cubic-bezier(.32, .72, 0, 1);--wui-ease-float:cubic-bezier(.4, .38, .2, 1);--wui-scale-enter:.95;--wui-dialog-scale-enter:1.1;--wui-focus-ring-width:3px;--wui-radius-control:calc(infinity * 1px);--wui-radius-menu:18px;--wui-radius-overlay:28px;display:contents}:host([motion=reduced]){--wui-duration-press:0s;--wui-duration-feedback:0s;--wui-duration-trigger:0s;--wui-duration-focus:0s;--wui-duration-float-enter:0s;--wui-duration-float-exit:0s;--wui-duration-dialog-enter:0s;--wui-duration-dialog-exit:0s;--wui-duration-drawer-enter:0s;--wui-duration-drawer-exit:0s;--wui-duration-drawer-nested:0s;--wui-duration-toast-enter:0s;--wui-duration-toast-exit:0s;--wui-duration-collapse-enter:0s;--wui-duration-collapse-exit:0s;--wui-duration-layout:0s;--wui-duration-swipe-settle:0s;--wui-theme-transition-duration:0s;--wui-duration-spin:1.6s;--wui-duration-spinner:1.6s;--wui-scale-enter:1;--wui-dialog-scale-enter:1}@media (prefers-reduced-motion:reduce){:host([motion=system]){--wui-duration-press:0s;--wui-duration-feedback:0s;--wui-duration-trigger:0s;--wui-duration-focus:0s;--wui-duration-float-enter:0s;--wui-duration-float-exit:0s;--wui-duration-dialog-enter:0s;--wui-duration-dialog-exit:0s;--wui-duration-drawer-enter:0s;--wui-duration-drawer-exit:0s;--wui-duration-drawer-nested:0s;--wui-duration-toast-enter:0s;--wui-duration-toast-exit:0s;--wui-duration-collapse-enter:0s;--wui-duration-collapse-exit:0s;--wui-duration-layout:0s;--wui-duration-swipe-settle:0s;--wui-theme-transition-duration:0s;--wui-duration-spin:1.6s;--wui-duration-spinner:1.6s;--wui-scale-enter:1;--wui-dialog-scale-enter:1}}:host([appearance=light]),:host([appearance=system]){--wui-color-page:#fff;--wui-color-surface:#fff;--wui-color-surface-raised:#f2f2f7;--wui-color-surface-control:#dfdfdf;--wui-color-surface-track:#e5e5ea;--wui-color-surface-menu:#
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{--wui-font-size:14px;--wui-input-width:200px;--wui-control-size:36px;--wui-overlay-min-width:200px;--wui-selection-control-size:18px;--wui-radio-group-gap:8px;--wui-checkbox-group-gap:8px;--wui-layer-base:0;--wui-layer-inline-overlay:1;--wui-layer-header:10;--wui-layer-auxiliary:20;--wui-layer-banner:30;--wui-layer-tabbar:40;--wui-layer-sidebar:50;--wui-layer-menu:100;--wui-layer-menu-nested:110;--wui-layer-toast:200;--wui-layer-loading:300;--wui-duration-press:80ms;--wui-duration-feedback:.1s;--wui-duration-trigger:.16s;--wui-duration-focus:.2s;--wui-duration-float-enter:.24s;--wui-duration-float-exit:.16s;--wui-duration-dialog-enter:.32s;--wui-duration-dialog-exit:.26s;--wui-duration-drawer-enter:.28s;--wui-duration-drawer-exit:.24s;--wui-duration-drawer-nested:.45s;--wui-duration-toast-enter:.28s;--wui-duration-toast-exit:.2s;--wui-duration-collapse-enter:.2s;--wui-duration-collapse-exit:.16s;--wui-duration-layout:.2s;--wui-duration-swipe-settle:.22s;--wui-duration-spin:.6s;--wui-duration-spinner:.8s;--wui-theme-transition-duration:.5s;--wui-theme-transition-easing:ease-in;--wui-ease-enter:cubic-bezier(.23, 1, .32, 1);--wui-ease-dialog:cubic-bezier(.2, 0, 0, 1);--wui-ease-slide:cubic-bezier(.77, 0, .175, 1);--wui-ease-swipe:cubic-bezier(.32, .72, 0, 1);--wui-ease-float:cubic-bezier(.4, .38, .2, 1);--wui-scale-enter:.95;--wui-dialog-scale-enter:1.1;--wui-focus-ring-width:3px;--wui-radius-control:calc(infinity * 1px);--wui-radius-menu:18px;--wui-radius-overlay:28px;display:contents}:host([motion=reduced]){--wui-duration-press:0s;--wui-duration-feedback:0s;--wui-duration-trigger:0s;--wui-duration-focus:0s;--wui-duration-float-enter:0s;--wui-duration-float-exit:0s;--wui-duration-dialog-enter:0s;--wui-duration-dialog-exit:0s;--wui-duration-drawer-enter:0s;--wui-duration-drawer-exit:0s;--wui-duration-drawer-nested:0s;--wui-duration-toast-enter:0s;--wui-duration-toast-exit:0s;--wui-duration-collapse-enter:0s;--wui-duration-collapse-exit:0s;--wui-duration-layout:0s;--wui-duration-swipe-settle:0s;--wui-theme-transition-duration:0s;--wui-duration-spin:1.6s;--wui-duration-spinner:1.6s;--wui-scale-enter:1;--wui-dialog-scale-enter:1}@media (prefers-reduced-motion:reduce){:host([motion=system]){--wui-duration-press:0s;--wui-duration-feedback:0s;--wui-duration-trigger:0s;--wui-duration-focus:0s;--wui-duration-float-enter:0s;--wui-duration-float-exit:0s;--wui-duration-dialog-enter:0s;--wui-duration-dialog-exit:0s;--wui-duration-drawer-enter:0s;--wui-duration-drawer-exit:0s;--wui-duration-drawer-nested:0s;--wui-duration-toast-enter:0s;--wui-duration-toast-exit:0s;--wui-duration-collapse-enter:0s;--wui-duration-collapse-exit:0s;--wui-duration-layout:0s;--wui-duration-swipe-settle:0s;--wui-theme-transition-duration:0s;--wui-duration-spin:1.6s;--wui-duration-spinner:1.6s;--wui-scale-enter:1;--wui-dialog-scale-enter:1}}:host([appearance=light]),:host([appearance=system]){--wui-color-page:#fff;--wui-color-surface:#fff;--wui-color-surface-raised:#f2f2f7;--wui-color-surface-control:#dfdfdf;--wui-color-surface-track:#e5e5ea;--wui-color-surface-menu:#fefefec2;--wui-color-surface-glass:#fafafa57;--wui-color-surface-glass-hover:color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));--wui-color-surface-glass-active:color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));--wui-color-surface-overlay:#f6f6f6d1;--wui-color-surface-sidebar:#e9e9e9d1;--wui-color-surface-segmented:#e5e5ea;--wui-color-surface-selected:#fff;--wui-color-text:#1b1b1b;--wui-color-text-secondary:#6a6a6a;--wui-color-text-tertiary:color-mix(in srgb, var(--wui-color-text) 35%, transparent);--wui-color-text-disabled:color-mix(in srgb, var(--wui-color-text) 32%, transparent);--wui-color-state-layer-hover:color-mix(in srgb, var(--wui-color-text) 6%, transparent);--wui-color-state-layer-active:color-mix(in srgb, var(--wui-color-text) 15%, transparent);--wui-color-border:#0000001a;--wui-color-glass-border:transparent;--wui-color-glass-highlight:#ffffffe6;--wui-color-glass-corner:#ffffff80;--wui-color-glass-shade:#00000008;--wui-glass-brightness:1.06;--wui-color-accent:#08f;--wui-color-on-accent:#fff;--wui-color-on-control:#fff;--wui-color-success:#16a34a;--wui-color-warning:#d97706;--wui-color-danger:#dc2626;--wui-color-info:#2563eb;--wui-color-backdrop:#0000001f;--wui-shadow-overlay:2px 16px 40px #0006;--wui-shadow-panel:0 3px 9px #00000045;--wui-shadow-glass:0 0 1px #00000005, 0 0 8px #00000008, 0 2px 16px #00000006, 0 8px 32px #00000004;--wui-color-focus-ring:#08f6;--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:host([appearance=dark]){--wui-color-page:#242628;--wui-color-surface:#2c2c2e;--wui-color-surface-raised:#2c2c2e;--wui-color-surface-control:#3a3a3c;--wui-color-surface-track:#444446;--wui-color-surface-menu:#313032bd;--wui-color-surface-glass:#2c2c2e6b;--wui-color-surface-glass-hover:color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));--wui-color-surface-glass-active:color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));--wui-color-surface-overlay:#202222e6;--wui-color-surface-sidebar:#2c2c2ecc;--wui-color-surface-segmented:#3a3a3c;--wui-color-surface-selected:#5c5c5e;--wui-color-text:#e9eaea;--wui-color-text-secondary:#a1a1a6;--wui-color-text-tertiary:color-mix(in srgb, var(--wui-color-text) 42%, transparent);--wui-color-text-disabled:color-mix(in srgb, var(--wui-color-text) 38%, transparent);--wui-color-state-layer-hover:color-mix(in srgb, var(--wui-color-text) 6%, transparent);--wui-color-state-layer-active:color-mix(in srgb, var(--wui-color-text) 15%, transparent);--wui-color-border:#ffffff24;--wui-color-glass-border:#ffffff0d;--wui-color-glass-highlight:#ffffff1a;--wui-color-glass-corner:#fff3;--wui-color-glass-shade:#00000080;--wui-glass-brightness:1.02;--wui-color-accent:#0a84ff;--wui-color-on-accent:#fff;--wui-color-on-control:#f2f2f7;--wui-color-success:#30d158;--wui-color-warning:#ff9f0a;--wui-color-danger:#ff453a;--wui-color-info:#64d2ff;--wui-color-backdrop:#0000007a;--wui-shadow-overlay:0 18px 48px #0000007a;--wui-shadow-panel:0 4px 16px #00000052;--wui-shadow-glass:0 8px 24px #00000014;--wui-color-focus-ring:#0a84ff9e;--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:dark){:host([appearance=system]){--wui-color-page:#242628;--wui-color-surface:#2c2c2e;--wui-color-surface-raised:#2c2c2e;--wui-color-surface-control:#3a3a3c;--wui-color-surface-track:#444446;--wui-color-surface-menu:#313032bd;--wui-color-surface-glass:#2c2c2e6b;--wui-color-surface-glass-hover:color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));--wui-color-surface-glass-active:color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));--wui-color-surface-overlay:#202222e6;--wui-color-surface-sidebar:#2c2c2ecc;--wui-color-surface-segmented:#3a3a3c;--wui-color-surface-selected:#5c5c5e;--wui-color-text:#e9eaea;--wui-color-text-secondary:#a1a1a6;--wui-color-text-tertiary:color-mix(in srgb, var(--wui-color-text) 42%, transparent);--wui-color-text-disabled:color-mix(in srgb, var(--wui-color-text) 38%, transparent);--wui-color-state-layer-hover:color-mix(in srgb, var(--wui-color-text) 6%, transparent);--wui-color-state-layer-active:color-mix(in srgb, var(--wui-color-text) 15%, transparent);--wui-color-border:#ffffff24;--wui-color-glass-border:#ffffff0d;--wui-color-glass-highlight:#ffffff1a;--wui-color-glass-corner:#fff3;--wui-color-glass-shade:#00000080;--wui-glass-brightness:1.02;--wui-color-accent:#0a84ff;--wui-color-on-accent:#fff;--wui-color-on-control:#f2f2f7;--wui-color-success:#30d158;--wui-color-warning:#ff9f0a;--wui-color-danger:#ff453a;--wui-color-info:#64d2ff;--wui-color-backdrop:#0000007a;--wui-shadow-overlay:0 18px 48px #0000007a;--wui-shadow-panel:0 4px 16px #00000052;--wui-shadow-glass:0 8px 24px #00000014;--wui-color-focus-ring:#0a84ff9e;--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/theme/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n --wui-font-size: 14px;\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: 8px;\n --wui-checkbox-group-gap: 8px;\n\n /* z-index layers - 基础结构 */\n --wui-layer-base: 0;\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 /* z-index layers - 浮层 */\n --wui-layer-menu: 100;\n --wui-layer-menu-nested: 110;\n --wui-layer-toast: 200;\n --wui-layer-loading: 300;\n --wui-duration-press: 80ms;\n --wui-duration-feedback: 100ms;\n --wui-duration-trigger: 160ms;\n --wui-duration-focus: 200ms;\n\n /* 锚定浮动面板(menu/popover/select/dropdown/tooltip/autocomplete)的进场与退场时长,\n 出场快于入场。 */\n --wui-duration-float-enter: 240ms;\n --wui-duration-float-exit: 160ms;\n --wui-duration-dialog-enter: 320ms;\n --wui-duration-dialog-exit: 260ms;\n --wui-duration-drawer-enter: 280ms;\n --wui-duration-drawer-exit: 240ms;\n --wui-duration-drawer-nested: 450ms;\n --wui-duration-toast-enter: 280ms;\n --wui-duration-toast-exit: 200ms;\n --wui-duration-collapse-enter: 200ms;\n --wui-duration-collapse-exit: 160ms;\n --wui-duration-layout: 200ms;\n\n /* image-preview 轮播回位:跟手结束后把轨道过渡到目标位。不属于进出场族,故单独成 token。 */\n --wui-duration-swipe-settle: 220ms;\n\n /* 无限循环的加载指示:icon 旋转与 spinner 叶片追光。周期属于动画自身而非转场,\n 但同样受 motion 契约约束,reduce 下只放慢不停。 */\n --wui-duration-spin: 600ms;\n --wui-duration-spinner: 800ms;\n --wui-theme-transition-duration: 500ms;\n --wui-theme-transition-easing: ease-in;\n\n --wui-ease-enter: cubic-bezier(0.23, 1, 0.32, 1);\n --wui-ease-dialog: cubic-bezier(0.2, 0, 0, 1);\n --wui-ease-slide: cubic-bezier(0.77, 0, 0.175, 1);\n\n /* 轮播回位的缓动:起步快、末段极慢,与 --wui-ease-slide(整卡位移)区分开。 */\n --wui-ease-swipe: cubic-bezier(0.32, 0.72, 0, 1);\n\n /* 锚定浮动面板专属进场缓动,无回弹弹簧拟合曲线。若改用 --wui-ease-enter,\n 开局 30% 的时间就走完 85% 进度,观感是先弹出再落位。 */\n --wui-ease-float: cubic-bezier(0.4, 0.38, 0.2, 1);\n\n /* 进场缩放起点。两族方向相反,各自成 token:浮动面板与 image-preview 由小到大展开\n (0.95 → 1),dialog 由大到小收缩(1.1 → 1,退场反向)。\n 方向由承载层决定。image-preview 是满视口表面,起点 >1 会把贴边的 counter/close/\n toolbar 推出视口并裁掉图片四边,只能留在 <1 的档位。dialog 是有界卡片,起点须低于\n 零越界上限 1/0.9 ≈ 1.111(min(90vw, --wui-dialog-width) 两分支在 400px 视口汇合);\n 1.1 在任意视口都不越界。曾用 1.2,窄视口会短暂越界(约 57ms、卡片不透明度 ≤44.4%,\n 分析见 ADR-0006),260919 下调。 */\n --wui-scale-enter: 0.95;\n --wui-dialog-scale-enter: 1.1;\n --wui-focus-ring-width: 3px;\n\n /* control=胶囊控件、menu=浮动菜单面板、overlay=大型覆盖层卡片 */\n --wui-radius-control: calc(infinity * 1px);\n --wui-radius-menu: 18px;\n --wui-radius-overlay: 28px;\n\n /* contents:主题宿主不生成盒、不绘制页面背景,嵌入方保留对宿主背景的完全控制\n (组件库不在宿主页面画背景)。自定义属性仍沿 DOM 树正常继承到 slotted 内容。 */\n display: contents;\n}\n\n:host([motion='reduced']) {\n --wui-duration-press: 0ms;\n --wui-duration-feedback: 0ms;\n --wui-duration-trigger: 0ms;\n --wui-duration-focus: 0ms;\n --wui-duration-float-enter: 0ms;\n --wui-duration-float-exit: 0ms;\n --wui-duration-dialog-enter: 0ms;\n --wui-duration-dialog-exit: 0ms;\n --wui-duration-drawer-enter: 0ms;\n --wui-duration-drawer-exit: 0ms;\n --wui-duration-drawer-nested: 0ms;\n --wui-duration-toast-enter: 0ms;\n --wui-duration-toast-exit: 0ms;\n --wui-duration-collapse-enter: 0ms;\n --wui-duration-collapse-exit: 0ms;\n --wui-duration-layout: 0ms;\n --wui-duration-swipe-settle: 0ms;\n --wui-theme-transition-duration: 0ms;\n\n /* 加载循环不在 reduce 下归零:它是「正在进行」的唯一信号,停掉会被读成界面卡死,只放慢。 */\n --wui-duration-spin: 1600ms;\n --wui-duration-spinner: 1600ms;\n\n --wui-scale-enter: 1;\n --wui-dialog-scale-enter: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host([motion='system']) {\n --wui-duration-press: 0ms;\n --wui-duration-feedback: 0ms;\n --wui-duration-trigger: 0ms;\n --wui-duration-focus: 0ms;\n --wui-duration-float-enter: 0ms;\n --wui-duration-float-exit: 0ms;\n --wui-duration-dialog-enter: 0ms;\n --wui-duration-dialog-exit: 0ms;\n --wui-duration-drawer-enter: 0ms;\n --wui-duration-drawer-exit: 0ms;\n --wui-duration-drawer-nested: 0ms;\n --wui-duration-toast-enter: 0ms;\n --wui-duration-toast-exit: 0ms;\n --wui-duration-collapse-enter: 0ms;\n --wui-duration-collapse-exit: 0ms;\n --wui-duration-layout: 0ms;\n --wui-duration-swipe-settle: 0ms;\n --wui-theme-transition-duration: 0ms;\n\n /* 加载循环不在 reduce 下归零:它是「正在进行」的唯一信号,停掉会被读成界面卡死,只放慢。 */\n --wui-duration-spin: 1600ms;\n --wui-duration-spinner: 1600ms;\n\n --wui-scale-enter: 1;\n --wui-dialog-scale-enter: 1;\n }\n}\n\n:host([appearance='light']),\n:host([appearance='system']) {\n --wui-color-page: #fff;\n --wui-color-surface: #fff;\n --wui-color-surface-raised: #f2f2f7;\n --wui-color-surface-control: #dfdfdf;\n --wui-color-surface-track: #e5e5ea;\n --wui-color-surface-menu: rgb(246 246 246 / 0.82);\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(246 246 246 / 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 --wui-color-glass-border: transparent;\n --wui-color-glass-highlight: rgb(255 255 255 / 0.9);\n --wui-color-glass-corner: rgb(255 255 255 / 0.5);\n --wui-color-glass-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: rgb(0 136 255 / 0.4);\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(30 30 32 / 0.92);\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.9);\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-border: rgb(255 255 255 / 0.05);\n --wui-color-glass-highlight: rgb(255 255 255 / 0.1);\n --wui-color-glass-corner: rgb(255 255 255 / 0.2);\n --wui-color-glass-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: rgb(10 132 255 / 0.62);\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(30 30 32 / 0.92);\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.9);\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-border: rgb(255 255 255 / 0.05);\n --wui-color-glass-highlight: rgb(255 255 255 / 0.1);\n --wui-color-glass-corner: rgb(255 255 255 / 0.2);\n --wui-color-glass-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: rgb(10 132 255 / 0.62);\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 --wui-font-size: 14px;\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: 8px;\n --wui-checkbox-group-gap: 8px;\n\n --wui-layer-base: 0;\n --wui-layer-inline-overlay: 1;\n --wui-layer-header: 10;\n --wui-layer-auxiliary: 20;\n --wui-layer-banner: 30;\n --wui-layer-tabbar: 40;\n --wui-layer-sidebar: 50;\n\n --wui-layer-menu: 100;\n --wui-layer-menu-nested: 110;\n --wui-layer-toast: 200;\n --wui-layer-loading: 300;\n --wui-duration-press: 80ms;\n --wui-duration-feedback: 100ms;\n --wui-duration-trigger: 160ms;\n --wui-duration-focus: 200ms;\n\n /* 锚定浮动面板(menu/popover/select/dropdown/tooltip/autocomplete)的进场与退场时长,\n 出场快于入场。 */\n --wui-duration-float-enter: 240ms;\n --wui-duration-float-exit: 160ms;\n --wui-duration-dialog-enter: 320ms;\n --wui-duration-dialog-exit: 260ms;\n --wui-duration-drawer-enter: 280ms;\n --wui-duration-drawer-exit: 240ms;\n --wui-duration-drawer-nested: 450ms;\n --wui-duration-toast-enter: 280ms;\n --wui-duration-toast-exit: 200ms;\n --wui-duration-collapse-enter: 200ms;\n --wui-duration-collapse-exit: 160ms;\n --wui-duration-layout: 200ms;\n\n /* image-preview 轮播回位:跟手结束后把轨道过渡到目标位。不属于进出场族,故单独成 token。 */\n --wui-duration-swipe-settle: 220ms;\n\n /* 无限循环的加载指示:icon 旋转与 spinner 叶片追光。周期属于动画自身而非转场,\n 但同样受 motion 契约约束,reduce 下只放慢不停。 */\n --wui-duration-spin: 600ms;\n --wui-duration-spinner: 800ms;\n --wui-theme-transition-duration: 500ms;\n --wui-theme-transition-easing: ease-in;\n\n --wui-ease-enter: cubic-bezier(0.23, 1, 0.32, 1);\n --wui-ease-dialog: cubic-bezier(0.2, 0, 0, 1);\n --wui-ease-slide: cubic-bezier(0.77, 0, 0.175, 1);\n\n /* 轮播回位的缓动:起步快、末段极慢,与 --wui-ease-slide(整卡位移)区分开。 */\n --wui-ease-swipe: cubic-bezier(0.32, 0.72, 0, 1);\n\n /* 锚定浮动面板专属进场缓动,无回弹弹簧拟合曲线。若改用 --wui-ease-enter,\n 开局 30% 的时间就走完 85% 进度,观感是先弹出再落位。 */\n --wui-ease-float: cubic-bezier(0.4, 0.38, 0.2, 1);\n\n /* 进场缩放起点。两族方向相反,各自成 token:浮动面板与 image-preview 由小到大展开\n (0.95 → 1),dialog 由大到小收缩(1.1 → 1,退场反向)。\n 方向由承载层决定。image-preview 是满视口表面,起点 >1 会把贴边的 counter/close/\n toolbar 推出视口并裁掉图片四边,只能留在 <1 的档位。dialog 是有界卡片,起点须低于\n 零越界上限 1/0.9 ≈ 1.111(min(90vw, --wui-dialog-width) 两分支在 400px 视口汇合);\n 1.1 在任意视口都不越界。曾用 1.2,窄视口会短暂越界(约 57ms、卡片不透明度 ≤44.4%,\n 分析见 ADR-0006),260919 下调。 */\n --wui-scale-enter: 0.95;\n --wui-dialog-scale-enter: 1.1;\n --wui-focus-ring-width: 3px;\n\n /* control=胶囊控件、menu=浮动菜单面板、overlay=大型覆盖层卡片 */\n --wui-radius-control: calc(infinity * 1px);\n --wui-radius-menu: 18px;\n --wui-radius-overlay: 28px;\n\n /* contents:主题宿主不生成盒、不绘制页面背景,嵌入方保留对宿主背景的完全控制\n (组件库不在宿主页面画背景)。自定义属性仍沿 DOM 树正常继承到 slotted 内容。 */\n display: contents;\n}\n\n:host([motion='reduced']) {\n --wui-duration-press: 0ms;\n --wui-duration-feedback: 0ms;\n --wui-duration-trigger: 0ms;\n --wui-duration-focus: 0ms;\n --wui-duration-float-enter: 0ms;\n --wui-duration-float-exit: 0ms;\n --wui-duration-dialog-enter: 0ms;\n --wui-duration-dialog-exit: 0ms;\n --wui-duration-drawer-enter: 0ms;\n --wui-duration-drawer-exit: 0ms;\n --wui-duration-drawer-nested: 0ms;\n --wui-duration-toast-enter: 0ms;\n --wui-duration-toast-exit: 0ms;\n --wui-duration-collapse-enter: 0ms;\n --wui-duration-collapse-exit: 0ms;\n --wui-duration-layout: 0ms;\n --wui-duration-swipe-settle: 0ms;\n --wui-theme-transition-duration: 0ms;\n\n /* 加载循环不在 reduce 下归零:它是「正在进行」的唯一信号,停掉会被读成界面卡死,只放慢。 */\n --wui-duration-spin: 1600ms;\n --wui-duration-spinner: 1600ms;\n\n --wui-scale-enter: 1;\n --wui-dialog-scale-enter: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host([motion='system']) {\n --wui-duration-press: 0ms;\n --wui-duration-feedback: 0ms;\n --wui-duration-trigger: 0ms;\n --wui-duration-focus: 0ms;\n --wui-duration-float-enter: 0ms;\n --wui-duration-float-exit: 0ms;\n --wui-duration-dialog-enter: 0ms;\n --wui-duration-dialog-exit: 0ms;\n --wui-duration-drawer-enter: 0ms;\n --wui-duration-drawer-exit: 0ms;\n --wui-duration-drawer-nested: 0ms;\n --wui-duration-toast-enter: 0ms;\n --wui-duration-toast-exit: 0ms;\n --wui-duration-collapse-enter: 0ms;\n --wui-duration-collapse-exit: 0ms;\n --wui-duration-layout: 0ms;\n --wui-duration-swipe-settle: 0ms;\n --wui-theme-transition-duration: 0ms;\n\n /* 加载循环不在 reduce 下归零:它是「正在进行」的唯一信号,停掉会被读成界面卡死,只放慢。 */\n --wui-duration-spin: 1600ms;\n --wui-duration-spinner: 1600ms;\n\n --wui-scale-enter: 1;\n --wui-dialog-scale-enter: 1;\n }\n}\n\n:host([appearance='light']),\n:host([appearance='system']) {\n --wui-color-page: #fff;\n --wui-color-surface: #fff;\n --wui-color-surface-raised: #f2f2f7;\n --wui-color-surface-control: #dfdfdf;\n --wui-color-surface-track: #e5e5ea;\n --wui-color-surface-menu: rgb(254 254 254 / 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(246 246 246 / 0.82);\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 --wui-color-glass-border: transparent;\n --wui-color-glass-highlight: rgb(255 255 255 / 0.9);\n --wui-color-glass-corner: rgb(255 255 255 / 0.5);\n --wui-color-glass-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: rgb(0 136 255 / 0.4);\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.9);\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 共用该 token,不在本次范围内。 */\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-border: rgb(255 255 255 / 0.05);\n --wui-color-glass-highlight: rgb(255 255 255 / 0.1);\n --wui-color-glass-corner: rgb(255 255 255 / 0.2);\n --wui-color-glass-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: rgb(10 132 255 / 0.62);\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.9);\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-border: rgb(255 255 255 / 0.05);\n --wui-color-glass-highlight: rgb(255 255 255 / 0.1);\n --wui-color-glass-corner: rgb(255 255 255 / 0.2);\n --wui-color-glass-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: rgb(10 132 255 / 0.62);\n color-scheme: dark;\n }\n}\n"],"mappings":""}
|