@threadlabs/looma 0.28.13 → 0.28.14

package/vue/UiListbox.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'
@@ -287,6 +287,8 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
     class="ui-listbox"
     role="listbox"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-listbox
     :tabindex="guarded"
     :aria-multiselectable="checkedProps.multiple ?? undefined"
     :aria-disabled="checkedProps.disabled ?? undefined"
@@ -294,23 +296,24 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
     :aria-invalid="checkedProps.invalid || validationError"
     :style="{ '--_rows': checkedProps.rows?.toString() }"
     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-multiple="reflectedProp('multiple', 'multiple', checkedProps.multiple, undefined, false)"
-    :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
-    :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
-    :data-rows="reflectedProp('rows', 'rows', checkedProps.rows, undefined, false)"
-    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
-    :data-values="reflectedProp('values', 'values', checkedProps.values, undefined, false)"
+    :data-ui-listbox-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-listbox-prop-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
+    :data-ui-listbox-prop-multiple="reflectedProp('multiple', 'multiple', checkedProps.multiple, undefined, false)"
+    :data-ui-listbox-prop-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
+    :data-ui-listbox-prop-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
+    :data-ui-listbox-prop-rows="reflectedProp('rows', 'rows', checkedProps.rows, undefined, false)"
+    :data-ui-listbox-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    :data-ui-listbox-prop-values="reflectedProp('values', 'values', checkedProps.values, undefined, false)"
     ref="root"
   >
-    <div class="choices">
+    <div class="choices" data-hn-ui-listbox>
       <UiScrollArea class="ui-scroll-area" ref="choicesElement"><KeyedBoundary><div
             v-for="choice in uniqueKeys(choices, (choice, index, loop) => choice.index)"
             :key="choice.index"
             class="option"
             role="option"
             data-ui-choice-option=""
+            data-hn-ui-listbox
             :data-multiple="checkedProps.multiple ? '' : undefined"
             :id="concat(uid, '-option-', choice.index)"
             :data-index="choice.index"
@@ -318,12 +321,13 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
             :aria-disabled="choice.disabled"
             :class="{ active: choice.index === active }"
           >
-            <span>{{ choice.label }}</span>
+            <span data-hn-ui-listbox>{{ choice.label }}</span>
           </div></KeyedBoundary></UiScrollArea>
     </div>
     <select
       class="fallback"
       aria-label="Choices"
+      data-hn-ui-listbox
       :size="checkedProps.rows ?? undefined"
       :multiple="checkedProps.multiple ?? undefined"
       :disabled="checkedProps.disabled ?? undefined"
@@ -337,6 +341,7 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
         v-for="(selected, indexLoop) in selection"
         :key="indexLoop"
         type="hidden"
+        data-hn-ui-listbox
         :name="checkedProps.name ?? undefined"
         :value.attr="selected"
       ></template>
@@ -345,6 +350,7 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
       type="checkbox"
       aria-hidden="true"
       tabindex="-1"
+      data-hn-ui-listbox
       :required="checkedProps.required && !hasSelection && !checkedProps.disabled"
       :checked.attr="hasSelection ? true : undefined"
       :disabled="checkedProps.disabled ?? undefined"
@@ -377,8 +383,8 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
 
 /* Its own box around the nested Scroll Area, which it shrinks into so the choices scroll. */
 
-@scope (.ui-listbox) to (.ui-scroll-area) {
-  :scope:where(:scope) {
+@scope (.ui-listbox) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-listbox])) {
     position: relative;
     box-sizing: border-box;
     display: block;
@@ -395,30 +401,31 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
     box-shadow: var(--ui-control-inset);
     outline: none;
   }
