@threadlabs/looma 0.17.4 → 0.18.0

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;
 }
 
@@ -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;
 }
 
@@ -4518,7 +4494,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 +4530,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 +4538,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 +4550,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 +4560,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 +4591,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 +4612,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 +4621,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 +4634,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 +4658,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 +4694,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 +4737,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 +4766,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 +5019,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;
 }
 
@@ -6429,7 +6426,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 +6450,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 +6461,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 +6478,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 +6493,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 +6507,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 +6518,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 +7437,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 +7462,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 +7484,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 +7499,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 +7524,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;
 }