@threadlabs/looma 0.17.2 → 0.17.4

package/vue/components.css

@@ -591,32 +591,27 @@ ol[data-v-ee3145b6] {
 
 /* Something is on its way. The ring chases in the current text colour; with reduced motion it holds still,
        and the label (or the text beside it) still says what is happening. */
-[data-component~="ui-spinner"][data-v-1c74343f] {
+[data-component~="ui-spinner"][data-v-f5f5cd89] {
   display: inline-flex;
   flex: none;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
   inline-size: 1em;
   block-size: 1em;
-  color: currentColor;
-  font-size: var(--ui-font-size-lg);
-  line-height: 1;
-}
-.ring[data-v-1c74343f] {
-  display: block;
-  box-sizing: border-box;
-  inline-size: 100%;
-  block-size: 100%;
   border: 2px solid transparent;
   border-block-start-color: currentColor;
   border-inline-end-color: color-mix(in srgb, currentColor 52%, transparent);
   border-radius: 50%;
-  animation: ui-spinner-chase-1c74343f 1s linear infinite;
+  color: currentColor;
+  font-size: var(--ui-font-size-lg);
+  line-height: 1;
+  animation: ui-spinner-chase-f5f5cd89 1s linear infinite;
 }
-[data-component~="ui-spinner"][data-ui-spinner-state~="size=sm"][data-v-1c74343f] {
+[data-component~="ui-spinner"][data-ui-spinner-state~="size=sm"][data-v-f5f5cd89] {
   font-size: var(--ui-font-size-md);
 }
-@keyframes ui-spinner-chase-1c74343f {
+@keyframes ui-spinner-chase-f5f5cd89 {
 0% {
     transform: rotate(0);
 }
@@ -628,13 +623,13 @@ ol[data-v-ee3145b6] {
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.ring[data-v-1c74343f] {
+[data-component~="ui-spinner"][data-v-f5f5cd89] {
     animation: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-spinner"][hidden][data-v-1c74343f] {
+[data-component~="ui-spinner"][hidden][data-v-f5f5cd89] {
   display: none;
 }
 
@@ -711,7 +706,7 @@ ol[data-v-ee3145b6] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-button"][data-v-84ef27e9] {
+[data-component~="ui-button"][data-v-a89a1895] {
   --_hue: var(--ui-accent);
   --_hue-hover: var(--ui-accent-hover);
   --_hue-active: var(--ui-accent-active);
@@ -730,15 +725,15 @@ ol[data-v-ee3145b6] {
   vertical-align: middle;
   color: var(--_tone-text);
 }
-[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-84ef27e9] {
+[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-a89a1895] {
   justify-content: flex-start;
   text-align: start;
 }
-[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-84ef27e9] {
+[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-a89a1895] {
   display: flex;
   inline-size: 100%;
 }
-[data-component~="ui-button"][data-v-84ef27e9] {
+[data-component~="ui-button"][data-v-a89a1895] {
   appearance: none;
   min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
   border-style: solid;
@@ -764,24 +759,29 @@ ol[data-v-ee3145b6] {
     box-shadow var(--ui-motion-base) var(--ui-motion-ease);
   margin: 0;
 }
-.spinner-wrap[data-v-84ef27e9] {
+
+/* An anchor keeps the boxed button look even when an app styles ordinary links. */
+[data-component~="ui-button"][data-v-a89a1895]:is(a) {
+  text-decoration: none;
+}
+.spinner-wrap[data-v-a89a1895] {
   display: inline-flex;
   flex: none;
   margin-inline-end: var(--ui-space-2);
   vertical-align: middle;
 }
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-button"][data-v-84ef27e9] {
+[data-component~="ui-button"][data-v-a89a1895] {
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-84ef27e9] {
+[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-a89a1895] {
   min-block-size: var(--ui-control-size-sm);
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
 }
-[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-84ef27e9] {
+[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-a89a1895] {
   min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: var(--ui-font-size-md);
@@ -789,29 +789,29 @@ ol[data-v-ee3145b6] {
 
 /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
    is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
-[data-component~="ui-button"][data-v-84ef27e9]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-a89a1895]:hover:not(:disabled, [aria-disabled="true"]) {
   border-color: var(--ui-button-hover-border, var(--_tone-hover));
   background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
 }
 
 /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
-[data-component~="ui-button"][data-v-84ef27e9]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-a89a1895]:active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
   background-image: none;
   box-shadow: var(--ui-pressed);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-84ef27e9],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-84ef27e9] {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-a89a1895],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-a89a1895] {
   border-color: var(--_tone);
   background-color: var(--_tone);
   color: var(--_on-tone);
   box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
 }
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-84ef27e9], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-84ef27e9]):hover:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-a89a1895], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-a89a1895]):hover:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-hover);
   border-color: var(--_tone-hover);
 }
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-84ef27e9], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-84ef27e9]):active:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-a89a1895], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-a89a1895]):active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-active);
   border-color: var(--_tone-active);
   background-image: none;
