@threadlabs/looma 0.28.12 → 0.28.14

package/vue/UiMeter.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'
@@ -784,7 +784,7 @@ const guardedBinding7 = computed(() => {
 })
 checkHydratedRoot('span', 'ui-meter')
 
-/** 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',
@@ -802,6 +802,7 @@ const hostState = computed(() =>
   <span
     class="ui-meter"
     v-bind="nativeAttrs($attrs)"
+    data-hn
     :role="guarded"
     :aria-valuemin="guardedBinding"
     :aria-valuemax="guardedBinding2"
@@ -810,15 +811,15 @@ const hostState = computed(() =>
     :aria-label="guardedBinding5"
     :data-ui-meter-segments="guardedBinding6"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
-    :data-max="reflectedProp('max', 'max', checkedProps.max, undefined, false)"
-    :data-parts="reflectedProp('parts', 'parts', checkedProps.parts, undefined, false)"
-    :data-segments="reflectedProp('segments', 'segments', checkedProps.segments, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
-    :data-value-text="reflectedProp('valueText', 'value-text', checkedProps.valueText, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-meter-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-meter-prop-max="reflectedProp('max', 'max', checkedProps.max, undefined, false)"
+    :data-ui-meter-prop-parts="reflectedProp('parts', 'parts', checkedProps.parts, undefined, false)"
+    :data-ui-meter-prop-segments="reflectedProp('segments', 'segments', checkedProps.segments, undefined, false)"
+    :data-ui-meter-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-meter-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-meter-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    :data-ui-meter-prop-value-text="reflectedProp('valueText', 'value-text', checkedProps.valueText, undefined, false)"
+    :data-ui-meter-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-meter-state="hostState || undefined"
   ><span
       v-if="checkedProps.variant === 'progress'"
@@ -826,7 +827,7 @@ const hostState = computed(() =>
       :style="{ 'inline-size': guardedBinding7 }"
     ></span>
     <template v-if="checkedProps.variant === 'distribution'"><template
-        v-for="(part, index) in checkedProps.parts"
+        v-for="(part, index) in checkedProps.parts ?? []"
         :key="index"
       ><span
           v-if="part.value > 0 && (decimalSubtract(part.value, part.value)) === 0"
@@ -861,8 +862,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-meter) {
-  :scope:where(:scope) {
+@scope (.ui-meter) to ([data-hn]) {
+  :global(:scope) {
     --_meter-fill: var(--ui-text-muted);
 
     display: inline-block;
@@ -879,12 +880,12 @@ const hostState = computed(() =>
     outline: var(--ui-border-width) solid transparent;
   }
 
-  :scope:where(:scope):is([data-ui-meter-state~="size=sm"]) {
+  :global(:scope[data-ui-meter-state~="size=sm"]) {
     inline-size: var(--ui-meter-inline-size, 5rem);
     block-size: var(--ui-space-1);
   }
 
-  .fill {
+  :global(.fill) {
     display: block;
     block-size: 100%;
     background-color: var(--_meter-fill);
@@ -892,70 +893,70 @@ const hostState = computed(() =>
     box-shadow: inset 0 1px rgb(255 255 255 / 0.26), inset 0 -1px rgb(0 0 0 / 0.1);
   }
 
-  :scope:where(:scope):is([data-ui-meter-state~="tone=accent"]) {
+  :global(:scope[data-ui-meter-state~="tone=accent"]) {
     --_meter-fill: var(--ui-accent-solid);
   }
 
-  :scope:where(:scope):is([data-ui-meter-state~="tone=info"]) {
+  :global(:scope[data-ui-meter-state~="tone=info"]) {
     --_meter-fill: var(--ui-info-solid);
   }
 
-  :scope:where(:scope):is([data-ui-meter-state~="tone=success"]) {
+  :global(:scope[data-ui-meter-state~="tone=success"]) {
     --_meter-fill: var(--ui-success-solid);
   }
 
-  :scope:where(:scope):is([data-ui-meter-state~="tone=warning"]) {
+  :global(:scope[data-ui-meter-state~="tone=warning"]) {
     --_meter-fill: var(--ui-warning-solid);
   }
 
-  :scope:where(:scope):is([data-ui-meter-state~="tone=danger"]) {
+  :global(:scope[data-ui-meter-state~="tone=danger"]) {
     --_meter-fill: var(--ui-danger-solid);
   }
-  :scope:where(:scope):is([data-ui-meter-segments="2"]) {
+  :global(:scope[data-ui-meter-segments="2"]) {
     --_segments: 2;
   }
 
-  :scope:where(:scope):is([data-ui-meter-segments="3"]) {
+  :global(:scope[data-ui-meter-segments="3"]) {
     --_segments: 3;
   }
 
-  :scope:where(:scope):is([data-ui-meter-segments="4"]) {
+  :global(:scope[data-ui-meter-segments="4"]) {
     --_segments: 4;
   }
 
-  :scope:where(:scope):is([data-ui-meter-segments="5"]) {
+  :global(:scope[data-ui-meter-segments="5"]) {
     --_segments: 5;
   }
 
-  :scope:where(:scope):is([data-ui-meter-segments="6"]) {
+  :global(:scope[data-ui-meter-segments="6"]) {
     --_segments: 6;
   }
 
-  :scope:where(:scope):is([data-ui-meter-segments="7"]) {
+  :global(:scope[data-ui-meter-segments="7"]) {
     --_segments: 7;
   }
 
-  :scope:where(:scope):is([data-ui-meter-segments="8"]) {
+  :global(:scope[data-ui-meter-segments="8"]) {
     --_segments: 8;
   }
 
-  :scope:where(:scope):is([data-ui-meter-segments="9"]) {
+  :global(:scope[data-ui-meter-segments="9"]) {
     --_segments: 9;
   }
 
-  :scope:where(:scope):is([data-ui-meter-segments="10"]) {
+  :global(:scope[data-ui-meter-segments="10"]) {
     --_segments: 10;
   }
 
-  :scope:where(:scope):is([data-ui-meter-segments="11"]) {
+  :global(:scope[data-ui-meter-segments="11"]) {
     --_segments: 11;
   }
 
-  :scope:where(:scope):is([data-ui-meter-segments="12"]) {
+  :global(:scope[data-ui-meter-segments="12"]) {
     --_segments: 12;
   }
 
-  :scope:where(:scope):is([data-ui-meter-segments]) {
+  :global(:scope[data-ui-meter-segments]) {
     --_meter-gap: var(--ui-space-1);
     --_meter-period: calc((100% + var(--_meter-gap)) / var(--_segments));
     --_meter-segment: calc(var(--_meter-period) - var(--_meter-gap));
@@ -967,28 +968,28 @@ const hostState = computed(() =>
     );
   }
 
-  :scope:where(:scope):is([data-ui-meter-state~="size=sm"][data-ui-meter-segments]) {
+  :global(:scope[data-ui-meter-state~="size=sm"][data-ui-meter-segments]) {
     --_meter-gap: var(--ui-space-0-5);
   }
-  :scope:where(:scope):is([data-ui-meter-state~="variant=distribution"]) {
+  :global(:scope[data-ui-meter-state~="variant=distribution"]) {
     display: flex;
     inline-size: 100%;
     block-size: var(--ui-space-4);
     gap: var(--ui-space-0-5);
   }
 
-  :scope:where(:scope):is([data-ui-meter-state~="variant=distribution"][size="sm"]) {
+  :global(:scope[data-ui-meter-state~="variant=distribution"][size="sm"]) {
     block-size: var(--ui-space-2);
   }
 
-  .part {
+  :global(.part) {
     flex-basis: 0;
     min-inline-size: 0;
     block-size: 100%;
   }
 
   @media (forced-colors: active) {
-    .part {
+    :global(.part) {
       forced-color-adjust: none;
       background: CanvasText !important;
       outline: var(--ui-border-width) solid Canvas;
@@ -996,14 +997,14 @@ const hostState = computed(() =>
     }
   }
   @media (forced-colors: active) {
-    .fill {
+    :global(.fill) {
       forced-color-adjust: none;
       background: CanvasText;
     }
 
     /* The mask clips the track's outline, so each segment draws its own: the inset shadow draws the
        top and bottom edges and the gradient the ends. */
