@threadlabs/looma 0.28.12 → 0.28.14

package/vue/UiIcon.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'
@@ -425,8 +425,9 @@ checkHydratedRoot('span', 'ui-icon')
     class="ui-icon"
     aria-hidden="true"
     v-bind="nativeAttrs($attrs)"
+    data-hn
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
+    :data-ui-icon-prop-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
   ><svg
       viewBox="0 0 24 24"
       fill="none"
@@ -480,8 +481,8 @@ checkHydratedRoot('span', 'ui-icon')
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-icon) {
-  :scope:where(:scope) {
+@scope (.ui-icon) to ([data-hn]) {
+  :global(:scope) {
     /* Hooks do not inherit, so the svg reads the stroke from the root. A Looma component that
        sizes the icons it renders sets --_ui-default-icon-*, which the icon's own hooks override. */
     --_ui-icon-stroke-width: var(--ui-icon-stroke-width, var(--_ui-default-icon-stroke-width));
@@ -492,12 +493,12 @@ checkHydratedRoot('span', 'ui-icon')
     block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
   }
 
-  svg {
+  :global(svg) {
     inline-size: 100%;
     block-size: 100%;
     stroke-width: var(--_ui-icon-stroke-width, 2);
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]) {
     display: none;
   }
 }

package/vue/UiIconButton.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'
@@ -263,7 +263,7 @@ const guarded = computed(() => {
 })
 checkHydratedRoot('button', 'ui-icon-button')
 
-/** 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',
@@ -323,27 +323,30 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     class="ui-icon-button"
     type="button"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-icon-button
     :disabled="checkedProps.disabled ?? undefined"
     :aria-label="checkedProps.label ?? undefined"
+    :data-match-button="checkedProps.matchButton ? '' : undefined"
     :aria-disabled="guarded"
     :aria-busy="checkedProps.loading || checkedProps.pending"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-anticipatory="reflectedProp('anticipatory', 'anticipatory', checkedProps.anticipatory, undefined, false)"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-guide="reflectedProp('guide', 'guide', checkedProps.guide, undefined, false)"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
-    :data-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
-    :data-match-button="reflectedProp('matchButton', 'match-button', checkedProps.matchButton, undefined, true)"
-    :data-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
-    :data-round="reflectedProp('round', 'round', checkedProps.round, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-icon-button-prop-anticipatory="reflectedProp('anticipatory', 'anticipatory', checkedProps.anticipatory, undefined, false)"
+    :data-ui-icon-button-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-icon-button-prop-guide="reflectedProp('guide', 'guide', checkedProps.guide, undefined, false)"
+    :data-ui-icon-button-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-icon-button-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
+    :data-ui-icon-button-prop-match-button="reflectedProp('matchButton', 'match-button', checkedProps.matchButton, undefined, false)"
+    :data-ui-icon-button-prop-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
+    :data-ui-icon-button-prop-round="reflectedProp('round', 'round', checkedProps.round, undefined, false)"
+    :data-ui-icon-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-icon-button-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-icon-button-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-icon-button-state="hostState || undefined"
     ref="root"
   >
     <UiSpinner v-if="checkedProps.loading || checkedProps.pending" class="ui-spinner" size="sm" />
-    <span class="content"><slot /></span>
+    <span class="content" data-hn-ui-icon-button><slot /></span>
   </button>
 </template>
 
@@ -442,8 +445,8 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-icon-button) to (.ui-spinner) {
-  :scope:where(:scope) {
+@scope (.ui-icon-button) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-icon-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. */
@@ -470,11 +473,11 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     color: var(--ui-text-secondary);
   }
 
-  :scope:where(:scope):is(:dir(rtl)) {
+  :global(:scope:dir(rtl):where([data-hn-ui-icon-button])) {
     --_ui-action-start: -1px;
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="tone=accent"]) {
+  :global(:scope[data-ui-icon-button-state~="tone=accent"]:where([data-hn-ui-icon-button])) {
     --_icon-button-border: var(--ui-accent-solid);
     --_icon-button-hover-border: var(--ui-accent-hover);
     --_icon-button-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
@@ -485,17 +488,17 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     );
     color: var(--_icon-button-text);
   }
-  :scope:where(:scope):is([data-ui-icon-button-state~="tone=neutral"]) {
+  :global(:scope[data-ui-icon-button-state~="tone=neutral"]:where([data-hn-ui-icon-button])) {
     --_icon-button-solid-surface: var(--ui-text-primary);
     --_icon-button-solid-hover-surface: var(--ui-text-primary);
     --_icon-button-solid-text: var(--ui-surface-default);
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="anticipatory"]) {
+  :global(:scope[data-ui-icon-button-state~="anticipatory"]:where([data-hn-ui-icon-button])) {
     position: relative;
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="anticipatory"])::before {
+  :global(:scope[data-ui-icon-button-state~="anticipatory"]:where([data-hn-ui-icon-button])::before) {
     content: "";
     position: absolute;
     inset: 50% auto auto 50%;
@@ -510,17 +513,18 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     pointer-events: none;
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="anticipatory"][data-ui-icon-button-state~="guide=bar"])::before {
+  :global(:scope[data-ui-icon-button-state~="anticipatory"][data-ui-icon-button-state~="guide=bar"]:where([data-hn-ui-icon-button])::before) {
     inline-size: 2px;
     block-size: 20px;
     background: var(--ui-border-strong);
     opacity: 1;
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="anticipatory"]:disabled)::before {
+  :global(:scope[data-ui-icon-button-state~="anticipatory"]:disabled:where([data-hn-ui-icon-button])::before) {
     opacity: 0;
   }
-  :scope[data-ui-icon-button-state~="anticipatory"] .content {
+  :global(:scope[data-ui-icon-button-state~="anticipatory"]
+    .content:where([data-hn-ui-icon-button])) {
     opacity: 1;
     transform: scale(1);
     transition:
@@ -529,25 +533,25 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   @media (hover: hover) and (pointer: fine) {
-    :scope:where(:scope):is([data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)) {
+    :global(:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button])) {
       border-color: transparent;
       background-color: transparent;
       box-shadow: none;
     }
 
-    :scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
-      .content {
+    :global(:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
+      .content:where([data-hn-ui-icon-button])) {
       opacity: 0;
       transform: scale(0.65);
       transition-duration: var(--ui-motion-fast);
     }
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="anticipatory"]:is(:scope[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible))::before {
+  :global(:scope[data-ui-icon-button-state~="anticipatory"]:is(:scope[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button])::before) {
     opacity: 0;
   }
 
-  :scope:where(:scope) {
+  :global(:scope:where([data-hn-ui-icon-button])) {
     /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
     --_size: 2rem;
     appearance: none;
@@ -574,16 +578,16 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   @media (hover: none), (pointer: coarse) {
-    :scope:where(:scope):is([data-ui-icon-button-state~="anticipatory"])::before {
+    :global(:scope[data-ui-icon-button-state~="anticipatory"]:where([data-hn-ui-icon-button])::before) {
       opacity: 0;
     }
   }
   @media (pointer: coarse) {
-    :scope:where(:scope) {
+    :global(:scope:where([data-hn-ui-icon-button])) {
       position: relative;
     }
 
-    :scope:where(:scope)::after {
+    :global(:scope:where([data-hn-ui-icon-button])::after) {
       content: "";
       position: absolute;
       inset: 50% auto auto 50%;
@@ -593,11 +597,11 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     }
   }
 
-  :scope:where(:scope):is(html[data-ui-input-modality="touch"] *) {
+  :global(html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])) {
     position: relative;
   }
 
-  :scope:where(:scope):is(html[data-ui-input-modality="touch"] *)::after {
+  :global(html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::after) {
     content: "";
     position: absolute;
     inset: 50% auto auto 50%;
@@ -606,7 +610,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     transform: translate(-50%, -50%);
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="size=sm"]) {
+  :global(:scope[data-ui-icon-button-state~="size=sm"]:where([data-hn-ui-icon-button])) {
     --_size: 1.75rem;
     inline-size: var(--ui-icon-button-size, var(--_size));
     block-size: var(--ui-icon-button-size, var(--_size));
@@ -614,29 +618,29 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     min-block-size: var(--ui-icon-button-size, var(--_size));
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="size=lg"]) {
+  :global(:scope[data-ui-icon-button-state~="size=lg"]:where([data-hn-ui-icon-button])) {
     --_size: 2.5rem;
     inline-size: var(--ui-icon-button-size, var(--_size));
     block-size: var(--ui-icon-button-size, var(--_size));
     min-inline-size: var(--ui-icon-button-size, var(--_size));
     min-block-size: var(--ui-icon-button-size, var(--_size));
   }
-  :scope:where(:scope):is([data-ui-icon-button-state~="matchButton"]) {
+  :global(:scope[data-ui-icon-button-state~="matchButton"]:where([data-hn-ui-icon-button])) {
     --_size: var(--ui-control-size-md);
     block-size: auto;
     align-self: stretch;
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=sm"]) {
+  :global(:scope[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=sm"]:where([data-hn-ui-icon-button])) {
     --_size: var(--ui-control-size-sm);
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=lg"]) {
+  :global(:scope[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=lg"]:where([data-hn-ui-icon-button])) {
     --_size: var(--ui-control-size-lg);
   }
 
   @media (pointer: coarse) {
-    :scope:where(:scope):is([data-ui-icon-button-state~="matchButton"]) {
+    :global(:scope[data-ui-icon-button-state~="matchButton"]:where([data-hn-ui-icon-button])) {
       inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
       min-inline-size: max(
         var(--ui-icon-button-size, var(--_size)),
@@ -649,11 +653,11 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     }
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="round"]) {
+  :global(:scope[data-ui-icon-button-state~="round"]:where([data-hn-ui-icon-button])) {
     border-radius: var(--ui-radius-round);
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="variant=outline"]) {
+  :global(:scope[data-ui-icon-button-state~="variant=outline"]:where([data-hn-ui-icon-button])) {
     border-color: var(
       --ui-icon-button-border,
       var(--_icon-button-border, var(--ui-control-border, var(--ui-border-strong)))
@@ -667,7 +671,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="variant=solid"]) {
+  :global(:scope[data-ui-icon-button-state~="variant=solid"]:where([data-hn-ui-icon-button])) {
     background-color: var(
       --ui-icon-button-solid-surface,
       var(--_icon-button-solid-surface, var(--ui-accent-solid))
@@ -683,7 +687,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     );
   }
 
-  :scope:where(:scope):is(:hover:enabled:not([aria-disabled="true"])) {
+  :global(:scope:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
     /* Derived from the text colour so the ghost hover shows on any background. */
     background-color: var(
       --ui-icon-button-hover-surface,
@@ -692,29 +696,29 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"])) {
+  :global(:scope[data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
     border-color: var(
       --ui-icon-button-hover-border,
       var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)))
     );
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"])) {
+  :global(:scope[data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
     background-color: var(
       --ui-icon-button-solid-hover-surface,
       var(--_icon-button-solid-hover-surface, var(--ui-accent-hover))
     );
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"]:hover:enabled:not([aria-disabled="true"])),
-  :scope:where(:scope):is([data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=neutral"]:hover:enabled:not([aria-disabled="true"])) {
+  :global(:scope[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])),
+  :global(:scope[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=neutral"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
     color: var(
       --ui-icon-button-solid-text,
       var(--_icon-button-solid-text, var(--ui-text-on-accent))
     );
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"])) {
+  :global(:scope[data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
     background-color: var(
       --ui-icon-button-active-surface,
       color-mix(in srgb, currentColor 16%, transparent)
@@ -722,7 +726,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
     box-shadow: var(--ui-pressed);
   }
-  :scope:where(:scope):is([data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled) {
+  :global(:scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:where([data-hn-ui-icon-button])) {
     background-color: var(
       --ui-icon-button-active-surface,
       color-mix(in srgb, currentColor 12%, var(--ui-surface-default))
@@ -731,69 +735,70 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     box-shadow: var(--ui-pressed);
   }
 
-  :scope:where(:scope):is(:active:enabled:not([aria-disabled="true"])) {
+  :global(:scope:active:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
     scale: var(--ui-icon-button-active-scale, 0.96);
   }
 
-  :is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"]) {
+  :global(:is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"]):where([data-hn-ui-icon-button])) {
     cursor: progress;
   }
 
-  .content {
+  :global(.content:where([data-hn-ui-icon-button])) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
 
-  :is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"])
-    .content {
+  :global(:is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"])
+    .content:where([data-hn-ui-icon-button])) {
     display: none;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    :scope[data-ui-icon-button-state~="anticipatory"] .content {
+    :global(:scope[data-ui-icon-button-state~="anticipatory"]
+      .content:where([data-hn-ui-icon-button])) {
       transition: none;
     }
   }
 
-  :scope:where(:scope):is(:focus-visible) {
+  :global(:scope:focus-visible:where([data-hn-ui-icon-button])) {
     outline: none;
     box-shadow: var(--ui-focus-halo);
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="variant=outline"]:focus-visible) {
+  :global(:scope[data-ui-icon-button-state~="variant=outline"]:focus-visible:where([data-hn-ui-icon-button])) {
     box-shadow:
       var(--ui-action-shadow, var(--_ui-action-shadow)),
       var(--ui-focus-halo);
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="variant=solid"]:focus-visible) {
+  :global(:scope[data-ui-icon-button-state~="variant=solid"]:focus-visible:where([data-hn-ui-icon-button])) {
     box-shadow:
       var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
       var(--ui-focus-halo);
   }
 
-  :scope:where(:scope):is(:is(:scope[data-ui-icon-button-state~="variant=outline"], :scope[data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"])) {
+  :global(:scope:is(:scope[data-ui-icon-button-state~="variant=outline"], :scope[data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
     background-image: none;
     box-shadow: var(--ui-pressed);
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible) {
+  :global(:scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible:where([data-hn-ui-icon-button])) {
     box-shadow:
       var(--ui-pressed),
       var(--ui-focus-halo);
   }
 
   @media (forced-colors: active) {
-    :scope:where(:scope):is([data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled) {
+    :global(:scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:where([data-hn-ui-icon-button])) {
       outline: var(--ui-focus-width) solid Highlight;
       outline-offset: calc(-2 * var(--ui-focus-width));
     }
-    :scope:where(:scope):is([data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible) {
+    :global(:scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible:where([data-hn-ui-icon-button])) {
       outline-offset: var(--ui-focus-width);
     }
   }
-  :scope:where(:scope):is(:disabled) {
+  :global(:scope:disabled:where([data-hn-ui-icon-button])) {
     border-color: var(--ui-disabled-border);
     background-color: var(--ui-disabled-surface);
     color: var(--ui-disabled-text);
@@ -804,11 +809,11 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     background-image: none;
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="variant=ghost"]:disabled) {
+  :global(:scope[data-ui-icon-button-state~="variant=ghost"]:disabled:where([data-hn-ui-icon-button])) {
     border-color: transparent;
   }
 
-  :scope:where(:scope) {
+  :global(:scope:where([data-hn-ui-icon-button])) {
     --_icon-button-icon-default: var(--ui-icon-size-md);
     /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
        defaults, which its own --ui-icon-* hooks still override. */
@@ -816,21 +821,21 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="size=sm"]) {
+  :global(:scope[data-ui-icon-button-state~="size=sm"]:where([data-hn-ui-icon-button])) {
     --_icon-button-icon-default: var(--ui-icon-size-sm);
   }
 
-  :scope:where(:scope):is([data-ui-icon-button-state~="size=lg"]) {
+  :global(:scope[data-ui-icon-button-state~="size=lg"]:where([data-hn-ui-icon-button])) {
     --_icon-button-icon-default: var(--ui-icon-size-lg);
   }
 
-  :slotted(svg) {
+  :global(:where(:not([data-hn-ui-icon-button])):is(svg)) {
     inline-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
     block-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
     flex-shrink: 0;
     stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-icon-button])) {
     display: none;
   }
 }