@threadlabs/looma 0.26.3 → 0.26.4

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 (15) hide show
  1. package/components/ui-callout/ui-callout.html +2 -1
  2. package/components/ui-toast/ui-toast.html +13 -7
  3. package/components/ui-toast-region/ui-toast-region.html +18 -7
  4. package/dist/index.js +1 -1
  5. package/package.json +1 -1
  6. package/styles/ui-callout.css +2 -1
  7. package/styles/ui-toast-region.css +18 -7
  8. package/styles/ui-toast.css +13 -7
  9. package/vue/UiCallout.vue +4 -2
  10. package/vue/UiToast.vue +16 -8
  11. package/vue/UiToastRegion.vue +18 -7
  12. package/vue/chunks/UiCallout.js +1 -1
  13. package/vue/chunks/UiToast.js +1 -1
  14. package/vue/chunks/UiToastRegion.js +1 -1
  15. package/vue/components.css +88 -66
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threadlabs/looma",
3
- "version": "0.26.3",
3
+ "version": "0.26.4",
4
4
  "type": "module",
5
5
  "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
6
6
  "license": "MIT",
package/styles/ui-callout.css CHANGED
@@ -66,7 +66,8 @@
66
66
  padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
67
67
  border: var(--ui-callout-border-width, var(--ui-border-width)) solid
68
68
  color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
69
- border-inline-start: var(--ui-callout-leading-border-width, var(--ui-accent-line-width)) solid var(--ui-callout-border, var(--_callout-border));
69
+ border-inline-start: var(--ui-callout-leading-border-width, var(--ui-callout-border-width, var(--ui-border-width))) solid
70
+ color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
70
71
  border-radius: var(--ui-radius-md);
71
72
  background: var(--ui-callout-surface, var(--_callout-surface));
72
73
  color: var(--ui-callout-text, var(--ui-text-primary));
package/styles/ui-toast-region.css CHANGED
@@ -125,30 +125,42 @@
125
125
  }
126
126
 
127
127
  .toast {
128
+ --_ui-toast-region-accent: var(--ui-border-strong);
129
+ --_ui-toast-region-tone-surface: var(--ui-surface-muted);
128
130
  display: grid;
129
131
  grid-template-columns: 1fr auto;
130
132
  gap: var(--ui-space-2);
131
133
  align-items: start;
132
- border: var(--ui-border-width) solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-strong)));
134
+ border: var(--ui-border-width) solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--_ui-toast-region-accent)));
133
135
  border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
134
136
  padding: var(--ui-space-3) var(--ui-space-4);
135
- background: var(--_ui-toast-region-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
137
+ /* The close button's internal space supplies the rest of the trailing inset. */
138
+ padding-inline-end: var(--ui-space-2);
139
+ background: var(--_ui-toast-region-surface, var(--ui-overlay-surface, var(--_ui-toast-region-tone-surface)));
136
140
  color: var(--ui-text-primary);
141
+ font-family: var(--ui-font-family-sans);
142
+ font-size: var(--ui-font-size-sm);
143
+ font-weight: var(--ui-font-normal);
144
+ line-height: var(--ui-line-height-md);
137
145
  box-shadow: var(--_ui-toast-region-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
138
146
  animation: ui-toast-enter var(--_ui-toast-region-enter-duration, 0.32s) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
139
147
  }
140
148
 
141
149
  .toast[data-tone="info"] {
142
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-info-solid);
150
+ --_ui-toast-region-accent: var(--ui-info-solid);
151
+ --_ui-toast-region-tone-surface: var(--ui-info-soft);
143
152
  }
144
153
  .toast[data-tone="success"] {
145
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-success-solid);
154
+ --_ui-toast-region-accent: var(--ui-success-solid);
155
+ --_ui-toast-region-tone-surface: var(--ui-success-soft);
146
156
  }
147
157
  .toast[data-tone="warning"] {
148
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-warning-solid);
158
+ --_ui-toast-region-accent: var(--ui-warning-solid);
159
+ --_ui-toast-region-tone-surface: var(--ui-warning-soft);
149
160
  }
150
161
  .toast[data-tone="danger"] {
151
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger-solid);
162
+ --_ui-toast-region-accent: var(--ui-danger-solid);
163
+ --_ui-toast-region-tone-surface: var(--ui-danger-soft);
152
164
  }
153
165
 
