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