@threadlabs/looma 0.17.4 → 0.18.1

package/editor/chunks/extensions.js

@@ -8638,6 +8638,11 @@ function parseHtmlSlice(schema, value) {
 		if (/\s$/.test(child.textContent) || /^\s/.test(next.textContent)) continue;
 		wrapper.insertBefore(parsed.createTextNode(" "), next);
 	}
+	for (const pre of parsed.body.querySelectorAll("pre")) {
+		let last = pre;
+		while (last.lastChild) last = last.lastChild;
+		if (last.nodeType === Node.TEXT_NODE) last.textContent = last.textContent?.replace(/\r?\n$/, "") ?? "";
+	}
 	const container = document.createElement("div");
 	container.append(purify.sanitize(parsed.body.innerHTML, {
 		USE_PROFILES: { html: true },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.17.4",
+  "version": "0.18.1",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-avatar.css

@@ -30,7 +30,7 @@
       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;
@@ -46,6 +46,10 @@
       font-size: var(--ui-font-size-xs);
     }
 
+    :scope[data-ui-avatar-state~="hasImage"] {
+      border-color: var(--ui-avatar-border, var(--ui-border-strong));
+    }
+
     :scope[data-ui-avatar-state~="shape=square"] {
       border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
     }
@@ -53,7 +57,7 @@
     /* 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. */
     :scope[data-ui-avatar-state~="active"] {
-      outline: 2px solid var(--ui-avatar-active-ring, var(--ui-success));
+      outline: 1px solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
       outline-offset: 1px;
     }
 

package/styles/ui-badge.css

@@ -47,7 +47,7 @@
 /* This component's hooks style the element they are set on, and never a nested one. */
 
     :scope {
-      --_badge-surface: var(--ui-surface-subtle);
+      --_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%);
@@ -55,7 +55,7 @@
          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(in srgb, var(--_badge-color-wash) 75%, var(--_badge-color-ink) 25%);
@@ -123,32 +123,32 @@
     }
 
     :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"] {
-      --_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));
+      --_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));
     }
 
     :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"] {
-      --_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));
+      --_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));
     }
 
     :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"] {
-      --_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));
+      --_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));
     }
 
     :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"] {
-      --_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));
+      --_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));
     }
 
     :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"] {
-      --_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));
+      --_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));
     }
 
@@ -194,54 +194,48 @@
       --_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. */
+    /* 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. */
     :scope[data-ui-badge-state~="shape=tag"] {
       --_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, calc(100% - var(--_badge-point)) 0, 100% 50%, calc(100% - var(--_badge-point)) 100%, 0 100%);
     }
 
-    :scope[data-ui-badge-state~="shape=tag"]: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. */
-    :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"] {
-      position: relative;
-      isolation: isolate;
-      background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
-    }
-
-    :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"]::before {
+    :scope[data-ui-badge-state~="shape=tag"]::before {
       content: "";
       position: absolute;
-      inset: 1px;
+      inset: 0;
       z-index: -1;
       background: var(--_badge-outline-surface);
       clip-path: polygon(0 0, calc(100% - var(--_badge-point)) 0, 100% 50%, calc(100% - var(--_badge-point)) 100%, 0 100%);
       pointer-events: none;
     }
 
-    :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"]:dir(rtl)::before {
+    :scope[data-ui-badge-state~="shape=tag"]: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%);
+    }
+
+    :scope[data-ui-badge-state~="shape=tag"]:dir(rtl)::before {
       clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
     }
 
     @media (forced-colors: active) {
-      :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"] {
+      :scope[data-ui-badge-state~="shape=tag"] {
         forced-color-adjust: none;
         background: CanvasText;
         color: CanvasText;
       }
 
-      :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"]::before {
+      :scope[data-ui-badge-state~="shape=tag"]::before {
         background: Canvas;
       }
     }
@@ -263,12 +257,8 @@
     /* 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. */
 
-    /* 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. */
-
-    /* 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. */
+    /* 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. */
 
     @media (forced-colors: active) {
     }

package/styles/ui-button.css

@@ -250,7 +250,7 @@
       border-color: transparent;
     }
 
-    :scope[data-ui-button-state~="variant=ghost"]:active:not(:disabled, [aria-disabled="true"]) {
+    :scope[data-ui-button-state~="variant=ghost"]: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);

package/styles/ui-combobox.css

@@ -254,21 +254,6 @@
     [hidden] {
       display: none;
     }
