@threadlabs/looma 0.26.10 → 0.26.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.
Files changed (35) hide show
  1. package/components/ui-callout/ui-callout.html +13 -0
  2. package/components/ui-card/ui-card.html +26 -9
  3. package/components/ui-list-item/ui-list-item.html +4 -4
  4. package/components/ui-nav-item/ui-nav-item.html +4 -4
  5. package/components/ui-search-result-row/ui-search-result-row.html +3 -3
  6. package/components/ui-section/ui-section.html +12 -0
  7. package/components/ui-tree-item/ui-tree-item.html +6 -6
  8. package/dist/index.js +1 -1
  9. package/package.json +7 -2
  10. package/styles/ui-callout.css +13 -0
  11. package/styles/ui-card.css +26 -7
  12. package/styles/ui-list-item.css +4 -4
  13. package/styles/ui-nav-item.css +4 -4
  14. package/styles/ui-search-result-row.css +3 -3
  15. package/styles/ui-section.css +12 -0
  16. package/styles/ui-tree-item.css +6 -6
  17. package/tokens.css +2 -2
  18. package/vue/UiCallout.vue +33 -0
  19. package/vue/UiCard.vue +29 -8
  20. package/vue/UiListItem.vue +5 -4
  21. package/vue/UiNavItem.vue +8 -4
  22. package/vue/UiSearchResultRow.vue +3 -3
  23. package/vue/UiSection.vue +12 -0
  24. package/vue/UiTreeItem.vue +8 -6
  25. package/vue/chunks/UiCallout.js +1 -1
  26. package/vue/chunks/UiCard.js +2 -2
  27. package/vue/chunks/UiListItem.js +1 -1
  28. package/vue/chunks/UiNavItem.js +1 -1
  29. package/vue/chunks/UiSearchResultRow.js +1 -1
  30. package/vue/chunks/UiSection.js +1 -1
  31. package/vue/chunks/UiTreeItem.js +1 -1
  32. package/vue/components.css +359 -250
  33. package/vue/editor/compact/extensions.d.ts +3 -0
  34. package/vue/editor/compact/index.d.ts +84 -0
  35. package/vue/editor/compact/index.js +517 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threadlabs/looma",
3
- "version": "0.26.10",
3
+ "version": "0.26.12",
4
4
  "type": "module",
5
5
  "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
6
6
  "license": "MIT",
@@ -57,7 +57,12 @@
57
57
  "./tokens.css": "./tokens.css",
58
58
  "./theme-light.css": "./theme-light.css",
59
59
  "./theme-dark.css": "./theme-dark.css",
60
- "./theme-high-contrast.css": "./theme-high-contrast.css"
60
+ "./theme-high-contrast.css": "./theme-high-contrast.css",
61
+ "./vue/editor/compact": {
62
+ "types": "./vue/editor/compact/index.d.ts",
63
+ "import": "./vue/editor/compact/index.js",
64
+ "default": "./vue/editor/compact/index.js"
65
+ }
61
66
  },
62
67
  "files": [
63
68
  "dist/",
package/styles/ui-callout.css CHANGED
@@ -53,6 +53,16 @@
53
53
  --_ui-callout-icon-size: var(--ui-callout-icon-size);
54
54
 
55
55
  --_callout-surface: var(--ui-info-soft);
56
+ --_ui-selection-context-surface: light-dark(
57
+ oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
58
+ oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
59
+ );
60
+ --_ui-selection-context-border: light-dark(
61
+ oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l - 0.085) calc(max(c, min(0.045, c * 3))) h),
62
+ oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l + 0.085) calc(max(c, min(0.045, c * 3))) h)
63
+ );
64
+ --_ui-selection-context-text: var(--ui-text-primary);
65
+
56
66
  --_callout-border: var(--ui-info-solid);
57
67
  --_callout-icon: var(--ui-info-solid);
58
68
 
@@ -96,6 +106,9 @@
96
106
  }
97
107
 
