@threadlabs/looma 0.28.13 → 0.28.15

package/vue/UiSeparator.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'
@@ -98,7 +98,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('hr', 'ui-separator')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.emphasis && 'emphasis',
@@ -114,12 +114,13 @@ const hostState = computed(() =>
   <hr
     class="ui-separator"
     v-bind="nativeAttrs($attrs)"
+    data-hn
     :aria-orientation="checkedProps.orientation ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-emphasis="reflectedProp('emphasis', 'emphasis', checkedProps.emphasis, undefined, false)"
-    :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
-    :data-selectable="reflectedProp('selectable', 'selectable', checkedProps.selectable, undefined, false)"
-    :data-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
+    :data-ui-separator-prop-emphasis="reflectedProp('emphasis', 'emphasis', checkedProps.emphasis, undefined, false)"
+    :data-ui-separator-prop-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
+    :data-ui-separator-prop-selectable="reflectedProp('selectable', 'selectable', checkedProps.selectable, undefined, false)"
+    :data-ui-separator-prop-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
     :data-ui-separator-state="hostState || undefined"
   >
 </template>
@@ -133,8 +134,8 @@ const hostState = computed(() =>
 
 /* The root is the hr, so the rules name :host; a bare hr matches only a descendant. */
 
-@scope (.ui-separator) {
-  :scope:where(:scope) {
+@scope (.ui-separator) to ([data-hn]) {
+  :global(:scope) {
     box-sizing: border-box;
     align-self: stretch;
     margin: 0;
@@ -143,18 +144,18 @@ const hostState = computed(() =>
       var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
   }
 
-  :scope:where(:scope):is([data-ui-separator-state~="emphasis=strong"]) {
+  :global(:scope[data-ui-separator-state~="emphasis=strong"]) {
     --_separator-color: var(--ui-border-strong);
   }
 
-  :scope:where(:scope):is([aria-orientation="vertical"]) {
+  :global(:scope[aria-orientation="vertical"]) {
     block-size: auto;
     border-block-start: 0;
     border-inline-start: var(--ui-border-width) solid
       var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
   }
 
-  :scope:where(:scope):is([data-ui-separator-state~="selectable"]) {
+  :global(:scope[data-ui-separator-state~="selectable"]) {
     min-block-size: var(--ui-control-size-sm);
     border: 0;
     background: linear-gradient(
@@ -163,10 +164,10 @@ const hostState = computed(() =>
     ) center / 100% var(--ui-border-width) no-repeat;
     cursor: pointer;
   }
-  :scope:where(:scope):is([data-ui-separator-state~="selectable"]:hover) {
+  :global(:scope[data-ui-separator-state~="selectable"]:hover) {
     background-color: var(--ui-surface-hover);
   }
-  :scope:where(:scope):is([data-ui-separator-state~="selected"]) {
+  :global(:scope[data-ui-separator-state~="selected"]) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     outline-offset: var(--ui-focus-width);
     border-radius: var(--ui-radius-sm);

package/vue/UiSidebar.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'
@@ -206,7 +206,7 @@ provide('html-next:ui-sidebar:drawer', drawer)
 provide('html-next:ui-sidebar:resizing', resizing)
 checkHydratedRoot('aside', 'ui-sidebar')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.side && 'side',
@@ -290,31 +290,36 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   <aside
     class="ui-sidebar"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-sidebar
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-breakpoint="reflectedProp('breakpoint', 'breakpoint', checkedProps.breakpoint, undefined, false)"
-    :data-collapsed="reflectedProp('collapsed', 'collapsed', checkedProps.collapsed, undefined, false)"
-    :data-max-width="reflectedProp('maxWidth', 'max-width', checkedProps.maxWidth, undefined, false)"
-    :data-min-width="reflectedProp('minWidth', 'min-width', checkedProps.minWidth, undefined, false)"
-    :data-resizable="reflectedProp('resizable', 'resizable', checkedProps.resizable, undefined, false)"
-    :data-resize-label="reflectedProp('resizeLabel', 'resize-label', checkedProps.resizeLabel, undefined, false)"
-    :data-resize-step="reflectedProp('resizeStep', 'resize-step', checkedProps.resizeStep, undefined, false)"
-    :data-side="reflectedProp('side', 'side', checkedProps.side, undefined, false)"
-    :data-width="reflectedProp('width', 'width', checkedProps.width, undefined, false)"
+    :data-ui-sidebar-prop-breakpoint="reflectedProp('breakpoint', 'breakpoint', checkedProps.breakpoint, undefined, false)"
+    :data-ui-sidebar-prop-collapsed="reflectedProp('collapsed', 'collapsed', checkedProps.collapsed, undefined, false)"
+    :data-ui-sidebar-prop-max-width="reflectedProp('maxWidth', 'max-width', checkedProps.maxWidth, undefined, false)"
+    :data-ui-sidebar-prop-min-width="reflectedProp('minWidth', 'min-width', checkedProps.minWidth, undefined, false)"
+    :data-ui-sidebar-prop-resizable="reflectedProp('resizable', 'resizable', checkedProps.resizable, undefined, false)"
+    :data-ui-sidebar-prop-resize-label="reflectedProp('resizeLabel', 'resize-label', checkedProps.resizeLabel, undefined, false)"
+    :data-ui-sidebar-prop-resize-step="reflectedProp('resizeStep', 'resize-step', checkedProps.resizeStep, undefined, false)"
+    :data-ui-sidebar-prop-side="reflectedProp('side', 'side', checkedProps.side, undefined, false)"
+    :data-ui-sidebar-prop-width="reflectedProp('width', 'width', checkedProps.width, undefined, false)"
     :data-ui-sidebar-state="hostState || undefined"
     ref="root"
   >
-    <div class="viewport"><div class="content"><slot /></div></div>
+    <div class="viewport" data-hn-ui-sidebar>
+      <div class="content" data-hn-ui-sidebar><slot /></div>
+    </div>
     <div
       class="resizer"
       role="separator"
       aria-orientation="vertical"
       tabindex="0"
       data-ui-affordance="resize"
+      data-hn-ui-sidebar
       :aria-label="checkedProps.resizeLabel ?? undefined"
       :hidden="!checkedProps.resizable || drawer || internalCollapsed"
       ref="resizerElement"
     >
-      <span class="guide" aria-hidden="true"></span>
+      <span class="guide" aria-hidden="true" data-hn-ui-sidebar></span>
     </div>
   </aside>
 </template>
@@ -353,8 +358,8 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-sidebar) {
-  :scope:where(:scope) {
+@scope (.ui-sidebar) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-sidebar])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-sidebar-backdrop: var(--ui-sidebar-backdrop);
     --_ui-sidebar-expanded-width: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
@@ -375,17 +380,17 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
       visibility var(--ui-motion-layout);
   }
 
-  :scope:where(:scope):is([data-ui-sidebar-state~="side=end"]) {
+  :global(:scope[data-ui-sidebar-state~="side=end"]:where([data-hn-ui-sidebar])) {
     border-inline-end: 0;
     border-inline-start: var(--ui-border-width) solid
       var(--ui-sidebar-border, var(--ui-border-divider));
   }
-  .viewport {
+  :global(.viewport:where([data-hn-ui-sidebar])) {
     flex: 1;
     min-block-size: 0;
     overflow: clip;
   }
-  .content {
+  :global(.content:where([data-hn-ui-sidebar])) {
     block-size: 100%;
     inline-size: calc(var(--_ui-sidebar-expanded-width) - var(--ui-border-width));
     min-block-size: 0;
@@ -412,22 +417,23 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
       -1px calc(100% - var(--_ui-scroll-fade-size)),
       calc(100% - var(--_ui-scroll-fade-size)) 100%;
   }
-  :scope:where(:scope):is([data-ui-sidebar-state~="internalCollapsed"]:not([popover])) {
+  :global(:scope[data-ui-sidebar-state~="internalCollapsed"]:not([popover]):where([data-hn-ui-sidebar])) {
     inline-size: var(--ui-sidebar-collapsed-width, 0px);
     visibility: hidden;
   }
-  :scope:where(:scope):is([data-ui-sidebar-state~="resizing"]) {
+  :global(:scope[data-ui-sidebar-state~="resizing"]:where([data-hn-ui-sidebar])) {
     transition: none;
   }
-  :scope[data-ui-sidebar-state~="internalCollapsed"]:not([popover]) .content {
+  :global(:scope[data-ui-sidebar-state~="internalCollapsed"]:not([popover])
+    .content:where([data-hn-ui-sidebar])) {
     transform: translateX(-100%);
   }
-  :scope[data-ui-sidebar-state~="side=end"]:scope[data-ui-sidebar-state~="internalCollapsed"]:not([popover])
-    .content {
+  :global(:scope[data-ui-sidebar-state~="side=end"][data-ui-sidebar-state~="internalCollapsed"]:not([popover])
+    .content:where([data-hn-ui-sidebar])) {
     transform: translateX(100%);
   }
 
-  .resizer {
+  :global(.resizer:where([data-hn-ui-sidebar])) {
     position: absolute;
     z-index: 1;
     inset-block: 0;
@@ -441,17 +447,17 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
     outline: none;
   }
 
-  .resizer[hidden] {
+  :global(.resizer[hidden]:where([data-hn-ui-sidebar])) {
     display: none;
   }
 
-  :scope[data-ui-sidebar-state~="side=end"] .resizer {
+  :global(:scope[data-ui-sidebar-state~="side=end"] .resizer:where([data-hn-ui-sidebar])) {
     inset-inline-end: auto;
     inset-inline-start: 0;
     transform: translateX(-50%);
   }
 
-  .resizer::after {
+  :global(.resizer:where([data-hn-ui-sidebar])::after) {
     content: "";
     position: absolute;
     inset-block: 0;
@@ -468,7 +474,7 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
       opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   }
 
-  .guide {
+  :global(.guide:where([data-hn-ui-sidebar])) {
     position: absolute;
     inset-block-start: 50%;
     inset-inline-start: 50%;
@@ -483,15 +489,15 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
     pointer-events: none;
   }
 
-  .resizer:is(:hover, :focus-visible)::after {
+  :global(.resizer:is(:hover, :focus-visible):where([data-hn-ui-sidebar])::after) {
     background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-focus-ring)));
     opacity: 1;
   }
 
-  .resizer:is(:hover, :focus-visible) > .guide {
+  :global(.resizer:is(:hover, :focus-visible) > .guide:where([data-hn-ui-sidebar])) {
     opacity: 1;
   }
-  :scope:where(:scope):is([popover]) {
+  :global(:scope[popover]:where([data-hn-ui-sidebar])) {
     position: fixed;
     inset-block: 0;
     inset-inline-start: 0;
@@ -509,42 +515,44 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
       display var(--ui-motion-reveal) allow-discrete,
       overlay var(--ui-motion-reveal) allow-discrete;
   }
-  :scope:where(:scope):is([popover]:not(:popover-open)) {
+  :global(:scope[popover]:not(:popover-open):where([data-hn-ui-sidebar])) {
     display: none;
     transform: translateX(-100%);
   }
 
-  :scope:where(:scope):is([data-ui-sidebar-state~="side=end"][popover]) {
+  :global(:scope[data-ui-sidebar-state~="side=end"][popover]:where([data-hn-ui-sidebar])) {
     inset-inline-start: auto;
     inset-inline-end: 0;
   }
 
-  :scope:where(:scope):is([data-ui-sidebar-state~="side=end"][popover]:not(:popover-open)) {
+  :global(:scope[data-ui-sidebar-state~="side=end"][popover]:not(:popover-open):where([data-hn-ui-sidebar])) {
     transform: translateX(100%);
   }
 
   @starting-style {
-    :scope:where(:scope):is([popover]:popover-open) {
+    :global(:scope[popover]:popover-open:where([data-hn-ui-sidebar])) {
       transform: translateX(-100%);
     }
-    :scope:where(:scope):is([data-ui-sidebar-state~="side=end"][popover]:popover-open) {
+    :global(:scope[data-ui-sidebar-state~="side=end"][popover]:popover-open:where([data-hn-ui-sidebar])) {
       transform: translateX(100%);
     }
   }
 
-  :scope:where(:scope):is([popover])::backdrop {
+  :global(:scope[popover]:where([data-hn-ui-sidebar])::backdrop) {
     background: var(--_ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
   }
-  :scope[popover] .content {
+  :global(:scope[popover] .content:where([data-hn-ui-sidebar])) {
     inline-size: 100%;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    :scope:where(:scope), :scope:where(:scope):is([popover]), .content {
+    :global(:scope:where([data-hn-ui-sidebar])),
+    :global(:scope[popover]:where([data-hn-ui-sidebar])),
+    :global(.content:where([data-hn-ui-sidebar])) {
       transition: none;
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-sidebar])) {
     display: none;
   }
 }

package/vue/UiSpinner.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'
@@ -192,7 +192,7 @@ const guardedBinding3 = computed(() => {
 })
 checkHydratedRoot('span', 'ui-spinner')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.size && 'size',
@@ -205,13 +205,14 @@ const hostState = computed(() =>
   <span
     class="ui-spinner ring"
     v-bind="nativeAttrs($attrs)"
+    data-hn
     :role="guarded"
     :aria-label="guardedBinding"
     :aria-live="guardedBinding2"
     :aria-hidden="guardedBinding3"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-spinner-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-spinner-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-spinner-state="hostState || undefined"
   ><svg viewBox="0 0 50 50" fill="none" aria-hidden="true" focusable="false">
       <circle class="track" cx="25" cy="25" r="20"></circle>
@@ -245,8 +246,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-spinner) {
-  :scope:where(:scope) {
+@scope (.ui-spinner) to ([data-hn]) {
+  :global(:scope) {
     display: inline-flex;
     flex: none;
     align-items: center;
@@ -259,27 +260,27 @@ const hostState = computed(() =>
     line-height: 1;
   }
 
-  :scope:where(:scope):is([data-ui-spinner-state~="size=sm"]) {
+  :global(:scope[data-ui-spinner-state~="size=sm"]) {
     font-size: var(--ui-font-size-md);
   }
 
-  svg {
+  :global(svg) {
     display: block;
     inline-size: 100%;
     block-size: 100%;
     animation: ui-spinner-rotate 2s linear infinite;
   }
 
-  circle {
+  :global(circle) {
     stroke-width: 3;
     stroke-linecap: round;
   }
 
-  .track {
+  :global(.track) {
     stroke: color-mix(in srgb, currentColor 16%, transparent);
   }
 
-  .arc {
+  :global(.arc) {
     stroke: currentColor;
     stroke-dasharray: 90, 150;
     stroke-dashoffset: 0;
@@ -287,11 +288,11 @@ const hostState = computed(() =>
   }
 
   @media (prefers-reduced-motion: reduce) {
-    svg, .arc {
+    :global(svg), :global(.arc) {
       animation: none;
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]) {
     display: none;
   }
 }

package/vue/UiStack.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'
@@ -118,7 +118,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('div', 'ui-stack')
 
-/** 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',
@@ -139,13 +139,15 @@ const hostState = computed(() =>
   <div
     class="ui-stack"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-stack
     :style="{ '--ui-stack-height': checkedProps.height?.toString() }"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
-    :data-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
-    :data-height="reflectedProp('height', 'height', checkedProps.height, undefined, false)"
-    :data-justify="reflectedProp('justify', 'justify', checkedProps.justify, undefined, false)"
+    :data-ui-stack-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-stack-prop-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
+    :data-ui-stack-prop-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
+    :data-ui-stack-prop-height="reflectedProp('height', 'height', checkedProps.height, undefined, false)"
+    :data-ui-stack-prop-justify="reflectedProp('justify', 'justify', checkedProps.justify, undefined, false)"
     :data-ui-stack-state="hostState || undefined"
   >
     <slot />
@@ -166,8 +168,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-stack) {
-  :scope:where(:scope) {
+@scope (.ui-stack) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-stack])) {
     --_layout-gap: var(--ui-space-4);
     display: flex;
     flex-direction: column;
@@ -178,52 +180,52 @@ const hostState = computed(() =>
     margin: 0;
   }
 
-  :scope:where(:scope):is([data-ui-stack-state~="fill"]) {
+  :global(:scope[data-ui-stack-state~="fill"]:where([data-hn-ui-stack])) {
     flex: 1;
     min-block-size: 0;
   }
-  :scope:where(:scope):is([data-ui-stack-state~="height"]) {
+  :global(:scope[data-ui-stack-state~="height"]:where([data-hn-ui-stack])) {
     block-size: calc(var(--ui-stack-height, 0) * 1px);
     min-block-size: 0;
   }
 
-  :scope:where(:scope):is([data-ui-stack-state~="gap=none"]) {
+  :global(:scope[data-ui-stack-state~="gap=none"]:where([data-hn-ui-stack])) {
     --_layout-gap: 0px;
   }
-  :scope:where(:scope):is([data-ui-stack-state~="gap=xs"]) {
+  :global(:scope[data-ui-stack-state~="gap=xs"]:where([data-hn-ui-stack])) {
     --_layout-gap: var(--ui-space-2);
   }
-  :scope:where(:scope):is([data-ui-stack-state~="gap=s"]) {
+  :global(:scope[data-ui-stack-state~="gap=s"]:where([data-hn-ui-stack])) {
     --_layout-gap: var(--ui-space-3);
   }
-  :scope:where(:scope):is([data-ui-stack-state~="gap=m"]) {
+  :global(:scope[data-ui-stack-state~="gap=m"]:where([data-hn-ui-stack])) {
     --_layout-gap: var(--ui-space-4);
   }
-  :scope:where(:scope):is([data-ui-stack-state~="gap=l"]) {
+  :global(:scope[data-ui-stack-state~="gap=l"]:where([data-hn-ui-stack])) {
     --_layout-gap: var(--ui-space-5);
   }
-  :scope:where(:scope):is([data-ui-stack-state~="gap=xl"]) {
+  :global(:scope[data-ui-stack-state~="gap=xl"]:where([data-hn-ui-stack])) {
     --_layout-gap: var(--ui-space-6);
   }
-  :scope:where(:scope):is([data-ui-stack-state~="align=start"]) {
+  :global(:scope[data-ui-stack-state~="align=start"]:where([data-hn-ui-stack])) {
     align-items: flex-start;
   }
-  :scope:where(:scope):is([data-ui-stack-state~="align=center"]) {
+  :global(:scope[data-ui-stack-state~="align=center"]:where([data-hn-ui-stack])) {
     align-items: center;
   }
-  :scope:where(:scope):is([data-ui-stack-state~="align=end"]) {
+  :global(:scope[data-ui-stack-state~="align=end"]:where([data-hn-ui-stack])) {
     align-items: flex-end;
   }
-  :scope:where(:scope):is([data-ui-stack-state~="justify=center"]) {
+  :global(:scope[data-ui-stack-state~="justify=center"]:where([data-hn-ui-stack])) {
     justify-content: center;
   }
-  :scope:where(:scope):is([data-ui-stack-state~="justify=end"]) {
+  :global(:scope[data-ui-stack-state~="justify=end"]:where([data-hn-ui-stack])) {
     justify-content: flex-end;
   }
-  :scope:where(:scope):is([data-ui-stack-state~="justify=between"]) {
+  :global(:scope[data-ui-stack-state~="justify=between"]:where([data-hn-ui-stack])) {
     justify-content: space-between;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-stack])) {
     display: none;
   }
 }

package/vue/UiStatusMessage.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'
@@ -102,7 +102,7 @@ const guarded = computed(() => {
 })
 checkHydratedRoot('div', 'ui-status-message')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.kind && 'kind',
@@ -117,19 +117,23 @@ const hostState = computed(() =>
   <div
     class="ui-status-message"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-status-message
     :role="guarded"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-heading="reflectedProp('heading', 'heading', checkedProps.heading, undefined, false)"
-    :data-kind="reflectedProp('kind', 'kind', checkedProps.kind, undefined, false)"
-    :data-layout="reflectedProp('layout', 'layout', checkedProps.layout, undefined, false)"
+    :data-ui-status-message-prop-heading="reflectedProp('heading', 'heading', checkedProps.heading, undefined, false)"
+    :data-ui-status-message-prop-kind="reflectedProp('kind', 'kind', checkedProps.kind, undefined, false)"
+    :data-ui-status-message-prop-layout="reflectedProp('layout', 'layout', checkedProps.layout, undefined, false)"
     :data-ui-status-message-state="hostState || undefined"
   >
     <UiSpinner class="ui-spinner" size="sm" :hidden="checkedProps.kind !== 'loading'" />
-    <span class="copy"><strong class="heading" :hidden="!checkedProps.heading">{{
-        checkedProps.heading
-      }}</strong>
-      <span class="message"><slot /></span></span>
-    <span class="action"><slot name="action" /></span>
+    <span class="copy" data-hn-ui-status-message><strong
+        class="heading"
+        data-hn-ui-status-message
+        :hidden="!checkedProps.heading"
+      >{{ checkedProps.heading }}</strong>
+      <span class="message" data-hn-ui-status-message><slot /></span></span>
+    <span class="action" data-hn-ui-status-message><slot name="action" /></span>
   </div>
 </template>
 
@@ -139,8 +143,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-status-message) to (.ui-spinner) {
-  :scope:where(:scope) {
+@scope (.ui-status-message) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-status-message])) {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -151,17 +155,17 @@ const hostState = computed(() =>
     line-height: var(--ui-line-height);
   }
 
-  :scope:where(:scope):is([data-ui-status-message-state~="kind=error"]) {
+  :global(:scope[data-ui-status-message-state~="kind=error"]:where([data-hn-ui-status-message])) {
     color: var(--ui-danger);
   }
 
-  :scope:where(:scope):is([data-ui-status-message-state~="layout=panel"]) {
+  :global(:scope[data-ui-status-message-state~="layout=panel"]:where([data-hn-ui-status-message])) {
     padding: var(--ui-space-6);
     border: var(--ui-border-width) dashed var(--ui-border-strong);
     border-radius: var(--ui-radius-lg);
   }
 
-  :scope:where(:scope):is([data-ui-status-message-state~="layout=fill"]) {
+  :global(:scope[data-ui-status-message-state~="layout=fill"]:where([data-hn-ui-status-message])) {
     flex: 1;
     flex-direction: column;
     justify-content: center;
@@ -169,7 +173,7 @@ const hostState = computed(() =>
     text-align: center;
   }
 
-  .copy {
+  :global(.copy:where([data-hn-ui-status-message])) {
     display: flex;
     flex: 1 1 12rem;
     flex-direction: column;
@@ -177,26 +181,27 @@ const hostState = computed(() =>
     min-inline-size: 0;
   }
 
-  :scope[data-ui-status-message-state~="layout=fill"] .copy {
+  :global(:scope[data-ui-status-message-state~="layout=fill"]
+    .copy:where([data-hn-ui-status-message])) {
     flex: none;
     align-items: center;
   }
 
-  .heading {
+  :global(.heading:where([data-hn-ui-status-message])) {
     color: var(--ui-text-primary);
     font-weight: var(--ui-font-semibold);
   }
 
-  .action {
+  :global(.action:where([data-hn-ui-status-message])) {
     display: inline-flex;
     flex-wrap: wrap;
     gap: var(--ui-space-2);
   }
 
-  .action:empty {
+  :global(.action:empty:where([data-hn-ui-status-message])) {
     display: none;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-status-message])) {
     display: none;
   }
 }