@threadlabs/looma 0.28.5 → 0.28.6

package/styles/ui-page-header.css

@@ -1,9 +1,16 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-page-header"] { --html-next-scope-owner: "ui-page-header" !important; }
+}
 @scope ([data-component~="ui-page-header"]) to ([data-component], [data-slotted]) {
 /* The top of a view: its title (the page's one h1), with an optional icon or mark before it, a
        short eyebrow above it, a line or two of description under it, and the view's own actions at
        the end. Every view titles itself the same way, at the same size. */
-    :scope {
+    :scope:where([data-component~="ui-page-header"]) {
       display: flex;
       flex-wrap: wrap;
       inline-size: 100%;
@@ -59,12 +66,12 @@
       gap: var(--ui-space-2);
     }
 
-    :scope[data-ui-page-header-state~="align=center"] {
+    :scope:where([data-component~="ui-page-header"])[data-ui-page-header-state~="align=center"] {
       flex-direction: column;
       text-align: center;
     }
 
-    :scope[data-ui-page-header-state~="align=center"] .copy {
+    :scope:where([data-component~="ui-page-header"])[data-ui-page-header-state~="align=center"] .copy {
       align-items: center;
       flex-basis: auto;
     }
@@ -77,7 +84,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-page-header"])[hidden] {
       display: none;
     }
 }

package/styles/ui-popover.css

@@ -1,36 +1,43 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-popover-surface {
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-popover"] { --html-next-scope-owner: "ui-popover" !important; }
+}
+@scope ([data-component~="ui-popover"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-popover-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-popover-border {
+    @property --ui-popover-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-popover-radius {
+    @property --ui-popover-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-popover-shadow {
+    @property --ui-popover-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-popover-viewport-gap {
+    @property --ui-popover-viewport-gap {
       syntax: "*";
       inherits: false;
     }
-@property --ui-popover-offset {
+    @property --ui-popover-offset {
       syntax: "*";
       inherits: false;
     }
-@property --ui-popover-padding {
+    @property --ui-popover-padding {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-popover"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
-    :scope {
+    :scope:where([data-component~="ui-popover"]) {
       --_ui-popover-surface: var(--ui-popover-surface);
       --_ui-popover-border: var(--ui-popover-border);
       --_ui-popover-radius: var(--ui-popover-radius);
@@ -63,11 +70,11 @@
       box-shadow: var(--_ui-popover-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
 
-    :scope:not(:scope[data-ui-popover-state~="internalOpen"]) {
+    :scope:where([data-component~="ui-popover"]):not(:scope:where([data-component~="ui-popover"])[data-ui-popover-state~="internalOpen"]) {
       display: none;
     }
 
-    :scope[popover] {
+    :scope:where([data-component~="ui-popover"])[popover] {
       position: fixed;
       inset: auto;
       margin: 0;
@@ -80,37 +87,37 @@
         overlay var(--ui-motion-fast) allow-discrete;
     }
 
-    :scope[popover]:popover-open {
+    :scope:where([data-component~="ui-popover"])[popover]:popover-open {
       opacity: 1;
       transform: translateY(0) scale(1);
     }
 
     @starting-style {
-      :scope[popover]:popover-open {
+      :scope:where([data-component~="ui-popover"])[popover]:popover-open {
         opacity: 0;
         transform: translateY(-4px) scale(0.99);
       }
     }
 
-    :scope[data-ui-popover-state~="size=sm"] {
+    :scope:where([data-component~="ui-popover"])[data-ui-popover-state~="size=sm"] {
       inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
       max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
     }
-    :scope[data-ui-popover-state~="size=md"] {
+    :scope:where([data-component~="ui-popover"])[data-ui-popover-state~="size=md"] {
       inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
       max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
     }
-    :scope[data-ui-popover-state~="size=lg"] {
+    :scope:where([data-component~="ui-popover"])[data-ui-popover-state~="size=lg"] {
       inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
       max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
     }
 
-    :scope[hidden] {
+    :scope:where([data-component~="ui-popover"])[hidden] {
       display: none;
     }
 
     @media (prefers-reduced-motion: reduce) {
-      :scope[popover] {
+      :scope:where([data-component~="ui-popover"])[popover] {
         transition: none;
       }
     }

package/styles/ui-radio-group.css

@@ -1,10 +1,18 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-radio-group"] { --html-next-scope-owner: "ui-radio-group" !important; }
+}
+@scope ([data-component~="ui-radio-group"]) to ([data-component], [data-slotted]) {
 @property --ui-radio-group-invalid-text {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-radio-group"]) to ([data-component], [data-slotted]) {
-:scope {
+
+    :scope:where([data-component~="ui-radio-group"]) {
       --_ui-radio-group-invalid-text: var(--ui-radio-group-invalid-text, var(--ui-field-danger, var(--ui-danger-solid)));
       display: inline-flex;
       align-items: center;
@@ -28,17 +36,17 @@
       clear: both;
     }
 
-    :scope[data-ui-radio-group-state~="invalid"] legend {
+    :scope:where([data-component~="ui-radio-group"])[data-ui-radio-group-state~="invalid"] legend {
       color: var(--_ui-radio-group-invalid-text);
     }
 
-    :scope[data-ui-radio-group-state~="orientation=vertical"] {
+    :scope:where([data-component~="ui-radio-group"])[data-ui-radio-group-state~="orientation=vertical"] {
       display: inline-grid;
       justify-items: start;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-radio-group"])[hidden] {
       display: none;
     }
 }

package/styles/ui-radio.css

@@ -1,16 +1,23 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-radio-gap {
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-radio"] { --html-next-scope-owner: "ui-radio" !important; }
+}
+@scope ([data-component~="ui-radio"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-radio-gap {
       syntax: "*";
       inherits: false;
     }
-@property --ui-radio-size {
+    @property --ui-radio-size {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-radio"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
-    :scope {
+    :scope:where([data-component~="ui-radio"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-radio-size: var(--ui-radio-size);
 
@@ -59,50 +66,50 @@
       outline-offset: var(--ui-focus-width);
     }
 
-    :scope[data-ui-radio-state~="disabled"] {
+    :scope:where([data-component~="ui-radio"])[data-ui-radio-state~="disabled"] {
       color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
-    :scope[data-ui-radio-state~="disabled"] .description {
+    :scope:where([data-component~="ui-radio"])[data-ui-radio-state~="disabled"] .description {
       color: var(--ui-disabled-text);
     }
-    :scope[data-ui-radio-state~="disabled"] input {
+    :scope:where([data-component~="ui-radio"])[data-ui-radio-state~="disabled"] input {
       cursor: not-allowed;
     }
 
     /* A sized choice keeps its box and aligns instead: the label takes that size's field type size,
        and the first line centres in that control height, so the label shares a row's baseline.
        Multi-line labels and descriptions still grow downward from that first line. */
-    :scope[data-ui-radio-state~="size=sm"] {
+    :scope:where([data-component~="ui-radio"])[data-ui-radio-state~="size=sm"] {
       --_font: var(--ui-font-size-sm);
       --_row: var(--ui-control-size-sm);
     }
 
-    :scope[data-ui-radio-state~="size=lg"] {
+    :scope:where([data-component~="ui-radio"])[data-ui-radio-state~="size=lg"] {
       --_font: var(--ui-font-size-md);
       --_row: var(--ui-control-size-lg);
     }
 
-    :scope[data-ui-radio-state~="size=sm"],
-    :scope[data-ui-radio-state~="size=lg"] {
+    :scope:where([data-component~="ui-radio"])[data-ui-radio-state~="size=sm"],
+    :scope:where([data-component~="ui-radio"])[data-ui-radio-state~="size=lg"] {
       --_line: calc(var(--_font) * var(--ui-line-height-md));
       font-size: var(--_font);
       padding-block: calc((var(--_row) - var(--_line)) / 2);
     }
 
-    :scope[data-ui-radio-state~="size=sm"] input,
-    :scope[data-ui-radio-state~="size=lg"] input {
+    :scope:where([data-component~="ui-radio"])[data-ui-radio-state~="size=sm"] input,
+    :scope:where([data-component~="ui-radio"])[data-ui-radio-state~="size=lg"] input {
       margin-top: calc((var(--_line) - var(--_ui-radio-size, 1.125rem)) / 2 + 1px);
     }
 
     @media (pointer: coarse) {
-      :scope[data-ui-radio-state~="size=sm"] {
+      :scope:where([data-component~="ui-radio"])[data-ui-radio-state~="size=sm"] {
         --_row: var(--ui-control-min-block-size);
       }
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-radio"])[hidden] {
       display: none;
     }
 }

package/styles/ui-reel.css

@@ -1,16 +1,23 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-reel-gap {
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-reel"] { --html-next-scope-owner: "ui-reel" !important; }
+}
+@scope ([data-component~="ui-reel"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-reel-gap {
       syntax: "*";
       inherits: false;
     }
-@property --ui-reel-item-width {
+    @property --ui-reel-item-width {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-reel"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
-    :scope {
+    :scope:where([data-component~="ui-reel"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-reel-item-width: var(--ui-reel-item-width);
 
@@ -28,7 +35,7 @@
     }
 
     /* Each end that hides items fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
-    :scope {
+    :scope:where([data-component~="ui-reel"]) {
       --_ui-scroll-fade-direction: to right;
       --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
       mask-image: linear-gradient(
@@ -47,40 +54,40 @@
         calc(100% - var(--_ui-scroll-fade-size)) 100%;
     }
 
-    :scope:dir(rtl) {
+    :scope:where([data-component~="ui-reel"]):dir(rtl) {
       --_ui-scroll-fade-direction: to left;
     }
 
-    :scope[data-ui-reel-state~="gap=xs"] {
+    :scope:where([data-component~="ui-reel"])[data-ui-reel-state~="gap=xs"] {
       --_reel-gap: var(--ui-space-2);
     }
-    :scope[data-ui-reel-state~="gap=s"] {
+    :scope:where([data-component~="ui-reel"])[data-ui-reel-state~="gap=s"] {
       --_reel-gap: var(--ui-space-3);
     }
-    :scope[data-ui-reel-state~="gap=m"] {
+    :scope:where([data-component~="ui-reel"])[data-ui-reel-state~="gap=m"] {
       --_reel-gap: var(--ui-space-4);
     }
-    :scope[data-ui-reel-state~="gap=l"] {
+    :scope:where([data-component~="ui-reel"])[data-ui-reel-state~="gap=l"] {
       --_reel-gap: var(--ui-space-5);
     }
-    :scope[data-ui-reel-state~="gap=xl"] {
+    :scope:where([data-component~="ui-reel"])[data-ui-reel-state~="gap=xl"] {
       --_reel-gap: var(--ui-space-6);
     }
-    :scope[data-ui-reel-state~="itemWidth=sm"] {
+    :scope:where([data-component~="ui-reel"])[data-ui-reel-state~="itemWidth=sm"] {
       --_reel-item-width: 12rem;
     }
-    :scope[data-ui-reel-state~="itemWidth=md"] {
+    :scope:where([data-component~="ui-reel"])[data-ui-reel-state~="itemWidth=md"] {
       --_reel-item-width: 16rem;
     }
-    :scope[data-ui-reel-state~="itemWidth=lg"] {
+    :scope:where([data-component~="ui-reel"])[data-ui-reel-state~="itemWidth=lg"] {
       --_reel-item-width: 20rem;
     }
-    :scope[data-ui-reel-state~="snap"] {
+    :scope:where([data-component~="ui-reel"])[data-ui-reel-state~="snap"] {
       scroll-snap-type: inline mandatory;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-reel"])[hidden] {
       display: none;
     }
 }
@@ -89,14 +96,14 @@
 
     /* Each end that hides items fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
 
-    :scope > :where([data-slotted], [data-slotted] *):is(*) {
+    :scope:where([data-component~="ui-reel"]) > :where([data-slotted], [data-slotted] *):is(*) {
       min-inline-size: 0;
       flex: 0 0 var(--_ui-reel-item-width, var(--_reel-item-width));
     }
-    :scope[data-ui-reel-state~="snap=start"] > :where([data-slotted], [data-slotted] *):is(*) {
+    :scope:where([data-component~="ui-reel"])[data-ui-reel-state~="snap=start"] > :where([data-slotted], [data-slotted] *):is(*) {
       scroll-snap-align: start;
     }
-    :scope[data-ui-reel-state~="snap=center"] > :where([data-slotted], [data-slotted] *):is(*) {
+    :scope:where([data-component~="ui-reel"])[data-ui-reel-state~="snap=center"] > :where([data-slotted], [data-slotted] *):is(*) {
       scroll-snap-align: center;
     }
 

package/styles/ui-scroll-area.css

@@ -1,13 +1,20 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-scroll-area"] { --html-next-scope-owner: "ui-scroll-area" !important; }
+}
 @scope ([data-component~="ui-scroll-area"]) to ([data-component], [data-slotted]) {
 /* The controller sets each fade length from overflow and scroll position. The mask blends
        into whatever is behind the area without needing to know its colour. Before upgrade, its
        zero-length defaults leave the authored scroll area fully visible. */
-    :scope[data-ui-scroll-area-state~="fill"] {
+    :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="fill"] {
       flex: 1;
     }
 
-    :scope {
+    :scope:where([data-component~="ui-scroll-area"]) {
       display: block;
       box-sizing: border-box;
       min-block-size: 0;
@@ -33,41 +40,41 @@
 
     /* Trim projected edges without changing spacing inside an item. */
 
-    :scope[data-ui-scroll-area-state~="orientation=horizontal"] {
+    :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="orientation=horizontal"] {
       overflow-x: auto;
       overflow-y: hidden;
       --_ui-scroll-fade-direction: var(--_ui-scroll-fade-inline);
     }
 
-    :scope:dir(rtl) {
+    :scope:where([data-component~="ui-scroll-area"]):dir(rtl) {
       --_ui-scroll-fade-inline: to left;
     }
 
-    :scope[data-ui-scroll-area-state~="size=sm"] {
+    :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="size=sm"] {
       max-block-size: calc(9.375rem + var(--ui-scroll-fade-size, 24px));
     }
-    :scope[data-ui-scroll-area-state~="size=md"] {
+    :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="size=md"] {
       max-block-size: 20rem;
     }
-    :scope[data-ui-scroll-area-state~="size=lg"] {
+    :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="size=lg"] {
       max-block-size: 30rem;
     }
 
-    :scope[data-ui-scroll-area-state~="padding=xs"] {
+    :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="padding=xs"] {
       padding: var(--ui-space-2);
     }
-    :scope[data-ui-scroll-area-state~="padding=sm"] {
+    :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="padding=sm"] {
       padding: var(--ui-space-3);
     }
-    :scope[data-ui-scroll-area-state~="padding=md"] {
+    :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="padding=md"] {
       padding: var(--ui-space-5);
     }
-    :scope[data-ui-scroll-area-state~="padding=lg"] {
+    :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="padding=lg"] {
       padding: var(--ui-space-6);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-scroll-area"])[hidden] {
       display: none;
     }
 }
@@ -77,11 +84,11 @@
        zero-length defaults leave the authored scroll area fully visible. */
 
     /* Trim projected edges without changing spacing inside an item. */
-    :scope[data-ui-scroll-area-state~="trim"] .content > :where([data-slotted], [data-slotted] *):is(:first-child) {
+    :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="trim"] .content > :where([data-slotted], [data-slotted] *):is(:first-child) {
       margin-block-start: 0;
     }
 
-    :scope[data-ui-scroll-area-state~="trim"] .content > :where([data-slotted], [data-slotted] *):is(:last-child) {
+    :scope:where([data-component~="ui-scroll-area"])[data-ui-scroll-area-state~="trim"] .content > :where([data-slotted], [data-slotted] *):is(:last-child) {
       margin-block-end: 0;
     }
 

package/styles/ui-search-result-row.css

@@ -1,40 +1,47 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-search-result-row-border {
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-search-result-row"] { --html-next-scope-owner: "ui-search-result-row" !important; }
+}
+@scope ([data-component~="ui-search-result-row"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-search-result-row-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-search-result-row-gap {
+    @property --ui-search-result-row-gap {
       syntax: "*";
       inherits: false;
     }
-@property --ui-search-result-row-hover-surface {
+    @property --ui-search-result-row-hover-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-search-result-row-min-height {
+    @property --ui-search-result-row-min-height {
       syntax: "*";
       inherits: false;
     }
-@property --ui-search-result-row-padding-block {
+    @property --ui-search-result-row-padding-block {
       syntax: "*";
       inherits: false;
     }
-@property --ui-search-result-row-padding-inline {
+    @property --ui-search-result-row-padding-inline {
       syntax: "*";
       inherits: false;
     }
-@property --ui-search-result-row-selected-bg {
+    @property --ui-search-result-row-selected-bg {
       syntax: "*";
       inherits: false;
     }
-@property --ui-search-result-row-surface {
+    @property --ui-search-result-row-surface {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-search-result-row"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
-    :scope {
+    :scope:where([data-component~="ui-search-result-row"]) {
       appearance: none;
       inline-size: 100%;
       min-block-size: var(--ui-search-result-row-min-height, 56px);
@@ -53,7 +60,7 @@
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :scope[data-ui-search-result-row-state~="density=compact"] {
+    :scope:where([data-component~="ui-search-result-row"])[data-ui-search-result-row-state~="density=compact"] {
       min-block-size: var(--ui-search-result-row-min-height, 3.125rem);
       padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-1));
       padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-2));
@@ -63,21 +70,21 @@
     }
 
     /* Slot wrappers own their line boxes even when an app makes buttons inherit body typography. */
-    :scope[data-ui-search-result-row-state~="density=compact"] .title {
+    :scope:where([data-component~="ui-search-result-row"])[data-ui-search-result-row-state~="density=compact"] .title {
       font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height);
     }
 
-    :scope[data-ui-search-result-row-state~="density=compact"] .meta {
+    :scope:where([data-component~="ui-search-result-row"])[data-ui-search-result-row-state~="density=compact"] .meta {
       font-size: var(--ui-font-size-xs);
       line-height: var(--ui-line-height);
     }
 
-    :scope:hover:enabled {
+    :scope:where([data-component~="ui-search-result-row"]):hover:enabled {
       background: var(--ui-search-result-row-hover-surface, var(--_ui-selection-context-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%)));
     }
 
-    :scope[data-ui-search-result-row-state~="selected"] {
+    :scope:where([data-component~="ui-search-result-row"])[data-ui-search-result-row-state~="selected"] {
       background: var(
         --ui-search-result-row-selected-bg,
         var(--_ui-selection-context-surface, var(--ui-selection-surface))
@@ -85,12 +92,12 @@
       color: var(--_ui-selection-context-text, var(--ui-selection-text));
     }
 
-    :scope:focus-visible {
+    :scope:where([data-component~="ui-search-result-row"]):focus-visible {
       outline: var(--ui-focus-width) solid var(--ui-focus-ring);
       outline-offset: calc(-1 * var(--ui-focus-width));
     }
 
-    :scope:disabled {
+    :scope:where([data-component~="ui-search-result-row"]):disabled {
       background: var(--ui-disabled-surface);
       color: var(--ui-disabled-text);
       cursor: not-allowed;
@@ -126,14 +133,14 @@
     }
 
     @media (forced-colors: active) {
-      :scope[data-ui-search-result-row-state~="selected"]:not(:focus-visible):not(:disabled) {
+      :scope:where([data-component~="ui-search-result-row"])[data-ui-search-result-row-state~="selected"]:not(:focus-visible):not(:disabled) {
         outline: var(--ui-border-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-border-width));
       }
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-search-result-row"])[hidden] {
       display: none;
     }
 }