@threadlabs/looma 0.28.13 → 0.28.14

package/vue/UiEditorTableToolbar.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'
@@ -492,14 +492,15 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
     role="toolbar"
     aria-label="Table actions"
     v-bind="nativeAttrs($attrs)"
+    data-hn
     :hidden="!checkedProps.open"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-actions="reflectedProp('actions', 'actions', checkedProps.actions, undefined, false)"
-    :data-cell-alignment="reflectedProp('cellAlignment', 'cell-alignment', checkedProps.cellAlignment, undefined, false)"
-    :data-cell-background="reflectedProp('cellBackground', 'cell-background', checkedProps.cellBackground, undefined, false)"
-    :data-header-column="reflectedProp('headerColumn', 'header-column', checkedProps.headerColumn, undefined, false)"
-    :data-header-row="reflectedProp('headerRow', 'header-row', checkedProps.headerRow, undefined, false)"
-    :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
+    :data-ui-editor-table-toolbar-prop-actions="reflectedProp('actions', 'actions', checkedProps.actions, undefined, false)"
+    :data-ui-editor-table-toolbar-prop-cell-alignment="reflectedProp('cellAlignment', 'cell-alignment', checkedProps.cellAlignment, undefined, false)"
+    :data-ui-editor-table-toolbar-prop-cell-background="reflectedProp('cellBackground', 'cell-background', checkedProps.cellBackground, undefined, false)"
+    :data-ui-editor-table-toolbar-prop-header-column="reflectedProp('headerColumn', 'header-column', checkedProps.headerColumn, undefined, false)"
+    :data-ui-editor-table-toolbar-prop-header-row="reflectedProp('headerRow', 'header-row', checkedProps.headerRow, undefined, false)"
+    :data-ui-editor-table-toolbar-prop-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     ref="root"
   >
     <div v-if="alignments.length" class="group" role="group" aria-label="Cell alignment">
@@ -624,8 +625,8 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
 </template>
 
 <style scoped>