98
108
  :scope[data-ui-callout-state~="tone=neutral"], :scope[data-ui-callout-state~="tone=note"] {
109
+ --_ui-selection-context-surface: initial;
110
+ --_ui-selection-context-border: initial;
111
+ --_ui-selection-context-text: initial;
99
112
  --_callout-surface: var(--ui-surface-muted);
100
113
  --_callout-border: var(--ui-border-strong);
101
114
  --_callout-icon: var(--ui-text-secondary);
package/styles/ui-card.css CHANGED
@@ -3,6 +3,10 @@
3
3
  /* A surface that groups content. Its children stack with even space between them, so a card
4
4
  needs no layout of its own. */
5
5
  :scope {
6
+ --_ui-card-surface: var(--ui-surface-raised);
7
+ --_ui-selection-context-surface: initial;
8
+ --_ui-selection-context-border: initial;
9
+ --_ui-selection-context-text: initial;
6
10
  display: flex;
7
11
  flex-direction: column;
8
12
  gap: var(--ui-space-4);
@@ -11,7 +15,7 @@
11
15
  padding: var(--ui-space-5);
12
16
  border: var(--ui-border-width) solid var(--ui-border-strong);
13
17
  border-radius: var(--ui-radius-lg);
14
- background: var(--ui-surface-raised);
18
+ background: var(--_ui-card-surface);
15
19
  color: var(--ui-text-primary);
16
20
  }
17
21
 
@@ -30,7 +34,7 @@
30
34
 
31
35
  :scope[data-ui-card-state~="variant=subtle"] {
32
36
  border-color: transparent;
33
- background: var(--ui-surface-muted);
37
+ --_ui-card-surface: var(--ui-surface-muted);
34
38
  }
35
39
 
36
40
  :scope[data-ui-card-state~="variant=elevated"] {
@@ -40,22 +44,22 @@
40
44
 
41
45
  :scope[data-ui-card-state~="tone=accent"] {
42
46
  border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
43
- background: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
47
+ --_ui-card-surface: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
44
48
  }
45
49
 
46
50
  :scope[data-ui-card-state~="tone=info"] {
47
51
  border-color: color-mix(in srgb, var(--ui-info) 25%, var(--ui-border-default));
48
- background: color-mix(in srgb, var(--ui-info) 6%, var(--ui-surface-default));
52
+ --_ui-card-surface: color-mix(in srgb, var(--ui-info) 6%, var(--ui-surface-default));
49
53
  }
50
54
 
51
55
  :scope[data-ui-card-state~="tone=success"] {
52
56
  border-color: color-mix(in srgb, var(--ui-success) 25%, var(--ui-border-default));
53
- background: color-mix(in srgb, var(--ui-success) 6%, var(--ui-surface-default));
57
+ --_ui-card-surface: color-mix(in srgb, var(--ui-success) 6%, var(--ui-surface-default));
54
58
  }
55
59
 
56
60
  :scope[data-ui-card-state~="tone=warning"] {
57
61
  border-color: color-mix(in srgb, var(--ui-warning) 25%, var(--ui-border-default));
58
- background: color-mix(in srgb, var(--ui-warning) 6%, var(--ui-surface-default));
62
+ --_ui-card-surface: color-mix(in srgb, var(--ui-warning) 6%, var(--ui-surface-default));
59
63
  }
60
64
 
61
65
  :scope[data-ui-card-state~="variant=subtle"]:is([data-ui-card-state~="tone=accent"], [data-ui-card-state~="tone=info"], [data-ui-card-state~="tone=success"], [data-ui-card-state~="tone=warning"]) {
@@ -65,7 +69,20 @@
65
69
  :scope[data-ui-card-state~="tone=danger"] {
66
70
  border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
67
71
  border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
68
- background: var(--ui-danger-soft);
72
+ --_ui-card-surface: var(--ui-danger-soft);
73
+ }
74
+
75
+ /* A colored panel shades rows in its own hue, without changing button intent. */
76
+ :scope[data-ui-card-state~="tone=accent"], :scope[data-ui-card-state~="tone=info"], :scope[data-ui-card-state~="tone=success"], :scope[data-ui-card-state~="tone=warning"], :scope[data-ui-card-state~="tone=danger"] {
77
+ --_ui-selection-context-surface: light-dark(
78
+ oklch(from var(--_ui-card-surface) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
79
+ oklch(from var(--_ui-card-surface) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
80
+ );
81
+ --_ui-selection-context-border: light-dark(
82
+ oklch(from var(--_ui-card-surface) calc(l - 0.085) calc(max(c, min(0.045, c * 3))) h),
83
+ oklch(from var(--_ui-card-surface) calc(l + 0.085) calc(max(c, min(0.045, c * 3))) h)
84
+ );
85
+ --_ui-selection-context-text: var(--ui-text-primary);
69
86
  }
70
87
 
71
88
  :scope[data-ui-card-state~="size=sm"] {
@@ -90,5 +107,7 @@
90
107
  /* A surface that groups content. Its children stack with even space between them, so a card
91
108
  needs no layout of its own. */
92
109
 
110
+ /* A colored panel shades rows in its own hue, without changing button intent. */
111
+
93
112
  /* A component that sets its display still honours the hidden attribute on its root. */
94
113
  }
package/styles/ui-list-item.css CHANGED
@@ -56,8 +56,8 @@
56
56
  :scope:where(:has(.title a[href])):hover,
57
57
  :scope[data-ui-list-item-state~="highlighted"],
58
58
  :scope[data-ui-list-item-state~="current"] {
59
- background: var(--ui-selection-surface);
60
- box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
59
+ background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
60
+ box-shadow: inset 0 0 0 var(--ui-border-width) var(--_ui-selection-context-border, var(--ui-selection-border));
61
61
  }
62
62
 
63
63
  :scope[data-ui-list-item-state~="variant=card"]:where(:has(.title a[href])):hover {
@@ -65,7 +65,7 @@
65
65
  }
66
66
 
67
67
  :scope[data-ui-list-item-state~="current"] {
68
- color: var(--ui-selection-text);
68
+ color: var(--_ui-selection-context-text, var(--ui-selection-text));
69
69
  }
70
70
 
71
71
  /* Framed cards already have their own edge; the stronger focus ring stays separate. */
@@ -91,7 +91,7 @@
91
91
  }
92
92
 
93
93
  :scope[data-ui-list-item-state~="current"] .leading {
94
- color: var(--ui-selection-text);
94
+ color: var(--_ui-selection-context-text, var(--ui-selection-text));
95
95
  }
96
96
 
97
97
  /* An explicitly independent leading control sits above the stretched row link. */
package/styles/ui-nav-item.css CHANGED
@@ -50,7 +50,7 @@
50
50
  }
51
51
 
52
52
  :scope:hover:not([aria-current]) {
53
- background: var(--ui-nav-hover-surface);
53
+ background: var(--_ui-selection-context-surface, var(--ui-nav-hover-surface));
54
54
  color: var(--ui-text-primary);
55
55
  }
56
56
 
@@ -62,13 +62,13 @@
62
62
  }
63
63
 
64
64
  :scope[aria-current] {
65
- background: var(--ui-nav-item-current-surface, var(--ui-selection-surface));
66
- color: var(--ui-selection-text);
65
+ background: var(--ui-nav-item-current-surface, var(--_ui-selection-context-surface, var(--ui-selection-surface)));
66
+ color: var(--_ui-selection-context-text, var(--ui-selection-text));
67
67
  }
68
68
 
69
69
  /* A complete inset edge separates pale fills without changing rail geometry. */
70
70
  :scope[data-ui-nav-item-state~="variant=surface"]:is(:hover, [aria-current]) {
71
- box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
71
+ box-shadow: inset 0 0 0 var(--ui-border-width) var(--_ui-selection-context-border, var(--ui-selection-border));
72
72
  }
73
73
 
74
74
  :scope[data-ui-nav-item-state~="variant=line"] {
package/styles/ui-search-result-row.css CHANGED
@@ -74,15 +74,15 @@
74
74
  }
75
75
 
76
76
  :scope:hover:enabled {
77
- background: var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%));
77
+ background: var(--ui-search-result-row-hover-surface, var(--_ui-selection-context-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%)));
78
78
  }
