@threadlabs/looma 0.28.13 → 0.28.14

package/vue/UiButton.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, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -577,7 +577,7 @@ checkHydratedRoot(
   'ui-button',
 )
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.align && 'align',
@@ -640,6 +640,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     v-if="checkedProps.variant === 'card' && checkedProps.as === 'a'"
     class="ui-button"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-button
     :href="guarded"
     :target="checkedProps.target ?? undefined"
     :rel="checkedProps.rel ?? undefined"
@@ -647,23 +649,23 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :aria-busy="checkedProps.loading || checkedProps.pending"
     :tabindex="guardedBinding2"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
-    :data-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
-    :data-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
-    :data-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
-    :data-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
-    :data-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-button-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-button-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-button-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-button-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-ui-button-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
+    :data-ui-button-prop-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
+    :data-ui-button-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
+    :data-ui-button-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
+    :data-ui-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-button-prop-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
+    :data-ui-button-prop-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
+    :data-ui-button-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-button-prop-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
+    :data-ui-button-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-button-state="hostState || undefined"
     ref="@html-next/root"
-  ><span class="card-icon"><UiSpinner
+  ><span class="card-icon" data-hn-ui-button><UiSpinner
         v-if="checkedProps.loading || checkedProps.pending"
         class="ui-spinner"
         size="sm"
@@ -671,8 +673,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       <template v-if="!(checkedProps.loading || checkedProps.pending)"><slot
           name="icon"
         /></template></span>
-    <span class="card-content"><slot /></span>
-    <span class="card-action"><slot name="action"><UiIcon
+    <span class="card-content" data-hn-ui-button><slot /></span>
+    <span class="card-action" data-hn-ui-button><slot name="action"><UiIcon
           class="ui-icon"
           name="chevron-right"
           aria-hidden="true"
@@ -681,29 +683,31 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     v-else-if="checkedProps.variant === 'card'"
     class="ui-button"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-button
     :type="checkedProps.type ?? undefined"
     :disabled="checkedProps.disabled ?? undefined"
     :aria-disabled="guardedBinding3"
     :aria-busy="checkedProps.loading || checkedProps.pending"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
-    :data-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
-    :data-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
-    :data-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
-    :data-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
-    :data-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-button-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-button-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-button-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-button-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-ui-button-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
+    :data-ui-button-prop-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
+    :data-ui-button-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
+    :data-ui-button-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
+    :data-ui-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-button-prop-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
+    :data-ui-button-prop-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
+    :data-ui-button-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-button-prop-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
+    :data-ui-button-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-button-state="hostState || undefined"
     ref="@html-next/root"
   >
-    <span class="card-icon"><UiSpinner
+    <span class="card-icon" data-hn-ui-button><UiSpinner
         v-if="checkedProps.loading || checkedProps.pending"
         class="ui-spinner"
         size="sm"
@@ -711,8 +715,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       <template v-if="!(checkedProps.loading || checkedProps.pending)"><slot
           name="icon"
         /></template></span>
-    <span class="card-content"><slot /></span>
-    <span class="card-action"><slot name="action"><UiIcon
+    <span class="card-content" data-hn-ui-button><slot /></span>
+    <span class="card-action" data-hn-ui-button><slot name="action"><UiIcon
           class="ui-icon"
           name="chevron-right"
           aria-hidden="true"
@@ -722,6 +726,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     v-else-if="checkedProps.as === 'a'"
     class="ui-button"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-button
     :href="guardedBinding4"
     :target="checkedProps.target ?? undefined"
     :rel="checkedProps.rel ?? undefined"
@@ -729,60 +735,64 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     :aria-busy="checkedProps.loading || checkedProps.pending"
     :tabindex="guardedBinding6"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
-    :data-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
-    :data-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
-    :data-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
-    :data-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
-    :data-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-button-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-button-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-button-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-button-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-ui-button-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
+    :data-ui-button-prop-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
+    :data-ui-button-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
+    :data-ui-button-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
+    :data-ui-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-button-prop-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
+    :data-ui-button-prop-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
+    :data-ui-button-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-button-prop-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
+    :data-ui-button-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-button-state="hostState || undefined"
     ref="@html-next/root"