-@scope (.ui-editor-table-toolbar) to (.ui-icon) {
-  :scope:where(:scope):is(.looma-editor__mobile-toolbar-shell *) {
+@scope (.ui-editor-table-toolbar) to ([data-hn]) {
+  :global(.looma-editor__mobile-toolbar-shell :scope) {
     min-width: max-content;
     min-height: 100%;
     padding: 0;
@@ -635,15 +636,15 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
     box-shadow: none;
     backdrop-filter: none;
   }
-  .looma-editor__mobile-toolbar-shell :scope button {
+  :global(.looma-editor__mobile-toolbar-shell :scope button) {
     min-height: 44px;
     background: transparent;
   }
-  .looma-editor__mobile-toolbar-shell :scope button.active,
-  .looma-editor__mobile-toolbar-shell :scope button.selected {
+  :global(.looma-editor__mobile-toolbar-shell :scope button.active),
+  :global(.looma-editor__mobile-toolbar-shell :scope button.selected) {
     background: var(--ui-accent-soft, var(--ui-accent-subtle));
   }
-  :scope:where(:scope) {
+  :global(:scope) {
     display: inline-flex;
     align-items: center;
     gap: var(--ui-space-1);
@@ -654,21 +655,21 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
     box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
     backdrop-filter: blur(10px);
   }
-  .group {
+  :global(.group) {
     display: inline-flex;
     align-items: center;
     gap: 2px;
     overflow: hidden;
   }
-  .sep {
+  :global(.sep) {
     width: 1px;
     align-self: stretch;
     background: var(--ui-border-divider);
   }
-  .overflow {
+  :global(.overflow) {
     position: relative;
   }
-  :scope button {
+  :global(:scope button) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -685,39 +686,39 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
     padding: var(--ui-space-2) var(--ui-space-2);
     white-space: nowrap;
   }
-  :scope button:hover {
+  :global(:scope button:hover) {
     background: var(--ui-surface-hover);
   }
-  :scope button.active {
+  :global(:scope button.active) {
     background: var(--ui-accent-soft, var(--ui-accent-subtle));
     color: var(--ui-accent-active);
   }
-  .group button {
+  :global(.group button) {
     border-radius: var(--ui-radius-sm);
   }
-  .group button + button {
+  :global(.group button + button) {
     border-left: 0;
   }
-  :scope .more {
+  :global(:scope .more) {
     border: 0;
     border-radius: var(--ui-radius-sm);
   }
-  :scope button.danger {
+  :global(:scope button.danger) {
     color: var(--ui-danger);
   }
-  :scope:where(:scope) {
+  :global(:scope) {
     --_ui-default-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
     --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
   }
-  .chevron {
+  :global(.chevron) {
     display: inline-flex;
     --_ui-default-icon-size: 0.875rem;
   }
-  :scope .icon-button {
+  :global(:scope .icon-button) {
     width: 32px;
     padding-inline: 0;
   }
-  .menu {
+  :global(.menu) {
     box-sizing: border-box;
     position: fixed;
     inset: auto;
@@ -737,12 +738,12 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
     overscroll-behavior: contain;
     scrollbar-width: thin;
   }
-  .menu-section + .menu-section {
+  :global(.menu-section + .menu-section) {
     margin-top: var(--ui-space-1);
     padding-top: var(--ui-space-1);
     border-top: var(--ui-border-width) solid var(--ui-border-divider);
   }
-  .menu-heading {
+  :global(.menu-heading) {
     padding: var(--ui-space-1) var(--ui-space-2);
     font-size: var(--ui-font-size-2xs);
     font-weight: 700;
@@ -750,22 +751,22 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
     text-transform: uppercase;
     color: var(--ui-text-muted);
   }
-  .menu button {
+  :global(.menu button) {
     display: flex;
     justify-content: flex-start;
     width: 100%;
     text-align: left;
   }
-  .swatches {
+  :global(.swatches) {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 2px;
   }
-  :scope .swatch-button {
+  :global(:scope .swatch-button) {
     gap: var(--ui-space-1);
     justify-content: flex-start;
   }
-  .swatch {
+  :global(.swatch) {
     width: 14px;
     height: 14px;
     flex: 0 0 14px;
@@ -773,15 +774,15 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
     border-radius: var(--ui-radius-round);
     background: var(--_swatch);
   }
-  .swatch.default {
+  :global(.swatch.default) {
     background:
       linear-gradient(135deg, transparent 44%, var(--ui-danger) 46% 54%, transparent 56%),
       var(--ui-surface);
   }
-  .swatch-button.selected {
+  :global(.swatch-button.selected) {
     background: var(--ui-accent-soft, var(--ui-accent-subtle));
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]) {
     display: none;
   }
 }

package/vue/UiEditorToolbar.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'
@@ -49,7 +49,7 @@ const root = ref<HTMLElement | null>(null)
 const stripElement = useTemplateRef<HTMLElement>('stripElement')
 checkHydratedRoot('div', 'ui-editor-toolbar')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.floating && 'floating',
@@ -86,12 +86,14 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     role="toolbar"
     aria-label="Editor toolbar"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-editor-toolbar
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-floating="reflectedProp('floating', 'floating', checkedProps.floating, undefined, false)"
+    :data-ui-editor-toolbar-prop-floating="reflectedProp('floating', 'floating', checkedProps.floating, undefined, false)"
     :data-ui-editor-toolbar-state="hostState || undefined"
     ref="root"
   >
-    <div class="strip" ref="stripElement"><slot /></div>
+    <div class="strip" data-hn-ui-editor-toolbar ref="stripElement"><slot /></div>
   </div>
 </template>
 
@@ -108,8 +110,8 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-editor-toolbar) {
-  :scope:where(:scope) {
+@scope (.ui-editor-toolbar) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-editor-toolbar])) {
     position: sticky;
     top: 0;
     z-index: var(--ui-editor-toolbar-z-index, 10);
@@ -122,7 +124,7 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     border-bottom: var(--ui-border-width) solid
       var(--ui-editor-toolbar-border, var(--ui-border-divider));
   }
-  .strip {
+  :global(.strip:where([data-hn-ui-editor-toolbar])) {
     display: flex;
     flex: 1 1 auto;
     align-items: center;
@@ -135,14 +137,14 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     scrollbar-width: none;
   }
 
-  .strip::-webkit-scrollbar {
+  :global(.strip:where([data-hn-ui-editor-toolbar])::-webkit-scrollbar) {
     display: none;
   }
 
-  .strip > :slotted(*) {
+  :global(.strip > :where(:not([data-hn-ui-editor-toolbar])):is(*)) {
     flex: 0 0 auto;
   }
-  .strip {
+  :global(.strip:where([data-hn-ui-editor-toolbar])) {
     --_ui-scroll-fade-direction: to right;
     --_ui-scroll-fade-size: var(--ui-editor-toolbar-fade-size, var(--ui-scroll-fade-size, 24px));
     mask-image: linear-gradient(
@@ -165,11 +167,11 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
       calc(100% - var(--_ui-scroll-fade-size)) 100%;
   }
 
-  :scope:dir(rtl) .strip {
+  :global(:scope:dir(rtl) .strip:where([data-hn-ui-editor-toolbar])) {
     --_ui-scroll-fade-direction: to left;
   }
 
-  :slotted(.divider) {
+  :global(:where(:not([data-hn-ui-editor-toolbar])):is(.divider)) {
     width: 1px;
     height: 20px;
     background: var(--ui-editor-toolbar-divider, var(--ui-border-divider));
@@ -177,7 +179,7 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
   }
 
-  :scope:where(:scope):is([data-ui-editor-toolbar-state~="floating"]) {
+  :global(:scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar])) {
     position: relative;
     top: auto;
     width: max-content;
@@ -199,7 +201,7 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
   }
 
   @media (max-width: 767px) {
-    :scope:where(:scope) {
+    :global(:scope:where([data-hn-ui-editor-toolbar])) {
       position: fixed;
       top: auto;
       bottom: env(safe-area-inset-bottom);
@@ -212,7 +214,7 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
       box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
     }
 
-    :scope:where(:scope):is([data-ui-editor-toolbar-state~="floating"]) {
+    :global(:scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar])) {
       position: relative;
       inset: auto;
       min-height: auto;
@@ -224,15 +226,15 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
       );
     }
   }
-  :scope:where(:scope):is(.looma-editor__sticky-toolbar-shell *) {
+  :global(.looma-editor__sticky-toolbar-shell :scope:where([data-hn-ui-editor-toolbar])) {
     position: relative;
     min-height: var(--ui-editor-toolbar-min-height, 48px);
     background: transparent;
     border: 0;
     box-shadow: none;
   }
-  :scope:where(:scope):is(.looma-editor__mobile-toolbar-shell
-    [data-ui-editor-toolbar-state~="floating"]) {
+  :global(.looma-editor__mobile-toolbar-shell
+    :scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar])) {
     width: 100%;
     max-width: none;
     min-height: 100%;
@@ -244,10 +246,12 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     backdrop-filter: none;
   }
 
-  .looma-editor__mobile-toolbar-shell :scope[data-ui-editor-toolbar-state~="floating"] .strip {
+  :global(.looma-editor__mobile-toolbar-shell
+    :scope[data-ui-editor-toolbar-state~="floating"]
+    .strip:where([data-hn-ui-editor-toolbar])) {
     scroll-snap-type: x mandatory;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-editor-toolbar])) {
     display: none;
   }
 }

package/vue/UiFloatingActionButton.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('button', 'ui-floating-action-button')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.mobileOnly && 'mobileOnly',
@@ -85,12 +85,14 @@ const hostState = computed(() =>
     class="ui-floating-action-button"
     type="button"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-floating-action-button
     :aria-label="checkedProps.label ?? undefined"
     :disabled="checkedProps.disabled ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
-    :data-mobile-only="reflectedProp('mobileOnly', 'mobile-only', checkedProps.mobileOnly, undefined, false)"
+    :data-ui-floating-action-button-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-floating-action-button-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-floating-action-button-prop-mobile-only="reflectedProp('mobileOnly', 'mobile-only', checkedProps.mobileOnly, undefined, false)"
     :data-ui-floating-action-button-state="hostState || undefined"
   >
     <slot />
@@ -114,8 +116,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-floating-action-button) {
-  :scope:where(:scope) {
+@scope (.ui-floating-action-button) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-floating-action-button])) {
     position: fixed;
     inset-block-end: calc(
       var(--ui-floating-action-button-inset-block-end, var(--ui-space-6)) +
@@ -131,7 +133,7 @@ const hostState = computed(() =>
     z-index: var(--ui-floating-action-button-z-index, 100);
   }
 
-  :scope:where(:scope) {
+  :global(:scope:where([data-hn-ui-floating-action-button])) {
     appearance: none;
     border: none;
     border-radius: var(--ui-radius-round);
@@ -150,39 +152,39 @@ const hostState = computed(() =>
       box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
-  :scope:where(:scope):is(:hover:enabled) {
+  :global(:scope:hover:enabled:where([data-hn-ui-floating-action-button])) {
     background: var(--ui-accent-hover);
     box-shadow: 0 6px 16px color-mix(in srgb, var(--ui-accent) 50%, transparent);
   }
 
-  :scope:where(:scope):is(:active:enabled) {
+  :global(:scope:active:enabled:where([data-hn-ui-floating-action-button])) {
     transform: scale(0.94);
   }
 
-  :scope:where(:scope):is(:focus-visible) {
+  :global(:scope:focus-visible:where([data-hn-ui-floating-action-button])) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     outline-offset: var(--ui-focus-width);
   }
 
-  :scope:where(:scope):is(:disabled) {
+  :global(:scope:disabled:where([data-hn-ui-floating-action-button])) {
     background: var(--ui-disabled-surface);
     color: var(--ui-disabled-text);
     box-shadow: none;
     cursor: not-allowed;
   }
 
-  :slotted(svg) {
+  :global(:where(:not([data-hn-ui-floating-action-button])):is(svg)) {
     inline-size: var(--ui-icon-size-lg);
     block-size: var(--ui-icon-size-lg);
     flex-shrink: 0;
   }
 
   @media (min-width: 768px) {
-    :scope:where(:scope):is([data-ui-floating-action-button-state~="mobileOnly"]) {
+    :global(:scope[data-ui-floating-action-button-state~="mobileOnly"]:where([data-hn-ui-floating-action-button])) {
       display: none;
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-floating-action-button])) {
     display: none;
   }
 }

package/vue/UiFormField.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'
@@ -80,7 +80,7 @@ const hydrationInstance = getCurrentInstance()
 const root = ref<HTMLElement | null>(null)
 checkHydratedRoot('div', 'ui-form-field')
 
-/** 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',
@@ -114,20 +114,22 @@ useComponentHost(() => import('../components/ui-form-field/ui-form-field.js'), {
   <div
     class="ui-form-field"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-form-field
     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-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
+    :data-ui-form-field-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-form-field-prop-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
+    :data-ui-form-field-prop-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
     :data-ui-form-field-state="hostState || undefined"
     ref="root"
   >
-    <div class="label">
+    <div class="label" data-hn-ui-form-field>
       <slot name="label" />
-      <span class="label-action"><slot name="label-action" /></span>
+      <span class="label-action" data-hn-ui-form-field><slot name="label-action" /></span>
     </div>
     <slot />
-    <div class="help"><slot name="help" /></div>
-    <div class="error"><slot name="error" /></div>
+    <div class="help" data-hn-ui-form-field><slot name="help" /></div>
+    <div class="error" data-hn-ui-form-field><slot name="error" /></div>
   </div>
 </template>
 
@@ -173,8 +175,8 @@ useComponentHost(() => import('../components/ui-form-field/ui-form-field.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-form-field) {
-  :scope:where(:scope) {
+@scope (.ui-form-field) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-form-field])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-form-field-danger: var(--ui-form-field-danger);
     --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
@@ -189,52 +191,55 @@ useComponentHost(() => import('../components/ui-form-field/ui-form-field.js'), {
     align-content: start;
     color: var(--ui-text-primary);
   }
-  .label, .help, .error {
+  :global(.label:where([data-hn-ui-form-field])),
+  :global(.help:where([data-hn-ui-form-field])),
+  :global(.error:where([data-hn-ui-form-field])) {
     display: contents;
   }
 
-  .label {
+  :global(.label:where([data-hn-ui-form-field])) {
     color: var(--_ui-form-field-label-text, var(--ui-text-secondary));
     font-size: var(--_ui-form-field-label-font-size, var(--ui-font-size-sm));
   }
-  .label:has(> .label-action > *) {
+  :global(.label:has(> .label-action > *):where([data-hn-ui-form-field])) {
     display: flex;
     align-items: start;
     gap: var(--ui-space-1);
   }
 
-  .label-action {
+  :global(.label-action:where([data-hn-ui-form-field])) {
     display: flex;
     align-items: unsafe center;
     block-size: 1lh;
   }
 
-  .label-action:not(:has(> *)) {
+  :global(.label-action:not(:has(> *)):where([data-hn-ui-form-field])) {
     display: none;
   }
 
-  .help {
+  :global(.help:where([data-hn-ui-form-field])) {
     color: var(--_ui-form-field-help-text, var(--ui-text-muted));
     font-size: var(--_ui-form-field-help-font-size, var(--ui-font-size-sm));
     line-height: var(--ui-line-height-md);
   }
 
-  .help > :slotted(*) {
+  :global(.help > :where(:not([data-hn-ui-form-field])):is(*)) {
     min-block-size: var(--_ui-form-field-help-min-block-size, 0);
   }
 
-  .error {
+  :global(.error:where([data-hn-ui-form-field])) {
     display: none;
   }
 
-  :scope[data-ui-form-field-state~="invalid"] .error {
+  :global(:scope[data-ui-form-field-state~="invalid"] .error:where([data-hn-ui-form-field])) {
     display: contents;
   }
-  .error, :slotted([role="alert"]) {
+  :global(.error:where([data-hn-ui-form-field])),
+  :global(:where(:not([data-hn-ui-form-field])):is([role="alert"])) {
     color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
     font-size: var(--ui-font-size-sm);
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-form-field])) {
     display: none;
   }
 }

package/vue/UiGrid.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'
@@ -71,7 +71,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('div', 'ui-grid')
 
-/** 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',
@@ -86,11 +86,13 @@ const hostState = computed(() =>
   <div
     class="ui-grid"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-grid
     :style="{ '--_grid-column-cap': checkedProps.columns?.toString() }"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-columns="reflectedProp('columns', 'columns', checkedProps.columns, undefined, false)"
-    :data-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
-    :data-min="reflectedProp('min', 'min', checkedProps.min, undefined, false)"
+    :data-ui-grid-prop-columns="reflectedProp('columns', 'columns', checkedProps.columns, undefined, false)"
+    :data-ui-grid-prop-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
+    :data-ui-grid-prop-min="reflectedProp('min', 'min', checkedProps.min, undefined, false)"
     :data-ui-grid-state="hostState || undefined"
   >
     <slot />
@@ -110,8 +112,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-grid) {
-  :scope:where(:scope) {
+@scope (.ui-grid) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-grid])) {
     --_grid-gap: var(--ui-space-4);
     --_grid-min: 12rem;
     display: grid;
@@ -144,28 +146,28 @@ const hostState = computed(() =>
     margin: 0;
   }
 
-  :scope:where(:scope):is([data-ui-grid-state~="gap=xs"]) {
+  :global(:scope[data-ui-grid-state~="gap=xs"]:where([data-hn-ui-grid])) {
     --_grid-gap: var(--ui-space-2);
   }
-  :scope:where(:scope):is([data-ui-grid-state~="gap=s"]) {
+  :global(:scope[data-ui-grid-state~="gap=s"]:where([data-hn-ui-grid])) {
     --_grid-gap: var(--ui-space-3);
   }
-  :scope:where(:scope):is([data-ui-grid-state~="gap=m"]) {
+  :global(:scope[data-ui-grid-state~="gap=m"]:where([data-hn-ui-grid])) {
     --_grid-gap: var(--ui-space-4);
   }
-  :scope:where(:scope):is([data-ui-grid-state~="gap=l"]) {
+  :global(:scope[data-ui-grid-state~="gap=l"]:where([data-hn-ui-grid])) {
     --_grid-gap: var(--ui-space-5);
   }
-  :scope:where(:scope):is([data-ui-grid-state~="gap=xl"]) {
+  :global(:scope[data-ui-grid-state~="gap=xl"]:where([data-hn-ui-grid])) {
     --_grid-gap: var(--ui-space-6);
   }
-  :scope:where(:scope):is([data-ui-grid-state~="min=md"]) {
+  :global(:scope[data-ui-grid-state~="min=md"]:where([data-hn-ui-grid])) {
     --_grid-min: 16rem;
   }
-  :scope:where(:scope):is([data-ui-grid-state~="min=lg"]) {
+  :global(:scope[data-ui-grid-state~="min=lg"]:where([data-hn-ui-grid])) {
     --_grid-min: 20rem;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-grid])) {
     display: none;
   }
 }