@threadlabs/looma 0.28.13 → 0.28.15

package/vue/UiTextarea.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'
@@ -196,7 +196,7 @@ const model = computed({
 const root = ref<HTMLElement | null>(null)
 checkHydratedRoot('textarea', 'ui-textarea')
 
-/** 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',
@@ -244,6 +244,7 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
   <textarea
     class="ui-textarea"
     v-bind="nativeAttrs($attrs)"
+    data-hn
     :disabled="checkedProps.disabled ?? undefined"
     :readonly="checkedProps.readonly ?? undefined"
     :required="checkedProps.required ?? undefined"
@@ -251,15 +252,15 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
     :rows="checkedProps.rows ?? undefined"
     :style="{ '--_rows': checkedProps.rows?.toString(), '--_max-rows': checkedProps.maxRows?.toString() }"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-autosize="reflectedProp('autosize', 'autosize', checkedProps.autosize, undefined, false)"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
-    :data-max-rows="reflectedProp('maxRows', 'max-rows', checkedProps.maxRows, undefined, false)"
-    :data-readonly="reflectedProp('readonly', 'readonly', checkedProps.readonly, undefined, false)"
-    :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
-    :data-rows="reflectedProp('rows', 'rows', checkedProps.rows, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    :data-ui-textarea-prop-autosize="reflectedProp('autosize', 'autosize', checkedProps.autosize, undefined, false)"
+    :data-ui-textarea-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-textarea-prop-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
+    :data-ui-textarea-prop-max-rows="reflectedProp('maxRows', 'max-rows', checkedProps.maxRows, undefined, false)"
+    :data-ui-textarea-prop-readonly="reflectedProp('readonly', 'readonly', checkedProps.readonly, undefined, false)"
+    :data-ui-textarea-prop-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
+    :data-ui-textarea-prop-rows="reflectedProp('rows', 'rows', checkedProps.rows, undefined, false)"
+    :data-ui-textarea-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-textarea-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     v-bind-control="{ tag: 'textarea', name: 'value', value: model, optionalValue: true, defaultValue: '' }"
     @input="model = readBoundControl(
       $event.currentTarget as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement,
@@ -328,8 +329,8 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-textarea) {
-  :scope:where(:scope) {
+@scope (.ui-textarea) to ([data-hn]) {
+  :global(:scope) {
     box-sizing: border-box;
     display: inline-block;
     inline-size: 100%;
@@ -372,17 +373,17 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
       box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
       background-color var(--ui-motion-fast) var(--ui-motion-ease);
   }
-  :scope:where(:scope)::selection {
+  :global(:scope::selection) {
     background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
     color: inherit;
   }
 
-  :scope:where(:scope)::placeholder {
+  :global(:scope::placeholder) {
     color: var(--ui-control-placeholder, var(--ui-text-secondary));
     opacity: 1;
   }
 
-  :scope:where(:scope):is(:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid]))) {
+  :global(:scope:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid]))) {
     border-color: var(
       --ui-textarea-border-hover,
       var(
@@ -392,7 +393,7 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
     );
   }
 
-  :scope:where(:scope):is(:focus-visible) {
+  :global(:scope:focus-visible) {
     border-color: var(
       --ui-textarea-focus-border,
       var(--_ui-default-textarea-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
@@ -407,15 +408,14 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
       )
     );
   }
-  :scope:where(:scope):is([aria-invalid="true"]),
-  :scope:where(:scope):is(:is(:user-invalid, [data-user-invalid])) {
+  :global(:scope[aria-invalid="true"]), :global(:scope:is(:user-invalid, [data-user-invalid])) {
     border-color: var(
       --ui-textarea-invalid-border,
       var(--_ui-default-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
     );
   }
 
-  :scope:where(:scope):is(:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
+  :global(:scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
     box-shadow: var(
       --ui-textarea-invalid-focus-shadow,
       var(
@@ -436,14 +436,14 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
     );
   }
 
-  :scope:where(:scope):is(:disabled) {
+  :global(:scope:disabled) {
     background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
     color: var(--ui-disabled-text);
     box-shadow: none;
     cursor: not-allowed;
   }
 
-  :scope:where(:scope):is([data-ui-textarea-state~="size=sm"]) {
+  :global(:scope[data-ui-textarea-state~="size=sm"]) {
     --_padding-block: var(--ui-space-1);
     padding: var(--ui-space-1) var(--ui-space-2);
     padding-inline-end: var(
@@ -453,7 +453,7 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
     font-size: var(--ui-font-size-sm);
   }
 
-  :scope:where(:scope):is([data-ui-textarea-state~="size=lg"]) {
+  :global(:scope[data-ui-textarea-state~="size=lg"]) {
     --_padding-block: var(--ui-space-3);
     padding: var(--ui-space-3) var(--ui-space-4);
     padding-inline-end: var(
@@ -463,7 +463,7 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
     font-size: var(--ui-font-size-md);
   }
 
-  :scope:where(:scope):is([data-ui-textarea-state~="maxRows"]) {
+  :global(:scope[data-ui-textarea-state~="maxRows"]) {
     max-block-size: calc(
       max(var(--_rows), var(--_max-rows)) * 1lh + var(--_padding-block) + var(--_padding-block) +
         2px
@@ -471,7 +471,7 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
   }
 
   @supports (field-sizing: content) {
-    :scope:where(:scope):is([data-ui-textarea-state~="autosize"]) {
+    :global(:scope[data-ui-textarea-state~="autosize"]) {
       field-sizing: content;
       min-block-size: calc(
         var(--_rows) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px
@@ -479,11 +479,11 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
     }
   }
   @media (pointer: coarse) {
-    :scope:where(:scope):is([data-ui-textarea-state~="size=sm"]) {
+    :global(:scope[data-ui-textarea-state~="size=sm"]) {
       font-size: inherit;
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]) {
     display: none;
   }
 }

package/vue/UiToast.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'
@@ -83,7 +83,7 @@ const root = ref<HTMLElement | null>(null)
 const actionElement = useTemplateRef<HTMLElement>('actionElement')
 checkHydratedRoot('div', 'ui-toast')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.tone && 'tone',
@@ -133,6 +133,8 @@ useComponentHost(() => import('../components/ui-toast/ui-toast.js'), {
   <div
     class="ui-toast"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-toast
     :role="attribute(
       (({
         neutral: 'status',
@@ -143,13 +145,13 @@ useComponentHost(() => import('../components/ui-toast/ui-toast.js'), {
       }) as Record<string, any>)[checkedProps.tone],
     )"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-duration="reflectedProp('duration', 'duration', checkedProps.duration, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-toast-prop-duration="reflectedProp('duration', 'duration', checkedProps.duration, undefined, false)"
+    :data-ui-toast-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-ui-toast-state="hostState || undefined"
     ref="root"
   >
-    <div class="message"><slot /></div>
-    <div class="action" ref="actionElement"><slot name="action" /></div>
+    <div class="message" data-hn-ui-toast><slot /></div>
+    <div class="action" data-hn-ui-toast ref="actionElement"><slot name="action" /></div>
     <UiIconButton
       class="ui-icon-button dismiss"
       size="sm"
@@ -182,8 +184,8 @@ useComponentHost(() => import('../components/ui-toast/ui-toast.js'), {
   syntax: "*";
   inherits: false;
 }
-@scope (.ui-toast) to (.ui-icon-button, .ui-icon) {
-  :scope:where(:scope) {
+@scope (.ui-toast) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-toast])) {
     --_ui-toast-accent: var(--ui-border-strong);
     --_ui-toast-surface: var(--ui-surface-muted);
 
@@ -215,31 +217,31 @@ useComponentHost(() => import('../components/ui-toast/ui-toast.js'), {
     pointer-events: auto;
   }
 
-  :scope:where(:scope):is([data-ui-toast-state~="tone=info"]) {
+  :global(:scope[data-ui-toast-state~="tone=info"]:where([data-hn-ui-toast])) {
     --_ui-toast-accent: var(--ui-info-solid);
     --_ui-toast-surface: var(--ui-info-soft);
   }
-  :scope:where(:scope):is([data-ui-toast-state~="tone=success"]) {
+  :global(:scope[data-ui-toast-state~="tone=success"]:where([data-hn-ui-toast])) {
     --_ui-toast-accent: var(--ui-success-solid);
     --_ui-toast-surface: var(--ui-success-soft);
   }
-  :scope:where(:scope):is([data-ui-toast-state~="tone=warning"]) {
+  :global(:scope[data-ui-toast-state~="tone=warning"]:where([data-hn-ui-toast])) {
     --_ui-toast-accent: var(--ui-warning-solid);
     --_ui-toast-surface: var(--ui-warning-soft);
   }
-  :scope:where(:scope):is([data-ui-toast-state~="tone=danger"]) {
+  :global(:scope[data-ui-toast-state~="tone=danger"]:where([data-hn-ui-toast])) {
     --_ui-toast-accent: var(--ui-danger-solid);
     --_ui-toast-surface: var(--ui-danger-soft);
   }
 
-  .message {
+  :global(.message:where([data-hn-ui-toast])) {
     min-inline-size: 0;
     flex: 1;
   }
-  .action:not(:has(> *)) {
+  :global(.action:not(:has(> *)):where([data-hn-ui-toast])) {
     display: none;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-toast])) {
     display: none;
   }
 }

package/vue/UiToastRegion.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'
@@ -110,7 +110,7 @@ const toasts = ref<
 provide('html-next:ui-toast-region:toasts', toasts)
 checkHydratedRoot('div', 'ui-toast-region')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.placement && 'placement',
@@ -220,9 +220,11 @@ useComponentHost(() => import('../components/ui-toast-region/ui-toast-region.js'
     aria-live="polite"
     popover="manual"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-toast-region
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-duration="reflectedProp('duration', 'duration', checkedProps.duration, undefined, false)"
-    :data-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
+    :data-ui-toast-region-prop-duration="reflectedProp('duration', 'duration', checkedProps.duration, undefined, false)"
+    :data-ui-toast-region-prop-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
     :data-ui-toast-region-state="hostState || undefined"
     ref="root"
   >
@@ -231,13 +233,14 @@ useComponentHost(() => import('../components/ui-toast-region/ui-toast-region.js'
         v-for="toast in uniqueKeys(toasts, (toast, index, loop) => toast.id)"
         :key="toast.id"
         class="toast"
+        data-hn-ui-toast-region
         :id="toast.id"
         :role="toast.role"
         :data-tone="toast.tone"
         :class="{ closing: toast.closing }"
       >
-        <span class="message">{{ toast.message }}</span>
-        <span class="dismiss" :data-toast="toast.id"><UiIconButton
+        <span class="message" data-hn-ui-toast-region>{{ toast.message }}</span>
+        <span class="dismiss" data-hn-ui-toast-region :data-toast="toast.id"><UiIconButton
             class="ui-icon-button"
             size="sm"
             variant="ghost"
@@ -323,8 +326,8 @@ useComponentHost(() => import('../components/ui-toast-region/ui-toast-region.js'
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-toast-region) to (.ui-icon-button, .ui-icon) {
-  :scope:where(:scope) {
+@scope (.ui-toast-region) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-toast-region])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-toast-region-surface: var(--ui-toast-region-surface);
     --_ui-toast-region-border: var(--ui-toast-region-border);
@@ -355,38 +358,39 @@ useComponentHost(() => import('../components/ui-toast-region/ui-toast-region.js'
     pointer-events: none;
   }
 
-  :scope:where(:scope):is(:not(:popover-open)) {
+  :global(:scope:not(:popover-open):where([data-hn-ui-toast-region])) {
     display: none;
   }
 
-  :scope:where(:scope):is([data-ui-toast-region-state~="placement=top-start"]),
-  :scope:where(:scope):is([data-ui-toast-region-state~="placement=bottom-start"]) {
+  :global(:scope[data-ui-toast-region-state~="placement=top-start"]:where([data-hn-ui-toast-region])),
+  :global(:scope[data-ui-toast-region-state~="placement=bottom-start"]:where([data-hn-ui-toast-region])) {
     left: auto;
     right: auto;
     inset-inline-start: calc(var(--ui-space-4) + env(safe-area-inset-left));
     transform: none;
   }
 
-  :scope:where(:scope):is([data-ui-toast-region-state~="placement=top-end"]),
-  :scope:where(:scope):is([data-ui-toast-region-state~="placement=bottom-end"]) {
+  :global(:scope[data-ui-toast-region-state~="placement=top-end"]:where([data-hn-ui-toast-region])),
+  :global(:scope[data-ui-toast-region-state~="placement=bottom-end"]:where([data-hn-ui-toast-region])) {
     left: auto;
     right: auto;
     inset-inline-end: calc(var(--ui-space-4) + env(safe-area-inset-right));
     transform: none;
   }
 
-  :scope:where(:scope):is([data-ui-toast-region-state~="placement=bottom"]),
-  :scope:where(:scope):is([data-ui-toast-region-state~="placement=bottom-start"]),
-  :scope:where(:scope):is([data-ui-toast-region-state~="placement=bottom-end"]) {
+  :global(:scope[data-ui-toast-region-state~="placement=bottom"]:where([data-hn-ui-toast-region])),
+  :global(:scope[data-ui-toast-region-state~="placement=bottom-start"]:where([data-hn-ui-toast-region])),
+  :global(:scope[data-ui-toast-region-state~="placement=bottom-end"]:where([data-hn-ui-toast-region])) {
     top: auto;
     bottom: calc(var(--ui-space-4) + env(safe-area-inset-bottom));
   }
 
-  :scope > .toast, :scope > :slotted(*) {
+  :global(:scope > .toast:where([data-hn-ui-toast-region])),
+  :global(:scope > :where(:not([data-hn-ui-toast-region])):is(*)) {
     pointer-events: auto;
   }
 
-  .toast {
+  :global(.toast:where([data-hn-ui-toast-region])) {
     --_ui-toast-region-accent: var(--ui-border-strong);
     --_ui-toast-region-tone-surface: var(--ui-surface-muted);
     display: grid;
@@ -416,53 +420,54 @@ useComponentHost(() => import('../components/ui-toast-region/ui-toast-region.js'
       var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
   }
 
-  .toast[data-tone="info"] {
+  :global(.toast[data-tone="info"]:where([data-hn-ui-toast-region])) {
     --_ui-toast-region-accent: var(--ui-info-solid);
     --_ui-toast-region-tone-surface: var(--ui-info-soft);
   }
-  .toast[data-tone="success"] {
+  :global(.toast[data-tone="success"]:where([data-hn-ui-toast-region])) {
     --_ui-toast-region-accent: var(--ui-success-solid);
     --_ui-toast-region-tone-surface: var(--ui-success-soft);
   }
-  .toast[data-tone="warning"] {
+  :global(.toast[data-tone="warning"]:where([data-hn-ui-toast-region])) {
     --_ui-toast-region-accent: var(--ui-warning-solid);
     --_ui-toast-region-tone-surface: var(--ui-warning-soft);
   }
-  .toast[data-tone="danger"] {
+  :global(.toast[data-tone="danger"]:where([data-hn-ui-toast-region])) {
     --_ui-toast-region-accent: var(--ui-danger-solid);
     --_ui-toast-region-tone-surface: var(--ui-danger-soft);
   }
-  .toast.closing {
+  :global(.toast.closing:where([data-hn-ui-toast-region])) {
     animation: ui-toast-exit var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease)
       both;
     pointer-events: none;
   }
 
-  :is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"])
-    .toast {
+  :global(:is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"])
+    .toast:where([data-hn-ui-toast-region])) {
     animation-name: ui-toast-enter-bottom;
   }
 
-  :is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"])
-    .toast.closing {
+  :global(:is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"])
+    .toast.closing:where([data-hn-ui-toast-region])) {
     animation-name: ui-toast-exit-bottom;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .toast, .toast.closing {
+    :global(.toast:where([data-hn-ui-toast-region])),
+    :global(.toast.closing:where([data-hn-ui-toast-region])) {
       animation: none;
     }
   }
 
-  .message {
+  :global(.message:where([data-hn-ui-toast-region])) {
     min-inline-size: 0;
     align-self: center;
   }
 
-  .dismiss {
+  :global(.dismiss:where([data-hn-ui-toast-region])) {
     align-self: center;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-toast-region])) {
     display: none;
   }
 }

package/vue/UiTooltip.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'
@@ -227,7 +227,7 @@ const internalOpen = ref(false)
 provide('html-next:ui-tooltip:internalOpen', internalOpen)
 checkHydratedRoot('span', 'ui-tooltip')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.inverse && 'inverse',
@@ -287,20 +287,22 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
     class="ui-tooltip"
     role="tooltip"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-tooltip
     :hidden="!internalOpen"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
-    :data-hide-delay="reflectedProp('hideDelay', 'hide-delay', checkedProps.hideDelay, undefined, false)"
-    :data-inverse="reflectedProp('inverse', 'inverse', checkedProps.inverse, undefined, false)"
-    :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
-    :data-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
-    :data-show-delay="reflectedProp('showDelay', 'show-delay', checkedProps.showDelay, undefined, false)"
-    :data-trigger="reflectedProp('trigger', 'trigger', checkedProps.trigger, undefined, false)"
+    :data-ui-tooltip-prop-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
+    :data-ui-tooltip-prop-hide-delay="reflectedProp('hideDelay', 'hide-delay', checkedProps.hideDelay, undefined, false)"
+    :data-ui-tooltip-prop-inverse="reflectedProp('inverse', 'inverse', checkedProps.inverse, undefined, false)"
+    :data-ui-tooltip-prop-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
+    :data-ui-tooltip-prop-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
+    :data-ui-tooltip-prop-show-delay="reflectedProp('showDelay', 'show-delay', checkedProps.showDelay, undefined, false)"
+    :data-ui-tooltip-prop-trigger="reflectedProp('trigger', 'trigger', checkedProps.trigger, undefined, false)"
     :data-ui-tooltip-state="hostState || undefined"
     ref="root"
-  ><div class="surface">
+  ><div class="surface" data-hn-ui-tooltip>
       <slot />
-      <span class="shortcut"><slot name="shortcut" /></span>
+      <span class="shortcut" data-hn-ui-tooltip><slot name="shortcut" /></span>
     </div></span>
 </template>
 
@@ -355,8 +357,8 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
 /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
  * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
 
-@scope (.ui-tooltip) {
-  :scope:where(:scope) {
+@scope (.ui-tooltip) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-tooltip])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-tooltip-border: var(--ui-tooltip-border);
     --_ui-tooltip-max-inline-size: var(--ui-tooltip-max-inline-size);
@@ -389,7 +391,7 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
       overlay var(--ui-motion-fast) allow-discrete;
   }
 
-  .surface {
+  :global(.surface:where([data-hn-ui-tooltip])) {
     --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-strong)));
     position: relative;
     box-sizing: border-box;
@@ -407,7 +409,7 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
       var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)))
     );
   }
-  .shortcut {
+  :global(.shortcut:where([data-hn-ui-tooltip])) {
     display: inline-flex;
     align-items: center;
     margin-inline-start: var(--ui-space-2);
@@ -420,19 +422,19 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
     vertical-align: baseline;
   }
 
-  .shortcut:empty {
+  :global(.shortcut:empty:where([data-hn-ui-tooltip])) {
     display: none;
   }
-  .shortcut :slotted(kbd) {
+  :global(.shortcut :where(:not([data-hn-ui-tooltip])):is(kbd)) {
     font: inherit;
   }
 
-  :scope[data-ui-tooltip-state~="inverse"] .surface {
+  :global(:scope[data-ui-tooltip-state~="inverse"] .surface:where([data-hn-ui-tooltip])) {
     --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
     background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
     color: var(--_ui-tooltip-inverse-text, var(--ui-surface-default));
   }
-  .surface::after {
+  :global(.surface:where([data-hn-ui-tooltip])::after) {
     content: "";
     position: absolute;
     z-index: 1;
@@ -451,7 +453,7 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
     transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
   }
 
-  :scope[data-ui-actual-placement="bottom"] .surface::after {
+  :global(:scope[data-ui-actual-placement="bottom"] .surface:where([data-hn-ui-tooltip])::after) {
     inset-block-start: calc(
       var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2
     );
@@ -464,23 +466,23 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
     border-start-start-radius: var(--ui-border-width);
   }
 
-  :scope[data-ui-actual-align="center"] .surface::after {
+  :global(:scope[data-ui-actual-align="center"] .surface:where([data-hn-ui-tooltip])::after) {
     inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
   }
 
-  :scope[data-ui-actual-align="end"] .surface::after {
+  :global(:scope[data-ui-actual-align="end"] .surface:where([data-hn-ui-tooltip])::after) {
     inset-inline-start: auto;
     inset-inline-end: var(--ui-space-3);
   }
 
-  :scope[data-ui-actual-placement="left"] .surface::after,
-  :scope[data-ui-actual-placement="right"] .surface::after {
+  :global(:scope[data-ui-actual-placement="left"] .surface:where([data-hn-ui-tooltip])::after),
+  :global(:scope[data-ui-actual-placement="right"] .surface:where([data-hn-ui-tooltip])::after) {
     inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
     inset-block-end: auto;
     border: 0 solid var(--_tooltip-line);
   }
 
-  :scope[data-ui-actual-placement="left"] .surface::after {
+  :global(:scope[data-ui-actual-placement="left"] .surface:where([data-hn-ui-tooltip])::after) {
     inset-inline-start: auto;
     inset-inline-end: calc(
       var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2
@@ -489,7 +491,7 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
     border-block-start-width: var(--ui-border-width);
   }
 
-  :scope[data-ui-actual-placement="right"] .surface::after {
+  :global(:scope[data-ui-actual-placement="right"] .surface:where([data-hn-ui-tooltip])::after) {
     inset-inline-start: calc(
       var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2
     );
@@ -498,35 +500,39 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
     border-block-end-width: var(--ui-border-width);
   }
 
-  :scope[data-ui-actual-placement="left"][data-ui-actual-align="start"] .surface::after,
-  :scope[data-ui-actual-placement="right"][data-ui-actual-align="start"] .surface::after {
+  :global(:scope[data-ui-actual-placement="left"][data-ui-actual-align="start"]
+    .surface:where([data-hn-ui-tooltip])::after),
+  :global(:scope[data-ui-actual-placement="right"][data-ui-actual-align="start"]
+    .surface:where([data-hn-ui-tooltip])::after) {
     inset-block-start: var(--ui-space-3);
   }
 
-  :scope[data-ui-actual-placement="left"][data-ui-actual-align="end"] .surface::after,
-  :scope[data-ui-actual-placement="right"][data-ui-actual-align="end"] .surface::after {
+  :global(:scope[data-ui-actual-placement="left"][data-ui-actual-align="end"]
+    .surface:where([data-hn-ui-tooltip])::after),
+  :global(:scope[data-ui-actual-placement="right"][data-ui-actual-align="end"]
+    .surface:where([data-hn-ui-tooltip])::after) {
     inset-block-start: auto;
     inset-block-end: var(--ui-space-3);
   }
 
-  :scope:where(:scope):is(:popover-open) {
+  :global(:scope:popover-open:where([data-hn-ui-tooltip])) {
     opacity: 1;
     transform: translateY(0);
   }
 
   @starting-style {
-    :scope:where(:scope):is(:popover-open) {
+    :global(:scope:popover-open:where([data-hn-ui-tooltip])) {
       opacity: 0;
       transform: translateY(4px);
     }
   }
 
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-tooltip])) {
     display: none;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    :scope:where(:scope) {
+    :global(:scope:where([data-hn-ui-tooltip])) {
       transition: none;
     }
   }