@@ -820,43 +820,43 @@ ol[data-v-ee3145b6] {
 
 /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
    destructive secondary action, not a special case. */
-[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-84ef27e9] {
+[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-a89a1895] {
   --_hue: var(--ui-text);
   --_hue-hover: var(--ui-text);
   --_hue-active: var(--ui-text);
   --_hue-text: var(--ui-text);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-84ef27e9],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-84ef27e9] {
+[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-a89a1895],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-a89a1895] {
   --_hue: var(--ui-danger);
   --_hue-hover: var(--ui-danger-hover);
   --_hue-active: var(--ui-danger-hover);
   --_hue-text: var(--ui-danger-hover);
   --_on-hue: var(--ui-on-danger);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-84ef27e9] {
+[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-a89a1895] {
   --_hue: var(--ui-success);
   --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-84ef27e9] {
+[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-a89a1895] {
   --_hue: var(--ui-warning);
   --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-84ef27e9] {
+[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-a89a1895] {
   --_hue: var(--ui-info);
   --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-84ef27e9] {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-a89a1895] {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
@@ -864,24 +864,24 @@ ol[data-v-ee3145b6] {
 }
 
 /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-84ef27e9]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-a89a1895]:hover:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
   border-color: transparent;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-84ef27e9]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-a89a1895]:active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
   border-color: transparent;
   box-shadow: var(--ui-pressed);
 }
 
 /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
