@threadlabs/looma 0.17.4 → 0.18.1

package/vue/components.css

@@ -134,7 +134,7 @@ svg[data-v-988c6eae] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-avatar"][data-v-f9a69ac3] {
+[data-component~="ui-avatar"][data-v-f0891fb1] {
   --_ui-default-icon-size: 1.25rem;
   display: inline-grid;
   place-items: center;
@@ -142,7 +142,11 @@ svg[data-v-988c6eae] {
   inline-size: 2.5rem;
   block-size: 2.5rem;
   border-radius: var(--ui-avatar-radius, var(--ui-radius-round));
-  border: 1px solid var(--ui-avatar-border, var(--ui-border-strong));
+  border: 1px solid
+    var(
+      --ui-avatar-border,
+      color-mix(in srgb, var(--ui-accent-solid) 35%, var(--ui-surface-default))
+    );
   background: var(--ui-avatar-surface, var(--ui-accent-soft));
   color: var(--ui-avatar-text, var(--ui-accent-subtle-text, var(--ui-accent-solid)));
   font: inherit;
@@ -150,29 +154,32 @@ svg[data-v-988c6eae] {
   font-weight: 600;
   text-transform: uppercase;
 }
-[data-component~="ui-avatar"][data-ui-avatar-state~="size=sm"][data-v-f9a69ac3] {
+[data-component~="ui-avatar"][data-ui-avatar-state~="size=sm"][data-v-f0891fb1] {
   --_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~="shape=square"][data-v-f9a69ac3] {
+[data-component~="ui-avatar"][data-ui-avatar-state~="hasImage"][data-v-f0891fb1] {
+  border-color: var(--ui-avatar-border, var(--ui-border-strong));
+}
+[data-component~="ui-avatar"][data-ui-avatar-state~="shape=square"][data-v-f0891fb1] {
   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-f9a69ac3] {
-  outline: 2px solid var(--ui-avatar-active-ring, var(--ui-success));
+[data-component~="ui-avatar"][data-ui-avatar-state~="active"][data-v-f0891fb1] {
+  outline: 1px solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
   outline-offset: 1px;
 }
-.image[data-v-f9a69ac3],img[data-v-f9a69ac3-s] {
+.image[data-v-f0891fb1],img[data-v-f0891fb1-s] {
   grid-area: 1 / 1;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
 }
-.fallback[data-v-f9a69ac3] {
+.fallback[data-v-f0891fb1] {
   grid-area: 1 / 1;
   display: inline-flex;
   align-items: center;
@@ -185,7 +192,7 @@ svg[data-v-988c6eae] {
 /* 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-f9a69ac3] {
+.fallback[data-v-f0891fb1] {
     display: block;
     text-align: center;
     align-content: center;
@@ -193,12 +200,12 @@ svg[data-v-988c6eae] {
     text-box-edge: cap alphabetic;
 }
 }
-[hidden][data-v-f9a69ac3] {
+[hidden][data-v-f0891fb1] {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-avatar"][hidden][data-v-f9a69ac3] {
+[data-component~="ui-avatar"][hidden][data-v-f0891fb1] {
   display: none;
 }
 
@@ -316,8 +323,8 @@ svg[data-v-988c6eae] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-badge"][data-v-38a29166] {
-  --_badge-surface: var(--ui-surface-subtle);
+[data-component~="ui-badge"][data-v-fe098822] {
+  --_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. */
   --_badge-border: color-mix(in srgb, var(--_badge-surface) 75%, var(--_badge-text) 25%);
@@ -325,7 +332,7 @@ svg[data-v-988c6eae] {
      surface, text, and border hooks. Each value is invalid, so the tone shows, while it is unset. The
      mixes keep 4.5:1 text contrast for any colour, in a light theme or a dark one. */
   --_ui-badge-color: var(--ui-badge-color);
-  --_badge-color-wash: color-mix(in oklab, var(--_ui-badge-color) 15%, var(--ui-surface-default));
+  --_badge-color-wash: color-mix(in oklab, var(--_ui-badge-color) 13%, var(--ui-surface-default));
   --_badge-color-ink: color-mix(in oklab, var(--_ui-badge-color) 35%, var(--ui-text-primary));
   --_badge-color-surface: var(--_badge-color-wash);
   --_badge-color-border: color-mix(
@@ -360,7 +367,7 @@ svg[data-v-988c6eae] {
  * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
  * replaces, still sizes to its label rather than filling its container. */
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-badge"][data-v-38a29166] {
+[data-component~="ui-badge"][data-v-fe098822] {
     display: inline-block;
     min-block-size: var(--ui-badge-min-block-size, 1.5rem);
     text-align: center;
@@ -369,65 +376,65 @@ svg[data-v-988c6eae] {
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-38a29166] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-fe098822] {
   --_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-38a29166] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-fe098822] {
   --_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-38a29166] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-fe098822] {
   --_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-38a29166] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-fe098822] {
   --_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-38a29166] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-fe098822] {
   --_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-38a29166] {
-  --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 22%, var(--ui-surface-default));
-  --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 28%, var(--ui-surface-default));
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-fe098822] {
+  --_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-38a29166] {
-  --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 22%, var(--ui-surface-default));
-  --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 28%, var(--ui-surface-default));
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-fe098822] {
+  --_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-38a29166] {
-  --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 22%, var(--ui-surface-default));
-  --_badge-border: color-mix(in srgb, var(--ui-success-solid) 28%, var(--ui-surface-default));
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-fe098822] {
+  --_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-38a29166] {
-  --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 22%, var(--ui-surface-default));
-  --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 28%, var(--ui-surface-default));
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-fe098822] {
+  --_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-38a29166] {
-  --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 22%, var(--ui-surface-default));
-  --_badge-border: color-mix(in srgb, var(--ui-info-solid) 28%, var(--ui-surface-default));
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-fe098822] {
+  --_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));
 }
 
 /* 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-38a29166] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-fe098822] {
   --_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-38a29166] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-fe098822] {
   --_badge-surface: var(--ui-surface-default);
   --_badge-border: var(--ui-border-strong);
   --_badge-text: var(--ui-text-secondary);
@@ -435,35 +442,37 @@ svg[data-v-988c6eae] {
   --_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-38a29166] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-fe098822] {
   --_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-38a29166] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-fe098822] {
   --_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-38a29166] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-fe098822] {
   --_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-38a29166] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-fe098822] {
   --_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-38a29166] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-fe098822] {
   --_badge-border: var(--ui-info-solid);
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
-/* A tag is flat at the start and points at the end. The point is cut from the box, so it has no
-   outline to follow: the edge is the fill. The end padding grows by the point's depth so the
-   label never runs into it. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-38a29166] {
+/* 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-fe098822] {
   --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
+  position: relative;
+  isolation: isolate;
   border-color: transparent;
   border-radius: 0;
+  background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
   padding-inline-end: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
   clip-path: polygon(
     0 0,
@@ -473,25 +482,10 @@ svg[data-v-988c6eae] {
     0 100%
   );
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-38a29166]: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%);
-}
-
-/* The tag clips its point, including the native border. Draw the outer shape in the border
-   colour and an inset inner shape in the surface colour to keep a visible diagonal edge. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-38a29166] {
-  position: relative;
-  isolation: isolate;
-  background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
-}
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-38a29166]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-fe098822]::before {
   content: "";
   position: absolute;
-  inset: 1px;
+  inset: 0;
   z-index: -1;
   background: var(--_badge-outline-surface);
   clip-path: polygon(
@@ -503,22 +497,29 @@ svg[data-v-988c6eae] {
   );
   pointer-events: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-38a29166]:dir(rtl)::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-fe098822]: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-fe098822]: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~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-38a29166] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-fe098822] {
     forced-color-adjust: none;
     background: CanvasText;
     color: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-38a29166]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-fe098822]::before {
     background: Canvas;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden][data-v-38a29166] {
+[data-component~="ui-badge"][hidden][data-v-fe098822] {
   display: none;
 }
 
@@ -589,9 +590,8 @@ ol[data-v-ee3145b6] {
   display: none;
 }
 
-/* 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-f5f5cd89] {
+/* A rounded SVG arc grows and recedes over a quiet full-circle track. */
+[data-component~="ui-spinner"][data-v-7dbd4f40] {
   display: inline-flex;
   flex: none;
   align-items: center;
@@ -599,37 +599,60 @@ ol[data-v-ee3145b6] {
   box-sizing: border-box;
   inline-size: 1em;
   block-size: 1em;
-  border: 2px solid transparent;
-  border-block-start-color: currentColor;
-  border-inline-end-color: color-mix(in srgb, currentColor 52%, transparent);
-  border-radius: 50%;
   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-f5f5cd89] {
+[data-component~="ui-spinner"][data-ui-spinner-state~="size=sm"][data-v-7dbd4f40] {
   font-size: var(--ui-font-size-md);
 }
-@keyframes ui-spinner-chase-f5f5cd89 {
-0% {
-    transform: rotate(0);
+svg[data-v-7dbd4f40] {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  animation: ui-spinner-rotate-7dbd4f40 2s linear infinite;
+}
+circle[data-v-7dbd4f40] {
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+.track[data-v-7dbd4f40] {
+  stroke: color-mix(in srgb, currentColor 16%, transparent);
 }
-70% {
-    transform: rotate(160deg);
+.arc[data-v-7dbd4f40] {
+  stroke: currentColor;
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  animation: ui-spinner-dash-7dbd4f40 1.5s ease-in-out infinite;
 }
+@keyframes ui-spinner-rotate-7dbd4f40 {
 100% {
     transform: rotate(1turn);
 }
 }
+@keyframes ui-spinner-dash-7dbd4f40 {
+0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+}
+50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+}
+100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+}
+}
 @media (prefers-reduced-motion: reduce) {
-[data-component~="ui-spinner"][data-v-f5f5cd89] {
+svg[data-v-7dbd4f40],
+  .arc[data-v-7dbd4f40] {
     animation: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-spinner"][hidden][data-v-f5f5cd89] {
+[data-component~="ui-spinner"][hidden][data-v-7dbd4f40] {
   display: none;
 }
 
@@ -706,7 +729,7 @@ ol[data-v-ee3145b6] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-button"][data-v-a89a1895] {
+[data-component~="ui-button"][data-v-720dbd9f] {
   --_hue: var(--ui-accent);
   --_hue-hover: var(--ui-accent-hover);
   --_hue-active: var(--ui-accent-active);
@@ -725,15 +748,15 @@ ol[data-v-ee3145b6] {
   vertical-align: middle;
   color: var(--_tone-text);
 }
-[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-720dbd9f] {
   justify-content: flex-start;
   text-align: start;
 }
-[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-720dbd9f] {
   display: flex;
   inline-size: 100%;
 }
-[data-component~="ui-button"][data-v-a89a1895] {
+[data-component~="ui-button"][data-v-720dbd9f] {
   appearance: none;
   min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
   border-style: solid;
@@ -761,27 +784,27 @@ ol[data-v-ee3145b6] {
 }
 
 /* An anchor keeps the boxed button look even when an app styles ordinary links. */
-[data-component~="ui-button"][data-v-a89a1895]:is(a) {
+[data-component~="ui-button"][data-v-720dbd9f]:is(a) {
   text-decoration: none;
 }
-.spinner-wrap[data-v-a89a1895] {
+.spinner-wrap[data-v-720dbd9f] {
   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-a89a1895] {
+[data-component~="ui-button"][data-v-720dbd9f] {
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-720dbd9f] {
   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-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-720dbd9f] {
   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 +812,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-a89a1895]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-720dbd9f]: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-a89a1895]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-720dbd9f]: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-a89a1895],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-720dbd9f],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-720dbd9f] {
   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-a89a1895], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-a89a1895]):hover:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-720dbd9f], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-720dbd9f]):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-a89a1895], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-a89a1895]):active:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-720dbd9f], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-720dbd9f]):active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-active);
   border-color: var(--_tone-active);
   background-image: none;
