@threadlabs/looma 0.28.13 → 0.28.15

package/vue/UiDisclosure.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -235,7 +235,7 @@ provide('html-next:ui-disclosure:headingRole', headingRole)
 provide('html-next:ui-disclosure:headingAriaLevel', headingAriaLevel)
 checkHydratedRoot('div', 'ui-disclosure')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.density && 'density',
@@ -317,21 +317,24 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   <div
     class="ui-disclosure"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-disclosure
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
-    :data-heading-level="reflectedProp('headingLevel', 'heading-level', checkedProps.headingLevel, undefined, false)"
-    :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
-    :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
-    :data-required-open="reflectedProp('requiredOpen', 'required-open', checkedProps.requiredOpen, undefined, false)"
-    :data-summary="reflectedProp('summary', 'summary', checkedProps.summary, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-disclosure-prop-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
+    :data-ui-disclosure-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-disclosure-prop-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
+    :data-ui-disclosure-prop-heading-level="reflectedProp('headingLevel', 'heading-level', checkedProps.headingLevel, undefined, false)"
+    :data-ui-disclosure-prop-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
+    :data-ui-disclosure-prop-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
+    :data-ui-disclosure-prop-required-open="reflectedProp('requiredOpen', 'required-open', checkedProps.requiredOpen, undefined, false)"
+    :data-ui-disclosure-prop-summary="reflectedProp('summary', 'summary', checkedProps.summary, undefined, false)"
+    :data-ui-disclosure-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-disclosure-state="hostState || undefined"
     ref="root"
   >
     <div
       class="heading"
+      data-hn-ui-disclosure
       :role="guarded"
       :aria-level="headingAriaLevel ?? undefined"
       ref="headingElement"
@@ -339,20 +342,23 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
       <button
         class="trigger"
         type="button"
+        data-hn-ui-disclosure
         :aria-controls="contentId"
         :aria-expanded="internalOpen"
         :disabled="checkedProps.disabled ?? undefined"
         ref="triggerElement"
       >
-        <span class="leading"><slot name="leading" /></span>
-        <span class="summary"><slot name="summary">{{ checkedProps.summary }}</slot></span>
-        <span class="indicator" aria-hidden="true"><slot name="indicator"><span
-              class="chevron"
-            ></span></slot></span>
+        <span class="leading" data-hn-ui-disclosure><slot name="leading" /></span>
+        <span class="summary" data-hn-ui-disclosure><slot name="summary">{{
+            checkedProps.summary
+          }}</slot></span>
+        <span class="indicator" aria-hidden="true" data-hn-ui-disclosure><slot
+            name="indicator"
+          ><span class="chevron" data-hn-ui-disclosure></span></slot></span>
       </button>
     </div>
-    <div class="panel" :id="contentId" ref="panelElement">
-      <div class="panel-inner"><slot /></div>
+    <div class="panel" data-hn-ui-disclosure :id="contentId" ref="panelElement">
+      <div class="panel-inner" data-hn-ui-disclosure><slot /></div>
     </div>
   </div>
 </template>
@@ -382,8 +388,8 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-disclosure) {
-  :scope:where(:scope) {
+@scope (.ui-disclosure) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-disclosure])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-disclosure-trigger-min-block-size: var(--ui-disclosure-trigger-min-block-size);
     --_ui-disclosure-trigger-padding-block: var(--ui-disclosure-trigger-padding-block);
@@ -394,12 +400,12 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
     --_trigger-padding-inline: var(--ui-space-3);
   }
 
