@threadlabs/looma 0.28.13 → 0.28.14

package/vue/UiPopover.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'
@@ -177,7 +177,7 @@ const internalOpen = ref(false)
 provide('html-next:ui-popover:internalOpen', internalOpen)
 checkHydratedRoot('span', 'ui-popover')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     internalOpen.value && 'internalOpen',
@@ -238,14 +238,16 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
   <span
     class="ui-popover"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-popover
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-for="reflectedProp('for', 'for', checkedProps.for, 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-popover-prop-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
+    :data-ui-popover-prop-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
+    :data-ui-popover-prop-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
+    :data-ui-popover-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-popover-state="hostState || undefined"
     ref="root"
-  ><div class="surface"><slot /></div></span>
+  ><div class="surface" data-hn-ui-popover><slot /></div></span>
 </template>
 
 <style scoped>
@@ -278,8 +280,8 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
   syntax: "*";
   inherits: false;
 }
-@scope (.ui-popover) {
-  :scope:where(:scope) {
+@scope (.ui-popover) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-popover])) {
     --_ui-popover-surface: var(--ui-popover-surface);
     --_ui-popover-border: var(--ui-popover-border);
     --_ui-popover-radius: var(--ui-popover-radius);
@@ -300,7 +302,7 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
     box-shadow: none;
   }
 
-  .surface {
+  :global(.surface:where([data-hn-ui-popover])) {
     box-sizing: border-box;
     max-inline-size: inherit;
     max-block-size: inherit;
@@ -316,11 +318,11 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
     );
   }
 
-  :scope:where(:scope):is(:not(:scope[data-ui-popover-state~="internalOpen"])) {
+  :global(:scope:not([data-ui-popover-state~="internalOpen"]):where([data-hn-ui-popover])) {
     display: none;
   }
 
-  :scope:where(:scope):is([popover]) {
+  :global(:scope[popover]:where([data-hn-ui-popover])) {
     position: fixed;
     inset: auto;
     margin: 0;
@@ -333,37 +335,37 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
       overlay var(--ui-motion-fast) allow-discrete;
   }
 
-  :scope:where(:scope):is([popover]:popover-open) {
+  :global(:scope[popover]:popover-open:where([data-hn-ui-popover])) {
     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-popover])) {
       opacity: 0;
       transform: translateY(-4px) scale(0.99);
     }
   }
 
