mnfst 0.5.192 → 0.5.194
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 +21 -3
- package/lib/manifest.accordion.css +0 -3
- package/lib/manifest.appwrite.auth.js +22 -55
- package/lib/manifest.appwrite.data.js +8 -31
- package/lib/manifest.button.css +7 -5
- package/lib/manifest.chart.css +2 -2
- package/lib/manifest.checkbox.css +2 -3
- package/lib/manifest.code.css +38 -39
- package/lib/manifest.code.min.css +1 -1
- package/lib/manifest.colorpicker.css +25 -0
- package/lib/manifest.combobox.css +1 -1
- package/lib/manifest.css +317 -424
- package/lib/manifest.d.ts +3 -3
- package/lib/manifest.data.js +79 -219
- package/lib/manifest.datepicker.css +32 -5
- package/lib/manifest.dialog.css +9 -4
- package/lib/manifest.dropdown.css +57 -40
- package/lib/manifest.form.css +3 -3
- package/lib/manifest.input.css +1 -3
- package/lib/manifest.integrity.json +5 -5
- package/lib/manifest.js +8 -26
- package/lib/manifest.min.css +1 -1
- package/lib/manifest.radio.css +2 -0
- package/lib/manifest.range.css +3 -3
- package/lib/manifest.resize.css +131 -133
- package/lib/manifest.sidebar.css +7 -2
- package/lib/manifest.slides.css +10 -11
- package/lib/manifest.switch.css +1 -1
- package/lib/manifest.theme.css +4 -0
- package/lib/manifest.toast.css +1 -1
- package/lib/manifest.tooltip.css +30 -38
- package/lib/manifest.typography.css +0 -2
- package/lib/manifest.utilities.css +0 -1
- package/lib/manifest.utilities.js +2 -7
- package/package.json +6 -4
package/lib/manifest.resize.css
CHANGED
|
@@ -7,16 +7,17 @@
|
|
|
7
7
|
:where([x-resize]) {
|
|
8
8
|
position: relative;
|
|
9
9
|
|
|
10
|
-
/* Resize handle area */
|
|
10
|
+
/* Resize handle area (geometry: styles/snippets/manifest.handles.css) */
|
|
11
11
|
.resize-handle {
|
|
12
12
|
position: absolute;
|
|
13
13
|
display: block;
|
|
14
|
-
width: var(--
|
|
15
|
-
height: var(--
|
|
14
|
+
width: var(--h);
|
|
15
|
+
height: var(--h);
|
|
16
16
|
z-index: 100;
|
|
17
17
|
background: transparent;
|
|
18
18
|
border: none;
|
|
19
19
|
outline: none;
|
|
20
|
+
--h: var(--spacing-resize-handle, 1rem);
|
|
20
21
|
|
|
21
22
|
/* Visible handle */
|
|
22
23
|
&::before {
|
|
@@ -38,113 +39,24 @@
|
|
|
38
39
|
}
|
|
39
40
|
}
|
|
40
41
|
|
|
41
|
-
/*
|
|
42
|
-
.resize-handle-top,
|
|
43
|
-
.resize-handle-bottom {
|
|
44
|
-
width: 100%;
|
|
45
|
-
left: 0;
|
|
46
|
-
cursor: ns-resize;
|
|
47
|
-
|
|
48
|
-
&::before {
|
|
49
|
-
width: 100%;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.resize-handle-left,
|
|
54
|
-
.resize-handle-right,
|
|
55
|
-
.resize-handle-start,
|
|
56
|
-
.resize-handle-end {
|
|
57
|
-
height: 100%;
|
|
58
|
-
top: 0;
|
|
59
|
-
cursor: ew-resize;
|
|
60
|
-
|
|
61
|
-
&::before {
|
|
62
|
-
height: 100%;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.resize-handle-top {
|
|
67
|
-
top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.resize-handle-bottom {
|
|
71
|
-
top: auto;
|
|
72
|
-
bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.resize-handle-left,
|
|
76
|
-
.resize-handle-start {
|
|
77
|
-
left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.resize-handle-right,
|
|
81
|
-
.resize-handle-end {
|
|
82
|
-
right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
/* Corner handles */
|
|
86
|
-
.resize-handle-top-left {
|
|
87
|
-
width: var(--spacing-resize-handle, 1rem);
|
|
88
|
-
height: var(--spacing-resize-handle, 1rem);
|
|
89
|
-
top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
90
|
-
left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
91
|
-
cursor: nw-resize;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.resize-handle-top-right {
|
|
95
|
-
width: var(--spacing-resize-handle, 1rem);
|
|
96
|
-
height: var(--spacing-resize-handle, 1rem);
|
|
97
|
-
top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
98
|
-
right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
99
|
-
cursor: ne-resize;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.resize-handle-bottom-left {
|
|
103
|
-
width: var(--spacing-resize-handle, 1rem);
|
|
104
|
-
height: var(--spacing-resize-handle, 1rem);
|
|
105
|
-
bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
106
|
-
left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
107
|
-
cursor: sw-resize;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.resize-handle-bottom-right {
|
|
111
|
-
width: var(--spacing-resize-handle, 1rem);
|
|
112
|
-
height: var(--spacing-resize-handle, 1rem);
|
|
113
|
-
bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
114
|
-
right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
115
|
-
cursor: se-resize;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
/* Logical direction handles */
|
|
42
|
+
/* Corner cursors (geometry is shared; edit handles use nwse/nesw) */
|
|
43
|
+
.resize-handle-top-left,
|
|
119
44
|
.resize-handle-top-start {
|
|
120
|
-
width: var(--spacing-resize-handle, 1rem);
|
|
121
|
-
height: var(--spacing-resize-handle, 1rem);
|
|
122
|
-
top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
123
|
-
left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
124
45
|
cursor: nw-resize;
|
|
125
46
|
}
|
|
126
47
|
|
|
48
|
+
.resize-handle-top-right,
|
|
127
49
|
.resize-handle-top-end {
|
|
128
|
-
width: var(--spacing-resize-handle, 1rem);
|
|
129
|
-
height: var(--spacing-resize-handle, 1rem);
|
|
130
|
-
top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
131
|
-
right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
132
50
|
cursor: ne-resize;
|
|
133
51
|
}
|
|
134
52
|
|
|
53
|
+
.resize-handle-bottom-left,
|
|
135
54
|
.resize-handle-bottom-start {
|
|
136
|
-
width: var(--spacing-resize-handle, 1rem);
|
|
137
|
-
height: var(--spacing-resize-handle, 1rem);
|
|
138
|
-
bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
139
|
-
left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
140
55
|
cursor: sw-resize;
|
|
141
56
|
}
|
|
142
57
|
|
|
58
|
+
.resize-handle-bottom-right,
|
|
143
59
|
.resize-handle-bottom-end {
|
|
144
|
-
width: var(--spacing-resize-handle, 1rem);
|
|
145
|
-
height: var(--spacing-resize-handle, 1rem);
|
|
146
|
-
bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
147
|
-
right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
148
60
|
cursor: se-resize;
|
|
149
61
|
}
|
|
150
62
|
|
|
@@ -170,66 +82,152 @@
|
|
|
170
82
|
display: none !important
|
|
171
83
|
}
|
|
172
84
|
|
|
173
|
-
/* Focus states for accessibility */
|
|
85
|
+
/* Focus states for accessibility — framework ring (manifest.theme.css) */
|
|
174
86
|
.resize-handle:focus {
|
|
175
|
-
outline:
|
|
176
|
-
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
/* High contrast mode support */
|
|
180
|
-
@media (prefers-contrast: high) {
|
|
181
|
-
:where(.resize-handle:hover .resize-handle-inner) {
|
|
182
|
-
background: rgba(0, 0, 0, 0.3)
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
:where(.resize-handle:active .resize-handle-inner) {
|
|
186
|
-
background: rgba(0, 0, 0, 0.5)
|
|
187
|
-
}
|
|
87
|
+
outline: none;
|
|
88
|
+
box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark) 30%, transparent)
|
|
188
89
|
}
|
|
189
90
|
|
|
190
91
|
/* Reduced motion support */
|
|
191
92
|
@media (prefers-reduced-motion: reduce) {
|
|
192
93
|
|
|
193
|
-
:where(.
|
|
194
|
-
.resizable-closing,
|
|
94
|
+
:where(.resizable-closing,
|
|
195
95
|
.resize-handle) {
|
|
196
96
|
transition: none
|
|
197
97
|
}
|
|
198
98
|
}
|
|
199
99
|
}
|
|
200
100
|
|
|
201
|
-
/* RTL
|
|
202
|
-
[dir=rtl] :where([x-resize]) .resize-handle-start {
|
|
203
|
-
left: auto;
|
|
204
|
-
right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
[dir=rtl] :where([x-resize]) .resize-handle-end {
|
|
208
|
-
right: auto;
|
|
209
|
-
left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
210
|
-
}
|
|
211
|
-
|
|
101
|
+
/* RTL cursor flips — placement follows the logical insets in the shared geometry */
|
|
212
102
|
[dir=rtl] :where([x-resize]) .resize-handle-top-start {
|
|
213
|
-
left: auto;
|
|
214
|
-
right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
215
103
|
cursor: ne-resize;
|
|
216
104
|
}
|
|
217
105
|
|
|
218
106
|
[dir=rtl] :where([x-resize]) .resize-handle-top-end {
|
|
219
|
-
right: auto;
|
|
220
|
-
left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
221
107
|
cursor: nw-resize;
|
|
222
108
|
}
|
|
223
109
|
|
|
224
110
|
[dir=rtl] :where([x-resize]) .resize-handle-bottom-start {
|
|
225
|
-
left: auto;
|
|
226
|
-
right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
227
111
|
cursor: se-resize;
|
|
228
112
|
}
|
|
229
113
|
|
|
230
114
|
[dir=rtl] :where([x-resize]) .resize-handle-bottom-end {
|
|
231
|
-
right: auto;
|
|
232
|
-
left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
|
|
233
115
|
cursor: sw-resize;
|
|
234
116
|
}
|
|
235
|
-
}
|
|
117
|
+
}
|
|
118
|
+
/* Drag-handle geometry — single source for x-resize and x-edit handles.
|
|
119
|
+
The build appends this to standalone copies and adds it once to the bundle.
|
|
120
|
+
Hosts set --h (handle thickness) and keep their own chrome: hairline colour,
|
|
121
|
+
transition, and corner cursors (resize uses nw/ne/sw/se, edit nwse/nesw). */
|
|
122
|
+
|
|
123
|
+
@layer base, components, utilities;
|
|
124
|
+
|
|
125
|
+
@layer utilities {
|
|
126
|
+
|
|
127
|
+
/* Horizontal edges */
|
|
128
|
+
:where([x-resize], [data-edit-sizable]) :is(.resize-handle-top, .resize-handle-bottom, .edit-handle-top, .edit-handle-bottom) {
|
|
129
|
+
left: 0;
|
|
130
|
+
width: 100%;
|
|
131
|
+
height: var(--h);
|
|
132
|
+
cursor: ns-resize;
|
|
133
|
+
|
|
134
|
+
&::before {
|
|
135
|
+
width: 100%
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* Vertical edges */
|
|
140
|
+
:where([x-resize], [data-edit-sizable]) :is(.resize-handle-left, .resize-handle-right, .resize-handle-start, .resize-handle-end, .edit-handle-left, .edit-handle-right, .edit-handle-start, .edit-handle-end) {
|
|
141
|
+
top: 0;
|
|
142
|
+
width: var(--h);
|
|
143
|
+
height: 100%;
|
|
144
|
+
cursor: ew-resize;
|
|
145
|
+
|
|
146
|
+
&::before {
|
|
147
|
+
height: 100%
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
:where([x-resize], [data-edit-sizable]) :is(.resize-handle-top, .edit-handle-top) {
|
|
152
|
+
top: calc(var(--h) * -0.5)
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
:where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom, .edit-handle-bottom) {
|
|
156
|
+
bottom: calc(var(--h) * -0.5)
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
:where([x-resize], [data-edit-sizable]) :is(.resize-handle-left, .edit-handle-left) {
|
|
160
|
+
left: calc(var(--h) * -0.5)
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
:where([x-resize], [data-edit-sizable]) :is(.resize-handle-right, .edit-handle-right) {
|
|
164
|
+
right: calc(var(--h) * -0.5)
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* Logical edges — inset-inline-* auto-flips for RTL */
|
|
168
|
+
:where([x-resize], [data-edit-sizable]) :is(.resize-handle-start, .edit-handle-start) {
|
|
169
|
+
inset-inline-start: calc(var(--h) * -0.5)
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
:where([x-resize], [data-edit-sizable]) :is(.resize-handle-end, .edit-handle-end) {
|
|
173
|
+
inset-inline-end: calc(var(--h) * -0.5)
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
/* Corners — square and inset; cursors stay with each host */
|
|
177
|
+
:where([x-resize], [data-edit-sizable]) :is(.resize-handle-top-left, .edit-handle-top-left) {
|
|
178
|
+
width: var(--h);
|
|
179
|
+
height: var(--h);
|
|
180
|
+
top: calc(var(--h) * -0.5);
|
|
181
|
+
left: calc(var(--h) * -0.5)
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
:where([x-resize], [data-edit-sizable]) :is(.resize-handle-top-right, .edit-handle-top-right) {
|
|
185
|
+
width: var(--h);
|
|
186
|
+
height: var(--h);
|
|
187
|
+
top: calc(var(--h) * -0.5);
|
|
188
|
+
right: calc(var(--h) * -0.5)
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
:where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom-left, .edit-handle-bottom-left) {
|
|
192
|
+
width: var(--h);
|
|
193
|
+
height: var(--h);
|
|
194
|
+
bottom: calc(var(--h) * -0.5);
|
|
195
|
+
left: calc(var(--h) * -0.5)
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
:where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom-right, .edit-handle-bottom-right) {
|
|
199
|
+
width: var(--h);
|
|
200
|
+
height: var(--h);
|
|
201
|
+
bottom: calc(var(--h) * -0.5);
|
|
202
|
+
right: calc(var(--h) * -0.5)
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
/* Logical corners — inset-inline-* auto-flips for RTL */
|
|
206
|
+
:where([x-resize], [data-edit-sizable]) :is(.resize-handle-top-start, .edit-handle-top-start) {
|
|
207
|
+
width: var(--h);
|
|
208
|
+
height: var(--h);
|
|
209
|
+
top: calc(var(--h) * -0.5);
|
|
210
|
+
inset-inline-start: calc(var(--h) * -0.5)
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
:where([x-resize], [data-edit-sizable]) :is(.resize-handle-top-end, .edit-handle-top-end) {
|
|
214
|
+
width: var(--h);
|
|
215
|
+
height: var(--h);
|
|
216
|
+
top: calc(var(--h) * -0.5);
|
|
217
|
+
inset-inline-end: calc(var(--h) * -0.5)
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
:where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom-start, .edit-handle-bottom-start) {
|
|
221
|
+
width: var(--h);
|
|
222
|
+
height: var(--h);
|
|
223
|
+
bottom: calc(var(--h) * -0.5);
|
|
224
|
+
inset-inline-start: calc(var(--h) * -0.5)
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
:where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom-end, .edit-handle-bottom-end) {
|
|
228
|
+
width: var(--h);
|
|
229
|
+
height: var(--h);
|
|
230
|
+
bottom: calc(var(--h) * -0.5);
|
|
231
|
+
inset-inline-end: calc(var(--h) * -0.5)
|
|
232
|
+
}
|
|
233
|
+
}
|
package/lib/manifest.sidebar.css
CHANGED
|
@@ -2,13 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
@layer base, components, utilities;
|
|
4
4
|
|
|
5
|
+
/* mnfst:popover-base:start — self-contained so this stylesheet works on
|
|
6
|
+
its own; the build strips it from manifest.css. Edit styles/snippets/manifest.popover.css. */
|
|
5
7
|
[popover]:not(.unstyle):not(:popover-open) {
|
|
6
8
|
display: none;
|
|
7
9
|
}
|
|
8
10
|
|
|
9
11
|
@layer base {
|
|
10
12
|
|
|
11
|
-
@keyframes popover-in {
|
|
13
|
+
@keyframes mnfst-popover-in {
|
|
12
14
|
from {
|
|
13
15
|
transform: scale(.9)
|
|
14
16
|
}
|
|
@@ -20,9 +22,12 @@
|
|
|
20
22
|
|
|
21
23
|
:where([popover]):not(.unstyle):popover-open {
|
|
22
24
|
display: flex;
|
|
23
|
-
animation: popover-in .15s ease-in both
|
|
25
|
+
animation: mnfst-popover-in .15s ease-in both
|
|
24
26
|
}
|
|
25
27
|
}
|
|
28
|
+
/* mnfst:popover-base:end */
|
|
29
|
+
|
|
30
|
+
|
|
26
31
|
|
|
27
32
|
@layer components {
|
|
28
33
|
|
package/lib/manifest.slides.css
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
@layer components {
|
|
6
6
|
|
|
7
|
-
[x-carousel] {
|
|
7
|
+
:where([x-carousel]) {
|
|
8
8
|
position: relative;
|
|
9
9
|
display: flex;
|
|
10
10
|
flex-direction: column;
|
|
@@ -12,16 +12,16 @@
|
|
|
12
12
|
overflow: hidden;
|
|
13
13
|
|
|
14
14
|
/* Slides container */
|
|
15
|
-
.carousel-slides {
|
|
15
|
+
:where(.carousel-slides) {
|
|
16
16
|
display: flex;
|
|
17
17
|
transition: transform 300ms ease-in-out;
|
|
18
18
|
width: 100%;
|
|
19
19
|
aspect-ratio: 16 / 9
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
/* Previous & next buttons
|
|
23
|
-
|
|
24
|
-
& button[\@click="next()"] {
|
|
22
|
+
/* Previous & next buttons. Arrow markup is author-written; the
|
|
23
|
+
@click="prev()" selectors are deprecated aliases for the hooks. */
|
|
24
|
+
& :where([data-carousel-prev], [data-carousel-next], button[\@click="prev()"], button[\@click="next()"]) {
|
|
25
25
|
position: absolute;
|
|
26
26
|
top: 50%;
|
|
27
27
|
transform: translateY(-50%);
|
|
@@ -32,17 +32,17 @@
|
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
& button[\@click="prev()"] {
|
|
35
|
+
& :where([data-carousel-prev], button[\@click="prev()"]) {
|
|
36
36
|
left: calc(var(--spacing, 0.25rem) * 4)
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
& button[\@click="next()"] {
|
|
39
|
+
& :where([data-carousel-next], button[\@click="next()"]) {
|
|
40
40
|
left: auto;
|
|
41
41
|
right: calc(var(--spacing, 0.25rem) * 4)
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
/* Dots container */
|
|
45
|
-
.carousel-dots {
|
|
44
|
+
/* Dots container (author markup, driven by the plugin's `dots` getter) */
|
|
45
|
+
:where(.carousel-dots) {
|
|
46
46
|
position: absolute;
|
|
47
47
|
bottom: calc(var(--spacing, 0.25rem) * 4);
|
|
48
48
|
left: 50%;
|
|
@@ -52,7 +52,6 @@
|
|
|
52
52
|
max-width: 100%;
|
|
53
53
|
padding: 0 calc(var(--spacing, 0.25rem) * 4);
|
|
54
54
|
overflow-x: auto;
|
|
55
|
-
-webkit-overflow-scrolling: touch;
|
|
56
55
|
scrollbar-width: none;
|
|
57
56
|
|
|
58
57
|
&::-webkit-scrollbar {
|
|
@@ -60,7 +59,7 @@
|
|
|
60
59
|
}
|
|
61
60
|
|
|
62
61
|
/* Dot button */
|
|
63
|
-
& span {
|
|
62
|
+
& :where(span) {
|
|
64
63
|
flex-shrink: 0;
|
|
65
64
|
width: 0.625rem;
|
|
66
65
|
height: 0.625rem;
|
package/lib/manifest.switch.css
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
height: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
|
|
25
25
|
border-radius: 50%;
|
|
26
26
|
background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 60%, var(--color-field-inverse, oklch(43.9% 0 0)));
|
|
27
|
-
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
27
|
+
box-shadow: var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));
|
|
28
28
|
transition: var(--transition, all .05s ease-in-out)
|
|
29
29
|
}
|
|
30
30
|
|
package/lib/manifest.theme.css
CHANGED
|
@@ -54,6 +54,9 @@
|
|
|
54
54
|
|
|
55
55
|
/* Effects */
|
|
56
56
|
--transition: all .05s ease-in-out;
|
|
57
|
+
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
58
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
59
|
+
--shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
57
60
|
--tooltip-hover-delay: .5s;
|
|
58
61
|
--view-transition-duration: 200ms;
|
|
59
62
|
--view-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -61,6 +64,7 @@
|
|
|
61
64
|
/* Icons */
|
|
62
65
|
--icon-accordion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E");
|
|
63
66
|
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11l2-2l5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E");
|
|
67
|
+
--icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
|
64
68
|
--icon-dismiss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
|
|
65
69
|
--icon-previous: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
|
|
66
70
|
--icon-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
|
package/lib/manifest.toast.css
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
background-color: var(--color-popover-surface, oklch(98.5% 0 0));
|
|
27
27
|
border: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
|
|
28
28
|
border-radius: calc(var(--radius, 0.5rem) * 2);
|
|
29
|
-
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
29
|
+
box-shadow: var(--shadow-lg, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
|
|
30
30
|
overflow: hidden;
|
|
31
31
|
opacity: 0;
|
|
32
32
|
transform: translateY(1rem);
|
package/lib/manifest.tooltip.css
CHANGED
|
@@ -2,27 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
@layer base, components, utilities;
|
|
4
4
|
|
|
5
|
-
[popover]:not(.unstyle):not(:popover-open) {
|
|
6
|
-
display: none;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
@layer base {
|
|
10
5
|
|
|
11
|
-
@keyframes popover-in {
|
|
12
|
-
from {
|
|
13
|
-
transform: scale(.9)
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
to {
|
|
17
|
-
transform: none
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
:where([popover]):not(.unstyle):popover-open {
|
|
22
|
-
display: flex;
|
|
23
|
-
animation: popover-in .15s ease-in both
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
6
|
|
|
27
7
|
@layer utilities {
|
|
28
8
|
|
|
@@ -36,7 +16,7 @@
|
|
|
36
16
|
background-color: var(--color-content-stark, oklch(43.9% 0 0));
|
|
37
17
|
border: 0 none;
|
|
38
18
|
border-radius: var(--radius, 0.5rem);
|
|
39
|
-
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
19
|
+
box-shadow: var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));
|
|
40
20
|
|
|
41
21
|
/* Leading icon */
|
|
42
22
|
& [x-icon]:first-child {
|
|
@@ -82,99 +62,111 @@
|
|
|
82
62
|
}
|
|
83
63
|
}
|
|
84
64
|
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Directional alignment lives in styles/snippets/manifest.alignment.css */
|
|
68
|
+
/* Anchored popover alignment — single source shared by dropdowns and tooltips.
|
|
69
|
+
The build appends this to standalone copies and adds it once to the bundle.
|
|
70
|
+
Zero specificity throughout, so the coarse-pointer sheet and author rules
|
|
71
|
+
still win. Dropdown-only variants (.center) stay in manifest.dropdown.css. */
|
|
72
|
+
|
|
73
|
+
@layer base, components, utilities;
|
|
74
|
+
|
|
75
|
+
@layer utilities {
|
|
76
|
+
|
|
85
77
|
/* Top alignment */
|
|
86
|
-
:where(.tooltip.top) {
|
|
78
|
+
:where(:is(menu[popover], .dropdown-menu, .tooltip).top) {
|
|
87
79
|
position-area: top;
|
|
88
80
|
margin: var(--spacing-popover-offset, 0.5rem) 0
|
|
89
81
|
}
|
|
90
82
|
|
|
91
83
|
/* Bottom alignment */
|
|
92
|
-
:where(.tooltip.bottom) {
|
|
84
|
+
:where(:is(menu[popover], .dropdown-menu, .tooltip).bottom) {
|
|
93
85
|
position-area: bottom;
|
|
94
86
|
margin: var(--spacing-popover-offset, 0.5rem) 0
|
|
95
87
|
}
|
|
96
88
|
|
|
97
89
|
/* Start alignment */
|
|
98
|
-
:where(.tooltip.start) {
|
|
90
|
+
:where(:is(menu[popover], .dropdown-menu, .tooltip).start) {
|
|
99
91
|
position-area: center start;
|
|
100
92
|
margin: 0 var(--spacing-popover-offset, 0.5rem)
|
|
101
93
|
}
|
|
102
94
|
|
|
103
95
|
/* End alignment */
|
|
104
|
-
:where(.tooltip.end) {
|
|
96
|
+
:where(:is(menu[popover], .dropdown-menu, .tooltip).end) {
|
|
105
97
|
position-area: center end;
|
|
106
98
|
margin: 0 var(--spacing-popover-offset, 0.5rem)
|
|
107
99
|
}
|
|
108
100
|
|
|
109
101
|
/* Top start alignment */
|
|
110
|
-
:where(.tooltip.top-start) {
|
|
102
|
+
:where(:is(menu[popover], .dropdown-menu, .tooltip).top-start) {
|
|
111
103
|
position-area: start span-end;
|
|
112
104
|
margin: var(--spacing-popover-offset, 0.5rem) 0
|
|
113
105
|
}
|
|
114
106
|
|
|
115
107
|
/* Top end alignment */
|
|
116
|
-
:where(.tooltip.top-end) {
|
|
108
|
+
:where(:is(menu[popover], .dropdown-menu, .tooltip).top-end) {
|
|
117
109
|
position-area: start span-start;
|
|
118
110
|
margin: var(--spacing-popover-offset, 0.5rem) 0
|
|
119
111
|
}
|
|
120
112
|
|
|
121
113
|
/* Bottom start alignment */
|
|
122
|
-
:where(.tooltip.bottom-start) {
|
|
114
|
+
:where(:is(menu[popover], .dropdown-menu, .tooltip).bottom-start) {
|
|
123
115
|
position-area: end span-end;
|
|
124
116
|
margin: var(--spacing-popover-offset, 0.5rem) 0
|
|
125
117
|
}
|
|
126
118
|
|
|
127
119
|
/* Bottom end alignment */
|
|
128
|
-
:where(.tooltip.bottom-end) {
|
|
120
|
+
:where(:is(menu[popover], .dropdown-menu, .tooltip).bottom-end) {
|
|
129
121
|
position-area: end span-start;
|
|
130
122
|
margin: var(--spacing-popover-offset, 0.5rem) 0
|
|
131
123
|
}
|
|
132
124
|
|
|
133
125
|
/* Start top alignment */
|
|
134
|
-
:where(.tooltip.start-top) {
|
|
126
|
+
:where(:is(menu[popover], .dropdown-menu, .tooltip).start-top) {
|
|
135
127
|
position-area: span-end start;
|
|
136
128
|
margin: 0 var(--spacing-popover-offset, 0.5rem)
|
|
137
129
|
}
|
|
138
130
|
|
|
139
131
|
/* Start bottom alignment */
|
|
140
|
-
:where(.tooltip.start-bottom) {
|
|
132
|
+
:where(:is(menu[popover], .dropdown-menu, .tooltip).start-bottom) {
|
|
141
133
|
position-area: span-start start;
|
|
142
134
|
margin: 0 var(--spacing-popover-offset, 0.5rem)
|
|
143
135
|
}
|
|
144
136
|
|
|
145
137
|
/* End top alignment */
|
|
146
|
-
:where(.tooltip.end-top) {
|
|
138
|
+
:where(:is(menu[popover], .dropdown-menu, .tooltip).end-top) {
|
|
147
139
|
position-area: span-end end;
|
|
148
140
|
margin: 0 var(--spacing-popover-offset, 0.5rem)
|
|
149
141
|
}
|
|
150
142
|
|
|
151
143
|
/* End bottom alignment */
|
|
152
|
-
:where(.tooltip.end-bottom) {
|
|
144
|
+
:where(:is(menu[popover], .dropdown-menu, .tooltip).end-bottom) {
|
|
153
145
|
position-area: span-start end;
|
|
154
146
|
margin: 0 var(--spacing-popover-offset, 0.5rem)
|
|
155
147
|
}
|
|
156
148
|
|
|
157
149
|
/* Top start corner alignment */
|
|
158
|
-
:where(.tooltip.top-start-corner, .
|
|
150
|
+
:where(:is(menu[popover], .dropdown-menu, .tooltip):is(.top-start-corner, .start-top-corner)) {
|
|
159
151
|
position-area: start start;
|
|
160
152
|
margin: var(--spacing-popover-offset, 0.5rem)
|
|
161
153
|
}
|
|
162
154
|
|
|
163
155
|
/* Top end corner alignment */
|
|
164
|
-
:where(.tooltip.top-end-corner, .
|
|
156
|
+
:where(:is(menu[popover], .dropdown-menu, .tooltip):is(.top-end-corner, .end-top-corner)) {
|
|
165
157
|
position-area: start end;
|
|
166
158
|
margin: var(--spacing-popover-offset, 0.5rem)
|
|
167
159
|
}
|
|
168
160
|
|
|
169
161
|
/* Bottom start corner alignment */
|
|
170
|
-
:where(.tooltip.bottom-start-corner, .
|
|
162
|
+
:where(:is(menu[popover], .dropdown-menu, .tooltip):is(.bottom-start-corner, .start-bottom-corner)) {
|
|
171
163
|
position-area: end start;
|
|
172
164
|
margin: var(--spacing-popover-offset, 0.5rem)
|
|
173
165
|
}
|
|
174
166
|
|
|
175
167
|
/* Bottom end corner alignment */
|
|
176
|
-
:where(.tooltip.bottom-end-corner, .
|
|
168
|
+
:where(:is(menu[popover], .dropdown-menu, .tooltip):is(.bottom-end-corner, .end-bottom-corner)) {
|
|
177
169
|
position-area: end end;
|
|
178
170
|
margin: var(--spacing-popover-offset, 0.5rem)
|
|
179
171
|
}
|
|
180
|
-
}
|
|
172
|
+
}
|
|
@@ -257,7 +257,6 @@
|
|
|
257
257
|
/* Labels */
|
|
258
258
|
:where(label):not(.unstyle),
|
|
259
259
|
.label {
|
|
260
|
-
width: -moz-fit-content;
|
|
261
260
|
width: fit-content;
|
|
262
261
|
user-select: none
|
|
263
262
|
}
|
|
@@ -385,7 +384,6 @@
|
|
|
385
384
|
tab-size: 4;
|
|
386
385
|
white-space: pre;
|
|
387
386
|
white-space-collapse: preserve;
|
|
388
|
-
overflow: hidden;
|
|
389
387
|
|
|
390
388
|
&>code {
|
|
391
389
|
flex-grow: 1;
|
|
@@ -2158,13 +2158,8 @@ TailwindCompiler.prototype.extractCustomUtilities = function (cssText) {
|
|
|
2158
2158
|
// Tolerate parsing errors; this is best-effort
|
|
2159
2159
|
}
|
|
2160
2160
|
|
|
2161
|
-
// Dedupe
|
|
2162
|
-
//
|
|
2163
|
-
// resolver) can each capture the same source rule with slightly different
|
|
2164
|
-
// whitespace or selector ordering. Without this, the generator emits
|
|
2165
|
-
// duplicate variant blocks at runtime (e.g. four `.\!brand { … }` rules
|
|
2166
|
-
// where one suffices). Normalize whitespace before comparing so trivial
|
|
2167
|
-
// formatting differences collapse.
|
|
2161
|
+
// Dedupe per class: the four parser passes can capture the same rule with
|
|
2162
|
+
// differing whitespace/selector order; normalize before comparing.
|
|
2168
2163
|
for (const [className, value] of utilities.entries()) {
|
|
2169
2164
|
if (!Array.isArray(value)) continue;
|
|
2170
2165
|
const seen = new Set();
|