-  .choices {
+  :global(.choices:where([data-hn-ui-listbox])) {
     display: flex;
     flex-direction: column;
     max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
   }
 
-  :scope:where(:scope):is(:not([data-enhanced])) {
+  :global(:scope:not([data-enhanced]):where([data-hn-ui-listbox])) {
     padding: 0;
     border: 0;
     background: transparent;
     box-shadow: none;
   }
 
-  :scope:not([data-enhanced]) .choices, :scope[data-enhanced] .fallback {
+  :global(:scope:not([data-enhanced]) .choices:where([data-hn-ui-listbox])),
+  :global(:scope[data-enhanced] .fallback:where([data-hn-ui-listbox])) {
     display: none;
   }
 
-  .fallback {
+  :global(.fallback:where([data-hn-ui-listbox])) {
     box-sizing: border-box;
     inline-size: 100%;
     font: inherit;
   }
 
-  .validity {
+  :global(.validity:where([data-hn-ui-listbox])) {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -428,25 +435,25 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
     pointer-events: none;
   }
 
-  :scope:where(:scope):is(:focus-visible) {
+  :global(:scope:focus-visible:where([data-hn-ui-listbox])) {
     border-color: var(--ui-control-focus);
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     outline-offset: var(--ui-focus-width);
     box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
   }
 
-  :scope:where(:scope):is([aria-invalid="true"]) {
+  :global(:scope[aria-invalid="true"]:where([data-hn-ui-listbox])) {
     border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
   }
 
-  :scope:where(:scope):is([aria-disabled="true"]) {
+  :global(:scope[aria-disabled="true"]:where([data-hn-ui-listbox])) {
     background: var(--ui-control-surface-disabled);
     color: var(--ui-disabled-text);
     box-shadow: none;
     cursor: not-allowed;
   }
 
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-listbox])) {
     display: none;
   }
 }

package/vue/UiMenu.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, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -186,7 +186,7 @@ const internalOpen = ref(false)
 provide('html-next:ui-menu:internalOpen', internalOpen)
 checkHydratedRoot('div', 'ui-menu')
 
-/** 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',
@@ -275,18 +275,20 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
     role="menu"
     aria-orientation="vertical"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-menu
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
-    :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
-    :data-icons="reflectedProp('icons', 'icons', checkedProps.icons, undefined, false)"
-    :data-inline="reflectedProp('inline', 'inline', checkedProps.inline, undefined, false)"
-    :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
-    :data-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-menu-prop-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
+    :data-ui-menu-prop-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
+    :data-ui-menu-prop-icons="reflectedProp('icons', 'icons', checkedProps.icons, undefined, false)"
+    :data-ui-menu-prop-inline="reflectedProp('inline', 'inline', checkedProps.inline, undefined, false)"
+    :data-ui-menu-prop-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
+    :data-ui-menu-prop-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
+    :data-ui-menu-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-menu-state="hostState || undefined"
     ref="root"
   >
-    <div class="surface"><slot /></div>
+    <div class="surface" data-hn-ui-menu><slot /></div>
   </div>
 </template>
 
@@ -318,8 +320,8 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
 
 /* Small follows its trigger down: an item's own hooks still win. */
 
-@scope (.ui-menu) {
-  :scope:where(:scope):is([data-ui-menu-state~="density=compact"]) {
+@scope (.ui-menu) to ([data-hn]) {
+  :global(:scope[data-ui-menu-state~="density=compact"]:where([data-hn-ui-menu])) {
     --_ui-default-menu-item-padding-block: var(--ui-space-1);
     --_ui-default-menu-item-padding-inline: var(--ui-space-2);
     --_ui-default-menu-item-font-size: var(--ui-font-size-sm);
@@ -327,7 +329,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
     padding: var(--ui-space-1);
     gap: 0;
   }
-  :scope:where(:scope):is([data-ui-menu-state~="size=sm"]) {
+  :global(:scope[data-ui-menu-state~="size=sm"]:where([data-hn-ui-menu])) {
     --_ui-default-menu-item-padding-block: var(--ui-space-0-5);
     --_ui-default-menu-item-padding-inline: var(--ui-space-2);
     --_ui-default-menu-item-font-size: var(--ui-font-size-xs);
@@ -339,11 +341,11 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
     gap: 0;
   }
 
-  :scope:where(:scope):is([data-ui-menu-state~="icons"]) {
+  :global(:scope[data-ui-menu-state~="icons"]:where([data-hn-ui-menu])) {
     --_ui-default-menu-icon-display: inline-flex;
   }
 
-  :scope:where(:scope) {
+  :global(:scope:where([data-hn-ui-menu])) {
     --_ui-menu-surface: var(--ui-menu-surface);
     --_ui-menu-border: var(--ui-menu-border);
     --_ui-menu-radius: var(--ui-menu-radius);
@@ -371,7 +373,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
     overflow: visible;
   }
 
-  .surface {
+  :global(.surface:where([data-hn-ui-menu])) {
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
@@ -389,7 +391,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
     overflow: auto;
   }
 
-  .surface hr {
+  :global(.surface hr:where([data-hn-ui-menu])) {
     align-self: stretch;
     block-size: 0;
     margin: var(--ui-space-1) 0;
@@ -397,11 +399,11 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
     border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
   }
 
-  :scope:where(:scope):is(:not(:scope[data-ui-menu-state~="internalOpen"]):not(:scope[data-ui-menu-state~="inline"])) {
+  :global(:scope:not([data-ui-menu-state~="internalOpen"]):not(:scope[data-ui-menu-state~="inline"]):where([data-hn-ui-menu])) {
     display: none;
   }
 
-  :scope:where(:scope):is([popover]) {
+  :global(:scope[popover]:where([data-hn-ui-menu])) {
     position: fixed;
     inset: auto;
     margin: 0;
@@ -416,24 +418,24 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
       overlay var(--ui-motion-fast) allow-discrete;
   }
 
-  :scope:where(:scope):is([popover]:popover-open) {
+  :global(:scope[popover]:popover-open:where([data-hn-ui-menu])) {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 
   @starting-style {
-    :scope:where(:scope):is([popover]:popover-open) {
+    :global(:scope[popover]:popover-open:where([data-hn-ui-menu])) {
       opacity: 0;
       transform: translateY(-4px) scale(0.99);
     }
   }
 
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-menu])) {
     display: none;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    :scope:where(:scope):is([popover]) {
+    :global(:scope[popover]:where([data-hn-ui-menu])) {
       transition: none;
     }
   }

package/vue/UiMenuGroup.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'
@@ -45,29 +45,33 @@ checkHydratedRoot('div', 'ui-menu-group')
     class="ui-menu-group"
     role="group"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-menu-group
     :aria-label="checkedProps.label ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-menu-group-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
   >
-    <div v-if="checkedProps.label" class="heading">{{ checkedProps.label }}</div>
+    <div v-if="checkedProps.label" class="heading" data-hn-ui-menu-group>
+      {{ checkedProps.label }}
+    </div>
     <slot />
   </div>
 </template>
 
 <style scoped>
-@scope (.ui-menu-group) {
-  :scope:where(:scope) {
+@scope (.ui-menu-group) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-menu-group])) {
     display: flex;
     flex-direction: column;
     min-inline-size: 0;
   }
-  .heading {
+  :global(.heading:where([data-hn-ui-menu-group])) {
     padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-sm);
     font-weight: var(--ui-font-semibold);
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-menu-group])) {
     display: none;
   }
 }

package/vue/UiMenuItem.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'
@@ -187,7 +187,7 @@ checkHydratedRoot(
   'ui-menu-item',
 )
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.tone && 'tone',
@@ -252,25 +252,32 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
     role="menuitem"
     tabindex="-1"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-menu-item
     :aria-disabled="checkedProps.disabled ?? undefined"
+    :data-value="checkedProps.value ?? undefined"
     :href="guarded"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
-    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, true)"
+    :data-ui-menu-item-prop-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
+    :data-ui-menu-item-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-menu-item-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-ui-menu-item-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-menu-item-prop-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
+    :data-ui-menu-item-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     :data-ui-menu-item-state="hostState || undefined"
     ref="@html-next/root"
-  ><span class="icon" aria-hidden="true"><slot name="icon" /></span>
-    <span class="label"><slot /></span>
-    <span class="shortcut" aria-hidden="true"><slot name="shortcut" /></span></a>
+  ><span class="icon" aria-hidden="true" data-hn-ui-menu-item><slot name="icon" /></span>
+    <span class="label" data-hn-ui-menu-item><slot /></span>
+    <span class="shortcut" aria-hidden="true" data-hn-ui-menu-item><slot
+        name="shortcut"
+      /></span></a>
   <div
     v-else
     class="ui-menu-item"
     tabindex="-1"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-menu-item
     :role="attribute(
       (({ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }) as Record<
         string,
@@ -292,24 +299,25 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
       ],
     )"
     :aria-disabled="checkedProps.disabled ?? undefined"
+    :data-value="checkedProps.value ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
-    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, true)"
+    :data-ui-menu-item-prop-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
+    :data-ui-menu-item-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-menu-item-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-ui-menu-item-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-menu-item-prop-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
+    :data-ui-menu-item-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     :data-ui-menu-item-state="hostState || undefined"
     ref="@html-next/root"
   >
-    <span class="indicator" aria-hidden="true"><UiIcon
+    <span class="indicator" aria-hidden="true" data-hn-ui-menu-item><UiIcon
         v-if="(checkedProps.type === 'checkbox' || checkedProps.type === 'radio') && internalChecked"
         class="ui-icon"
         name="check"
       /></span>
-    <span class="icon" aria-hidden="true"><slot name="icon" /></span>
-    <span class="label"><slot /></span>
-    <span class="shortcut" aria-hidden="true"><slot name="shortcut" /></span>
+    <span class="icon" aria-hidden="true" data-hn-ui-menu-item><slot name="icon" /></span>
+    <span class="label" data-hn-ui-menu-item><slot /></span>
+    <span class="shortcut" aria-hidden="true" data-hn-ui-menu-item><slot name="shortcut" /></span>
   </div>
 </template>
 
@@ -351,8 +359,8 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-menu-item) to (.ui-icon) {
-  :scope:where(:scope) {
+@scope (.ui-menu-item) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-menu-item])) {
     display: flex;
     align-items: center;
     gap: var(--ui-space-2);
@@ -384,7 +392,7 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
       background-color var(--ui-motion-fast) var(--ui-motion-ease),
       color var(--ui-motion-fast) var(--ui-motion-ease);
   }
-  .icon {
+  :global(.icon:where([data-hn-ui-menu-item])) {
     display: var(--_ui-default-menu-icon-display, none);
     align-items: center;
     justify-content: center;
@@ -393,20 +401,20 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
     block-size: var(--ui-icon-size-sm);
   }
 
-  .icon:not(:empty) {
+  :global(.icon:not(:empty):where([data-hn-ui-menu-item])) {
     display: inline-flex;
   }
 
-  .icon :slotted(svg) {
+  :global(.icon :where(:not([data-hn-ui-menu-item])):is(svg)) {
     inline-size: 100%;
     block-size: 100%;
   }
 
-  :scope:where(:scope):is([data-ui-menu-item-state~="tone=danger"]) {
+  :global(:scope[data-ui-menu-item-state~="tone=danger"]:where([data-hn-ui-menu-item])) {
     color: var(--ui-danger);
   }
 
-  .label {
+  :global(.label:where([data-hn-ui-menu-item])) {
     display: flex;
     align-items: center;
     gap: var(--ui-space-2);
@@ -414,7 +422,7 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
     min-inline-size: 0;
   }
 
-  .indicator {
+  :global(.indicator:where([data-hn-ui-menu-item])) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -428,34 +436,35 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
     --_ui-default-icon-size: 0.75rem;
   }
 
-  :scope[data-ui-menu-item-state~="type=action"] .indicator {
+  :global(:scope[data-ui-menu-item-state~="type=action"] .indicator:where([data-hn-ui-menu-item])) {
     display: none;
   }
 
-  :scope[data-ui-menu-item-state~="type=checkbox"][aria-checked="true"] .indicator {
+  :global(:scope[data-ui-menu-item-state~="type=checkbox"][aria-checked="true"]
+    .indicator:where([data-hn-ui-menu-item])) {
     border-color: var(--ui-accent);
     background: var(--ui-accent);
   }
-  :scope[data-ui-menu-item-state~="type=radio"] .indicator {
+  :global(:scope[data-ui-menu-item-state~="type=radio"] .indicator:where([data-hn-ui-menu-item])) {
     border-color: transparent;
     color: var(--ui-text-secondary);
   }
 
-  .shortcut {
+  :global(.shortcut:where([data-hn-ui-menu-item])) {
     margin-inline-start: auto;
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-sm);
     font-weight: var(--ui-font-normal);
   }
 
-  .shortcut:empty {
+  :global(.shortcut:empty:where([data-hn-ui-menu-item])) {
     display: none;
   }
-  .shortcut :slotted(kbd) {
+  :global(.shortcut :where(:not([data-hn-ui-menu-item])):is(kbd)) {
     font: inherit;
   }
   @supports (text-box-trim: trim-both) {
-    :scope:where(:scope) {
+    :global(:scope:where([data-hn-ui-menu-item])) {
       min-block-size: var(
         --ui-menu-item-min-block-size,
         var(--_ui-default-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem))
@@ -465,37 +474,37 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
     }
   }
 
-  :scope:where(:scope):is(:is(:hover, :focus-visible):not([aria-disabled="true"])) {
+  :global(:scope:is(:hover, :focus-visible):not([aria-disabled="true"]):where([data-hn-ui-menu-item])) {
     background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
   }
 
-  :scope:where(:scope):is(:focus-visible) {
+  :global(:scope:focus-visible:where([data-hn-ui-menu-item])) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     outline-offset: calc(-1 * var(--ui-focus-width));
   }
 
-  :scope:where(:scope):is([aria-disabled="true"]) {
+  :global(:scope[aria-disabled="true"]:where([data-hn-ui-menu-item])) {
     background: var(--ui-disabled-surface);
     color: var(--ui-disabled-text);
     cursor: not-allowed;
   }
 
-  :scope[aria-disabled="true"] .indicator {
+  :global(:scope[aria-disabled="true"] .indicator:where([data-hn-ui-menu-item])) {
     border-color: var(--ui-disabled-border);
     background: transparent;
     color: var(--ui-disabled-text);
   }
 
-  :scope[aria-disabled="true"] .indicator::after {
+  :global(:scope[aria-disabled="true"] .indicator:where([data-hn-ui-menu-item])::after) {
     background: var(--ui-disabled-text);
   }
 
   @media (forced-colors: active) {
-    :scope:where(:scope):is(:focus-visible) {
+    :global(:scope:focus-visible:where([data-hn-ui-menu-item])) {
       outline-color: Highlight;
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-menu-item])) {
     display: none;
   }
 }