-  ><span v-if="checkedProps.loading || checkedProps.pending" class="spinner-wrap"><UiSpinner
-        class="ui-spinner"
-        size="sm"
-      /></span>
+  ><span
+      v-if="checkedProps.loading || checkedProps.pending"
+      class="spinner-wrap"
+      data-hn-ui-button
+    ><UiSpinner class="ui-spinner" size="sm" /></span>
     <slot />
-    <span class="badge"><slot name="badge" /></span></a>
+    <span class="badge" data-hn-ui-button><slot name="badge" /></span></a>
   <button
     v-else
     class="ui-button"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-button
     :type="checkedProps.type ?? undefined"
     :disabled="checkedProps.disabled ?? undefined"
     :aria-disabled="guardedBinding7"
     :aria-busy="checkedProps.loading || checkedProps.pending"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
-    :data-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
-    :data-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
-    :data-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
-    :data-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
-    :data-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-button-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-button-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-button-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-button-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-ui-button-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
+    :data-ui-button-prop-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
+    :data-ui-button-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
+    :data-ui-button-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
+    :data-ui-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-button-prop-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
+    :data-ui-button-prop-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
+    :data-ui-button-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-button-prop-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
+    :data-ui-button-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-button-state="hostState || undefined"
     ref="@html-next/root"
   >
-    <span v-if="checkedProps.loading || checkedProps.pending" class="spinner-wrap"><UiSpinner
-        class="ui-spinner"
-        size="sm"
-      /></span>
+    <span
+      v-if="checkedProps.loading || checkedProps.pending"
+      class="spinner-wrap"
+      data-hn-ui-button
+    ><UiSpinner class="ui-spinner" size="sm" /></span>
     <slot />
-    <span class="badge"><slot name="badge" /></span>
+    <span class="badge" data-hn-ui-button><slot name="badge" /></span>
   </button>
 </template>
 
@@ -906,8 +916,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-button) to (.ui-spinner, .ui-icon) {
-  :scope:where(:scope) {
+@scope (.ui-button) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-button])) {
     /* Optional inherited action-group values keep text and icon actions under the same light.
        One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
        A single ambient lift avoids stacking a face gradient or another inset bevel. */
@@ -946,21 +956,21 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     color: var(--_tone-text);
   }
 
