@duskmoon-dev/core 1.17.2 → 1.18.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -2
- package/dist/components/button.css +50 -49
- package/dist/components/chat.css +417 -8
- package/dist/components/index.css +952 -1012
- package/dist/components/popover.css +180 -459
- package/dist/components/tooltip.css +127 -318
- package/dist/esm/components/button.js +50 -49
- package/dist/esm/components/chat.js +417 -8
- package/dist/esm/components/popover.js +180 -459
- package/dist/esm/components/tooltip.js +127 -318
- package/dist/index.css +952 -1012
- package/dist/index.min.css +1 -1
- package/package.json +4 -4
|
@@ -2,107 +2,156 @@
|
|
|
2
2
|
export const css = `/**
|
|
3
3
|
* Popover Component Styles
|
|
4
4
|
* DuskMoonUI - Material Design 3 inspired popover system
|
|
5
|
+
*
|
|
6
|
+
* Uses native Popover API + CSS Anchor Positioning:
|
|
7
|
+
* <button popovertarget="id" style="anchor-name: --id">…</button>
|
|
8
|
+
* <div id="id" popover class="popover popover-bottom" style="position-anchor: --id">…</div>
|
|
5
9
|
*/
|
|
6
10
|
|
|
7
11
|
@layer components {
|
|
8
|
-
/*
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
+
/* ========================================
|
|
13
|
+
* Native Popover surface
|
|
14
|
+
* ======================================== */
|
|
15
|
+
|
|
16
|
+
.popover {
|
|
17
|
+
--popover-color-intensity: 30%;
|
|
12
18
|
}
|
|
13
19
|
|
|
14
|
-
|
|
15
|
-
.popover-content {
|
|
20
|
+
.popover[popover] {
|
|
16
21
|
position: absolute;
|
|
22
|
+
inset: auto;
|
|
17
23
|
z-index: 1050;
|
|
18
24
|
min-width: 12rem;
|
|
19
25
|
max-width: 20rem;
|
|
20
26
|
padding: 1rem;
|
|
27
|
+
margin: 0.5rem;
|
|
21
28
|
background-color: var(--color-surface);
|
|
22
29
|
border: 1px solid var(--color-outline-variant);
|
|
23
30
|
border-radius: var(--radius-md);
|
|
24
31
|
box-shadow: var(--shadow-lg);
|
|
25
32
|
opacity: 0;
|
|
26
|
-
visibility: hidden;
|
|
27
33
|
transform: scale(0.95);
|
|
28
|
-
|
|
29
|
-
|
|
34
|
+
position-area: bottom;
|
|
35
|
+
position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
|
|
36
|
+
transition:
|
|
37
|
+
opacity 150ms ease-out,
|
|
38
|
+
transform 150ms ease-out,
|
|
39
|
+
overlay 150ms ease-out allow-discrete,
|
|
40
|
+
display 150ms ease-out allow-discrete;
|
|
30
41
|
}
|
|
31
42
|
|
|
32
|
-
.popover
|
|
33
|
-
.popover-content.show {
|
|
43
|
+
.popover[popover]:popover-open {
|
|
34
44
|
opacity: 1;
|
|
35
45
|
visibility: visible;
|
|
36
46
|
transform: scale(1);
|
|
37
47
|
}
|
|
38
48
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
49
|
+
@starting-style {
|
|
50
|
+
.popover[popover]:popover-open {
|
|
51
|
+
opacity: 0;
|
|
52
|
+
transform: scale(0.95);
|
|
53
|
+
}
|
|
44
54
|
}
|
|
45
55
|
|
|
46
|
-
/*
|
|
47
|
-
.popover
|
|
48
|
-
|
|
49
|
-
.popover:not([popover])[class*="popover-left"],
|
|
50
|
-
.popover:not([popover])[class*="popover-right"] {
|
|
51
|
-
position: absolute;
|
|
52
|
-
z-index: 1050;
|
|
53
|
-
min-width: 12rem;
|
|
54
|
-
max-width: 20rem;
|
|
55
|
-
padding: 1rem;
|
|
56
|
-
background-color: var(--color-surface);
|
|
57
|
-
border: 1px solid var(--color-outline-variant);
|
|
58
|
-
border-radius: var(--radius-md);
|
|
59
|
-
box-shadow: var(--shadow-lg);
|
|
60
|
-
opacity: 0;
|
|
61
|
-
visibility: hidden;
|
|
62
|
-
transition: opacity 150ms ease-out, visibility 150ms ease-out;
|
|
56
|
+
/* Preferred position-area */
|
|
57
|
+
.popover-top[popover] {
|
|
58
|
+
position-area: top;
|
|
63
59
|
}
|
|
64
60
|
|
|
65
|
-
.popover[
|
|
66
|
-
|
|
67
|
-
.popover[class*="popover-left"].popover-show,
|
|
68
|
-
.popover[class*="popover-right"].popover-show {
|
|
69
|
-
opacity: 1;
|
|
70
|
-
visibility: visible;
|
|
61
|
+
.popover-bottom[popover] {
|
|
62
|
+
position-area: bottom;
|
|
71
63
|
}
|
|
72
64
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
bottom: 100%;
|
|
76
|
-
left: 50%;
|
|
77
|
-
transform: translateX(-50%);
|
|
78
|
-
margin-bottom: 0.75rem;
|
|
65
|
+
.popover-left[popover] {
|
|
66
|
+
position-area: left;
|
|
79
67
|
}
|
|
80
68
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
top: 100%;
|
|
84
|
-
left: 50%;
|
|
85
|
-
transform: translateX(-50%);
|
|
86
|
-
margin-top: 0.75rem;
|
|
69
|
+
.popover-right[popover] {
|
|
70
|
+
position-area: right;
|
|
87
71
|
}
|
|
88
72
|
|
|
89
|
-
/*
|
|
90
|
-
.popover
|
|
91
|
-
|
|
92
|
-
top: 50%;
|
|
93
|
-
transform: translateY(-50%);
|
|
94
|
-
margin-right: 0.75rem;
|
|
73
|
+
/* Alignment variants */
|
|
74
|
+
.popover-start[popover] {
|
|
75
|
+
position-area: bottom span-right;
|
|
95
76
|
}
|
|
96
77
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
78
|
+
.popover-end[popover] {
|
|
79
|
+
position-area: bottom span-left;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.popover-top.popover-start[popover] {
|
|
83
|
+
position-area: top span-right;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.popover-top.popover-end[popover] {
|
|
87
|
+
position-area: top span-left;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.popover-bottom.popover-start[popover] {
|
|
91
|
+
position-area: bottom span-right;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.popover-bottom.popover-end[popover] {
|
|
95
|
+
position-area: bottom span-left;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.popover-left.popover-start[popover] {
|
|
99
|
+
position-area: left span-bottom;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.popover-left.popover-end[popover] {
|
|
103
|
+
position-area: left span-top;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.popover-right.popover-start[popover] {
|
|
107
|
+
position-area: right span-bottom;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.popover-right.popover-end[popover] {
|
|
111
|
+
position-area: right span-top;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* Backdrop */
|
|
115
|
+
.popover[popover]::backdrop {
|
|
116
|
+
background-color: transparent;
|
|
117
|
+
transition:
|
|
118
|
+
background-color 150ms ease-out,
|
|
119
|
+
overlay 150ms ease-out allow-discrete,
|
|
120
|
+
display 150ms ease-out allow-discrete;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.popover[popover]:popover-open::backdrop {
|
|
124
|
+
background-color: color-mix(in srgb, var(--color-scrim) 10%, transparent);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@starting-style {
|
|
128
|
+
.popover[popover]:popover-open::backdrop {
|
|
129
|
+
background-color: transparent;
|
|
130
|
+
}
|
|
103
131
|
}
|
|
104
132
|
|
|
105
|
-
|
|
133
|
+
.popover-modal[popover]::backdrop {
|
|
134
|
+
background-color: transparent;
|
|
135
|
+
transition:
|
|
136
|
+
background-color 150ms ease-out,
|
|
137
|
+
overlay 150ms ease-out allow-discrete,
|
|
138
|
+
display 150ms ease-out allow-discrete;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.popover-modal[popover]:popover-open::backdrop {
|
|
142
|
+
background-color: color-mix(in srgb, var(--color-scrim) 30%, transparent);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
@starting-style {
|
|
146
|
+
.popover-modal[popover]:popover-open::backdrop {
|
|
147
|
+
background-color: transparent;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* ========================================
|
|
152
|
+
* Arrow (preferred position; may be wrong after flip)
|
|
153
|
+
* ======================================== */
|
|
154
|
+
|
|
106
155
|
.popover-arrow {
|
|
107
156
|
position: absolute;
|
|
108
157
|
width: 0.75rem;
|
|
@@ -112,22 +161,8 @@ export const css = `/**
|
|
|
112
161
|
transform: rotate(45deg);
|
|
113
162
|
}
|
|
114
163
|
|
|
115
|
-
|
|
116
|
-
.popover-
|
|
117
|
-
.popover .popover-content {
|
|
118
|
-
bottom: 100%;
|
|
119
|
-
left: 50%;
|
|
120
|
-
transform: translateX(-50%) scale(0.95);
|
|
121
|
-
margin-bottom: 0.75rem;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.popover-top.show .popover-content,
|
|
125
|
-
.popover.show .popover-content {
|
|
126
|
-
transform: translateX(-50%) scale(1);
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.popover-top .popover-arrow,
|
|
130
|
-
.popover .popover-arrow {
|
|
164
|
+
.popover-top[popover] > .popover-arrow,
|
|
165
|
+
.popover[popover]:not(.popover-bottom):not(.popover-left):not(.popover-right) > .popover-arrow {
|
|
131
166
|
bottom: -0.375rem;
|
|
132
167
|
left: 50%;
|
|
133
168
|
transform: translateX(-50%) rotate(45deg);
|
|
@@ -135,19 +170,7 @@ export const css = `/**
|
|
|
135
170
|
border-left: none;
|
|
136
171
|
}
|
|
137
172
|
|
|
138
|
-
|
|
139
|
-
.popover-bottom .popover-content {
|
|
140
|
-
top: 100%;
|
|
141
|
-
left: 50%;
|
|
142
|
-
transform: translateX(-50%) scale(0.95);
|
|
143
|
-
margin-top: 0.75rem;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.popover-bottom.show .popover-content {
|
|
147
|
-
transform: translateX(-50%) scale(1);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.popover-bottom .popover-arrow {
|
|
173
|
+
.popover-bottom[popover] > .popover-arrow {
|
|
151
174
|
top: -0.375rem;
|
|
152
175
|
left: 50%;
|
|
153
176
|
transform: translateX(-50%) rotate(45deg);
|
|
@@ -155,19 +178,7 @@ export const css = `/**
|
|
|
155
178
|
border-right: none;
|
|
156
179
|
}
|
|
157
180
|
|
|
158
|
-
|
|
159
|
-
.popover-left .popover-content {
|
|
160
|
-
right: 100%;
|
|
161
|
-
top: 50%;
|
|
162
|
-
transform: translateY(-50%) scale(0.95);
|
|
163
|
-
margin-right: 0.75rem;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
.popover-left.show .popover-content {
|
|
167
|
-
transform: translateY(-50%) scale(1);
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.popover-left .popover-arrow {
|
|
181
|
+
.popover-left[popover] > .popover-arrow {
|
|
171
182
|
right: -0.375rem;
|
|
172
183
|
top: 50%;
|
|
173
184
|
transform: translateY(-50%) rotate(45deg);
|
|
@@ -175,19 +186,7 @@ export const css = `/**
|
|
|
175
186
|
border-bottom: none;
|
|
176
187
|
}
|
|
177
188
|
|
|
178
|
-
|
|
179
|
-
.popover-right .popover-content {
|
|
180
|
-
left: 100%;
|
|
181
|
-
top: 50%;
|
|
182
|
-
transform: translateY(-50%) scale(0.95);
|
|
183
|
-
margin-left: 0.75rem;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
.popover-right.show .popover-content {
|
|
187
|
-
transform: translateY(-50%) scale(1);
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
.popover-right .popover-arrow {
|
|
189
|
+
.popover-right[popover] > .popover-arrow {
|
|
191
190
|
left: -0.375rem;
|
|
192
191
|
top: 50%;
|
|
193
192
|
transform: translateY(-50%) rotate(45deg);
|
|
@@ -195,7 +194,14 @@ export const css = `/**
|
|
|
195
194
|
border-top: none;
|
|
196
195
|
}
|
|
197
196
|
|
|
198
|
-
|
|
197
|
+
.popover-no-arrow > .popover-arrow {
|
|
198
|
+
display: none;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
/* ========================================
|
|
202
|
+
* Structure
|
|
203
|
+
* ======================================== */
|
|
204
|
+
|
|
199
205
|
.popover-header {
|
|
200
206
|
display: flex;
|
|
201
207
|
align-items: center;
|
|
@@ -207,17 +213,24 @@ export const css = `/**
|
|
|
207
213
|
|
|
208
214
|
.popover-title {
|
|
209
215
|
flex: 1;
|
|
216
|
+
min-width: 0;
|
|
217
|
+
margin: 0;
|
|
210
218
|
font-size: 0.875rem;
|
|
211
219
|
font-weight: 600;
|
|
220
|
+
line-height: 1.5rem;
|
|
212
221
|
color: var(--color-on-surface);
|
|
213
222
|
}
|
|
214
223
|
|
|
224
|
+
/* Prefer placing .popover-close inside .popover-header for aligned title + close */
|
|
215
225
|
.popover-close {
|
|
216
|
-
display: flex;
|
|
226
|
+
display: inline-flex;
|
|
227
|
+
flex-shrink: 0;
|
|
217
228
|
align-items: center;
|
|
218
229
|
justify-content: center;
|
|
219
230
|
width: 1.5rem;
|
|
220
231
|
height: 1.5rem;
|
|
232
|
+
margin-inline-start: auto;
|
|
233
|
+
padding: 0;
|
|
221
234
|
color: var(--color-on-surface-variant);
|
|
222
235
|
background-color: transparent;
|
|
223
236
|
border: none;
|
|
@@ -226,6 +239,18 @@ export const css = `/**
|
|
|
226
239
|
transition: background-color 150ms ease-in-out;
|
|
227
240
|
}
|
|
228
241
|
|
|
242
|
+
/* Fallback when close is a direct child of the popover (not in header) */
|
|
243
|
+
.popover[popover] > .popover-close {
|
|
244
|
+
position: absolute;
|
|
245
|
+
top: 1rem;
|
|
246
|
+
right: 1rem;
|
|
247
|
+
margin-inline-start: 0;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.popover[popover]:has(> .popover-close) > .popover-header {
|
|
251
|
+
padding-right: 1.75rem;
|
|
252
|
+
}
|
|
253
|
+
|
|
229
254
|
.popover-close:hover {
|
|
230
255
|
background-color: var(--color-surface-container);
|
|
231
256
|
}
|
|
@@ -235,14 +260,12 @@ export const css = `/**
|
|
|
235
260
|
box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
|
|
236
261
|
}
|
|
237
262
|
|
|
238
|
-
/* Popover Body */
|
|
239
263
|
.popover-body {
|
|
240
264
|
font-size: 0.875rem;
|
|
241
265
|
color: var(--color-on-surface-variant);
|
|
242
266
|
line-height: 1.5;
|
|
243
267
|
}
|
|
244
268
|
|
|
245
|
-
/* Popover Footer */
|
|
246
269
|
.popover-footer {
|
|
247
270
|
display: flex;
|
|
248
271
|
align-items: center;
|
|
@@ -253,194 +276,112 @@ export const css = `/**
|
|
|
253
276
|
border-top: 1px solid var(--color-outline-variant);
|
|
254
277
|
}
|
|
255
278
|
|
|
256
|
-
/*
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
}
|
|
279
|
+
/* ========================================
|
|
280
|
+
* Size variants
|
|
281
|
+
* ======================================== */
|
|
260
282
|
|
|
261
|
-
|
|
262
|
-
.popover-sm .popover-content {
|
|
283
|
+
.popover-sm[popover] {
|
|
263
284
|
min-width: 8rem;
|
|
264
285
|
max-width: 14rem;
|
|
265
286
|
padding: 0.75rem;
|
|
266
287
|
}
|
|
267
288
|
|
|
268
|
-
.popover-lg
|
|
289
|
+
.popover-lg[popover] {
|
|
269
290
|
min-width: 16rem;
|
|
270
291
|
max-width: 28rem;
|
|
271
292
|
padding: 1.25rem;
|
|
272
293
|
}
|
|
273
294
|
|
|
274
|
-
.popover-full
|
|
295
|
+
.popover-full[popover] {
|
|
275
296
|
min-width: 0;
|
|
276
297
|
max-width: none;
|
|
277
298
|
width: max-content;
|
|
278
299
|
}
|
|
279
300
|
|
|
280
|
-
/*
|
|
281
|
-
|
|
282
|
-
*
|
|
283
|
-
* Override this variable to adjust how strongly colors appear:
|
|
284
|
-
* - 20% = subtle tint
|
|
285
|
-
* - 30% = moderate (default)
|
|
286
|
-
* - 40% = bold/prominent
|
|
287
|
-
*/
|
|
288
|
-
.popover {
|
|
289
|
-
--popover-color-intensity: 30%;
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
/* Dark variant */
|
|
293
|
-
.popover-dark .popover-content {
|
|
294
|
-
background-color: var(--color-on-surface);
|
|
295
|
-
color: var(--color-surface);
|
|
296
|
-
border-color: transparent;
|
|
297
|
-
}
|
|
301
|
+
/* ========================================
|
|
302
|
+
* Color variants
|
|
303
|
+
* ======================================== */
|
|
298
304
|
|
|
299
|
-
.popover-dark[
|
|
300
|
-
.popover-dark[class*="popover-bottom"],
|
|
301
|
-
.popover-dark[class*="popover-left"],
|
|
302
|
-
.popover-dark[class*="popover-right"] {
|
|
305
|
+
.popover-dark[popover] {
|
|
303
306
|
background-color: var(--color-on-surface);
|
|
304
307
|
color: var(--color-surface);
|
|
305
308
|
border-color: transparent;
|
|
306
309
|
}
|
|
307
310
|
|
|
308
|
-
.popover-dark .popover-arrow {
|
|
311
|
+
.popover-dark[popover] > .popover-arrow {
|
|
309
312
|
background-color: var(--color-on-surface);
|
|
310
313
|
border-color: transparent;
|
|
311
314
|
}
|
|
312
315
|
|
|
313
|
-
.popover-dark .popover-title {
|
|
316
|
+
.popover-dark[popover] .popover-title {
|
|
314
317
|
color: var(--color-surface);
|
|
315
318
|
}
|
|
316
319
|
|
|
317
|
-
.popover-dark .popover-body {
|
|
320
|
+
.popover-dark[popover] .popover-body {
|
|
318
321
|
color: var(--color-surface);
|
|
319
322
|
opacity: 0.9;
|
|
320
323
|
}
|
|
321
324
|
|
|
322
|
-
|
|
323
|
-
.popover-primary .popover-content {
|
|
324
|
-
background-color: color-mix(in oklch, var(--color-primary) var(--popover-color-intensity), var(--color-surface));
|
|
325
|
-
border-color: var(--color-primary);
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
.popover-primary[class*="popover-top"],
|
|
329
|
-
.popover-primary[class*="popover-bottom"],
|
|
330
|
-
.popover-primary[class*="popover-left"],
|
|
331
|
-
.popover-primary[class*="popover-right"] {
|
|
325
|
+
.popover-primary[popover] {
|
|
332
326
|
background-color: color-mix(in oklch, var(--color-primary) var(--popover-color-intensity), var(--color-surface));
|
|
333
327
|
border-color: var(--color-primary);
|
|
334
328
|
}
|
|
335
329
|
|
|
336
|
-
.popover-primary .popover-arrow {
|
|
330
|
+
.popover-primary[popover] > .popover-arrow {
|
|
337
331
|
background-color: color-mix(in oklch, var(--color-primary) var(--popover-color-intensity), var(--color-surface));
|
|
338
332
|
border-color: var(--color-primary);
|
|
339
333
|
}
|
|
340
334
|
|
|
341
|
-
.popover-primary .popover-body
|
|
342
|
-
|
|
343
|
-
}
|
|
344
|
-
|
|
345
|
-
.popover-primary .popover-title {
|
|
335
|
+
.popover-primary[popover] .popover-body,
|
|
336
|
+
.popover-primary[popover] .popover-title {
|
|
346
337
|
color: var(--color-on-surface);
|
|
347
338
|
}
|
|
348
339
|
|
|
349
|
-
|
|
350
|
-
.popover-secondary .popover-content {
|
|
351
|
-
background-color: color-mix(in oklch, var(--color-secondary) var(--popover-color-intensity), var(--color-surface));
|
|
352
|
-
border-color: var(--color-secondary);
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
.popover-secondary[class*="popover-top"],
|
|
356
|
-
.popover-secondary[class*="popover-bottom"],
|
|
357
|
-
.popover-secondary[class*="popover-left"],
|
|
358
|
-
.popover-secondary[class*="popover-right"] {
|
|
340
|
+
.popover-secondary[popover] {
|
|
359
341
|
background-color: color-mix(in oklch, var(--color-secondary) var(--popover-color-intensity), var(--color-surface));
|
|
360
342
|
border-color: var(--color-secondary);
|
|
361
343
|
}
|
|
362
344
|
|
|
363
|
-
.popover-secondary .popover-arrow {
|
|
345
|
+
.popover-secondary[popover] > .popover-arrow {
|
|
364
346
|
background-color: color-mix(in oklch, var(--color-secondary) var(--popover-color-intensity), var(--color-surface));
|
|
365
347
|
border-color: var(--color-secondary);
|
|
366
348
|
}
|
|
367
349
|
|
|
368
|
-
.popover-secondary .popover-body
|
|
369
|
-
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
.popover-secondary .popover-title {
|
|
350
|
+
.popover-secondary[popover] .popover-body,
|
|
351
|
+
.popover-secondary[popover] .popover-title {
|
|
373
352
|
color: var(--color-on-surface);
|
|
374
353
|
}
|
|
375
354
|
|
|
376
|
-
|
|
377
|
-
.popover-tertiary .popover-content {
|
|
378
|
-
background-color: color-mix(in oklch, var(--color-tertiary) var(--popover-color-intensity), var(--color-surface));
|
|
379
|
-
border-color: var(--color-tertiary);
|
|
380
|
-
}
|
|
381
|
-
|
|
382
|
-
.popover-tertiary[class*="popover-top"],
|
|
383
|
-
.popover-tertiary[class*="popover-bottom"],
|
|
384
|
-
.popover-tertiary[class*="popover-left"],
|
|
385
|
-
.popover-tertiary[class*="popover-right"] {
|
|
355
|
+
.popover-tertiary[popover] {
|
|
386
356
|
background-color: color-mix(in oklch, var(--color-tertiary) var(--popover-color-intensity), var(--color-surface));
|
|
387
357
|
border-color: var(--color-tertiary);
|
|
388
358
|
}
|
|
389
359
|
|
|
390
|
-
.popover-tertiary .popover-arrow {
|
|
360
|
+
.popover-tertiary[popover] > .popover-arrow {
|
|
391
361
|
background-color: color-mix(in oklch, var(--color-tertiary) var(--popover-color-intensity), var(--color-surface));
|
|
392
362
|
border-color: var(--color-tertiary);
|
|
393
363
|
}
|
|
394
364
|
|
|
395
|
-
.popover-tertiary .popover-body
|
|
396
|
-
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
.popover-tertiary .popover-title {
|
|
365
|
+
.popover-tertiary[popover] .popover-body,
|
|
366
|
+
.popover-tertiary[popover] .popover-title {
|
|
400
367
|
color: var(--color-on-surface);
|
|
401
368
|
}
|
|
402
369
|
|
|
403
|
-
|
|
404
|
-
.popover-surface-highest .popover-content {
|
|
405
|
-
background-color: var(--color-surface-container-highest);
|
|
406
|
-
border-color: var(--color-outline-variant);
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
.popover-surface-highest[class*="popover-top"],
|
|
410
|
-
.popover-surface-highest[class*="popover-bottom"],
|
|
411
|
-
.popover-surface-highest[class*="popover-left"],
|
|
412
|
-
.popover-surface-highest[class*="popover-right"] {
|
|
370
|
+
.popover-surface-highest[popover] {
|
|
413
371
|
background-color: var(--color-surface-container-highest);
|
|
414
372
|
border-color: var(--color-outline-variant);
|
|
415
373
|
}
|
|
416
374
|
|
|
417
|
-
.popover-surface-highest .popover-arrow {
|
|
375
|
+
.popover-surface-highest[popover] > .popover-arrow {
|
|
418
376
|
background-color: var(--color-surface-container-highest);
|
|
419
377
|
border-color: var(--color-outline-variant);
|
|
420
378
|
}
|
|
421
379
|
|
|
422
|
-
/*
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
opacity: 1;
|
|
426
|
-
visibility: visible;
|
|
427
|
-
transform: translateX(-50%) scale(1);
|
|
428
|
-
}
|
|
429
|
-
|
|
430
|
-
.popover-hover.popover-bottom:hover .popover-content,
|
|
431
|
-
.popover-hover.popover-bottom:focus-within .popover-content {
|
|
432
|
-
transform: translateX(-50%) scale(1);
|
|
433
|
-
}
|
|
434
|
-
|
|
435
|
-
.popover-hover.popover-left:hover .popover-content,
|
|
436
|
-
.popover-hover.popover-left:focus-within .popover-content,
|
|
437
|
-
.popover-hover.popover-right:hover .popover-content,
|
|
438
|
-
.popover-hover.popover-right:focus-within .popover-content {
|
|
439
|
-
transform: translateY(-50%) scale(1);
|
|
440
|
-
}
|
|
380
|
+
/* ========================================
|
|
381
|
+
* Menu / confirm
|
|
382
|
+
* ======================================== */
|
|
441
383
|
|
|
442
|
-
|
|
443
|
-
.popover-menu .popover-content {
|
|
384
|
+
.popover-menu[popover] {
|
|
444
385
|
padding: 0.5rem;
|
|
445
386
|
}
|
|
446
387
|
|
|
@@ -484,239 +425,19 @@ export const css = `/**
|
|
|
484
425
|
background-color: var(--color-outline-variant);
|
|
485
426
|
}
|
|
486
427
|
|
|
487
|
-
|
|
488
|
-
.popover-confirm .popover-content {
|
|
428
|
+
.popover-confirm[popover] {
|
|
489
429
|
text-align: center;
|
|
490
430
|
}
|
|
491
431
|
|
|
492
|
-
.popover-confirm .popover-footer {
|
|
432
|
+
.popover-confirm[popover] .popover-footer {
|
|
493
433
|
justify-content: center;
|
|
494
434
|
}
|
|
495
435
|
|
|
496
436
|
/* ========================================
|
|
497
|
-
*
|
|
498
|
-
* Uses native [popover] attribute with :popover-open pseudo-class
|
|
437
|
+
* Reduce Motion
|
|
499
438
|
* ======================================== */
|
|
500
439
|
|
|
501
|
-
/* Native popover base styles */
|
|
502
|
-
.popover[popover] {
|
|
503
|
-
position: fixed;
|
|
504
|
-
inset: unset;
|
|
505
|
-
z-index: 1050;
|
|
506
|
-
min-width: 12rem;
|
|
507
|
-
max-width: 20rem;
|
|
508
|
-
padding: 1rem;
|
|
509
|
-
margin: 0;
|
|
510
|
-
background-color: var(--color-surface);
|
|
511
|
-
border: 1px solid var(--color-outline-variant);
|
|
512
|
-
border-radius: var(--radius-md);
|
|
513
|
-
box-shadow: var(--shadow-lg);
|
|
514
|
-
opacity: 0;
|
|
515
|
-
transform: scale(0.95);
|
|
516
|
-
transition: opacity 150ms ease-out, transform 150ms ease-out, overlay 150ms ease-out allow-discrete, display 150ms ease-out allow-discrete;
|
|
517
|
-
}
|
|
518
|
-
|
|
519
|
-
/* Popover open state */
|
|
520
|
-
.popover[popover]:popover-open {
|
|
521
|
-
opacity: 1;
|
|
522
|
-
visibility: visible;
|
|
523
|
-
transform: scale(1);
|
|
524
|
-
}
|
|
525
|
-
|
|
526
|
-
/* Starting state for entry animation */
|
|
527
|
-
@starting-style {
|
|
528
|
-
.popover[popover]:popover-open {
|
|
529
|
-
opacity: 0;
|
|
530
|
-
transform: scale(0.95);
|
|
531
|
-
}
|
|
532
|
-
}
|
|
533
|
-
|
|
534
|
-
/* Native popover backdrop */
|
|
535
|
-
.popover[popover]::backdrop {
|
|
536
|
-
background-color: transparent;
|
|
537
|
-
transition: background-color 150ms ease-out, overlay 150ms ease-out allow-discrete, display 150ms ease-out allow-discrete;
|
|
538
|
-
}
|
|
539
|
-
|
|
540
|
-
.popover[popover]:popover-open::backdrop {
|
|
541
|
-
background-color: color-mix(in srgb, var(--color-scrim) 10%, transparent);
|
|
542
|
-
}
|
|
543
|
-
|
|
544
|
-
@starting-style {
|
|
545
|
-
.popover[popover]:popover-open::backdrop {
|
|
546
|
-
background-color: transparent;
|
|
547
|
-
}
|
|
548
|
-
}
|
|
549
|
-
|
|
550
|
-
/* Native popover with modal backdrop */
|
|
551
|
-
.popover-modal[popover]::backdrop {
|
|
552
|
-
background-color: transparent;
|
|
553
|
-
transition: background-color 150ms ease-out, overlay 150ms ease-out allow-discrete, display 150ms ease-out allow-discrete;
|
|
554
|
-
}
|
|
555
|
-
|
|
556
|
-
.popover-modal[popover]:popover-open::backdrop {
|
|
557
|
-
background-color: color-mix(in srgb, var(--color-scrim) 30%, transparent);
|
|
558
|
-
}
|
|
559
|
-
|
|
560
|
-
@starting-style {
|
|
561
|
-
.popover-modal[popover]:popover-open::backdrop {
|
|
562
|
-
background-color: transparent;
|
|
563
|
-
}
|
|
564
|
-
}
|
|
565
|
-
|
|
566
|
-
/* Native popover color variants */
|
|
567
|
-
.popover-primary[popover] {
|
|
568
|
-
background-color: color-mix(in oklch, var(--color-primary) var(--popover-color-intensity), var(--color-surface));
|
|
569
|
-
border-color: var(--color-primary);
|
|
570
|
-
}
|
|
571
|
-
|
|
572
|
-
.popover-primary[popover] .popover-body {
|
|
573
|
-
color: var(--color-on-surface);
|
|
574
|
-
}
|
|
575
|
-
|
|
576
|
-
.popover-primary[popover] .popover-title {
|
|
577
|
-
color: var(--color-on-surface);
|
|
578
|
-
}
|
|
579
|
-
|
|
580
|
-
.popover-secondary[popover] {
|
|
581
|
-
background-color: color-mix(in oklch, var(--color-secondary) var(--popover-color-intensity), var(--color-surface));
|
|
582
|
-
border-color: var(--color-secondary);
|
|
583
|
-
}
|
|
584
|
-
|
|
585
|
-
.popover-secondary[popover] .popover-body {
|
|
586
|
-
color: var(--color-on-surface);
|
|
587
|
-
}
|
|
588
|
-
|
|
589
|
-
.popover-secondary[popover] .popover-title {
|
|
590
|
-
color: var(--color-on-surface);
|
|
591
|
-
}
|
|
592
|
-
|
|
593
|
-
.popover-tertiary[popover] {
|
|
594
|
-
background-color: color-mix(in oklch, var(--color-tertiary) var(--popover-color-intensity), var(--color-surface));
|
|
595
|
-
border-color: var(--color-tertiary);
|
|
596
|
-
}
|
|
597
|
-
|
|
598
|
-
.popover-tertiary[popover] .popover-body {
|
|
599
|
-
color: var(--color-on-surface);
|
|
600
|
-
}
|
|
601
|
-
|
|
602
|
-
.popover-tertiary[popover] .popover-title {
|
|
603
|
-
color: var(--color-on-surface);
|
|
604
|
-
}
|
|
605
|
-
|
|
606
|
-
.popover-dark[popover] {
|
|
607
|
-
background-color: var(--color-on-surface);
|
|
608
|
-
border-color: transparent;
|
|
609
|
-
}
|
|
610
|
-
|
|
611
|
-
.popover-dark[popover] .popover-body {
|
|
612
|
-
color: var(--color-surface);
|
|
613
|
-
opacity: 0.9;
|
|
614
|
-
}
|
|
615
|
-
|
|
616
|
-
.popover-dark[popover] .popover-title {
|
|
617
|
-
color: var(--color-surface);
|
|
618
|
-
}
|
|
619
|
-
|
|
620
|
-
.popover-surface-highest[popover] {
|
|
621
|
-
background-color: var(--color-surface-container-highest);
|
|
622
|
-
border-color: var(--color-outline-variant);
|
|
623
|
-
}
|
|
624
|
-
|
|
625
|
-
/* Native popover size variants */
|
|
626
|
-
.popover-sm[popover] {
|
|
627
|
-
min-width: 8rem;
|
|
628
|
-
max-width: 14rem;
|
|
629
|
-
padding: 0.75rem;
|
|
630
|
-
}
|
|
631
|
-
|
|
632
|
-
.popover-lg[popover] {
|
|
633
|
-
min-width: 16rem;
|
|
634
|
-
max-width: 28rem;
|
|
635
|
-
padding: 1.25rem;
|
|
636
|
-
}
|
|
637
|
-
|
|
638
|
-
.popover-full[popover] {
|
|
639
|
-
min-width: 0;
|
|
640
|
-
max-width: none;
|
|
641
|
-
width: max-content;
|
|
642
|
-
}
|
|
643
|
-
|
|
644
|
-
/* ========================================
|
|
645
|
-
* CSS Anchor Positioning
|
|
646
|
-
* Enables popovers to track their trigger element on scroll
|
|
647
|
-
* Usage: Add anchor-name CSS property to trigger, position-anchor to popover
|
|
648
|
-
* ======================================== */
|
|
649
|
-
|
|
650
|
-
/* Popover trigger anchor - use inline style or custom class to set anchor-name */
|
|
651
|
-
[popovertarget] {
|
|
652
|
-
/* Each trigger needs unique anchor-name, set via inline style:
|
|
653
|
-
style="anchor-name: --my-popover" */
|
|
654
|
-
}
|
|
655
|
-
|
|
656
|
-
/* Anchored popover positioning
|
|
657
|
-
* Uses anchor() functions instead of position-area to avoid
|
|
658
|
-
* a Chrome rendering bug at HiDPI (DPR>=2) where position-area
|
|
659
|
-
* computes correct CSS-pixel offsets but renders at physical-pixel
|
|
660
|
-
* coordinates, doubling the distance from the anchor. */
|
|
661
|
-
.popover[popover][style*="position-anchor"] {
|
|
662
|
-
inset: unset;
|
|
663
|
-
top: anchor(bottom);
|
|
664
|
-
justify-self: anchor-center;
|
|
665
|
-
margin-top: 0.5rem;
|
|
666
|
-
}
|
|
667
|
-
|
|
668
|
-
/* Position variants for anchored popovers */
|
|
669
|
-
.popover-top[popover][style*="position-anchor"] {
|
|
670
|
-
top: unset;
|
|
671
|
-
bottom: anchor(top);
|
|
672
|
-
margin-top: 0;
|
|
673
|
-
margin-bottom: 0.5rem;
|
|
674
|
-
}
|
|
675
|
-
|
|
676
|
-
.popover-bottom[popover][style*="position-anchor"] {
|
|
677
|
-
top: anchor(bottom);
|
|
678
|
-
margin-top: 0.5rem;
|
|
679
|
-
margin-bottom: 0;
|
|
680
|
-
}
|
|
681
|
-
|
|
682
|
-
.popover-left[popover][style*="position-anchor"] {
|
|
683
|
-
top: anchor(center);
|
|
684
|
-
right: anchor(left);
|
|
685
|
-
justify-self: unset;
|
|
686
|
-
translate: 0 -50%;
|
|
687
|
-
margin-top: 0;
|
|
688
|
-
margin-right: 0.5rem;
|
|
689
|
-
}
|
|
690
|
-
|
|
691
|
-
.popover-right[popover][style*="position-anchor"] {
|
|
692
|
-
top: anchor(center);
|
|
693
|
-
left: anchor(right);
|
|
694
|
-
justify-self: unset;
|
|
695
|
-
translate: 0 -50%;
|
|
696
|
-
margin-top: 0;
|
|
697
|
-
margin-left: 0.5rem;
|
|
698
|
-
}
|
|
699
|
-
|
|
700
|
-
/* Anchored popover alignment variants */
|
|
701
|
-
.popover-start[popover][style*="position-anchor"] {
|
|
702
|
-
justify-self: start;
|
|
703
|
-
}
|
|
704
|
-
|
|
705
|
-
.popover-end[popover][style*="position-anchor"] {
|
|
706
|
-
justify-self: end;
|
|
707
|
-
}
|
|
708
|
-
|
|
709
|
-
.popover-top.popover-start[popover][style*="position-anchor"] {
|
|
710
|
-
justify-self: start;
|
|
711
|
-
}
|
|
712
|
-
|
|
713
|
-
.popover-top.popover-end[popover][style*="position-anchor"] {
|
|
714
|
-
justify-self: end;
|
|
715
|
-
}
|
|
716
|
-
|
|
717
|
-
/* Reduce Motion */
|
|
718
440
|
@media (prefers-reduced-motion: reduce) {
|
|
719
|
-
.popover-content,
|
|
720
441
|
.popover-close,
|
|
721
442
|
.popover-menu-item,
|
|
722
443
|
.popover[popover],
|