@threadlabs/looma 0.28.12 → 0.28.14

package/vue/UiSearchResultRow.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -80,7 +80,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('button', 'ui-search-result-row')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.density && 'density',
@@ -96,19 +96,24 @@ const hostState = computed(() =>
     class="ui-search-result-row"
     type="button"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-search-result-row
     :disabled="checkedProps.disabled ?? undefined"
     :aria-current="checkedProps.selected ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
+    :data-ui-search-result-row-prop-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
+    :data-ui-search-result-row-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-search-result-row-prop-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
     :data-ui-search-result-row-state="hostState || undefined"
   >
-    <span class="leading"><slot name="leading" /></span>
-    <span class="content"><span class="title"><slot name="title" /></span>
-      <span class="meta"><slot name="meta" /></span>
-      <span class="excerpt"><slot name="excerpt" /></span></span>
-    <span class="trailing"><slot name="trailing" /></span>
+    <span class="leading" data-hn-ui-search-result-row><slot name="leading" /></span>
+    <span class="content" data-hn-ui-search-result-row><span
+        class="title"
+        data-hn-ui-search-result-row
+      ><slot name="title" /></span>
+      <span class="meta" data-hn-ui-search-result-row><slot name="meta" /></span>
+      <span class="excerpt" data-hn-ui-search-result-row><slot name="excerpt" /></span></span>
+    <span class="trailing" data-hn-ui-search-result-row><slot name="trailing" /></span>
   </button>
 </template>
 
@@ -153,8 +158,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-search-result-row) {
-  :scope:where(:scope) {
+@scope (.ui-search-result-row) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-search-result-row])) {
     appearance: none;
     inline-size: 100%;
     min-block-size: var(--ui-search-result-row-min-height, 56px);
@@ -173,7 +178,7 @@ const hostState = computed(() =>
     transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
-  :scope:where(:scope):is([data-ui-search-result-row-state~="density=compact"]) {
+  :global(:scope[data-ui-search-result-row-state~="density=compact"]:where([data-hn-ui-search-result-row])) {
     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));
@@ -181,24 +186,26 @@ const hostState = computed(() =>
     align-items: center;
     font-family: var(--ui-font-family-sans, sans-serif);
   }
-  :scope[data-ui-search-result-row-state~="density=compact"] .title {
+  :global(:scope[data-ui-search-result-row-state~="density=compact"]
+    .title:where([data-hn-ui-search-result-row])) {
     font-size: var(--ui-font-size-sm);
     line-height: var(--ui-line-height);
   }
 
-  :scope[data-ui-search-result-row-state~="density=compact"] .meta {
+  :global(:scope[data-ui-search-result-row-state~="density=compact"]
+    .meta:where([data-hn-ui-search-result-row])) {
     font-size: var(--ui-font-size-xs);
     line-height: var(--ui-line-height);
   }
 
-  :scope:where(:scope):is(:hover:enabled) {
+  :global(:scope:hover:enabled:where([data-hn-ui-search-result-row])) {
     background: var(
       --ui-search-result-row-hover-surface,
       var(--_ui-selection-context-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%))
     );
   }
 
-  :scope:where(:scope):is([data-ui-search-result-row-state~="selected"]) {
+  :global(:scope[data-ui-search-result-row-state~="selected"]:where([data-hn-ui-search-result-row])) {
     background: var(
       --ui-search-result-row-selected-bg,
       var(--_ui-selection-context-surface, var(--ui-selection-surface))
@@ -206,50 +213,58 @@ const hostState = computed(() =>
     color: var(--_ui-selection-context-text, var(--ui-selection-text));
   }
 
-  :scope:where(:scope):is(:focus-visible) {
+  :global(:scope:focus-visible:where([data-hn-ui-search-result-row])) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     outline-offset: calc(-1 * var(--ui-focus-width));
   }
 
-  :scope:where(:scope):is(:disabled) {
+  :global(:scope:disabled:where([data-hn-ui-search-result-row])) {
     background: var(--ui-disabled-surface);
     color: var(--ui-disabled-text);
     cursor: not-allowed;
   }
 
-  .leading, .trailing {
+  :global(.leading:where([data-hn-ui-search-result-row])),
+  :global(.trailing:where([data-hn-ui-search-result-row])) {
     display: inline-flex;
     align-items: flex-start;
     flex-shrink: 0;
   }
 
-  .content {
+  :global(.content:where([data-hn-ui-search-result-row])) {
     min-inline-size: 0;
     flex: 1;
     display: flex;
     flex-direction: column;
   }
 
-  .title, .meta, .excerpt {
+  :global(.title:where([data-hn-ui-search-result-row])),
+  :global(.meta:where([data-hn-ui-search-result-row])),
+  :global(.excerpt:where([data-hn-ui-search-result-row])) {
     display: block;
     min-inline-size: 0;
   }
-  .leading:empty, .meta:empty, .excerpt:empty, .trailing:empty {
+  :global(.leading:empty:where([data-hn-ui-search-result-row])),
+  :global(.meta:empty:where([data-hn-ui-search-result-row])),
+  :global(.excerpt:empty:where([data-hn-ui-search-result-row])),
+  :global(.trailing:empty:where([data-hn-ui-search-result-row])) {
     display: none;
   }
 
-  :slotted([slot="title"]), :slotted([slot="meta"]), :slotted([slot="excerpt"]) {
+  :global(:where(:not([data-hn-ui-search-result-row])):is([slot="title"])),
+  :global(:where(:not([data-hn-ui-search-result-row])):is([slot="meta"])),
+  :global(:where(:not([data-hn-ui-search-result-row])):is([slot="excerpt"])) {
     display: block;
     margin: 0;
   }
 
   @media (forced-colors: active) {
-    :scope:where(:scope):is([data-ui-search-result-row-state~="selected"]:not(:focus-visible):not(:disabled)) {
+    :global(:scope[data-ui-search-result-row-state~="selected"]:not(:focus-visible):not(:disabled):where([data-hn-ui-search-result-row])) {
       outline: var(--ui-border-width) solid Highlight;
       outline-offset: calc(-1 * var(--ui-border-width));
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-search-result-row])) {
     display: none;
   }
 }

package/vue/UiSearchShell.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -166,19 +166,25 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
   <div
     class="ui-search-shell"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-search-shell
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-dismissible="reflectedProp('dismissible', 'dismissible', checkedProps.dismissible, undefined, false)"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
-    :data-modal="reflectedProp('modal', 'modal', checkedProps.modal, undefined, false)"
-    :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
+    :data-ui-search-shell-prop-dismissible="reflectedProp('dismissible', 'dismissible', checkedProps.dismissible, undefined, false)"
+    :data-ui-search-shell-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-search-shell-prop-modal="reflectedProp('modal', 'modal', checkedProps.modal, undefined, false)"
+    :data-ui-search-shell-prop-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     ref="root"
   >
-    <dialog :aria-label="checkedProps.label ?? undefined" ref="dialogElement">
-      <div class="panel">
-        <div class="search"><slot name="search" /></div>
-        <div class="status"><slot name="status" /></div>
-        <div class="body"><slot name="body" /></div>
-        <div class="actions"><slot name="footer" /></div>
+    <dialog
+      data-hn-ui-search-shell
+      :aria-label="checkedProps.label ?? undefined"
+      ref="dialogElement"
+    >
+      <div class="panel" data-hn-ui-search-shell>
+        <div class="search" data-hn-ui-search-shell><slot name="search" /></div>
+        <div class="status" data-hn-ui-search-shell><slot name="status" /></div>
+        <div class="body" data-hn-ui-search-shell><slot name="body" /></div>
+        <div class="actions" data-hn-ui-search-shell><slot name="footer" /></div>
       </div>
     </dialog>
   </div>
@@ -231,8 +237,8 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-search-shell) {
-  :scope:where(:scope) {
+@scope (.ui-search-shell) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-search-shell])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-search-shell-z-index: var(--ui-search-shell-z-index);
     --_ui-search-shell-padding-top: var(--ui-search-shell-padding-top);
@@ -248,7 +254,7 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
     display: contents;
   }
 
-  dialog {
+  :global(dialog:where([data-hn-ui-search-shell])) {
     position: fixed;
     inset: 0;
     z-index: var(--_ui-search-shell-z-index, 400);
@@ -267,19 +273,19 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
     color: var(--ui-text-primary);
   }
 
-  dialog:modal::backdrop {
+  :global(dialog:modal:where([data-hn-ui-search-shell])::backdrop) {
     background: var(--ui-overlay-backdrop);
   }
 
-  dialog:modal {
+  :global(dialog:modal:where([data-hn-ui-search-shell])) {
     background: transparent;
   }
 
-  dialog[data-ui-backdrop-hidden]::backdrop {
+  :global(dialog[data-ui-backdrop-hidden]:where([data-hn-ui-search-shell])::backdrop) {
     background: transparent;
   }
 
-  .panel {
+  :global(.panel:where([data-hn-ui-search-shell])) {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -303,11 +309,11 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
     );
   }
 
-  .search {
+  :global(.search:where([data-hn-ui-search-shell])) {
     padding: var(--ui-space-3);
   }
 
-  :slotted(input[slot="search"]) {
+  :global(:where(:not([data-hn-ui-search-shell])):is(input[slot="search"])) {
     box-sizing: border-box;
     inline-size: 100%;
     min-block-size: var(--ui-control-min-block-size);
@@ -320,23 +326,24 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
     box-shadow: var(--ui-shadow-xs);
   }
 
-  :slotted(input[slot="search"]:focus-visible) {
+  :global(:where(:not([data-hn-ui-search-shell])):is(input[slot="search"]:focus-visible)) {
     border-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     outline-offset: var(--ui-focus-width);
   }
 
-  .status, .actions {
+  :global(.status:where([data-hn-ui-search-shell])),
+  :global(.actions:where([data-hn-ui-search-shell])) {
     flex-shrink: 0;
     padding: var(--ui-space-2) var(--ui-space-4);
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-sm);
   }
 
-  .status {
+  :global(.status:where([data-hn-ui-search-shell])) {
     padding-block-start: 0;
   }
-  .actions {
+  :global(.actions:where([data-hn-ui-search-shell])) {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -345,11 +352,12 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
     padding: var(--ui-space-3) var(--ui-space-4);
   }
 
-  .status:empty, .actions:empty {
+  :global(.status:empty:where([data-hn-ui-search-shell])),
+  :global(.actions:empty:where([data-hn-ui-search-shell])) {
     display: none;
   }
 
-  .body {
+  :global(.body:where([data-hn-ui-search-shell])) {
     flex: 1;
     min-block-size: 0;
     overflow: auto;
@@ -378,11 +386,11 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
   }
 
   @media (max-width: 47.9375rem) {
-    dialog {
+    :global(dialog:where([data-hn-ui-search-shell])) {
       padding: 0;
     }
 
-    .panel {
+    :global(.panel:where([data-hn-ui-search-shell])) {
       inline-size: 100%;
       min-block-size: 100dvh;
       max-block-size: none;
@@ -390,7 +398,7 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
       border-radius: 0;
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-search-shell])) {
     display: none;
   }
 }

package/vue/UiSection.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -77,7 +77,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('section', 'ui-section')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.variant && 'variant',
@@ -93,18 +93,24 @@ const hostState = computed(() =>
   <section
     class="ui-section"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-section
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-heading="reflectedProp('heading', 'heading', checkedProps.heading, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-section-prop-heading="reflectedProp('heading', 'heading', checkedProps.heading, undefined, false)"
+    :data-ui-section-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-section-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-section-state="hostState || undefined"
   >
-    <span class="head"><span class="copy"><h2 class="heading" :hidden="!checkedProps.heading">
+    <span class="head" data-hn-ui-section><span class="copy" data-hn-ui-section><h2
+          class="heading"
+          data-hn-ui-section
+          :hidden="!checkedProps.heading"
+        >
           {{ checkedProps.heading }}
         </h2>
-        <span class="description"><slot name="description" /></span></span>
-      <span class="actions"><slot name="actions" /></span></span>
-    <span class="body"><slot /></span>
+        <span class="description" data-hn-ui-section><slot name="description" /></span></span>
+      <span class="actions" data-hn-ui-section><slot name="actions" /></span></span>
+    <span class="body" data-hn-ui-section><slot /></span>
   </section>
 </template>
 
@@ -114,15 +120,15 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-section) {
-  :scope:where(:scope) {
+@scope (.ui-section) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-section])) {
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-4);
     min-inline-size: 0;
   }
 
-  :scope:where(:scope):is([data-ui-section-state~="variant=card"]) {
+  :global(:scope[data-ui-section-state~="variant=card"]:where([data-hn-ui-section])) {
     --_ui-selection-context-surface: initial;
     --_ui-selection-context-border: initial;
     --_ui-selection-context-text: initial;
@@ -132,12 +138,12 @@ const hostState = computed(() =>
     background: var(--ui-surface-raised);
   }
 
-  :scope:where(:scope):is([data-ui-section-state~="variant=divided"]) {
+  :global(:scope[data-ui-section-state~="variant=divided"]:where([data-hn-ui-section])) {
     padding-block-start: var(--ui-space-6);
     border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
   }
 
-  :scope:where(:scope):is([data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"]) {
+  :global(:scope[data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"]:where([data-hn-ui-section])) {
     --_ui-selection-context-surface: light-dark(
       oklch(from var(--ui-danger-soft) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
       oklch(from var(--ui-danger-soft) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
@@ -155,7 +161,7 @@ const hostState = computed(() =>
     background: var(--ui-danger-soft);
   }
 
-  .head {
+  :global(.head:where([data-hn-ui-section])) {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
@@ -163,7 +169,7 @@ const hostState = computed(() =>
     gap: var(--ui-space-2) var(--ui-space-4);
   }
 
-  .copy {
+  :global(.copy:where([data-hn-ui-section])) {
     display: flex;
     flex: 1 1 16rem;
     flex-direction: column;
@@ -171,7 +177,7 @@ const hostState = computed(() =>
     min-inline-size: 0;
   }
 
-  .heading {
+  :global(.heading:where([data-hn-ui-section])) {
     margin: 0;
     color: var(--ui-text-primary);
     font-size: var(--ui-font-size-lg);
@@ -179,37 +185,38 @@ const hostState = computed(() =>
     line-height: var(--ui-line-height-tight);
   }
 
-  :scope[data-ui-section-state~="tone=danger"] .heading {
+  :global(:scope[data-ui-section-state~="tone=danger"] .heading:where([data-hn-ui-section])) {
     color: var(--ui-danger);
   }
 
-  .description {
+  :global(.description:where([data-hn-ui-section])) {
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-sm);
     line-height: var(--ui-line-height);
   }
 
-  .actions {
+  :global(.actions:where([data-hn-ui-section])) {
     display: inline-flex;
     flex-wrap: wrap;
     gap: var(--ui-space-2);
   }
 
-  .body {
+  :global(.body:where([data-hn-ui-section])) {
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-4);
     min-inline-size: 0;
   }
 
-  .description:empty, .actions:empty {
+  :global(.description:empty:where([data-hn-ui-section])),
+  :global(.actions:empty:where([data-hn-ui-section])) {
     display: none;
   }
 
-  .head:has(.heading[hidden]):has(.description:empty):has(.actions:empty) {
+  :global(.head:has(.heading[hidden]):has(.description:empty):has(.actions:empty):where([data-hn-ui-section])) {
     display: none;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-section])) {
     display: none;
   }
 }

package/vue/UiSelect.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -131,7 +131,7 @@ const model = computed({
 const root = ref<HTMLElement | null>(null)
 checkHydratedRoot('select', 'ui-select')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.size && 'size',
@@ -166,15 +166,17 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
   <select
     class="ui-select"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-select
     :disabled="checkedProps.disabled ?? undefined"
     :required="checkedProps.required ?? undefined"
     :aria-invalid="checkedProps.invalid ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
-    :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    :data-ui-select-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-select-prop-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
+    :data-ui-select-prop-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
+    :data-ui-select-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-select-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     v-bind-control="{ tag: 'select', name: 'value', value: model, optionalValue: true, defaultValue: '' }"
     @change="model = readBoundControl(
       $event.currentTarget as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement,
@@ -244,8 +246,8 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-select) {
-  :scope:where(:scope) {
+@scope (.ui-select) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-select])) {
     box-sizing: border-box;
     display: inline-block;
     inline-size: var(--ui-select-inline-size, 100%);
@@ -270,7 +272,7 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
       box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
       background-color var(--ui-motion-fast) var(--ui-motion-ease);
   }
-  :scope:where(:scope) {
+  :global(:scope:where([data-hn-ui-select])) {
     appearance: none;
     padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
     background-image: var(
@@ -282,14 +284,14 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
     background-size: 1.125rem 1.125rem;
   }
 
-  :scope:where(:scope):is(:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid]))) {
+  :global(:scope:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])):where([data-hn-ui-select])) {
     border-color: var(
       --ui-select-border-hover,
       var(--ui-control-border-hover, var(--ui-text-secondary))
     );
   }
 
-  :scope:where(:scope):is(:focus-visible) {
+  :global(:scope:focus-visible:where([data-hn-ui-select])) {
     border-color: var(--ui-select-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
     outline: none;
     box-shadow: var(
@@ -298,12 +300,12 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
       var(--ui-control-focus-halo-shadow)
     );
   }
-  :scope:where(:scope):is([aria-invalid="true"]),
-  :scope:where(:scope):is(:is(:user-invalid, [data-user-invalid])) {
+  :global(:scope[aria-invalid="true"]:where([data-hn-ui-select])),
+  :global(:scope:is(:user-invalid, [data-user-invalid]):where([data-hn-ui-select])) {
     border-color: var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
   }
 
-  :scope:where(:scope):is(:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
+  :global(:scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible:where([data-hn-ui-select])) {
     box-shadow: var(
       --ui-select-invalid-focus-shadow,
       var(--ui-shadow-sm),
@@ -315,14 +317,14 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
     );
   }
 
-  :scope:where(:scope):is(:disabled) {
+  :global(:scope:disabled:where([data-hn-ui-select])) {
     background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
     color: var(--ui-disabled-text);
     box-shadow: none;
     cursor: not-allowed;
   }
 
-  :scope:where(:scope):is([data-ui-select-state~="size=sm"]) {
+  :global(:scope[data-ui-select-state~="size=sm"]:where([data-hn-ui-select])) {
     min-block-size: var(--ui-control-size-sm);
     padding: var(--ui-space-1) var(--ui-space-2);
     padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1));
@@ -331,7 +333,7 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
     font-size: var(--ui-font-size-sm);
   }
 
-  :scope:where(:scope):is([data-ui-select-state~="size=lg"]) {
+  :global(:scope[data-ui-select-state~="size=lg"]:where([data-hn-ui-select])) {
     min-block-size: var(--ui-control-size-lg);
     padding: var(--ui-space-3) var(--ui-space-4);
     padding-inline-end: calc(var(--ui-space-4) + 1.5rem);
@@ -339,16 +341,16 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
     font-size: var(--ui-font-size-md);
   }
   @media (pointer: coarse) {
-    :scope:where(:scope) {
+    :global(:scope:where([data-hn-ui-select])) {
       min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
     }
 
-    :scope:where(:scope):is([data-ui-select-state~="size=sm"]) {
+    :global(:scope[data-ui-select-state~="size=sm"]:where([data-hn-ui-select])) {
       min-block-size: var(--ui-control-min-block-size);
       font-size: inherit;
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-select])) {
     display: none;
   }
 }