-    .option {
-      padding: var(--ui-space-2) var(--ui-space-3);
-      border-radius: var(--ui-radius-sm);
-      cursor: pointer;
-      overflow-wrap: anywhere;
-    }
-    .option:hover, .option.active {
-      background: var(--ui-surface-muted);
-      outline: 1px solid var(--ui-focus-ring);
-      outline-offset: -1px;
-    }
-    .option[aria-disabled="true"] {
-      color: var(--ui-disabled-text);
-      cursor: not-allowed;
-    }
     .option[aria-disabled="true"] .primary,
     .option[aria-disabled="true"] .secondary {
       color: var(--ui-disabled-text);
@@ -336,39 +321,6 @@
       }
     }
 
-    /* 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. */
-    :scope[data-ui-combobox-state~="multiple"] .option {
-      display: flex;
-      gap: var(--ui-space-2);
-      align-items: center;
-    }
-
-    :scope[data-ui-combobox-state~="multiple"] .option::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;
-    }
-
-    :scope[data-ui-combobox-state~="multiple"] .option[aria-selected="true"]::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. */
     :scope[data-ui-combobox-state~="multiple"] .field {
@@ -448,10 +400,6 @@
     @media (forced-colors: active) {
     }
 
-    /* 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. */
-
     /* 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. */
     /* Size variants keep their control height as selections are added. */

package/styles/ui-icon-button.css

@@ -3,6 +3,10 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-icon-button-active-surface {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-icon-button-border {
       syntax: "*";
       inherits: false;
@@ -247,6 +251,12 @@
       background-color: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
     }
 
+    :scope[data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]: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);
+    }
+
     :scope:active:enabled:not([aria-disabled="true"]) {
       transform: scale(var(--ui-icon-button-active-scale, 0.96));
     }

package/styles/ui-input-group.css

@@ -68,7 +68,7 @@
       }
     }
 
-    :scope:hover:not(:has(input:focus, input:disabled)) {
+    :scope: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));
     }
 

package/styles/ui-input.css

@@ -111,7 +111,7 @@
       opacity: 1;
     }
 
-    :scope:hover:not(:focus):not(:disabled) {
+    :scope: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))));
     }
 

package/styles/ui-listbox.css

@@ -21,29 +21,55 @@
     }
 @scope ([data-component~="ui-listbox"]) to ([data-component], [data-slotted]) {
 :scope {
+      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;
     }
 
-    :scope option,
-    :scope optgroup {
-      padding: var(--ui-space-2);
+    .choices {
+      max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
+    }
+
+    :scope:not([data-enhanced]) {
+      padding: 0;
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+
+    :scope:not([data-enhanced]) .choices,
+    :scope[data-enhanced] .fallback {
+      display: none;
+    }
+
+    .fallback {
+      box-sizing: border-box;
+      inline-size: 100%;
       font: inherit;
     }
 
+    .validity {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      opacity: 0;
+      pointer-events: none;
+    }
+
     :scope:focus-visible {
       border-color: var(--ui-control-focus);
       outline: 2px solid var(--ui-focus-ring);
@@ -51,12 +77,11 @@
       box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
     }
 
-    :scope[aria-invalid="true"],
-    :scope:is(:user-invalid, [data-user-invalid]) {
+    :scope[aria-invalid="true"] {
       border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
     }
 
-    :scope:disabled {
+    :scope[aria-disabled="true"] {
       background: var(--ui-control-surface-disabled);
       color: var(--ui-disabled-text);
       box-shadow: none;

package/styles/ui-menu-item.css

@@ -46,6 +46,9 @@
     }
 
     .label {
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-2);
       flex: 1;
       min-inline-size: 0;
     }

package/styles/ui-select.css

@@ -78,7 +78,7 @@
       background-size: 1.125rem 1.125rem;
     }
 
-    :scope:hover:not(:focus):not(:disabled) {
+    :scope: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)));
     }
 

package/styles/ui-spinner.css

@@ -1,18 +1,25 @@
 /* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
-@keyframes ui-spinner-chase {
+@keyframes ui-spinner-rotate {
+      100% {
+        transform: rotate(1turn);
+      }
+    }
+@keyframes ui-spinner-dash {
       0% {
-        transform: rotate(0);
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
       }
-      70% {
-        transform: rotate(160deg);
+      50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
       }
       100% {
-        transform: rotate(1turn);
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
       }
     }
 @scope ([data-component~="ui-spinner"]) to ([data-component], [data-slotted]) {
-/* 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. */
+/* A rounded SVG arc grows and recedes over a quiet full-circle track. */
     :scope {
       display: inline-flex;
       flex: none;
@@ -21,22 +28,41 @@
       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 1s linear infinite;
     }
 
     :scope[data-ui-spinner-state~="size=sm"] {
       font-size: var(--ui-font-size-md);
     }
 
