@threadlabs/looma 0.28.12 → 0.28.14

package/vue/UiText.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'
@@ -280,7 +280,7 @@ checkHydratedRoot(
   'ui-text',
 )
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.grow && 'grow',
@@ -310,18 +310,20 @@ const hostState = computed(() =>
     v-if="checkedProps.as === 'span'"
     class="ui-text"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-text
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
-    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
-    :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
-    :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
-    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
+    :data-ui-text-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-text-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-text-prop-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-ui-text-prop-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
+    :data-ui-text-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-text-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-text-prop-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
+    :data-ui-text-prop-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
+    :data-ui-text-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-text-prop-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-ui-text-prop-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   ><slot /></span>
@@ -329,18 +331,20 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'div'"
     class="ui-text"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-text
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
-    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
-    :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
-    :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
-    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
+    :data-ui-text-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-text-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-text-prop-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-ui-text-prop-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
+    :data-ui-text-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-text-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-text-prop-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
+    :data-ui-text-prop-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
+    :data-ui-text-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-text-prop-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-ui-text-prop-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -350,18 +354,20 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'small'"
     class="ui-text"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-text
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
-    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
-    :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
-    :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
-    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
+    :data-ui-text-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-text-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-text-prop-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-ui-text-prop-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
+    :data-ui-text-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-text-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-text-prop-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
+    :data-ui-text-prop-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
+    :data-ui-text-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-text-prop-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-ui-text-prop-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   ><slot /></small>
@@ -369,18 +375,20 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'strong'"
     class="ui-text"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-text
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
-    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
-    :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
-    :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
-    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
+    :data-ui-text-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-text-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-text-prop-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-ui-text-prop-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
+    :data-ui-text-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-text-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-text-prop-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
+    :data-ui-text-prop-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
+    :data-ui-text-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-text-prop-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-ui-text-prop-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   ><slot /></strong>
@@ -388,18 +396,20 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'label'"
     class="ui-text"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-text
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
-    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
-    :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
-    :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
-    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
+    :data-ui-text-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-text-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-text-prop-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-ui-text-prop-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
+    :data-ui-text-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-text-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-text-prop-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
+    :data-ui-text-prop-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
+    :data-ui-text-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-text-prop-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-ui-text-prop-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   ><slot /></label>
@@ -407,18 +417,20 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'h2'"
     class="ui-text"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-text
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
-    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
-    :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
-    :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
-    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
+    :data-ui-text-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-text-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-text-prop-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-ui-text-prop-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
+    :data-ui-text-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-text-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-text-prop-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
+    :data-ui-text-prop-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
+    :data-ui-text-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-text-prop-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-ui-text-prop-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -428,18 +440,20 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'h3'"
     class="ui-text"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-text
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
-    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
-    :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
-    :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
-    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
+    :data-ui-text-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-text-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-text-prop-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-ui-text-prop-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
+    :data-ui-text-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-text-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-text-prop-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
+    :data-ui-text-prop-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
+    :data-ui-text-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-text-prop-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-ui-text-prop-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -449,18 +463,20 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'h4'"
     class="ui-text"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-text
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
-    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
-    :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
-    :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
-    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
+    :data-ui-text-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-text-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-text-prop-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-ui-text-prop-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
+    :data-ui-text-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-text-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-text-prop-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
+    :data-ui-text-prop-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
+    :data-ui-text-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-text-prop-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-ui-text-prop-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -470,18 +486,20 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'h5'"
     class="ui-text"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-text
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
-    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
-    :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
-    :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
-    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
+    :data-ui-text-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-text-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-text-prop-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-ui-text-prop-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
+    :data-ui-text-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-text-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-text-prop-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
+    :data-ui-text-prop-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
+    :data-ui-text-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-text-prop-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-ui-text-prop-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -491,18 +509,20 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'h6'"
     class="ui-text"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-text
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
-    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
-    :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
-    :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
-    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
+    :data-ui-text-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-text-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-text-prop-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-ui-text-prop-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
+    :data-ui-text-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-text-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-text-prop-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
+    :data-ui-text-prop-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
+    :data-ui-text-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-text-prop-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-ui-text-prop-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -512,18 +532,20 @@ const hostState = computed(() =>
     v-else
     class="ui-text"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-text
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
-    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
-    :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
-    :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
-    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
+    :data-ui-text-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-text-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-text-prop-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-ui-text-prop-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
+    :data-ui-text-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-text-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-text-prop-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
+    :data-ui-text-prop-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
+    :data-ui-text-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-text-prop-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-ui-text-prop-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -550,113 +572,113 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-text) {
-  :scope:where(:scope):is([data-ui-text-state~="grow"]) {
+@scope (.ui-text) to ([data-hn]) {
+  :global(:scope[data-ui-text-state~="grow"]:where([data-hn-ui-text])) {
     flex: 1;
   }
 
-  :scope:where(:scope) {
+  :global(:scope:where([data-hn-ui-text])) {
     margin: 0;
     min-inline-size: 0;
     color: var(--ui-text-primary);
     text-align: start;
   }
-  :scope:where(:scope):is(:is(h2, h3, h4, h5, h6)) {
+  :global(:scope:is(h2, h3, h4, h5, h6):where([data-hn-ui-text])) {
     font-size: inherit;
     font-weight: inherit;
   }
 
-  :scope:where(:scope):is([data-ui-text-state~="size=xs"]) {
+  :global(:scope[data-ui-text-state~="size=xs"]:where([data-hn-ui-text])) {
     font-size: var(--ui-font-size-xs);
     line-height: var(--ui-line-height);
   }
-  :scope:where(:scope):is([data-ui-text-state~="size=sm"]) {
+  :global(:scope[data-ui-text-state~="size=sm"]:where([data-hn-ui-text])) {
     font-size: var(--ui-font-size-sm);
     line-height: var(--ui-line-height);
   }
-  :scope:where(:scope):is([data-ui-text-state~="size=md"]) {
+  :global(:scope[data-ui-text-state~="size=md"]:where([data-hn-ui-text])) {
     font-size: var(--ui-font-size-md);
     line-height: var(--ui-line-height);
   }
-  :scope:where(:scope):is([data-ui-text-state~="size=lg"]) {
+  :global(:scope[data-ui-text-state~="size=lg"]:where([data-hn-ui-text])) {
     font-size: var(--ui-font-size-lg);
     line-height: var(--ui-line-height-relaxed);
   }
-  :scope:where(:scope):is([data-ui-text-state~="trim"]) {
+  :global(:scope[data-ui-text-state~="trim"]:where([data-hn-ui-text])) {
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
   }
 
-  :scope:where(:scope):is([data-ui-text-state~="tone=secondary"]) {
+  :global(:scope[data-ui-text-state~="tone=secondary"]:where([data-hn-ui-text])) {
     color: var(--ui-text-secondary);
   }
-  :scope:where(:scope):is([data-ui-text-state~="tone=muted"]) {
+  :global(:scope[data-ui-text-state~="tone=muted"]:where([data-hn-ui-text])) {
     color: var(--ui-text-muted);
   }
-  :scope:where(:scope):is([data-ui-text-state~="tone=accent"]) {
+  :global(:scope[data-ui-text-state~="tone=accent"]:where([data-hn-ui-text])) {
     color: var(--ui-accent-active);
   }
-  :scope:where(:scope):is([data-ui-text-state~="tone=danger"]) {
+  :global(:scope[data-ui-text-state~="tone=danger"]:where([data-hn-ui-text])) {
     color: var(--ui-danger-subtle-text);
   }
-  :scope:where(:scope):is([data-ui-text-state~="tone=success"]) {
+  :global(:scope[data-ui-text-state~="tone=success"]:where([data-hn-ui-text])) {
     color: var(--ui-success-subtle-text);
   }
-  :scope:where(:scope):is([data-ui-text-state~="tone=info"]) {
+  :global(:scope[data-ui-text-state~="tone=info"]:where([data-hn-ui-text])) {
     color: var(--ui-info-subtle-text);
   }
-  :scope:where(:scope):is([data-ui-text-state~="tone=warning"]) {
+  :global(:scope[data-ui-text-state~="tone=warning"]:where([data-hn-ui-text])) {
     color: var(--ui-warning-subtle-text);
   }
 
-  :scope:where(:scope):is([data-ui-text-state~="weight=normal"]) {
+  :global(:scope[data-ui-text-state~="weight=normal"]:where([data-hn-ui-text])) {
     font-weight: var(--ui-font-normal);
   }
-  :scope:where(:scope):is([data-ui-text-state~="weight=medium"]) {
+  :global(:scope[data-ui-text-state~="weight=medium"]:where([data-hn-ui-text])) {
     font-weight: var(--ui-font-medium);
   }
-  :scope:where(:scope):is([data-ui-text-state~="weight=semibold"]) {
+  :global(:scope[data-ui-text-state~="weight=semibold"]:where([data-hn-ui-text])) {
     font-weight: var(--ui-font-semibold);
   }
 
-  :scope:where(:scope):is([data-ui-text-state~="variant=eyebrow"]) {
+  :global(:scope[data-ui-text-state~="variant=eyebrow"]:where([data-hn-ui-text])) {
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-semibold);
     letter-spacing: 0.06em;
     text-transform: uppercase;
   }
-  :scope:where(:scope):is([data-ui-text-state~="variant=code"]) {
+  :global(:scope[data-ui-text-state~="variant=code"]:where([data-hn-ui-text])) {
     font-family: var(--ui-font-family-mono);
   }
-  :scope :slotted(a) {
+  :global(:scope :where(:not([data-hn-ui-text])):is(a)) {
     color: var(--ui-accent-active);
     text-decoration: underline;
     text-decoration-thickness: 0.06em;
     text-underline-offset: 0.18em;
   }
 
-  :scope:where(:scope):is([data-ui-text-state~="truncate"]) {
+  :global(:scope[data-ui-text-state~="truncate"]:where([data-hn-ui-text])) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  :scope:where(:scope):is([data-ui-text-state~="trim"][data-ui-text-state~="truncate"]) {
+  :global(:scope[data-ui-text-state~="trim"][data-ui-text-state~="truncate"]:where([data-hn-ui-text])) {
     overflow-x: clip;
     overflow-y: visible;
   }
 
-  :scope:where(:scope):is([data-ui-text-state~="align=center"]) {
+  :global(:scope[data-ui-text-state~="align=center"]:where([data-hn-ui-text])) {
     text-align: center;
   }
 
-  :scope:where(:scope):is([data-ui-text-state~="font=sans"]) {
+  :global(:scope[data-ui-text-state~="font=sans"]:where([data-hn-ui-text])) {
     font-family: var(--ui-font-family-sans, sans-serif);
   }
 
-  :scope:where(:scope):is([data-ui-text-state~="wrap=anywhere"]) {
+  :global(:scope[data-ui-text-state~="wrap=anywhere"]:where([data-hn-ui-text])) {
     overflow-wrap: anywhere;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-text])) {
     display: none;
   }
 }