-  :scope:where(:scope):is([data-ui-popover-state~="size=sm"]) {
+  :global(:scope[data-ui-popover-state~="size=sm"]:where([data-hn-ui-popover])) {
     inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
     max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
   }
-  :scope:where(:scope):is([data-ui-popover-state~="size=md"]) {
+  :global(:scope[data-ui-popover-state~="size=md"]:where([data-hn-ui-popover])) {
     inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
     max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
   }
-  :scope:where(:scope):is([data-ui-popover-state~="size=lg"]) {
+  :global(:scope[data-ui-popover-state~="size=lg"]:where([data-hn-ui-popover])) {
     inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
     max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
   }
 
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-popover])) {
     display: none;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    :scope:where(:scope):is([popover]) {
+    :global(:scope[popover]:where([data-hn-ui-popover])) {
       transition: none;
     }
   }

package/vue/UiRadio.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'
@@ -155,7 +155,7 @@ const internalChecked = ref(false)
 provide('html-next:ui-radio:internalChecked', internalChecked)
 checkHydratedRoot('label', 'ui-radio')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.disabled && 'disabled',
@@ -213,17 +213,20 @@ useComponentHost(() => import('../components/ui-radio/ui-radio.js'), {
   <label
     class="ui-radio"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-radio
     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-name="reflectedProp('name', 'name', checkedProps.name, 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-radio-prop-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
+    :data-ui-radio-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-radio-prop-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
+    :data-ui-radio-prop-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
+    :data-ui-radio-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-radio-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     :data-ui-radio-state="hostState || undefined"
     ref="root"
   ><input
       type="radio"
+      data-hn-ui-radio
       v-bind-control="{
         tag: 'input',
         name: 'checked',
@@ -237,8 +240,8 @@ useComponentHost(() => import('../components/ui-radio/ui-radio.js'), {
       :name="checkedProps.name ?? undefined"
       ref="inputElement"
     >
-    <span class="text"><span class="label"><slot /></span>
-      <span class="description" aria-hidden="true" ref="descriptionElement"><slot
+    <span class="text" data-hn-ui-radio><span class="label" data-hn-ui-radio><slot /></span>
+      <span class="description" aria-hidden="true" data-hn-ui-radio ref="descriptionElement"><slot
           name="description"
         /></span></span></label>
 </template>
@@ -262,8 +265,8 @@ useComponentHost(() => import('../components/ui-radio/ui-radio.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-radio) {
-  :scope:where(:scope) {
+@scope (.ui-radio) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-radio])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-radio-size: var(--ui-radio-size);
 
@@ -274,29 +277,29 @@ useComponentHost(() => import('../components/ui-radio/ui-radio.js'), {
     color: var(--ui-text-primary);
     cursor: pointer;
   }
-  .text {
+  :global(.text:where([data-hn-ui-radio])) {
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-1);
     min-inline-size: 0;
   }
 
-  .label {
+  :global(.label:where([data-hn-ui-radio])) {
     min-inline-size: 0;
     line-height: var(--ui-line-height-md);
   }
 
-  .description {
+  :global(.description:where([data-hn-ui-radio])) {
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-sm);
     line-height: var(--ui-line-height);
   }
 
-  .description:empty {
+  :global(.description:empty:where([data-hn-ui-radio])) {
     display: none;
   }
 
-  input {
+  :global(input:where([data-hn-ui-radio])) {
     flex: 0 0 auto;
     inline-size: var(--_ui-radio-size, 1.125rem);
     block-size: var(--_ui-radio-size, 1.125rem);
@@ -305,48 +308,49 @@ useComponentHost(() => import('../components/ui-radio/ui-radio.js'), {
     cursor: pointer;
   }
 
-  input:focus-visible {
+  :global(input:focus-visible:where([data-hn-ui-radio])) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
     outline-offset: var(--ui-focus-width);
   }
 
-  :scope:where(:scope):is([data-ui-radio-state~="disabled"]) {
+  :global(:scope[data-ui-radio-state~="disabled"]:where([data-hn-ui-radio])) {
     color: var(--ui-disabled-text);
     cursor: not-allowed;
   }
-  :scope[data-ui-radio-state~="disabled"] .description {
+  :global(:scope[data-ui-radio-state~="disabled"] .description:where([data-hn-ui-radio])) {
     color: var(--ui-disabled-text);
   }
-  :scope[data-ui-radio-state~="disabled"] input {
+  :global(:scope[data-ui-radio-state~="disabled"] input:where([data-hn-ui-radio])) {
     cursor: not-allowed;
   }
-  :scope:where(:scope):is([data-ui-radio-state~="size=sm"]) {
+  :global(:scope[data-ui-radio-state~="size=sm"]:where([data-hn-ui-radio])) {
     --_font: var(--ui-font-size-sm);
     --_row: var(--ui-control-size-sm);
   }
 
-  :scope:where(:scope):is([data-ui-radio-state~="size=lg"]) {
+  :global(:scope[data-ui-radio-state~="size=lg"]:where([data-hn-ui-radio])) {
     --_font: var(--ui-font-size-md);
     --_row: var(--ui-control-size-lg);
   }
 
-  :scope:where(:scope):is([data-ui-radio-state~="size=sm"]),
-  :scope:where(:scope):is([data-ui-radio-state~="size=lg"]) {
+  :global(:scope[data-ui-radio-state~="size=sm"]:where([data-hn-ui-radio])),
+  :global(:scope[data-ui-radio-state~="size=lg"]:where([data-hn-ui-radio])) {
     --_line: calc(var(--_font) * var(--ui-line-height-md));
     font-size: var(--_font);
     padding-block: calc((var(--_row) - var(--_line)) / 2);
   }
 
-  :scope[data-ui-radio-state~="size=sm"] input, :scope[data-ui-radio-state~="size=lg"] input {
+  :global(:scope[data-ui-radio-state~="size=sm"] input:where([data-hn-ui-radio])),
+  :global(:scope[data-ui-radio-state~="size=lg"] input:where([data-hn-ui-radio])) {
     margin-top: calc((var(--_line) - var(--_ui-radio-size, 1.125rem)) / 2 + 1px);
   }
 
   @media (pointer: coarse) {
-    :scope:where(:scope):is([data-ui-radio-state~="size=sm"]) {
+    :global(:scope[data-ui-radio-state~="size=sm"]:where([data-hn-ui-radio])) {
       --_row: var(--ui-control-min-block-size);
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-radio])) {
     display: none;
   }
 }

package/vue/UiRadioGroup.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'
@@ -201,7 +201,7 @@ const internalValue = ref('')
 provide('html-next:ui-radio-group:internalValue', internalValue)
 checkHydratedRoot('fieldset', 'ui-radio-group')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.invalid && 'invalid',
@@ -281,22 +281,27 @@ useComponentHost(() => import('../components/ui-radio-group/ui-radio-group.js'),
     class="ui-radio-group"
     role="radiogroup"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-radio-group
     :aria-required="checkedProps.required ?? undefined"
     :aria-invalid="checkedProps.invalid ?? undefined"
     :disabled="checkedProps.disabled ?? 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-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
-    :data-label-visibility="reflectedProp('labelVisibility', 'label-visibility', checkedProps.labelVisibility, undefined, false)"
-    :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
-    :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
-    :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
-    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    :data-ui-radio-group-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-radio-group-prop-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
+    :data-ui-radio-group-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-radio-group-prop-label-visibility="reflectedProp('labelVisibility', 'label-visibility', checkedProps.labelVisibility, undefined, false)"
+    :data-ui-radio-group-prop-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
+    :data-ui-radio-group-prop-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
+    :data-ui-radio-group-prop-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
+    :data-ui-radio-group-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     :data-ui-radio-group-state="hostState || undefined"
     ref="root"
   >
-    <legend :class="{ 'sr-only': checkedProps.labelVisibility === 'sr-only' }">
+    <legend
+      data-hn-ui-radio-group
+      :class="{ 'sr-only': checkedProps.labelVisibility === 'sr-only' }"
+    >
       {{ checkedProps.label }}
     </legend>
     <slot />
@@ -311,8 +316,8 @@ useComponentHost(() => import('../components/ui-radio-group/ui-radio-group.js'),
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-radio-group) {
-  :scope:where(:scope) {
+@scope (.ui-radio-group) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-radio-group])) {
     --_ui-radio-group-invalid-text: var(
       --ui-radio-group-invalid-text,
       var(--ui-field-danger, var(--ui-danger-solid))
@@ -326,7 +331,7 @@ useComponentHost(() => import('../components/ui-radio-group/ui-radio-group.js'),
     border: 0;
   }
 
-  legend {
+  :global(legend:where([data-hn-ui-radio-group])) {
     float: inline-start;
     inline-size: 100%;
     margin: 0 0 var(--ui-space-2);
@@ -335,11 +340,11 @@ useComponentHost(() => import('../components/ui-radio-group/ui-radio-group.js'),
     font-weight: var(--ui-font-medium);
   }
 
-  legend + * {
+  :global(legend + *:where([data-hn-ui-radio-group])) {
     clear: both;
   }
 
-  legend.sr-only {
+  :global(legend.sr-only:where([data-hn-ui-radio-group])) {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -348,15 +353,15 @@ useComponentHost(() => import('../components/ui-radio-group/ui-radio-group.js'),
     white-space: nowrap;
   }
 
-  :scope[data-ui-radio-group-state~="invalid"] legend {
+  :global(:scope[data-ui-radio-group-state~="invalid"] legend:where([data-hn-ui-radio-group])) {
     color: var(--_ui-radio-group-invalid-text);
   }
 
-  :scope:where(:scope):is([data-ui-radio-group-state~="orientation=vertical"]) {
+  :global(:scope[data-ui-radio-group-state~="orientation=vertical"]:where([data-hn-ui-radio-group])) {
     display: inline-grid;
     justify-items: start;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-radio-group])) {
     display: none;
   }
 }

package/vue/UiReel.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'
@@ -72,7 +72,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('div', 'ui-reel')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.gap && 'gap',
@@ -92,10 +92,12 @@ const hostState = computed(() =>
     role="region"
     tabindex="0"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-reel
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
-    :data-item-width="reflectedProp('itemWidth', 'item-width', checkedProps.itemWidth, undefined, false)"
-    :data-snap="reflectedProp('snap', 'snap', checkedProps.snap, undefined, false)"
+    :data-ui-reel-prop-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
+    :data-ui-reel-prop-item-width="reflectedProp('itemWidth', 'item-width', checkedProps.itemWidth, undefined, false)"
+    :data-ui-reel-prop-snap="reflectedProp('snap', 'snap', checkedProps.snap, undefined, false)"
     :data-ui-reel-state="hostState || undefined"
   >
     <slot />
@@ -117,8 +119,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-reel) {
-  :scope:where(:scope) {
+@scope (.ui-reel) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-reel])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-reel-item-width: var(--ui-reel-item-width);
 
@@ -134,7 +136,7 @@ const hostState = computed(() =>
     overflow-y: hidden;
     overscroll-behavior-inline: contain;
   }
-  :scope:where(:scope) {
+  :global(:scope:where([data-hn-ui-reel])) {
     --_ui-scroll-fade-direction: to right;
     --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
     mask-image: linear-gradient(
@@ -157,49 +159,49 @@ const hostState = computed(() =>
       calc(100% - var(--_ui-scroll-fade-size)) 100%;
   }
 
-  :scope:where(:scope):is(:dir(rtl)) {
+  :global(:scope:dir(rtl):where([data-hn-ui-reel])) {
     --_ui-scroll-fade-direction: to left;
   }
 
-  :scope > :slotted(*) {
+  :global(:scope > :where(:not([data-hn-ui-reel])):is(*)) {
     min-inline-size: 0;
     flex: 0 0 var(--_ui-reel-item-width, var(--_reel-item-width));
   }
 
-  :scope:where(:scope):is([data-ui-reel-state~="gap=xs"]) {
+  :global(:scope[data-ui-reel-state~="gap=xs"]:where([data-hn-ui-reel])) {
     --_reel-gap: var(--ui-space-2);
   }
-  :scope:where(:scope):is([data-ui-reel-state~="gap=s"]) {
+  :global(:scope[data-ui-reel-state~="gap=s"]:where([data-hn-ui-reel])) {
     --_reel-gap: var(--ui-space-3);
   }
-  :scope:where(:scope):is([data-ui-reel-state~="gap=m"]) {
+  :global(:scope[data-ui-reel-state~="gap=m"]:where([data-hn-ui-reel])) {
     --_reel-gap: var(--ui-space-4);
   }
-  :scope:where(:scope):is([data-ui-reel-state~="gap=l"]) {
+  :global(:scope[data-ui-reel-state~="gap=l"]:where([data-hn-ui-reel])) {
     --_reel-gap: var(--ui-space-5);
   }
-  :scope:where(:scope):is([data-ui-reel-state~="gap=xl"]) {
+  :global(:scope[data-ui-reel-state~="gap=xl"]:where([data-hn-ui-reel])) {
     --_reel-gap: var(--ui-space-6);
   }
-  :scope:where(:scope):is([data-ui-reel-state~="itemWidth=sm"]) {
+  :global(:scope[data-ui-reel-state~="itemWidth=sm"]:where([data-hn-ui-reel])) {
     --_reel-item-width: 12rem;
   }
-  :scope:where(:scope):is([data-ui-reel-state~="itemWidth=md"]) {
+  :global(:scope[data-ui-reel-state~="itemWidth=md"]:where([data-hn-ui-reel])) {
     --_reel-item-width: 16rem;
   }
-  :scope:where(:scope):is([data-ui-reel-state~="itemWidth=lg"]) {
+  :global(:scope[data-ui-reel-state~="itemWidth=lg"]:where([data-hn-ui-reel])) {
     --_reel-item-width: 20rem;
   }
-  :scope:where(:scope):is([data-ui-reel-state~="snap"]) {
+  :global(:scope[data-ui-reel-state~="snap"]:where([data-hn-ui-reel])) {
     scroll-snap-type: inline mandatory;
   }
-  :scope[data-ui-reel-state~="snap=start"] > :slotted(*) {
+  :global(:scope[data-ui-reel-state~="snap=start"] > :where(:not([data-hn-ui-reel])):is(*)) {
     scroll-snap-align: start;
   }
-  :scope[data-ui-reel-state~="snap=center"] > :slotted(*) {
+  :global(:scope[data-ui-reel-state~="snap=center"] > :where(:not([data-hn-ui-reel])):is(*)) {
     scroll-snap-align: center;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-reel])) {
     display: none;
   }
 }

package/vue/UiScrollArea.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, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -131,7 +131,7 @@ const root = ref<HTMLElement | null>(null)
 const contentElement = useTemplateRef<HTMLElement>('contentElement')
 checkHydratedRoot('div', 'ui-scroll-area')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.fill && 'fill',
@@ -175,16 +175,18 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
   <div
     class="ui-scroll-area"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-scroll-area
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
-    :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
-    :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
+    :data-ui-scroll-area-prop-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
+    :data-ui-scroll-area-prop-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
+    :data-ui-scroll-area-prop-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
+    :data-ui-scroll-area-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-scroll-area-prop-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
     :data-ui-scroll-area-state="hostState || undefined"
     ref="root"
   >
-    <div class="content" ref="contentElement"><slot /></div>
+    <div class="content" data-hn-ui-scroll-area ref="contentElement"><slot /></div>
   </div>
 </template>
 
@@ -197,12 +199,12 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-scroll-area) {
-  :scope:where(:scope):is([data-ui-scroll-area-state~="fill"]) {
+@scope (.ui-scroll-area) to ([data-hn]) {
+  :global(:scope[data-ui-scroll-area-state~="fill"]:where([data-hn-ui-scroll-area])) {
     flex: 1;
   }
 
-  :scope:where(:scope) {
+  :global(:scope:where([data-hn-ui-scroll-area])) {
     display: block;
     box-sizing: border-box;
     min-block-size: 0;
@@ -222,50 +224,54 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
     );
   }
 
-  .content {
+  :global(.content:where([data-hn-ui-scroll-area])) {
     display: flow-root;
   }
-  :scope[data-ui-scroll-area-state~="trim"] .content > :slotted(:first-child) {
+  :global(:scope[data-ui-scroll-area-state~="trim"]
+    .content
+    > :where(:not([data-hn-ui-scroll-area])):is(:first-child)) {
     margin-block-start: 0;
   }
 
-  :scope[data-ui-scroll-area-state~="trim"] .content > :slotted(:last-child) {
+  :global(:scope[data-ui-scroll-area-state~="trim"]
+    .content
+    > :where(:not([data-hn-ui-scroll-area])):is(:last-child)) {
     margin-block-end: 0;
   }
 
-  :scope:where(:scope):is([data-ui-scroll-area-state~="orientation=horizontal"]) {
+  :global(:scope[data-ui-scroll-area-state~="orientation=horizontal"]:where([data-hn-ui-scroll-area])) {
     overflow-x: auto;
     overflow-y: hidden;
     --_ui-scroll-fade-direction: var(--_ui-scroll-fade-inline);
   }
 
-  :scope:where(:scope):is(:dir(rtl)) {
+  :global(:scope:dir(rtl):where([data-hn-ui-scroll-area])) {
     --_ui-scroll-fade-inline: to left;
   }
 
-  :scope:where(:scope):is([data-ui-scroll-area-state~="size=sm"]) {
+  :global(:scope[data-ui-scroll-area-state~="size=sm"]:where([data-hn-ui-scroll-area])) {
     max-block-size: calc(9.375rem + var(--ui-scroll-fade-size, 24px));
   }
-  :scope:where(:scope):is([data-ui-scroll-area-state~="size=md"]) {
+  :global(:scope[data-ui-scroll-area-state~="size=md"]:where([data-hn-ui-scroll-area])) {
     max-block-size: 20rem;
   }
-  :scope:where(:scope):is([data-ui-scroll-area-state~="size=lg"]) {
+  :global(:scope[data-ui-scroll-area-state~="size=lg"]:where([data-hn-ui-scroll-area])) {
     max-block-size: 30rem;
   }
 
-  :scope:where(:scope):is([data-ui-scroll-area-state~="padding=xs"]) {
+  :global(:scope[data-ui-scroll-area-state~="padding=xs"]:where([data-hn-ui-scroll-area])) {
     padding: var(--ui-space-2);
   }
-  :scope:where(:scope):is([data-ui-scroll-area-state~="padding=sm"]) {
+  :global(:scope[data-ui-scroll-area-state~="padding=sm"]:where([data-hn-ui-scroll-area])) {
     padding: var(--ui-space-3);
   }
-  :scope:where(:scope):is([data-ui-scroll-area-state~="padding=md"]) {
+  :global(:scope[data-ui-scroll-area-state~="padding=md"]:where([data-hn-ui-scroll-area])) {
     padding: var(--ui-space-5);
   }
-  :scope:where(:scope):is([data-ui-scroll-area-state~="padding=lg"]) {
+  :global(:scope[data-ui-scroll-area-state~="padding=lg"]:where([data-hn-ui-scroll-area])) {
     padding: var(--ui-space-6);
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-scroll-area])) {
     display: none;
   }
 }