+    svg {
+      display: block;
+      inline-size: 100%;
+      block-size: 100%;
+      animation: ui-spinner-rotate 2s linear infinite;
+    }
+
+    circle {
+      stroke-width: 3;
+      stroke-linecap: round;
+    }
+
+    .track {
+      stroke: color-mix(in srgb, currentColor 16%, transparent);
+    }
+
+    .arc {
+      stroke: currentColor;
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: 0;
+      animation: ui-spinner-dash 1.5s ease-in-out infinite;
+    }
+
     @media (prefers-reduced-motion: reduce) {
-      :scope {
+      svg,
+      .arc {
         animation: none;
       }
     }
@@ -47,8 +73,7 @@
     }
 }
 @scope ([data-component~="ui-spinner"]) to ([data-component]) {
-/* 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. */
+/* A rounded SVG arc grows and recedes over a quiet full-circle track. */
 
     @media (prefers-reduced-motion: reduce) {
     }

package/styles/ui-textarea.css

@@ -57,7 +57,7 @@
       opacity: 1;
     }
 
-    :scope:hover:not(:focus):not(:disabled) {
+    :scope: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));
     }
 

package/tokens.css

@@ -134,7 +134,7 @@
     /* Lines divide content; stronger edges enclose surfaces; control edges identify inputs. */
     --ui-border-divider: color-mix(in oklab, var(--ui-border) 50%, var(--ui-border-strong));
     --ui-border-strong: color-mix(in oklab, var(--ui-text) 25%, var(--ui-surface));
-    --ui-control-border: color-mix(in oklab, var(--ui-text) 48%, var(--ui-surface));
+    --ui-control-border: color-mix(in oklab, var(--ui-text) 43%, var(--ui-surface));
 
     /* States: toward the ink for pressure, toward the page for a tint. In a dark theme the ink is
        light, so the same mixes brighten instead of darkening, without a second set of values. */
@@ -205,7 +205,7 @@
     --ui-action-secondary-text: var(--ui-text);
     --ui-control-surface: var(--ui-surface);
     --ui-control-surface-disabled: var(--ui-surface-muted);
-    --ui-control-border-hover: var(--ui-border-strong);
+    --ui-control-border-hover: color-mix(in oklab, var(--ui-text) 50%, var(--ui-surface));
     --ui-control-placeholder: var(--ui-text-secondary);
     --ui-control-focus: var(--ui-focus-ring);
     /* Derived from the ring, not a near-white tint, so the halo shows on any surface. */
@@ -287,3 +287,68 @@
     outline: none;
   }
 }
+
+/* Combobox suggestions and visible Listbox choices share the same row and checkmark. */
+@layer components {
+  [data-ui-choice-option] {
+    padding: var(--ui-space-2) var(--ui-space-3);
+    border-radius: var(--ui-radius-sm);
+    cursor: pointer;
+    overflow-wrap: anywhere;
+  }
+
+  [data-ui-choice-option]:is(:hover, .active) {
+    background: var(--ui-surface-muted);
+    outline: 1px solid var(--ui-focus-ring);
+    outline-offset: -1px;
+  }
+
+  [data-ui-choice-option][aria-disabled="true"],
+  [data-ui-choice-option][aria-disabled="true"]:hover {
+    color: var(--ui-disabled-text);
+    background: transparent;
+    outline: none;
+    cursor: not-allowed;
+  }
+
+  [data-ui-choice-option]:not([data-multiple])[aria-selected="true"] {
+    background: color-mix(in srgb, var(--ui-accent-solid) 10%, var(--ui-control-surface));
+    box-shadow: inset 2px 0 var(--ui-accent-solid);
+  }
+
+  [data-ui-choice-option][data-multiple] {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-2);
+  }
+
+  [data-ui-choice-option][data-multiple]::before {
+    content: "";
+    flex: none;
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
+    border-radius: var(--ui-radius-sm);
+    background-color: var(--ui-control-surface);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 0.7rem;
+  }
+
+  [data-ui-choice-option][data-multiple][aria-selected="true"]::before {
+    border-color: var(--ui-accent-solid);
+    background-color: var(--ui-accent-solid);
+    background-image: var(
+      --_ui-combobox-option-check,
+      var(
+        --ui-choice-check-icon,
+        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")
+      )
+    );
+  }
+
+  [aria-disabled="true"] [data-ui-choice-option] {
+    color: var(--ui-disabled-text);
+    cursor: not-allowed;
+  }
+}