@threadlabs/looma 0.26.2 → 0.26.4

package/vue/components.css

@@ -134,7 +134,7 @@ svg[data-v-abaeb064] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-avatar"][data-v-8b3c5fb3] {
+[data-component~="ui-avatar"][data-v-03720dc1] {
   --_ui-default-icon-size: 1.25rem;
   display: inline-grid;
   place-items: center;
@@ -156,13 +156,13 @@ svg[data-v-abaeb064] {
   line-height: 1;
   text-transform: uppercase;
 }
-[data-component~="ui-avatar"][data-ui-avatar-state~="size=sm"][data-v-8b3c5fb3] {
+[data-component~="ui-avatar"][data-ui-avatar-state~="size=sm"][data-v-03720dc1] {
   --_ui-default-icon-size: 1rem;
   inline-size: 1.75rem;
   block-size: 1.75rem;
   font-size: var(--ui-font-size-xs);
 }
-[data-component~="ui-avatar"][data-ui-avatar-state~="size=xs"][data-v-8b3c5fb3] {
+[data-component~="ui-avatar"][data-ui-avatar-state~="size=xs"][data-v-03720dc1] {
   --_ui-default-icon-size: 0.75rem;
   inline-size: 1.25rem;
   block-size: 1.25rem;
@@ -170,26 +170,29 @@ svg[data-v-abaeb064] {
   font-size: calc(var(--ui-font-size) * 0.5625);
   letter-spacing: 0.02em;
 }
-[data-component~="ui-avatar"][data-ui-avatar-state~="hasImage"][data-v-8b3c5fb3] {
+[data-component~="ui-avatar"][data-ui-avatar-state~="hasImage"][data-v-03720dc1] {
   border-color: var(--ui-avatar-border, var(--ui-border-strong));
 }
-[data-component~="ui-avatar"][data-ui-avatar-state~="shape=square"][data-v-8b3c5fb3] {
+[data-component~="ui-avatar"][data-ui-avatar-state~="shape=circle"][data-v-03720dc1] {
+  box-shadow: var(--ui-shadow-sm);
+}
+[data-component~="ui-avatar"][data-ui-avatar-state~="shape=square"][data-v-03720dc1] {
   border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
 }
 
 /* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
    outside the box, so the ring survives the clip and the overlap in an Avatar Group. */
-[data-component~="ui-avatar"][data-ui-avatar-state~="active"][data-v-8b3c5fb3] {
+[data-component~="ui-avatar"][data-ui-avatar-state~="active"][data-v-03720dc1] {
   outline: var(--ui-border-width) solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
   outline-offset: var(--ui-border-width);
 }
-.image[data-v-8b3c5fb3],img[data-v-8b3c5fb3-s] {
+.image[data-v-03720dc1],img[data-v-03720dc1-s] {
   grid-area: 1 / 1;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
 }
-.fallback[data-v-8b3c5fb3] {
+.fallback[data-v-03720dc1] {
   grid-area: 1 / 1;
   display: inline-flex;
   align-items: center;
@@ -202,7 +205,7 @@ svg[data-v-abaeb064] {
 /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
  * Trimming applies to block containers, so the box is a block with centred content. */
 @supports (text-box-trim: trim-both) {
-.fallback[data-v-8b3c5fb3] {
+.fallback[data-v-03720dc1] {
     display: block;
     text-align: center;
     align-content: center;
@@ -210,12 +213,12 @@ svg[data-v-abaeb064] {
     text-box-edge: cap alphabetic;
 }
 }
-[hidden][data-v-8b3c5fb3] {
+[hidden][data-v-03720dc1] {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-avatar"][hidden][data-v-8b3c5fb3] {
+[data-component~="ui-avatar"][hidden][data-v-03720dc1] {
   display: none;
 }
 
@@ -353,7 +356,7 @@ svg[data-v-abaeb064] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-badge"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-v-4d2f1396] {
   --_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
   --_badge-text: var(--ui-text-secondary);
   /* Sit between the soft fill and its stronger theme ink. */
@@ -399,27 +402,27 @@ svg[data-v-abaeb064] {
 
 /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
    text stays in the DOM for accessible names and consumers' selected values. */
-.label[data-v-c96818e7] {
+.label[data-v-4d2f1396] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.label[data-v-c96818e7]:empty {
+.label[data-v-4d2f1396]:empty {
   display: none;
 }
 
 /* Icon content has its own flex item so label ellipsis never clips its strokes. */
-.icon[data-v-c96818e7] {
+.icon[data-v-4d2f1396] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: none;
 }
-.icon[data-v-c96818e7]:empty {
+.icon[data-v-4d2f1396]:empty {
   display: none;
 }
-.icon svg[data-v-c96818e7-s] {
+.icon svg[data-v-4d2f1396-s] {
   display: block;
   inline-size: 1em;
   block-size: 1em;
@@ -427,38 +430,39 @@ svg[data-v-abaeb064] {
 }
 
 /* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
-.label svg[data-v-c96818e7-s] {
+.label svg[data-v-4d2f1396-s] {
   inline-size: 1em;
   block-size: 1em;
   vertical-align: middle;
   margin-inline-end: var(--ui-space-1);
 }
-.label[data-v-c96818e7]:has(svg) {
+.label[data-v-4d2f1396]:has(svg) {
   text-box-trim: none;
 }
 
-/* Text-only badges retain their trimmed inline baseline. Icon content needs a flex row;
-   trimming its label separately keeps the glyph centered without changing adjacent lines. */
+/* Center the capital/baseline text box, while clipping only inline overflow for ellipsis.
+   Vertical ink remains visible so trimming never cuts off ascenders or descenders. */
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-badge"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-v-4d2f1396] {
     display: inline-block;
     min-block-size: var(--ui-badge-min-block-size, 1.5rem);
     text-align: center;
     align-content: center;
-    text-box-trim: trim-both;
-    text-box-edge: text;
+    text-box-trim: none;
 }
-[data-component~="ui-badge"][data-v-c96818e7]:has(.icon:not(:empty)),
-  [data-component~="ui-badge"][data-v-c96818e7]:has(.label svg) {
+[data-component~="ui-badge"][data-v-4d2f1396]:has(.icon:not(:empty)),
+  [data-component~="ui-badge"][data-v-4d2f1396]:has(.label svg) {
     display: inline-flex;
     text-box-trim: none;
 }
-[data-component~="ui-badge"]:has(.icon:not(:empty)) .label[data-v-c96818e7] {
+.label[data-v-4d2f1396]:not(:has(svg)) {
     text-box-trim: trim-both;
-    text-box-edge: text;
+    text-box-edge: cap alphabetic;
+    overflow-x: clip;
+    overflow-y: visible;
 }
 }
-[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-4d2f1396] {
   box-sizing: border-box;
   min-inline-size: 1rem;
   min-block-size: var(--ui-badge-min-block-size, 1rem);
@@ -466,52 +470,52 @@ svg[data-v-abaeb064] {
   font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
   line-height: var(--ui-badge-line-height, 1);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-4d2f1396] {
   --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-4d2f1396] {
   --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-4d2f1396] {
   --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-4d2f1396] {
   --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-4d2f1396] {
   --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-4d2f1396] {
   --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-4d2f1396] {
   --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-4d2f1396] {
   --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-4d2f1396] {
   --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-4d2f1396] {
   --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
@@ -519,12 +523,47 @@ svg[data-v-abaeb064] {
 
 /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
    invalid while the hook is unset. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-4d2f1396] {
   --_badge-color-surface: var(--_badge-color-ink);
   --_badge-color-border: var(--_badge-color-ink);
   --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-c96818e7] {
+
+/* A translucent inverse surface picks up its filled control's tone. Deepen the tone ink
+   toward the theme text to retain contrast against that composed surface. */
+[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-v-4d2f1396] {
+  --_badge-color-surface: color-mix(
+    in srgb,
+    color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%,
+    transparent
+  );
+  --_badge-color-border: var(--_badge-color-surface);
+  --_badge-color-text: color-mix(in srgb, var(--_badge-color-ink) 85%, var(--ui-text-primary));
+  --_badge-outline-surface: var(
+    --ui-badge-surface,
+    var(--_badge-color-surface, color-mix(in srgb, var(--_badge-text) 88%, transparent))
+  );
+  border-color: var(
+    --ui-badge-border,
+    var(--_badge-color-border, color-mix(in srgb, var(--_badge-text) 88%, transparent))
+  );
+  color: var(
+    --ui-badge-text,
+    var(--_badge-color-text, color-mix(in srgb, var(--_badge-surface) 85%, var(--ui-text-primary)))
+  );
+  /* Paint each translucent layer once, including the border, without a bright double-painted ring. */
+  background-clip: padding-box;
+}
+[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"][data-v-4d2f1396] {
+  box-shadow: var(--ui-shadow-sm);
+}
+
+/* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
+   surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
+[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"][data-v-4d2f1396] {
+  color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
+}
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-4d2f1396] {
   --_badge-surface: var(--ui-surface-default);
   --_badge-border: var(--ui-border-strong);
   --_badge-text: var(--ui-text-secondary);
@@ -532,29 +571,29 @@ svg[data-v-abaeb064] {
   --_badge-color-surface: initial;
   --_badge-color-border: var(--_badge-color-ink);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-4d2f1396] {
   --_badge-border: var(--ui-accent-solid);
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-4d2f1396] {
   --_badge-border: var(--ui-danger-solid);
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-4d2f1396] {
   --_badge-border: var(--ui-success-solid);
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-4d2f1396] {
   --_badge-border: var(--ui-warning-solid);
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-4d2f1396] {
   --_badge-border: var(--ui-info-solid);
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
 /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-4d2f1396] {
   --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
   display: inline-flex;
   box-sizing: border-box;
@@ -567,23 +606,29 @@ svg[data-v-abaeb064] {
   border-radius: var(--ui-radius-md);
   text-box-trim: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-4d2f1396] {
   --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=lg"][data-v-4d2f1396] {
+  --_badge-square-size: var(
+    --ui-badge-square-size,
+    calc(var(--ui-space-4) * 2 + var(--ui-space-2))
+  );
+}
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-4d2f1396] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label svg[data-v-c96818e7-s] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label svg[data-v-4d2f1396-s] {
   margin-inline-end: 0;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-c96818e7]:empty {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-4d2f1396]:empty {
   display: none;
 }
 
 /* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-v-4d2f1396] {
   --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
   display: inline-flex;
   flex: none;
@@ -595,25 +640,40 @@ svg[data-v-abaeb064] {
   border-radius: var(--ui-radius-round);
   text-box-trim: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"][data-v-4d2f1396] {
   --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=lg"][data-v-4d2f1396] {
+  --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) * 2));
+}
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-4d2f1396] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
   text-box-trim: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label svg[data-v-c96818e7-s] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label svg[data-v-4d2f1396-s] {
   margin-inline-end: 0;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-c96818e7]:empty {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-4d2f1396]:empty {
   display: none;
 }
 
+/* Center capital and numeral ink, rather than the font's ascent/descent line box.
+   Icon labels retain flex geometry; untrimmed browsers keep that fallback too. */
+@supports (text-box-trim: trim-both) {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-4d2f1396]:not(:has(svg)),
+  [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-4d2f1396]:not(:has(svg)) {
+    display: block;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+    overflow: visible;
+}
+}
+
 /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-4d2f1396] {
   position: relative;
   box-sizing: border-box;
   flex: none;
@@ -625,7 +685,7 @@ svg[data-v-abaeb064] {
   border-radius: var(--ui-radius-round);
   text-box-trim: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-4d2f1396] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -636,7 +696,7 @@ svg[data-v-abaeb064] {
 
 /* The clipped point needs an inset surface over an outer border-colour shape: a native border
    has no diagonal edge to follow. Keep this edge for every tag variant. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-4d2f1396] {
   --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
   position: relative;
@@ -653,7 +713,7 @@ svg[data-v-abaeb064] {
     0 100%
   );
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-c96818e7]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-4d2f1396]::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -668,34 +728,37 @@ svg[data-v-abaeb064] {
   );
   pointer-events: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-c96818e7]:dir(rtl) {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-ui-badge-state~="variant=inverse"][data-v-4d2f1396] {
+  background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-text)));
+}
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-4d2f1396]:dir(rtl) {
   padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
   padding-inline-start: calc(
     var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
   );
   clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-c96818e7]:dir(rtl)::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-4d2f1396]:dir(rtl)::before {
   clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
 }
 @media (forced-colors: active) {
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-4d2f1396] {
     forced-color-adjust: none;
     border-color: CanvasText;
     background: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-c96818e7] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-4d2f1396] {
     forced-color-adjust: none;
     background: CanvasText;
     color: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-c96818e7]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-4d2f1396]::before {
     background: Canvas;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden][data-v-c96818e7] {
+[data-component~="ui-badge"][hidden][data-v-4d2f1396] {
   display: none;
 }
 
@@ -1282,7 +1345,7 @@ html[data-ui-input-modality="touch"]
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-callout"][data-v-948263db] {
+[data-component~="ui-callout"][data-v-ca7a11cb] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-callout-icon-column: var(--ui-callout-icon-column);
   --_ui-callout-icon: var(--ui-callout-icon);
@@ -1302,8 +1365,10 @@ html[data-ui-input-modality="touch"]
   padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
   border: var(--ui-callout-border-width, var(--ui-border-width)) solid
     color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
-  border-inline-start: var(--ui-callout-leading-border-width, var(--ui-accent-line-width)) solid
-    var(--ui-callout-border, var(--_callout-border));
+  border-inline-start: var(
+    --ui-callout-leading-border-width,
+    var(--ui-callout-border-width, var(--ui-border-width))
+  ) solid color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
   border-radius: var(--ui-radius-md);
   background: var(--ui-callout-surface, var(--_callout-surface));
   color: var(--ui-callout-text, var(--ui-text-primary));
@@ -1314,44 +1379,44 @@ html[data-ui-input-modality="touch"]
 }
 
 /* One line box tall, so the icon centres on the first line of text. */
-.icon[data-v-948263db] {
+.icon[data-v-ca7a11cb] {
   display: grid;
   place-items: center;
   inline-size: var(--_ui-callout-icon-column, 1.125rem);
   block-size: 1lh;
   color: var(--_ui-callout-icon, var(--_callout-icon));
 }
-.icon svg[data-v-948263db] {
+.icon svg[data-v-ca7a11cb] {
   inline-size: var(--_ui-callout-icon-size, 1.125rem);
   block-size: var(--_ui-callout-icon-size, 1.125rem);
 }
-.content[data-v-948263db] {
+.content[data-v-ca7a11cb] {
   min-inline-size: 0;
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=neutral"][data-v-948263db],
-[data-component~="ui-callout"][data-ui-callout-state~="tone=note"][data-v-948263db] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=neutral"][data-v-ca7a11cb],
+[data-component~="ui-callout"][data-ui-callout-state~="tone=note"][data-v-ca7a11cb] {
   --_callout-surface: var(--ui-surface-muted);
   --_callout-border: var(--ui-border-strong);
   --_callout-icon: var(--ui-text-secondary);
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=warning"][data-v-948263db] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=warning"][data-v-ca7a11cb] {
   --_callout-surface: var(--ui-warning-soft);
   --_callout-border: var(--ui-warning-solid);
   --_callout-icon: var(--ui-warning-solid);
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=success"][data-v-948263db] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=success"][data-v-ca7a11cb] {
   --_callout-surface: var(--ui-success-soft);
   --_callout-border: var(--ui-success-solid);
   --_callout-icon: var(--ui-success-solid);
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=danger"][data-v-948263db] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=danger"][data-v-ca7a11cb] {
   --_callout-surface: var(--ui-danger-soft);
   --_callout-border: var(--ui-danger-solid);
   --_callout-icon: var(--ui-danger-solid);
 }
 
 /* A link in the callout's text is underlined, so it reads as a link by more than colour. */
-.content a[data-v-948263db-s] {
+.content a[data-v-ca7a11cb-s] {
   color: var(--ui-accent-active);
   text-decoration: underline;
   text-decoration-thickness: 0.06em;
@@ -1359,7 +1424,7 @@ html[data-ui-input-modality="touch"]
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-callout"][hidden][data-v-948263db] {
+[data-component~="ui-callout"][hidden][data-v-ca7a11cb] {
   display: none;
 }
 
@@ -5718,7 +5783,7 @@ svg[data-v-b66a1661-s] {
    padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
    a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
    stay their own. */
-[data-component~="ui-list-item"][data-v-bb9ba09d] {
+[data-component~="ui-list-item"][data-v-6c3bc8f3] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-list-item-icon-size: var(--ui-list-item-icon-size);
 
@@ -5743,97 +5808,106 @@ svg[data-v-b66a1661-s] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     border-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-bb9ba09d] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-6c3bc8f3] {
   padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
   padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
   border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
   background: var(--ui-surface-raised);
 }
-[data-component~="ui-list-item"][data-v-bb9ba09d]:where(:has(.title a[href])):hover {
+[data-component~="ui-list-item"][data-v-6c3bc8f3]:where(:has(.title a[href])):hover {
   background: var(--ui-selection-surface);
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-bb9ba09d]:where(:has(.title
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-6c3bc8f3]:where(:has(.title
   a[href])):hover {
   border-color: var(--ui-border-strong);
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-bb9ba09d] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-6c3bc8f3] {
   background: var(--ui-selection-surface);
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-bb9ba09d] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-6c3bc8f3] {
   background: var(--ui-selection-surface);
   color: var(--ui-selection-text);
 }
-[data-component~="ui-list-item"][data-v-bb9ba09d]:has(.title a[href]:focus-visible) {
+[data-component~="ui-list-item"][data-v-6c3bc8f3]:has(.title a[href]:focus-visible) {
   box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
 }
-.leading[data-v-bb9ba09d],
-.trailing[data-v-bb9ba09d] {
+.leading[data-v-6c3bc8f3],
+.trailing[data-v-6c3bc8f3] {
   display: inline-flex;
   flex: none;
   align-items: center;
   gap: var(--ui-space-2);
 }
-.leading[data-v-bb9ba09d] {
+.leading[data-v-6c3bc8f3] {
   color: var(--ui-text-muted);
   font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="current"] .leading[data-v-bb9ba09d] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"] .leading[data-v-6c3bc8f3] {
   color: var(--ui-selection-text);
 }
 
 /* An explicitly independent leading control sits above the stretched row link. */
-[data-component~="ui-list-item"][data-ui-list-item-state~="leadingInteractive"] .leading[data-v-bb9ba09d] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="leadingInteractive"] .leading[data-v-6c3bc8f3] {
   position: relative;
   z-index: 1;
 }
 
 /* Trailing controls take their own clicks, above the title link's stretched hit area. */
-.trailing[data-v-bb9ba09d] {
+.trailing[data-v-6c3bc8f3] {
   position: relative;
   z-index: 1;
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
 }
-.content[data-v-bb9ba09d] {
+.content[data-v-6c3bc8f3] {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: var(--ui-space-0-5, 2px);
   min-inline-size: 0;
 }
-.title[data-v-bb9ba09d],
-.description[data-v-bb9ba09d] {
+.title[data-v-6c3bc8f3],
+.description[data-v-6c3bc8f3] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .title[data-v-bb9ba09d],
-[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .description[data-v-bb9ba09d] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .title[data-v-6c3bc8f3],
+[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .description[data-v-6c3bc8f3] {
   white-space: normal;
   overflow-wrap: anywhere;
 }
-.title[data-v-bb9ba09d] {
+.title[data-v-6c3bc8f3] {
   font-size: var(--ui-font-size-md);
   font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
   line-height: var(--ui-line-height-tight);
 }
-.description[data-v-bb9ba09d] {
+
+/* Keep identity and disclosure marks beside the first line, even with a long description. */
+[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"][data-v-6c3bc8f3] {
+  align-items: flex-start;
+}
+[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] .leading[data-v-6c3bc8f3],
+[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] .trailing[data-v-6c3bc8f3] {
+  min-block-size: calc(var(--ui-font-size-md) * var(--ui-line-height-tight));
+}
+.description[data-v-6c3bc8f3] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-tight);
 }
-.title > a[data-v-bb9ba09d-s] {
+.title > a[data-v-6c3bc8f3-s] {
   color: inherit;
   text-decoration: none;
 }
-.title > a[data-v-bb9ba09d-s]:focus-visible {
+.title > a[data-v-6c3bc8f3-s]:focus-visible {
   outline: none;
   box-shadow: none;
 }
-.title > a[href][data-v-bb9ba09d-s]::after {
+.title > a[href][data-v-6c3bc8f3-s]::after {
   position: absolute;
   inset: 0;
   border-radius: inherit;
@@ -5841,24 +5915,24 @@ svg[data-v-b66a1661-s] {
 }
 
 /* An unused region takes no space. */
-.leading[data-v-bb9ba09d]:empty,
-.description[data-v-bb9ba09d]:empty,
-.trailing[data-v-bb9ba09d]:empty {
+.leading[data-v-6c3bc8f3]:empty,
+.description[data-v-6c3bc8f3]:empty,
+.trailing[data-v-6c3bc8f3]:empty {
   display: none;
 }
 @media (forced-colors: active) {
-[data-component~="ui-list-item"][data-v-bb9ba09d]:has(a:focus-visible) {
+[data-component~="ui-list-item"][data-v-6c3bc8f3]:has(a:focus-visible) {
     outline: var(--ui-focus-width) solid Highlight;
     outline-offset: calc(-1 * var(--ui-focus-width));
 }
-:is([data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-bb9ba09d], [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-bb9ba09d]):not(:has(a:focus-visible)) {
+:is([data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-6c3bc8f3], [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-6c3bc8f3]):not(:has(a:focus-visible)) {
     outline: var(--ui-border-width) solid Highlight;
     outline-offset: calc(-1 * var(--ui-border-width));
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-list-item"][hidden][data-v-bb9ba09d] {
+[data-component~="ui-list-item"][hidden][data-v-6c3bc8f3] {
   display: none;
 }
 
@@ -8677,8 +8751,9 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-toast"][data-v-241766bc] {
+[data-component~="ui-toast"][data-v-af4b9641] {
   --_ui-toast-accent: var(--ui-border-strong);
+  --_ui-toast-surface: var(--ui-surface-muted);
 
   display: flex;
   align-items: center;
@@ -8687,42 +8762,50 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
   inline-size: 100%;
   margin: 0;
   padding: var(--ui-space-3) var(--ui-space-4);
+  /* The close button's internal space supplies the rest of the trailing inset. */
+  padding-inline-end: var(--ui-space-2);
   border: var(--ui-border-width) solid
-    var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-strong)));
-  border-inline-start: var(--ui-accent-line-width) solid
-    var(--ui-toast-accent, var(--_ui-toast-accent));
+    var(
+      --ui-toast-border,
+      var(--ui-overlay-border, var(--ui-toast-accent, var(--_ui-toast-accent)))
+    );
   border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
-  background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+  background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--_ui-toast-surface)));
   color: var(--ui-text-primary);
+  font-family: var(--ui-font-family-sans);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-normal);
+  line-height: var(--ui-line-height-md);
   box-shadow: var(
     --ui-toast-shadow,
     var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
   );
   pointer-events: auto;
 }
-[data-component~="ui-toast"][data-ui-toast-state~="tone=info"][data-v-241766bc] {
+[data-component~="ui-toast"][data-ui-toast-state~="tone=info"][data-v-af4b9641] {
   --_ui-toast-accent: var(--ui-info-solid);
+  --_ui-toast-surface: var(--ui-info-soft);
 }
-[data-component~="ui-toast"][data-ui-toast-state~="tone=success"][data-v-241766bc] {
+[data-component~="ui-toast"][data-ui-toast-state~="tone=success"][data-v-af4b9641] {
   --_ui-toast-accent: var(--ui-success-solid);
+  --_ui-toast-surface: var(--ui-success-soft);
 }
-[data-component~="ui-toast"][data-ui-toast-state~="tone=warning"][data-v-241766bc] {
+[data-component~="ui-toast"][data-ui-toast-state~="tone=warning"][data-v-af4b9641] {
   --_ui-toast-accent: var(--ui-warning-solid);
+  --_ui-toast-surface: var(--ui-warning-soft);
 }
-[data-component~="ui-toast"][data-ui-toast-state~="tone=danger"][data-v-241766bc] {
+[data-component~="ui-toast"][data-ui-toast-state~="tone=danger"][data-v-af4b9641] {
   --_ui-toast-accent: var(--ui-danger-solid);
+  --_ui-toast-surface: var(--ui-danger-soft);
 }
-.message[data-v-241766bc] {
+.message[data-v-af4b9641] {
   min-inline-size: 0;
   flex: 1;
 }
-.action[data-v-241766bc]:not(:has(> *)) {
+.action[data-v-af4b9641]:not(:has(> *)) {
   display: none;
 }
-.dismiss[data-v-241766bc] {
-  margin-inline-end: calc(var(--ui-space-2) * -1);
-}
-[data-component~="ui-toast"][hidden][data-v-241766bc] {
+[data-component~="ui-toast"][hidden][data-v-af4b9641] {
   display: none;
 }
 
@@ -8751,7 +8834,7 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-toast-region"][data-v-4234b07d] {
+[data-component~="ui-toast-region"][data-v-1a7d67f7] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-toast-region-surface: var(--ui-toast-region-surface);
   --_ui-toast-region-border: var(--ui-toast-region-border);
@@ -8781,81 +8864,93 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
   box-shadow: none;
   pointer-events: none;
 }
-[data-component~="ui-toast-region"][data-v-4234b07d]:not(:popover-open) {
+[data-component~="ui-toast-region"][data-v-1a7d67f7]:not(:popover-open) {
   display: none;
 }
-[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=top-start"][data-v-4234b07d],
-[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"][data-v-4234b07d] {
+[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=top-start"][data-v-1a7d67f7],
+[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"][data-v-1a7d67f7] {
   left: auto;
   right: auto;
   inset-inline-start: calc(var(--ui-space-4) + env(safe-area-inset-left));
   transform: none;
 }
-[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=top-end"][data-v-4234b07d],
-[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"][data-v-4234b07d] {
+[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=top-end"][data-v-1a7d67f7],
+[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"][data-v-1a7d67f7] {
   left: auto;
   right: auto;
   inset-inline-end: calc(var(--ui-space-4) + env(safe-area-inset-right));
   transform: none;
 }
-[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom"][data-v-4234b07d],
-[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"][data-v-4234b07d],
-[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"][data-v-4234b07d] {
+[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom"][data-v-1a7d67f7],
+[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-start"][data-v-1a7d67f7],
+[data-component~="ui-toast-region"][data-ui-toast-region-state~="placement=bottom-end"][data-v-1a7d67f7] {
   top: auto;
   bottom: calc(var(--ui-space-4) + env(safe-area-inset-bottom));
 }
-[data-component~="ui-toast-region"] > .toast[data-v-4234b07d],
-[data-component~="ui-toast-region"] > [data-v-4234b07d-s] {
+[data-component~="ui-toast-region"] > .toast[data-v-1a7d67f7],
+[data-component~="ui-toast-region"] > [data-v-1a7d67f7-s] {
   pointer-events: auto;
 }
-.toast[data-v-4234b07d] {
+.toast[data-v-1a7d67f7] {
+  --_ui-toast-region-accent: var(--ui-border-strong);
+  --_ui-toast-region-tone-surface: var(--ui-surface-muted);
   display: grid;
   grid-template-columns: 1fr auto;
   gap: var(--ui-space-2);
   align-items: start;
   border: var(--ui-border-width) solid
-    var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-strong)));
+    var(--_ui-toast-region-border, var(--ui-overlay-border, var(--_ui-toast-region-accent)));
   border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
   padding: var(--ui-space-3) var(--ui-space-4);
+  /* The close button's internal space supplies the rest of the trailing inset. */
+  padding-inline-end: var(--ui-space-2);
   background: var(
     --_ui-toast-region-surface,
-    var(--ui-overlay-surface, var(--ui-surface-elevated))
+    var(--ui-overlay-surface, var(--_ui-toast-region-tone-surface))
   );
   color: var(--ui-text-primary);
+  font-family: var(--ui-font-family-sans);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-normal);
+  line-height: var(--ui-line-height-md);
   box-shadow: var(
     --_ui-toast-region-shadow,
     var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
   );
-  animation: ui-toast-enter-4234b07d var(--_ui-toast-region-enter-duration, 0.32s)
+  animation: ui-toast-enter-1a7d67f7 var(--_ui-toast-region-enter-duration, 0.32s)
     var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
-.toast[data-tone="info"][data-v-4234b07d] {
-  border-inline-start: var(--ui-accent-line-width) solid var(--ui-info-solid);
+.toast[data-tone="info"][data-v-1a7d67f7] {
+  --_ui-toast-region-accent: var(--ui-info-solid);
+  --_ui-toast-region-tone-surface: var(--ui-info-soft);
 }
-.toast[data-tone="success"][data-v-4234b07d] {
-  border-inline-start: var(--ui-accent-line-width) solid var(--ui-success-solid);
+.toast[data-tone="success"][data-v-1a7d67f7] {
+  --_ui-toast-region-accent: var(--ui-success-solid);
+  --_ui-toast-region-tone-surface: var(--ui-success-soft);
 }
-.toast[data-tone="warning"][data-v-4234b07d] {
-  border-inline-start: var(--ui-accent-line-width) solid var(--ui-warning-solid);
+.toast[data-tone="warning"][data-v-1a7d67f7] {
+  --_ui-toast-region-accent: var(--ui-warning-solid);
+  --_ui-toast-region-tone-surface: var(--ui-warning-soft);
 }
-.toast[data-tone="danger"][data-v-4234b07d] {
-  border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger-solid);
+.toast[data-tone="danger"][data-v-1a7d67f7] {
+  --_ui-toast-region-accent: var(--ui-danger-solid);
+  --_ui-toast-region-tone-surface: var(--ui-danger-soft);
 }
 
 /* Leaving slides on down and fades; the controller removes the toast when this ends. */
-.toast.closing[data-v-4234b07d] {
-  animation: ui-toast-exit-4234b07d var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
+.toast.closing[data-v-1a7d67f7] {
+  animation: ui-toast-exit-1a7d67f7 var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
   pointer-events: none;
 }
 :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"])
-  .toast[data-v-4234b07d] {
-  animation-name: ui-toast-enter-bottom-4234b07d;
+  .toast[data-v-1a7d67f7] {
+  animation-name: ui-toast-enter-bottom-1a7d67f7;
 }
 :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"])
-  .toast.closing[data-v-4234b07d] {
-  animation-name: ui-toast-exit-bottom-4234b07d;
+  .toast.closing[data-v-1a7d67f7] {
+  animation-name: ui-toast-exit-bottom-1a7d67f7;
 }
-@keyframes ui-toast-enter-4234b07d {
+@keyframes ui-toast-enter-1a7d67f7 {
 from {
     opacity: 0;
     transform: translateY(-1rem);
@@ -8865,7 +8960,7 @@ to {
     transform: translateY(0);
 }
 }
-@keyframes ui-toast-exit-4234b07d {
+@keyframes ui-toast-exit-1a7d67f7 {
 from {
     opacity: 1;
     transform: translateY(0);
@@ -8875,7 +8970,7 @@ to {
     transform: translateY(0.75rem);
 }
 }
-@keyframes ui-toast-enter-bottom-4234b07d {
+@keyframes ui-toast-enter-bottom-1a7d67f7 {
 from {
     opacity: 0;
     transform: translateY(1rem);
@@ -8885,7 +8980,7 @@ to {
     transform: translateY(0);
 }
 }
-@keyframes ui-toast-exit-bottom-4234b07d {
+@keyframes ui-toast-exit-bottom-1a7d67f7 {
 from {
     opacity: 1;
     transform: translateY(0);
@@ -8896,21 +8991,20 @@ to {
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.toast[data-v-4234b07d], .toast.closing[data-v-4234b07d] {
+.toast[data-v-1a7d67f7], .toast.closing[data-v-1a7d67f7] {
     animation: none;
 }
 }
-.message[data-v-4234b07d] {
+.message[data-v-1a7d67f7] {
   min-inline-size: 0;
   align-self: center;
 }
-.dismiss[data-v-4234b07d] {
+.dismiss[data-v-1a7d67f7] {
   align-self: center;
-  margin-inline-end: calc(var(--ui-space-2) * -1);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-toast-region"][hidden][data-v-4234b07d] {
+[data-component~="ui-toast-region"][hidden][data-v-1a7d67f7] {
   display: none;
 }