@threadlabs/looma 0.17.3 → 0.18.0

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.3",
+  "version": "0.18.0",
   "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

@@ -131,6 +131,11 @@
       margin: 0;
     }
 
+    /* An anchor keeps the boxed button look even when an app styles ordinary links. */
+    :scope:is(a) {
+      text-decoration: none;
+    }
+
     .spinner-wrap {
       display: inline-flex;
       flex: none;
@@ -363,6 +368,8 @@
 @scope ([data-component~="ui-button"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
+    /* An anchor keeps the boxed button look even when an app styles ordinary links. */
+
     @supports (text-box-trim: trim-both) {
     }
 

package/styles/ui-checkbox.css

@@ -14,15 +14,15 @@
 @keyframes ui-checkbox-check {
       from {
         opacity: 0;
-        transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(0.55);
+        transform: translateY(-0.09rem) rotate(45deg) scale(0.55);
       }
       65% {
         opacity: 1;
-        transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(1.12);
+        transform: translateY(-0.09rem) rotate(45deg) scale(1.12);
       }
       to {
         opacity: 1;
-        transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(1);
+        transform: translateY(-0.09rem) rotate(45deg) scale(1);
       }
     }
 @scope ([data-component~="ui-checkbox"]) to ([data-component], [data-slotted]) {
@@ -97,7 +97,7 @@
       box-shadow: var(--ui-control-inset);
     }
 
-    /* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
+    /* Centre the tick's box and lift it slightly for the rotated check shape. */
     input:checked::after {
       inset: 0;
       margin: auto;
@@ -109,7 +109,7 @@
       border-color: var(--ui-text-on-accent);
       border-width: 0 0.125rem 0.125rem 0;
       opacity: 1;
-      transform: translate(0.07rem, -0.09rem) rotate(45deg);
+      transform: translateY(-0.09rem) rotate(45deg);
       animation: ui-checkbox-check 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
     }
 
@@ -197,7 +197,7 @@
 
     /* The label, and under it an optional line saying what the choice means. */
 
-    /* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
+    /* Centre the tick's box and lift it slightly for the rotated check shape. */
 
     @media (prefers-reduced-motion: reduce) {
     }

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

@@ -117,7 +117,7 @@
     @media (hover: hover) and (pointer: fine) {
       :scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
         border-color: transparent;
-        background: transparent;
+        background-color: transparent;
         box-shadow: none;
       }
 
@@ -145,7 +145,7 @@
       margin: 0;
       border: 1px solid transparent;
       border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
-      background: var(--ui-icon-button-surface, transparent);
+      background-color: var(--ui-icon-button-surface, transparent);
       color: inherit;
       display: inline-flex;
       align-items: center;
@@ -217,14 +217,14 @@
 
     :scope[data-ui-icon-button-state~="variant=outline"] {
       border-color: var(--ui-icon-button-border, var(--ui-control-border, var(--ui-border-strong)));
-      background: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
+      background-color: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
       background-image: var(--ui-raised-highlight);
       color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
       box-shadow: var(--ui-raised);
     }
 
     :scope[data-ui-icon-button-state~="variant=solid"] {
-      background: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
+      background-color: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
       background-image: var(--ui-raised-highlight);
       color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
       box-shadow: var(
@@ -235,7 +235,7 @@
 
     :scope:hover:enabled:not([aria-disabled="true"]) {
       /* Derived from the text colour so the ghost hover shows on any background. */
-      background: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
+      background-color: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
       color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
     }
 
@@ -244,7 +244,7 @@
     }
 
     :scope[data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]) {
-      background: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
+      background-color: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
     }
 
     :scope:active:enabled:not([aria-disabled="true"]) {
@@ -279,7 +279,7 @@
     /* Disabled is a flat neutral control, independent of the active variant's tone. */
     :scope:disabled {
       border-color: var(--ui-disabled-border);
-      background: var(--ui-disabled-surface);
+      background-color: var(--ui-disabled-surface);
       color: var(--ui-disabled-text);
       filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
       opacity: var(--ui-icon-button-disabled-opacity, 1);

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));
     }
 
@@ -119,7 +119,7 @@
       flex: none;
       align-items: center;
       padding-inline: var(--ui-space-2);
-      color: var(--ui-text-secondary);
+      color: var(--ui-text-muted);
       font-family: var(--ui-font-family-mono);
       font-size: var(--ui-font-size-sm);
       white-space: nowrap;

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-search-result-row.css

@@ -45,18 +45,14 @@
       align-items: flex-start;
       gap: var(--ui-search-result-row-gap, var(--ui-space-3));
       background: var(--ui-search-result-row-surface, transparent);
-      border: none;
-      border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border-divider));
+      border: 1px solid var(--ui-search-result-row-border, transparent);
+      border-radius: var(--ui-radius-md);
       color: inherit;
       cursor: pointer;
       text-align: left;
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :scope:last-child {
-      border-block-end: none;
-    }
-
     :scope:hover:enabled {
       background: var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%));
     }

package/styles/ui-search-shell.css

@@ -96,14 +96,6 @@
 
     .search {
       padding: var(--ui-space-3);
-      border-block-end: 1px solid var(--ui-border-divider);
-      transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
-    }
-
-    /* The search region shows where typing goes, whatever the author put in it. */
-    .search:focus-within {
-      border-block-end-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
-      box-shadow: inset 0 -1px 0 var(--_ui-search-shell-focus-color, var(--ui-control-focus));
     }
 
     .status,
@@ -115,7 +107,7 @@
     }
 
     .status {
-      border-block-end: 1px solid var(--ui-border-divider);
+      padding-block-start: 0;
     }
 
     /* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */
@@ -126,7 +118,6 @@
       justify-content: flex-end;
       gap: var(--ui-space-2);
       padding: var(--ui-space-3) var(--ui-space-4);
-      border-block-start: 1px solid var(--ui-border-divider);
     }
 
     .status:empty,
@@ -180,8 +171,6 @@
 @scope ([data-component~="ui-search-shell"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
-    /* The search region shows where typing goes, whatever the author put in it. */
-
     :where([data-slotted], [data-slotted] *):is(input[slot="search"]) {
       box-sizing: border-box;
       inline-size: 100%;
@@ -196,7 +185,7 @@
     }
 
     :where([data-slotted], [data-slotted] *):is(input[slot="search"]:focus-visible) {
-      border-color: var(--ui-control-focus);
+      border-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
       outline: 2px solid var(--ui-focus-ring);
       outline-offset: 2px;
     }

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)));
     }