@threadlabs/looma 0.28.5 → 0.28.6

package/styles/ui-card.css

@@ -1,8 +1,15 @@
-/* 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-card"] { --html-next-scope-owner: "ui-card" !important; }
+}
 @scope ([data-component~="ui-card"]) to ([data-component], [data-slotted]) {
 /* A surface that groups content. Its children stack with even space between them, so a card
        needs no layout of its own. */
-    :scope {
+    :scope:where([data-component~="ui-card"]) {
       --_ui-card-surface: var(--ui-surface-raised);
       --_ui-selection-context-surface: initial;
       --_ui-selection-context-border: initial;
@@ -19,54 +26,54 @@
       color: var(--ui-text-primary);
     }
 
-    :scope[data-ui-card-state~="padding=xs"] {
+    :scope:where([data-component~="ui-card"])[data-ui-card-state~="padding=xs"] {
       gap: var(--ui-space-1);
       padding: var(--ui-space-2);
     }
-    :scope[data-ui-card-state~="padding=sm"] {
+    :scope:where([data-component~="ui-card"])[data-ui-card-state~="padding=sm"] {
       gap: var(--ui-space-2);
       padding: var(--ui-space-3);
     }
 
-    :scope[data-ui-card-state~="padding=lg"] {
+    :scope:where([data-component~="ui-card"])[data-ui-card-state~="padding=lg"] {
       padding: var(--ui-space-6);
     }
 
-    :scope[data-ui-card-state~="variant=subtle"] {
+    :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=subtle"] {
       border-color: transparent;
       --_ui-card-surface: var(--ui-surface-muted);
     }
 
-    :scope[data-ui-card-state~="variant=elevated"] {
+    :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=elevated"] {
       border-color: var(--ui-border-subtle);
       box-shadow: var(--ui-shadow-lg);
     }
 
-    :scope[data-ui-card-state~="tone=accent"] {
+    :scope:where([data-component~="ui-card"])[data-ui-card-state~="tone=accent"] {
       border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
       --_ui-card-surface: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
     }
 
-    :scope[data-ui-card-state~="tone=info"] {
+    :scope:where([data-component~="ui-card"])[data-ui-card-state~="tone=info"] {
       border-color: color-mix(in srgb, var(--ui-info) 25%, var(--ui-border-default));
       --_ui-card-surface: color-mix(in srgb, var(--ui-info) 6%, var(--ui-surface-default));
     }
 
-    :scope[data-ui-card-state~="tone=success"] {
+    :scope:where([data-component~="ui-card"])[data-ui-card-state~="tone=success"] {
       border-color: color-mix(in srgb, var(--ui-success) 25%, var(--ui-border-default));
       --_ui-card-surface: color-mix(in srgb, var(--ui-success) 6%, var(--ui-surface-default));
     }
 
-    :scope[data-ui-card-state~="tone=warning"] {
+    :scope:where([data-component~="ui-card"])[data-ui-card-state~="tone=warning"] {
       border-color: color-mix(in srgb, var(--ui-warning) 25%, var(--ui-border-default));
       --_ui-card-surface: color-mix(in srgb, var(--ui-warning) 6%, var(--ui-surface-default));
     }
 
-    :scope[data-ui-card-state~="variant=subtle"]:is([data-ui-card-state~="tone=accent"], [data-ui-card-state~="tone=info"], [data-ui-card-state~="tone=success"], [data-ui-card-state~="tone=warning"]) {
+    :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=subtle"]:is([data-ui-card-state~="tone=accent"], [data-ui-card-state~="tone=info"], [data-ui-card-state~="tone=success"], [data-ui-card-state~="tone=warning"]) {
       border-color: transparent;
     }
 
-    :scope[data-ui-card-state~="tone=danger"] {
+    :scope:where([data-component~="ui-card"])[data-ui-card-state~="tone=danger"] {
       border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
       border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
       /* An accent edge keeps the corners on its side straight. */
@@ -76,7 +83,7 @@
     }
 
     /* A colored panel shades rows in its own hue, without changing button intent. */
-    :scope[data-ui-card-state~="tone=accent"], :scope[data-ui-card-state~="tone=info"], :scope[data-ui-card-state~="tone=success"], :scope[data-ui-card-state~="tone=warning"], :scope[data-ui-card-state~="tone=danger"] {
+    :scope:where([data-component~="ui-card"])[data-ui-card-state~="tone=accent"], :scope:where([data-component~="ui-card"])[data-ui-card-state~="tone=info"], :scope:where([data-component~="ui-card"])[data-ui-card-state~="tone=success"], :scope:where([data-component~="ui-card"])[data-ui-card-state~="tone=warning"], :scope:where([data-component~="ui-card"])[data-ui-card-state~="tone=danger"] {
       --_ui-selection-context-surface: light-dark(
         oklch(from var(--_ui-card-surface) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
         oklch(from var(--_ui-card-surface) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
@@ -88,21 +95,21 @@
       --_ui-selection-context-text: var(--ui-text-primary);
     }
 
-    :scope[data-ui-card-state~="size=sm"] {
+    :scope:where([data-component~="ui-card"])[data-ui-card-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-card-state~="size=md"] {
+    :scope:where([data-component~="ui-card"])[data-ui-card-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-card-state~="size=lg"] {
+    :scope:where([data-component~="ui-card"])[data-ui-card-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));
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-card"])[hidden] {
       display: none;
     }
 }

package/styles/ui-checkbox.css

@@ -1,34 +1,27 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-checkbox-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-checkbox"] { --html-next-scope-owner: "ui-checkbox" !important; }
+}
+@scope ([data-component~="ui-checkbox"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-checkbox-gap {
       syntax: "*";
       inherits: false;
     }
-@property --ui-checkbox-invalid-border {
+    @property --ui-checkbox-invalid-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-checkbox-size {
+    @property --ui-checkbox-size {
       syntax: "*";
       inherits: false;
     }
-@keyframes ui-checkbox-check {
-      from {
-        opacity: 0;
-        transform: translateY(-0.09rem) rotate(45deg) scale(0.55);
-      }
-      65% {
-        opacity: 1;
-        transform: translateY(-0.09rem) rotate(45deg) scale(1.12);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(-0.09rem) rotate(45deg) scale(1);
-      }
-    }
-@scope ([data-component~="ui-checkbox"]) 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-checkbox"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-checkbox-size: var(--ui-checkbox-size);
       --_ui-checkbox-invalid-border: var(--ui-checkbox-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
@@ -83,7 +76,7 @@
         box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    input::after {
+    input:where(:not([data-component], [data-slotted]))::after {
       content: "";
       position: absolute;
       opacity: 0;
@@ -98,7 +91,7 @@
     }
 
     /* Centre the tick's box and lift it slightly for the rotated check shape. */
-    input:checked::after {
+    input:checked:where(:not([data-component], [data-slotted]))::after {
       inset: 0;
       margin: auto;
       inline-size: 0.28rem;
@@ -113,7 +106,7 @@
       animation: ui-checkbox-check 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
     }
 
-    input:indeterminate::after {
+    input:indeterminate:where(:not([data-component], [data-slotted]))::after {
       inset: 50% 0.23rem auto;
       block-size: 0.125rem;
       border-radius: var(--ui-radius-round);
@@ -122,8 +115,23 @@
       transform: translateY(-50%);
     }
 
+    @keyframes ui-checkbox-check {
+      from {
+        opacity: 0;
+        transform: translateY(-0.09rem) rotate(45deg) scale(0.55);
+      }
+      65% {
+        opacity: 1;
+        transform: translateY(-0.09rem) rotate(45deg) scale(1.12);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(-0.09rem) rotate(45deg) scale(1);
+      }
+    }
+
     @media (prefers-reduced-motion: reduce) {
-      input::after {
+      input:where(:not([data-component], [data-slotted]))::after {
         transition: none;
         animation: none;
       }
@@ -138,18 +146,18 @@
       outline-offset: var(--ui-focus-width);
     }
 
-    :scope[data-ui-checkbox-state~="invalid"] input {
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="invalid"] input {
       border-color: var(--_ui-checkbox-invalid-border);
     }
 
-    :scope[data-ui-checkbox-state~="disabled"] {
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="disabled"] {
       color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
-    :scope[data-ui-checkbox-state~="disabled"] .description {
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="disabled"] .description {
       color: var(--ui-disabled-text);
     }
-    :scope[data-ui-checkbox-state~="disabled"] input {
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="disabled"] input {
       border-color: var(--ui-disabled-border);
       background: var(--ui-disabled-surface);
       box-shadow: none;
@@ -159,36 +167,36 @@
     /* 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-checkbox-state~="size=sm"] {
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=sm"] {
       --_font: var(--ui-font-size-sm);
       --_row: var(--ui-control-size-sm);
     }
 
-    :scope[data-ui-checkbox-state~="size=lg"] {
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=lg"] {
       --_font: var(--ui-font-size-md);
       --_row: var(--ui-control-size-lg);
     }
 
-    :scope[data-ui-checkbox-state~="size=sm"],
-    :scope[data-ui-checkbox-state~="size=lg"] {
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=sm"],
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-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-checkbox-state~="size=sm"] input,
-    :scope[data-ui-checkbox-state~="size=lg"] input {
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=sm"] input,
+    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=lg"] input {
       margin-top: calc((var(--_line) - var(--_ui-checkbox-size, 1.125rem)) / 2);
     }
 
     @media (pointer: coarse) {
-      :scope[data-ui-checkbox-state~="size=sm"] {
+      :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-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-checkbox"])[hidden] {
       display: none;
     }
 }

package/styles/ui-cluster.css

@@ -1,12 +1,19 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-cluster-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-cluster"] { --html-next-scope-owner: "ui-cluster" !important; }
+}
+@scope ([data-component~="ui-cluster"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-cluster-gap {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-cluster"]) 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-cluster"]) {
       --_layout-gap: var(--ui-space-3);
       display: flex;
       flex-wrap: wrap;
@@ -17,73 +24,73 @@
       margin: 0;
     }
 
-    :scope[data-ui-cluster-state~="fixed"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="fixed"] {
       flex: none;
     }
-    :scope[data-ui-cluster-state~="padding=s"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="padding=s"] {
       padding: var(--ui-space-2);
     }
-    :scope[data-ui-cluster-state~="padding=m"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="padding=m"] {
       padding: var(--ui-space-3);
     }
-    :scope[data-ui-cluster-state~="padding=l"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="padding=l"] {
       padding: var(--ui-space-4);
     }
-    :scope[data-ui-cluster-state~="paddingEnd=s"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="paddingEnd=s"] {
       padding-inline-end: var(--ui-space-2);
     }
-    :scope[data-ui-cluster-state~="paddingEnd=m"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="paddingEnd=m"] {
       padding-inline-end: var(--ui-space-3);
     }
-    :scope[data-ui-cluster-state~="paddingEnd=l"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="paddingEnd=l"] {
       padding-inline-end: var(--ui-space-4);
     }
-    :scope[data-ui-cluster-state~="paddingEnd=xl"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="paddingEnd=xl"] {
       padding-inline-end: calc(var(--ui-space-4) * 4);
     }
 
-    :scope[data-ui-cluster-state~="gap=xs"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="gap=xs"] {
       --_layout-gap: var(--ui-space-2);
     }
-    :scope[data-ui-cluster-state~="gap=s"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="gap=s"] {
       --_layout-gap: var(--ui-space-3);
     }
-    :scope[data-ui-cluster-state~="gap=m"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="gap=m"] {
       --_layout-gap: var(--ui-space-4);
     }
-    :scope[data-ui-cluster-state~="gap=l"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="gap=l"] {
       --_layout-gap: var(--ui-space-5);
     }
-    :scope[data-ui-cluster-state~="gap=xl"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="gap=xl"] {
       --_layout-gap: var(--ui-space-6);
     }
-    :scope[data-ui-cluster-state~="align=start"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="align=start"] {
       align-items: flex-start;
     }
-    :scope[data-ui-cluster-state~="align=end"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="align=end"] {
       align-items: flex-end;
     }
-    :scope[data-ui-cluster-state~="align=baseline"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="align=baseline"] {
       align-items: baseline;
     }
-    :scope[data-ui-cluster-state~="align=stretch"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="align=stretch"] {
       align-items: stretch;
     }
-    :scope[data-ui-cluster-state~="justify=center"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="justify=center"] {
       justify-content: center;
     }
-    :scope[data-ui-cluster-state~="justify=end"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="justify=end"] {
       justify-content: flex-end;
     }
-    :scope[data-ui-cluster-state~="justify=between"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="justify=between"] {
       justify-content: space-between;
     }
-    :scope[data-ui-cluster-state~="wrap=nowrap"] {
+    :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="wrap=nowrap"] {
       flex-wrap: nowrap;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-cluster"])[hidden] {
       display: none;
     }
 }

package/styles/ui-combobox.css

@@ -1,72 +1,79 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-combobox-affordance-text {
+/* 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-combobox"] { --html-next-scope-owner: "ui-combobox" !important; }
+}
+@scope ([data-component~="ui-combobox"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-combobox-affordance-text {
       syntax: "*";
       inherits: false;
     }
-@property --ui-combobox-item-input-min-inline-size {
+    @property --ui-combobox-item-input-min-inline-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-combobox-item-item-max-inline-size {
+    @property --ui-combobox-item-item-max-inline-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-combobox-item-min-block-size {
+    @property --ui-combobox-item-min-block-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-combobox-label-font-size {
+    @property --ui-combobox-label-font-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-combobox-label-text {
+    @property --ui-combobox-label-text {
       syntax: "*";
       inherits: false;
     }
-@property --ui-combobox-max-block-size {
+    @property --ui-combobox-max-block-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-combobox-message-text {
+    @property --ui-combobox-message-text {
       syntax: "*";
       inherits: false;
     }
-@property --ui-combobox-option-check {
+    @property --ui-combobox-option-check {
       syntax: "*";
       inherits: false;
     }
-@property --ui-combobox-option-text {
+    @property --ui-combobox-option-text {
       syntax: "*";
       inherits: false;
     }
-@property --ui-combobox-radius {
+    @property --ui-combobox-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-combobox-invalid-border {
+    @property --ui-combobox-invalid-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-combobox-popup-surface {
+    @property --ui-combobox-popup-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-combobox-popup-border {
+    @property --ui-combobox-popup-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-combobox-popup-radius {
+    @property --ui-combobox-popup-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-combobox-popup-shadow {
+    @property --ui-combobox-popup-shadow {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-combobox"]) 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-combobox"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-combobox-label-text: var(--ui-combobox-label-text);
       --_ui-combobox-label-font-size: var(--ui-combobox-label-font-size);
@@ -167,7 +174,7 @@
       block-size: var(--ui-icon-size-sm);
     }
 
-    input::selection {
+    input:where(:not([data-component], [data-slotted]))::selection {
       background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
       color: inherit;
     }
@@ -187,17 +194,17 @@
       margin: 0;
       outline: none;
     }
-    :scope[data-ui-combobox-state~="size=sm"] {
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] {
       --_row: var(--ui-control-size-sm);
     }
-    :scope[data-ui-combobox-state~="size=sm"] input {
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] input {
       padding: var(--ui-space-1) var(--ui-space-2);
       font-size: var(--ui-font-size-sm);
     }
-    :scope[data-ui-combobox-state~="size=lg"] {
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] {
       --_row: var(--ui-control-size-lg);
     }
-    :scope[data-ui-combobox-state~="size=lg"] input {
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] input {
       padding: var(--ui-space-3) var(--ui-space-4);
       font-size: var(--ui-font-size-md);
     }
@@ -237,8 +244,8 @@
     .field:has(input:disabled) {
       background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
     }
-    :scope[data-ui-combobox-state~="validationStatus=error"] .field,
-    :scope[data-ui-combobox-state~="invalid"] .field {
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="validationStatus=error"] .field,
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="invalid"] .field {
       border-color: var(--_ui-combobox-invalid-border, var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active))));
     }
     .popup {
@@ -303,7 +310,7 @@
       white-space: nowrap;
     }
     @media (pointer: coarse) {
-      :scope {
+      :scope:where([data-component~="ui-combobox"]) {
         --_row: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
       }
       button {
@@ -312,10 +319,10 @@
       }
       /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
          body-size text: below 16px, iOS zooms the page into the focused field. */
-      :scope[data-ui-combobox-state~="size=sm"] {
+      :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] {
         --_row: var(--ui-control-min-block-size);
       }
-      :scope[data-ui-combobox-state~="size=sm"] input {
+      :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] input {
         font-size: inherit;
       }
     }
@@ -330,40 +337,40 @@
 
     /* 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 {
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"] .field {
       align-items: center;
       min-block-size: var(--_ui-combobox-item-min-block-size, var(--_row));
       padding: var(--ui-space-1);
     }
-    :scope[data-ui-combobox-state~="multiple"] .entry {
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"] .entry {
       align-items: center;
       gap: var(--ui-space-1);
       overflow-x: auto;
       scrollbar-width: none;
     }
-    :scope[data-ui-combobox-state~="multiple"] .entry::-webkit-scrollbar {
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"] .entry:where(:not([data-component], [data-slotted]))::-webkit-scrollbar {
       display: none;
     }
-    :scope[data-ui-combobox-state~="multiple"] input {
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"] input {
       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);
     }
     /* Size variants keep their control height as selections are added. */
-    :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=sm"] .field {
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"]:scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] .field {
       min-block-size: 0;
       padding: var(--ui-space-0-5);
     }
-    :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=sm"] input {
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"]:scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] input {
       min-block-size: calc(var(--_row) - 2 * var(--ui-border-width) - 2 * var(--ui-space-0-5));
       padding: 0 var(--ui-space-1);
     }
     /* A large multiple field starts at the large control height, as sm starts at the small one. */
-    :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=lg"] .field {
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"]:scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] .field {
       min-block-size: 0;
     }
-    :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=lg"] input {
+    :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"]:scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] input {
       min-block-size: calc(var(--ui-control-size-lg) - 2 * var(--ui-border-width) - 2 * var(--ui-space-1));
     }
     .item {
@@ -390,7 +397,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-combobox"])[hidden] {
       display: none;
     }
 }