@threadlabs/looma 0.28.12 → 0.28.14

package/vue/UiBadge.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'
@@ -110,7 +110,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('span', 'ui-badge')
 
-/** 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',
@@ -130,14 +130,16 @@ const hostState = computed(() =>
   <span
     class="ui-badge"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-badge
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-shape="reflectedProp('shape', 'shape', checkedProps.shape, 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-badge-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
+    :data-ui-badge-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-badge-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-badge-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-badge-state="hostState || undefined"
-  ><span class="icon" aria-hidden="true"><slot name="icon" /></span>
-    <span class="label"><slot /></span></span>
+  ><span class="icon" aria-hidden="true" data-hn-ui-badge><slot name="icon" /></span>
+    <span class="label" data-hn-ui-badge><slot /></span></span>
 </template>
 
 <style scoped>
@@ -242,8 +244,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-badge) {
-  :scope:where(:scope) {
+@scope (.ui-badge) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-badge])) {
     --_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
     --_badge-text: var(--ui-text-secondary);
     /* Sit between the soft fill and its stronger theme ink. */
@@ -286,56 +288,57 @@ const hostState = computed(() =>
     line-height: var(--ui-badge-line-height, var(--ui-line-height-tight));
     white-space: nowrap;
   }
-  .label {
+  :global(.label:where([data-hn-ui-badge])) {
     display: block;
     min-inline-size: 0;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  .label:empty {
+  :global(.label:empty:where([data-hn-ui-badge])) {
     display: none;
   }
-  .icon {
+  :global(.icon:where([data-hn-ui-badge])) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: none;
   }
 
-  .icon:empty {
+  :global(.icon:empty:where([data-hn-ui-badge])) {
     display: none;
   }
 
-  .icon :slotted(svg) {
+  :global(.icon :where(:not([data-hn-ui-badge])):is(svg)) {
     display: block;
     inline-size: 1em;
     block-size: 1em;
     flex: none;
   }
-  .label :slotted(svg) {
+  :global(.label :where(:not([data-hn-ui-badge])):is(svg)) {
     inline-size: 1em;
     block-size: 1em;
     vertical-align: middle;
     margin-inline-end: var(--ui-space-1);
   }
 
-  .label:has(svg) {
+  :global(.label:has(svg):where([data-hn-ui-badge])) {
     text-box-trim: none;
   }
   @supports (text-box-trim: trim-both) {
-    :scope:where(:scope) {
+    :global(:scope:where([data-hn-ui-badge])) {
       display: inline-block;
       min-block-size: var(--ui-badge-min-block-size, 1.5rem);
       text-align: center;
       align-content: center;
       text-box-trim: none;
     }
-    :scope:where(:scope):is(:has(.icon:not(:empty))), :scope:where(:scope):is(:has(.label svg)) {
+    :global(:scope:has(.icon:not(:empty)):where([data-hn-ui-badge])),
+    :global(:scope:has(.label svg):where([data-hn-ui-badge])) {
       display: inline-flex;
       text-box-trim: none;
     }
-    .label:not(:has(svg)) {
+    :global(.label:not(:has(svg)):where([data-hn-ui-badge])) {
       text-box-trim: trim-both;
       text-box-edge: cap alphabetic;
       overflow-x: clip;
@@ -343,7 +346,7 @@ const hostState = computed(() =>
     }
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="size=xs"]) {
+  :global(:scope[data-ui-badge-state~="size=xs"]:where([data-hn-ui-badge])) {
     box-sizing: border-box;
     min-inline-size: 1rem;
     min-block-size: var(--ui-badge-min-block-size, 1rem);
@@ -354,76 +357,76 @@ const hostState = computed(() =>
     line-height: var(--ui-badge-line-height, 1);
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="size=sm"]) {
+  :global(:scope[data-ui-badge-state~="size=sm"]:where([data-hn-ui-badge])) {
     font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
     line-height: var(--ui-badge-line-height, 1);
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="tone=accent"]) {
+  :global(:scope[data-ui-badge-state~="tone=accent"]:where([data-hn-ui-badge])) {
     --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
     --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
     --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="tone=danger"]) {
+  :global(:scope[data-ui-badge-state~="tone=danger"]:where([data-hn-ui-badge])) {
     --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
     --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
     --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="tone=success"]) {
+  :global(:scope[data-ui-badge-state~="tone=success"]:where([data-hn-ui-badge])) {
     --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
     --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
     --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="tone=warning"]) {
+  :global(:scope[data-ui-badge-state~="tone=warning"]:where([data-hn-ui-badge])) {
     --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
     --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
     --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="tone=info"]) {
+  :global(:scope[data-ui-badge-state~="tone=info"]:where([data-hn-ui-badge])) {
     --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
     --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
     --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"]) {
+  :global(:scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"]:where([data-hn-ui-badge])) {
     --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
     --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
     --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"]) {
+  :global(:scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"]:where([data-hn-ui-badge])) {
     --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
     --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
     --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"]) {
+  :global(:scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"]:where([data-hn-ui-badge])) {
     --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
     --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
     --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"]) {
+  :global(:scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"]:where([data-hn-ui-badge])) {
     --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
     --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
     --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"]) {
+  :global(:scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"]:where([data-hn-ui-badge])) {
     --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
     --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
     --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
   }
-  :scope:where(:scope):is([data-ui-badge-state~="variant=solid"]) {
+  :global(:scope[data-ui-badge-state~="variant=solid"]:where([data-hn-ui-badge])) {
     --_badge-color-surface: var(--_badge-color-ink);
     --_badge-color-border: var(--_badge-color-ink);
     --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
   }
-  :scope:where(:scope):is([data-ui-badge-state~="variant=inverse"]) {
+  :global(:scope[data-ui-badge-state~="variant=inverse"]:where([data-hn-ui-badge])) {
     --_badge-color-surface: color-mix(
       in srgb,
       color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%,
@@ -449,7 +452,7 @@ const hostState = computed(() =>
     /* Paint each translucent layer once, including the border, without a bright double-painted ring. */
     background-clip: padding-box;
   }
-  :scope:where(:scope):is([data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"]) {
+  :global(:scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"]:where([data-hn-ui-badge])) {
     --_badge-color-surface: light-dark(
       color-mix(
         in srgb,
@@ -514,7 +517,7 @@ const hostState = computed(() =>
     );
     box-shadow: 0 1px 1px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.12));
   }
-  :scope:where(:scope):is([data-ui-badge-state~="variant=overlay"]) {
+  :global(:scope[data-ui-badge-state~="variant=overlay"]:where([data-hn-ui-badge])) {
     --_badge-outline-surface: var(
       --ui-badge-surface,
       color-mix(in srgb, currentColor 6%, transparent)
@@ -523,11 +526,11 @@ const hostState = computed(() =>
     border-color: var(--ui-badge-border, color-mix(in srgb, currentColor 20%, transparent));
     box-shadow: none;
   }
-  :scope:where(:scope):is([data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"]) {
+  :global(:scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"]:where([data-hn-ui-badge])) {
     color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="variant=outline"]) {
+  :global(:scope[data-ui-badge-state~="variant=outline"]:where([data-hn-ui-badge])) {
     --_badge-surface: var(--ui-surface-default);
     --_badge-border: var(--ui-border-strong);
     --_badge-text: var(--ui-text-secondary);
@@ -536,31 +539,31 @@ const hostState = computed(() =>
     --_badge-color-border: var(--_badge-color-ink);
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"]) {
+  :global(:scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"]:where([data-hn-ui-badge])) {
     --_badge-border: var(--ui-accent-solid);
     --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"]) {
+  :global(:scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"]:where([data-hn-ui-badge])) {
     --_badge-border: var(--ui-danger-solid);
     --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"]) {
+  :global(:scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"]:where([data-hn-ui-badge])) {
     --_badge-border: var(--ui-success-solid);
     --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"]) {
+  :global(:scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"]:where([data-hn-ui-badge])) {
     --_badge-border: var(--ui-warning-solid);
     --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"]) {
+  :global(:scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"]:where([data-hn-ui-badge])) {
     --_badge-border: var(--ui-info-solid);
     --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
   }
-  :scope:where(:scope):is([data-ui-badge-state~="shape=square"]) {
+  :global(:scope[data-ui-badge-state~="shape=square"]:where([data-hn-ui-badge])) {
     --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
     display: inline-flex;
     box-sizing: border-box;
@@ -574,31 +577,33 @@ const hostState = computed(() =>
     text-box-trim: none;
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"]) {
+  :global(:scope[data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"]:where([data-hn-ui-badge])) {
     --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=lg"]) {
+  :global(:scope[data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=lg"]:where([data-hn-ui-badge])) {
     --_badge-square-size: var(
       --ui-badge-square-size,
       calc(var(--ui-space-4) * 2 + var(--ui-space-2))
     );
   }
 
-  :scope[data-ui-badge-state~="shape=square"] .label {
+  :global(:scope[data-ui-badge-state~="shape=square"] .label:where([data-hn-ui-badge])) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
 
-  :scope[data-ui-badge-state~="shape=square"] .label :slotted(svg) {
+  :global(:scope[data-ui-badge-state~="shape=square"]
+    .label
+    :where(:not([data-hn-ui-badge])):is(svg)) {
     margin-inline-end: 0;
   }
 
-  :scope[data-ui-badge-state~="shape=square"] .label:empty {
+  :global(:scope[data-ui-badge-state~="shape=square"] .label:empty:where([data-hn-ui-badge])) {
     display: none;
   }
-  :scope:where(:scope):is([data-ui-badge-state~="shape=circle"]) {
+  :global(:scope[data-ui-badge-state~="shape=circle"]:where([data-hn-ui-badge])) {
     --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
     display: inline-flex;
     flex: none;
@@ -611,19 +616,19 @@ const hostState = computed(() =>
     text-box-trim: none;
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=sm"][data-ui-badge-state~="variant=overlay"]) {
+  :global(:scope[data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=sm"][data-ui-badge-state~="variant=overlay"]:where([data-hn-ui-badge])) {
     --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) + var(--ui-space-1)));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"]) {
+  :global(:scope[data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"]:where([data-hn-ui-badge])) {
     --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=lg"]) {
+  :global(:scope[data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=lg"]:where([data-hn-ui-badge])) {
     --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) * 2));
   }
 
-  :scope[data-ui-badge-state~="shape=circle"] .label {
+  :global(:scope[data-ui-badge-state~="shape=circle"] .label:where([data-hn-ui-badge])) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -631,23 +636,27 @@ const hostState = computed(() =>
     text-box-trim: none;
   }
 
-  :scope[data-ui-badge-state~="shape=circle"] .label :slotted(svg) {
+  :global(:scope[data-ui-badge-state~="shape=circle"]
+    .label
+    :where(:not([data-hn-ui-badge])):is(svg)) {
     margin-inline-end: 0;
   }
 
-  :scope[data-ui-badge-state~="shape=circle"] .label:empty {
+  :global(:scope[data-ui-badge-state~="shape=circle"] .label:empty:where([data-hn-ui-badge])) {
     display: none;
   }
   @supports (text-box-trim: trim-both) {
-    :scope[data-ui-badge-state~="shape=circle"] .label:not(:has(svg)),
-    :scope[data-ui-badge-state~="shape=square"] .label:not(:has(svg)) {
+    :global(:scope[data-ui-badge-state~="shape=circle"]
+      .label:not(:has(svg)):where([data-hn-ui-badge])),
+    :global(:scope[data-ui-badge-state~="shape=square"]
+      .label:not(:has(svg)):where([data-hn-ui-badge])) {
       display: block;
       text-box-trim: trim-both;
       text-box-edge: cap alphabetic;
       overflow: visible;
     }
   }
-  :scope:where(:scope):is([data-ui-badge-state~="shape=dot"]) {
+  :global(:scope[data-ui-badge-state~="shape=dot"]:where([data-hn-ui-badge])) {
     position: relative;
     box-sizing: border-box;
     flex: none;
@@ -660,7 +669,7 @@ const hostState = computed(() =>
     text-box-trim: none;
   }
 
-  :scope[data-ui-badge-state~="shape=dot"] .label {
+  :global(:scope[data-ui-badge-state~="shape=dot"] .label:where([data-hn-ui-badge])) {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -668,7 +677,7 @@ const hostState = computed(() =>
     clip-path: inset(50%);
     white-space: nowrap;
   }
-  :scope:where(:scope):is([data-ui-badge-state~="shape=tag"]) {
+  :global(:scope[data-ui-badge-state~="shape=tag"]:where([data-hn-ui-badge])) {
     --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
     position: relative;
@@ -688,7 +697,7 @@ const hostState = computed(() =>
     );
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="shape=tag"])::before {
+  :global(:scope[data-ui-badge-state~="shape=tag"]:where([data-hn-ui-badge])::before) {
     content: "";
     position: absolute;
     inset: 0;
@@ -704,11 +713,11 @@ const hostState = computed(() =>
     pointer-events: none;
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="shape=tag"][data-ui-badge-state~="variant=inverse"]) {
+  :global(:scope[data-ui-badge-state~="shape=tag"][data-ui-badge-state~="variant=inverse"]:where([data-hn-ui-badge])) {
     background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-text)));
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="shape=tag"]:dir(rtl)) {
+  :global(:scope[data-ui-badge-state~="shape=tag"]:dir(rtl):where([data-hn-ui-badge])) {
     padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
     padding-inline-start: calc(
       var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
@@ -716,28 +725,28 @@ const hostState = computed(() =>
     clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
   }
 
-  :scope:where(:scope):is([data-ui-badge-state~="shape=tag"]:dir(rtl))::before {
+  :global(:scope[data-ui-badge-state~="shape=tag"]:dir(rtl):where([data-hn-ui-badge])::before) {
     clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
   }
 
   @media (forced-colors: active) {
-    :scope:where(:scope):is([data-ui-badge-state~="shape=dot"]) {
+    :global(:scope[data-ui-badge-state~="shape=dot"]:where([data-hn-ui-badge])) {
       forced-color-adjust: none;
       border-color: CanvasText;
       background: CanvasText;
     }
 
-    :scope:where(:scope):is([data-ui-badge-state~="shape=tag"]) {
+    :global(:scope[data-ui-badge-state~="shape=tag"]:where([data-hn-ui-badge])) {
       forced-color-adjust: none;
       background: CanvasText;
       color: CanvasText;
     }
 
-    :scope:where(:scope):is([data-ui-badge-state~="shape=tag"])::before {
+    :global(:scope[data-ui-badge-state~="shape=tag"]:where([data-hn-ui-badge])::before) {
       background: Canvas;
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-badge])) {
     display: none;
   }
 }

package/vue/UiBreadcrumbItem.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'
@@ -76,7 +76,7 @@ const guarded = computed(() => {
 })
 checkHydratedRoot('li', 'ui-breadcrumb-item')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.current && 'current',
@@ -88,16 +88,18 @@ const hostState = computed(() =>
   <li
     class="ui-breadcrumb-item"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-breadcrumb-item
     :aria-current="guarded"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
+    :data-ui-breadcrumb-item-prop-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
     :data-ui-breadcrumb-item-state="hostState || undefined"
   >
-    <span class="separator" aria-hidden="true"><UiIcon
+    <span class="separator" aria-hidden="true" data-hn-ui-breadcrumb-item><UiIcon
         class="ui-icon"
         name="chevron-right"
       /></span>
-    <span class="content"><slot /></span>
+    <span class="content" data-hn-ui-breadcrumb-item><slot /></span>
   </li>
 </template>
 
@@ -107,8 +109,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-breadcrumb-item) to (.ui-icon) {
-  :scope:where(:scope) {
+@scope (.ui-breadcrumb-item) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-breadcrumb-item])) {
     display: inline-flex;
     align-items: center;
     gap: var(--ui-space-2);
@@ -116,24 +118,24 @@ const hostState = computed(() =>
     margin: 0;
   }
 
-  .separator {
+  :global(.separator:where([data-hn-ui-breadcrumb-item])) {
     display: inline-flex;
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-sm);
   }
 
-  :scope:first-child .separator {
+  :global(:scope:first-child .separator:where([data-hn-ui-breadcrumb-item])) {
     display: none;
   }
 
-  .content {
+  :global(.content:where([data-hn-ui-breadcrumb-item])) {
     display: inline-flex;
     align-items: center;
     gap: var(--ui-space-1);
     min-inline-size: 0;
   }
 
-  .content > :slotted(a) {
+  :global(.content > :where(:not([data-hn-ui-breadcrumb-item])):is(a)) {
     display: inline-flex;
     align-items: center;
     gap: var(--ui-space-1);
@@ -141,16 +143,17 @@ const hostState = computed(() =>
     text-decoration: none;
   }
 
-  .content > :slotted(a:hover) {
+  :global(.content > :where(:not([data-hn-ui-breadcrumb-item])):is(a:hover)) {
     color: var(--ui-text-primary);
     text-decoration: underline;
   }
 
-  :scope[data-ui-breadcrumb-item-state~="current"] .content {
+  :global(:scope[data-ui-breadcrumb-item-state~="current"]
+    .content:where([data-hn-ui-breadcrumb-item])) {
     color: var(--ui-text-primary);
     font-weight: var(--ui-font-medium);
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-breadcrumb-item])) {
     display: none;
   }
 }

package/vue/UiBreadcrumbs.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -44,11 +44,13 @@ checkHydratedRoot('nav', 'ui-breadcrumbs')
   <nav
     class="ui-breadcrumbs"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-breadcrumbs
     :aria-label="checkedProps.label ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-breadcrumbs-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
   >
-    <ol role="list"><slot /></ol>
+    <ol role="list" data-hn-ui-breadcrumbs><slot /></ol>
   </nav>
 </template>
 
@@ -58,15 +60,15 @@ checkHydratedRoot('nav', 'ui-breadcrumbs')
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-breadcrumbs) {
-  :scope:where(:scope) {
+@scope (.ui-breadcrumbs) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-breadcrumbs])) {
     display: block;
     min-inline-size: 0;
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-sm);
   }
 
-  ol {
+  :global(ol:where([data-hn-ui-breadcrumbs])) {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -75,7 +77,7 @@ checkHydratedRoot('nav', 'ui-breadcrumbs')
     padding: 0;
     list-style: none;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-breadcrumbs])) {
     display: none;
   }
 }