twntyx-css 1.0.11 → 1.0.12
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/llm/components/menu.json +6 -0
- package/llm/index.json +2 -2
- package/package.json +1 -1
- package/styles/menu.css +79 -12
package/llm/components/menu.json
CHANGED
|
@@ -66,6 +66,11 @@
|
|
|
66
66
|
"name": "menu-rounded-full",
|
|
67
67
|
"className": "menu-rounded-full",
|
|
68
68
|
"description": "Applies fully rounded corners to menu items"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"name": "menu-row-action-hover",
|
|
72
|
+
"className": "menu-row-action-hover",
|
|
73
|
+
"description": "Reveals the row action button only on row hover or focus"
|
|
69
74
|
}
|
|
70
75
|
],
|
|
71
76
|
"sizes": [
|
|
@@ -116,6 +121,7 @@
|
|
|
116
121
|
"disabled",
|
|
117
122
|
"menu-rounded-none",
|
|
118
123
|
"menu-rounded-full",
|
|
124
|
+
"menu-row-action-hover",
|
|
119
125
|
"menu-xs",
|
|
120
126
|
"menu-sm",
|
|
121
127
|
"menu-lg",
|
package/llm/index.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"llmSchemaVersion": "1.0.0",
|
|
3
|
-
"designSystemVersion": "1.0.
|
|
3
|
+
"designSystemVersion": "1.0.12",
|
|
4
4
|
"packageName": "twntyx-css",
|
|
5
5
|
"apiModel": "html-class",
|
|
6
|
-
"sourceFingerprint": "
|
|
6
|
+
"sourceFingerprint": "b01e7500be1e207fadfd0231734490a316c01e8aa0452755ec72ddedf3ce711d",
|
|
7
7
|
"files": {
|
|
8
8
|
"schema": "schema.json",
|
|
9
9
|
"tokens": "tokens.json",
|
package/package.json
CHANGED
package/styles/menu.css
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
@apply flex relative flex-col flex-wrap items-stretch shrink-0;
|
|
22
22
|
|
|
23
23
|
/* Default Link/Button Style */
|
|
24
|
-
> *:not(ul, details, .menu-title) {
|
|
24
|
+
> *:not(ul, details, .menu-title, .menu-row) {
|
|
25
25
|
@apply flex gap-2 items-center px-4 py-2 w-full max-w-full text-sm rounded cursor-pointer include-hover-primary include-interactive text-text-tertiary hover:text-text-default disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent;
|
|
26
26
|
|
|
27
27
|
&:active {
|
|
@@ -31,6 +31,44 @@
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
+
/* Split row: main link + contextual action */
|
|
35
|
+
> .menu-row {
|
|
36
|
+
@apply flex gap-1 items-center px-4 py-2 w-full max-w-full text-sm rounded cursor-default include-hover-primary include-interactive text-text-tertiary hover:text-text-default;
|
|
37
|
+
|
|
38
|
+
> :where(a, button:not(.menu-row-action)) {
|
|
39
|
+
@apply flex flex-1 gap-2 items-center min-w-0 p-0 rounded-none cursor-pointer text-inherit hover:text-inherit outline-transparent focus-visible:outline-transparent active:outline-transparent;
|
|
40
|
+
|
|
41
|
+
&::before {
|
|
42
|
+
@apply hidden;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:active > * {
|
|
46
|
+
@apply translate-y-px duration-0;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
> .menu-row-action {
|
|
51
|
+
@apply relative z-10 flex shrink-0 justify-center items-center size-6 rounded cursor-pointer include-interactive text-text-tertiary hover:text-text-default;
|
|
52
|
+
|
|
53
|
+
&::before {
|
|
54
|
+
@apply hidden;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
svg {
|
|
58
|
+
@apply fill-current size-4;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&.menu-row-action-hover > .menu-row > .menu-row-action {
|
|
64
|
+
@apply opacity-0 pointer-events-none transition-opacity duration-75;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&.menu-row-action-hover > .menu-row:hover > .menu-row-action,
|
|
68
|
+
&.menu-row-action-hover > .menu-row:focus-within > .menu-row-action {
|
|
69
|
+
@apply opacity-100 pointer-events-auto;
|
|
70
|
+
}
|
|
71
|
+
|
|
34
72
|
span {
|
|
35
73
|
@apply truncate min-w-fit;
|
|
36
74
|
}
|
|
@@ -51,8 +89,12 @@
|
|
|
51
89
|
@apply include-interactive;
|
|
52
90
|
}
|
|
53
91
|
|
|
92
|
+
> .menu-row > :where(a, button:not(.menu-row-action)) {
|
|
93
|
+
@apply outline-transparent focus-visible:outline-transparent active:outline-transparent;
|
|
94
|
+
}
|
|
95
|
+
|
|
54
96
|
&.is-selected {
|
|
55
|
-
> *:not(ul, details, .menu-title) {
|
|
97
|
+
> *:not(ul, details, .menu-title, .menu-row) {
|
|
56
98
|
@apply include-hover-primary-hover;
|
|
57
99
|
}
|
|
58
100
|
}
|
|
@@ -95,11 +137,23 @@
|
|
|
95
137
|
}
|
|
96
138
|
}
|
|
97
139
|
|
|
140
|
+
&.is-disabled > .menu-row {
|
|
141
|
+
@apply cursor-not-allowed text-text-disabled hover:text-text-disabled;
|
|
142
|
+
|
|
143
|
+
> :where(a, button) {
|
|
144
|
+
@apply pointer-events-none;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
98
148
|
&.is-active > * {
|
|
99
149
|
@apply font-medium include-hover-primary-active text-text-brand-active hover:text-text-brand-active;
|
|
100
150
|
}
|
|
101
151
|
|
|
102
|
-
|
|
152
|
+
&.is-active > .menu-row {
|
|
153
|
+
@apply font-medium include-hover-primary-active text-text-brand-active hover:text-text-brand-active;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
&:has(:focus-visible) > *:not(.menu-row) {
|
|
103
157
|
@apply outline-line-brand;
|
|
104
158
|
}
|
|
105
159
|
}
|
|
@@ -157,8 +211,11 @@
|
|
|
157
211
|
@utility menu-xs {
|
|
158
212
|
@apply text-xs;
|
|
159
213
|
li {
|
|
214
|
+
> .menu-row {
|
|
215
|
+
@apply gap-1 px-2 py-1 text-xs;
|
|
216
|
+
}
|
|
160
217
|
> * {
|
|
161
|
-
&:not(ul, details, .menu-title),
|
|
218
|
+
&:not(ul, details, .menu-title, .menu-row),
|
|
162
219
|
details > summary {
|
|
163
220
|
@apply gap-1 px-2 py-1 text-xs;
|
|
164
221
|
}
|
|
@@ -183,8 +240,11 @@
|
|
|
183
240
|
@utility menu-sm {
|
|
184
241
|
@apply text-xs;
|
|
185
242
|
li {
|
|
243
|
+
> .menu-row {
|
|
244
|
+
@apply gap-1.5 px-3 py-1.5 text-xs;
|
|
245
|
+
}
|
|
186
246
|
> * {
|
|
187
|
-
&:not(ul, details, .menu-title),
|
|
247
|
+
&:not(ul, details, .menu-title, .menu-row),
|
|
188
248
|
details > summary {
|
|
189
249
|
@apply gap-1.5 px-3 py-1.5 text-xs;
|
|
190
250
|
}
|
|
@@ -207,12 +267,15 @@
|
|
|
207
267
|
}
|
|
208
268
|
|
|
209
269
|
@utility menu-lg {
|
|
210
|
-
@apply text-
|
|
270
|
+
@apply text-base;
|
|
211
271
|
li {
|
|
272
|
+
> .menu-row {
|
|
273
|
+
@apply gap-3 px-5 py-3 text-base;
|
|
274
|
+
}
|
|
212
275
|
> * {
|
|
213
|
-
&:not(ul, details, .menu-title),
|
|
276
|
+
&:not(ul, details, .menu-title, .menu-row),
|
|
214
277
|
details > summary {
|
|
215
|
-
@apply gap-3 px-5 py-3 text-
|
|
278
|
+
@apply gap-3 px-5 py-3 text-base;
|
|
216
279
|
}
|
|
217
280
|
&:has(svg:only-child) {
|
|
218
281
|
@apply px-3;
|
|
@@ -235,7 +298,8 @@
|
|
|
235
298
|
/* Roundness modifiers */
|
|
236
299
|
@utility menu-rounded-none {
|
|
237
300
|
li {
|
|
238
|
-
> *:not(ul, details, .menu-title),
|
|
301
|
+
> *:not(ul, details, .menu-title, .menu-row),
|
|
302
|
+
> .menu-row,
|
|
239
303
|
details > summary {
|
|
240
304
|
&,
|
|
241
305
|
&::before {
|
|
@@ -247,7 +311,8 @@
|
|
|
247
311
|
|
|
248
312
|
@utility menu-rounded-sm {
|
|
249
313
|
li {
|
|
250
|
-
> *:not(ul, details, .menu-title),
|
|
314
|
+
> *:not(ul, details, .menu-title, .menu-row),
|
|
315
|
+
> .menu-row,
|
|
251
316
|
details > summary {
|
|
252
317
|
&,
|
|
253
318
|
&::before {
|
|
@@ -259,7 +324,8 @@
|
|
|
259
324
|
|
|
260
325
|
@utility menu-rounded-lg {
|
|
261
326
|
li {
|
|
262
|
-
> *:not(ul, details, .menu-title),
|
|
327
|
+
> *:not(ul, details, .menu-title, .menu-row),
|
|
328
|
+
> .menu-row,
|
|
263
329
|
details > summary {
|
|
264
330
|
&,
|
|
265
331
|
&::before {
|
|
@@ -271,7 +337,8 @@
|
|
|
271
337
|
|
|
272
338
|
@utility menu-rounded-full {
|
|
273
339
|
li {
|
|
274
|
-
> *:not(ul, details, .menu-title),
|
|
340
|
+
> *:not(ul, details, .menu-title, .menu-row),
|
|
341
|
+
> .menu-row,
|
|
275
342
|
details > summary {
|
|
276
343
|
&,
|
|
277
344
|
&::before {
|