twntyx-css 1.0.15 → 1.0.17
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/badge.json +2 -0
- package/llm/components/menu.json +5 -3
- package/llm/index.json +2 -2
- package/package.json +1 -1
- package/styles/menu.css +107 -38
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"assets/styles/badge.css",
|
|
24
24
|
"assets/styles/contest.css",
|
|
25
25
|
"assets/styles/form-text-select.css",
|
|
26
|
+
"assets/styles/menu.css",
|
|
26
27
|
"assets/styles/shared.css"
|
|
27
28
|
],
|
|
28
29
|
"apiModel": "html-class",
|
|
@@ -121,6 +122,7 @@
|
|
|
121
122
|
"line-success",
|
|
122
123
|
"line-warning",
|
|
123
124
|
"text-attention",
|
|
125
|
+
"text-brand-active",
|
|
124
126
|
"text-default",
|
|
125
127
|
"text-disabled",
|
|
126
128
|
"text-error",
|
package/llm/components/menu.json
CHANGED
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
{
|
|
110
110
|
"name": "is-editing",
|
|
111
111
|
"className": "is-editing",
|
|
112
|
-
"description": "
|
|
112
|
+
"description": "Inline rename state: invisible in-flow link, absolute menu-row-input overlay, hidden action"
|
|
113
113
|
}
|
|
114
114
|
],
|
|
115
115
|
"structure": {
|
|
@@ -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.17",
|
|
4
4
|
"packageName": "twntyx-css",
|
|
5
5
|
"apiModel": "html-class",
|
|
6
|
-
"sourceFingerprint": "
|
|
6
|
+
"sourceFingerprint": "f0c14f0a6476267f1e282ad0a6ae789f4c2446a73692165389eaa64730e2d87d",
|
|
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-0 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-2 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 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-2 pl-4 pr-1 select-text;
|
|
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;
|
|
@@ -89,44 +89,65 @@
|
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
&.is-editing > .menu-row {
|
|
92
|
-
@apply include-hover-primary-active text-text-default cursor-text;
|
|
92
|
+
@apply relative include-hover-primary-active text-text-default cursor-text;
|
|
93
93
|
|
|
94
94
|
> :where(a, button:not(.menu-row-action)) {
|
|
95
|
+
@apply opacity-0 pointer-events-none select-none;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
> .menu-row-input {
|
|
99
|
+
@apply absolute top-0 bottom-0 left-0 right-2 z-20;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
> .menu-row-action {
|
|
95
103
|
@apply hidden;
|
|
96
104
|
}
|
|
97
105
|
}
|
|
98
106
|
|
|
107
|
+
&.is-editing.menu-row-action-hover:hover > .menu-row > .menu-row-action,
|
|
108
|
+
&.is-editing.menu-row-action-hover:focus-within > .menu-row > .menu-row-action {
|
|
109
|
+
@apply hidden;
|
|
110
|
+
}
|
|
111
|
+
|
|
99
112
|
&.menu-row-action-hover > .menu-row > .menu-row-action {
|
|
100
|
-
@apply
|
|
113
|
+
@apply hidden;
|
|
101
114
|
}
|
|
102
115
|
|
|
103
|
-
&.menu-row-action-hover > .menu-row
|
|
104
|
-
&.menu-row-action-hover > .menu-row
|
|
105
|
-
@apply
|
|
116
|
+
&.menu-row-action-hover:hover > .menu-row > .menu-row-action,
|
|
117
|
+
&.menu-row-action-hover:focus-within > .menu-row > .menu-row-action {
|
|
118
|
+
@apply flex;
|
|
106
119
|
}
|
|
107
120
|
|
|
108
|
-
span {
|
|
121
|
+
> *:not(.menu-row) span {
|
|
109
122
|
@apply truncate min-w-fit;
|
|
110
123
|
}
|
|
111
124
|
|
|
112
|
-
>
|
|
125
|
+
> *:not(.menu-row) {
|
|
113
126
|
&:has(svg:only-child) {
|
|
114
127
|
@apply px-2;
|
|
115
128
|
}
|
|
116
|
-
> *:not(svg, .avatar, .material-symbols-rounded) {
|
|
129
|
+
> *:not(svg, .avatar, .badge, .material-symbols-rounded) {
|
|
117
130
|
@apply w-full;
|
|
118
131
|
}
|
|
119
132
|
svg {
|
|
120
|
-
@apply fill-current size-5
|
|
133
|
+
@apply fill-current size-5!;
|
|
121
134
|
}
|
|
122
135
|
}
|
|
123
136
|
|
|
124
|
-
:where(a, button) {
|
|
125
|
-
@apply include-interactive;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
137
|
> .menu-row > :where(a, button:not(.menu-row-action)) {
|
|
129
138
|
@apply outline-transparent focus-visible:outline-transparent active:outline-transparent;
|
|
139
|
+
|
|
140
|
+
> span {
|
|
141
|
+
@apply block min-w-0 flex-1 truncate text-left;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
> span + span {
|
|
145
|
+
@apply shrink-0 flex-none min-w-fit overflow-visible whitespace-normal;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
:where(a, button) {
|
|
150
|
+
@apply include-interactive;
|
|
130
151
|
}
|
|
131
152
|
|
|
132
153
|
&.is-selected {
|
|
@@ -247,23 +268,39 @@
|
|
|
247
268
|
@utility menu-xs {
|
|
248
269
|
@apply text-xs;
|
|
249
270
|
li {
|
|
271
|
+
&.is-editing > .menu-row > .menu-row-input {
|
|
272
|
+
@apply right-1;
|
|
273
|
+
}
|
|
274
|
+
|
|
250
275
|
> .menu-row {
|
|
251
|
-
@apply
|
|
276
|
+
@apply py-0 pr-1 text-xs;
|
|
277
|
+
|
|
278
|
+
> :where(a, button:not(.menu-row-action)) {
|
|
279
|
+
@apply py-1 pl-2 pr-0.5;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
> .menu-row-input {
|
|
283
|
+
@apply py-1 pl-2 pr-0.5;
|
|
284
|
+
}
|
|
252
285
|
|
|
253
286
|
> :where(a, button:not(.menu-row-action)) svg {
|
|
254
|
-
@apply size-3.5
|
|
287
|
+
@apply size-3.5!;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
> .menu-row-action {
|
|
291
|
+
@apply mr-0 size-4;
|
|
255
292
|
}
|
|
256
293
|
|
|
257
294
|
> .menu-row-action svg {
|
|
258
|
-
@apply size-3
|
|
295
|
+
@apply size-3!;
|
|
259
296
|
}
|
|
260
297
|
|
|
261
298
|
.menu-row-input .input-text {
|
|
262
299
|
@apply text-xs;
|
|
263
300
|
}
|
|
264
301
|
}
|
|
265
|
-
>
|
|
266
|
-
&:not(ul, details, .menu-title
|
|
302
|
+
> *:not(.menu-row) {
|
|
303
|
+
&:not(ul, details, .menu-title),
|
|
267
304
|
details > summary {
|
|
268
305
|
@apply gap-1 px-2 py-1 text-xs;
|
|
269
306
|
}
|
|
@@ -271,7 +308,7 @@
|
|
|
271
308
|
@apply px-1;
|
|
272
309
|
}
|
|
273
310
|
> svg {
|
|
274
|
-
@apply size-3.5
|
|
311
|
+
@apply size-3.5!;
|
|
275
312
|
}
|
|
276
313
|
}
|
|
277
314
|
}
|
|
@@ -288,23 +325,39 @@
|
|
|
288
325
|
@utility menu-sm {
|
|
289
326
|
@apply text-xs;
|
|
290
327
|
li {
|
|
328
|
+
&.is-editing > .menu-row > .menu-row-input {
|
|
329
|
+
@apply right-1.5;
|
|
330
|
+
}
|
|
331
|
+
|
|
291
332
|
> .menu-row {
|
|
292
|
-
@apply
|
|
333
|
+
@apply py-0 pr-1.5 text-xs;
|
|
334
|
+
|
|
335
|
+
> :where(a, button:not(.menu-row-action)) {
|
|
336
|
+
@apply py-1.5 pl-3 pr-1;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
> .menu-row-input {
|
|
340
|
+
@apply py-1.5 pl-3 pr-1;
|
|
341
|
+
}
|
|
293
342
|
|
|
294
343
|
> :where(a, button:not(.menu-row-action)) svg {
|
|
295
|
-
@apply size-[18px]
|
|
344
|
+
@apply size-[18px]!;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
> .menu-row-action {
|
|
348
|
+
@apply mr-0 size-5;
|
|
296
349
|
}
|
|
297
350
|
|
|
298
351
|
> .menu-row-action svg {
|
|
299
|
-
@apply size-3.5
|
|
352
|
+
@apply size-3.5!;
|
|
300
353
|
}
|
|
301
354
|
|
|
302
355
|
.menu-row-input .input-text {
|
|
303
356
|
@apply text-xs;
|
|
304
357
|
}
|
|
305
358
|
}
|
|
306
|
-
>
|
|
307
|
-
&:not(ul, details, .menu-title
|
|
359
|
+
> *:not(.menu-row) {
|
|
360
|
+
&:not(ul, details, .menu-title),
|
|
308
361
|
details > summary {
|
|
309
362
|
@apply gap-1.5 px-3 py-1.5 text-xs;
|
|
310
363
|
}
|
|
@@ -312,7 +365,7 @@
|
|
|
312
365
|
@apply px-1.5;
|
|
313
366
|
}
|
|
314
367
|
> svg {
|
|
315
|
-
@apply size-[18px]
|
|
368
|
+
@apply size-[18px]!;
|
|
316
369
|
}
|
|
317
370
|
}
|
|
318
371
|
}
|
|
@@ -329,23 +382,39 @@
|
|
|
329
382
|
@utility menu-lg {
|
|
330
383
|
@apply text-base;
|
|
331
384
|
li {
|
|
385
|
+
&.is-editing > .menu-row > .menu-row-input {
|
|
386
|
+
@apply right-3;
|
|
387
|
+
}
|
|
388
|
+
|
|
332
389
|
> .menu-row {
|
|
333
|
-
@apply
|
|
390
|
+
@apply py-0 pr-3 text-base;
|
|
391
|
+
|
|
392
|
+
> :where(a, button:not(.menu-row-action)) {
|
|
393
|
+
@apply py-3 pl-5 pr-1.5;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
> .menu-row-input {
|
|
397
|
+
@apply py-3 pl-5 pr-1.5;
|
|
398
|
+
}
|
|
334
399
|
|
|
335
400
|
> :where(a, button:not(.menu-row-action)) svg {
|
|
336
|
-
@apply size-6
|
|
401
|
+
@apply size-6!;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
> .menu-row-action {
|
|
405
|
+
@apply mr-0 size-7;
|
|
337
406
|
}
|
|
338
407
|
|
|
339
408
|
> .menu-row-action svg {
|
|
340
|
-
@apply size-4
|
|
409
|
+
@apply size-4!;
|
|
341
410
|
}
|
|
342
411
|
|
|
343
412
|
.menu-row-input .input-text {
|
|
344
413
|
@apply text-base;
|
|
345
414
|
}
|
|
346
415
|
}
|
|
347
|
-
>
|
|
348
|
-
&:not(ul, details, .menu-title
|
|
416
|
+
> *:not(.menu-row) {
|
|
417
|
+
&:not(ul, details, .menu-title),
|
|
349
418
|
details > summary {
|
|
350
419
|
@apply gap-3 px-5 py-3 text-base;
|
|
351
420
|
}
|
|
@@ -353,7 +422,7 @@
|
|
|
353
422
|
@apply px-3;
|
|
354
423
|
}
|
|
355
424
|
> svg {
|
|
356
|
-
@apply size-6
|
|
425
|
+
@apply size-6!;
|
|
357
426
|
}
|
|
358
427
|
}
|
|
359
428
|
}
|