@threadlabs/looma 0.27.3 → 0.27.5

package/vue/components.css

@@ -360,7 +360,7 @@ svg[data-v-abaeb064] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-badge"][data-v-380f0aab] {
+[data-component~="ui-badge"][data-v-9a500035] {
   --_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. */
@@ -406,27 +406,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-380f0aab] {
+.label[data-v-9a500035] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.label[data-v-380f0aab]:empty {
+.label[data-v-9a500035]:empty {
   display: none;
 }
 
 /* Icon content has its own flex item so label ellipsis never clips its strokes. */
-.icon[data-v-380f0aab] {
+.icon[data-v-9a500035] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: none;
 }
-.icon[data-v-380f0aab]:empty {
+.icon[data-v-9a500035]:empty {
   display: none;
 }
-.icon svg[data-v-380f0aab-s] {
+.icon svg[data-v-9a500035-s] {
   display: block;
   inline-size: 1em;
   block-size: 1em;
@@ -434,39 +434,39 @@ svg[data-v-abaeb064] {
 }
 
 /* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
-.label svg[data-v-380f0aab-s] {
+.label svg[data-v-9a500035-s] {
   inline-size: 1em;
   block-size: 1em;
   vertical-align: middle;
   margin-inline-end: var(--ui-space-1);
 }
-.label[data-v-380f0aab]:has(svg) {
+.label[data-v-9a500035]:has(svg) {
   text-box-trim: none;
 }
 
 /* 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-380f0aab] {
+[data-component~="ui-badge"][data-v-9a500035] {
     display: inline-block;
     min-block-size: var(--ui-badge-min-block-size, 1.5rem);
     text-align: center;
     align-content: center;
     text-box-trim: none;
 }
-[data-component~="ui-badge"][data-v-380f0aab]:has(.icon:not(:empty)),
-  [data-component~="ui-badge"][data-v-380f0aab]:has(.label svg) {
+[data-component~="ui-badge"][data-v-9a500035]:has(.icon:not(:empty)),
+  [data-component~="ui-badge"][data-v-9a500035]:has(.label svg) {
     display: inline-flex;
     text-box-trim: none;
 }
-.label[data-v-380f0aab]:not(:has(svg)) {
+.label[data-v-9a500035]:not(:has(svg)) {
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
     overflow-x: clip;
     overflow-y: visible;
 }
 }
-[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-9a500035] {
   box-sizing: border-box;
   min-inline-size: 1rem;
   min-block-size: var(--ui-badge-min-block-size, 1rem);
@@ -476,56 +476,56 @@ 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~="size=sm"][data-v-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="size=sm"][data-v-9a500035] {
   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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-9a500035] {
   --_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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-9a500035] {
   --_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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-9a500035] {
   --_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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-9a500035] {
   --_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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-9a500035] {
   --_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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-9a500035] {
   --_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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-9a500035] {
   --_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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-9a500035] {
   --_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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-9a500035] {
   --_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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-9a500035] {
   --_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));
@@ -533,7 +533,7 @@ 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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-9a500035] {
   --_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));
@@ -541,7 +541,7 @@ svg[data-v-abaeb064] {
 
 /* 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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-v-9a500035] {
   --_badge-color-surface: color-mix(
     in srgb,
     color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%,
@@ -567,7 +567,7 @@ svg[data-v-abaeb064] {
 
 /* A circular count has a tone-tinted surface, a separate lighter rim and readable tone ink.
    Dark controls retain a shaded surface and theme ink with a quieter rim. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"][data-v-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"][data-v-9a500035] {
   --_badge-color-surface: light-dark(
     color-mix(
       in srgb,
@@ -634,23 +634,23 @@ svg[data-v-abaeb064] {
 }
 
 /* A count can keep its containing control's contrasting ink instead of reversing it.
-   The faint fill is painted over that control; no second rim or shadow competes with it. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=overlay"][data-v-380f0aab] {
+   The faint fill preserves text contrast; a quiet boundary separates the count from its control. */
+[data-component~="ui-badge"][data-ui-badge-state~="variant=overlay"][data-v-9a500035] {
   --_badge-outline-surface: var(
     --ui-badge-surface,
     color-mix(in srgb, currentColor 6%, transparent)
   );
   color: var(--ui-badge-text, inherit);
-  border-color: var(--ui-badge-border, transparent);
+  border-color: var(--ui-badge-border, color-mix(in srgb, currentColor 20%, transparent));
   box-shadow: none;
 }
 
 /* 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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"][data-v-9a500035] {
   color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-9a500035] {
   --_badge-surface: var(--ui-surface-default);
   --_badge-border: var(--ui-border-strong);
   --_badge-text: var(--ui-text-secondary);
@@ -658,29 +658,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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-9a500035] {
   --_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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-9a500035] {
   --_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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-9a500035] {
   --_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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-9a500035] {
   --_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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-9a500035] {
   --_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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-9a500035] {
   --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
   display: inline-flex;
   box-sizing: border-box;
@@ -693,29 +693,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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-9a500035] {
   --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=lg"][data-v-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=lg"][data-v-9a500035] {
   --_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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-9a500035] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label svg[data-v-380f0aab-s] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label svg[data-v-9a500035-s] {
   margin-inline-end: 0;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-380f0aab]:empty {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-9a500035]: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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-v-9a500035] {
   --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
   display: inline-flex;
   flex: none;
@@ -727,34 +727,34 @@ 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=sm"][data-ui-badge-state~="variant=overlay"][data-v-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=sm"][data-ui-badge-state~="variant=overlay"][data-v-9a500035] {
   --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) + var(--ui-space-1)));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"][data-v-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"][data-v-9a500035] {
   --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=lg"][data-v-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=lg"][data-v-9a500035] {
   --_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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-9a500035] {
   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-380f0aab-s] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label svg[data-v-9a500035-s] {
   margin-inline-end: 0;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-380f0aab]:empty {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-9a500035]: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-380f0aab]:not(:has(svg)),
-  [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-380f0aab]:not(:has(svg)) {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-9a500035]:not(:has(svg)),
+  [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-9a500035]:not(:has(svg)) {
     display: block;
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
@@ -763,7 +763,7 @@ svg[data-v-abaeb064] {
 }
 
 /* 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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-9a500035] {
   position: relative;
   box-sizing: border-box;
   flex: none;
@@ -775,7 +775,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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-9a500035] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -786,7 +786,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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-9a500035] {
   --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
   position: relative;
@@ -803,7 +803,7 @@ svg[data-v-abaeb064] {
     0 100%
   );
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-380f0aab]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-9a500035]::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -818,37 +818,37 @@ svg[data-v-abaeb064] {
   );
   pointer-events: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-ui-badge-state~="variant=inverse"][data-v-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-ui-badge-state~="variant=inverse"][data-v-9a500035] {
   background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-text)));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-380f0aab]:dir(rtl) {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-9a500035]: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-380f0aab]:dir(rtl)::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-9a500035]: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-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-9a500035] {
     forced-color-adjust: none;
     border-color: CanvasText;
     background: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-380f0aab] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-9a500035] {
     forced-color-adjust: none;
     background: CanvasText;
     color: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-380f0aab]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-9a500035]::before {
     background: Canvas;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden][data-v-380f0aab] {
+[data-component~="ui-badge"][hidden][data-v-9a500035] {
   display: none;
 }
 
@@ -1508,7 +1508,7 @@ html[data-ui-input-modality="touch"]
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-callout"][data-v-c8674799] {
+[data-component~="ui-callout"][data-v-492ee9df] {
   /* 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);
@@ -1572,22 +1572,26 @@ html[data-ui-input-modality="touch"]
 }
 
 /* One line box tall, so the icon centres on the first line of text. */
-.icon[data-v-c8674799] {
+.icon[data-v-492ee9df] {
   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-c8674799] {
+.icon svg[data-v-492ee9df] {
   inline-size: var(--_ui-callout-icon-size, 1.125rem);
   block-size: var(--_ui-callout-icon-size, 1.125rem);
 }
-.content[data-v-c8674799] {
+.content[data-v-492ee9df] {
   min-inline-size: 0;
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=neutral"][data-v-c8674799],
-[data-component~="ui-callout"][data-ui-callout-state~="tone=note"][data-v-c8674799] {
+.heading[data-v-492ee9df] {
+  display: block;
+  font-weight: var(--ui-font-semibold);
+}
+[data-component~="ui-callout"][data-ui-callout-state~="tone=neutral"][data-v-492ee9df],
+[data-component~="ui-callout"][data-ui-callout-state~="tone=note"][data-v-492ee9df] {
   --_ui-selection-context-surface: initial;
   --_ui-selection-context-border: initial;
   --_ui-selection-context-text: initial;
@@ -1595,24 +1599,35 @@ html[data-ui-input-modality="touch"]
   --_callout-border: var(--ui-border-strong);
   --_callout-icon: var(--ui-text-secondary);
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=warning"][data-v-c8674799] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=tip"][data-v-492ee9df] {
+  --_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=important"][data-v-492ee9df] {
+  --_callout-surface: var(--ui-accent-soft);
+  --_callout-border: var(--ui-accent-solid);
+  --_callout-icon: var(--ui-accent-solid);
+}
+[data-component~="ui-callout"][data-ui-callout-state~="tone=warning"][data-v-492ee9df] {
   --_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-c8674799] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=success"][data-v-492ee9df] {
   --_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-c8674799] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=danger"][data-v-492ee9df],
+[data-component~="ui-callout"][data-ui-callout-state~="tone=caution"][data-v-492ee9df] {
   --_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-c8674799-s] {
+.content a[data-v-492ee9df-s] {
   color: var(--ui-accent-active);
   text-decoration: underline;
   text-decoration-thickness: 0.06em;
@@ -1620,7 +1635,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-c8674799] {
+[data-component~="ui-callout"][hidden][data-v-492ee9df] {
   display: none;
 }
 
@@ -8685,7 +8700,7 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
 }
 
 /* Density resolves into the tab row's own values; the public tokens still override them. */
-[data-component~="ui-tabs"][data-v-3bf68b5f] {
+[data-component~="ui-tabs"][data-v-f10f6ffb] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-tabs-tab-min-block-size: var(--ui-tabs-tab-min-block-size);
   --_ui-tabs-tab-padding-block: var(--ui-tabs-tab-padding-block);
@@ -8695,17 +8710,17 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
   --_tab-padding-block: var(--ui-space-2);
   --_tab-padding-inline: var(--ui-space-3);
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="density=compact"][data-v-3bf68b5f] {
+[data-component~="ui-tabs"][data-ui-tabs-state~="density=compact"][data-v-f10f6ffb] {
   --_tab-min-block-size: var(--ui-control-size-sm);
   --_tab-padding-block: var(--ui-space-1);
   --_tab-padding-inline: var(--ui-space-2);
 }
-[data-component~="ui-tabs"][data-v-3bf68b5f] {
+[data-component~="ui-tabs"][data-v-f10f6ffb] {
   display: grid;
   inline-size: 100%;
   min-inline-size: 0;
 }
-.list[data-v-3bf68b5f] {
+.list[data-v-f10f6ffb] {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: max-content;
@@ -8721,8 +8736,8 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
   scrollbar-width: thin;
   border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
 }
-.list button[data-v-3bf68b5f],
-.list > button[slot="tab"][data-v-3bf68b5f-s] {
+.list button[data-v-f10f6ffb],
+.list > button[slot="tab"][data-v-f10f6ffb-s] {
   min-block-size: var(--_ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
   margin: 0 0 calc(-1 * var(--ui-border-width));
   padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block))
@@ -8745,8 +8760,8 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
 /* 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) {
-.list button[data-v-3bf68b5f],
-  .list > button[slot="tab"][data-v-3bf68b5f-s] {
+.list button[data-v-f10f6ffb],
+  .list > button[slot="tab"][data-v-f10f6ffb-s] {
     display: block;
     text-align: center;
     align-content: center;
@@ -8754,51 +8769,51 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="stretch"] .list[data-v-3bf68b5f] {
+[data-component~="ui-tabs"][data-ui-tabs-state~="stretch"] .list[data-v-f10f6ffb] {
   grid-auto-columns: minmax(max-content, 1fr);
 }
-.list button[data-v-3bf68b5f],
-.list > button[slot="tab"][data-v-3bf68b5f-s] {
+.list button[data-v-f10f6ffb],
+.list > button[slot="tab"][data-v-f10f6ffb-s] {
   white-space: nowrap;
 }
-.list button[data-v-3bf68b5f]:hover,
-.list > button[slot="tab"][data-v-3bf68b5f-s]:hover {
+.list button[data-v-f10f6ffb]:hover,
+.list > button[slot="tab"][data-v-f10f6ffb-s]:hover {
   color: var(--ui-text-primary);
   background: var(--ui-surface-muted);
 }
-.list button[aria-selected="true"][data-v-3bf68b5f],
-.list > button[slot="tab"][aria-selected="true"][data-v-3bf68b5f-s] {
+.list button[aria-selected="true"][data-v-f10f6ffb],
+.list > button[slot="tab"][aria-selected="true"][data-v-f10f6ffb-s] {
   color: var(--ui-accent-solid);
   border-block-end-color: var(--ui-accent-solid);
 }
-.list button[data-v-3bf68b5f]:focus-visible,
-.list > button[slot="tab"][data-v-3bf68b5f-s]:focus-visible {
+.list button[data-v-f10f6ffb]:focus-visible,
+.list > button[slot="tab"][data-v-f10f6ffb-s]:focus-visible {
   position: relative;
   outline: none;
   box-shadow: inset 0 0 0 var(--ui-focus-width)
     color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
   border-radius: var(--ui-radius-sm);
 }
-.panels[data-v-3bf68b5f] {
+.panels[data-v-f10f6ffb] {
   min-inline-size: 0;
 }
-.panels > [data-v-3bf68b5f-s] {
+.panels > [data-v-f10f6ffb-s] {
   padding: var(--ui-space-4);
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"][data-v-3bf68b5f] {
+[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"][data-v-f10f6ffb] {
   grid-template-columns: max-content minmax(0, 1fr);
   align-items: start;
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list[data-v-3bf68b5f] {
+[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list[data-v-f10f6ffb] {
   grid-auto-flow: row;
   grid-auto-columns: auto;
   border-block-end: 0;
   border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list button[data-v-3bf68b5f],
+[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list button[data-v-f10f6ffb],
 [data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"]
   .list
-  > button[slot="tab"][data-v-3bf68b5f-s] {
+  > button[slot="tab"][data-v-f10f6ffb-s] {
   margin: 0 calc(-1 * var(--ui-border-width)) 0 0;
   border-block-end: 0;
   border-inline-end: var(--ui-accent-line-width) solid transparent;
@@ -8806,21 +8821,21 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
 }
 [data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"]
   .list
-  button[aria-selected="true"][data-v-3bf68b5f],
+  button[aria-selected="true"][data-v-f10f6ffb],
 [data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"]
   .list
-  > button[slot="tab"][aria-selected="true"][data-v-3bf68b5f-s] {
+  > button[slot="tab"][aria-selected="true"][data-v-f10f6ffb-s] {
   border-inline-end-color: var(--ui-accent-solid);
 }
 @media (prefers-reduced-motion: reduce) {
-.list button[data-v-3bf68b5f],
-  .list > button[slot="tab"][data-v-3bf68b5f-s] {
+.list button[data-v-f10f6ffb],
+  .list > button[slot="tab"][data-v-f10f6ffb-s] {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-tabs"][hidden][data-v-3bf68b5f] {
+[data-component~="ui-tabs"][hidden][data-v-f10f6ffb] {
   display: none;
 }