@threadlabs/looma 0.28.13 → 0.28.14

package/vue/UiContainer.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-container')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.measure && 'measure',
@@ -90,10 +90,12 @@ const hostState = computed(() =>
   <div
     class="ui-container"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-container
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
-    :data-gutters="reflectedProp('gutters', 'gutters', checkedProps.gutters, undefined, false)"
-    :data-measure="reflectedProp('measure', 'measure', checkedProps.measure, undefined, false)"
+    :data-ui-container-prop-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
+    :data-ui-container-prop-gutters="reflectedProp('gutters', 'gutters', checkedProps.gutters, undefined, false)"
+    :data-ui-container-prop-measure="reflectedProp('measure', 'measure', checkedProps.measure, undefined, false)"
     :data-ui-container-state="hostState || undefined"
   >
     <slot />
@@ -113,8 +115,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-container) {
-  :scope:where(:scope) {
+@scope (.ui-container) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-container])) {
     --_container-measure: 65ch;
     --_container-gutters: var(--ui-space-4);
     display: block;
@@ -124,10 +126,10 @@ const hostState = computed(() =>
     padding-inline: var(--ui-container-gutters, var(--_container-gutters));
   }
 
-  :scope:where(:scope):is([data-ui-container-state~="measure=narrow"]) {
+  :global(:scope[data-ui-container-state~="measure=narrow"]:where([data-hn-ui-container])) {
     --_container-measure: 45ch;
   }
-  :scope:where(:scope):is([data-ui-container-state~="fill"]) {
+  :global(:scope[data-ui-container-state~="fill"]:where([data-hn-ui-container])) {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -135,19 +137,19 @@ const hostState = computed(() =>
     min-inline-size: 0;
     min-block-size: 0;
   }
-  :scope:where(:scope):is([data-ui-container-state~="measure=wide"]) {
+  :global(:scope[data-ui-container-state~="measure=wide"]:where([data-hn-ui-container])) {
     --_container-measure: 80ch;
   }
-  :scope:where(:scope):is([data-ui-container-state~="gutters=s"]) {
+  :global(:scope[data-ui-container-state~="gutters=s"]:where([data-hn-ui-container])) {
     --_container-gutters: var(--ui-space-3);
   }
-  :scope:where(:scope):is([data-ui-container-state~="gutters=m"]) {
+  :global(:scope[data-ui-container-state~="gutters=m"]:where([data-hn-ui-container])) {
     --_container-gutters: var(--ui-space-4);
   }
-  :scope:where(:scope):is([data-ui-container-state~="gutters=l"]) {
+  :global(:scope[data-ui-container-state~="gutters=l"]:where([data-hn-ui-container])) {
     --_container-gutters: var(--ui-space-5);
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-container])) {
     display: none;
   }
 }

package/vue/UiContextMenu.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'
@@ -161,11 +161,21 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
   <span
     class="ui-context-menu"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-context-menu
     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-ui-context-menu-prop-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
+    :data-ui-context-menu-prop-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     ref="root"
-  ><div class="menu" role="menu" aria-orientation="vertical" ref="menuElement"><slot /></div></span>
+  ><div
+      class="menu"
+      role="menu"
+      aria-orientation="vertical"
+      data-hn-ui-context-menu
+      ref="menuElement"
+    >
+      <slot />
+    </div></span>
 </template>
 
 <style scoped>
@@ -193,8 +203,8 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-context-menu) {
-  :scope:where(:scope) {
+@scope (.ui-context-menu) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-context-menu])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-context-menu-surface: var(--ui-context-menu-surface);
     --_ui-context-menu-border: var(--ui-context-menu-border);
@@ -205,7 +215,7 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
     display: contents;
   }
 
-  .menu {
+  :global(.menu:where([data-hn-ui-context-menu])) {
     position: fixed;
     inset: auto;
     margin: 0;
@@ -237,7 +247,7 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
       overlay var(--ui-motion-fast) allow-discrete;
   }
 
-  .menu hr {
+  :global(.menu hr:where([data-hn-ui-context-menu])) {
     align-self: stretch;
     block-size: 0;
     margin: var(--ui-space-1) 0;
@@ -245,28 +255,29 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
     border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
   }
 
-  .menu:popover-open {
+  :global(.menu:popover-open:where([data-hn-ui-context-menu])) {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 
   @starting-style {
-    .menu:popover-open {
+    :global(.menu:popover-open:where([data-hn-ui-context-menu])) {
       opacity: 0;
       transform: translateY(-4px) scale(0.99);
     }
   }
 
-  .menu[hidden], .menu[popover]:not(:popover-open) {
+  :global(.menu[hidden]:where([data-hn-ui-context-menu])),
+  :global(.menu[popover]:not(:popover-open):where([data-hn-ui-context-menu])) {
     display: none;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .menu {
+    :global(.menu:where([data-hn-ui-context-menu])) {
       transition: none;
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-context-menu])) {
     display: none;
   }
 }

package/vue/UiCover.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'
@@ -41,7 +41,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('div', 'ui-cover')
 
-/** 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',
@@ -54,8 +54,10 @@ const hostState = computed(() =>
   <div
     class="ui-cover"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-cover
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-cover-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-cover-state="hostState || undefined"
   >
     <slot />
@@ -68,8 +70,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-cover) {
-  :scope:where(:scope) {
+@scope (.ui-cover) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-cover])) {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -80,15 +82,15 @@ const hostState = computed(() =>
     padding: var(--ui-space-6) var(--ui-space-4);
   }
 
-  :scope:where(:scope):is([data-ui-cover-state~="size=fill"]) {
+  :global(:scope[data-ui-cover-state~="size=fill"]:where([data-hn-ui-cover])) {
     flex: 1;
     min-block-size: 100%;
   }
 
-  :scope > :slotted(*) {
+  :global(:scope > :where(:not([data-hn-ui-cover])):is(*)) {
     max-inline-size: 100%;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-cover])) {
     display: none;
   }
 }

package/vue/UiDescriptionItem.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'
@@ -44,11 +44,13 @@ checkHydratedRoot('div', 'ui-description-item')
   <div
     class="ui-description-item"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-description-item
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-term="reflectedProp('term', 'term', checkedProps.term, undefined, false)"
+    :data-ui-description-item-prop-term="reflectedProp('term', 'term', checkedProps.term, undefined, false)"
   >
-    <dt>{{ checkedProps.term }}</dt>
-    <dd><slot /></dd>
+    <dt data-hn-ui-description-item>{{ checkedProps.term }}</dt>
+    <dd data-hn-ui-description-item><slot /></dd>
   </div>
 </template>
 
@@ -57,8 +59,8 @@ checkHydratedRoot('div', 'ui-description-item')
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-description-item) {
-  :scope:where(:scope) {
+@scope (.ui-description-item) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-description-item])) {
     display: var(--_ui-description-display, grid);
     grid-column: var(--_ui-description-column, 1 / -1);
     grid-template-columns: subgrid;
@@ -74,11 +76,11 @@ checkHydratedRoot('div', 'ui-description-item')
     font-size: var(--ui-font-size-sm);
   }
 
-  dt {
+  :global(dt:where([data-hn-ui-description-item])) {
     color: var(--ui-text-muted);
   }
 
-  dd {
+  :global(dd:where([data-hn-ui-description-item])) {
     margin: 0;
     min-inline-size: 0;
     color: var(--ui-text-primary);
@@ -87,7 +89,7 @@ checkHydratedRoot('div', 'ui-description-item')
     text-align: start;
     overflow-wrap: anywhere;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-description-item])) {
     display: none;
   }
 }

package/vue/UiDescriptionList.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'
@@ -84,7 +84,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('dl', 'ui-description-list')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.layout && 'layout',
@@ -103,10 +103,12 @@ const hostState = computed(() =>
   <dl
     class="ui-description-list"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-description-list
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-columns="reflectedProp('columns', 'columns', checkedProps.columns, undefined, false)"
-    :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
-    :data-layout="reflectedProp('layout', 'layout', checkedProps.layout, undefined, false)"
+    :data-ui-description-list-prop-columns="reflectedProp('columns', 'columns', checkedProps.columns, undefined, false)"
+    :data-ui-description-list-prop-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
+    :data-ui-description-list-prop-layout="reflectedProp('layout', 'layout', checkedProps.layout, undefined, false)"
     :data-ui-description-list-state="hostState || undefined"
   >
     <slot />
@@ -127,8 +129,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-description-list) {
-  :scope:where(:scope) {
+@scope (.ui-description-list) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-description-list])) {
     --_gap: var(--ui-space-2);
     --_gap-compact: var(--ui-space-1);
     --_column-gap: var(--ui-space-6);
@@ -141,9 +143,9 @@ const hostState = computed(() =>
     min-inline-size: 0;
     margin: 0;
   }
-  :scope:where(:scope):is([data-ui-description-list-state~="layout=stacked"]),
-  :scope:where(:scope):is([data-ui-description-list-state~="layout=grid"]),
-  :scope:where(:scope):is([data-ui-description-list-state~="layout=tiles"]) {
+  :global(:scope[data-ui-description-list-state~="layout=stacked"]:where([data-hn-ui-description-list])),
+  :global(:scope[data-ui-description-list-state~="layout=grid"]:where([data-hn-ui-description-list])),
+  :global(:scope[data-ui-description-list-state~="layout=tiles"]:where([data-hn-ui-description-list])) {
     --_ui-description-display: flex;
     --_ui-description-column: auto;
     --_ui-description-align: stretch;
@@ -151,13 +153,13 @@ const hostState = computed(() =>
     --_gap-compact: var(--ui-space-2);
     grid-template-columns: minmax(0, 1fr);
   }
-  :scope:where(:scope):is([data-ui-description-list-state~="layout=grid"]),
-  :scope:where(:scope):is([data-ui-description-list-state~="layout=tiles"]) {
+  :global(:scope[data-ui-description-list-state~="layout=grid"]:where([data-hn-ui-description-list])),
+  :global(:scope[data-ui-description-list-state~="layout=tiles"]:where([data-hn-ui-description-list])) {
     inline-size: 100%;
     grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
   }
 
-  :scope:where(:scope):is([data-ui-description-list-state~="layout=tiles"]) {
+  :global(:scope[data-ui-description-list-state~="layout=tiles"]:where([data-hn-ui-description-list])) {
     --_ui-description-align: flex-start;
     --_ui-description-value-size: var(--ui-font-size-lg);
     --_ui-description-padding: var(--_tile-padding);
@@ -168,20 +170,20 @@ const hostState = computed(() =>
     --_column-gap: var(--_gap);
   }
 
-  :scope:where(:scope):is([data-ui-description-list-state~="columns=2"]) {
+  :global(:scope[data-ui-description-list-state~="columns=2"]:where([data-hn-ui-description-list])) {
     --_track: max(var(--_min), (100% - var(--_column-gap)) / 2);
   }
-  :scope:where(:scope):is([data-ui-description-list-state~="columns=3"]) {
+  :global(:scope[data-ui-description-list-state~="columns=3"]:where([data-hn-ui-description-list])) {
     --_track: max(var(--_min), (100% - 2 * var(--_column-gap)) / 3);
   }
-  :scope:where(:scope):is([data-ui-description-list-state~="columns=4"]) {
+  :global(:scope[data-ui-description-list-state~="columns=4"]:where([data-hn-ui-description-list])) {
     --_track: max(var(--_min), (100% - 3 * var(--_column-gap)) / 4);
   }
-  :scope:where(:scope):is([data-ui-description-list-state~="density=compact"]) {
+  :global(:scope[data-ui-description-list-state~="density=compact"]:where([data-hn-ui-description-list])) {
     --_gap: var(--_gap-compact);
     --_tile-padding: var(--ui-space-2);
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-description-list])) {
     display: none;
   }
 }

package/vue/UiDialog.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'
@@ -202,7 +202,7 @@ provide('html-next:ui-dialog:internalOpen', internalOpen)
 provide('html-next:ui-dialog:accessibleLabel', accessibleLabel)
 checkHydratedRoot('dialog', 'ui-dialog')
 
-/** 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',
@@ -277,27 +277,30 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   <dialog
     class="ui-dialog"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-dialog
     :aria-label="accessibleLabel"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-alert="reflectedProp('alert', 'alert', checkedProps.alert, undefined, false)"
-    :data-closedby="reflectedProp('closedby', 'closedby', checkedProps.closedby, undefined, false)"
-    :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
-    :data-modal="reflectedProp('modal', 'modal', checkedProps.modal, undefined, false)"
-    :data-modeless="reflectedProp('modeless', 'modeless', checkedProps.modeless, undefined, false)"
-    :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-dialog-prop-alert="reflectedProp('alert', 'alert', checkedProps.alert, undefined, false)"
+    :data-ui-dialog-prop-closedby="reflectedProp('closedby', 'closedby', checkedProps.closedby, undefined, false)"
+    :data-ui-dialog-prop-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
+    :data-ui-dialog-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-dialog-prop-modal="reflectedProp('modal', 'modal', checkedProps.modal, undefined, false)"
+    :data-ui-dialog-prop-modeless="reflectedProp('modeless', 'modeless', checkedProps.modeless, undefined, false)"
+    :data-ui-dialog-prop-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
+    :data-ui-dialog-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-dialog-state="hostState || undefined"
     ref="root"
   >
-    <header ref="headerElement">
-      <h2 v-if="checkedProps.label" class="title">{{ checkedProps.label }}</h2>
-      <button class="close" type="button" aria-label="Close" ref="closeElement"></button>
+    <header data-hn-ui-dialog ref="headerElement">
+      <h2 v-if="checkedProps.label" class="title" data-hn-ui-dialog>{{ checkedProps.label }}</h2>
+      <button class="close" type="button" aria-label="Close" data-hn-ui-dialog ref="closeElement">
+      </button>
     </header>
-    <div class="body" ref="bodyElement">
+    <div class="body" data-hn-ui-dialog ref="bodyElement">
       <UiScrollArea class="ui-scroll-area" :trim="true"><slot /></UiScrollArea>
     </div>
-    <footer ref="footerElement"><slot name="actions" /></footer>
+    <footer data-hn-ui-dialog ref="footerElement"><slot name="actions" /></footer>
   </dialog>
 </template>
 
@@ -353,8 +356,8 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   }
 }
 
-@scope (.ui-dialog) to (.ui-scroll-area) {
-  :scope:where(:scope) {
+@scope (.ui-dialog) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-dialog])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-dialog-duration: var(--ui-dialog-duration);
 
@@ -391,7 +394,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
   }
 
-  :scope:where(:scope):is([open]) {
+  :global(:scope[open]:where([data-hn-ui-dialog])) {
     display: flex;
     visibility: visible;
     pointer-events: auto;
@@ -401,15 +404,15 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       var(--ui-motion-ease);
   }
 
-  :scope:where(:scope):is([data-ui-dialog-state~="size=sm"]) {
+  :global(:scope[data-ui-dialog-state~="size=sm"]:where([data-hn-ui-dialog])) {
     --_ui-dialog-size: 360px;
   }
 
-  :scope:where(:scope):is([data-ui-dialog-state~="size=lg"]) {
+  :global(:scope[data-ui-dialog-state~="size=lg"]:where([data-hn-ui-dialog])) {
     --_ui-dialog-size: 640px;
   }
 
-  :scope:where(:scope):is([data-ui-dialog-state~="size=fullscreen"]) {
+  :global(:scope[data-ui-dialog-state~="size=fullscreen"]:where([data-hn-ui-dialog])) {
     inset: 0;
     inline-size: 100%;
     block-size: 100dvh;
@@ -418,10 +421,10 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
     border-radius: var(--ui-dialog-radius, 0);
   }
 
-  :scope[data-ui-dialog-state~="alert"] .close {
+  :global(:scope[data-ui-dialog-state~="alert"] .close:where([data-hn-ui-dialog])) {
     display: none;
   }
-  header {
+  :global(header:where([data-hn-ui-dialog])) {
     display: flex;
     align-items: center;
     gap: var(--ui-space-3);
@@ -431,7 +434,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
     padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3)
       var(--ui-space-5);
   }
-  :scope .title {
+  :global(:scope .title:where([data-hn-ui-dialog])) {
     flex: 1;
     min-inline-size: 0;
     margin: 0;
@@ -444,7 +447,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
     line-height: var(--ui-line-height-tight);
   }
 
-  .close {
+  :global(.close:where([data-hn-ui-dialog])) {
     display: inline-grid;
     place-items: center;
     flex: none;
@@ -461,7 +464,8 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       background-color var(--ui-motion-fast) var(--ui-motion-ease),
       color var(--ui-motion-fast) var(--ui-motion-ease);
   }
-  .close::before, .close::after {
+  :global(.close:where([data-hn-ui-dialog])::before),
+  :global(.close:where([data-hn-ui-dialog])::after) {
     content: "";
     grid-area: 1 / 1;
     inline-size: 0.875rem;
@@ -471,32 +475,32 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
     transform: rotate(45deg);
   }
 
-  .close::after {
+  :global(.close:where([data-hn-ui-dialog])::after) {
     transform: rotate(-45deg);
   }
 
-  .close:hover {
+  :global(.close:hover:where([data-hn-ui-dialog])) {
     background: var(--ui-surface-muted);
     color: var(--ui-text-primary);
   }
 
-  .close:focus-visible {
+  :global(.close:focus-visible:where([data-hn-ui-dialog])) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     outline-offset: var(--ui-focus-width);
   }
   @media (pointer: coarse) {
-    .close {
+    :global(.close:where([data-hn-ui-dialog])) {
       inline-size: var(--ui-control-min-block-size);
       block-size: var(--ui-control-min-block-size);
     }
   }
 
-  html[data-ui-input-modality="touch"] :scope .close {
+  :global(html[data-ui-input-modality="touch"] :scope .close:where([data-hn-ui-dialog])) {
     inline-size: var(--ui-control-min-block-size);
     block-size: var(--ui-control-min-block-size);
   }
 
-  .body {
+  :global(.body:where([data-hn-ui-dialog])) {
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
@@ -504,7 +508,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
     padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5);
   }
 
-  footer {
+  :global(footer:where([data-hn-ui-dialog])) {
     display: flex;
     flex: none;
     flex-wrap: wrap;
@@ -513,11 +517,11 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
     padding: 0 var(--ui-space-5) var(--ui-space-5);
   }
 
-  footer:empty {
+  :global(footer:empty:where([data-hn-ui-dialog])) {
     display: none;
   }
 
-  :scope:where(:scope)::backdrop {
+  :global(:scope:where([data-hn-ui-dialog])::backdrop) {
     background-color: transparent;
     transition:
       background-color var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
@@ -527,13 +531,13 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       allow-discrete;
   }
 
-  :scope:where(:scope):is([open]:modal)::backdrop {
+  :global(:scope[open]:modal:where([data-hn-ui-dialog])::backdrop) {
     background-color: var(--ui-overlay-backdrop);
     animation: ui-dialog-backdrop-enter var(--_ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
   }
 
-  :scope:where(:scope):is([open][data-ui-backdrop-hidden])::backdrop {
+  :global(:scope[open][data-ui-backdrop-hidden]:where([data-hn-ui-dialog])::backdrop) {
     background-color: transparent;
     animation: none;
     transition: none;