@threadlabs/looma 0.28.13 → 0.28.15

package/vue/UiCombobox.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'
@@ -983,7 +983,7 @@ provide('html-next:ui-combobox:statusText', statusText)
 provide('html-next:ui-combobox:validationStatus', validationStatus)
 checkHydratedRoot('div', 'ui-combobox')
 
-/** 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',
@@ -1601,49 +1601,53 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
   <div
     class="ui-combobox"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-combobox
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-allow-create="reflectedProp('allowCreate', 'allow-create', checkedProps.allowCreate, undefined, false)"
-    :data-allow-free-text="reflectedProp('allowFreeText', 'allow-free-text', checkedProps.allowFreeText, undefined, false)"
-    :data-auto-highlight="reflectedProp('autoHighlight', 'auto-highlight', checkedProps.autoHighlight, undefined, false)"
-    :data-clear-query-on-blur="reflectedProp(
+    :data-ui-combobox-prop-allow-create="reflectedProp('allowCreate', 'allow-create', checkedProps.allowCreate, undefined, false)"
+    :data-ui-combobox-prop-allow-free-text="reflectedProp('allowFreeText', 'allow-free-text', checkedProps.allowFreeText, undefined, false)"
+    :data-ui-combobox-prop-auto-highlight="reflectedProp('autoHighlight', 'auto-highlight', checkedProps.autoHighlight, undefined, false)"
+    :data-ui-combobox-prop-clear-query-on-blur="reflectedProp(
       'clearQueryOnBlur',
       'clear-query-on-blur',
       checkedProps.clearQueryOnBlur,
       undefined,
       false,
     )"
-    :data-clearable="reflectedProp('clearable', 'clearable', checkedProps.clearable, undefined, false)"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-disclosure="reflectedProp('disclosure', 'disclosure', checkedProps.disclosure, undefined, false)"
-    :data-filter="reflectedProp('filter', 'filter', checkedProps.filter, undefined, false)"
-    :data-help="reflectedProp('help', 'help', checkedProps.help, undefined, false)"
-    :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
-    :data-items="reflectedProp('items', 'items', checkedProps.items, undefined, false)"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
-    :data-label-visibility="reflectedProp('labelVisibility', 'label-visibility', checkedProps.labelVisibility, undefined, false)"
-    :data-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
-    :data-multiple="reflectedProp('multiple', 'multiple', checkedProps.multiple, undefined, false)"
-    :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
-    :data-open-on-focus="reflectedProp('openOnFocus', 'open-on-focus', checkedProps.openOnFocus, undefined, false)"
-    :data-placeholder="reflectedProp('placeholder', 'placeholder', checkedProps.placeholder, undefined, false)"
-    :data-query="reflectedProp('query', 'query', checkedProps.query, undefined, false)"
-    :data-readonly="reflectedProp('readonly', 'readonly', checkedProps.readonly, undefined, false)"
-    :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
-    :data-select-on-tab="reflectedProp('selectOnTab', 'select-on-tab', checkedProps.selectOnTab, undefined, false)"
-    :data-selected-values="reflectedProp('selectedValues', 'selected-values', checkedProps.selectedValues, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-token-separators="reflectedProp('tokenSeparators', 'token-separators', checkedProps.tokenSeparators, undefined, false)"
-    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    :data-ui-combobox-prop-clearable="reflectedProp('clearable', 'clearable', checkedProps.clearable, undefined, false)"
+    :data-ui-combobox-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-combobox-prop-disclosure="reflectedProp('disclosure', 'disclosure', checkedProps.disclosure, undefined, false)"
+    :data-ui-combobox-prop-filter="reflectedProp('filter', 'filter', checkedProps.filter, undefined, false)"
+    :data-ui-combobox-prop-help="reflectedProp('help', 'help', checkedProps.help, undefined, false)"
+    :data-ui-combobox-prop-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
+    :data-ui-combobox-prop-items="reflectedProp('items', 'items', checkedProps.items, undefined, false)"
+    :data-ui-combobox-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-combobox-prop-label-visibility="reflectedProp('labelVisibility', 'label-visibility', checkedProps.labelVisibility, undefined, false)"
+    :data-ui-combobox-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
+    :data-ui-combobox-prop-multiple="reflectedProp('multiple', 'multiple', checkedProps.multiple, undefined, false)"
+    :data-ui-combobox-prop-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
+    :data-ui-combobox-prop-open-on-focus="reflectedProp('openOnFocus', 'open-on-focus', checkedProps.openOnFocus, undefined, false)"
+    :data-ui-combobox-prop-placeholder="reflectedProp('placeholder', 'placeholder', checkedProps.placeholder, undefined, false)"
+    :data-ui-combobox-prop-query="reflectedProp('query', 'query', checkedProps.query, undefined, false)"
+    :data-ui-combobox-prop-readonly="reflectedProp('readonly', 'readonly', checkedProps.readonly, undefined, false)"
+    :data-ui-combobox-prop-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
+    :data-ui-combobox-prop-select-on-tab="reflectedProp('selectOnTab', 'select-on-tab', checkedProps.selectOnTab, undefined, false)"
+    :data-ui-combobox-prop-selected-values="reflectedProp('selectedValues', 'selected-values', checkedProps.selectedValues, undefined, false)"
+    :data-ui-combobox-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-combobox-prop-token-separators="reflectedProp('tokenSeparators', 'token-separators', checkedProps.tokenSeparators, undefined, false)"
+    :data-ui-combobox-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     :data-ui-combobox-state="hostState || undefined"
     ref="root"
   >
-    <label :for="guarded" :class="{ 'sr-only': checkedProps.labelVisibility === 'sr-only' }">{{
-        checkedProps.label
-      }}<template v-if="checkedProps.required">
+    <label
+      data-hn-ui-combobox
+      :for="guarded"
+      :class="{ 'sr-only': checkedProps.labelVisibility === 'sr-only' }"
+    >{{ checkedProps.label }}<template v-if="checkedProps.required">
         *</template></label>
-    <div class="control">
-      <div class="field" ref="fieldElement">
-        <div class="entry">
+    <div class="control" data-hn-ui-combobox>
+      <div class="field" data-hn-ui-combobox ref="fieldElement">
+        <div class="entry" data-hn-ui-combobox>
           <slot name="start" />
           <template v-if="checkedProps.multiple"><KeyedBoundary><button
                 v-for="(item, index) in uniqueKeys(internalItems, (item, index, loop) => item.id)"
@@ -1651,6 +1655,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
                 class="item"
                 type="button"
                 tabindex="-1"
+                data-hn-ui-combobox
                 :data-index="index"
                 :disabled="checkedProps.disabled || checkedProps.readonly || item.disabled"
                 :aria-label="concat(item.label, ', press Delete or Backspace to remove')"
@@ -1663,6 +1668,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
             role="combobox"
             aria-autocomplete="list"
             autocomplete="off"
+            data-hn-ui-combobox
             v-bind-control="{ tag: 'input', name: 'value', value: display, nativeProperty: true, defaultValue: '' }"
             :id="guardedBinding"
             :aria-controls="guardedBinding2"
@@ -1679,6 +1685,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
         <input
           v-if="checkedProps.name && !checkedProps.multiple"
           type="hidden"
+          data-hn-ui-combobox
           :name="checkedProps.name ?? undefined"
           :value.attr="submitted"
           :disabled="checkedProps.disabled ?? undefined"
@@ -1687,6 +1694,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
               v-for="item in uniqueKeys(internalItems, (item, index, loop) => item.id)"
               :key="item.id"
               type="hidden"
+              data-hn-ui-combobox
               :name="checkedProps.name ?? undefined"
               :value.attr="item.value"
               :disabled="checkedProps.disabled ?? undefined"
@@ -1696,6 +1704,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
           type="button"
           data-combobox-action="clear"
           aria-label="Clear"
+          data-hn-ui-combobox
           :disabled="guardedBinding4"
         >
           <svg
@@ -1706,8 +1715,9 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
+            data-hn-ui-combobox
           >
-            <path d="M7 7l10 10M17 7 7 17"></path>
+            <path d="M7 7l10 10M17 7 7 17" data-hn-ui-combobox></path>
           </svg>
         </button>
         <button
@@ -1716,6 +1726,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
           data-combobox-action="disclosure"
           tabindex="-1"
           aria-label="Show suggestions"
+          data-hn-ui-combobox
           :aria-controls="guardedBinding5"
           :disabled="checkedProps.disabled || checkedProps.readonly"
         >
@@ -1728,8 +1739,9 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
             stroke-width="2.25"
             stroke-linecap="round"
             stroke-linejoin="round"
+            data-hn-ui-combobox
           >
-            <path d="m6 9 6 6 6-6"></path>
+            <path d="m6 9 6 6 6-6" data-hn-ui-combobox></path>
           </svg>
         </button>
       </div>
@@ -1738,6 +1750,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
         class="help"
         type="button"
         aria-label="Help"
+        data-hn-ui-combobox
         :id="guardedBinding6"
         :disabled="checkedProps.disabled ?? undefined"
       >
@@ -1750,10 +1763,11 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
+          data-hn-ui-combobox
         >
-          <circle cx="12" cy="12" r="10"></circle>
-          <path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"></path>
-          <path d="M12 17h.01"></path>
+          <circle cx="12" cy="12" r="10" data-hn-ui-combobox></circle>
+          <path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3" data-hn-ui-combobox></path>
+          <path d="M12 17h.01" data-hn-ui-combobox></path>
         </svg>
       </button>
     </div>
@@ -1764,9 +1778,10 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
       :id="guardedBinding7"
       :for="guardedBinding8"
     >{{ checkedProps.help }}</UiTooltip>
-    <div class="popup" :hidden="!expanded" ref="popupElement">
+    <div class="popup" data-hn-ui-combobox :hidden="!expanded" ref="popupElement">
       <div
         role="listbox"
+        data-hn-ui-combobox
         :id="guardedBinding9"
         :aria-label="guardedBinding10"
         :aria-busy="checkedProps.loading ?? undefined"
@@ -1775,16 +1790,18 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
         <KeyedBoundary><div
             v-for="group in uniqueKeys(groups, (group, indexLoop, loop) => group.name)"
             :key="group.name"
+            data-hn-ui-combobox
             :role="group.role"
             :aria-label="group.label ?? undefined"
           >
-            <div v-if="group.name" class="group">{{ group.name }}</div>
+            <div v-if="group.name" class="group" data-hn-ui-combobox>{{ group.name }}</div>
             <KeyedBoundary><div
                 v-for="row in uniqueKeys(group.rows, (row, indexLoop2, loop) => row.id)"
                 :key="row.id"
                 class="option"
                 role="option"
                 data-ui-choice-option=""
+                data-hn-ui-combobox
                 :data-multiple="checkedProps.multiple ? '' : undefined"
                 :id="concat(uid, '-option-', row.index)"
                 :aria-selected="row.selected"
@@ -1794,25 +1811,32 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
                 :aria-describedby="row.detail ?? undefined"
                 :class="{ active: row.index === active }"
               >
-                <slot :name="concat('option-', row.id)"><span v-if="row.detail" class="detail"><span
-                      class="line"
-                    ><span class="primary" :id="concat(uid, '-option-', row.index, '-label')">{{
-                        row.label
-                      }}</span>
+                <slot :name="concat('option-', row.id)"><span
+                    v-if="row.detail"
+                    class="detail"
+                    data-hn-ui-combobox
+                  ><span class="line" data-hn-ui-combobox><span
+                        class="primary"
+                        data-hn-ui-combobox
+                        :id="concat(uid, '-option-', row.index, '-label')"
+                      >{{ row.label }}</span>
                       <UiBadge
                         v-if="row.tag"
                         class="ui-badge"
                         :tone="row.tag?.tone"
                         :style="{ '--ui-badge-color': row.tag?.color ?? undefined }"
-                      ><span :id="concat(uid, '-option-', row.index, '-tag')">{{
+                      ><span data-hn-ui-combobox :id="concat(uid, '-option-', row.index, '-tag')">{{
                           row.tag?.label
                         }}</span></UiBadge></span>
                     <span
                       v-if="row.description"
                       class="description"
+                      data-hn-ui-combobox
                       :id="concat(uid, '-option-', row.index, '-description')"
                     >{{ row.description }}</span></span>
-                  <span v-if="!row.detail" class="primary">{{ row.label }}</span></slot>
+                  <span v-if="!row.detail" class="primary" data-hn-ui-combobox>{{
+                    row.label
+                  }}</span></slot>
               </div></KeyedBoundary>
           </div></KeyedBoundary>
         <div
@@ -1821,6 +1845,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
           role="option"
           data-ui-choice-option=""
           aria-selected="false"
+          data-hn-ui-combobox
           :data-multiple="checkedProps.multiple ? '' : undefined"
           :id="guardedBinding12"
           :data-index="createIndex"
@@ -1828,23 +1853,39 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
         >
           {{ guardedBinding13 }}
         </div>
-        <div v-if="message" class="message">{{ message }}</div>
+        <div v-if="message" class="message" data-hn-ui-combobox>{{ message }}</div>
         <div
           v-if="!checkedProps.loading && !(rows[0]) && !creatable && !lookupError"
           class="message"
+          data-hn-ui-combobox
         >
           <slot name="empty">No suggestions.</slot>
         </div>
       </div>
       <slot name="footer" />
     </div>
-    <div class="message" :id="guardedBinding14" :hidden="!validation.issues.length">
-      <div v-for="(issue, indexLoop3) in validation.issues" :key="indexLoop3">
+    <div
+      class="message"
+      data-hn-ui-combobox
+      :id="guardedBinding14"
+      :hidden="!validation.issues.length"
+    >
+      <div v-for="(issue, indexLoop3) in validation.issues" :key="indexLoop3" data-hn-ui-combobox>
         {{ issue.message }}
       </div>
     </div>
-    <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">{{ statusText }}</div>
-    <div class="authored-options" hidden="" aria-hidden="true" ref="optionsElement"><slot /></div>
+    <div class="sr-only" role="status" aria-live="polite" aria-atomic="true" data-hn-ui-combobox>
+      {{ statusText }}
+    </div>
+    <div
+      class="authored-options"
+      hidden=""
+      aria-hidden="true"
+      data-hn-ui-combobox
+      ref="optionsElement"
+    >
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -1926,8 +1967,8 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-combobox) to (.ui-badge, .ui-tooltip) {
-  :scope:where(:scope) {
+@scope (.ui-combobox) to ([data-hn]) {
+  :global(:scope:where([data-hn-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);
@@ -1953,19 +1994,19 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     color: var(--ui-text-primary);
     font: inherit;
   }
-  label {
+  :global(label:where([data-hn-ui-combobox])) {
     color: var(--_ui-combobox-label-text, var(--ui-text-primary));
     font-size: var(--_ui-combobox-label-font-size, var(--ui-font-size-sm));
     font-weight: 500;
   }
-  .control {
+  :global(.control:where([data-hn-ui-combobox])) {
     display: flex;
     align-items: center;
     gap: var(--ui-space-2);
     min-inline-size: 0;
   }
 
-  .field {
+  :global(.field:where([data-hn-ui-combobox])) {
     box-sizing: border-box;
     min-block-size: var(--_row);
     flex: 1 1 auto;
@@ -1979,18 +2020,18 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
       border-color var(--ui-motion-fast) var(--ui-motion-ease),
       box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
   }
-  .field:focus-within {
+  :global(.field:focus-within:where([data-hn-ui-combobox])) {
     border-color: var(--ui-control-focus, var(--ui-accent-solid));
     box-shadow:
       var(--ui-control-inset),
       var(--ui-control-focus-halo-shadow);
   }
-  .entry {
+  :global(.entry:where([data-hn-ui-combobox])) {
     display: flex;
     flex: 1 1 auto;
     min-inline-size: 0;
   }
-  .help {
+  :global(.help:where([data-hn-ui-combobox])) {
     flex: none;
     display: inline-flex;
     align-items: center;
@@ -2008,31 +2049,32 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
       color var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
-  .help:hover:enabled, .help[aria-expanded="true"] {
+  :global(.help:hover:enabled:where([data-hn-ui-combobox])),
+  :global(.help[aria-expanded="true"]:where([data-hn-ui-combobox])) {
     background: color-mix(in srgb, currentColor 8%, transparent);
     color: var(--ui-text-primary);
   }
 
-  .help:focus-visible {
+  :global(.help:focus-visible:where([data-hn-ui-combobox])) {
     outline: none;
     box-shadow: var(--ui-focus-halo);
   }
 
-  .help:disabled {
+  :global(.help:disabled:where([data-hn-ui-combobox])) {
     color: var(--ui-disabled-text);
     cursor: not-allowed;
   }
 
-  .help-icon {
+  :global(.help-icon:where([data-hn-ui-combobox])) {
     inline-size: var(--ui-icon-size-sm);
     block-size: var(--ui-icon-size-sm);
   }
 
-  input::selection {
+  :global(input:where([data-hn-ui-combobox])::selection) {
     background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
     color: inherit;
   }
-  input {
+  :global(input:where([data-hn-ui-combobox])) {
     appearance: none;
     width: 100%;
     min-inline-size: 0;
@@ -2048,21 +2090,21 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     margin: 0;
     outline: none;
   }
-  :scope:where(:scope):is([data-ui-combobox-state~="size=sm"]) {
+  :global(:scope[data-ui-combobox-state~="size=sm"]:where([data-hn-ui-combobox])) {
     --_row: var(--ui-control-size-sm);
   }
-  :scope[data-ui-combobox-state~="size=sm"] input {
+  :global(:scope[data-ui-combobox-state~="size=sm"] input:where([data-hn-ui-combobox])) {
     padding: var(--ui-space-1) var(--ui-space-2);
     font-size: var(--ui-font-size-sm);
   }
-  :scope:where(:scope):is([data-ui-combobox-state~="size=lg"]) {
+  :global(:scope[data-ui-combobox-state~="size=lg"]:where([data-hn-ui-combobox])) {
     --_row: var(--ui-control-size-lg);
   }
-  :scope[data-ui-combobox-state~="size=lg"] input {
+  :global(:scope[data-ui-combobox-state~="size=lg"] input:where([data-hn-ui-combobox])) {
     padding: var(--ui-space-3) var(--ui-space-4);
     font-size: var(--ui-font-size-md);
   }
-  button {
+  :global(button:where([data-hn-ui-combobox])) {
     appearance: none;
     display: inline-grid;
     place-items: center;
@@ -2077,36 +2119,38 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     padding: 0 var(--ui-space-1);
     cursor: pointer;
   }
-  .affordance-icon {
+  :global(.affordance-icon:where([data-hn-ui-combobox])) {
     display: block;
     inline-size: var(--ui-icon-size-sm);
     block-size: var(--ui-icon-size-sm);
   }
-  button:hover:enabled {
+  :global(button:hover:enabled:where([data-hn-ui-combobox])) {
     background: var(--ui-surface-muted);
     color: var(--ui-text-primary);
   }
-  button:focus-visible {
+  :global(button:focus-visible:where([data-hn-ui-combobox])) {
     outline: none;
     background: var(--ui-surface-muted);
     box-shadow: inset 0 0 0 var(--ui-focus-width)
       color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
   }
-  input:disabled, button:disabled {
+  :global(input:disabled:where([data-hn-ui-combobox])),
+  :global(button:disabled:where([data-hn-ui-combobox])) {
     color: var(--ui-disabled-text);
     cursor: not-allowed;
   }
-  .field:has(input:disabled) {
+  :global(.field:has(input:disabled):where([data-hn-ui-combobox])) {
     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 {
+  :global(:scope[data-ui-combobox-state~="validationStatus=error"]
+    .field:where([data-hn-ui-combobox])),
+  :global(:scope[data-ui-combobox-state~="invalid"] .field:where([data-hn-ui-combobox])) {
     border-color: var(
       --_ui-combobox-invalid-border,
       var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active)))
     );
   }
-  .popup {
+  :global(.popup:where([data-hn-ui-combobox])) {
     box-sizing: border-box;
     min-inline-size: 12rem;
     max-inline-size: calc(100vw - 1rem);
@@ -2127,44 +2171,46 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
       var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
     );
   }
-  [hidden] {
+  :global([hidden]:where([data-hn-ui-combobox])) {
     display: none;
   }
-  .option[aria-disabled="true"] .primary, .option[aria-disabled="true"] .secondary {
+  :global(.option[aria-disabled="true"] .primary:where([data-hn-ui-combobox])),
+  :global(.option[aria-disabled="true"] .secondary:where([data-hn-ui-combobox])) {
     color: var(--ui-disabled-text);
   }
-  .primary {
+  :global(.primary:where([data-hn-ui-combobox])) {
     display: block;
     color: var(--_ui-combobox-option-text, inherit);
     font-weight: 500;
   }
-  .detail {
+  :global(.detail:where([data-hn-ui-combobox])) {
     display: grid;
     gap: var(--ui-space-0-5);
     min-inline-size: 0;
   }
-  .line {
+  :global(.line:where([data-hn-ui-combobox])) {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--ui-space-2);
   }
-  .description {
+  :global(.description:where([data-hn-ui-combobox])) {
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-sm);
     line-height: var(--ui-line-height-md);
   }
-  .message, .group {
+  :global(.message:where([data-hn-ui-combobox])), :global(.group:where([data-hn-ui-combobox])) {
     color: var(--_ui-combobox-message-text, var(--ui-text-secondary));
     font-weight: 400;
     font-size: var(--ui-font-size-sm);
     line-height: var(--ui-line-height-md);
     overflow-wrap: anywhere;
   }
-  .group, .popup .message {
+  :global(.group:where([data-hn-ui-combobox])),
+  :global(.popup .message:where([data-hn-ui-combobox])) {
     padding: var(--ui-space-2) var(--ui-space-3);
   }
-  .sr-only {
+  :global(.sr-only:where([data-hn-ui-combobox])) {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -2173,67 +2219,72 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     white-space: nowrap;
   }
   @media (pointer: coarse) {
-    :scope:where(:scope) {
+    :global(:scope:where([data-hn-ui-combobox])) {
       --_row: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
     }
-    button {
+    :global(button:where([data-hn-ui-combobox])) {
       min-inline-size: 2.75rem;
       min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
     }
     /* 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:where(:scope):is([data-ui-combobox-state~="size=sm"]) {
+    :global(:scope[data-ui-combobox-state~="size=sm"]:where([data-hn-ui-combobox])) {
       --_row: var(--ui-control-min-block-size);
     }
-    :scope[data-ui-combobox-state~="size=sm"] input {
+    :global(:scope[data-ui-combobox-state~="size=sm"] input:where([data-hn-ui-combobox])) {
       font-size: inherit;
     }
   }
   @media (forced-colors: active) {
-    .field, .popup {
+    :global(.field:where([data-hn-ui-combobox])), :global(.popup:where([data-hn-ui-combobox])) {
       border-color: CanvasText;
     }
-    .option.active {
+    :global(.option.active:where([data-hn-ui-combobox])) {
       outline-color: Highlight;
     }
   }
-  :scope[data-ui-combobox-state~="multiple"] .field {
+  :global(:scope[data-ui-combobox-state~="multiple"] .field:where([data-hn-ui-combobox])) {
     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 {
+  :global(:scope[data-ui-combobox-state~="multiple"] .entry:where([data-hn-ui-combobox])) {
     align-items: center;
     gap: var(--ui-space-1);
     overflow-x: auto;
     scrollbar-width: none;
   }
-  :scope[data-ui-combobox-state~="multiple"] .entry::-webkit-scrollbar {
+  :global(:scope[data-ui-combobox-state~="multiple"]
+    .entry:where([data-hn-ui-combobox])::-webkit-scrollbar) {
     display: none;
   }
-  :scope[data-ui-combobox-state~="multiple"] input {
+  :global(:scope[data-ui-combobox-state~="multiple"] input:where([data-hn-ui-combobox])) {
     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);
   }
-  :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=sm"] .field {
+  :global(:scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=sm"]
+    .field:where([data-hn-ui-combobox])) {
     min-block-size: 0;
     padding: var(--ui-space-0-5);
   }
-  :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=sm"] input {
+  :global(:scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=sm"]
+    input:where([data-hn-ui-combobox])) {
     min-block-size: calc(var(--_row) - 2 * var(--ui-border-width) - 2 * var(--ui-space-0-5));
     padding: 0 var(--ui-space-1);
   }
-  :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=lg"] .field {
+  :global(:scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=lg"]
+    .field:where([data-hn-ui-combobox])) {
     min-block-size: 0;
   }
-  :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=lg"] input {
+  :global(:scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=lg"]
+    input:where([data-hn-ui-combobox])) {
     min-block-size: calc(
       var(--ui-control-size-lg) - 2 * var(--ui-border-width) - 2 * var(--ui-space-1)
     );
   }
-  .item {
+  :global(.item:where([data-hn-ui-combobox])) {
     appearance: none;
     display: inline-flex;
     flex: none;
@@ -2248,14 +2299,14 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     font: inherit;
     cursor: default;
   }
-  .item:focus-visible {
+  :global(.item:focus-visible:where([data-hn-ui-combobox])) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     outline-offset: var(--ui-border-width);
   }
-  .item:disabled {
+  :global(.item:disabled:where([data-hn-ui-combobox])) {
     color: var(--ui-disabled-text);
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-combobox])) {
     display: none;
   }
 }