154
166
  /* Leaving slides on down and fades; the controller removes the toast when this ends. */
@@ -178,7 +190,6 @@
178
190
 
179
191
  .dismiss {
180
192
  align-self: center;
181
- margin-inline-end: calc(var(--ui-space-2) * -1);
182
193
  }
183
194
 
184
195
  /* A component that sets its display still honours the hidden attribute on its root. */
package/styles/ui-toast.css CHANGED
@@ -24,6 +24,7 @@
24
24
 
25
25
  :scope {
26
26
  --_ui-toast-accent: var(--ui-border-strong);
27
+ --_ui-toast-surface: var(--ui-surface-muted);
27
28
 
28
29
  display: flex;
29
30
  align-items: center;
@@ -32,26 +33,35 @@
32
33
  inline-size: 100%;
33
34
  margin: 0;
34
35
  padding: var(--ui-space-3) var(--ui-space-4);
35
- border: var(--ui-border-width) solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-strong)));
36
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-toast-accent, var(--_ui-toast-accent));
36
+ /* The close button's internal space supplies the rest of the trailing inset. */
37
+ padding-inline-end: var(--ui-space-2);
38
+ border: var(--ui-border-width) solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-toast-accent, var(--_ui-toast-accent))));
37
39
  border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
38
- background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
40
+ background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--_ui-toast-surface)));
39
41
  color: var(--ui-text-primary);
42
+ font-family: var(--ui-font-family-sans);
43
+ font-size: var(--ui-font-size-sm);
44
+ font-weight: var(--ui-font-normal);
45
+ line-height: var(--ui-line-height-md);
40
46
  box-shadow: var(--ui-toast-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
41
47
  pointer-events: auto;
42
48
  }
43
49
 
44
50
  :scope[data-ui-toast-state~="tone=info"] {
45
51
  --_ui-toast-accent: var(--ui-info-solid);
52
+ --_ui-toast-surface: var(--ui-info-soft);
46
53
  }
47
54
  :scope[data-ui-toast-state~="tone=success"] {
48
55
  --_ui-toast-accent: var(--ui-success-solid);
56
+ --_ui-toast-surface: var(--ui-success-soft);
49
57
  }
50
58
  :scope[data-ui-toast-state~="tone=warning"] {
51
59
  --_ui-toast-accent: var(--ui-warning-solid);
60
+ --_ui-toast-surface: var(--ui-warning-soft);
52
61
  }
53
62
  :scope[data-ui-toast-state~="tone=danger"] {
54
63
  --_ui-toast-accent: var(--ui-danger-solid);
64
+ --_ui-toast-surface: var(--ui-danger-soft);
55
65
  }
56
66
 
57
67
  .message {
@@ -61,10 +71,6 @@
61
71
  .action:not(:has(> *)) {
62
72
  display: none;
63
73
  }
64
- .dismiss {
65
- margin-inline-end: calc(var(--ui-space-2) * -1);
66
- }
67
-
68
74
  :scope[hidden] {
69
75
  display: none;
70
76
  }
package/vue/UiCallout.vue CHANGED
@@ -245,8 +245,10 @@ const hostState = computed(() =>
245
245
  padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
246
246
  border: var(--ui-callout-border-width, var(--ui-border-width)) solid
247
247
  color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
248
- border-inline-start: var(--ui-callout-leading-border-width, var(--ui-accent-line-width)) solid
249
- var(--ui-callout-border, var(--_callout-border));
248
+ border-inline-start: var(
249
+ --ui-callout-leading-border-width,
250
+ var(--ui-callout-border-width, var(--ui-border-width))
251
+ ) solid color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
250
252
  border-radius: var(--ui-radius-md);
251
253
  background: var(--ui-callout-surface, var(--_callout-surface));
252
254
  color: var(--ui-callout-text, var(--ui-text-primary));
package/vue/UiToast.vue CHANGED
@@ -234,6 +234,7 @@ function attribute(value: unknown): any {
234
234
 
235
235
  [data-component~="ui-toast"] {
236
236
  --_ui-toast-accent: var(--ui-border-strong);
237
+ --_ui-toast-surface: var(--ui-surface-muted);
237
238
 
238
239
  display: flex;
239
240
  align-items: center;
@@ -242,13 +243,20 @@ function attribute(value: unknown): any {
242
243
  inline-size: 100%;
243
244
  margin: 0;
244
245
  padding: var(--ui-space-3) var(--ui-space-4);
246
+ /* The close button's internal space supplies the rest of the trailing inset. */
247
+ padding-inline-end: var(--ui-space-2);
245
248
  border: var(--ui-border-width) solid
246
- var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-strong)));
247
- border-inline-start: var(--ui-accent-line-width) solid
248
- var(--ui-toast-accent, var(--_ui-toast-accent));
249
+ var(
250
+ --ui-toast-border,
251
+ var(--ui-overlay-border, var(--ui-toast-accent, var(--_ui-toast-accent)))
252
+ );
249
253
  border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
250
- background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
254
+ background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--_ui-toast-surface)));
251
255
  color: var(--ui-text-primary);