-[data-component~="ui-button"][data-v-84ef27e9]:focus-visible {
+[data-component~="ui-button"][data-v-a89a1895]:focus-visible {
   outline: none;
   box-shadow:
     var(--ui-button-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-84ef27e9]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-a89a1895]:focus-visible {
   box-shadow:
     var(--ui-button-solid-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
@@ -889,7 +889,7 @@ ol[data-v-ee3145b6] {
 
 /* A loading action stays visually active; only an explicitly disabled action takes the
    neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
-[data-component~="ui-button"][data-v-84ef27e9]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+[data-component~="ui-button"][data-v-a89a1895]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
   border-color: var(--ui-disabled-border);
   background-color: var(--ui-disabled-surface);
   color: var(--ui-disabled-text);
@@ -899,19 +899,19 @@ ol[data-v-ee3145b6] {
   background-image: none;
   box-shadow: none;
 }
-:is([data-component~="ui-button"][data-ui-button-state~="loading"][data-v-84ef27e9], [data-component~="ui-button"][data-ui-button-state~="pending"][data-v-84ef27e9]):focus-visible {
+:is([data-component~="ui-button"][data-ui-button-state~="loading"][data-v-a89a1895], [data-component~="ui-button"][data-ui-button-state~="pending"][data-v-a89a1895]):focus-visible {
   box-shadow: var(--ui-focus-halo);
 }
 
 /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-84ef27e9]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-a89a1895]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
   background-color: var(--ui-disabled-surface);
   border-color: transparent;
 }
 
 /* The size states outrank :host, so sm is named too, or a small button would stay small. */
 @media (pointer: coarse) {
-[data-component~="ui-button"][data-v-84ef27e9], [data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-84ef27e9] {
+[data-component~="ui-button"][data-v-a89a1895], [data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-a89a1895] {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
@@ -921,11 +921,11 @@ ol[data-v-ee3145b6] {
    a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
    area. Only the link needs it: a hit area on every button would reach over its neighbours. */
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-84ef27e9] {
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a89a1895] {
   position: relative;
 }
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-84ef27e9]::after {
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a89a1895]::after {
   position: absolute;
   inset: 50% auto auto 50%;
   inline-size: max(100%, var(--ui-control-min-block-size));
@@ -936,7 +936,7 @@ html[data-ui-input-modality="touch"]
 
 /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
    WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-84ef27e9] {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a89a1895] {
   display: inline;
   min-block-size: 0;
   padding: 0;
@@ -954,21 +954,21 @@ html[data-ui-input-modality="touch"]
     color var(--ui-motion-fast) var(--ui-motion-ease),
     text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-84ef27e9]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a89a1895]:hover:not(:disabled, [aria-disabled="true"]) {
   color: var(--ui-button-link-hover-text, var(--ui-text-primary));
   text-decoration-color: currentColor;
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-84ef27e9]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a89a1895]:active:not(:disabled, [aria-disabled="true"]) {
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-84ef27e9]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a89a1895]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
   background: none;
   border-color: transparent;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-84ef27e9]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a89a1895]:focus-visible {
   box-shadow: none;
   /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
   outline: 2px solid var(--ui-focus-ring);
@@ -976,7 +976,7 @@ html[data-ui-input-modality="touch"]
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-button"][hidden][data-v-84ef27e9] {
+[data-component~="ui-button"][hidden][data-v-a89a1895] {
   display: none;
 }
 
@@ -1159,7 +1159,7 @@ html[data-ui-input-modality="touch"]
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-checkbox"][data-v-62f133c7] {
+[data-component~="ui-checkbox"][data-v-9a218638] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-checkbox-size: var(--ui-checkbox-size);
   --_ui-checkbox-invalid-border: var(
@@ -1176,25 +1176,25 @@ html[data-ui-input-modality="touch"]
 }
 
 /* The label, and under it an optional line saying what the choice means. */
-.text[data-v-62f133c7] {
+.text[data-v-9a218638] {
   display: flex;
   flex-direction: column;
   gap: var(--ui-space-1);
   min-inline-size: 0;
 }
-.label[data-v-62f133c7] {
+.label[data-v-9a218638] {
   min-inline-size: 0;
   line-height: var(--ui-line-height-md);
 }
-.description[data-v-62f133c7] {
+.description[data-v-9a218638] {
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height);
 }
-.description[data-v-62f133c7]:empty {
+.description[data-v-9a218638]:empty {
   display: none;
 }
-input[data-v-62f133c7] {
+input[data-v-9a218638] {
   appearance: none;
   -webkit-appearance: none;
   position: relative;
@@ -1212,21 +1212,21 @@ input[data-v-62f133c7] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-input[data-v-62f133c7]::after {
+input[data-v-9a218638]::after {
   content: "";
   position: absolute;
   opacity: 0;
   transition: opacity 120ms var(--ui-motion-ease);
 }
-input[data-v-62f133c7]:checked,
-input[data-v-62f133c7]:indeterminate {
+input[data-v-9a218638]:checked,
+input[data-v-9a218638]:indeterminate {
   border-color: var(--ui-accent-solid);
   background: var(--ui-accent-solid);
   box-shadow: var(--ui-control-inset);
 }
 
-/* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
-input[data-v-62f133c7]:checked::after {
+/* Centre the tick's box and lift it slightly for the rotated check shape. */
+input[data-v-9a218638]:checked::after {
   inset: 0;
   margin: auto;
   inline-size: 0.28rem;
@@ -1237,10 +1237,10 @@ input[data-v-62f133c7]:checked::after {
   border-color: var(--ui-text-on-accent);
   border-width: 0 0.125rem 0.125rem 0;
   opacity: 1;
-  transform: translate(0.07rem, -0.09rem) rotate(45deg);
-  animation: ui-checkbox-check-62f133c7 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+  transform: translateY(-0.09rem) rotate(45deg);
+  animation: ui-checkbox-check-9a218638 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
-input[data-v-62f133c7]:indeterminate::after {
+input[data-v-9a218638]:indeterminate::after {
   inset: 50% 0.23rem auto;
   block-size: 0.125rem;
   border-radius: var(--ui-radius-round);
@@ -1248,44 +1248,44 @@ input[data-v-62f133c7]:indeterminate::after {
   opacity: 1;
   transform: translateY(-50%);
 }
-@keyframes ui-checkbox-check-62f133c7 {
+@keyframes ui-checkbox-check-9a218638 {
 from {
     opacity: 0;
-    transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(0.55);
+    transform: translateY(-0.09rem) rotate(45deg) scale(0.55);
 }
 65% {
     opacity: 1;
-    transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(1.12);
+    transform: translateY(-0.09rem) rotate(45deg) scale(1.12);
 }
 to {
     opacity: 1;
-    transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(1);
+    transform: translateY(-0.09rem) rotate(45deg) scale(1);
 }
 }
 @media (prefers-reduced-motion: reduce) {
-input[data-v-62f133c7]::after {
+input[data-v-9a218638]::after {
     transition: none;
     animation: none;
 }
 }
-input[data-v-62f133c7]:hover:enabled {
+input[data-v-9a218638]:hover:enabled {
   border-color: var(--ui-accent-solid);
 }
-input[data-v-62f133c7]:focus-visible {
+input[data-v-9a218638]:focus-visible {
   outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
   outline-offset: 2px;
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="invalid"] input[data-v-62f133c7] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="invalid"] input[data-v-9a218638] {
   border-color: var(--_ui-checkbox-invalid-border);
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"][data-v-62f133c7] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"][data-v-9a218638] {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] .description[data-v-62f133c7] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] .description[data-v-9a218638] {
   color: var(--ui-disabled-text);
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input[data-v-62f133c7] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input[data-v-9a218638] {
   border-color: var(--ui-disabled-border);
   background: var(--ui-disabled-surface);
   box-shadow: none;
@@ -1295,32 +1295,32 @@ input[data-v-62f133c7]:focus-visible {
 /* A sized choice keeps its box and aligns instead: the label takes that size's field type size,
    and the first line centres in that control height, so the label shares a row's baseline.
    Multi-line labels and descriptions still grow downward from that first line. */
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"][data-v-62f133c7] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"][data-v-9a218638] {
   --_font: var(--ui-font-size-sm);
   --_row: var(--ui-control-size-sm);
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"][data-v-62f133c7] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"][data-v-9a218638] {
   --_font: var(--ui-font-size-md);
   --_row: var(--ui-control-size-lg);
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"][data-v-62f133c7],
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"][data-v-62f133c7] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"][data-v-9a218638],
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"][data-v-9a218638] {
   --_line: calc(var(--_font) * var(--ui-line-height-md));
   font-size: var(--_font);
   padding-block: calc((var(--_row) - var(--_line)) / 2);
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"] input[data-v-62f133c7],
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"] input[data-v-62f133c7] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"] input[data-v-9a218638],
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"] input[data-v-9a218638] {
   margin-top: calc((var(--_line) - var(--_ui-checkbox-size, 1.125rem)) / 2);
 }
 @media (pointer: coarse) {
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"][data-v-62f133c7] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"][data-v-9a218638] {
     --_row: var(--ui-control-min-block-size);
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-checkbox"][hidden][data-v-62f133c7] {
+[data-component~="ui-checkbox"][hidden][data-v-9a218638] {
   display: none;
 }
 
@@ -1422,7 +1422,7 @@ input[data-v-62f133c7]:focus-visible {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-tooltip"][data-v-8f81f4b2] {
+[data-component~="ui-tooltip"][data-v-0e272bf3] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-tooltip-border: var(--ui-tooltip-border);
   --_ui-tooltip-max-inline-size: var(--ui-tooltip-max-inline-size);
@@ -1454,7 +1454,7 @@ input[data-v-62f133c7]:focus-visible {
     display var(--ui-motion-fast) allow-discrete,
     overlay var(--ui-motion-fast) allow-discrete;
 }
-.surface[data-v-8f81f4b2] {
+.surface[data-v-0e272bf3] {
   --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-strong)));
   position: relative;
   box-sizing: border-box;
@@ -1472,7 +1472,7 @@ input[data-v-62f133c7]:focus-visible {
     var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)))
   );
 }
-[data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface[data-v-8f81f4b2] {
+[data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface[data-v-0e272bf3] {
   --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
   background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
   color: var(--_ui-tooltip-inverse-text, var(--ui-surface-default));
@@ -1480,7 +1480,7 @@ input[data-v-62f133c7]:focus-visible {
 
 /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
  * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
-.surface[data-v-8f81f4b2]::after {
+.surface[data-v-0e272bf3]::after {
   content: "";
   position: absolute;
   z-index: 1;
@@ -1496,7 +1496,7 @@ input[data-v-62f133c7]:focus-visible {
   border-end-end-radius: 1px;
   transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
 }
-[data-component~="ui-tooltip"][data-ui-actual-placement="bottom"] .surface[data-v-8f81f4b2]::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="bottom"] .surface[data-v-0e272bf3]::after {
   inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   inset-block-end: auto;
   border-inline-end-width: 0;
@@ -1506,59 +1506,59 @@ input[data-v-62f133c7]:focus-visible {
   border-end-end-radius: 0;
   border-start-start-radius: 1px;
 }
-[data-component~="ui-tooltip"][data-ui-actual-align="center"] .surface[data-v-8f81f4b2]::after {
+[data-component~="ui-tooltip"][data-ui-actual-align="center"] .surface[data-v-0e272bf3]::after {
   inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
 }
-[data-component~="ui-tooltip"][data-ui-actual-align="end"] .surface[data-v-8f81f4b2]::after {
+[data-component~="ui-tooltip"][data-ui-actual-align="end"] .surface[data-v-0e272bf3]::after {
   inset-inline-start: auto;
   inset-inline-end: var(--ui-space-3);
 }
-[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface[data-v-8f81f4b2]::after,
-[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface[data-v-8f81f4b2]::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface[data-v-0e272bf3]::after,
+[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface[data-v-0e272bf3]::after {
   inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
   inset-block-end: auto;
   border: 0 solid var(--_tooltip-line);
 }
-[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface[data-v-8f81f4b2]::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface[data-v-0e272bf3]::after {
   inset-inline-start: auto;
   inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   border-inline-end-width: 1px;
-  border-block-end-width: 1px;
+  border-block-start-width: 1px;
 }
-[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface[data-v-8f81f4b2]::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface[data-v-0e272bf3]::after {
   inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
   inset-inline-end: auto;
   border-inline-start-width: 1px;
-  border-block-start-width: 1px;
+  border-block-end-width: 1px;
 }
 [data-component~="ui-tooltip"][data-ui-actual-placement="left"][data-ui-actual-align="start"]
-  .surface[data-v-8f81f4b2]::after,
+  .surface[data-v-0e272bf3]::after,
 [data-component~="ui-tooltip"][data-ui-actual-placement="right"][data-ui-actual-align="start"]
-  .surface[data-v-8f81f4b2]::after {
+  .surface[data-v-0e272bf3]::after {
   inset-block-start: var(--ui-space-3);
 }
 [data-component~="ui-tooltip"][data-ui-actual-placement="left"][data-ui-actual-align="end"]
-  .surface[data-v-8f81f4b2]::after,
+  .surface[data-v-0e272bf3]::after,
 [data-component~="ui-tooltip"][data-ui-actual-placement="right"][data-ui-actual-align="end"]
-  .surface[data-v-8f81f4b2]::after {
+  .surface[data-v-0e272bf3]::after {
   inset-block-start: auto;
   inset-block-end: var(--ui-space-3);
 }
-[data-component~="ui-tooltip"][data-v-8f81f4b2]:popover-open {
+[data-component~="ui-tooltip"][data-v-0e272bf3]:popover-open {
   opacity: 1;
   transform: translateY(0);
 }
 @starting-style {
-[data-component~="ui-tooltip"][data-v-8f81f4b2]:popover-open {
+[data-component~="ui-tooltip"][data-v-0e272bf3]:popover-open {
     opacity: 0;
     transform: translateY(4px);
 }
 }
-[data-component~="ui-tooltip"][hidden][data-v-8f81f4b2] {
+[data-component~="ui-tooltip"][hidden][data-v-0e272bf3] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-[data-component~="ui-tooltip"][data-v-8f81f4b2] {
+[data-component~="ui-tooltip"][data-v-0e272bf3] {
     transition: none;
 }
 }
@@ -4239,7 +4239,7 @@ svg[data-v-610f67a7-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-icon-button"][data-v-e99fb642] {
+[data-component~="ui-icon-button"][data-v-ae1ec9d2] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
   --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
@@ -4247,10 +4247,10 @@ svg[data-v-610f67a7-s] {
   display: inline-flex;
   color: var(--ui-text-secondary);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-e99fb642] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ae1ec9d2] {
   position: relative;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-e99fb642]::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ae1ec9d2]::before {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
@@ -4264,13 +4264,13 @@ svg[data-v-610f67a7-s] {
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-e99fb642]:disabled::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ae1ec9d2]:disabled::before {
   opacity: 0;
 }
 
 /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
    proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content[data-v-e99fb642] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content[data-v-ae1ec9d2] {
   opacity: 1;
   transform: scale(1);
   transition:
@@ -4278,22 +4278,22 @@ svg[data-v-610f67a7-s] {
     transform calc(var(--ui-motion-fast) * 2) cubic-bezier(0.2, 1.4, 0.35, 1);
 }
 @media (hover: hover) and (pointer: fine) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-e99fb642]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ae1ec9d2]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
     border-color: transparent;
-    background: transparent;
+    background-color: transparent;
     box-shadow: none;
 }
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible)
-    .content[data-v-e99fb642] {
+    .content[data-v-ae1ec9d2] {
     opacity: 0;
     transform: scale(0.65);
     transition-duration: var(--ui-motion-fast);
 }
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-e99fb642]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ae1ec9d2]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
   opacity: 0;
 }
-[data-component~="ui-icon-button"][data-v-e99fb642] {
+[data-component~="ui-icon-button"][data-v-ae1ec9d2] {
   /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
   --_size: 2rem;
   appearance: none;
@@ -4305,7 +4305,7 @@ svg[data-v-610f67a7-s] {
   margin: 0;
   border: 1px solid transparent;
   border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
-  background: var(--ui-icon-button-surface, transparent);
+  background-color: var(--ui-icon-button-surface, transparent);
   color: inherit;
   display: inline-flex;
   align-items: center;
@@ -4319,7 +4319,7 @@ svg[data-v-610f67a7-s] {
     transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
 @media (hover: none), (pointer: coarse) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-e99fb642]::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ae1ec9d2]::before {
     opacity: 0;
 }
 }
@@ -4327,10 +4327,10 @@ svg[data-v-610f67a7-s] {
 /* A touch target without a bigger button: an invisible hit area, at least the control
    minimum, centred on the button (::before is the anticipatory guide). */
 @media (pointer: coarse) {
-[data-component~="ui-icon-button"][data-v-e99fb642] {
+[data-component~="ui-icon-button"][data-v-ae1ec9d2] {
     position: relative;
 }
-[data-component~="ui-icon-button"][data-v-e99fb642]::after {
+[data-component~="ui-icon-button"][data-v-ae1ec9d2]::after {
     content: "";
     position: absolute;
     inset: 50% auto auto 50%;
@@ -4339,10 +4339,10 @@ svg[data-v-610f67a7-s] {
     transform: translate(-50%, -50%);
 }
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-e99fb642] {
+html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-ae1ec9d2] {
   position: relative;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-e99fb642]::after {
+html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-ae1ec9d2]::after {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
@@ -4350,32 +4350,32 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-e
   block-size: max(100%, var(--ui-control-min-block-size));
   transform: translate(-50%, -50%);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-e99fb642] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-ae1ec9d2] {
   --_size: 1.75rem;
   inline-size: var(--ui-icon-button-size, var(--_size));
   block-size: var(--ui-icon-button-size, var(--_size));
   min-inline-size: var(--ui-icon-button-size, var(--_size));
   min-block-size: var(--ui-icon-button-size, var(--_size));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-e99fb642] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-ae1ec9d2] {
   --_size: 2.5rem;
   inline-size: var(--ui-icon-button-size, var(--_size));
   block-size: var(--ui-icon-button-size, var(--_size));
   min-inline-size: var(--ui-icon-button-size, var(--_size));
   min-block-size: var(--ui-icon-button-size, var(--_size));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="round"][data-v-e99fb642] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="round"][data-v-ae1ec9d2] {
   border-radius: var(--ui-radius-round);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-e99fb642] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-ae1ec9d2] {
   border-color: var(--ui-icon-button-border, var(--ui-control-border, var(--ui-border-strong)));
-  background: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
+  background-color: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
   background-image: var(--ui-raised-highlight);
   color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
   box-shadow: var(--ui-raised);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-e99fb642] {
-  background: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-ae1ec9d2] {
+  background-color: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
   background-image: var(--ui-raised-highlight);
   color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
   box-shadow: var(
@@ -4383,49 +4383,52 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-e
     0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
   );
 }
-[data-component~="ui-icon-button"][data-v-e99fb642]:hover:enabled:not([aria-disabled="true"]) {
+[data-component~="ui-icon-button"][data-v-ae1ec9d2]:hover:enabled:not([aria-disabled="true"]) {
   /* Derived from the text colour so the ghost hover shows on any background. */
-  background: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
+  background-color: var(
+    --ui-icon-button-hover-surface,
+    color-mix(in srgb, currentColor 8%, transparent)
+  );
   color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-e99fb642]:hover:enabled:not([aria-disabled="true"]) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-ae1ec9d2]:hover:enabled:not([aria-disabled="true"]) {
   border-color: var(
     --ui-icon-button-hover-border,
     var(--ui-control-border-hover, var(--ui-control-border))
   );
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-e99fb642]:hover:enabled:not([aria-disabled="true"]) {
-  background: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-ae1ec9d2]:hover:enabled:not([aria-disabled="true"]) {
+  background-color: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
 }
-[data-component~="ui-icon-button"][data-v-e99fb642]:active:enabled:not([aria-disabled="true"]) {
+[data-component~="ui-icon-button"][data-v-ae1ec9d2]:active:enabled:not([aria-disabled="true"]) {
   transform: scale(var(--ui-icon-button-active-scale, 0.96));
 }
-:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"][data-v-e99fb642], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"][data-v-e99fb642]) {
+:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"][data-v-ae1ec9d2], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"][data-v-ae1ec9d2]) {
   cursor: progress;
 }
-.content[data-v-e99fb642] {
+.content[data-v-ae1ec9d2] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 :is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"])
-  .content[data-v-e99fb642] {
+  .content[data-v-ae1ec9d2] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content[data-v-e99fb642] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content[data-v-ae1ec9d2] {
     transition: none;
 }
 }
-[data-component~="ui-icon-button"][data-v-e99fb642]:focus-visible {
+[data-component~="ui-icon-button"][data-v-ae1ec9d2]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
 
 /* Disabled is a flat neutral control, independent of the active variant's tone. */
-[data-component~="ui-icon-button"][data-v-e99fb642]:disabled {
+[data-component~="ui-icon-button"][data-v-ae1ec9d2]:disabled {
   border-color: var(--ui-disabled-border);
-  background: var(--ui-disabled-surface);
+  background-color: var(--ui-disabled-surface);
   color: var(--ui-disabled-text);
   filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
   opacity: var(--ui-icon-button-disabled-opacity, 1);
@@ -4433,23 +4436,23 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-e
   box-shadow: none;
   background-image: none;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][data-v-e99fb642]:disabled {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][data-v-ae1ec9d2]:disabled {
   border-color: transparent;
 }
-[data-component~="ui-icon-button"][data-v-e99fb642] {
+[data-component~="ui-icon-button"][data-v-ae1ec9d2] {
   --_icon-button-icon-default: var(--ui-icon-size-md);
   /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
      defaults, which its own --ui-icon-* hooks still override. */
   --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
   --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-e99fb642] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-ae1ec9d2] {
   --_icon-button-icon-default: var(--ui-icon-size-sm);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-e99fb642] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-ae1ec9d2] {
   --_icon-button-icon-default: var(--ui-icon-size-lg);
 }
-svg[data-v-e99fb642-s] {
+svg[data-v-ae1ec9d2-s] {
   inline-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
   block-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
   flex-shrink: 0;
@@ -4457,7 +4460,7 @@ svg[data-v-e99fb642-s] {
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-icon-button"][hidden][data-v-e99fb642] {
+[data-component~="ui-icon-button"][hidden][data-v-ae1ec9d2] {
   display: none;
 }
 
@@ -4679,7 +4682,7 @@ svg[data-v-e99fb642-s] {
    whole value is. The action slot takes one button at the end, inside the border, for the one
    thing the field is for ("Continue" after a site's address), so it reads as the field's action
    and not the form's. */
-[data-component~="ui-input-group"][data-v-8627fd48] {
+[data-component~="ui-input-group"][data-v-51eefe72] {
   /* The group's own border and height stand for the input's, so the group is a lone Input's height.
      Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
   --_ui-default-input-border-width: 0;
@@ -4715,36 +4718,36 @@ svg[data-v-e99fb642-s] {
 }
 
 /* The frame takes its input's size, so a small group lines up with small buttons and fields. */
-[data-component~="ui-input-group"][data-v-8627fd48]:has(.field [data-ui-input-state~="size=sm"]) {
+[data-component~="ui-input-group"][data-v-51eefe72]:has(.field [data-ui-input-state~="size=sm"]) {
   min-block-size: var(--ui-control-size-sm);
 }
-[data-component~="ui-input-group"][data-v-8627fd48]:has(.field [data-ui-input-state~="size=lg"]) {
+[data-component~="ui-input-group"][data-v-51eefe72]:has(.field [data-ui-input-state~="size=lg"]) {
   min-block-size: var(--ui-control-size-lg);
 }
 @media (pointer: coarse) {
-[data-component~="ui-input-group"][data-v-8627fd48]:has(.field [data-ui-input-state~="size=sm"]) {
+[data-component~="ui-input-group"][data-v-51eefe72]:has(.field [data-ui-input-state~="size=sm"]) {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
-[data-component~="ui-input-group"][data-v-8627fd48]:hover:not(:has(input:focus, input:disabled)) {
+[data-component~="ui-input-group"][data-v-51eefe72]:hover:not(:has(input:focus, input:disabled)) {
   border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }
 
 /* The ring shows when the field's input would show its own: when it is focus-visible, which a
    text input is for a pointer as well as a keyboard. A focused action button draws its own. */
-[data-component~="ui-input-group"][data-v-8627fd48]:has(.field input:focus-visible) {
+[data-component~="ui-input-group"][data-v-51eefe72]:has(.field input:focus-visible) {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
-[data-component~="ui-input-group"][data-v-8627fd48]:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
+[data-component~="ui-input-group"][data-v-51eefe72]:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
   border-color: var(
     --ui-input-group-invalid-border,
     var(--ui-field-danger, var(--ui-danger-solid))
   );
 }
-[data-component~="ui-input-group"][data-v-8627fd48]:has(input:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
+[data-component~="ui-input-group"][data-v-51eefe72]:has(input:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
   box-shadow: var(
     --ui-input-group-invalid-focus-shadow,
     var(--ui-control-inset),
@@ -4758,28 +4761,28 @@ svg[data-v-e99fb642-s] {
 
 /* Forced colors drop box shadows, so the focus ring becomes an outline. */
 @media (forced-colors: active) {
-[data-component~="ui-input-group"][data-v-8627fd48]:has(input:focus-visible) {
+[data-component~="ui-input-group"][data-v-51eefe72]:has(input:focus-visible) {
     outline: 2px solid Highlight;
     outline-offset: 1px;
 }
 }
-[data-component~="ui-input-group"][data-ui-input-group-state~="disabled"][data-v-8627fd48],
-[data-component~="ui-input-group"][data-v-8627fd48]:has(input:disabled) {
+[data-component~="ui-input-group"][data-ui-input-group-state~="disabled"][data-v-51eefe72],
+[data-component~="ui-input-group"][data-v-51eefe72]:has(input:disabled) {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   box-shadow: none;
   cursor: not-allowed;
 }
-.field[data-v-8627fd48] {
+.field[data-v-51eefe72] {
   display: flex;
   flex: 1;
   min-inline-size: 0;
 }
-.affix[data-v-8627fd48] {
+.affix[data-v-51eefe72] {
   display: inline-flex;
   flex: none;
   align-items: center;
   padding-inline: var(--ui-space-2);
-  color: var(--ui-text-secondary);
+  color: var(--ui-text-muted);
   font-family: var(--ui-font-family-mono);
   font-size: var(--ui-font-size-sm);
   white-space: nowrap;
@@ -4787,19 +4790,19 @@ svg[data-v-e99fb642-s] {
 
 /* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
    small button sits inside it with the difference split evenly, and the field keeps its height. */
-.action[data-v-8627fd48] {
+.action[data-v-51eefe72] {
   display: flex;
   flex: none;
   align-items: center;
   padding-inline: var(--ui-space-1);
 }
-.affix[data-v-8627fd48]:empty,
-.action[data-v-8627fd48]:empty {
+.affix[data-v-51eefe72]:empty,
+.action[data-v-51eefe72]:empty {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-input-group"][hidden][data-v-8627fd48] {
+[data-component~="ui-input-group"][hidden][data-v-51eefe72] {
   display: none;
 }
 
@@ -6048,7 +6051,7 @@ legend[data-v-3a85bfdd] + * {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-search-result-row"][data-v-5a2d6e2a] {
+[data-component~="ui-search-result-row"][data-v-5fd17258] {
   appearance: none;
   inline-size: 100%;
   min-block-size: var(--ui-search-result-row-min-height, 56px);
@@ -6059,70 +6062,67 @@ legend[data-v-3a85bfdd] + * {
   align-items: flex-start;
   gap: var(--ui-search-result-row-gap, var(--ui-space-3));
   background: var(--ui-search-result-row-surface, transparent);
-  border: none;
-  border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border-divider));
+  border: 1px solid var(--ui-search-result-row-border, transparent);
+  border-radius: var(--ui-radius-md);
   color: inherit;
   cursor: pointer;
   text-align: left;
   transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-search-result-row"][data-v-5a2d6e2a]:last-child {
-  border-block-end: none;
-}
-[data-component~="ui-search-result-row"][data-v-5a2d6e2a]:hover:enabled {
+[data-component~="ui-search-result-row"][data-v-5fd17258]:hover:enabled {
   background: var(
     --ui-search-result-row-hover-surface,
     color-mix(in srgb, var(--ui-surface) 85%, black 3%)
   );
 }
-[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"][data-v-5a2d6e2a] {
+[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"][data-v-5fd17258] {
   background: var(
     --ui-search-result-row-selected-bg,
     var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%))
   );
 }
-[data-component~="ui-search-result-row"][data-v-5a2d6e2a]:focus-visible {
+[data-component~="ui-search-result-row"][data-v-5fd17258]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: -2px;
 }
-[data-component~="ui-search-result-row"][data-v-5a2d6e2a]:disabled {
+[data-component~="ui-search-result-row"][data-v-5fd17258]:disabled {
   background: var(--ui-disabled-surface);
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.leading[data-v-5a2d6e2a],
-.trailing[data-v-5a2d6e2a] {
+.leading[data-v-5fd17258],
+.trailing[data-v-5fd17258] {
   display: inline-flex;
   align-items: flex-start;
   flex-shrink: 0;
 }
-.content[data-v-5a2d6e2a] {
+.content[data-v-5fd17258] {
   min-inline-size: 0;
   flex: 1;
   display: flex;
   flex-direction: column;
 }
-.title[data-v-5a2d6e2a],
-.meta[data-v-5a2d6e2a],
-.excerpt[data-v-5a2d6e2a] {
+.title[data-v-5fd17258],
+.meta[data-v-5fd17258],
+.excerpt[data-v-5fd17258] {
   display: block;
   min-inline-size: 0;
 }
 
 /* An unused region takes no space. */
-.leading[data-v-5a2d6e2a]:empty,
-.meta[data-v-5a2d6e2a]:empty,
-.excerpt[data-v-5a2d6e2a]:empty,
-.trailing[data-v-5a2d6e2a]:empty {
+.leading[data-v-5fd17258]:empty,
+.meta[data-v-5fd17258]:empty,
+.excerpt[data-v-5fd17258]:empty,
+.trailing[data-v-5fd17258]:empty {
   display: none;
 }
-[slot="title"][data-v-5a2d6e2a-s],[slot="meta"][data-v-5a2d6e2a-s],[slot="excerpt"][data-v-5a2d6e2a-s] {
+[slot="title"][data-v-5fd17258-s],[slot="meta"][data-v-5fd17258-s],[slot="excerpt"][data-v-5fd17258-s] {
   display: block;
   margin: 0;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-search-result-row"][hidden][data-v-5a2d6e2a] {
+[data-component~="ui-search-result-row"][hidden][data-v-5fd17258] {
   display: none;
 }
 
@@ -6167,7 +6167,7 @@ legend[data-v-3a85bfdd] + * {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-search-shell"][data-v-089e37ee] {
+[data-component~="ui-search-shell"][data-v-b1cde00b] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-search-shell-z-index: var(--ui-search-shell-z-index);
   --_ui-search-shell-padding-top: var(--ui-search-shell-padding-top);
@@ -6182,7 +6182,7 @@ legend[data-v-3a85bfdd] + * {
 
   display: contents;
 }
-dialog[data-v-089e37ee] {
+dialog[data-v-b1cde00b] {
   position: fixed;
   inset: 0;
   z-index: var(--_ui-search-shell-z-index, 400);
@@ -6200,10 +6200,10 @@ dialog[data-v-089e37ee] {
   background: var(--ui-overlay-backdrop);
   color: var(--ui-text-primary);
 }
-dialog[data-v-089e37ee]::backdrop {
+dialog[data-v-b1cde00b]::backdrop {
   background: var(--ui-overlay-backdrop);
 }
-.panel[data-v-089e37ee] {
+.panel[data-v-b1cde00b] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -6223,20 +6223,10 @@ dialog[data-v-089e37ee]::backdrop {
     var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)))
   );
 }
-.search[data-v-089e37ee] {
+.search[data-v-b1cde00b] {
   padding: var(--ui-space-3);
-  border-block-end: 1px solid var(--ui-border-divider);
-  transition:
-    border-color var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-
-/* The search region shows where typing goes, whatever the author put in it. */
-.search[data-v-089e37ee]:focus-within {
-  border-block-end-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
-  box-shadow: inset 0 -1px 0 var(--_ui-search-shell-focus-color, var(--ui-control-focus));
-}
-input[slot="search"][data-v-089e37ee-s] {
+input[slot="search"][data-v-b1cde00b-s] {
   box-sizing: border-box;
   inline-size: 100%;
   min-block-size: var(--ui-control-min-block-size);
@@ -6248,37 +6238,36 @@ input[slot="search"][data-v-089e37ee-s] {
   font: inherit;
   box-shadow: var(--ui-shadow-xs);
 }
-input[slot="search"][data-v-089e37ee-s]:focus-visible {
-  border-color: var(--ui-control-focus);
+input[slot="search"][data-v-b1cde00b-s]:focus-visible {
+  border-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
 }
-.status[data-v-089e37ee],
-.actions[data-v-089e37ee] {
+.status[data-v-b1cde00b],
+.actions[data-v-b1cde00b] {
   flex-shrink: 0;
   padding: var(--ui-space-2) var(--ui-space-4);
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
 }
-.status[data-v-089e37ee] {
-  border-block-end: 1px solid var(--ui-border-divider);
+.status[data-v-b1cde00b] {
+  padding-block-start: 0;
 }
 
 /* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */
-.actions[data-v-089e37ee] {
+.actions[data-v-b1cde00b] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
   gap: var(--ui-space-2);
   padding: var(--ui-space-3) var(--ui-space-4);
-  border-block-start: 1px solid var(--ui-border-divider);
 }
-.status[data-v-089e37ee]:empty,
-.actions[data-v-089e37ee]:empty {
+.status[data-v-b1cde00b]:empty,
+.actions[data-v-b1cde00b]:empty {
   display: none;
 }
-.body[data-v-089e37ee] {
+.body[data-v-b1cde00b] {
   flex: 1;
   min-block-size: 0;
   overflow: auto;
@@ -6306,10 +6295,10 @@ input[slot="search"][data-v-089e37ee-s]:focus-visible {
     calc(100% - var(--_ui-scroll-fade-size)) 100%;
 }
 @media (max-width: 47.9375rem) {
-dialog[data-v-089e37ee] {
+dialog[data-v-b1cde00b] {
     padding: 0;
 }
-.panel[data-v-089e37ee] {
+.panel[data-v-b1cde00b] {
     inline-size: 100%;
     min-block-size: 100dvh;
     max-block-size: none;
@@ -6319,7 +6308,7 @@ dialog[data-v-089e37ee] {
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-search-shell"][hidden][data-v-089e37ee] {
+[data-component~="ui-search-shell"][hidden][data-v-b1cde00b] {
   display: none;
 }