79
79
 
80
80
  :scope[data-ui-search-result-row-state~="selected"] {
81
81
  background: var(
82
82
  --ui-search-result-row-selected-bg,
83
- var(--ui-selection-surface)
83
+ var(--_ui-selection-context-surface, var(--ui-selection-surface))
84
84
  );
85
- color: var(--ui-selection-text);
85
+ color: var(--_ui-selection-context-text, var(--ui-selection-text));
86
86
  }
87
87
 
88
88
  :scope:focus-visible {
package/styles/ui-section.css CHANGED
@@ -10,6 +10,9 @@
10
10
  }
11
11
 
12
12
  :scope[data-ui-section-state~="variant=card"] {
13
+ --_ui-selection-context-surface: initial;
14
+ --_ui-selection-context-border: initial;
15
+ --_ui-selection-context-text: initial;
13
16
  padding: var(--ui-space-5);
14
17
  border: var(--ui-border-width) solid var(--ui-border-strong);
15
18
  border-radius: var(--ui-radius-lg);
@@ -22,6 +25,15 @@
22
25
  }
23
26
 
24
27
  :scope[data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"] {
28
+ --_ui-selection-context-surface: light-dark(
29
+ oklch(from var(--ui-danger-soft) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
30
+ oklch(from var(--ui-danger-soft) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
31
+ );
32
+ --_ui-selection-context-border: light-dark(
33
+ oklch(from var(--ui-danger-soft) calc(l - 0.085) calc(max(c, min(0.045, c * 3))) h),
34
+ oklch(from var(--ui-danger-soft) calc(l + 0.085) calc(max(c, min(0.045, c * 3))) h)
35
+ );
36
+ --_ui-selection-context-text: var(--ui-text-primary);
25
37
  border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
26
38
  border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
27
39
  background: var(--ui-danger-soft);
package/styles/ui-tree-item.css CHANGED
@@ -69,18 +69,18 @@
69
69
  .row:hover,
70
70
  .row:focus-within {
71
71
  color: var(--ui-text-primary);
72
- background: var(--ui-surface-muted);
73
- box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
72
+ background: var(--_ui-selection-context-surface, var(--ui-surface-muted));
73
+ box-shadow: inset 0 0 0 var(--ui-border-width) var(--_ui-selection-context-border, var(--ui-selection-border));
74
74
  }
75
75
 
76
76
  /* Selection is the same surface recipe as destination and choice rows. */
77
77
  :scope[data-ui-tree-item-state~="selected"] > .row {
78
- color: var(--ui-selection-text);
79
- background: var(--ui-selection-surface);
80
- box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
78
+ color: var(--_ui-selection-context-text, var(--ui-selection-text));
79
+ background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
80
+ box-shadow: inset 0 0 0 var(--ui-border-width) var(--_ui-selection-context-border, var(--ui-selection-border));
81
81
  }
82
82
  :scope[data-ui-tree-item-state~="selected"]:not([aria-disabled="true"]) > .row > .leading {
83
- color: var(--ui-selection-text);
83
+ color: var(--_ui-selection-context-text, var(--ui-selection-text));
84
84
  }
85
85
 
86
86
  :scope[data-ui-tree-item-state~="disabled"] .row {
package/tokens.css CHANGED
@@ -342,8 +342,8 @@
342
342
  }
343
343
 
344
344
  [data-ui-choice-option][aria-selected="true"]:not([aria-disabled="true"]) {
345
- background: var(--ui-selection-surface);
346
- color: var(--ui-selection-text);
345
+ background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
346
+ color: var(--_ui-selection-context-text, var(--ui-selection-text));
347
347
  }
348
348
 
349
349
  [data-ui-choice-option][data-multiple] {
package/vue/UiCallout.vue CHANGED
@@ -232,6 +232,36 @@ const hostState = computed(() =>
232
232
  --_ui-callout-icon-size: var(--ui-callout-icon-size);
233
233
 
234
234
  --_callout-surface: var(--ui-info-soft);
235
+ --_ui-selection-context-surface: light-dark(
236
+ oklch(
237
+ from var(--ui-callout-surface, var(--_callout-surface))
238
+ calc(l - 0.045)
239
+ calc(max(c, min(0.045, c * 3)))
240
+ h
241
+ ),
242
+ oklch(
243
+ from var(--ui-callout-surface, var(--_callout-surface))
244
+ calc(l + 0.045)
245
+ calc(max(c, min(0.045, c * 3)))
246
+ h
247
+ )
248
+ );
249
+ --_ui-selection-context-border: light-dark(
250
+ oklch(
251
+ from var(--ui-callout-surface, var(--_callout-surface))
252
+ calc(l - 0.085)
253
+ calc(max(c, min(0.045, c * 3)))
254
+ h
255
+ ),
256
+ oklch(
257
+ from var(--ui-callout-surface, var(--_callout-surface))
258
+ calc(l + 0.085)
259
+ calc(max(c, min(0.045, c * 3)))
260
+ h
261
+ )
262
+ );
263
+ --_ui-selection-context-text: var(--ui-text-primary);
264
+
235
265
  --_callout-border: var(--ui-info-solid);
236
266
  --_callout-icon: var(--ui-info-solid);
237
267
 
@@ -278,6 +308,9 @@ const hostState = computed(() =>
278
308
 
279
309
  [data-component~="ui-callout"][data-ui-callout-state~="tone=neutral"],
280
310
  [data-component~="ui-callout"][data-ui-callout-state~="tone=note"] {
311
+ --_ui-selection-context-surface: initial;
312
+ --_ui-selection-context-border: initial;
313
+ --_ui-selection-context-text: initial;
281
314
  --_callout-surface: var(--ui-surface-muted);
282
315
  --_callout-border: var(--ui-border-strong);
283
316
  --_callout-icon: var(--ui-text-secondary);
package/vue/UiCard.vue CHANGED
@@ -41,7 +41,7 @@ const propValidityContract = {
41
41
  required: false,
42
42
  target: { attribute: 'tone' },
43
43
  description:
44
- 'accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Tone never changes child\n controls.',
44
+ 'accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Row highlights follow the\n surface hue; action controls retain their own intent.',
45
45
  values: ['neutral', 'accent', 'info', 'success', 'warning', 'danger'],
46
46
  default: 'neutral',
47
47
  },
@@ -265,6 +265,10 @@ const hostState = computed(() =>
265
265
  /* A surface that groups content. Its children stack with even space between them, so a card
266
266
  needs no layout of its own. */
267
267
  [data-component~="ui-card"] {
268
+ --_ui-card-surface: var(--ui-surface-raised);
269
+ --_ui-selection-context-surface: initial;
270
+ --_ui-selection-context-border: initial;
271
+ --_ui-selection-context-text: initial;
268
272
  display: flex;
269
273
  flex-direction: column;
270
274
  gap: var(--ui-space-4);
@@ -273,7 +277,7 @@ const hostState = computed(() =>
273
277
  padding: var(--ui-space-5);
274
278
  border: var(--ui-border-width) solid var(--ui-border-strong);
275
279
  border-radius: var(--ui-radius-lg);
276
- background: var(--ui-surface-raised);
280
+ background: var(--_ui-card-surface);
277
281
  color: var(--ui-text-primary);
278
282
  }
279
283
 
@@ -292,7 +296,7 @@ const hostState = computed(() =>
292
296
 
293
297
  [data-component~="ui-card"][data-ui-card-state~="variant=subtle"] {
294
298
  border-color: transparent;
295
- background: var(--ui-surface-muted);
299
+ --_ui-card-surface: var(--ui-surface-muted);
296
300
  }
297
301
 
298
302
  [data-component~="ui-card"][data-ui-card-state~="variant=elevated"] {
@@ -302,22 +306,22 @@ const hostState = computed(() =>
302
306
 
303
307
  [data-component~="ui-card"][data-ui-card-state~="tone=accent"] {
304
308
  border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
305
- background: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
309
+ --_ui-card-surface: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
306
310
  }
307
311
 
308
312
  [data-component~="ui-card"][data-ui-card-state~="tone=info"] {
309
313
  border-color: color-mix(in srgb, var(--ui-info) 25%, var(--ui-border-default));
310
- background: color-mix(in srgb, var(--ui-info) 6%, var(--ui-surface-default));
314
+ --_ui-card-surface: color-mix(in srgb, var(--ui-info) 6%, var(--ui-surface-default));
311
315
  }
312
316
 
313
317
  [data-component~="ui-card"][data-ui-card-state~="tone=success"] {
314
318
  border-color: color-mix(in srgb, var(--ui-success) 25%, var(--ui-border-default));
315
- background: color-mix(in srgb, var(--ui-success) 6%, var(--ui-surface-default));
319
+ --_ui-card-surface: color-mix(in srgb, var(--ui-success) 6%, var(--ui-surface-default));
316
320
  }
317
321
 
318
322
  [data-component~="ui-card"][data-ui-card-state~="tone=warning"] {
319
323
  border-color: color-mix(in srgb, var(--ui-warning) 25%, var(--ui-border-default));
320
- background: color-mix(in srgb, var(--ui-warning) 6%, var(--ui-surface-default));
324
+ --_ui-card-surface: color-mix(in srgb, var(--ui-warning) 6%, var(--ui-surface-default));
321
325
  }
322
326
 
323
327
  [data-component~="ui-card"][data-ui-card-state~="variant=subtle"]:is([data-ui-card-state~="tone=accent"], [data-ui-card-state~="tone=info"], [data-ui-card-state~="tone=success"], [data-ui-card-state~="tone=warning"]) {
@@ -327,7 +331,24 @@ const hostState = computed(() =>
327
331
  [data-component~="ui-card"][data-ui-card-state~="tone=danger"] {
328
332
  border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
329
333
  border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
330
- background: var(--ui-danger-soft);
334
+ --_ui-card-surface: var(--ui-danger-soft);
335
+ }
336
+
337
+ /* A colored panel shades rows in its own hue, without changing button intent. */
338
+ [data-component~="ui-card"][data-ui-card-state~="tone=accent"],
339
+ [data-component~="ui-card"][data-ui-card-state~="tone=info"],
340
+ [data-component~="ui-card"][data-ui-card-state~="tone=success"],
341
+ [data-component~="ui-card"][data-ui-card-state~="tone=warning"],
342
+ [data-component~="ui-card"][data-ui-card-state~="tone=danger"] {
343
+ --_ui-selection-context-surface: light-dark(
344
+ oklch(from var(--_ui-card-surface) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
345
+ oklch(from var(--_ui-card-surface) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
346
+ );
347
+ --_ui-selection-context-border: light-dark(
348
+ oklch(from var(--_ui-card-surface) calc(l - 0.085) calc(max(c, min(0.045, c * 3))) h),
349
+ oklch(from var(--_ui-card-surface) calc(l + 0.085) calc(max(c, min(0.045, c * 3))) h)
350
+ );
351
+ --_ui-selection-context-text: var(--ui-text-primary);
331
352
  }
332
353
 
333
354
  [data-component~="ui-card"][data-ui-card-state~="size=sm"] {
package/vue/UiListItem.vue CHANGED
@@ -283,8 +283,9 @@ const hostState = computed(() =>
283
283
  [data-component~="ui-list-item"]:where(:has(.title a[href])):hover,
284
284
  [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"],
285
285
  [data-component~="ui-list-item"][data-ui-list-item-state~="current"] {
286
- background: var(--ui-selection-surface);
287
- box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
286
+ background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
287
+ box-shadow: inset 0 0 0 var(--ui-border-width)
288
+ var(--_ui-selection-context-border, var(--ui-selection-border));
288
289
  }
289
290
 
290
291
  [data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"]:where(:has(.title
@@ -293,7 +294,7 @@ const hostState = computed(() =>
293
294
  }
294
295
 
295
296
  [data-component~="ui-list-item"][data-ui-list-item-state~="current"] {
296
- color: var(--ui-selection-text);
297
+ color: var(--_ui-selection-context-text, var(--ui-selection-text));
297
298
  }
298
299
 
299
300
  /* Framed cards already have their own edge; the stronger focus ring stays separate. */
@@ -319,7 +320,7 @@ const hostState = computed(() =>
319
320
  }
320
321
 
321
322
  [data-component~="ui-list-item"][data-ui-list-item-state~="current"] .leading {
322
- color: var(--ui-selection-text);
323
+ color: var(--_ui-selection-context-text, var(--ui-selection-text));
323
324
  }
324
325
 
325
326
  /* An explicitly independent leading control sits above the stretched row link. */
package/vue/UiNavItem.vue CHANGED
@@ -423,7 +423,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
423
423
  }
424
424
 
425
425
  [data-component~="ui-nav-item"]:hover:not([aria-current]) {
426
- background: var(--ui-nav-hover-surface);
426
+ background: var(--_ui-selection-context-surface, var(--ui-nav-hover-surface));
427
427
  color: var(--ui-text-primary);
428
428
  }
429
429
 
@@ -435,13 +435,17 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
435
435
  }
436
436
 
437
437
  [data-component~="ui-nav-item"][aria-current] {
438
- background: var(--ui-nav-item-current-surface, var(--ui-selection-surface));
439
- color: var(--ui-selection-text);
438
+ background: var(
439
+ --ui-nav-item-current-surface,
440
+ var(--_ui-selection-context-surface, var(--ui-selection-surface))
441
+ );
442
+ color: var(--_ui-selection-context-text, var(--ui-selection-text));
440
443
  }
441
444
 
442
445
  /* A complete inset edge separates pale fills without changing rail geometry. */
443
446
  [data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=surface"]:is(:hover, [aria-current]) {
444
- box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
447
+ box-shadow: inset 0 0 0 var(--ui-border-width)
448
+ var(--_ui-selection-context-border, var(--ui-selection-border));
445
449
  }
446
450
 
447
451
  [data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"] {
package/vue/UiSearchResultRow.vue CHANGED
@@ -236,16 +236,16 @@ const hostState = computed(() =>
236
236
  [data-component~="ui-search-result-row"]:hover:enabled {
237
237
  background: var(
238
238
  --ui-search-result-row-hover-surface,
239
- color-mix(in srgb, var(--ui-surface) 85%, black 3%)
239
+ var(--_ui-selection-context-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%))
240
240
  );
241
241
  }
242
242
 
243
243
  [data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"] {
244
244
  background: var(
245
245
  --ui-search-result-row-selected-bg,
246
- var(--ui-selection-surface)
246
+ var(--_ui-selection-context-surface, var(--ui-selection-surface))
247
247
  );
248
- color: var(--ui-selection-text);
248
+ color: var(--_ui-selection-context-text, var(--ui-selection-text));
249
249
  }
250
250
 
251
251
  [data-component~="ui-search-result-row"]:focus-visible {
package/vue/UiSection.vue CHANGED
@@ -165,6 +165,9 @@ const hostState = computed(() =>
165
165
  }
166
166
 
167
167
  [data-component~="ui-section"][data-ui-section-state~="variant=card"] {
168
+ --_ui-selection-context-surface: initial;
169
+ --_ui-selection-context-border: initial;
170
+ --_ui-selection-context-text: initial;
168
171
  padding: var(--ui-space-5);
169
172
  border: var(--ui-border-width) solid var(--ui-border-strong);
170
173
  border-radius: var(--ui-radius-lg);
@@ -177,6 +180,15 @@ const hostState = computed(() =>
177
180
  }
178
181
 
179
182
  [data-component~="ui-section"][data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"] {
183
+ --_ui-selection-context-surface: light-dark(
184
+ oklch(from var(--ui-danger-soft) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
185
+ oklch(from var(--ui-danger-soft) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
186
+ );
187
+ --_ui-selection-context-border: light-dark(
188
+ oklch(from var(--ui-danger-soft) calc(l - 0.085) calc(max(c, min(0.045, c * 3))) h),
189
+ oklch(from var(--ui-danger-soft) calc(l + 0.085) calc(max(c, min(0.045, c * 3))) h)
190
+ );
191
+ --_ui-selection-context-text: var(--ui-text-primary);
180
192
  border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
181
193
  border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
182
194
  background: var(--ui-danger-soft);
package/vue/UiTreeItem.vue CHANGED
@@ -777,20 +777,22 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
777
777
  .row:hover,
778
778
  .row:focus-within {
779
779
  color: var(--ui-text-primary);
780
- background: var(--ui-surface-muted);
781
- box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
780
+ background: var(--_ui-selection-context-surface, var(--ui-surface-muted));
781
+ box-shadow: inset 0 0 0 var(--ui-border-width)
782
+ var(--_ui-selection-context-border, var(--ui-selection-border));
782
783
  }
783
784
 
784
785
  /* Selection is the same surface recipe as destination and choice rows. */
785
786
  [data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] > .row {
786
- color: var(--ui-selection-text);
787
- background: var(--ui-selection-surface);
788
- box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
787
+ color: var(--_ui-selection-context-text, var(--ui-selection-text));
788
+ background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
789
+ box-shadow: inset 0 0 0 var(--ui-border-width)
790
+ var(--_ui-selection-context-border, var(--ui-selection-border));
789
791
  }
790
792
  [data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"]:not([aria-disabled="true"])
791
793
  > .row
792
794
  > .leading {
793
- color: var(--ui-selection-text);
795
+ color: var(--_ui-selection-context-text, var(--ui-selection-text));
794
796
  }
795
797
 
796
798
  [data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row {
package/vue/chunks/UiCallout.js CHANGED
@@ -160,6 +160,6 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
160
160
  }]]);
161
161
  };
162
162
  }
163
- }), [["__scopeId", "data-v-ca7a11cb"]]);
163
+ }), [["__scopeId", "data-v-c8674799"]]);
164
164
  //#endregion
165
165
  export { UiCallout_default as t };
package/vue/chunks/UiCard.js CHANGED
@@ -119,7 +119,7 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
119
119
  },
120
120
  required: false,
121
121
  target: { attribute: "tone" },
122
- description: "accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Tone never changes child\n controls.",
122
+ description: "accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Row highlights follow the\n surface hue; action controls retain their own intent.",
123
123
  values: [
124
124
  "neutral",
125
125
  "accent",
@@ -274,6 +274,6 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
274
274
  }]]);
275
275
  };
276
276
  }
277
- }), [["__scopeId", "data-v-aeaaae4a"]]);
277
+ }), [["__scopeId", "data-v-150bfc3d"]]);
278
278
  //#endregion
279
279
  export { UiCard_default as t };
package/vue/chunks/UiListItem.js CHANGED
@@ -203,6 +203,6 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
203
203
  }]]);