256
+ font-family: var(--ui-font-family-sans);
257
+ font-size: var(--ui-font-size-sm);
258
+ font-weight: var(--ui-font-normal);
259
+ line-height: var(--ui-line-height-md);
252
260
  box-shadow: var(
253
261
  --ui-toast-shadow,
254
262
  var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
@@ -258,15 +266,19 @@ function attribute(value: unknown): any {
258
266
 
259
267
  [data-component~="ui-toast"][data-ui-toast-state~="tone=info"] {
260
268
  --_ui-toast-accent: var(--ui-info-solid);
269
+ --_ui-toast-surface: var(--ui-info-soft);
261
270
  }
262
271
  [data-component~="ui-toast"][data-ui-toast-state~="tone=success"] {
263
272
  --_ui-toast-accent: var(--ui-success-solid);
273
+ --_ui-toast-surface: var(--ui-success-soft);
264
274
  }
265
275
  [data-component~="ui-toast"][data-ui-toast-state~="tone=warning"] {
266
276
  --_ui-toast-accent: var(--ui-warning-solid);
277
+ --_ui-toast-surface: var(--ui-warning-soft);
267
278
  }
268
279
  [data-component~="ui-toast"][data-ui-toast-state~="tone=danger"] {
269
280
  --_ui-toast-accent: var(--ui-danger-solid);
281
+ --_ui-toast-surface: var(--ui-danger-soft);
270
282
  }
271
283
 
272
284
  .message {
@@ -276,10 +288,6 @@ function attribute(value: unknown): any {
276
288
  .action:not(:has(> *)) {
277
289
  display: none;
278
290
  }
279
- .dismiss {
280
- margin-inline-end: calc(var(--ui-space-2) * -1);
281
- }
282
-
283
291
  [data-component~="ui-toast"][hidden] {
284
292
  display: none;
285
293
  }
package/vue/UiToastRegion.vue CHANGED
@@ -460,19 +460,27 @@ function uniqueKeys<T>(
460
460
  }
461
461
 
462
462
  .toast {
463
+ --_ui-toast-region-accent: var(--ui-border-strong);
464
+ --_ui-toast-region-tone-surface: var(--ui-surface-muted);
463
465
  display: grid;
464
466
  grid-template-columns: 1fr auto;
465
467
  gap: var(--ui-space-2);
466
468
  align-items: start;
467
469
  border: var(--ui-border-width) solid
468
- var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-strong)));
470
+ var(--_ui-toast-region-border, var(--ui-overlay-border, var(--_ui-toast-region-accent)));
469
471
  border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
470
472
  padding: var(--ui-space-3) var(--ui-space-4);
473
+ /* The close button's internal space supplies the rest of the trailing inset. */
474
+ padding-inline-end: var(--ui-space-2);
471
475
  background: var(
472
476
  --_ui-toast-region-surface,
473
- var(--ui-overlay-surface, var(--ui-surface-elevated))
477
+ var(--ui-overlay-surface, var(--_ui-toast-region-tone-surface))
474
478
  );
475
479
  color: var(--ui-text-primary);
480
+ font-family: var(--ui-font-family-sans);
481
+ font-size: var(--ui-font-size-sm);
482
+ font-weight: var(--ui-font-normal);
483
+ line-height: var(--ui-line-height-md);
476
484
  box-shadow: var(
477
485
  --_ui-toast-region-shadow,
478
486
  var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
@@ -482,16 +490,20 @@ function uniqueKeys<T>(
482
490
  }
483
491
 
484
492
  .toast[data-tone="info"] {
485
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-info-solid);
493
+ --_ui-toast-region-accent: var(--ui-info-solid);
494
+ --_ui-toast-region-tone-surface: var(--ui-info-soft);
486
495
  }
487
496
  .toast[data-tone="success"] {
488
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-success-solid);
497
+ --_ui-toast-region-accent: var(--ui-success-solid);
498
+ --_ui-toast-region-tone-surface: var(--ui-success-soft);
489
499
  }
490
500
  .toast[data-tone="warning"] {
491
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-warning-solid);
501
+ --_ui-toast-region-accent: var(--ui-warning-solid);
502
+ --_ui-toast-region-tone-surface: var(--ui-warning-soft);
492
503
  }