-  :scope:where(:scope):is(:dir(rtl)) {
+  :global(:scope:dir(rtl):where([data-hn-ui-button])) {
     --_ui-action-start: -1px;
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="align=start"]) {
+  :global(:scope[data-ui-button-state~="align=start"]:where([data-hn-ui-button])) {
     justify-content: flex-start;
     text-align: start;
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="stretch"]) {
+  :global(:scope[data-ui-button-state~="stretch"]:where([data-hn-ui-button])) {
     display: flex;
     inline-size: 100%;
   }
 
-  :scope:where(:scope) {
+  :global(:scope:where([data-hn-ui-button])) {
     appearance: none;
     min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
     border-style: solid;
@@ -986,58 +996,58 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       box-shadow var(--ui-motion-base) var(--ui-motion-ease);
     margin: 0;
   }
-  :scope:where(:scope):is(:is(a)) {
+  :global(:scope:is(a):where([data-hn-ui-button])) {
     text-decoration: none;
   }
 
-  .spinner-wrap {
+  :global(.spinner-wrap:where([data-hn-ui-button])) {
     display: inline-flex;
     flex: none;
     vertical-align: middle;
   }
-  :scope:where(:scope):is(:not([variant="link"]):has(.badge:not(:empty))) {
+  :global(:scope:not([variant="link"]):has(.badge:not(:empty)):where([data-hn-ui-button])) {
     padding-block: var(--ui-space-0-5);
   }
 
-  .badge {
+  :global(.badge:where([data-hn-ui-button])) {
     display: inline-flex;
     align-items: center;
     flex: none;
   }
 
-  .badge:empty {
+  :global(.badge:empty:where([data-hn-ui-button])) {
     display: none;
   }
 
   @supports (text-box-trim: trim-both) {
-    :scope:where(:scope) {
+    :global(:scope:where([data-hn-ui-button])) {
       text-box-trim: trim-both;
       text-box-edge: cap alphabetic;
     }
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="size=xs"]) {
+  :global(:scope[data-ui-button-state~="size=xs"]:where([data-hn-ui-button])) {
     min-block-size: 1.5rem;
     padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25);
     font-size: var(--ui-font-size-xs);
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="shape=pill"]) {
+  :global(:scope[data-ui-button-state~="shape=pill"]:where([data-hn-ui-button])) {
     border-radius: var(--ui-button-radius, var(--ui-radius-round));
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="size=sm"]) {
+  :global(:scope[data-ui-button-state~="size=sm"]:where([data-hn-ui-button])) {
     min-block-size: var(--ui-control-size-sm);
     padding: var(--ui-space-1) var(--ui-space-2);
     font-size: var(--ui-font-size-sm);
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="size=lg"]) {
+  :global(:scope[data-ui-button-state~="size=lg"]:where([data-hn-ui-button])) {
     min-block-size: var(--ui-control-size-lg);
     padding: var(--ui-space-3) var(--ui-space-4);
     font-size: var(--ui-font-size-md);
   }
-  :scope:where(:scope):is([data-ui-button-state~="variant=card"]) {
+  :global(:scope[data-ui-button-state~="variant=card"]:where([data-hn-ui-button])) {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
     align-content: center;
@@ -1050,64 +1060,64 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     box-shadow: none;
     background-image: none;
   }
-  :scope:where(:scope):is([data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"]) {
+  :global(:scope[data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"]:where([data-hn-ui-button])) {
     min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
   }
-  :scope:where(:scope):is([data-ui-button-state~="variant=card"]:has(.card-icon:empty)) {
+  :global(:scope[data-ui-button-state~="variant=card"]:has(.card-icon:empty):where([data-hn-ui-button])) {
     grid-template-columns: minmax(0, 1fr) auto;
   }
-  .card-icon {
+  :global(.card-icon:where([data-hn-ui-button])) {
     display: flex;
     align-items: flex-start;
   }
-  .card-icon:empty {
+  :global(.card-icon:empty:where([data-hn-ui-button])) {
     display: none;
   }
-  .card-content {
+  :global(.card-content:where([data-hn-ui-button])) {
     min-inline-size: 0;
   }
-  .card-action {
+  :global(.card-action:where([data-hn-ui-button])) {
     display: flex;
     align-items: center;
     align-self: center;
   }
-  :scope:where(:scope):is(:hover:not(:disabled, [aria-disabled="true"])) {
+  :global(:scope:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     border-color: var(--ui-button-hover-border, var(--_tone-hover));
     background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
   }
-  :scope:where(:scope):is([data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]) {
+  :global(:scope[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:where([data-hn-ui-button])) {
     border-color: var(--ui-button-border, var(--ui-border));
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:hover:not(:disabled, [aria-disabled="true"])) {
+  :global(:scope[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     border-color: var(--ui-button-hover-border, var(--ui-border-strong));
   }
-  :scope:where(:scope):is(:active:not(:disabled, [aria-disabled="true"])) {
+  :global(:scope:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
     background-image: none;
     box-shadow: var(--ui-pressed);
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="variant=solid"]),
-  :scope:where(:scope):is([data-ui-button-state~="variant=danger"]) {
+  :global(:scope[data-ui-button-state~="variant=solid"]:where([data-hn-ui-button])),
+  :global(:scope[data-ui-button-state~="variant=danger"]:where([data-hn-ui-button])) {
     border-color: var(--_tone);
     background-color: var(--_tone);
     color: var(--_on-tone);
     box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
   }
 
-  :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]) {
+  :global(:is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     background-color: var(--_tone-hover);
     border-color: var(--_tone-hover);
   }
 
-  :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):active:not(:disabled, [aria-disabled="true"]) {
+  :global(:is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     background-color: var(--_tone-active);
     border-color: var(--_tone-active);
     background-image: none;
     box-shadow: var(--ui-pressed);
   }
-  :scope:where(:scope):is([data-ui-button-state~="tone=neutral"]) {
+  :global(:scope[data-ui-button-state~="tone=neutral"]:where([data-hn-ui-button])) {
     --_hue: var(--ui-text);
     --_hue-hover: var(--ui-text);
     --_hue-active: var(--ui-text);
@@ -1115,8 +1125,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     --_on-hue: var(--ui-surface);
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="tone=danger"]),
-  :scope:where(:scope):is([data-ui-button-state~="variant=danger"]) {
+  :global(:scope[data-ui-button-state~="tone=danger"]:where([data-hn-ui-button])),
+  :global(:scope[data-ui-button-state~="variant=danger"]:where([data-hn-ui-button])) {
     --_hue: var(--ui-danger);
     --_hue-hover: var(--ui-danger-hover);
     --_hue-active: var(--ui-danger-hover);
@@ -1124,7 +1134,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     --_on-hue: var(--ui-on-danger);
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="tone=success"]) {
+  :global(:scope[data-ui-button-state~="tone=success"]:where([data-hn-ui-button])) {
     --_hue: var(--ui-success);
     --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
     --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
@@ -1132,7 +1142,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     --_on-hue: var(--ui-surface);
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="tone=warning"]) {
+  :global(:scope[data-ui-button-state~="tone=warning"]:where([data-hn-ui-button])) {
     --_hue: var(--ui-warning);
     --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
     --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
@@ -1140,14 +1150,14 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     --_on-hue: var(--ui-surface);
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="tone=info"]) {
+  :global(:scope[data-ui-button-state~="tone=info"]:where([data-hn-ui-button])) {
     --_hue: var(--ui-info);
     --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
     --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
     --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
     --_on-hue: var(--ui-surface);
   }
-  :scope:where(:scope):is([data-ui-button-state~="variant=field"]) {
+  :global(:scope[data-ui-button-state~="variant=field"]:where([data-hn-ui-button])) {
     --_ui-field-shadow: var(--ui-shadow-sm);
     border-color: var(--ui-button-border, var(--ui-control-border, var(--ui-border-strong)));
     border-radius: var(--ui-button-radius, var(--ui-field-radius, var(--ui-radius-md)));
@@ -1160,7 +1170,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     box-shadow: var(--ui-button-shadow, var(--_ui-field-shadow));
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="variant=field"]:hover:not(:disabled, [aria-disabled="true"])) {
+  :global(:scope[data-ui-button-state~="variant=field"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     border-color: var(
       --ui-button-hover-border,
       var(--ui-control-border-hover, var(--ui-text-secondary))
@@ -1171,28 +1181,28 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     );
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="variant=field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"])) {
+  :global(:scope[data-ui-button-state~="variant=field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     --_ui-field-shadow: var(--ui-pressed);
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="variant=field"]:focus-visible) {
+  :global(:scope[data-ui-button-state~="variant=field"]:focus-visible:where([data-hn-ui-button])) {
     border-color: var(--ui-control-focus, var(--ui-accent-solid));
     box-shadow:
       var(--ui-button-shadow, var(--_ui-field-shadow)),
       var(--ui-control-focus-halo-shadow);
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="variant=ghost"]) {
+  :global(:scope[data-ui-button-state~="variant=ghost"]:where([data-hn-ui-button])) {
     border-color: transparent;
     background: transparent;
     box-shadow: none;
     color: var(--ui-button-ghost-text, var(--_tone-text));
   }
-  :scope:where(:scope):is([data-ui-button-state~="variant=ghost"]:hover:not(:disabled, [aria-disabled="true"])) {
+  :global(:scope[data-ui-button-state~="variant=ghost"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
     border-color: transparent;
   }
-  :scope:where(:scope):is([data-ui-button-state~="variant=ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"])) {
+  :global(:scope[data-ui-button-state~="variant=ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     background-color: var(
       --ui-button-ghost-active-surface,
       color-mix(in oklch, var(--ui-surface), var(--_tone) 3%)
@@ -1202,23 +1212,23 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%),
       inset 0 1px 2px oklch(from var(--_tone) l c h / 8%);
   }
-  :scope:where(:scope):is(:focus-visible) {
+  :global(:scope:focus-visible:where([data-hn-ui-button])) {
     outline: none;
     box-shadow:
       var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
       var(--ui-focus-halo);
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="variant=solid"]:focus-visible) {
+  :global(:scope[data-ui-button-state~="variant=solid"]:focus-visible:where([data-hn-ui-button])) {
     box-shadow:
       var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
       var(--ui-focus-halo);
   }
 
-  :is(:scope[data-ui-button-state~="variant=ghost"], :scope[data-ui-button-state~="variant=link"], :scope[data-ui-button-state~="variant=card"]):focus-visible {
+  :global(:is(:scope[data-ui-button-state~="variant=ghost"], :scope[data-ui-button-state~="variant=link"], :scope[data-ui-button-state~="variant=card"]):focus-visible:where([data-hn-ui-button])) {
     box-shadow: var(--ui-focus-halo);
   }
-  :scope:where(:scope):is(:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"]))) {
+  :global(:scope:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])):where([data-hn-ui-button])) {
     border-color: var(--ui-disabled-border);
     background-color: var(--ui-disabled-surface);
     color: var(--ui-disabled-text);
@@ -1229,28 +1239,30 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     box-shadow: none;
   }
 
-  :is(:scope[data-ui-button-state~="loading"], :scope[data-ui-button-state~="pending"]):focus-visible {
+  :global(:is(:scope[data-ui-button-state~="loading"], :scope[data-ui-button-state~="pending"]):focus-visible:where([data-hn-ui-button])) {
     box-shadow: var(--ui-focus-halo);
   }
-  :scope:where(:scope):is([data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"]))) {
+  :global(:scope[data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])):where([data-hn-ui-button])) {
     background-color: var(--ui-disabled-surface);
     border-color: transparent;
   }
   @media (pointer: coarse) {
-    :scope:where(:scope), :scope:where(:scope):is([data-ui-button-state~="size=sm"]) {
+    :global(:scope:where([data-hn-ui-button])),
+    :global(:scope[data-ui-button-state~="size=sm"]:where([data-hn-ui-button])) {
       min-block-size: var(--ui-control-min-block-size);
     }
   }
-  :scope:where(:scope):is(html[data-ui-input-modality="touch"]
-    [data-ui-button-state~="variant=link"]),
-  :scope:where(:scope):is(html[data-ui-input-modality="touch"] [data-ui-button-state~="size=xs"]) {
+  :global(html[data-ui-input-modality="touch"]
+    :scope[data-ui-button-state~="variant=link"]:where([data-hn-ui-button])),
+  :global(html[data-ui-input-modality="touch"]
+    :scope[data-ui-button-state~="size=xs"]:where([data-hn-ui-button])) {
     position: relative;
   }
 
-  :scope:where(:scope):is(html[data-ui-input-modality="touch"]
-    [data-ui-button-state~="variant=link"])::after,
-  :scope:where(:scope):is(html[data-ui-input-modality="touch"]
-    [data-ui-button-state~="size=xs"])::after {
+  :global(html[data-ui-input-modality="touch"]
+    :scope[data-ui-button-state~="variant=link"]:where([data-hn-ui-button])::after),
+  :global(html[data-ui-input-modality="touch"]
+    :scope[data-ui-button-state~="size=xs"]:where([data-hn-ui-button])::after) {
     position: absolute;
     inset: 50% auto auto 50%;
     inline-size: max(100%, var(--ui-control-min-block-size));
@@ -1258,7 +1270,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     transform: translate(-50%, -50%);
     content: "";
   }
-  :scope:where(:scope):is([data-ui-button-state~="variant=link"]) {
+  :global(:scope[data-ui-button-state~="variant=link"]:where([data-hn-ui-button])) {
     display: inline;
     min-block-size: 0;
     padding: 0;
@@ -1277,30 +1289,30 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="variant=link"]:hover:not(:disabled, [aria-disabled="true"])) {
+  :global(:scope[data-ui-button-state~="variant=link"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     color: var(--ui-button-link-hover-text, var(--ui-text-primary));
     text-decoration-color: currentColor;
     background: none;
     transform: none;
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="variant=link"]:active:not(:disabled, [aria-disabled="true"])) {
+  :global(:scope[data-ui-button-state~="variant=link"]:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
     background: none;
     transform: none;
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"]))) {
+  :global(:scope[data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])):where([data-hn-ui-button])) {
     background: none;
     border-color: transparent;
   }
 
-  :scope:where(:scope):is([data-ui-button-state~="variant=link"]:focus-visible) {
+  :global(:scope[data-ui-button-state~="variant=link"]:focus-visible:where([data-hn-ui-button])) {
     box-shadow: none;
     /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     outline-offset: var(--ui-focus-width);
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-button])) {
     display: none;
   }
 }