-    :scope:where(:scope):is([data-ui-meter-segments]) {
+    :global(:scope[data-ui-meter-segments]) {
       forced-color-adjust: none;
       background: repeating-linear-gradient(
         to right,
@@ -1015,7 +1016,7 @@ const hostState = computed(() =>
       box-shadow: inset 0 0 0 1px CanvasText;
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]) {
     display: none;
   }
 }

package/vue/UiNavItem.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, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -236,7 +236,7 @@ const guardedBinding = computed(() => {
 })
 checkHydratedRoot((checkedProps.value.as === 'a') ? 'a' : ('button'), 'ui-nav-item')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.variant && 'variant',
@@ -254,47 +254,57 @@ const hostState = computed(() =>
     v-if="checkedProps.as === 'a'"
     class="ui-nav-item"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-nav-item
     :href="checkedProps.href ?? undefined"
     :target="checkedProps.target ?? undefined"
     :rel="checkedProps.rel ?? undefined"
     :aria-current="guarded"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
-    :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
-    :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
-    :data-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
-    :data-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-nav-item-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-nav-item-prop-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
+    :data-ui-nav-item-prop-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
+    :data-ui-nav-item-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-ui-nav-item-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
+    :data-ui-nav-item-prop-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
+    :data-ui-nav-item-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-nav-item-state="hostState || undefined"
     ref="@html-next/root"
-  ><span class="indicator" aria-hidden="true"></span>
-    <span class="leading"><slot name="leading" /></span>
-    <span class="content"><span class="label"><slot /></span>
-      <span class="description"><slot name="description" /></span></span>
-    <span class="trailing"><slot name="trailing" /></span></a>
+  ><span class="indicator" aria-hidden="true" data-hn-ui-nav-item></span>
+    <span class="leading" data-hn-ui-nav-item><slot name="leading" /></span>
+    <span class="content" data-hn-ui-nav-item><span
+        class="label"
+        data-hn-ui-nav-item
+      ><slot /></span>
+      <span class="description" data-hn-ui-nav-item><slot name="description" /></span></span>
+    <span class="trailing" data-hn-ui-nav-item><slot name="trailing" /></span></a>
   <button
     v-else
     class="ui-nav-item"
     type="button"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-nav-item
     :aria-current="guardedBinding"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
-    :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
-    :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
-    :data-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
-    :data-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-nav-item-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-nav-item-prop-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
+    :data-ui-nav-item-prop-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
+    :data-ui-nav-item-prop-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-ui-nav-item-prop-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
+    :data-ui-nav-item-prop-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
+    :data-ui-nav-item-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-nav-item-state="hostState || undefined"
     ref="@html-next/root"
   >
-    <span class="indicator" aria-hidden="true"></span>
-    <span class="leading"><slot name="leading" /></span>
-    <span class="content"><span class="label"><slot /></span>
-      <span class="description"><slot name="description" /></span></span>
-    <span class="trailing"><slot name="trailing" /></span>
+    <span class="indicator" aria-hidden="true" data-hn-ui-nav-item></span>
+    <span class="leading" data-hn-ui-nav-item><slot name="leading" /></span>
+    <span class="content" data-hn-ui-nav-item><span
+        class="label"
+        data-hn-ui-nav-item
+      ><slot /></span>
+      <span class="description" data-hn-ui-nav-item><slot name="description" /></span></span>
+    <span class="trailing" data-hn-ui-nav-item><slot name="trailing" /></span>
   </button>
 </template>
 
@@ -337,8 +347,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-nav-item) {
-  :scope:where(:scope) {
+@scope (.ui-nav-item) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-nav-item])) {
     --_indicator-width: var(--ui-nav-item-indicator-width, var(--ui-accent-line-width));
     --_indicator-color: var(--ui-nav-item-indicator-color, var(--ui-accent));
     position: relative;
@@ -367,31 +377,31 @@ const hostState = computed(() =>
       color var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
-  :scope:where(:scope):is(:hover:not([aria-current])) {
+  :global(:scope:hover:not([aria-current]):where([data-hn-ui-nav-item])) {
     background: var(--_ui-selection-context-surface, var(--ui-nav-hover-surface));
     color: var(--ui-text-primary);
   }
-  :scope:where(:scope):is(:focus-visible) {
+  :global(:scope:focus-visible:where([data-hn-ui-nav-item])) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     outline-offset: calc(-1 * var(--ui-focus-width));
   }
 
-  :scope:where(:scope):is([aria-current]) {
+  :global(:scope[aria-current]:where([data-hn-ui-nav-item])) {
     background: var(
       --ui-nav-item-current-surface,
       var(--_ui-selection-context-surface, var(--ui-selection-surface))
     );
     color: var(--_ui-selection-context-text, var(--ui-selection-text));
   }
-  :scope:where(:scope):is([data-ui-nav-item-state~="variant=surface"]:is(:hover, [aria-current])) {
+  :global(:scope[data-ui-nav-item-state~="variant=surface"]:is(:hover, [aria-current]):where([data-hn-ui-nav-item])) {
     box-shadow: inset 0 0 0 var(--ui-border-width)
       var(--_ui-selection-context-border, var(--ui-selection-border));
   }
 
-  :scope:where(:scope):is([data-ui-nav-item-state~="variant=line"]) {
+  :global(:scope[data-ui-nav-item-state~="variant=line"]:where([data-hn-ui-nav-item])) {
     border-radius: 0;
   }
-  .indicator {
+  :global(.indicator:where([data-hn-ui-nav-item])) {
     position: absolute;
     inset-block: 0;
     inset-inline-start: 0;
@@ -399,23 +409,24 @@ const hostState = computed(() =>
     border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
   }
 
-  :scope[data-ui-nav-item-state~="variant=line"][aria-current] .indicator {
+  :global(:scope[data-ui-nav-item-state~="variant=line"][aria-current]
+    .indicator:where([data-hn-ui-nav-item])) {
     display: block;
   }
 
   @media (forced-colors: active) {
     /* System colors may erase the selected fill. Trace the complete surface, without
        creating an edge stripe; the stronger keyboard focus outline keeps precedence. */
-    :scope:where(:scope):is([data-ui-nav-item-state~="variant=surface"][aria-current]:not(:focus-visible)) {
+    :global(:scope[data-ui-nav-item-state~="variant=surface"][aria-current]:not(:focus-visible):where([data-hn-ui-nav-item])) {
       outline: var(--ui-border-width) solid Highlight;
       outline-offset: calc(-1 * var(--ui-border-width));
     }
-    .indicator {
+    :global(.indicator:where([data-hn-ui-nav-item])) {
       border-inline-start-color: Highlight;
     }
   }
 
-  .leading, .trailing {
+  :global(.leading:where([data-hn-ui-nav-item])), :global(.trailing:where([data-hn-ui-nav-item])) {
     display: inline-flex;
     flex: none;
     align-items: center;
@@ -425,7 +436,7 @@ const hostState = computed(() =>
     font-size: var(--ui-nav-icon-size);
   }
 
-  .content {
+  :global(.content:where([data-hn-ui-nav-item])) {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -433,7 +444,7 @@ const hostState = computed(() =>
     min-inline-size: 0;
   }
 
-  .label, .description {
+  :global(.label:where([data-hn-ui-nav-item])), :global(.description:where([data-hn-ui-nav-item])) {
     display: block;
     min-inline-size: 0;
     overflow: hidden;
@@ -441,36 +452,38 @@ const hostState = computed(() =>
     white-space: nowrap;
   }
 
-  .label {
+  :global(.label:where([data-hn-ui-nav-item])) {
     font-size: var(--ui-font-size-md);
     line-height: var(--ui-line-height-tight);
   }
 
-  .description {
+  :global(.description:where([data-hn-ui-nav-item])) {
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-sm);
     font-weight: var(--ui-font-normal);
     line-height: var(--ui-line-height-tight);
   }
 
-  :scope:where(:scope):is([data-ui-nav-item-state~="density=compact"]) {
+  :global(:scope[data-ui-nav-item-state~="density=compact"]:where([data-hn-ui-nav-item])) {
     min-block-size: var(--ui-nav-compact-min-block-size);
     padding-block: var(--ui-nav-compact-padding-block);
     padding-inline: var(--ui-nav-compact-padding-inline);
   }
-  :scope[data-ui-nav-item-state~="density=compact"] .label {
+  :global(:scope[data-ui-nav-item-state~="density=compact"] .label:where([data-hn-ui-nav-item])) {
     font-size: var(--ui-font-size-sm);
   }
 
   @media (pointer: coarse) {
-    :scope:where(:scope):is([data-ui-nav-item-state~="density=compact"]) {
+    :global(:scope[data-ui-nav-item-state~="density=compact"]:where([data-hn-ui-nav-item])) {
       min-block-size: var(--ui-control-min-block-size);
     }
   }
-  .leading:empty, .trailing:empty, .description:empty {
+  :global(.leading:empty:where([data-hn-ui-nav-item])),
+  :global(.trailing:empty:where([data-hn-ui-nav-item])),
+  :global(.description:empty:where([data-hn-ui-nav-item])) {
     display: none;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-nav-item])) {
     display: none;
   }
 }

package/vue/UiPageHeader.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('header', 'ui-page-header')
 
-/** 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',
@@ -54,15 +54,19 @@ const hostState = computed(() =>
   <header
     class="ui-page-header"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-page-header
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-page-header-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-ui-page-header-state="hostState || undefined"
   >
-    <span class="leading"><slot name="leading" /></span>
-    <span class="copy"><span class="eyebrow"><slot name="eyebrow" /></span>
-      <h1 class="title"><slot /></h1>
-      <span class="description"><slot name="description" /></span></span>
-    <span class="actions"><slot name="actions" /></span>
+    <span class="leading" data-hn-ui-page-header><slot name="leading" /></span>
+    <span class="copy" data-hn-ui-page-header><span class="eyebrow" data-hn-ui-page-header><slot
+          name="eyebrow"
+        /></span>
+      <h1 class="title" data-hn-ui-page-header><slot /></h1>
+      <span class="description" data-hn-ui-page-header><slot name="description" /></span></span>
+    <span class="actions" data-hn-ui-page-header><slot name="actions" /></span>
   </header>
 </template>
 
@@ -73,8 +77,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-page-header) {
-  :scope:where(:scope) {
+@scope (.ui-page-header) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-page-header])) {
     display: flex;
     flex-wrap: wrap;
     inline-size: 100%;
@@ -83,7 +87,7 @@ const hostState = computed(() =>
     min-inline-size: 0;
   }
 
-  .leading {
+  :global(.leading:where([data-hn-ui-page-header])) {
     display: inline-flex;
     flex: none;
     align-self: center;
@@ -91,7 +95,7 @@ const hostState = computed(() =>
     font-size: var(--ui-font-size-2xl);
   }
 
-  .copy {
+  :global(.copy:where([data-hn-ui-page-header])) {
     display: flex;
     flex: 1 1 16rem;
     flex-direction: column;
@@ -99,7 +103,7 @@ const hostState = computed(() =>
     min-inline-size: 0;
   }
 
-  .eyebrow {
+  :global(.eyebrow:where([data-hn-ui-page-header])) {
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-semibold);
@@ -107,7 +111,7 @@ const hostState = computed(() =>
     text-transform: uppercase;
   }
 
-  .title {
+  :global(.title:where([data-hn-ui-page-header])) {
     margin: 0;
     color: var(--ui-text-primary);
     font-size: var(--ui-font-size-2xl);
@@ -116,13 +120,13 @@ const hostState = computed(() =>
     overflow-wrap: anywhere;
   }
 
-  .description {
+  :global(.description:where([data-hn-ui-page-header])) {
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-md);
     line-height: var(--ui-line-height);
   }
 
-  .actions {
+  :global(.actions:where([data-hn-ui-page-header])) {
     display: inline-flex;
     flex: none;
     flex-wrap: wrap;
@@ -130,20 +134,23 @@ const hostState = computed(() =>
     gap: var(--ui-space-2);
   }
 
-  :scope:where(:scope):is([data-ui-page-header-state~="align=center"]) {
+  :global(:scope[data-ui-page-header-state~="align=center"]:where([data-hn-ui-page-header])) {
     flex-direction: column;
     text-align: center;
   }
 
-  :scope[data-ui-page-header-state~="align=center"] .copy {
+  :global(:scope[data-ui-page-header-state~="align=center"] .copy:where([data-hn-ui-page-header])) {
     align-items: center;
     flex-basis: auto;
   }
 
-  .leading:empty, .eyebrow:empty, .description:empty, .actions:empty {
+  :global(.leading:empty:where([data-hn-ui-page-header])),
+  :global(.eyebrow:empty:where([data-hn-ui-page-header])),
+  :global(.description:empty:where([data-hn-ui-page-header])),
+  :global(.actions:empty:where([data-hn-ui-page-header])) {
     display: none;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-page-header])) {
     display: none;
   }
 }