@threadlabs/looma 0.23.3 → 0.23.5
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/components/ui-badge/ui-badge.html +37 -3
- package/components/ui-list-item/ui-list-item.html +8 -1
- package/components/ui-tree/ui-tree.html +6 -1
- package/components/ui-tree/ui-tree.js +8 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-badge.css +35 -0
- package/styles/ui-list-item.css +5 -1
- package/vanilla/UiBadge.d.ts +1 -1
- package/vanilla/UiBadge.js +5 -2
- package/vanilla/UiListItem.d.ts +1 -0
- package/vanilla/UiListItem.js +3 -1
- package/vanilla/UiTree.d.ts +1 -0
- package/vanilla/UiTree.js +1 -1
- package/vue/UiBadge.d.ts +3 -3
- package/vue/UiBadge.vue +39 -6
- package/vue/UiListItem.d.ts +9 -0
- package/vue/UiListItem.vue +28 -2
- package/vue/UiTree.d.ts +8 -0
- package/vue/UiTree.vue +9 -1
- package/vue/chunks/UiBadge.js +10 -5
- package/vue/chunks/UiListItem.js +23 -1
- package/vue/chunks/UiTree.js +5 -2
- package/vue/components.css +91 -57
package/vue/chunks/UiTree.js
CHANGED
|
@@ -47,6 +47,7 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
|
|
|
47
47
|
"update:maxDepth",
|
|
48
48
|
"reorder",
|
|
49
49
|
"reorder-rejected",
|
|
50
|
+
"activate",
|
|
50
51
|
"select"
|
|
51
52
|
],
|
|
52
53
|
setup(__props, { emit: __emit }) {
|
|
@@ -109,7 +110,7 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
|
|
|
109
110
|
},
|
|
110
111
|
required: false,
|
|
111
112
|
target: { attribute: "selection" },
|
|
112
|
-
description: "How selection works. None keeps rows for navigation and expansion; single requests one selected item; multiple shows checkboxes and requests an item with\n its descendants. The application owns each Tree Item's selected state and responds to select.",
|
|
113
|
+
description: "How selection works. None keeps rows for navigation and expansion; single requests one selected item; multiple shows checkboxes and requests an item with\n its descendants. The application owns each Tree Item's selected state and responds to select. Single-selection rows also request activate on a row click\n or Enter, including an already selected row. Space requests selection only; controls and disabled rows do not activate.",
|
|
113
114
|
values: [
|
|
114
115
|
"none",
|
|
115
116
|
"single",
|
|
@@ -205,11 +206,13 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
|
|
|
205
206
|
"resultingDepth",
|
|
206
207
|
"trigger"
|
|
207
208
|
].includes(key));
|
|
209
|
+
const isActivateDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["id"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer") && Object.keys(detail).every((key) => ["id", "trigger"].includes(key));
|
|
208
210
|
const isSelectDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Array.isArray(detail["ids"]) && detail["ids"].every((item) => typeof item === "string") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => ["ids", "trigger"].includes(key));
|
|
209
211
|
const dispatch = createDispatch(root, emit, {
|
|
210
212
|
checks: {
|
|
211
213
|
reorder: isReorderDetail,
|
|
212
214
|
"reorder-rejected": isReorderRejectedDetail,
|
|
215
|
+
activate: isActivateDetail,
|
|
213
216
|
select: isSelectDetail
|
|
214
217
|
},
|
|
215
218
|
modeled: ["maxDepth"]
|
|
@@ -260,6 +263,6 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
|
|
|
260
263
|
}]]);
|
|
261
264
|
};
|
|
262
265
|
}
|
|
263
|
-
}), [["__scopeId", "data-v-
|
|
266
|
+
}), [["__scopeId", "data-v-ba04ad17"]]);
|
|
264
267
|
//#endregion
|
|
265
268
|
export { UiTree_default as t };
|
package/vue/components.css
CHANGED
|
@@ -301,6 +301,10 @@ svg[data-v-87aa3ce3] {
|
|
|
301
301
|
syntax: "*";
|
|
302
302
|
inherits: false;
|
|
303
303
|
}
|
|
304
|
+
@property --ui-badge-dot-size {
|
|
305
|
+
syntax: "*";
|
|
306
|
+
inherits: false;
|
|
307
|
+
}
|
|
304
308
|
@property --ui-badge-color {
|
|
305
309
|
syntax: "*";
|
|
306
310
|
inherits: false;
|
|
@@ -341,7 +345,7 @@ svg[data-v-87aa3ce3] {
|
|
|
341
345
|
syntax: "*";
|
|
342
346
|
inherits: false;
|
|
343
347
|
}
|
|
344
|
-
[data-component~="ui-badge"][data-v-
|
|
348
|
+
[data-component~="ui-badge"][data-v-84736a7c] {
|
|
345
349
|
--_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
|
|
346
350
|
--_badge-text: var(--ui-text-secondary);
|
|
347
351
|
/* Sit between the soft fill and its stronger theme ink. */
|
|
@@ -386,7 +390,7 @@ svg[data-v-87aa3ce3] {
|
|
|
386
390
|
* Trimming applies to block containers; an inline-block is one and, like the inline-flex it
|
|
387
391
|
* replaces, still sizes to its label rather than filling its container. */
|
|
388
392
|
@supports (text-box-trim: trim-both) {
|
|
389
|
-
[data-component~="ui-badge"][data-v-
|
|
393
|
+
[data-component~="ui-badge"][data-v-84736a7c] {
|
|
390
394
|
display: inline-block;
|
|
391
395
|
min-block-size: var(--ui-badge-min-block-size, 1.5rem);
|
|
392
396
|
text-align: center;
|
|
@@ -395,7 +399,7 @@ svg[data-v-87aa3ce3] {
|
|
|
395
399
|
text-box-edge: cap alphabetic;
|
|
396
400
|
}
|
|
397
401
|
}
|
|
398
|
-
[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-
|
|
402
|
+
[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-84736a7c] {
|
|
399
403
|
box-sizing: border-box;
|
|
400
404
|
min-inline-size: 1rem;
|
|
401
405
|
min-block-size: var(--ui-badge-min-block-size, 1rem);
|
|
@@ -403,52 +407,52 @@ svg[data-v-87aa3ce3] {
|
|
|
403
407
|
font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
|
|
404
408
|
line-height: var(--ui-badge-line-height, 1);
|
|
405
409
|
}
|
|
406
|
-
[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-
|
|
410
|
+
[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-84736a7c] {
|
|
407
411
|
--_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
|
|
408
412
|
--_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
|
|
409
413
|
--_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
|
|
410
414
|
}
|
|
411
|
-
[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-
|
|
415
|
+
[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-84736a7c] {
|
|
412
416
|
--_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
|
|
413
417
|
--_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
|
|
414
418
|
--_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
|
|
415
419
|
}
|
|
416
|
-
[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-
|
|
420
|
+
[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-84736a7c] {
|
|
417
421
|
--_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
|
|
418
422
|
--_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
|
|
419
423
|
--_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
|
|
420
424
|
}
|
|
421
|
-
[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-
|
|
425
|
+
[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-84736a7c] {
|
|
422
426
|
--_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
|
|
423
427
|
--_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
|
|
424
428
|
--_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
|
|
425
429
|
}
|
|
426
|
-
[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-
|
|
430
|
+
[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-84736a7c] {
|
|
427
431
|
--_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
|
|
428
432
|
--_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
|
|
429
433
|
--_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
|
|
430
434
|
}
|
|
431
|
-
[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-
|
|
435
|
+
[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-84736a7c] {
|
|
432
436
|
--_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
|
|
433
437
|
--_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
|
|
434
438
|
--_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
|
|
435
439
|
}
|
|
436
|
-
[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-
|
|
440
|
+
[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-84736a7c] {
|
|
437
441
|
--_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
|
|
438
442
|
--_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
|
|
439
443
|
--_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
|
|
440
444
|
}
|
|
441
|
-
[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-
|
|
445
|
+
[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-84736a7c] {
|
|
442
446
|
--_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
|
|
443
447
|
--_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
|
|
444
448
|
--_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
|
|
445
449
|
}
|
|
446
|
-
[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-
|
|
450
|
+
[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-84736a7c] {
|
|
447
451
|
--_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
|
|
448
452
|
--_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
|
|
449
453
|
--_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
|
|
450
454
|
}
|
|
451
|
-
[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-
|
|
455
|
+
[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-84736a7c] {
|
|
452
456
|
--_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
|
|
453
457
|
--_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
|
|
454
458
|
--_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
|
|
@@ -456,12 +460,12 @@ svg[data-v-87aa3ce3] {
|
|
|
456
460
|
|
|
457
461
|
/* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
|
|
458
462
|
invalid while the hook is unset. */
|
|
459
|
-
[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-
|
|
463
|
+
[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-84736a7c] {
|
|
460
464
|
--_badge-color-surface: var(--_badge-color-ink);
|
|
461
465
|
--_badge-color-border: var(--_badge-color-ink);
|
|
462
466
|
--_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
|
|
463
467
|
}
|
|
464
|
-
[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-
|
|
468
|
+
[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-84736a7c] {
|
|
465
469
|
--_badge-surface: var(--ui-surface-default);
|
|
466
470
|
--_badge-border: var(--ui-border-strong);
|
|
467
471
|
--_badge-text: var(--ui-text-secondary);
|
|
@@ -469,30 +473,52 @@ svg[data-v-87aa3ce3] {
|
|
|
469
473
|
--_badge-color-surface: initial;
|
|
470
474
|
--_badge-color-border: var(--_badge-color-ink);
|
|
471
475
|
}
|
|
472
|
-
[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-
|
|
476
|
+
[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-84736a7c] {
|
|
473
477
|
--_badge-border: var(--ui-accent-solid);
|
|
474
478
|
--_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
|
|
475
479
|
}
|
|
476
|
-
[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-
|
|
480
|
+
[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-84736a7c] {
|
|
477
481
|
--_badge-border: var(--ui-danger-solid);
|
|
478
482
|
--_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
|
|
479
483
|
}
|
|
480
|
-
[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-
|
|
484
|
+
[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-84736a7c] {
|
|
481
485
|
--_badge-border: var(--ui-success-solid);
|
|
482
486
|
--_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
|
|
483
487
|
}
|
|
484
|
-
[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-
|
|
488
|
+
[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-84736a7c] {
|
|
485
489
|
--_badge-border: var(--ui-warning-solid);
|
|
486
490
|
--_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
|
|
487
491
|
}
|
|
488
|
-
[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-
|
|
492
|
+
[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-84736a7c] {
|
|
489
493
|
--_badge-border: var(--ui-info-solid);
|
|
490
494
|
--_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
|
|
491
495
|
}
|
|
492
496
|
|
|
497
|
+
/* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
|
|
498
|
+
[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-84736a7c] {
|
|
499
|
+
position: relative;
|
|
500
|
+
box-sizing: border-box;
|
|
501
|
+
flex: none;
|
|
502
|
+
inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
|
|
503
|
+
block-size: var(--ui-badge-dot-size, var(--ui-space-2));
|
|
504
|
+
min-inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
|
|
505
|
+
min-block-size: var(--ui-badge-dot-size, var(--ui-space-2));
|
|
506
|
+
padding: 0;
|
|
507
|
+
border-radius: var(--ui-radius-round);
|
|
508
|
+
text-box-trim: none;
|
|
509
|
+
}
|
|
510
|
+
[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-84736a7c] {
|
|
511
|
+
position: absolute;
|
|
512
|
+
inline-size: 1px;
|
|
513
|
+
block-size: 1px;
|
|
514
|
+
overflow: hidden;
|
|
515
|
+
clip-path: inset(50%);
|
|
516
|
+
white-space: nowrap;
|
|
517
|
+
}
|
|
518
|
+
|
|
493
519
|
/* The clipped point needs an inset surface over an outer border-colour shape: a native border
|
|
494
520
|
has no diagonal edge to follow. Keep this edge for every tag variant. */
|
|
495
|
-
[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-
|
|
521
|
+
[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c] {
|
|
496
522
|
--_badge-point: var(--ui-badge-point, var(--ui-space-2));
|
|
497
523
|
|
|
498
524
|
position: relative;
|
|
@@ -509,7 +535,7 @@ svg[data-v-87aa3ce3] {
|
|
|
509
535
|
0 100%
|
|
510
536
|
);
|
|
511
537
|
}
|
|
512
|
-
[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-
|
|
538
|
+
[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c]::before {
|
|
513
539
|
content: "";
|
|
514
540
|
position: absolute;
|
|
515
541
|
inset: 0;
|
|
@@ -524,29 +550,34 @@ svg[data-v-87aa3ce3] {
|
|
|
524
550
|
);
|
|
525
551
|
pointer-events: none;
|
|
526
552
|
}
|
|
527
|
-
[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-
|
|
553
|
+
[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c]:dir(rtl) {
|
|
528
554
|
padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
|
|
529
555
|
padding-inline-start: calc(
|
|
530
556
|
var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
|
|
531
557
|
);
|
|
532
558
|
clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
|
|
533
559
|
}
|
|
534
|
-
[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-
|
|
560
|
+
[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c]:dir(rtl)::before {
|
|
535
561
|
clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
|
|
536
562
|
}
|
|
537
563
|
@media (forced-colors: active) {
|
|
538
|
-
[data-component~="ui-badge"][data-ui-badge-state~="shape=
|
|
564
|
+
[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-84736a7c] {
|
|
565
|
+
forced-color-adjust: none;
|
|
566
|
+
border-color: CanvasText;
|
|
567
|
+
background: CanvasText;
|
|
568
|
+
}
|
|
569
|
+
[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c] {
|
|
539
570
|
forced-color-adjust: none;
|
|
540
571
|
background: CanvasText;
|
|
541
572
|
color: CanvasText;
|
|
542
573
|
}
|
|
543
|
-
[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-
|
|
574
|
+
[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c]::before {
|
|
544
575
|
background: Canvas;
|
|
545
576
|
}
|
|
546
577
|
}
|
|
547
578
|
|
|
548
579
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
549
|
-
[data-component~="ui-badge"][hidden][data-v-
|
|
580
|
+
[data-component~="ui-badge"][hidden][data-v-84736a7c] {
|
|
550
581
|
display: none;
|
|
551
582
|
}
|
|
552
583
|
|
|
@@ -5119,7 +5150,7 @@ svg[data-v-7bb0fe2e-s] {
|
|
|
5119
5150
|
padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
|
|
5120
5151
|
a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
|
|
5121
5152
|
stay their own. */
|
|
5122
|
-
[data-component~="ui-list-item"][data-v-
|
|
5153
|
+
[data-component~="ui-list-item"][data-v-e7ecd203] {
|
|
5123
5154
|
/* Hooks do not inherit, so the parts below read them from the root. */
|
|
5124
5155
|
--_ui-list-item-icon-size: var(--ui-list-item-icon-size);
|
|
5125
5156
|
|
|
@@ -5144,83 +5175,86 @@ svg[data-v-7bb0fe2e-s] {
|
|
|
5144
5175
|
background-color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
5145
5176
|
border-color var(--ui-motion-fast) var(--ui-motion-ease);
|
|
5146
5177
|
}
|
|
5147
|
-
[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-
|
|
5178
|
+
[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-e7ecd203] {
|
|
5148
5179
|
padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
|
|
5149
5180
|
padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
|
|
5150
5181
|
border: var(--ui-border-width) solid var(--ui-border-strong);
|
|
5151
5182
|
border-radius: var(--ui-radius-lg);
|
|
5152
5183
|
background: var(--ui-surface-raised);
|
|
5153
5184
|
}
|
|
5154
|
-
[data-component~="ui-list-item"][data-v-
|
|
5185
|
+
[data-component~="ui-list-item"][data-v-e7ecd203]:has(.title a[href]:hover) {
|
|
5155
5186
|
background: var(--ui-surface-hover);
|
|
5156
5187
|
}
|
|
5157
|
-
[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-
|
|
5188
|
+
[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-e7ecd203]:has(.title
|
|
5158
5189
|
a[href]:hover) {
|
|
5159
5190
|
border-color: var(--ui-border-strong);
|
|
5160
5191
|
}
|
|
5161
|
-
[data-component~="ui-list-item"][data-ui-list-item-state~="
|
|
5192
|
+
[data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-e7ecd203] {
|
|
5193
|
+
background: var(--ui-selection-surface);
|
|
5194
|
+
}
|
|
5195
|
+
[data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-e7ecd203] {
|
|
5162
5196
|
background: var(--ui-selection-surface);
|
|
5163
5197
|
color: var(--ui-selection-text);
|
|
5164
5198
|
}
|
|
5165
|
-
[data-component~="ui-list-item"][data-v-
|
|
5199
|
+
[data-component~="ui-list-item"][data-v-e7ecd203]:has(.title a[href]:focus-visible) {
|
|
5166
5200
|
box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
|
|
5167
5201
|
}
|
|
5168
|
-
.leading[data-v-
|
|
5169
|
-
.trailing[data-v-
|
|
5202
|
+
.leading[data-v-e7ecd203],
|
|
5203
|
+
.trailing[data-v-e7ecd203] {
|
|
5170
5204
|
display: inline-flex;
|
|
5171
5205
|
flex: none;
|
|
5172
5206
|
align-items: center;
|
|
5173
5207
|
gap: var(--ui-space-2);
|
|
5174
5208
|
}
|
|
5175
|
-
.leading[data-v-
|
|
5209
|
+
.leading[data-v-e7ecd203] {
|
|
5176
5210
|
color: var(--ui-text-muted);
|
|
5177
5211
|
font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
|
|
5178
5212
|
}
|
|
5179
|
-
[data-component~="ui-list-item"][data-ui-list-item-state~="current"] .leading[data-v-
|
|
5213
|
+
[data-component~="ui-list-item"][data-ui-list-item-state~="current"] .leading[data-v-e7ecd203] {
|
|
5180
5214
|
color: var(--ui-selection-text);
|
|
5181
5215
|
}
|
|
5182
5216
|
|
|
5183
5217
|
/* Trailing controls take their own clicks, above the title link's stretched hit area. */
|
|
5184
|
-
.trailing[data-v-
|
|
5218
|
+
.trailing[data-v-e7ecd203] {
|
|
5185
5219
|
position: relative;
|
|
5186
5220
|
z-index: 1;
|
|
5187
5221
|
color: var(--ui-text-muted);
|
|
5188
5222
|
font-size: var(--ui-font-size-sm);
|
|
5189
5223
|
}
|
|
5190
|
-
.content[data-v-
|
|
5224
|
+
.content[data-v-e7ecd203] {
|
|
5191
5225
|
display: flex;
|
|
5192
5226
|
flex: 1;
|
|
5193
5227
|
flex-direction: column;
|
|
5194
5228
|
gap: var(--ui-space-0-5, 2px);
|
|
5195
5229
|
min-inline-size: 0;
|
|
5196
5230
|
}
|
|
5197
|
-
.title[data-v-
|
|
5198
|
-
.description[data-v-
|
|
5231
|
+
.title[data-v-e7ecd203],
|
|
5232
|
+
.description[data-v-e7ecd203] {
|
|
5199
5233
|
display: block;
|
|
5200
5234
|
min-inline-size: 0;
|
|
5201
5235
|
overflow: hidden;
|
|
5202
5236
|
text-overflow: ellipsis;
|
|
5203
5237
|
white-space: nowrap;
|
|
5204
5238
|
}
|
|
5205
|
-
.title[data-v-
|
|
5239
|
+
.title[data-v-e7ecd203] {
|
|
5206
5240
|
font-size: var(--ui-font-size-md);
|
|
5207
5241
|
font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
|
|
5208
5242
|
line-height: var(--ui-line-height-tight);
|
|
5209
5243
|
}
|
|
5210
|
-
.description[data-v-
|
|
5244
|
+
.description[data-v-e7ecd203] {
|
|
5211
5245
|
color: var(--ui-text-muted);
|
|
5212
5246
|
font-size: var(--ui-font-size-sm);
|
|
5213
5247
|
line-height: var(--ui-line-height-tight);
|
|
5214
5248
|
}
|
|
5215
|
-
.title > a[data-v-
|
|
5249
|
+
.title > a[data-v-e7ecd203-s] {
|
|
5216
5250
|
color: inherit;
|
|
5217
5251
|
text-decoration: none;
|
|
5218
5252
|
}
|
|
5219
|
-
.title > a[data-v-
|
|
5253
|
+
.title > a[data-v-e7ecd203-s]:focus-visible {
|
|
5220
5254
|
outline: none;
|
|
5221
5255
|
box-shadow: none;
|
|
5222
5256
|
}
|
|
5223
|
-
.title > a[href][data-v-
|
|
5257
|
+
.title > a[href][data-v-e7ecd203-s]::after {
|
|
5224
5258
|
position: absolute;
|
|
5225
5259
|
inset: 0;
|
|
5226
5260
|
border-radius: inherit;
|
|
@@ -5228,24 +5262,24 @@ svg[data-v-7bb0fe2e-s] {
|
|
|
5228
5262
|
}
|
|
5229
5263
|
|
|
5230
5264
|
/* An unused region takes no space. */
|
|
5231
|
-
.leading[data-v-
|
|
5232
|
-
.description[data-v-
|
|
5233
|
-
.trailing[data-v-
|
|
5265
|
+
.leading[data-v-e7ecd203]:empty,
|
|
5266
|
+
.description[data-v-e7ecd203]:empty,
|
|
5267
|
+
.trailing[data-v-e7ecd203]:empty {
|
|
5234
5268
|
display: none;
|
|
5235
5269
|
}
|
|
5236
5270
|
@media (forced-colors: active) {
|
|
5237
|
-
[data-component~="ui-list-item"][data-v-
|
|
5271
|
+
[data-component~="ui-list-item"][data-v-e7ecd203]:has(a:focus-visible) {
|
|
5238
5272
|
outline: var(--ui-focus-width) solid Highlight;
|
|
5239
5273
|
outline-offset: calc(-1 * var(--ui-focus-width));
|
|
5240
5274
|
}
|
|
5241
|
-
[data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-
|
|
5275
|
+
:is([data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-e7ecd203], [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-e7ecd203]):not(:has(a:focus-visible)) {
|
|
5242
5276
|
outline: var(--ui-border-width) solid Highlight;
|
|
5243
5277
|
outline-offset: calc(-1 * var(--ui-border-width));
|
|
5244
5278
|
}
|
|
5245
5279
|
}
|
|
5246
5280
|
|
|
5247
5281
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
5248
|
-
[data-component~="ui-list-item"][hidden][data-v-
|
|
5282
|
+
[data-component~="ui-list-item"][hidden][data-v-e7ecd203] {
|
|
5249
5283
|
display: none;
|
|
5250
5284
|
}
|
|
5251
5285
|
|
|
@@ -8245,17 +8279,17 @@ to {
|
|
|
8245
8279
|
|
|
8246
8280
|
/* Reaches the items the way density does, so the setting lives on the tree the way a reader
|
|
8247
8281
|
thinks about it: this list scrolls its long names. */
|
|
8248
|
-
[data-component~="ui-tree"][data-ui-tree-state~="marquee"][data-v-
|
|
8282
|
+
[data-component~="ui-tree"][data-ui-tree-state~="marquee"][data-v-ba04ad17] {
|
|
8249
8283
|
--_ui-default-tree-item-marquee: 1;
|
|
8250
8284
|
}
|
|
8251
8285
|
|
|
8252
8286
|
/* The items' defaults for this density: an item's own hook still wins. */
|
|
8253
|
-
[data-component~="ui-tree"][data-ui-tree-state~="density=compact"][data-v-
|
|
8287
|
+
[data-component~="ui-tree"][data-ui-tree-state~="density=compact"][data-v-ba04ad17] {
|
|
8254
8288
|
--_ui-default-tree-item-min-block-size: var(--ui-control-size-sm);
|
|
8255
8289
|
--_ui-default-tree-item-font-size: var(--ui-font-size-sm);
|
|
8256
8290
|
--_ui-default-tree-item-label-padding-block: 0;
|
|
8257
8291
|
}
|
|
8258
|
-
[data-component~="ui-tree"][data-v-
|
|
8292
|
+
[data-component~="ui-tree"][data-v-ba04ad17] {
|
|
8259
8293
|
/* Hooks do not inherit: the tree hands its own to its items here, and a tree nested in an item
|
|
8260
8294
|
starts again from its own settings. */
|
|
8261
8295
|
--_ui-tree-indent: var(--ui-tree-indent);
|
|
@@ -8268,7 +8302,7 @@ to {
|
|
|
8268
8302
|
min-inline-size: 0;
|
|
8269
8303
|
padding-inline-start: var(--ui-tree-gutter, 0px);
|
|
8270
8304
|
}
|
|
8271
|
-
[data-component~="ui-tree"][data-move-mode][data-v-
|
|
8305
|
+
[data-component~="ui-tree"][data-move-mode][data-v-ba04ad17]::after {
|
|
8272
8306
|
content: "Choose a destination row, or use Up and Down; Right nests inside a branch. Enter places it, Escape cancels.";
|
|
8273
8307
|
display: block;
|
|
8274
8308
|
padding: var(--ui-space-2);
|
|
@@ -8277,7 +8311,7 @@ to {
|
|
|
8277
8311
|
}
|
|
8278
8312
|
|
|
8279
8313
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
8280
|
-
[data-component~="ui-tree"][hidden][data-v-
|
|
8314
|
+
[data-component~="ui-tree"][hidden][data-v-ba04ad17] {
|
|
8281
8315
|
display: none;
|
|
8282
8316
|
}
|
|
8283
8317
|
|