@threadlabs/looma 0.6.5 → 0.7.0

package/vue/components.css

@@ -204,197 +204,210 @@
   display: none;
 }
 
-[data-component~="ui-button"][data-v-4fd0ad7f] {
+[data-component~="ui-button"][data-v-8513eb5d] {
+  --_hue: var(--ui-accent);
+  --_hue-hover: var(--ui-accent-hover);
+  --_hue-active: var(--ui-accent-active);
+  --_hue-text: var(--ui-accent-active);
+  --_on-hue: var(--ui-on-accent);
+
+  --_tone: var(--_hue);
+  --_tone-hover: var(--_hue-hover);
+  --_tone-active: var(--_hue-active);
+  --_tone-text: var(--_hue-text);
+  --_on-tone: var(--_on-hue);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  color: var(--ui-action-secondary-text, var(--ui-text-primary));
-}
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-4fd0ad7f] {
-  color: var(--ui-action-primary-text, var(--ui-text-on-accent));
+  color: var(--_tone-text);
 }
-[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-4fd0ad7f] {
+[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-8513eb5d] {
   justify-content: flex-start;
   text-align: start;
 }
-[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-4fd0ad7f] {
+[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-8513eb5d] {
   display: flex;
   inline-size: 100%;
 }
-[data-component~="ui-button"][data-v-4fd0ad7f] {
+[data-component~="ui-button"][data-v-8513eb5d] {
   appearance: none;
   min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
-  border: 1px solid var(--ui-button-border, var(--ui-border-strong));
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--ui-button-border, var(--_tone));
   border-radius: var(--ui-button-radius, var(--ui-radius-md));
-  background: var(--ui-button-surface, var(--ui-surface-elevated));
-  color: var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
+  background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
+  color: var(--ui-button-text, var(--_tone-text));
   font: inherit;
   font-weight: var(--ui-font-medium);
   line-height: var(--ui-line-height-tight);
   padding: var(--ui-space-2) var(--ui-space-3);
   background-image: var(--ui-raised-highlight);
-  box-shadow: var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs)));
+  box-shadow: var(--ui-button-shadow, var(--ui-raised));
   cursor: pointer;
   transition:
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
-    transform var(--ui-motion-fast) var(--ui-motion-ease);
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
   margin: 0;
 }
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-button"][data-v-4fd0ad7f] {
+[data-component~="ui-button"][data-v-8513eb5d] {
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-4fd0ad7f] {
+[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-8513eb5d] {
   min-block-size: var(--ui-control-size-sm);
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: 0.875rem;
 }
-[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-4fd0ad7f] {
+[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-8513eb5d] {
   min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: 1rem;
 }
-[data-component~="ui-button"][data-v-4fd0ad7f]:hover:enabled {
-  background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
-  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
-}
-[data-component~="ui-button"][data-v-4fd0ad7f]:active:enabled {
-  background: var(--ui-surface-subtle);
-}
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-4fd0ad7f] {
-  border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
-  background: var(--ui-action-primary-surface, var(--ui-accent-solid));
-  color: var(--ui-action-primary-text, var(--ui-text-on-accent));
-  box-shadow: var(
-    --ui-button-solid-shadow,
-    inset 0 1px rgb(255 255 255 / 0.16),
-    var(--ui-shadow-xs)
-  );
-}
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-4fd0ad7f]:hover:enabled {
-  background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
-  border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
-  box-shadow: var(--ui-shadow-sm);
-  transform: translateY(-1px);
-}
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-4fd0ad7f]:active:enabled {
-  background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
-  border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
-  box-shadow: none;
-  transform: translateY(0);
-}
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-4fd0ad7f] {
-  border-color: var(--ui-danger-solid);
-  background: var(--ui-danger-solid);
-  color: var(--ui-text-on-accent);
-  box-shadow: var(
-    --ui-button-danger-shadow,
-    inset 0 1px rgb(255 255 255 / 0.14),
-    var(--ui-shadow-xs)
-  );
-}
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-4fd0ad7f]:hover:enabled {
-  background: var(--ui-danger-hover);
-  border-color: var(--ui-danger-hover);
-  box-shadow: var(--ui-shadow-sm);
-  transform: translateY(-1px);
-}
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-4fd0ad7f]:active:enabled {
-  box-shadow: none;
-  transform: translateY(0);
-}
-
-/* An accent-tinted secondary action: the outline, ghost, and link variants in the accent colour.
-   Solid and danger already carry their own intent. */
-[data-component~="ui-button"][data-ui-button-state~="tone=accent"][data-component~="ui-button"][data-ui-button-state~="variant=outline"][data-v-4fd0ad7f] {
-  border-color: var(--ui-button-accent-border, var(--ui-accent));
-  background: var(--ui-button-accent-surface, var(--ui-accent-subtle));
-  color: var(--ui-button-accent-text, var(--ui-accent-active));
-}
-[data-component~="ui-button"][data-ui-button-state~="tone=accent"][data-component~="ui-button"][data-ui-button-state~="variant=outline"][data-v-4fd0ad7f]:hover:enabled {
-  border-color: var(--ui-button-accent-hover-border, var(--ui-accent-hover));
-  background: var(
-    --ui-button-accent-hover-surface,
-    color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface))
-  );
-}
-[data-component~="ui-button"][data-ui-button-state~="tone=accent"][data-v-4fd0ad7f]:is([data-component~="ui-button"][data-ui-button-state~="variant=ghost"], [data-component~="ui-button"][data-ui-button-state~="variant=link"]) {
-  color: var(--ui-button-accent-text, var(--ui-accent-active));
-}
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-4fd0ad7f] {
+[data-component~="ui-button"][data-v-8513eb5d]:hover:enabled {
+  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-8513eb5d]:active:enabled {
+  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-8513eb5d],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-8513eb5d] {
+  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-8513eb5d], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-8513eb5d]):hover:enabled {
+  background-color: var(--_tone-hover);
+  border-color: var(--_tone-hover);
+}
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-8513eb5d], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-8513eb5d]):active:enabled {
+  background-color: var(--_tone-active);
+  border-color: var(--_tone-active);
+  background-image: none;
+  box-shadow: var(--ui-pressed);
+}
+
+/* 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-8513eb5d] {
+  --_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-8513eb5d],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-8513eb5d] {
+  --_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-8513eb5d] {
+  --_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-8513eb5d] {
+  --_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-8513eb5d] {
+  --_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-8513eb5d] {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
-  color: var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
+  color: var(--ui-button-ghost-text, var(--_tone-text));
 }
 
 /* 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-4fd0ad7f]:hover:enabled {
-  background: var(
-    --ui-button-ghost-hover-surface,
-    color-mix(in srgb, currentColor 8%, transparent)
-  );
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-8513eb5d]:hover:enabled {
+  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-4fd0ad7f]:active:enabled {
-  background: var(
-    --ui-button-ghost-active-surface,
-    color-mix(in srgb, currentColor 14%, transparent)
-  );
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-8513eb5d]:active:enabled {
+  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-4fd0ad7f]:focus-visible {
+[data-component~="ui-button"][data-v-8513eb5d]:focus-visible {
   outline: none;
   box-shadow:
-    var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs))),
+    var(--ui-button-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-4fd0ad7f]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-8513eb5d]:focus-visible {
   box-shadow:
-    var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs)),
+    var(--ui-button-solid-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
 
-/* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
-[data-component~="ui-button"][data-v-4fd0ad7f]:disabled {
+/* Disabled drops the tone rather than the shape: every variant keeps its own structure, so a
+   disabled outline is still an outline and a disabled ghost is still text. Intent goes — an
+   unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
+   highlight and shadow, because nothing that cannot be pressed should look raised. */
+[data-component~="ui-button"][data-v-8513eb5d]:disabled {
+  /* Derived from the tone itself, not from a separate disabled palette: faded toward the
+     page, which desaturates it at the same time. Toward the page rather than toward white,
+     so a dark theme dims where a light one lightens — the same rule, both schemes. */
+  --_tone: color-mix(in oklab, var(--_hue) 58%, var(--ui-surface));
+  --_tone-hover: var(--_tone);
+  --_tone-active: var(--_tone);
+  --_tone-text: color-mix(in oklab, var(--_hue-text) 72%, var(--ui-surface));
+  --_on-tone: var(--_tone-text);
+
   opacity: var(--ui-button-disabled-opacity, 1);
   cursor: not-allowed;
-  border-color: var(--ui-button-disabled-border, var(--ui-border));
-  background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
-  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
-}
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-4fd0ad7f]:disabled {
-  border-color: var(--ui-button-disabled-border, var(--ui-border));
-  background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
-  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
+  background-image: none;
+  box-shadow: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-4fd0ad7f]:disabled {
-  border-color: var(--ui-button-disabled-border, var(--ui-border));
-  background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
-  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
+
+/* A filled button keeps its fill, faded further so its text stays legible on it. */
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-8513eb5d], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-8513eb5d]):disabled {
+  --_tone: color-mix(in oklab, var(--_hue) 34%, var(--ui-surface));
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-4fd0ad7f]:disabled {
-  background: none;
+
+/* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
+   it takes a surface, light and tinted, rather than reading as plain text. */
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-8513eb5d]:disabled {
+  background-color: color-mix(in oklab, var(--_hue) 28%, var(--ui-surface));
   border-color: transparent;
-  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
 @media (pointer: coarse) {
-[data-component~="ui-button"][data-v-4fd0ad7f] {
+[data-component~="ui-button"][data-v-8513eb5d] {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
 
 /* 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-4fd0ad7f] {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-8513eb5d] {
   display: inline;
   min-block-size: 0;
   padding: 0;
@@ -412,22 +425,22 @@
     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-4fd0ad7f]:hover:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-8513eb5d]:hover:enabled {
   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-4fd0ad7f]:active:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-8513eb5d]:active:enabled {
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-4fd0ad7f]:disabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-8513eb5d]:disabled {
   background: none;
   border-color: transparent;
   color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-4fd0ad7f]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-8513eb5d]: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);
@@ -435,7 +448,7 @@
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-button"][hidden][data-v-4fd0ad7f] {
+[data-component~="ui-button"][hidden][data-v-8513eb5d] {
   display: none;
 }
 
@@ -505,7 +518,7 @@
   display: none;
 }
 
-[data-component~="ui-checkbox"][data-v-d8891b6a] {
+[data-component~="ui-checkbox"][data-v-964081a0] {
   display: inline-flex;
   align-items: flex-start;
   gap: var(--ui-checkbox-gap, var(--ui-space-2));
@@ -513,11 +526,11 @@
   color: var(--ui-text-primary);
   cursor: pointer;
 }
-.label[data-v-d8891b6a] {
+.label[data-v-964081a0] {
   min-inline-size: 0;
   line-height: var(--ui-line-height-md);
 }
-input[data-v-d8891b6a] {
+input[data-v-964081a0] {
   appearance: none;
   -webkit-appearance: none;
   position: relative;
@@ -535,30 +548,33 @@ input[data-v-d8891b6a] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-input[data-v-d8891b6a]::after {
+input[data-v-964081a0]::after {
   content: "";
   position: absolute;
   opacity: 0;
 }
-input[data-v-d8891b6a]:checked,
-input[data-v-d8891b6a]:indeterminate {
+input[data-v-964081a0]:checked,
+input[data-v-964081a0]:indeterminate {
   border-color: var(--ui-accent-solid);
   background: var(--ui-accent-solid);
   box-shadow: inset 0 1px 2px color-mix(in srgb, #000 16%, transparent);
 }
 
 /* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
-input[data-v-d8891b6a]:checked::after {
+input[data-v-964081a0]:checked::after {
   inset: 0;
   margin: auto;
   inline-size: 0.32rem;
   block-size: 0.58rem;
-  border: solid var(--ui-text-on-accent);
+  /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
+     component, which left the tick with no style and no colour. */
+  border-style: solid;
+  border-color: var(--ui-text-on-accent);
   border-width: 0 0.125rem 0.125rem 0;
   opacity: 1;
   transform: translateY(-0.11rem) rotate(45deg);
 }
-input[data-v-d8891b6a]:indeterminate::after {
+input[data-v-964081a0]:indeterminate::after {
   inset: 50% 0.23rem auto;
   block-size: 0.125rem;
   border-radius: var(--ui-radius-round);
@@ -566,25 +582,25 @@ input[data-v-d8891b6a]:indeterminate::after {
   opacity: 1;
   transform: translateY(-50%);
 }
-input[data-v-d8891b6a]:hover:enabled {
+input[data-v-964081a0]:hover:enabled {
   border-color: var(--ui-accent-solid);
 }
-input[data-v-d8891b6a]:focus-visible {
+input[data-v-964081a0]:focus-visible {
   outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
   outline-offset: 2px;
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"][data-v-d8891b6a] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"][data-v-964081a0] {
   color: var(--ui-text-muted);
   cursor: not-allowed;
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input[data-v-d8891b6a] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input[data-v-964081a0] {
   border-color: var(--ui-border-default);
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   cursor: not-allowed;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-checkbox"][hidden][data-v-d8891b6a] {
+[data-component~="ui-checkbox"][hidden][data-v-964081a0] {
   display: none;
 }
 
@@ -723,27 +739,27 @@ input[data-v-d8891b6a]:focus-visible {
 }
 }
 
-[data-component~="ui-combobox"][data-v-aef83c81] {
+[data-component~="ui-combobox"][data-v-1aba7b21] {
   display: grid;
   gap: var(--ui-space-1);
   min-inline-size: 0;
   color: var(--ui-text-primary);
   font: inherit;
 }
-label[data-v-aef83c81] {
+label[data-v-1aba7b21] {
   color: var(--ui-combobox-label-text, var(--ui-text-primary));
   font-size: var(--ui-combobox-label-font-size, 0.875rem);
   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-aef83c81] {
+.control[data-v-1aba7b21] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
   min-inline-size: 0;
 }
-.field[data-v-aef83c81] {
+.field[data-v-1aba7b21] {
   flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
@@ -755,14 +771,14 @@ label[data-v-aef83c81] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.field[data-v-aef83c81]:focus-within {
+.field[data-v-1aba7b21]:focus-within {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
 /* A ghost icon button: the affordance is the mark, not a box around it. */
-.help[data-v-aef83c81] {
+.help[data-v-1aba7b21] {
   flex: none;
   display: inline-flex;
   align-items: center;
@@ -779,28 +795,28 @@ label[data-v-aef83c81] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.help[data-v-aef83c81]:hover:enabled,
-.help[aria-expanded="true"][data-v-aef83c81] {
+.help[data-v-1aba7b21]:hover:enabled,
+.help[aria-expanded="true"][data-v-1aba7b21] {
   background: color-mix(in srgb, currentColor 8%, transparent);
   color: var(--ui-text-primary);
 }
-.help[data-v-aef83c81]:focus-visible {
+.help[data-v-1aba7b21]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
-.help[data-v-aef83c81]:disabled {
+.help[data-v-1aba7b21]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.help-icon[data-v-aef83c81] {
+.help-icon[data-v-1aba7b21] {
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-input[data-v-aef83c81]::selection {
+input[data-v-1aba7b21]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-input[data-v-aef83c81] {
+input[data-v-1aba7b21] {
   appearance: none;
   width: 100%;
   min-inline-size: 0;
@@ -816,11 +832,11 @@ input[data-v-aef83c81] {
   margin: 0;
   outline: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-aef83c81] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-1aba7b21] {
   min-block-size: calc(var(--ui-control-size-sm) - 2px);
   padding: var(--ui-space-1) var(--ui-space-2);
 }
-button[data-v-aef83c81] {
+button[data-v-1aba7b21] {
   appearance: none;
   display: inline-grid;
   place-items: center;
@@ -835,31 +851,31 @@ button[data-v-aef83c81] {
   padding: 0 var(--ui-space-1);
   cursor: pointer;
 }
-.affordance-icon[data-v-aef83c81] {
+.affordance-icon[data-v-1aba7b21] {
   display: block;
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-button[data-v-aef83c81]:hover:enabled {
+button[data-v-1aba7b21]:hover:enabled {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-button[data-v-aef83c81]:focus-visible {
+button[data-v-1aba7b21]: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-aef83c81]:disabled, button[data-v-aef83c81]:disabled {
+input[data-v-1aba7b21]:disabled, button[data-v-1aba7b21]:disabled {
   color: var(--ui-text-muted);
   cursor: not-allowed;
 }
-.field[data-v-aef83c81]:has(input:disabled) {
+.field[data-v-1aba7b21]: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-aef83c81] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-1aba7b21] {
   border-color: var(--ui-danger-solid, var(--ui-accent-active));
 }
-.popup[data-v-aef83c81] {
+.popup[data-v-1aba7b21] {
   box-sizing: border-box;
   min-inline-size: 12rem;
   max-inline-size: calc(100vw - 1rem);
@@ -873,40 +889,40 @@ input[data-v-aef83c81]:disabled, button[data-v-aef83c81]:disabled {
   color: var(--ui-text-primary);
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
 }
-[hidden][data-v-aef83c81] {
+[hidden][data-v-1aba7b21] {
   display: none;
 }
-.option[data-v-aef83c81] {
+.option[data-v-1aba7b21] {
   padding: var(--ui-space-2) var(--ui-space-3);
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
   overflow-wrap: anywhere;
 }
-.option[data-v-aef83c81]:hover, .option.active[data-v-aef83c81] {
+.option[data-v-1aba7b21]:hover, .option.active[data-v-1aba7b21] {
   background: var(--ui-surface-muted);
   outline: 1px solid var(--ui-focus-ring);
   outline-offset: -1px;
 }
-.option[aria-disabled="true"][data-v-aef83c81] {
+.option[aria-disabled="true"][data-v-1aba7b21] {
   color: var(--ui-text-muted);
   cursor: not-allowed;
 }
-.primary[data-v-aef83c81] {
+.primary[data-v-1aba7b21] {
   display: block;
   color: var(--ui-combobox-option-text, var(--ui-text-primary));
   font-weight: 500;
 }
-.message[data-v-aef83c81], .group[data-v-aef83c81] {
+.message[data-v-1aba7b21], .group[data-v-1aba7b21] {
   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-aef83c81], .popup .message[data-v-aef83c81] {
+.group[data-v-1aba7b21], .popup .message[data-v-1aba7b21] {
   padding: var(--ui-space-2) var(--ui-space-3);
 }
-.sr-only[data-v-aef83c81] {
+.sr-only[data-v-1aba7b21] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -915,35 +931,67 @@ input[data-v-aef83c81]:disabled, button[data-v-aef83c81]:disabled {
   white-space: nowrap;
 }
 @media (pointer: coarse) {
-button[data-v-aef83c81] {
+button[data-v-1aba7b21] {
     min-inline-size: 2.75rem;
     min-block-size: 2.75rem;
 }
 }
 @media (forced-colors: active) {
-.field[data-v-aef83c81], .popup[data-v-aef83c81] {
+.field[data-v-1aba7b21], .popup[data-v-1aba7b21] {
     border-color: CanvasText;
 }
-.option.active[data-v-aef83c81] {
+.option.active[data-v-1aba7b21] {
     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-1aba7b21] {
+  display: flex;
+  gap: var(--ui-space-2);
+  align-items: center;
+}
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-1aba7b21]::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-1aba7b21]::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: chips wrap before the cursor on one flexible field line. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-aef83c81] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-1aba7b21] {
   flex-wrap: wrap;
   align-items: center;
   gap: var(--ui-space-1);
   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"] input[data-v-aef83c81] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-1aba7b21] {
   flex: 1 0 var(--ui-combobox-item-input-min-inline-size, 5rem);
   width: auto;
   min-block-size: 1.75rem;
   padding: var(--ui-space-0-5) var(--ui-space-1);
 }
-.item[data-v-aef83c81] {
+.item[data-v-1aba7b21] {
   appearance: none;
   display: inline-flex;
   min-inline-size: 0;
@@ -957,16 +1005,16 @@ button[data-v-aef83c81] {
   font: inherit;
   cursor: default;
 }
-.item[data-v-aef83c81]:focus-visible {
+.item[data-v-1aba7b21]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 1px;
 }
-.item[data-v-aef83c81]:disabled {
+.item[data-v-1aba7b21]:disabled {
   opacity: 0.6;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-combobox"][hidden][data-v-aef83c81] {
+[data-component~="ui-combobox"][hidden][data-v-1aba7b21] {
   display: none;
 }
 
@@ -3258,7 +3306,7 @@ dialog[data-v-d27d0d8a] {
   display: none;
 }
 
-[data-component~="ui-select"][data-v-d36968b7] {
+[data-component~="ui-select"][data-v-2a885e02] {
   box-sizing: border-box;
   display: inline-block;
   inline-size: 100%;
@@ -3280,9 +3328,9 @@ dialog[data-v-d27d0d8a] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
-/* Single selects draw their own chevron: the native caret cannot be inset or sized consistently.
+/* 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-d36968b7]:not([multiple]) {
+[data-component~="ui-select"][data-v-2a885e02] {
   appearance: none;
   padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
   background-image: var(
@@ -3293,10 +3341,10 @@ dialog[data-v-d27d0d8a] {
   background-position: right var(--ui-space-3) center;
   background-size: 1.125rem 1.125rem;
 }
-[data-component~="ui-select"][data-v-d36968b7]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-select"][data-v-2a885e02]:hover:not(:focus):not(:disabled) {
   border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }
-[data-component~="ui-select"][data-v-d36968b7]:focus-visible {
+[data-component~="ui-select"][data-v-2a885e02]:focus-visible {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   outline: none;
   box-shadow: var(
@@ -3307,29 +3355,28 @@ dialog[data-v-d27d0d8a] {
 }
 
 /* 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-d36968b7],
-[data-component~="ui-select"][data-v-d36968b7]:is(:user-invalid, [data-user-invalid]) {
+[data-component~="ui-select"][aria-invalid="true"][data-v-2a885e02],
+[data-component~="ui-select"][data-v-2a885e02]:is(:user-invalid, [data-user-invalid]) {
   border-color: var(--ui-danger-solid);
 }
-[data-component~="ui-select"][data-v-d36968b7]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+[data-component~="ui-select"][data-v-2a885e02]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
   box-shadow:
     var(--ui-control-inset),
     0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
 }
-[data-component~="ui-select"][data-v-d36968b7]:disabled {
+[data-component~="ui-select"][data-v-2a885e02]:disabled {
   background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   color: var(--ui-text-muted);
   box-shadow: none;
   cursor: not-allowed;
 }
-[data-component~="ui-select"][multiple][data-v-d36968b7],
-[data-component~="ui-select"][size][data-v-d36968b7]:not([size="1"]) {
+[data-component~="ui-select"][size][data-v-2a885e02]:not([size="1"]) {
   min-block-size: 7rem;
   padding: var(--ui-space-2);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-select"][hidden][data-v-d36968b7] {
+[data-component~="ui-select"][hidden][data-v-2a885e02] {
   display: none;
 }