493
504
  .toast[data-tone="danger"] {
494
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger-solid);
505
+ --_ui-toast-region-accent: var(--ui-danger-solid);
506
+ --_ui-toast-region-tone-surface: var(--ui-danger-soft);
495
507
  }
496
508
 
497
509
  /* Leaving slides on down and fades; the controller removes the toast when this ends. */
@@ -567,7 +579,6 @@ function uniqueKeys<T>(
567
579
 
568
580
  .dismiss {
569
581
  align-self: center;
570
- margin-inline-end: calc(var(--ui-space-2) * -1);
571
582
  }
572
583
 
573
584
  /* A component that sets its display still honours the hidden attribute on its root. */
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-948263db"]]);
163
+ }), [["__scopeId", "data-v-ca7a11cb"]]);
164
164
  //#endregion
165
165
  export { UiCallout_default as t };
package/vue/chunks/UiToast.js CHANGED
@@ -174,6 +174,6 @@ var UiToast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
174
174
  }]]);
175
175
  };
176
176
  }
177
- }), [["__scopeId", "data-v-241766bc"]]);
177
+ }), [["__scopeId", "data-v-af4b9641"]]);
178
178
  //#endregion
179
179
  export { UiToast_default as t };
package/vue/chunks/UiToastRegion.js CHANGED
@@ -313,6 +313,6 @@ var UiToastRegion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
313
313
  }]]);
314
314
  };
315
315
  }
316
- }), [["__scopeId", "data-v-4234b07d"]]);
316
+ }), [["__scopeId", "data-v-1a7d67f7"]]);
317
317
  //#endregion
318
318
  export { UiToastRegion_default as t };
package/vue/components.css CHANGED
@@ -1345,7 +1345,7 @@ html[data-ui-input-modality="touch"]
1345
1345
  syntax: "*";
1346
1346
  inherits: false;
1347
1347
  }
