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.
@@ -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(--spacing-resize-handle, 1rem);
15
- height: var(--spacing-resize-handle, 1rem);
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
- /* Edge handles */
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: 2px solid rgba(59, 130, 246, 0.5);
176
- outline-offset: 2px
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(.resize-handle-inner,
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 overrides - more specific than :where([x-resize]) */
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
+ }
@@ -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
 
@@ -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
- & button[\@click="prev()"],
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;
@@ -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
 
@@ -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");
@@ -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);
@@ -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, .tooltip.start-top-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, .tooltip.end-top-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, .tooltip.start-bottom-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, .tooltip.end-bottom-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;
@@ -167,7 +167,6 @@
167
167
 
168
168
  /* No spinners */
169
169
  .no-spinner {
170
- -moz-appearance: textfield !important;
171
170
  appearance: textfield !important;
172
171
 
173
172
  &::-webkit-inner-spin-button,
@@ -2158,13 +2158,8 @@ TailwindCompiler.prototype.extractCustomUtilities = function (cssText) {
2158
2158
  // Tolerate parsing errors; this is best-effort
2159
2159
  }
2160
2160
 
2161
- // Dedupe captured entries per class. The four parser passes above (flat
2162
- // regex, :where() extractor, compound-selector fallback, universal nested
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();