twntyx-css 1.0.15 → 1.0.16
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 +4 -2
- package/llm/index.json +2 -2
- package/package.json +1 -1
- package/styles/menu.css +80 -36
package/llm/components/menu.json
CHANGED
|
@@ -147,13 +147,15 @@
|
|
|
147
147
|
"required": [],
|
|
148
148
|
"dataAttributes": [],
|
|
149
149
|
"roles": [],
|
|
150
|
-
"aria": [
|
|
150
|
+
"aria": [
|
|
151
|
+
"aria-label"
|
|
152
|
+
]
|
|
151
153
|
},
|
|
152
154
|
"a11y": {
|
|
153
155
|
"interactive": true,
|
|
154
156
|
"requiredRoles": [],
|
|
155
157
|
"requiredAria": [
|
|
156
|
-
"aria-label
|
|
158
|
+
"aria-label"
|
|
157
159
|
],
|
|
158
160
|
"keyboardSupport": [
|
|
159
161
|
"Tab",
|
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.16",
|
|
4
4
|
"packageName": "twntyx-css",
|
|
5
5
|
"apiModel": "html-class",
|
|
6
|
-
"sourceFingerprint": "
|
|
6
|
+
"sourceFingerprint": "cf9f34775c1b86e3b2eb4ba59f55ea4075ab5faad4f27535cf971319d65014fc",
|
|
7
7
|
"files": {
|
|
8
8
|
"schema": "schema.json",
|
|
9
9
|
"tokens": "tokens.json",
|
package/package.json
CHANGED
package/styles/menu.css
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
li {
|
|
21
|
-
@apply flex relative flex-col flex-wrap items-stretch shrink-0;
|
|
21
|
+
@apply flex relative flex-col flex-wrap items-stretch shrink-0 min-w-0 max-w-full;
|
|
22
22
|
|
|
23
23
|
/* Default Link/Button Style */
|
|
24
24
|
> *:not(ul, details, .menu-title, .menu-row) {
|
|
@@ -33,10 +33,10 @@
|
|
|
33
33
|
|
|
34
34
|
/* Split row: main link + contextual action */
|
|
35
35
|
> .menu-row {
|
|
36
|
-
@apply
|
|
36
|
+
@apply grid grid-cols-[minmax(0,1fr)_auto] items-center py-2 pl-0 pr-2 w-full max-w-full min-w-0 text-sm rounded cursor-default include-hover-primary include-interactive text-text-tertiary hover:text-text-default;
|
|
37
37
|
|
|
38
38
|
> :where(a, button:not(.menu-row-action)) {
|
|
39
|
-
@apply flex
|
|
39
|
+
@apply flex gap-2 items-center min-w-0 py-0 pl-4 pr-1 rounded-none cursor-pointer text-inherit hover:text-inherit outline-transparent focus-visible:outline-transparent active:outline-transparent;
|
|
40
40
|
|
|
41
41
|
&::before {
|
|
42
42
|
@apply hidden;
|
|
@@ -47,24 +47,24 @@
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
svg {
|
|
50
|
-
@apply fill-current size-5
|
|
50
|
+
@apply shrink-0 fill-current size-5!;
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
> .menu-row-action {
|
|
55
|
-
@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;
|
|
55
|
+
@apply relative z-10 flex shrink-0 flex-none justify-center items-center -my-0.5 mr-0 size-6 rounded cursor-pointer include-interactive text-text-tertiary hover:text-text-default;
|
|
56
56
|
|
|
57
57
|
&::before {
|
|
58
58
|
@apply hidden;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
svg {
|
|
62
|
-
@apply fill-current size-4
|
|
62
|
+
@apply fill-current size-4!;
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
> .menu-row-input {
|
|
67
|
-
@apply relative z-10 flex
|
|
67
|
+
@apply relative z-10 flex min-w-0 py-0 pl-4 pr-1 select-text -my-1;
|
|
68
68
|
|
|
69
69
|
.input-control {
|
|
70
70
|
@apply flex-1 w-full min-h-0 p-0 border-transparent shadow-none bg-transparent input-ghost;
|
|
@@ -97,19 +97,19 @@
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
&.menu-row-action-hover > .menu-row > .menu-row-action {
|
|
100
|
-
@apply
|
|
100
|
+
@apply hidden;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
-
&.menu-row-action-hover > .menu-row
|
|
104
|
-
&.menu-row-action-hover > .menu-row
|
|
105
|
-
@apply
|
|
103
|
+
&.menu-row-action-hover:hover > .menu-row > .menu-row-action,
|
|
104
|
+
&.menu-row-action-hover:focus-within > .menu-row > .menu-row-action {
|
|
105
|
+
@apply flex;
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
span {
|
|
108
|
+
> *:not(.menu-row) span {
|
|
109
109
|
@apply truncate min-w-fit;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
-
>
|
|
112
|
+
> *:not(.menu-row) {
|
|
113
113
|
&:has(svg:only-child) {
|
|
114
114
|
@apply px-2;
|
|
115
115
|
}
|
|
@@ -117,16 +117,24 @@
|
|
|
117
117
|
@apply w-full;
|
|
118
118
|
}
|
|
119
119
|
svg {
|
|
120
|
-
@apply fill-current size-5
|
|
120
|
+
@apply fill-current size-5!;
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
:where(a, button) {
|
|
125
|
-
@apply include-interactive;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
124
|
> .menu-row > :where(a, button:not(.menu-row-action)) {
|
|
129
125
|
@apply outline-transparent focus-visible:outline-transparent active:outline-transparent;
|
|
126
|
+
|
|
127
|
+
> span {
|
|
128
|
+
@apply block min-w-0 flex-1 truncate;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
> span + span {
|
|
132
|
+
@apply shrink-0 flex-none min-w-fit overflow-visible whitespace-normal;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
:where(a, button) {
|
|
137
|
+
@apply include-interactive;
|
|
130
138
|
}
|
|
131
139
|
|
|
132
140
|
&.is-selected {
|
|
@@ -248,22 +256,34 @@
|
|
|
248
256
|
@apply text-xs;
|
|
249
257
|
li {
|
|
250
258
|
> .menu-row {
|
|
251
|
-
@apply gap-1
|
|
259
|
+
@apply gap-1 py-1 pr-1 text-xs;
|
|
260
|
+
|
|
261
|
+
> :where(a, button:not(.menu-row-action)) {
|
|
262
|
+
@apply pl-2 pr-0.5;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
> .menu-row-input {
|
|
266
|
+
@apply pl-2 pr-0.5;
|
|
267
|
+
}
|
|
252
268
|
|
|
253
269
|
> :where(a, button:not(.menu-row-action)) svg {
|
|
254
|
-
@apply size-3.5
|
|
270
|
+
@apply size-3.5!;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
> .menu-row-action {
|
|
274
|
+
@apply -my-0.5 mr-0 size-4;
|
|
255
275
|
}
|
|
256
276
|
|
|
257
277
|
> .menu-row-action svg {
|
|
258
|
-
@apply size-3
|
|
278
|
+
@apply size-3!;
|
|
259
279
|
}
|
|
260
280
|
|
|
261
281
|
.menu-row-input .input-text {
|
|
262
282
|
@apply text-xs;
|
|
263
283
|
}
|
|
264
284
|
}
|
|
265
|
-
>
|
|
266
|
-
&:not(ul, details, .menu-title
|
|
285
|
+
> *:not(.menu-row) {
|
|
286
|
+
&:not(ul, details, .menu-title),
|
|
267
287
|
details > summary {
|
|
268
288
|
@apply gap-1 px-2 py-1 text-xs;
|
|
269
289
|
}
|
|
@@ -271,7 +291,7 @@
|
|
|
271
291
|
@apply px-1;
|
|
272
292
|
}
|
|
273
293
|
> svg {
|
|
274
|
-
@apply size-3.5
|
|
294
|
+
@apply size-3.5!;
|
|
275
295
|
}
|
|
276
296
|
}
|
|
277
297
|
}
|
|
@@ -289,22 +309,34 @@
|
|
|
289
309
|
@apply text-xs;
|
|
290
310
|
li {
|
|
291
311
|
> .menu-row {
|
|
292
|
-
@apply gap-1.5
|
|
312
|
+
@apply gap-1.5 py-1.5 pr-1.5 text-xs;
|
|
313
|
+
|
|
314
|
+
> :where(a, button:not(.menu-row-action)) {
|
|
315
|
+
@apply pl-3 pr-1;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
> .menu-row-input {
|
|
319
|
+
@apply pl-3 pr-1;
|
|
320
|
+
}
|
|
293
321
|
|
|
294
322
|
> :where(a, button:not(.menu-row-action)) svg {
|
|
295
|
-
@apply size-[18px]
|
|
323
|
+
@apply size-[18px]!;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
> .menu-row-action {
|
|
327
|
+
@apply -my-0.5 mr-0 size-5;
|
|
296
328
|
}
|
|
297
329
|
|
|
298
330
|
> .menu-row-action svg {
|
|
299
|
-
@apply size-3.5
|
|
331
|
+
@apply size-3.5!;
|
|
300
332
|
}
|
|
301
333
|
|
|
302
334
|
.menu-row-input .input-text {
|
|
303
335
|
@apply text-xs;
|
|
304
336
|
}
|
|
305
337
|
}
|
|
306
|
-
>
|
|
307
|
-
&:not(ul, details, .menu-title
|
|
338
|
+
> *:not(.menu-row) {
|
|
339
|
+
&:not(ul, details, .menu-title),
|
|
308
340
|
details > summary {
|
|
309
341
|
@apply gap-1.5 px-3 py-1.5 text-xs;
|
|
310
342
|
}
|
|
@@ -312,7 +344,7 @@
|
|
|
312
344
|
@apply px-1.5;
|
|
313
345
|
}
|
|
314
346
|
> svg {
|
|
315
|
-
@apply size-[18px]
|
|
347
|
+
@apply size-[18px]!;
|
|
316
348
|
}
|
|
317
349
|
}
|
|
318
350
|
}
|
|
@@ -330,22 +362,34 @@
|
|
|
330
362
|
@apply text-base;
|
|
331
363
|
li {
|
|
332
364
|
> .menu-row {
|
|
333
|
-
@apply gap-3
|
|
365
|
+
@apply gap-3 py-3 pr-3 text-base;
|
|
366
|
+
|
|
367
|
+
> :where(a, button:not(.menu-row-action)) {
|
|
368
|
+
@apply pl-5 pr-1.5;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
> .menu-row-input {
|
|
372
|
+
@apply pl-5 pr-1.5;
|
|
373
|
+
}
|
|
334
374
|
|
|
335
375
|
> :where(a, button:not(.menu-row-action)) svg {
|
|
336
|
-
@apply size-6
|
|
376
|
+
@apply size-6!;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
> .menu-row-action {
|
|
380
|
+
@apply -my-1 mr-0 size-7;
|
|
337
381
|
}
|
|
338
382
|
|
|
339
383
|
> .menu-row-action svg {
|
|
340
|
-
@apply size-4
|
|
384
|
+
@apply size-4!;
|
|
341
385
|
}
|
|
342
386
|
|
|
343
387
|
.menu-row-input .input-text {
|
|
344
388
|
@apply text-base;
|
|
345
389
|
}
|
|
346
390
|
}
|
|
347
|
-
>
|
|
348
|
-
&:not(ul, details, .menu-title
|
|
391
|
+
> *:not(.menu-row) {
|
|
392
|
+
&:not(ul, details, .menu-title),
|
|
349
393
|
details > summary {
|
|
350
394
|
@apply gap-3 px-5 py-3 text-base;
|
|
351
395
|
}
|
|
@@ -353,7 +397,7 @@
|
|
|
353
397
|
@apply px-3;
|
|
354
398
|
}
|
|
355
399
|
> svg {
|
|
356
|
-
@apply size-6
|
|
400
|
+
@apply size-6!;
|
|
357
401
|
}
|
|
358
402
|
}
|
|
359
403
|
}
|