1348
- [data-component~="ui-callout"][data-v-948263db] {
1348
+ [data-component~="ui-callout"][data-v-ca7a11cb] {
1349
1349
  /* Hooks do not inherit, so the parts below read them from the root. */
1350
1350
  --_ui-callout-icon-column: var(--ui-callout-icon-column);
1351
1351
  --_ui-callout-icon: var(--ui-callout-icon);
@@ -1365,8 +1365,10 @@ html[data-ui-input-modality="touch"]
1365
1365
  padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
1366
1366
  border: var(--ui-callout-border-width, var(--ui-border-width)) solid
1367
1367
  color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
1368
- border-inline-start: var(--ui-callout-leading-border-width, var(--ui-accent-line-width)) solid
1369
- var(--ui-callout-border, var(--_callout-border));
1368
+ border-inline-start: var(
1369
+ --ui-callout-leading-border-width,
1370
+ var(--ui-callout-border-width, var(--ui-border-width))
1371
+ ) solid color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
1370
1372
  border-radius: var(--ui-radius-md);
1371
1373
  background: var(--ui-callout-surface, var(--_callout-surface));
1372
1374
  color: var(--ui-callout-text, var(--ui-text-primary));
@@ -1377,44 +1379,44 @@ html[data-ui-input-modality="touch"]
1377
1379
  }
1378
1380
 
1379
1381
  /* One line box tall, so the icon centres on the first line of text. */
1380
- .icon[data-v-948263db] {
1382
+ .icon[data-v-ca7a11cb] {
1381
1383
  display: grid;
1382
1384
  place-items: center;
1383
1385
  inline-size: var(--_ui-callout-icon-column, 1.125rem);
1384
1386
  block-size: 1lh;
1385
1387
  color: var(--_ui-callout-icon, var(--_callout-icon));
1386
1388
  }
1387
- .icon svg[data-v-948263db] {
1389
+ .icon svg[data-v-ca7a11cb] {
1388
1390
  inline-size: var(--_ui-callout-icon-size, 1.125rem);
1389
1391
  block-size: var(--_ui-callout-icon-size, 1.125rem);
1390
1392
  }
1391
- .content[data-v-948263db] {
1393
+ .content[data-v-ca7a11cb] {
1392
1394
  min-inline-size: 0;
1393
1395
  }
1394
- [data-component~="ui-callout"][data-ui-callout-state~="tone=neutral"][data-v-948263db],
1395
- [data-component~="ui-callout"][data-ui-callout-state~="tone=note"][data-v-948263db] {
1396
+ [data-component~="ui-callout"][data-ui-callout-state~="tone=neutral"][data-v-ca7a11cb],
1397
+ [data-component~="ui-callout"][data-ui-callout-state~="tone=note"][data-v-ca7a11cb] {
1396
1398
  --_callout-surface: var(--ui-surface-muted);
1397
1399
  --_callout-border: var(--ui-border-strong);
1398
1400
  --_callout-icon: var(--ui-text-secondary);
1399
1401
  }
1400
- [data-component~="ui-callout"][data-ui-callout-state~="tone=warning"][data-v-948263db] {
1402
+ [data-component~="ui-callout"][data-ui-callout-state~="tone=warning"][data-v-ca7a11cb] {
1401
1403
  --_callout-surface: var(--ui-warning-soft);
1402
1404
  --_callout-border: var(--ui-warning-solid);
1403
1405
  --_callout-icon: var(--ui-warning-solid);
1404
1406
  }
1405
- [data-component~="ui-callout"][data-ui-callout-state~="tone=success"][data-v-948263db] {
1407
+ [data-component~="ui-callout"][data-ui-callout-state~="tone=success"][data-v-ca7a11cb] {
1406
1408
  --_callout-surface: var(--ui-success-soft);
1407
1409
  --_callout-border: var(--ui-success-solid);
1408
1410
  --_callout-icon: var(--ui-success-solid);
1409
1411
  }
1410
- [data-component~="ui-callout"][data-ui-callout-state~="tone=danger"][data-v-948263db] {
1412
+ [data-component~="ui-callout"][data-ui-callout-state~="tone=danger"][data-v-ca7a11cb] {
1411
1413
  --_callout-surface: var(--ui-danger-soft);
1412
1414
  --_callout-border: var(--ui-danger-solid);
1413
1415
  --_callout-icon: var(--ui-danger-solid);
1414
1416
  }
1415
1417
 
1416
1418
  /* A link in the callout's text is underlined, so it reads as a link by more than colour. */
1417
- .content a[data-v-948263db-s] {
1419
+ .content a[data-v-ca7a11cb-s] {
1418
1420
  color: var(--ui-accent-active);
1419
1421
  text-decoration: underline;
1420
1422
  text-decoration-thickness: 0.06em;
@@ -1422,7 +1424,7 @@ html[data-ui-input-modality="touch"]
1422
1424
  }
1423
1425
 
1424
1426
  /* A component that sets its display still honours the hidden attribute on its root. */
1425
- [data-component~="ui-callout"][hidden][data-v-948263db] {
1427
+ [data-component~="ui-callout"][hidden][data-v-ca7a11cb] {
1426
1428
  display: none;
1427
1429
  }
1428
1430
 
@@ -8749,8 +8751,9 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
8749
8751
  syntax: "*";
8750
8752
  inherits: false;
8751
8753
  }
8752
- [data-component~="ui-toast"][data-v-241766bc] {
8754
+ [data-component~="ui-toast"][data-v-af4b9641] {
8753
8755
  --_ui-toast-accent: var(--ui-border-strong);
8756
+ --_ui-toast-surface: var(--ui-surface-muted);
8754
8757
 
8755
8758
  display: flex;
8756
8759
  align-items: center;
@@ -8759,42 +8762,50 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
8759
8762
  inline-size: 100%;
8760
8763
  margin: 0;
8761
8764
  padding: var(--ui-space-3) var(--ui-space-4);
8765
+ /* The close button's internal space supplies the rest of the trailing inset. */
8766
+ padding-inline-end: var(--ui-space-2);
8762
8767
  border: var(--ui-border-width) solid
8763
- var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-strong)));
8764
- border-inline-start: var(--ui-accent-line-width) solid
8765
- var(--ui-toast-accent, var(--_ui-toast-accent));
8768
+ var(
8769
+ --ui-toast-border,
8770
+ var(--ui-overlay-border, var(--ui-toast-accent, var(--_ui-toast-accent)))
8771
+ );
8766
8772
  border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
8767
- background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
8773
+ background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--_ui-toast-surface)));
8768
8774
  color: var(--ui-text-primary);
8775
+ font-family: var(--ui-font-family-sans);
8776
+ font-size: var(--ui-font-size-sm);
8777
+ font-weight: var(--ui-font-normal);
8778
+ line-height: var(--ui-line-height-md);
8769
8779
  box-shadow: var(
8770
8780
  --ui-toast-shadow,
8771
8781
  var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
8772
8782
  );
8773
8783
  pointer-events: auto;
8774
8784
  }
8775
- [data-component~="ui-toast"][data-ui-toast-state~="tone=info"][data-v-241766bc] {
8785
+ [data-component~="ui-toast"][data-ui-toast-state~="tone=info"][data-v-af4b9641] {
8776
8786
  --_ui-toast-accent: var(--ui-info-solid);
8787
+ --_ui-toast-surface: var(--ui-info-soft);
8777
8788
  }
8778
- [data-component~="ui-toast"][data-ui-toast-state~="tone=success"][data-v-241766bc] {
8789
+ [data-component~="ui-toast"][data-ui-toast-state~="tone=success"][data-v-af4b9641] {
8779
8790
  --_ui-toast-accent: var(--ui-success-solid);
8791
+ --_ui-toast-surface: var(--ui-success-soft);
8780
8792
  }
8781
- [data-component~="ui-toast"][data-ui-toast-state~="tone=warning"][data-v-241766bc] {
8793
+ [data-component~="ui-toast"][data-ui-toast-state~="tone=warning"][data-v-af4b9641] {
8782
8794
  --_ui-toast-accent: var(--ui-warning-solid);
8795
+ --_ui-toast-surface: var(--ui-warning-soft);
8783
8796
  }
8784
- [data-component~="ui-toast"][data-ui-toast-state~="tone=danger"][data-v-241766bc] {
8797
+ [data-component~="ui-toast"][data-ui-toast-state~="tone=danger"][data-v-af4b9641] {
8785
8798
  --_ui-toast-accent: var(--ui-danger-solid);
8799
+ --_ui-toast-surface: var(--ui-danger-soft);
8786
8800
  }
8787
- .message[data-v-241766bc] {
8801
+ .message[data-v-af4b9641] {
8788
8802
  min-inline-size: 0;
8789
8803
  flex: 1;
8790
8804
  }
8791
- .action[data-v-241766bc]:not(:has(> *)) {
8805
+ .action[data-v-af4b9641]:not(:has(> *)) {
8792
8806
  display: none;
8793
8807
  }
8794
- .dismiss[data-v-241766bc] {
8795
- margin-inline-end: calc(var(--ui-space-2) * -1);
8796
- }
8797
- [data-component~="ui-toast"][hidden][data-v-241766bc] {
8808
+ [data-component~="ui-toast"][hidden][data-v-af4b9641] {
8798
8809
  display: none;
8799
8810
  }
8800
8811
 
@@ -8823,7 +8834,7 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
8823
8834
  syntax: "*";
8824
8835
  inherits: false;
8825
8836
  }
8826
- [data-component~="ui-toast-region"][data-v-4234b07d] {
8837
+ [data-component~="ui-toast-region"][data-v-1a7d67f7] {
8827
8838
  /* Hooks do not inherit, so the parts below read them from the root. */
8828
8839
  --_ui-toast-region-surface: var(--ui-toast-region-surface);
8829
8840
  --_ui-toast-region-border: var(--ui-toast-region-border);
@@ -8853,81 +8864,93 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
8853
8864
  box-shadow: none;
8854
8865
  pointer-events: none;
8855
8866
  }
8856
- [data-component~="ui-toast-region"][data-v-4234b07d]:not(:popover-open) {
8867
+ [data-component~="ui-toast-region"][data-v-1a7d67f7]:not(:popover-open) {
8857
8868
  display: none;
8858
8869
  }
8859
- [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=top-start"][data-v-4234b07d],
8860
- [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"][data-v-4234b07d] {
8870
+ [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=top-start"][data-v-1a7d67f7],
8871
+ [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"][data-v-1a7d67f7] {
8861
8872
  left: auto;
8862
8873
  right: auto;
8863
8874
  inset-inline-start: calc(var(--ui-space-4) + env(safe-area-inset-left));
8864
8875
  transform: none;
8865
8876
  }
8866
- [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=top-end"][data-v-4234b07d],
8867
- [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"][data-v-4234b07d] {
8877
+ [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=top-end"][data-v-1a7d67f7],
8878
+ [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"][data-v-1a7d67f7] {
8868
8879
  left: auto;
8869
8880
  right: auto;
8870
8881
  inset-inline-end: calc(var(--ui-space-4) + env(safe-area-inset-right));
8871
8882
  transform: none;
8872
8883
  }
8873
- [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom"][data-v-4234b07d],
8874
- [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"][data-v-4234b07d],
8875
- [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"][data-v-4234b07d] {
8884
+ [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom"][data-v-1a7d67f7],
8885
+ [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"][data-v-1a7d67f7],
8886
+ [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"][data-v-1a7d67f7] {
8876
8887
  top: auto;
8877
8888
  bottom: calc(var(--ui-space-4) + env(safe-area-inset-bottom));
8878
8889
  }
8879
- [data-component~="ui-toast-region"] > .toast[data-v-4234b07d],
8880
- [data-component~="ui-toast-region"] > [data-v-4234b07d-s] {
8890
+ [data-component~="ui-toast-region"] > .toast[data-v-1a7d67f7],
8891
+ [data-component~="ui-toast-region"] > [data-v-1a7d67f7-s] {
8881
8892
  pointer-events: auto;
8882
8893
  }
8883
- .toast[data-v-4234b07d] {
8894
+ .toast[data-v-1a7d67f7] {
8895
+ --_ui-toast-region-accent: var(--ui-border-strong);
8896
+ --_ui-toast-region-tone-surface: var(--ui-surface-muted);
8884
8897
  display: grid;
8885
8898
  grid-template-columns: 1fr auto;
8886
8899
  gap: var(--ui-space-2);
8887
8900
  align-items: start;
8888
8901
  border: var(--ui-border-width) solid
8889
- var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-strong)));
8902
+ var(--_ui-toast-region-border, var(--ui-overlay-border, var(--_ui-toast-region-accent)));
8890
8903
  border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
8891
8904
  padding: var(--ui-space-3) var(--ui-space-4);
8905
+ /* The close button's internal space supplies the rest of the trailing inset. */
8906
+ padding-inline-end: var(--ui-space-2);
8892
8907
  background: var(
8893
8908
  --_ui-toast-region-surface,
8894
- var(--ui-overlay-surface, var(--ui-surface-elevated))
8909
+ var(--ui-overlay-surface, var(--_ui-toast-region-tone-surface))
8895
8910
  );
8896
8911
  color: var(--ui-text-primary);
8912
+ font-family: var(--ui-font-family-sans);
8913
+ font-size: var(--ui-font-size-sm);
8914
+ font-weight: var(--ui-font-normal);
8915
+ line-height: var(--ui-line-height-md);
8897
8916
  box-shadow: var(
8898
8917
  --_ui-toast-region-shadow,
8899
8918
  var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
8900
8919
  );
8901
- animation: ui-toast-enter-4234b07d var(--_ui-toast-region-enter-duration, 0.32s)
8920
+ animation: ui-toast-enter-1a7d67f7 var(--_ui-toast-region-enter-duration, 0.32s)
8902
8921
  var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
8903
8922
  }
8904
- .toast[data-tone="info"][data-v-4234b07d] {
8905
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-info-solid);
8923
+ .toast[data-tone="info"][data-v-1a7d67f7] {
8924
+ --_ui-toast-region-accent: var(--ui-info-solid);
8925
+ --_ui-toast-region-tone-surface: var(--ui-info-soft);
8906
8926
  }
8907
- .toast[data-tone="success"][data-v-4234b07d] {
8908
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-success-solid);
8927
+ .toast[data-tone="success"][data-v-1a7d67f7] {
8928
+ --_ui-toast-region-accent: var(--ui-success-solid);
8929
+ --_ui-toast-region-tone-surface: var(--ui-success-soft);
8909
8930
  }
8910
- .toast[data-tone="warning"][data-v-4234b07d] {
8911
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-warning-solid);
8931
+ .toast[data-tone="warning"][data-v-1a7d67f7] {
8932
+ --_ui-toast-region-accent: var(--ui-warning-solid);
8933
+ --_ui-toast-region-tone-surface: var(--ui-warning-soft);
8912
8934
  }
8913
- .toast[data-tone="danger"][data-v-4234b07d] {
8914
- border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger-solid);
8935
+ .toast[data-tone="danger"][data-v-1a7d67f7] {
8936
+ --_ui-toast-region-accent: var(--ui-danger-solid);
8937
+ --_ui-toast-region-tone-surface: var(--ui-danger-soft);
8915
8938
  }
8916
8939
 
8917
8940
  /* Leaving slides on down and fades; the controller removes the toast when this ends. */
8918
- .toast.closing[data-v-4234b07d] {
8919
- animation: ui-toast-exit-4234b07d var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
8941
+ .toast.closing[data-v-1a7d67f7] {
8942
+ animation: ui-toast-exit-1a7d67f7 var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
8920
8943
  pointer-events: none;
8921
8944
  }
8922
8945
  :is([data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom"], [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"], [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"])
8923
- .toast[data-v-4234b07d] {
8924
- animation-name: ui-toast-enter-bottom-4234b07d;
8946
+ .toast[data-v-1a7d67f7] {
8947
+ animation-name: ui-toast-enter-bottom-1a7d67f7;
8925
8948
  }
8926
8949
  :is([data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom"], [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"], [data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"])
8927
- .toast.closing[data-v-4234b07d] {
8928
- animation-name: ui-toast-exit-bottom-4234b07d;
8950
+ .toast.closing[data-v-1a7d67f7] {
8951
+ animation-name: ui-toast-exit-bottom-1a7d67f7;
8929
8952
  }
8930
- @keyframes ui-toast-enter-4234b07d {
8953
+ @keyframes ui-toast-enter-1a7d67f7 {
8931
8954
  from {
8932
8955
  opacity: 0;
8933
8956
  transform: translateY(-1rem);
@@ -8937,7 +8960,7 @@ to {
8937
8960
  transform: translateY(0);
8938
8961
  }
8939
8962
  }
8940
- @keyframes ui-toast-exit-4234b07d {
8963
+ @keyframes ui-toast-exit-1a7d67f7 {
8941
8964
  from {
8942
8965
  opacity: 1;
8943
8966
  transform: translateY(0);
@@ -8947,7 +8970,7 @@ to {
8947
8970
  transform: translateY(0.75rem);
8948
8971
  }
8949
8972
  }
8950
- @keyframes ui-toast-enter-bottom-4234b07d {
8973
+ @keyframes ui-toast-enter-bottom-1a7d67f7 {
8951
8974
  from {
8952
8975
  opacity: 0;
8953
8976
  transform: translateY(1rem);
@@ -8957,7 +8980,7 @@ to {
8957
8980
  transform: translateY(0);
8958
8981
  }
8959
8982
  }
8960
- @keyframes ui-toast-exit-bottom-4234b07d {
8983
+ @keyframes ui-toast-exit-bottom-1a7d67f7 {
8961
8984
  from {
8962
8985
  opacity: 1;
8963
8986
  transform: translateY(0);
@@ -8968,21 +8991,20 @@ to {
8968
8991
  }
8969
8992
  }
8970
8993
  @media (prefers-reduced-motion: reduce) {
8971
- .toast[data-v-4234b07d], .toast.closing[data-v-4234b07d] {
8994
+ .toast[data-v-1a7d67f7], .toast.closing[data-v-1a7d67f7] {
8972
8995
  animation: none;
8973
8996
  }
8974
8997
  }
8975
- .message[data-v-4234b07d] {
8998
+ .message[data-v-1a7d67f7] {
8976
8999
  min-inline-size: 0;
8977
9000
  align-self: center;
8978
9001
  }
8979
- .dismiss[data-v-4234b07d] {
9002
+ .dismiss[data-v-1a7d67f7] {
8980
9003
  align-self: center;
8981
- margin-inline-end: calc(var(--ui-space-2) * -1);
8982
9004
  }
8983
9005
 
8984
9006
  /* A component that sets its display still honours the hidden attribute on its root. */
8985
- [data-component~="ui-toast-region"][hidden][data-v-4234b07d] {
9007
+ [data-component~="ui-toast-region"][hidden][data-v-1a7d67f7] {
8986
9008
  display: none;
8987
9009
  }
8988
9010