@@ -820,43 +843,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-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-720dbd9f] {
   --_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-a89a1895],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-720dbd9f],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-720dbd9f] {
   --_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-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-720dbd9f] {
   --_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-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-720dbd9f] {
   --_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-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-720dbd9f] {
   --_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-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-720dbd9f] {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
@@ -864,24 +887,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-a89a1895]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-720dbd9f]: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-a89a1895]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-720dbd9f]:is(:active, [aria-expanded="true"]):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-a89a1895]:focus-visible {
+[data-component~="ui-button"][data-v-720dbd9f]: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-a89a1895]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-720dbd9f]:focus-visible {
   box-shadow:
     var(--ui-button-solid-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
@@ -889,7 +912,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-a89a1895]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+[data-component~="ui-button"][data-v-720dbd9f]: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 +922,19 @@ ol[data-v-ee3145b6] {
   background-image: none;
   box-shadow: none;
 }
-: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 {
+:is([data-component~="ui-button"][data-ui-button-state~="loading"][data-v-720dbd9f], [data-component~="ui-button"][data-ui-button-state~="pending"][data-v-720dbd9f]):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-a89a1895]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-720dbd9f]: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-a89a1895], [data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-a89a1895] {
+[data-component~="ui-button"][data-v-720dbd9f], [data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-720dbd9f] {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
@@ -921,11 +944,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-a89a1895] {
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-720dbd9f] {
   position: relative;
 }
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a89a1895]::after {
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-720dbd9f]::after {
   position: absolute;
   inset: 50% auto auto 50%;
   inline-size: max(100%, var(--ui-control-min-block-size));
@@ -936,7 +959,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-a89a1895] {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-720dbd9f] {
   display: inline;
   min-block-size: 0;
   padding: 0;
@@ -954,21 +977,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-a89a1895]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-720dbd9f]: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-a89a1895]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-720dbd9f]:active:not(:disabled, [aria-disabled="true"]) {
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a89a1895]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-720dbd9f]: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-a89a1895]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-720dbd9f]: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 +999,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-a89a1895] {
+[data-component~="ui-button"][hidden][data-v-720dbd9f] {
   display: none;
 }
 
@@ -1628,7 +1651,7 @@ input[data-v-9a218638]:focus-visible {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-combobox"][data-v-87a4808b] {
+[data-component~="ui-combobox"][data-v-f90db7fa] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-combobox-label-text: var(--ui-combobox-label-text);
   --_ui-combobox-label-font-size: var(--ui-combobox-label-font-size);
@@ -1653,20 +1676,20 @@ input[data-v-9a218638]:focus-visible {
   color: var(--ui-text-primary);
   font: inherit;
 }
-label[data-v-87a4808b] {
+label[data-v-f90db7fa] {
   color: var(--_ui-combobox-label-text, var(--ui-text-primary));
   font-size: var(--_ui-combobox-label-font-size, var(--ui-font-size-sm));
   font-weight: 500;
 }
 /* The field and anything that annotates it sit on one row; the help button is beside the box,
    not inside it, because a control's box holds its value. */
-.control[data-v-87a4808b] {
+.control[data-v-f90db7fa] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
   min-inline-size: 0;
 }
-.field[data-v-87a4808b] {
+.field[data-v-f90db7fa] {
   flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
@@ -1678,19 +1701,19 @@ label[data-v-87a4808b] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.field[data-v-87a4808b]:focus-within {
+.field[data-v-f90db7fa]:focus-within {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
-.entry[data-v-87a4808b] {
+.entry[data-v-f90db7fa] {
   display: flex;
   flex: 1 1 auto;
   min-inline-size: 0;
 }
 /* A ghost icon button: the affordance is the mark, not a box around it. */
-.help[data-v-87a4808b] {
+.help[data-v-f90db7fa] {
   flex: none;
   display: inline-flex;
   align-items: center;
@@ -1707,28 +1730,28 @@ label[data-v-87a4808b] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.help[data-v-87a4808b]:hover:enabled,
-.help[aria-expanded="true"][data-v-87a4808b] {
+.help[data-v-f90db7fa]:hover:enabled,
+.help[aria-expanded="true"][data-v-f90db7fa] {
   background: color-mix(in srgb, currentColor 8%, transparent);
   color: var(--ui-text-primary);
 }
-.help[data-v-87a4808b]:focus-visible {
+.help[data-v-f90db7fa]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
-.help[data-v-87a4808b]:disabled {
+.help[data-v-f90db7fa]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.help-icon[data-v-87a4808b] {
+.help-icon[data-v-f90db7fa] {
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-input[data-v-87a4808b]::selection {
+input[data-v-f90db7fa]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-input[data-v-87a4808b] {
+input[data-v-f90db7fa] {
   appearance: none;
   width: 100%;
   min-inline-size: 0;
@@ -1744,20 +1767,20 @@ input[data-v-87a4808b] {
   margin: 0;
   outline: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-87a4808b] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-f90db7fa] {
   --_row: var(--ui-control-size-sm);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-87a4808b] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-f90db7fa] {
   min-block-size: calc(var(--_row) - 2px);
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"] input[data-v-87a4808b] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"] input[data-v-f90db7fa] {
   min-block-size: calc(var(--ui-control-size-lg) - 2px);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: var(--ui-font-size-md);
 }
-button[data-v-87a4808b] {
+button[data-v-f90db7fa] {
   appearance: none;
   display: inline-grid;
   place-items: center;
@@ -1772,35 +1795,35 @@ button[data-v-87a4808b] {
   padding: 0 var(--ui-space-1);
   cursor: pointer;
 }
-.affordance-icon[data-v-87a4808b] {
+.affordance-icon[data-v-f90db7fa] {
   display: block;
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-button[data-v-87a4808b]:hover:enabled {
+button[data-v-f90db7fa]:hover:enabled {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-button[data-v-87a4808b]:focus-visible {
+button[data-v-f90db7fa]:focus-visible {
   outline: none;
   background: var(--ui-surface-muted);
   box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
-input[data-v-87a4808b]:disabled, button[data-v-87a4808b]:disabled {
+input[data-v-f90db7fa]:disabled, button[data-v-f90db7fa]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.field[data-v-87a4808b]:has(input:disabled) {
+.field[data-v-f90db7fa]:has(input:disabled) {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-87a4808b],
-[data-component~="ui-combobox"][data-ui-combobox-state~="invalid"] .field[data-v-87a4808b] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-f90db7fa],
+[data-component~="ui-combobox"][data-ui-combobox-state~="invalid"] .field[data-v-f90db7fa] {
   border-color: var(
     --_ui-combobox-invalid-border,
     var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active)))
   );
 }
-.popup[data-v-87a4808b] {
+.popup[data-v-f90db7fa] {
   box-sizing: border-box;
   min-inline-size: 12rem;
   max-inline-size: calc(100vw - 1rem);
@@ -1821,61 +1844,46 @@ input[data-v-87a4808b]:disabled, button[data-v-87a4808b]:disabled {
     var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
   );
 }
-[hidden][data-v-87a4808b] {
+[hidden][data-v-f90db7fa] {
   display: none;
 }
-.option[data-v-87a4808b] {
-  padding: var(--ui-space-2) var(--ui-space-3);
-  border-radius: var(--ui-radius-sm);
-  cursor: pointer;
-  overflow-wrap: anywhere;
-}
-.option[data-v-87a4808b]:hover, .option.active[data-v-87a4808b] {
-  background: var(--ui-surface-muted);
-  outline: 1px solid var(--ui-focus-ring);
-  outline-offset: -1px;
-}
-.option[aria-disabled="true"][data-v-87a4808b] {
-  color: var(--ui-disabled-text);
-  cursor: not-allowed;
-}
-.option[aria-disabled="true"] .primary[data-v-87a4808b],
-.option[aria-disabled="true"] .secondary[data-v-87a4808b] {
+.option[aria-disabled="true"] .primary[data-v-f90db7fa],
+.option[aria-disabled="true"] .secondary[data-v-f90db7fa] {
   color: var(--ui-disabled-text);
 }
-.primary[data-v-87a4808b] {
+.primary[data-v-f90db7fa] {
   display: block;
   color: var(--_ui-combobox-option-text, var(--ui-text-primary));
   font-weight: 500;
 }
 /* A row with a tag or a description: the label and its tag on one line, the description under them. */
-.detail[data-v-87a4808b] {
+.detail[data-v-f90db7fa] {
   display: grid;
   gap: var(--ui-space-0-5);
   min-inline-size: 0;
 }
-.line[data-v-87a4808b] {
+.line[data-v-f90db7fa] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--ui-space-2);
 }
-.description[data-v-87a4808b] {
+.description[data-v-f90db7fa] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
 }
-.message[data-v-87a4808b], .group[data-v-87a4808b] {
+.message[data-v-f90db7fa], .group[data-v-f90db7fa] {
   color: var(--_ui-combobox-message-text, var(--ui-text-secondary));
   font-weight: 400;
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
   overflow-wrap: anywhere;
 }
-.group[data-v-87a4808b], .popup .message[data-v-87a4808b] {
+.group[data-v-f90db7fa], .popup .message[data-v-f90db7fa] {
   padding: var(--ui-space-2) var(--ui-space-3);
 }
-.sr-only[data-v-87a4808b] {
+.sr-only[data-v-f90db7fa] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -1884,77 +1892,45 @@ input[data-v-87a4808b]:disabled, button[data-v-87a4808b]:disabled {
   white-space: nowrap;
 }
 @media (pointer: coarse) {
-button[data-v-87a4808b] {
+button[data-v-f90db7fa] {
     min-inline-size: 2.75rem;
     min-block-size: 2.75rem;
 }
   /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
      body-size text: below 16px, iOS zooms the page into the focused field. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-87a4808b] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-f90db7fa] {
     --_row: var(--ui-control-min-block-size);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-87a4808b] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-f90db7fa] {
     font-size: inherit;
 }
 }
 @media (forced-colors: active) {
-.field[data-v-87a4808b], .popup[data-v-87a4808b] {
+.field[data-v-f90db7fa], .popup[data-v-f90db7fa] {
     border-color: CanvasText;
 }
-.option.active[data-v-87a4808b] {
+.option.active[data-v-f90db7fa] {
     outline-color: Highlight;
 }
 }
 
-/* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
-   before anything is picked. aria-selected is the state; this draws it.
-   Longhands, not shorthands: lowering drops a shorthand that omits a component. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-87a4808b] {
-  display: flex;
-  gap: var(--ui-space-2);
-  align-items: center;
-}
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-87a4808b]::before {
-  content: "";
-  flex: none;
-  inline-size: 1.125rem;
-  block-size: 1.125rem;
-  border-style: solid;
-  border-width: 1px;
-  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
-  border-radius: var(--ui-radius-sm);
-  background-color: var(--ui-control-surface, var(--ui-surface-default));
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 0.7rem;
-}
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"]
-  .option[aria-selected="true"][data-v-87a4808b]::before {
-  border-color: var(--ui-accent-solid);
-  background-color: var(--ui-accent-solid);
-  background-image: var(
-    --_ui-combobox-option-check,
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-9'/%3E%3C/svg%3E")
-  );
-}
-
 /* Multiple mode keeps one control height. Chips and the input scroll within the entry,
    while the clear and disclosure controls remain fixed at the end of the field. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-87a4808b] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-f90db7fa] {
   align-items: center;
   min-block-size: var(--_ui-combobox-item-min-block-size, 2.5rem);
   padding: var(--ui-space-1);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .entry[data-v-87a4808b] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .entry[data-v-f90db7fa] {
   align-items: center;
   gap: var(--ui-space-1);
   overflow-x: auto;
   scrollbar-width: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .entry[data-v-87a4808b]::-webkit-scrollbar {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .entry[data-v-f90db7fa]::-webkit-scrollbar {
   display: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-87a4808b] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-f90db7fa] {
   flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
   width: auto;
   min-block-size: 1.75rem;
@@ -1962,25 +1938,25 @@ button[data-v-87a4808b] {
 }
 /* Size variants keep their control height as selections are added. */
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"]
-  .field[data-v-87a4808b] {
+  .field[data-v-f90db7fa] {
   min-block-size: 0;
   padding: var(--ui-space-0-5);
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"]
-  input[data-v-87a4808b] {
+  input[data-v-f90db7fa] {
   min-block-size: calc(var(--_row) - 2px - 2 * var(--ui-space-0-5));
   padding: 0 var(--ui-space-1);
 }
 /* A large multiple field starts at the large control height, as sm starts at the small one. */
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"]
-  .field[data-v-87a4808b] {
+  .field[data-v-f90db7fa] {
   min-block-size: 0;
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"]
-  input[data-v-87a4808b] {
+  input[data-v-f90db7fa] {
   min-block-size: calc(var(--ui-control-size-lg) - 2px - 2 * var(--ui-space-1));
 }
-.item[data-v-87a4808b] {
+.item[data-v-f90db7fa] {
   appearance: none;
   display: inline-flex;
   flex: none;
@@ -1995,16 +1971,16 @@ button[data-v-87a4808b] {
   font: inherit;
   cursor: default;
 }
-.item[data-v-87a4808b]:focus-visible {
+.item[data-v-f90db7fa]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 1px;
 }
-.item[data-v-87a4808b]:disabled {
+.item[data-v-f90db7fa]:disabled {
   color: var(--ui-disabled-text);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-combobox"][hidden][data-v-87a4808b] {
+[data-component~="ui-combobox"][hidden][data-v-f90db7fa] {
   display: none;
 }
 
@@ -4171,6 +4147,10 @@ svg[data-v-610f67a7-s] {
   syntax: "*";
   inherits: false;
 }
+@property --ui-icon-button-active-surface {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-icon-button-border {
   syntax: "*";
   inherits: false;
@@ -4239,7 +4219,7 @@ svg[data-v-610f67a7-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-icon-button"][data-v-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-v-9828be81] {
   /* 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 +4227,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-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-9828be81] {
   position: relative;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ae1ec9d2]::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-9828be81]::before {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
@@ -4264,13 +4244,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-ae1ec9d2]:disabled::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-9828be81]: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-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content[data-v-9828be81] {
   opacity: 1;
   transform: scale(1);
   transition:
@@ -4278,22 +4258,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-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) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-9828be81]: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-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-ae1ec9d2] {
+    .content[data-v-9828be81] {
     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-ae1ec9d2]: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-9828be81]: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-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-v-9828be81] {
   /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
   --_size: 2rem;
   appearance: none;
@@ -4319,7 +4299,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-ae1ec9d2]::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-9828be81]::before {
     opacity: 0;
 }
 }
@@ -4327,10 +4307,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-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-v-9828be81] {
     position: relative;
 }
-[data-component~="ui-icon-button"][data-v-ae1ec9d2]::after {
+[data-component~="ui-icon-button"][data-v-9828be81]::after {
     content: "";
     position: absolute;
     inset: 50% auto auto 50%;
@@ -4339,10 +4319,10 @@ svg[data-v-610f67a7-s] {
     transform: translate(-50%, -50%);
 }
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-ae1ec9d2] {
+html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-9828be81] {
   position: relative;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-ae1ec9d2]::after {
+html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-9828be81]::after {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
@@ -4350,31 +4330,31 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-a
   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-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-9828be81] {
   --_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-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-9828be81] {
   --_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-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="round"][data-v-9828be81] {
   border-radius: var(--ui-radius-round);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-9828be81] {
   border-color: var(--ui-icon-button-border, var(--ui-control-border, var(--ui-border-strong)));
   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-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-9828be81] {
   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));
@@ -4383,7 +4363,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-a
     0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
   );
 }
-[data-component~="ui-icon-button"][data-v-ae1ec9d2]:hover:enabled:not([aria-disabled="true"]) {
+[data-component~="ui-icon-button"][data-v-9828be81]:hover:enabled:not([aria-disabled="true"]) {
   /* Derived from the text colour so the ghost hover shows on any background. */
   background-color: var(
     --ui-icon-button-hover-surface,
@@ -4391,42 +4371,50 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-a
   );
   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-ae1ec9d2]:hover:enabled:not([aria-disabled="true"]) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-9828be81]: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-ae1ec9d2]:hover:enabled:not([aria-disabled="true"]) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-9828be81]: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-ae1ec9d2]:active:enabled:not([aria-disabled="true"]) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"][data-v-9828be81]:enabled:not([aria-disabled="true"]) {
+  background-color: var(
+    --ui-icon-button-active-surface,
+    color-mix(in srgb, currentColor 16%, transparent)
+  );
+  color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
+  box-shadow: var(--ui-pressed);
+}
+[data-component~="ui-icon-button"][data-v-9828be81]: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-ae1ec9d2], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"][data-v-ae1ec9d2]) {
+:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"][data-v-9828be81], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"][data-v-9828be81]) {
   cursor: progress;
 }
-.content[data-v-ae1ec9d2] {
+.content[data-v-9828be81] {
   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-ae1ec9d2] {
+  .content[data-v-9828be81] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content[data-v-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content[data-v-9828be81] {
     transition: none;
 }
 }
-[data-component~="ui-icon-button"][data-v-ae1ec9d2]:focus-visible {
+[data-component~="ui-icon-button"][data-v-9828be81]: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-ae1ec9d2]:disabled {
+[data-component~="ui-icon-button"][data-v-9828be81]:disabled {
   border-color: var(--ui-disabled-border);
   background-color: var(--ui-disabled-surface);
   color: var(--ui-disabled-text);
@@ -4436,23 +4424,23 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-a
   box-shadow: none;
   background-image: none;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][data-v-ae1ec9d2]:disabled {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][data-v-9828be81]:disabled {
   border-color: transparent;
 }
-[data-component~="ui-icon-button"][data-v-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-v-9828be81] {
   --_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-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-9828be81] {
   --_icon-button-icon-default: var(--ui-icon-size-sm);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-ae1ec9d2] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-9828be81] {
   --_icon-button-icon-default: var(--ui-icon-size-lg);
 }
-svg[data-v-ae1ec9d2-s] {
+svg[data-v-9828be81-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;
@@ -4460,7 +4448,7 @@ svg[data-v-ae1ec9d2-s] {
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-icon-button"][hidden][data-v-ae1ec9d2] {
+[data-component~="ui-icon-button"][hidden][data-v-9828be81] {
   display: none;
 }
 
@@ -4518,7 +4506,7 @@ svg[data-v-ae1ec9d2-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-input"][data-v-aa3c35f4] {
+[data-component~="ui-input"][data-v-0d457505] {
   box-sizing: border-box;
   display: inline-block;
   inline-size: var(--ui-input-inline-size, 100%);
@@ -4554,7 +4542,7 @@ svg[data-v-ae1ec9d2-s] {
 }
 
 /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
-[data-component~="ui-input"][data-ui-input-state~="size=sm"][data-v-aa3c35f4] {
+[data-component~="ui-input"][data-ui-input-state~="size=sm"][data-v-0d457505] {
   min-block-size: var(
     --ui-input-min-block-size,
     var(--_ui-default-input-min-block-size, var(--ui-control-size-sm))
@@ -4562,7 +4550,7 @@ svg[data-v-ae1ec9d2-s] {
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
 }
-[data-component~="ui-input"][data-ui-input-state~="size=lg"][data-v-aa3c35f4] {
+[data-component~="ui-input"][data-ui-input-state~="size=lg"][data-v-0d457505] {
   min-block-size: var(
     --ui-input-min-block-size,
     var(--_ui-default-input-min-block-size, var(--ui-control-size-lg))
@@ -4574,7 +4562,7 @@ svg[data-v-ae1ec9d2-s] {
 /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
    body-size text: below 16px, iOS zooms the page into the focused field. */
 @media (pointer: coarse) {
-[data-component~="ui-input"][data-ui-input-state~="size=sm"][data-v-aa3c35f4] {
+[data-component~="ui-input"][data-ui-input-state~="size=sm"][data-v-0d457505] {
     min-block-size: var(
       --ui-input-min-block-size,
       var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size))
@@ -4584,21 +4572,21 @@ svg[data-v-ae1ec9d2-s] {
 }
 
 /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
-[data-component~="ui-input"][data-v-aa3c35f4]::selection {
+[data-component~="ui-input"][data-v-0d457505]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-[data-component~="ui-input"][data-v-aa3c35f4]::placeholder {
+[data-component~="ui-input"][data-v-0d457505]::placeholder {
   color: var(--ui-control-placeholder, var(--ui-text-secondary));
   opacity: 1;
 }
-[data-component~="ui-input"][data-v-aa3c35f4]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-input"][data-v-0d457505]:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
   border-color: var(
     --ui-input-border-hover,
     var(--_ui-default-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)))
   );
 }
-[data-component~="ui-input"][data-v-aa3c35f4]:focus-visible {
+[data-component~="ui-input"][data-v-0d457505]:focus-visible {
   border-color: var(
     --ui-input-focus-border,
     var(--_ui-default-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
@@ -4615,14 +4603,14 @@ svg[data-v-ae1ec9d2-s] {
 }
 
 /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-[data-component~="ui-input"][aria-invalid="true"][data-v-aa3c35f4],
-[data-component~="ui-input"][data-v-aa3c35f4]:is(:user-invalid, [data-user-invalid]) {
+[data-component~="ui-input"][aria-invalid="true"][data-v-0d457505],
+[data-component~="ui-input"][data-v-0d457505]:is(:user-invalid, [data-user-invalid]) {
   border-color: var(
     --ui-input-invalid-border,
     var(--_ui-default-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
   );
 }
-[data-component~="ui-input"][data-v-aa3c35f4]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+[data-component~="ui-input"][data-v-0d457505]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
   box-shadow: var(
     --ui-input-invalid-focus-shadow,
     var(
@@ -4636,7 +4624,7 @@ svg[data-v-ae1ec9d2-s] {
     )
   );
 }
-[data-component~="ui-input"][data-v-aa3c35f4]:disabled {
+[data-component~="ui-input"][data-v-0d457505]:disabled {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   color: var(--ui-disabled-text);
   box-shadow: none;
@@ -4645,7 +4633,7 @@ svg[data-v-ae1ec9d2-s] {
 
 /* Forced colors drop box shadows, so the focus ring becomes an outline. */
 @media (forced-colors: active) {
-[data-component~="ui-input"][data-v-aa3c35f4]:focus-visible {
+[data-component~="ui-input"][data-v-0d457505]:focus-visible {
     outline: var(
       --ui-input-focus-outline,
       var(--_ui-default-input-focus-outline, 2px solid Highlight)
@@ -4658,7 +4646,7 @@ svg[data-v-ae1ec9d2-s] {
  * scroll vertically inside the field. Native inputs already center their single line. */
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-input"][hidden][data-v-aa3c35f4] {
+[data-component~="ui-input"][hidden][data-v-0d457505] {
   display: none;
 }
 
@@ -4682,7 +4670,7 @@ svg[data-v-ae1ec9d2-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-51eefe72] {
+[data-component~="ui-input-group"][data-v-5ed34845] {
   /* 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;
@@ -4718,36 +4706,36 @@ svg[data-v-ae1ec9d2-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-51eefe72]:has(.field [data-ui-input-state~="size=sm"]) {
+[data-component~="ui-input-group"][data-v-5ed34845]:has(.field [data-ui-input-state~="size=sm"]) {
   min-block-size: var(--ui-control-size-sm);
 }
-[data-component~="ui-input-group"][data-v-51eefe72]:has(.field [data-ui-input-state~="size=lg"]) {
+[data-component~="ui-input-group"][data-v-5ed34845]: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-51eefe72]:has(.field [data-ui-input-state~="size=sm"]) {
+[data-component~="ui-input-group"][data-v-5ed34845]:has(.field [data-ui-input-state~="size=sm"]) {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
-[data-component~="ui-input-group"][data-v-51eefe72]:hover:not(:has(input:focus, input:disabled)) {
+[data-component~="ui-input-group"][data-v-5ed34845]:hover:not(:has(input:focus, input:disabled, input:read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))) {
   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-51eefe72]:has(.field input:focus-visible) {
+[data-component~="ui-input-group"][data-v-5ed34845]: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-51eefe72]:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
+[data-component~="ui-input-group"][data-v-5ed34845]: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-51eefe72]:has(input:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
+[data-component~="ui-input-group"][data-v-5ed34845]: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),
@@ -4761,23 +4749,23 @@ svg[data-v-ae1ec9d2-s] {
 
 /* Forced colors drop box shadows, so the focus ring becomes an outline. */
 @media (forced-colors: active) {
-[data-component~="ui-input-group"][data-v-51eefe72]:has(input:focus-visible) {
+[data-component~="ui-input-group"][data-v-5ed34845]:has(input:focus-visible) {
     outline: 2px solid Highlight;
     outline-offset: 1px;
 }
 }
-[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) {
+[data-component~="ui-input-group"][data-ui-input-group-state~="disabled"][data-v-5ed34845],
+[data-component~="ui-input-group"][data-v-5ed34845]:has(input:disabled) {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   box-shadow: none;
   cursor: not-allowed;
 }
-.field[data-v-51eefe72] {
+.field[data-v-5ed34845] {
   display: flex;
   flex: 1;
   min-inline-size: 0;
 }
-.affix[data-v-51eefe72] {
+.affix[data-v-5ed34845] {
   display: inline-flex;
   flex: none;
   align-items: center;
@@ -4790,19 +4778,19 @@ svg[data-v-ae1ec9d2-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-51eefe72] {
+.action[data-v-5ed34845] {
   display: flex;
   flex: none;
   align-items: center;
   padding-inline: var(--ui-space-1);
 }
-.affix[data-v-51eefe72]:empty,
-.action[data-v-51eefe72]:empty {
+.affix[data-v-5ed34845]:empty,
+.action[data-v-5ed34845]: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-51eefe72] {
+[data-component~="ui-input-group"][hidden][data-v-5ed34845] {
   display: none;
 }
 
@@ -5043,45 +5031,66 @@ svg[data-v-ae1ec9d2-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-listbox"][data-v-44b33b05] {
+[data-component~="ui-listbox"][data-v-db56e4d0] {
+  position: relative;
   box-sizing: border-box;
   display: block;
   inline-size: 100%;
   min-inline-size: 0;
-  min-block-size: var(--ui-control-min-block-size);
   margin: 0;
   padding: var(--ui-space-1);
   border: 1px solid var(--ui-listbox-border, var(--ui-control-border));
   border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
   background: var(--ui-listbox-surface, var(--ui-control-surface));
   color: var(--ui-text-primary);
-  color-scheme: light dark;
   font: inherit;
   line-height: var(--ui-line-height-md);
   box-shadow: var(--ui-control-inset);
+  outline: none;
 }
-[data-component~="ui-listbox"] option[data-v-44b33b05],
-[data-component~="ui-listbox"] optgroup[data-v-44b33b05] {
-  padding: var(--ui-space-2);
+.choices[data-v-db56e4d0] {
+  max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
+}
+[data-component~="ui-listbox"][data-v-db56e4d0]:not([data-enhanced]) {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+[data-component~="ui-listbox"]:not([data-enhanced]) .choices[data-v-db56e4d0],
+[data-component~="ui-listbox"][data-enhanced] .fallback[data-v-db56e4d0] {
+  display: none;
+}
+.fallback[data-v-db56e4d0] {
+  box-sizing: border-box;
+  inline-size: 100%;
   font: inherit;
 }
-[data-component~="ui-listbox"][data-v-44b33b05]:focus-visible {
+.validity[data-v-db56e4d0] {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  opacity: 0;
+  pointer-events: none;
+}
+[data-component~="ui-listbox"][data-v-db56e4d0]:focus-visible {
   border-color: var(--ui-control-focus);
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
   box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
 }
-[data-component~="ui-listbox"][aria-invalid="true"][data-v-44b33b05],
-[data-component~="ui-listbox"][data-v-44b33b05]:is(:user-invalid, [data-user-invalid]) {
+[data-component~="ui-listbox"][aria-invalid="true"][data-v-db56e4d0] {
   border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
 }
-[data-component~="ui-listbox"][data-v-44b33b05]:disabled {
+[data-component~="ui-listbox"][aria-disabled="true"][data-v-db56e4d0] {
   background: var(--ui-control-surface-disabled);
   color: var(--ui-disabled-text);
   box-shadow: none;
   cursor: not-allowed;
 }
-[data-component~="ui-listbox"][hidden][data-v-44b33b05] {
+[data-component~="ui-listbox"][hidden][data-v-db56e4d0] {
   display: none;
 }
 
@@ -5240,7 +5249,7 @@ svg[data-v-ae1ec9d2-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-menu-item"][data-v-6b7f9bed] {
+[data-component~="ui-menu-item"][data-v-6d5ac848] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
@@ -5272,11 +5281,14 @@ svg[data-v-ae1ec9d2-s] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.label[data-v-6b7f9bed] {
+.label[data-v-6d5ac848] {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
   flex: 1;
   min-inline-size: 0;
 }
-.indicator[data-v-6b7f9bed] {
+.indicator[data-v-6d5ac848] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5289,75 +5301,75 @@ svg[data-v-ae1ec9d2-s] {
   color: var(--ui-surface);
   --_ui-default-icon-size: 0.75rem;
 }
-[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=action"] .indicator[data-v-6b7f9bed] {
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=action"] .indicator[data-v-6d5ac848] {
   display: none;
 }
 [data-component~="ui-menu-item"][data-ui-menu-item-state~="type=checkbox"][aria-checked="true"]
-  .indicator[data-v-6b7f9bed] {
+  .indicator[data-v-6d5ac848] {
   border-color: var(--ui-accent);
   background: var(--ui-accent);
 }
-[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"] .indicator[data-v-6b7f9bed] {
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"] .indicator[data-v-6d5ac848] {
   border-radius: var(--ui-radius-round);
 }
 [data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"][aria-checked="true"]
-  .indicator[data-v-6b7f9bed] {
+  .indicator[data-v-6d5ac848] {
   border-color: var(--ui-accent);
 }
 [data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"][aria-checked="true"]
-  .indicator[data-v-6b7f9bed]::after {
+  .indicator[data-v-6d5ac848]::after {
   content: "";
   inline-size: 0.375rem;
   block-size: 0.375rem;
   border-radius: var(--ui-radius-round);
   background: var(--ui-accent);
 }
-.shortcut[data-v-6b7f9bed] {
+.shortcut[data-v-6d5ac848] {
   margin-inline-start: auto;
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-normal);
 }
-.shortcut[data-v-6b7f9bed]:empty {
+.shortcut[data-v-6d5ac848]:empty {
   display: none;
 }
 
 /* Keep the text row at the shared control height where cap trimming is available. */
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-menu-item"][data-v-6b7f9bed] {
+[data-component~="ui-menu-item"][data-v-6d5ac848] {
     min-block-size: var(--ui-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem));
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-menu-item"][data-v-6b7f9bed]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
+[data-component~="ui-menu-item"][data-v-6d5ac848]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
   background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
 }
-[data-component~="ui-menu-item"][data-v-6b7f9bed]:focus-visible {
+[data-component~="ui-menu-item"][data-v-6d5ac848]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: -2px;
 }
-[data-component~="ui-menu-item"][aria-disabled="true"][data-v-6b7f9bed] {
+[data-component~="ui-menu-item"][aria-disabled="true"][data-v-6d5ac848] {
   background: var(--ui-disabled-surface);
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-6b7f9bed] {
+[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-6d5ac848] {
   border-color: var(--ui-disabled-border);
   background: transparent;
   color: var(--ui-disabled-text);
 }
-[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-6b7f9bed]::after {
+[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-6d5ac848]::after {
   background: var(--ui-disabled-text);
 }
 @media (forced-colors: active) {
-[data-component~="ui-menu-item"][data-v-6b7f9bed]:focus-visible {
+[data-component~="ui-menu-item"][data-v-6d5ac848]:focus-visible {
     outline-color: Highlight;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-menu-item"][hidden][data-v-6b7f9bed] {
+[data-component~="ui-menu-item"][hidden][data-v-6d5ac848] {
   display: none;
 }
 
@@ -6429,7 +6441,7 @@ dialog[data-v-b1cde00b] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-select"][data-v-3f68a24f] {
+[data-component~="ui-select"][data-v-699dcb22] {
   box-sizing: border-box;
   display: inline-block;
   inline-size: var(--ui-select-inline-size, 100%);
@@ -6453,7 +6465,7 @@ dialog[data-v-b1cde00b] {
 
 /* The select draws its own chevron: the native caret cannot be inset or sized consistently.
  * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
-[data-component~="ui-select"][data-v-3f68a24f] {
+[data-component~="ui-select"][data-v-699dcb22] {
   appearance: none;
   padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
   background-image: var(
@@ -6464,13 +6476,13 @@ dialog[data-v-b1cde00b] {
   background-position: right var(--ui-space-3) center;
   background-size: 1.125rem 1.125rem;
 }
-[data-component~="ui-select"][data-v-3f68a24f]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-select"][data-v-699dcb22]:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
   border-color: var(
     --ui-select-border-hover,
     var(--ui-control-border-hover, var(--ui-text-secondary))
   );
 }
-[data-component~="ui-select"][data-v-3f68a24f]:focus-visible {
+[data-component~="ui-select"][data-v-699dcb22]:focus-visible {
   border-color: var(--ui-select-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
   outline: none;
   box-shadow: var(
@@ -6481,11 +6493,11 @@ dialog[data-v-b1cde00b] {
 }
 
 /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-[data-component~="ui-select"][aria-invalid="true"][data-v-3f68a24f],
-[data-component~="ui-select"][data-v-3f68a24f]:is(:user-invalid, [data-user-invalid]) {
+[data-component~="ui-select"][aria-invalid="true"][data-v-699dcb22],
+[data-component~="ui-select"][data-v-699dcb22]:is(:user-invalid, [data-user-invalid]) {
   border-color: var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
 }
-[data-component~="ui-select"][data-v-3f68a24f]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+[data-component~="ui-select"][data-v-699dcb22]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
   box-shadow: var(
     --ui-select-invalid-focus-shadow,
     var(--ui-control-inset),
@@ -6496,13 +6508,13 @@ dialog[data-v-b1cde00b] {
     )
   );
 }
-[data-component~="ui-select"][data-v-3f68a24f]:disabled {
+[data-component~="ui-select"][data-v-699dcb22]:disabled {
   background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   color: var(--ui-disabled-text);
   box-shadow: none;
   cursor: not-allowed;
 }
-[data-component~="ui-select"][data-ui-select-state~="size=sm"][data-v-3f68a24f] {
+[data-component~="ui-select"][data-ui-select-state~="size=sm"][data-v-699dcb22] {
   min-block-size: var(--ui-control-size-sm);
   padding: var(--ui-space-1) var(--ui-space-2);
   padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1));
@@ -6510,7 +6522,7 @@ dialog[data-v-b1cde00b] {
   background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm);
   font-size: var(--ui-font-size-sm);
 }
-[data-component~="ui-select"][data-ui-select-state~="size=lg"][data-v-3f68a24f] {
+[data-component~="ui-select"][data-ui-select-state~="size=lg"][data-v-699dcb22] {
   min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
   padding-inline-end: calc(var(--ui-space-4) + 1.5rem);
@@ -6521,14 +6533,14 @@ dialog[data-v-b1cde00b] {
 /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
    body-size text: below 16px, iOS zooms the page into the focused field. */
 @media (pointer: coarse) {
-[data-component~="ui-select"][data-ui-select-state~="size=sm"][data-v-3f68a24f] {
+[data-component~="ui-select"][data-ui-select-state~="size=sm"][data-v-699dcb22] {
     min-block-size: var(--ui-control-min-block-size);
     font-size: inherit;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-select"][hidden][data-v-3f68a24f] {
+[data-component~="ui-select"][hidden][data-v-699dcb22] {
   display: none;
 }
 
@@ -7440,7 +7452,7 @@ tbody tr[data-v-a58b58d4-s]:last-child > * {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-textarea"][data-v-f371e58f] {
+[data-component~="ui-textarea"][data-v-a2e0e09f] {
   box-sizing: border-box;
   display: inline-block;
   inline-size: 100%;
@@ -7465,18 +7477,18 @@ tbody tr[data-v-a58b58d4-s]:last-child > * {
 }
 
 /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
-[data-component~="ui-textarea"][data-v-f371e58f]::selection {
+[data-component~="ui-textarea"][data-v-a2e0e09f]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-[data-component~="ui-textarea"][data-v-f371e58f]::placeholder {
+[data-component~="ui-textarea"][data-v-a2e0e09f]::placeholder {
   color: var(--ui-control-placeholder, var(--ui-text-secondary));
   opacity: 1;
 }
-[data-component~="ui-textarea"][data-v-f371e58f]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-textarea"][data-v-a2e0e09f]:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
   border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }
-[data-component~="ui-textarea"][data-v-f371e58f]:focus-visible {
+[data-component~="ui-textarea"][data-v-a2e0e09f]:focus-visible {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   outline: none;
   box-shadow: var(
@@ -7487,11 +7499,11 @@ tbody tr[data-v-a58b58d4-s]:last-child > * {
 }
 
 /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-[data-component~="ui-textarea"][aria-invalid="true"][data-v-f371e58f],
-[data-component~="ui-textarea"][data-v-f371e58f]:is(:user-invalid, [data-user-invalid]) {
+[data-component~="ui-textarea"][aria-invalid="true"][data-v-a2e0e09f],
+[data-component~="ui-textarea"][data-v-a2e0e09f]:is(:user-invalid, [data-user-invalid]) {
   border-color: var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
 }
-[data-component~="ui-textarea"][data-v-f371e58f]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+[data-component~="ui-textarea"][data-v-a2e0e09f]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
   box-shadow: var(
     --ui-textarea-invalid-focus-shadow,
     var(--ui-control-inset),
@@ -7502,24 +7514,24 @@ tbody tr[data-v-a58b58d4-s]:last-child > * {
     )
   );
 }
-[data-component~="ui-textarea"][data-v-f371e58f]:disabled {
+[data-component~="ui-textarea"][data-v-a2e0e09f]:disabled {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   color: var(--ui-disabled-text);
   box-shadow: none;
   cursor: not-allowed;
 }
-[data-component~="ui-textarea"][data-ui-textarea-state~="size=sm"][data-v-f371e58f] {
+[data-component~="ui-textarea"][data-ui-textarea-state~="size=sm"][data-v-a2e0e09f] {
   --_padding-block: var(--ui-space-1);
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
 }
-[data-component~="ui-textarea"][data-ui-textarea-state~="size=lg"][data-v-f371e58f] {
+[data-component~="ui-textarea"][data-ui-textarea-state~="size=lg"][data-v-a2e0e09f] {
   --_padding-block: var(--ui-space-3);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: var(--ui-font-size-md);
 }
 @supports (field-sizing: content) {
-[data-component~="ui-textarea"][data-ui-textarea-state~="autosize"][data-v-f371e58f] {
+[data-component~="ui-textarea"][data-ui-textarea-state~="autosize"][data-v-a2e0e09f] {
     field-sizing: content;
     min-block-size: calc(var(--_rows) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px);
 }
@@ -7527,13 +7539,13 @@ tbody tr[data-v-a58b58d4-s]:last-child > * {
 
 /* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
 @media (pointer: coarse) {
-[data-component~="ui-textarea"][data-ui-textarea-state~="size=sm"][data-v-f371e58f] {
+[data-component~="ui-textarea"][data-ui-textarea-state~="size=sm"][data-v-a2e0e09f] {
     font-size: inherit;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-textarea"][hidden][data-v-f371e58f] {
+[data-component~="ui-textarea"][hidden][data-v-a2e0e09f] {
   display: none;
 }