@threadlabs/looma 0.28.13 → 0.28.15

package/vue/UiInputGroup.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'
@@ -123,7 +123,7 @@ const hydrationInstance = getCurrentInstance()
 const root = ref<HTMLElement | null>(null)
 checkHydratedRoot('div', 'ui-input-group')
 
-/** 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',
@@ -167,19 +167,21 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
   <div
     class="ui-input-group"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-input-group
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-action-position="reflectedProp('actionPosition', 'action-position', checkedProps.actionPosition, undefined, false)"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-multiline="reflectedProp('multiline', 'multiline', checkedProps.multiline, undefined, false)"
-    :data-prefix-kind="reflectedProp('prefixKind', 'prefix-kind', checkedProps.prefixKind, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-input-group-prop-action-position="reflectedProp('actionPosition', 'action-position', checkedProps.actionPosition, undefined, false)"
+    :data-ui-input-group-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-input-group-prop-multiline="reflectedProp('multiline', 'multiline', checkedProps.multiline, undefined, false)"
+    :data-ui-input-group-prop-prefix-kind="reflectedProp('prefixKind', 'prefix-kind', checkedProps.prefixKind, undefined, false)"
+    :data-ui-input-group-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-input-group-state="hostState || undefined"
     ref="root"
   >
-    <span class="affix"><slot name="prefix" /></span>
-    <span class="field"><slot /></span>
-    <span class="affix"><slot name="suffix" /></span>
-    <span class="action"><slot name="action" /></span>
+    <span class="affix" data-hn-ui-input-group><slot name="prefix" /></span>
+    <span class="field" data-hn-ui-input-group><slot /></span>
+    <span class="affix" data-hn-ui-input-group><slot name="suffix" /></span>
+    <span class="action" data-hn-ui-input-group><slot name="action" /></span>
   </div>
 </template>
 
@@ -224,8 +226,8 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-input-group) {
-  :scope:where(:scope) {
+@scope (.ui-input-group) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-input-group])) {
     /* The group's own border and height stand for the input's, so the group is a lone Input's height.
        Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
     --_ui-default-input-border-width: 0;
@@ -271,47 +273,47 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
       box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
-  :scope:where(:scope):is([data-ui-input-group-state~="variant=subtle"]) {
+  :global(:scope[data-ui-input-group-state~="variant=subtle"]:where([data-hn-ui-input-group])) {
     border-color: var(--ui-border);
     background: var(--ui-surface-muted);
     box-shadow: none;
   }
-  :scope:where(:scope):is(:has(.field [data-ui-input-state~="size=sm"])) {
+  :global(:scope:has(.field [data-ui-input-state~="size=sm"]):where([data-hn-ui-input-group])) {
     min-block-size: var(--ui-control-size-sm);
   }
 
-  :scope:where(:scope):is(:has(.field [data-ui-input-state~="size=lg"])) {
+  :global(:scope:has(.field [data-ui-input-state~="size=lg"]):where([data-hn-ui-input-group])) {
     min-block-size: var(--ui-control-size-lg);
   }
 
   @media (pointer: coarse) {
-    :scope:where(:scope) {
+    :global(:scope:where([data-hn-ui-input-group])) {
       min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
     }
 
-    :scope:where(:scope):is(:has(.field [data-ui-input-state~="size=sm"])) {
+    :global(:scope:has(.field [data-ui-input-state~="size=sm"]):where([data-hn-ui-input-group])) {
       min-block-size: var(--ui-control-min-block-size);
     }
   }
 
-  :scope:where(:scope):is(:hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid])))) {
+  :global(:scope:hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))):where([data-hn-ui-input-group])) {
     border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
   }
-  :scope:where(:scope):is(:has(.field :is(input, textarea):focus-visible)) {
+  :global(:scope:has(.field :is(input, textarea):focus-visible):where([data-hn-ui-input-group])) {
     border-color: var(--ui-control-focus, var(--ui-accent-solid));
     box-shadow:
       var(--ui-control-inset),
       var(--ui-control-focus-halo-shadow);
   }
 
-  :scope:where(:scope):is(:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))) {
+  :global(:scope:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):where([data-hn-ui-input-group])) {
     border-color: var(
       --ui-input-group-invalid-border,
       var(--ui-field-danger, var(--ui-danger-solid))
     );
   }
 
-  :scope:where(:scope):is(:has(:is(input, textarea):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible)) {
+  :global(:scope:has(:is(input, textarea):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible):where([data-hn-ui-input-group])) {
     box-shadow: var(
       --ui-input-group-invalid-focus-shadow,
       var(--ui-control-inset),
@@ -323,26 +325,26 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
     );
   }
   @media (forced-colors: active) {
-    :scope:where(:scope):is(:has(:is(input, textarea):focus-visible)) {
+    :global(:scope:has(:is(input, textarea):focus-visible):where([data-hn-ui-input-group])) {
       outline: var(--ui-focus-width) solid Highlight;
       outline-offset: var(--ui-border-width);
     }
   }
 
-  :scope:where(:scope):is([data-ui-input-group-state~="disabled"]),
-  :scope:where(:scope):is(:has(:is(input, textarea):disabled)) {
+  :global(:scope[data-ui-input-group-state~="disabled"]:where([data-hn-ui-input-group])),
+  :global(:scope:has(:is(input, textarea):disabled):where([data-hn-ui-input-group])) {
     background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
     box-shadow: none;
     cursor: not-allowed;
   }
 
-  .field {
+  :global(.field:where([data-hn-ui-input-group])) {
     display: flex;
     flex: 1;
     min-inline-size: 0;
   }
 
-  .affix {
+  :global(.affix:where([data-hn-ui-input-group])) {
     display: inline-flex;
     flex: none;
     align-items: center;
@@ -352,60 +354,62 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
     font-size: var(--ui-font-size-sm);
     white-space: nowrap;
   }
-  .affix:has([slot="prefix"]), .affix:has([slot="suffix"]) {
+  :global(.affix:has([slot="prefix"]):where([data-hn-ui-input-group])),
+  :global(.affix:has([slot="suffix"]):where([data-hn-ui-input-group])) {
     background: var(--ui-surface-muted);
   }
 
-  .affix:has([slot="prefix"]) {
+  :global(.affix:has([slot="prefix"]):where([data-hn-ui-input-group])) {
     border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
   }
 
-  .affix:has([slot="suffix"]) {
+  :global(.affix:has([slot="suffix"]):where([data-hn-ui-input-group])) {
     border-inline-start: var(--ui-border-width) solid var(--ui-border-divider);
   }
 
-  :scope:where(:scope):is([data-ui-input-group-state~="prefixKind=icon"]) {
+  :global(:scope[data-ui-input-group-state~="prefixKind=icon"]:where([data-hn-ui-input-group])) {
     --_ui-default-input-padding-inline-start: var(--ui-space-2);
   }
-  :scope[data-ui-input-group-state~="prefixKind=icon"] .affix:first-child {
+  :global(:scope[data-ui-input-group-state~="prefixKind=icon"]
+    .affix:first-child:where([data-hn-ui-input-group])) {
     padding-inline-end: 0;
     border-inline-end: 0;
     background: transparent;
   }
-  .action {
+  :global(.action:where([data-hn-ui-input-group])) {
     display: flex;
     flex: none;
     align-items: center;
     padding-inline: var(--ui-space-1);
   }
-  :scope:where(:scope):is([data-ui-input-group-state~="multiline"]) {
+  :global(:scope[data-ui-input-group-state~="multiline"]:where([data-hn-ui-input-group])) {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
   }
 
-  :scope[data-ui-input-group-state~="multiline"] .field {
+  :global(:scope[data-ui-input-group-state~="multiline"] .field:where([data-hn-ui-input-group])) {
     grid-column: 2;
   }
 
-  :scope[data-ui-input-group-state~="multiline"] .action {
+  :global(:scope[data-ui-input-group-state~="multiline"] .action:where([data-hn-ui-input-group])) {
     grid-column: 1 / -1;
     justify-content: end;
     padding: var(--ui-space-2);
     padding-block-start: 0;
   }
-  :scope:where(:scope):is([data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]) {
+  :global(:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]:where([data-hn-ui-input-group])) {
     --_ui-default-textarea-padding-inline-end: calc(
       var(--_ui-input-group-action-inline-size, 7rem) + var(--ui-space-3)
     );
   }
 
-  :scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
-    .field {
+  :global(:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
+    .field:where([data-hn-ui-input-group])) {
     grid-row: 1;
   }
 
-  :scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
-    .action {
+  :global(:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
+    .action:where([data-hn-ui-input-group])) {
     grid-column: 2;
     grid-row: 1;
     align-self: start;
@@ -413,10 +417,11 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
     padding: var(--ui-space-2);
   }
 
-  .affix:empty, .action:empty {
+  :global(.affix:empty:where([data-hn-ui-input-group])),
+  :global(.action:empty:where([data-hn-ui-input-group])) {
     display: none;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-input-group])) {
     display: none;
   }
 }

package/vue/UiList.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, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -103,7 +103,7 @@ const root = rootArmElement
 preserveRootFocus(root)
 checkHydratedRoot((checkedProps.value.as === 'ol') ? 'ol' : ('ul'), 'ui-list')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.as && 'as',
@@ -125,11 +125,13 @@ const hostState = computed(() =>
     v-if="checkedProps.as === 'ol'"
     class="ui-list"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-list
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
-    :data-layout="reflectedProp('layout', 'layout', checkedProps.layout, undefined, false)"
-    :data-markers="reflectedProp('markers', 'markers', checkedProps.markers, undefined, false)"
+    :data-ui-list-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-list-prop-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
+    :data-ui-list-prop-layout="reflectedProp('layout', 'layout', checkedProps.layout, undefined, false)"
+    :data-ui-list-prop-markers="reflectedProp('markers', 'markers', checkedProps.markers, undefined, false)"
     :data-ui-list-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -140,11 +142,13 @@ const hostState = computed(() =>
     class="ui-list"
     role="list"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-list
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
-    :data-layout="reflectedProp('layout', 'layout', checkedProps.layout, undefined, false)"
-    :data-markers="reflectedProp('markers', 'markers', checkedProps.markers, undefined, false)"
+    :data-ui-list-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-list-prop-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
+    :data-ui-list-prop-layout="reflectedProp('layout', 'layout', checkedProps.layout, undefined, false)"
+    :data-ui-list-prop-markers="reflectedProp('markers', 'markers', checkedProps.markers, undefined, false)"
     :data-ui-list-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -171,8 +175,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-list) {
-  :scope:where(:scope) {
+@scope (.ui-list) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-list])) {
     --_list-gap: var(--ui-list-gap, var(--ui-space-1));
     --_list-min-item-width: var(--ui-list-min-item-width, 14rem);
     display: flex;
@@ -185,20 +189,20 @@ const hostState = computed(() =>
     list-style: none;
   }
 
-  :scope:where(:scope):is([data-ui-list-state~="as=ol"]),
-  :scope:where(:scope):is([data-ui-list-state~="markers=disc"]) {
+  :global(:scope[data-ui-list-state~="as=ol"]:where([data-hn-ui-list])),
+  :global(:scope[data-ui-list-state~="markers=disc"]:where([data-hn-ui-list])) {
     padding-inline-start: var(--ui-space-5);
   }
 
-  :scope:where(:scope):is([data-ui-list-state~="as=ol"]) {
+  :global(:scope[data-ui-list-state~="as=ol"]:where([data-hn-ui-list])) {
     list-style: decimal;
   }
 
-  :scope:where(:scope):is([data-ui-list-state~="markers=disc"]) {
+  :global(:scope[data-ui-list-state~="markers=disc"]:where([data-hn-ui-list])) {
     list-style: disc;
   }
 
-  :scope > :slotted(li) {
+  :global(:scope > :where(:not([data-hn-ui-list])):is(li)) {
     box-sizing: border-box;
     min-inline-size: 0;
     padding: var(--_ui-list-native-padding-block, var(--ui-space-2))
@@ -208,7 +212,7 @@ const hostState = computed(() =>
     list-style: inherit;
   }
 
-  :scope > :slotted(li.card) {
+  :global(:scope > :where(:not([data-hn-ui-list])):is(li.card)) {
     padding: var(--_ui-list-native-padding-block, var(--ui-space-3))
       var(--_ui-list-native-padding-inline, var(--ui-space-4));
     border: var(--ui-border-width) solid var(--ui-border-strong);
@@ -216,7 +220,7 @@ const hostState = computed(() =>
     background: var(--ui-surface-raised);
     list-style: none;
   }
-  :scope:where(:scope):is([data-ui-list-state~="density=compact"]) {
+  :global(:scope[data-ui-list-state~="density=compact"]:where([data-hn-ui-list])) {
     --_list-gap: var(--ui-list-gap, var(--ui-space-2));
     --_ui-list-item-min-size: 0;
     --_ui-list-item-padding-block: 0;
@@ -226,12 +230,12 @@ const hostState = computed(() =>
     --_ui-list-native-padding-inline: 0;
   }
 
-  :scope:where(:scope):is([data-ui-list-state~="layout=grid"]) {
+  :global(:scope[data-ui-list-state~="layout=grid"]:where([data-hn-ui-list])) {
     --_list-gap: var(--ui-list-gap, var(--ui-space-3));
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_list-min-item-width)), 1fr));
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-list])) {
     display: none;
   }
 }

package/vue/UiListItem.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'
@@ -129,7 +129,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('li', 'ui-list-item')
 
-/** 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',
@@ -149,26 +149,31 @@ const hostState = computed(() =>
   <li
     class="ui-list-item"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-list-item
     :aria-current="checkedProps.current ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
-    :data-highlighted="reflectedProp('highlighted', 'highlighted', checkedProps.highlighted, undefined, false)"
-    :data-leading-interactive="reflectedProp(
+    :data-ui-list-item-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-list-item-prop-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
+    :data-ui-list-item-prop-highlighted="reflectedProp('highlighted', 'highlighted', checkedProps.highlighted, undefined, false)"
+    :data-ui-list-item-prop-leading-interactive="reflectedProp(
       'leadingInteractive',
       'leading-interactive',
       checkedProps.leadingInteractive,
       undefined,
       false,
     )"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
-    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
+    :data-ui-list-item-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-list-item-prop-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-list-item-state="hostState || undefined"
   >
-    <span class="leading"><slot name="leading" /></span>
-    <span class="content"><span class="title"><slot /></span>
-      <span class="description"><slot name="description" /></span></span>
-    <span class="trailing"><slot name="trailing" /></span>
+    <span class="leading" data-hn-ui-list-item><slot name="leading" /></span>
+    <span class="content" data-hn-ui-list-item><span
+        class="title"
+        data-hn-ui-list-item
+      ><slot /></span>
+      <span class="description" data-hn-ui-list-item><slot name="description" /></span></span>
+    <span class="trailing" data-hn-ui-list-item><slot name="trailing" /></span>
   </li>
 </template>
 
@@ -213,8 +218,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-list-item) {
-  :scope:where(:scope) {
+@scope (.ui-list-item) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-list-item])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-list-item-icon-size: var(--ui-list-item-icon-size);
 
@@ -240,7 +245,7 @@ const hostState = computed(() =>
       border-color var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
-  :scope:where(:scope):is([data-ui-list-item-state~="variant=card"]) {
+  :global(:scope[data-ui-list-item-state~="variant=card"]:where([data-hn-ui-list-item])) {
     padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
     padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
     border: var(--ui-border-width) solid var(--ui-border-strong);
@@ -248,57 +253,59 @@ const hostState = computed(() =>
     background: var(--ui-surface-raised);
   }
 
-  :scope:where(:scope):is(:where(:has(.title a[href])):hover),
-  :scope:where(:scope):is([data-ui-list-item-state~="highlighted"]),
-  :scope:where(:scope):is([data-ui-list-item-state~="current"]) {
+  :global(:scope:where(:has(.title a[href])):hover:where([data-hn-ui-list-item])),
+  :global(:scope[data-ui-list-item-state~="highlighted"]:where([data-hn-ui-list-item])),
+  :global(:scope[data-ui-list-item-state~="current"]:where([data-hn-ui-list-item])) {
     background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
     box-shadow: inset 0 0 0 var(--ui-border-width)
       var(--_ui-selection-context-border, var(--ui-selection-border));
   }
 
-  :scope:where(:scope):is([data-ui-list-item-state~="variant=card"]:where(:has(.title
-    a[href])):hover) {
+  :global(:scope[data-ui-list-item-state~="variant=card"]:where(:has(.title
+    a[href])):hover:where([data-hn-ui-list-item])) {
     border-color: var(--ui-border-strong);
   }
 
-  :scope:where(:scope):is([data-ui-list-item-state~="current"]) {
+  :global(:scope[data-ui-list-item-state~="current"]:where([data-hn-ui-list-item])) {
     color: var(--_ui-selection-context-text, var(--ui-selection-text));
   }
-  :scope:where(:scope):is([data-ui-list-item-state~="variant=card"]) {
+  :global(:scope[data-ui-list-item-state~="variant=card"]:where([data-hn-ui-list-item])) {
     box-shadow: none;
   }
 
-  :scope:where(:scope):is(:has(.title a[href]:focus-visible)) {
+  :global(:scope:has(.title a[href]:focus-visible):where([data-hn-ui-list-item])) {
     box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
   }
 
-  .leading, .trailing {
+  :global(.leading:where([data-hn-ui-list-item])),
+  :global(.trailing:where([data-hn-ui-list-item])) {
     display: inline-flex;
     flex: none;
     align-items: center;
     gap: var(--ui-space-2);
   }
 
-  .leading {
+  :global(.leading:where([data-hn-ui-list-item])) {
     color: var(--ui-text-muted);
     font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
   }
 
-  :scope[data-ui-list-item-state~="current"] .leading {
+  :global(:scope[data-ui-list-item-state~="current"] .leading:where([data-hn-ui-list-item])) {
     color: var(--_ui-selection-context-text, var(--ui-selection-text));
   }
-  :scope[data-ui-list-item-state~="leadingInteractive"] .leading {
+  :global(:scope[data-ui-list-item-state~="leadingInteractive"]
+    .leading:where([data-hn-ui-list-item])) {
     position: relative;
     z-index: 1;
   }
-  .trailing {
+  :global(.trailing:where([data-hn-ui-list-item])) {
     position: relative;
     z-index: 1;
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-sm);
   }
 
-  .content {
+  :global(.content:where([data-hn-ui-list-item])) {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -306,7 +313,8 @@ const hostState = computed(() =>
     min-inline-size: 0;
   }
 
-  .title, .description {
+  :global(.title:where([data-hn-ui-list-item])),
+  :global(.description:where([data-hn-ui-list-item])) {
     display: block;
     min-inline-size: 0;
     overflow: hidden;
@@ -314,63 +322,65 @@ const hostState = computed(() =>
     white-space: nowrap;
   }
 
-  :scope[data-ui-list-item-state~="wrap"] .title,
-  :scope[data-ui-list-item-state~="wrap"] .description {
+  :global(:scope[data-ui-list-item-state~="wrap"] .title:where([data-hn-ui-list-item])),
+  :global(:scope[data-ui-list-item-state~="wrap"] .description:where([data-hn-ui-list-item])) {
     white-space: normal;
     overflow-wrap: anywhere;
   }
 
-  .title {
+  :global(.title:where([data-hn-ui-list-item])) {
     font-size: var(--ui-font-size-md);
     font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
     line-height: var(--ui-line-height-tight);
   }
-  :scope:where(:scope):is([data-ui-list-item-state~="align=title"]) {
+  :global(:scope[data-ui-list-item-state~="align=title"]:where([data-hn-ui-list-item])) {
     align-items: flex-start;
   }
 
-  :scope[data-ui-list-item-state~="align=title"] .leading,
-  :scope[data-ui-list-item-state~="align=title"] .trailing {
+  :global(:scope[data-ui-list-item-state~="align=title"] .leading:where([data-hn-ui-list-item])),
+  :global(:scope[data-ui-list-item-state~="align=title"] .trailing:where([data-hn-ui-list-item])) {
     min-block-size: calc(var(--ui-font-size-md) * var(--ui-line-height-tight));
   }
 
-  .description {
+  :global(.description:where([data-hn-ui-list-item])) {
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-sm);
     line-height: var(--ui-line-height-tight);
   }
 
-  .title > :slotted(a) {
+  :global(.title > :where(:not([data-hn-ui-list-item])):is(a)) {
     color: inherit;
     text-decoration: none;
   }
 
-  .title > :slotted(a:focus-visible) {
+  :global(.title > :where(:not([data-hn-ui-list-item])):is(a:focus-visible)) {
     outline: none;
     box-shadow: none;
   }
 
-  .title > :slotted(a[href])::after {
+  :global(.title > :where(:not([data-hn-ui-list-item])):is(a[href])::after) {
     position: absolute;
     inset: 0;
     border-radius: inherit;
     content: "";
   }
-  .leading:empty, .description:empty, .trailing:empty {
+  :global(.leading:empty:where([data-hn-ui-list-item])),
+  :global(.description:empty:where([data-hn-ui-list-item])),
+  :global(.trailing:empty:where([data-hn-ui-list-item])) {
     display: none;
   }
 
   @media (forced-colors: active) {
-    :scope:where(:scope):is(:has(a:focus-visible)) {
+    :global(:scope:has(a:focus-visible):where([data-hn-ui-list-item])) {
       outline: var(--ui-focus-width) solid Highlight;
       outline-offset: calc(-1 * var(--ui-focus-width));
     }
-    :is(:scope[data-ui-list-item-state~="current"], :scope[data-ui-list-item-state~="highlighted"]):not(:has(a:focus-visible)) {
+    :global(:is(:scope[data-ui-list-item-state~="current"], :scope[data-ui-list-item-state~="highlighted"]):not(:has(a:focus-visible)):where([data-hn-ui-list-item])) {
       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-list-item])) {
     display: none;
   }
 }