-  :scope:where(:scope):is([data-ui-disclosure-state~="density=compact"]) {
+  :global(:scope[data-ui-disclosure-state~="density=compact"]:where([data-hn-ui-disclosure])) {
     --_trigger-min-block-size: var(--ui-control-size-sm);
     --_trigger-padding-block: var(--ui-space-1);
     --_trigger-padding-inline: var(--ui-space-2);
   }
-  :scope:where(:scope) {
+  :global(:scope:where([data-hn-ui-disclosure])) {
     display: block;
     inline-size: 100%;
     overflow: clip;
@@ -407,7 +413,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
     color: var(--ui-text-primary);
   }
 
-  .trigger {
+  :global(.trigger:where([data-hn-ui-disclosure])) {
     display: flex;
     gap: var(--ui-space-3);
     align-items: center;
@@ -426,41 +432,43 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
     transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
-  .trigger:hover:not(:disabled) {
+  :global(.trigger:hover:not(:disabled):where([data-hn-ui-disclosure])) {
     background: color-mix(in srgb, currentColor 6%, transparent);
   }
-  .trigger:focus-visible {
+  :global(.trigger:focus-visible:where([data-hn-ui-disclosure])) {
     outline: none;
     box-shadow: inset 0 0 0 var(--ui-focus-width)
       color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
   }
-  .trigger:disabled {
+  :global(.trigger:disabled:where([data-hn-ui-disclosure])) {
     color: var(--ui-disabled-text);
     cursor: not-allowed;
   }
 
-  .summary {
+  :global(.summary:where([data-hn-ui-disclosure])) {
     flex: 1;
     min-inline-size: 0;
   }
 
-  .leading, .indicator {
+  :global(.leading:where([data-hn-ui-disclosure])),
+  :global(.indicator:where([data-hn-ui-disclosure])) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: none;
   }
-  .leading:empty {
+  :global(.leading:empty:where([data-hn-ui-disclosure])) {
     display: none;
   }
-  .indicator {
+  :global(.indicator:where([data-hn-ui-disclosure])) {
     transition: transform var(--ui-motion-feedback) var(--ui-motion-feedback-ease);
   }
-  :scope[data-ui-disclosure-state~="internalOpen"] .indicator {
+  :global(:scope[data-ui-disclosure-state~="internalOpen"]
+    .indicator:where([data-hn-ui-disclosure])) {
     transform: rotate(180deg);
   }
 
-  .chevron {
+  :global(.chevron:where([data-hn-ui-disclosure])) {
     inline-size: 0.5rem;
     block-size: 0.5rem;
     border-inline-end: 2px solid currentColor;
@@ -468,7 +476,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
     transform: rotate(45deg) translate(-1px, -1px);
   }
 
-  .panel {
+  :global(.panel:where([data-hn-ui-disclosure])) {
     display: grid;
     grid-template-rows: 0fr;
     transition:
@@ -476,19 +484,20 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
       content-visibility var(--ui-motion-reveal) allow-discrete;
   }
 
-  .panel-inner {
+  :global(.panel-inner:where([data-hn-ui-disclosure])) {
     min-block-size: 0;
     overflow: hidden;
     padding-inline: var(--ui-space-3);
   }
 
-  :scope[data-ui-disclosure-state~="internalOpen"] .panel {
+  :global(:scope[data-ui-disclosure-state~="internalOpen"] .panel:where([data-hn-ui-disclosure])) {
     grid-template-rows: 1fr;
   }
-  :scope[data-ui-disclosure-state~="internalOpen"] .panel-inner {
+  :global(:scope[data-ui-disclosure-state~="internalOpen"]
+    .panel-inner:where([data-hn-ui-disclosure])) {
     padding-block: 0 var(--ui-space-3);
   }
-  :scope:where(:scope):is([data-ui-disclosure-state~="fill"]) {
+  :global(:scope[data-ui-disclosure-state~="fill"]:where([data-hn-ui-disclosure])) {
     display: flex;
     flex-direction: column;
     flex: 0 0 var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size));
@@ -499,20 +508,20 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
     border-block-end: 0;
     border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
   }
-  :scope:where(:scope):is(:scope[data-ui-disclosure-state~="fill"][data-ui-disclosure-state~="internalOpen"]) {
+  :global(:scope[data-ui-disclosure-state~="fill"][data-ui-disclosure-state~="internalOpen"]:where([data-hn-ui-disclosure])) {
     flex-grow: 1;
   }
-  :scope[data-ui-disclosure-state~="fill"] .heading {
+  :global(:scope[data-ui-disclosure-state~="fill"] .heading:where([data-hn-ui-disclosure])) {
     flex: none;
   }
-  :scope[data-ui-disclosure-state~="fill"] .trigger {
+  :global(:scope[data-ui-disclosure-state~="fill"] .trigger:where([data-hn-ui-disclosure])) {
     border-radius: 0;
   }
-  :scope[data-ui-disclosure-state~="fill"] .panel {
+  :global(:scope[data-ui-disclosure-state~="fill"] .panel:where([data-hn-ui-disclosure])) {
     flex: 1;
     min-block-size: 0;
   }
-  :scope[data-ui-disclosure-state~="fill"] .panel-inner {
+  :global(:scope[data-ui-disclosure-state~="fill"] .panel-inner:where([data-hn-ui-disclosure])) {
     display: flex;
     flex-direction: column;
     flex: 1;
@@ -520,7 +529,8 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
     padding: 0;
   }
 
-  :scope[data-ui-disclosure-state~="variant=navigation"] .trigger {
+  :global(:scope[data-ui-disclosure-state~="variant=navigation"]
+    .trigger:where([data-hn-ui-disclosure])) {
     gap: var(--ui-nav-gap);
     padding-inline: var(--ui-nav-padding-inline);
     min-block-size: var(--ui-nav-min-block-size);
@@ -530,34 +540,38 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
     font-weight: var(--ui-font-normal);
     color: var(--ui-text-secondary);
   }
-  :scope[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"]
-    .trigger {
+  :global(:scope[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"]
+    .trigger:where([data-hn-ui-disclosure])) {
     padding-inline: var(--ui-nav-compact-padding-inline);
     padding-block: var(--ui-nav-compact-padding-block);
     min-block-size: var(--ui-nav-compact-min-block-size);
     font-size: var(--ui-font-size-sm);
   }
-  :scope[data-ui-disclosure-state~="variant=navigation"] .trigger:hover:not(:disabled) {
+  :global(:scope[data-ui-disclosure-state~="variant=navigation"]
+    .trigger:hover:not(:disabled):where([data-hn-ui-disclosure])) {
     background: var(--ui-nav-hover-surface);
     color: var(--ui-text-primary);
   }
-  :scope[data-ui-disclosure-state~="variant=navigation"] :is(.leading, .indicator) {
+  :global(:scope[data-ui-disclosure-state~="variant=navigation"]
+    :is(.leading, .indicator):where([data-hn-ui-disclosure])) {
     inline-size: var(--ui-nav-icon-size);
     font-size: var(--ui-nav-icon-size);
   }
   @media (pointer: coarse) {
-    :scope[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"]
-      .trigger {
+    :global(:scope[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"]
+      .trigger:where([data-hn-ui-disclosure])) {
       min-block-size: var(--ui-control-min-block-size);
     }
   }
 
   @media (prefers-reduced-motion: reduce) {
-    :scope:where(:scope):is([data-ui-disclosure-state~="fill"]), .panel, .indicator {
+    :global(:scope[data-ui-disclosure-state~="fill"]:where([data-hn-ui-disclosure])),
+    :global(.panel:where([data-hn-ui-disclosure])),
+    :global(.indicator:where([data-hn-ui-disclosure])) {
       transition: none;
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-disclosure])) {
     display: none;
   }
 }

package/vue/UiEditable.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -255,7 +255,7 @@ provide('html-next:ui-editable:internalValue', internalValue)
 provide('html-next:ui-editable:draft', draft)
 checkHydratedRoot('div', 'ui-editable')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     internalEdit.value && 'internalEdit',
@@ -354,18 +354,19 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
   <div
     class="ui-editable"
     v-bind="nativeAttrs($attrs)"
+    data-hn
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-actions="reflectedProp('actions', 'actions', checkedProps.actions, undefined, false)"
-    :data-cancel-label="reflectedProp('cancelLabel', 'cancel-label', checkedProps.cancelLabel, undefined, false)"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-edit="reflectedProp('edit', 'edit', checkedProps.edit, undefined, false)"
-    :data-hint="reflectedProp('hint', 'hint', checkedProps.hint, undefined, false)"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
-    :data-max-length="reflectedProp('maxLength', 'max-length', checkedProps.maxLength, undefined, false)"
-    :data-placeholder="reflectedProp('placeholder', 'placeholder', checkedProps.placeholder, undefined, false)"
-    :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
-    :data-save-label="reflectedProp('saveLabel', 'save-label', checkedProps.saveLabel, undefined, false)"
-    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    :data-ui-editable-prop-actions="reflectedProp('actions', 'actions', checkedProps.actions, undefined, false)"
+    :data-ui-editable-prop-cancel-label="reflectedProp('cancelLabel', 'cancel-label', checkedProps.cancelLabel, undefined, false)"
+    :data-ui-editable-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-editable-prop-edit="reflectedProp('edit', 'edit', checkedProps.edit, undefined, false)"
+    :data-ui-editable-prop-hint="reflectedProp('hint', 'hint', checkedProps.hint, undefined, false)"
+    :data-ui-editable-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-editable-prop-max-length="reflectedProp('maxLength', 'max-length', checkedProps.maxLength, undefined, false)"
+    :data-ui-editable-prop-placeholder="reflectedProp('placeholder', 'placeholder', checkedProps.placeholder, undefined, false)"
+    :data-ui-editable-prop-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
+    :data-ui-editable-prop-save-label="reflectedProp('saveLabel', 'save-label', checkedProps.saveLabel, undefined, false)"
+    :data-ui-editable-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     :data-ui-editable-state="hostState || undefined"
     ref="root"
   >
@@ -407,8 +408,8 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-editable) {
-  :scope:where(:scope) {
+@scope (.ui-editable) to ([data-hn]) {
+  :global(:scope) {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -416,13 +417,13 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
     min-inline-size: 0;
     color: var(--ui-text-primary);
   }
-  .field {
+  :global(.field) {
     display: inline-grid;
     min-inline-size: 8rem;
     max-inline-size: 100%;
   }
 
-  .preview, .input {
+  :global(.preview), :global(.input) {
     grid-area: 1 / 1;
     box-sizing: border-box;
     min-block-size: var(--ui-control-size-sm);
@@ -439,7 +440,7 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
       box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
-  .preview {
+  :global(.preview) {
     display: inline-flex;
     gap: var(--ui-space-2);
     align-items: center;
@@ -448,20 +449,20 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
     cursor: pointer;
   }
 
-  .preview:hover:not(:disabled) {
+  :global(.preview:hover:not(:disabled)) {
     background: var(--ui-surface-muted);
   }
 
-  .preview:focus-visible {
+  :global(.preview:focus-visible) {
     outline: none;
     box-shadow: var(--ui-focus-halo);
   }
 
-  .hint {
+  :global(.hint) {
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-sm);
   }
-  .input {
+  :global(.input) {
     contain: inline-size;
     inline-size: 100%;
     min-inline-size: 0;
@@ -469,7 +470,7 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
     background: var(--ui-control-surface, var(--ui-surface-elevated));
   }
 
-  .input:focus {
+  :global(.input:focus) {
     outline: none;
     border-color: var(--ui-control-focus, var(--ui-accent-solid));
     box-shadow:
@@ -477,26 +478,26 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
       var(--ui-control-focus-halo-shadow);
   }
 
-  .input::selection {
+  :global(.input::selection) {
     background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   }
 
-  :scope[data-ui-editable-state~="internalEdit"] .preview {
+  :global(:scope[data-ui-editable-state~="internalEdit"] .preview) {
     visibility: hidden;
   }
-  :scope[data-ui-editable-state~="internalEdit"] .input {
+  :global(:scope[data-ui-editable-state~="internalEdit"] .input) {
     visibility: visible;
   }
 
-  .actions {
+  :global(.actions) {
     display: none;
     gap: var(--ui-space-1);
   }
-  :scope[data-ui-editable-state~="internalEdit"] .actions {
+  :global(:scope[data-ui-editable-state~="internalEdit"] .actions) {
     display: inline-flex;
   }
 
-  .actions button {
+  :global(.actions button) {
     min-block-size: var(--ui-control-size-sm);
     padding: 0 var(--ui-space-3);
     border: var(--ui-border-width) solid var(--ui-border-strong);
@@ -510,22 +511,22 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
     cursor: pointer;
   }
 
-  .actions .save {
+  :global(.actions .save) {
     border-color: var(--ui-accent-solid);
     background: var(--ui-accent-solid);
     color: var(--ui-text-on-accent);
   }
 
-  .actions button:focus-visible {
+  :global(.actions button:focus-visible) {
     outline: none;
     box-shadow: var(--ui-focus-halo);
   }
 
-  :scope[data-ui-editable-state~="disabled"] .preview {
+  :global(:scope[data-ui-editable-state~="disabled"] .preview) {
     color: var(--ui-disabled-text);
     cursor: not-allowed;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]) {
     display: none;
   }
 }

package/vue/UiEditorBlockActions.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'
@@ -109,9 +109,10 @@ useComponentHost(() => import('../components/ui-editor-block-actions/ui-editor-b
 <template>
   <div
     v-bind="nativeAttrs($attrs)"
+    data-hn
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
-    :data-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
+    :data-ui-editor-block-actions-prop-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
+    :data-ui-editor-block-actions-prop-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
     ref="root"
   >
     <UiMenu

package/vue/UiEditorChipEditor.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'
@@ -137,9 +137,10 @@ useComponentHost(() => import('../components/ui-editor-chip-editor/ui-editor-chi
     role="dialog"
     aria-label="Edit chip"
     v-bind="nativeAttrs($attrs)"
+    data-hn
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-color="reflectedProp('color', 'color', checkedProps.color, undefined, false)"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-editor-chip-editor-prop-color="reflectedProp('color', 'color', checkedProps.color, undefined, false)"
+    :data-ui-editor-chip-editor-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
     ref="root"
   >
     <UiStack gap="s"><UiInput

package/vue/UiEditorCodeLanguage.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'
@@ -133,9 +133,10 @@ useComponentHost(() => import('../components/ui-editor-code-language/ui-editor-c
 <template>
   <div
     v-bind="nativeAttrs($attrs)"
+    data-hn
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-languages="reflectedProp('languages', 'languages', checkedProps.languages, undefined, false)"
-    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    :data-ui-editor-code-language-prop-languages="reflectedProp('languages', 'languages', checkedProps.languages, undefined, false)"
+    :data-ui-editor-code-language-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     ref="root"
   >
     <UiCombobox
@@ -146,7 +147,7 @@ useComponentHost(() => import('../components/ui-editor-code-language/ui-editor-c
       :disclosure="true"
       :value="checkedProps.value"
     ><KeyedBoundary><option
-          v-for="language in uniqueKeys(checkedProps.languages, (language, index, loop) => language.value)"
+          v-for="language in uniqueKeys(checkedProps.languages ?? [], (language, index, loop) => language.value)"
           :key="language.value"
           :value="language.value"
         >

package/vue/UiEditorImageToolbar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -327,10 +327,11 @@ useComponentHost(() => import('../components/ui-editor-image-toolbar/ui-editor-i
 <template>
   <div
     v-bind="nativeAttrs($attrs)"
+    data-hn
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-alt="reflectedProp('alt', 'alt', checkedProps.alt, undefined, false)"
-    :data-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
-    :data-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
+    :data-ui-editor-image-toolbar-prop-alt="reflectedProp('alt', 'alt', checkedProps.alt, undefined, false)"
+    :data-ui-editor-image-toolbar-prop-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
+    :data-ui-editor-image-toolbar-prop-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
     ref="root"
   >
     <UiText as="div" font="sans"><UiEditorToolbar

package/vue/UiEditorInsertTableGrid.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -192,12 +192,13 @@ useComponentHost(
   <div
     class="ui-editor-insert-table-grid"
     v-bind="nativeAttrs($attrs)"
+    data-hn
     :hidden="!checkedProps.open"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-header-row="reflectedProp('headerRow', 'header-row', checkedProps.headerRow, undefined, false)"
-    :data-max-cols="reflectedProp('maxCols', 'max-cols', checkedProps.maxCols, undefined, false)"
-    :data-max-rows="reflectedProp('maxRows', 'max-rows', checkedProps.maxRows, undefined, false)"
-    :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
+    :data-ui-editor-insert-table-grid-prop-header-row="reflectedProp('headerRow', 'header-row', checkedProps.headerRow, undefined, false)"
+    :data-ui-editor-insert-table-grid-prop-max-cols="reflectedProp('maxCols', 'max-cols', checkedProps.maxCols, undefined, false)"
+    :data-ui-editor-insert-table-grid-prop-max-rows="reflectedProp('maxRows', 'max-rows', checkedProps.maxRows, undefined, false)"
+    :data-ui-editor-insert-table-grid-prop-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     ref="root"
   >
     <p class="hint">{{ hint }}</p>
@@ -237,20 +238,20 @@ useComponentHost(
 </template>
 
 <style scoped>
-@scope (.ui-editor-insert-table-grid) {
-  :scope:where(:scope) {
+@scope (.ui-editor-insert-table-grid) to ([data-hn]) {
+  :global(:scope) {
     padding: var(--ui-space-3);
     background: var(--ui-surface);
     border: var(--ui-border-width) solid var(--ui-border-strong);
     border-radius: var(--ui-radius-md);
     box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   }
-  .hint {
+  :global(.hint) {
     margin: 0 0 var(--ui-space-2);
     font-size: var(--ui-font-size-sm);
     color: var(--ui-text-muted);
   }
-  .grid {
+  :global(.grid) {
     display: grid;
     grid-template-columns: repeat(var(--_cols, 8), 1.25rem);
     grid-template-rows: repeat(var(--_rows, 8), 1.25rem);
@@ -279,10 +280,10 @@ useComponentHost(
       -1px calc(100% - var(--_ui-scroll-fade-size)),
       calc(100% - var(--_ui-scroll-fade-size)) 100%;
   }
-  :scope:dir(rtl) .grid {
+  :global(:scope:dir(rtl) .grid) {
     --_ui-scroll-fade-direction: to left;
   }
-  .cell {
+  :global(.cell) {
     width: 1.25rem;
     height: 1.25rem;
     padding: 0;
@@ -291,37 +292,37 @@ useComponentHost(
     background: var(--ui-surface);
     cursor: pointer;
   }
-  .cell.selected {
+  :global(.cell.selected) {
     background: var(--ui-accent-solid, var(--ui-accent));
     border-color: var(--ui-accent-solid, var(--ui-accent));
   }
-  .cell:focus-visible {
+  :global(.cell:focus-visible) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     outline-offset: calc(-1 * var(--ui-focus-width));
   }
-  .header {
+  :global(.header) {
     display: block;
     margin-bottom: var(--ui-space-2);
     font-size: var(--ui-font-size-sm);
     cursor: pointer;
   }
   @media (pointer: coarse) {
-    .grid {
+    :global(.grid) {
       grid-template-columns: repeat(var(--_cols, 8), 44px);
       grid-template-rows: repeat(var(--_rows, 8), 44px);
     }
 
-    .cell {
+    :global(.cell) {
       width: 44px;
       height: 44px;
     }
   }
   @media (forced-colors: active) {
-    .cell:focus-visible {
+    :global(.cell:focus-visible) {
       outline-color: Highlight;
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]) {
     display: none;
   }
 }