204
204
  };
205
205
  }
206
- }), [["__scopeId", "data-v-deeac109"]]);
206
+ }), [["__scopeId", "data-v-2363907e"]]);
207
207
  //#endregion
208
208
  export { UiListItem_default as t };
package/vue/chunks/UiNavItem.js CHANGED
@@ -357,6 +357,6 @@ var UiNavItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
357
357
  }]]);
358
358
  };
359
359
  }
360
- }), [["__scopeId", "data-v-e4b23866"]]);
360
+ }), [["__scopeId", "data-v-f82c0272"]]);
361
361
  //#endregion
362
362
  export { UiNavItem_default as t };
package/vue/chunks/UiSearchResultRow.js CHANGED
@@ -144,6 +144,6 @@ var UiSearchResultRow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
144
144
  }]]);
145
145
  };
146
146
  }
147
- }), [["__scopeId", "data-v-6ea384f9"]]);
147
+ }), [["__scopeId", "data-v-3f6b9d17"]]);
148
148
  //#endregion
149
149
  export { UiSearchResultRow_default as t };
package/vue/chunks/UiSection.js CHANGED
@@ -138,6 +138,6 @@ var UiSection_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
138
138
  }]]);
139
139
  };
140
140
  }
141
- }), [["__scopeId", "data-v-efbbec43"]]);
141
+ }), [["__scopeId", "data-v-93e8cb94"]]);
142
142
  //#endregion
143
143
  export { UiSection_default as t };
package/vue/chunks/UiTreeItem.js CHANGED
@@ -699,6 +699,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
699
699
  }]]);
700
700
  };
701
701
  }
702
- }), [["__scopeId", "data-v-b69b9249"]]);
702
+ }), [["__scopeId", "data-v-8f2cc947"]]);
703
703
  //#endregion
704
704
  export { UiTreeItem_default as t };