@threadlabs/looma 0.28.13 → 0.28.14

package/vanilla/UiToastRegion.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.52 for Vanilla DOM. Do not edit.
 export interface UiToastRegionEventMap {
   dismiss: CustomEvent<{ readonly id: string; readonly reason: "action" | "timeout"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   "show-toast": CustomEvent<{ readonly message: string; readonly id?: string; readonly tone?: "neutral" | "info" | "success" | "warning" | "danger"; readonly duration?: number }>;

package/vanilla/UiToastRegion.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.52 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, KeyedList, NONCONFORMING, readMember, textCall, toAttribute, toText, trackContainer, truthy, writeAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkConstrained, checkFormat, checkNumber, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-toast-region/ui-toast-region.js";
 import "../styles/ui-toast-region.css";
@@ -9,7 +9,7 @@ const T2 = ["div",["class","toast"],["span",["class","message"],0],["span",["cla
 let P0, P1, P2;
 const E = new Map();
 const S = { n: ["toasts"], t: [["l",["o",["id","s","message","s","tone",["p",formatOf(keywordFormat),false],"role",["p",formatOf(keywordFormat),false],"closing","b"]]]], f: import.meta.url, g: "ui-toast-region", d: { "dismiss": [detailCheck(checkObject([["id", checkString, false], ["reason", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["action","timeout"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "show-toast": [detailCheck(checkObject([["message", checkString, false], ["id", checkString, true], ["tone", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["neutral","info","success","warning","danger"]}), true], ["duration", checkNumber, true]], false)), true, true, false] }, x: dispatchDeclared };
-const D = { props: { "duration": { "required":false,"default":0, c: checkNumber, t: "number", j: 0, m: "n" }, "placement": { "required":false,"values":["top","top-start","top-end","bottom","bottom-start","bottom-end"],"default":"top", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { g: "ui-toast-region", props: { "duration": { "required":false,"default":0, c: checkNumber, t: "number", j: 0, m: "n" }, "placement": { "required":false,"values":["top","top-start","top-end","bottom","bottom-start","bottom-end"],"default":"top", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 const C = (host) => controller.default(host);
 
 export function createUiToastRegion(options = {}, html) {

package/vanilla/UiTooltip.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.52 for Vanilla DOM. Do not edit.
 export interface UiTooltipEventMap {
   open: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   close: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;

package/vanilla/UiTooltip.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.52 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, toAttribute, writeAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkBoolean, checkConstrained, checkFormat, checkNumber, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-tooltip/ui-tooltip.js";
 import "../styles/ui-tooltip.css";
@@ -8,7 +8,7 @@ const T1 = ["",[]];
 const T2 = ["",[]];
 let P0, P1, P2;
 const S = { n: ["internalOpen"], t: ["b"], f: import.meta.url, g: "ui-tooltip", d: { "open": [detailCheck(checkObject([["open", checkBoolean, false], ["reason", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["action","programmatic","light-dismiss","escape"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "close": [detailCheck(checkObject([["open", checkBoolean, false], ["reason", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["action","programmatic","light-dismiss","escape"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false] }, x: dispatchDeclared };
-const D = { props: { "for": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "hideDelay": { "required":false,"default":100, c: checkNumber, t: "number", j: 0, m: "n" }, "inverse": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "open": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "placement": { "required":false,"values":["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],"default":"top", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "showDelay": { "required":false,"default":500, c: checkNumber, t: "number", j: 0, m: "n" }, "trigger": { "required":false,"values":["hover","click","focus"],"default":"hover", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { g: "ui-tooltip", props: { "for": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "hideDelay": { "required":false,"default":100, c: checkNumber, t: "number", j: 0, m: "n" }, "inverse": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "open": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "placement": { "required":false,"values":["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],"default":"top", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "showDelay": { "required":false,"default":500, c: checkNumber, t: "number", j: 0, m: "n" }, "trigger": { "required":false,"values":["hover","click","focus"],"default":"hover", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 const C = (host) => controller.default(host);
 
 export function createUiTooltip(options = {}, html) {

package/vanilla/UiTopBar.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.52 for Vanilla DOM. Do not edit.
 export interface UiTopBarEventMap {
 }
 export interface UiTopBarElement extends HTMLElement {

package/vanilla/UiTopBar.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.52 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, dispose, project, fillSlot } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-top-bar.css";
 

package/vanilla/UiTree.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.52 for Vanilla DOM. Do not edit.
 export interface UiTreeEventMap {
   reorder: CustomEvent<{ readonly sourceId: string; readonly targetId: string; readonly position: "before" | "inside" | "after"; readonly sourceType: string; readonly targetType: string; readonly sourceScope: string; readonly targetScope: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   "reorder-rejected": CustomEvent<{ readonly sourceId: string; readonly targetId: string; readonly position: "before" | "inside" | "after"; readonly reason: "max-depth"; readonly maxDepth: number; readonly resultingDepth: number; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;

package/vanilla/UiTree.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.52 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, writeAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkBoolean, checkConstrained, checkFormat, checkInteger, checkList, checkNumber, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-tree/ui-tree.js";
 import "../styles/ui-tree.css";
@@ -7,7 +7,7 @@ const T0 = ["",[],4];
 const T1 = ["",[]];
 let P0, P1;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-tree", d: { "reorder": [detailCheck(checkObject([["sourceId", checkString, false], ["targetId", checkString, false], ["position", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["before","inside","after"]}), false], ["sourceType", checkString, false], ["targetType", checkString, false], ["sourceScope", checkString, false], ["targetScope", checkString, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "reorder-rejected": [detailCheck(checkObject([["sourceId", checkString, false], ["targetId", checkString, false], ["position", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["before","inside","after"]}), false], ["reason", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["max-depth"]}), false], ["maxDepth", checkInteger, false], ["resultingDepth", checkInteger, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "activate": [detailCheck(checkObject([["id", checkString, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer"]}), false]], false)), true, true, false], "select": [detailCheck(checkObject([["ids", checkList(checkString), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false] }, x: dispatchDeclared };
-const D = { props: { "density": { "required":false,"values":["comfortable","compact"],"default":"comfortable", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "hoverExpandDelay": { "required":false,"default":700, c: checkNumber, t: "number", j: 0, m: "n" }, "label": { "required":false,"default":"Tree", c: checkString, t: "string", j: 0, m: "s" }, "marquee": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "maxDepth": { "required":false,"default":0, c: checkNumber, t: "number", j: 0, m: "n" }, "moveActivation": { "required":false,"values":["click","keyboard-touch"],"default":"click", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "selection": { "required":false,"values":["none","single","multiple"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { g: "ui-tree", props: { "density": { "required":false,"values":["comfortable","compact"],"default":"comfortable", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "hoverExpandDelay": { "required":false,"default":700, c: checkNumber, t: "number", j: 0, m: "n" }, "label": { "required":false,"default":"Tree", c: checkString, t: "string", j: 0, m: "s" }, "marquee": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "maxDepth": { "required":false,"default":0, c: checkNumber, t: "number", j: 0, m: "n" }, "moveActivation": { "required":false,"values":["click","keyboard-touch"],"default":"click", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "selection": { "required":false,"values":["none","single","multiple"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 const C = (host) => controller.default(host);
 
 export function createUiTree(options = {}, html) {

package/vanilla/UiTreeItem.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.52 for Vanilla DOM. Do not edit.
 export interface UiTreeItemEventMap {
   expand: CustomEvent<{ readonly id: string; readonly expanded: boolean; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }

package/vanilla/UiTreeItem.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.51 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.52 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, clearRegion, NONCONFORMING, readIndex, recordValue, textCall, toAttribute, toText, truthy, writeAttribute, dispatchDeclared, detailCheck, dispose, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkBoolean, checkConstrained, checkFormat, checkNumber, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-tree-item/ui-tree-item.js";
 import "../styles/ui-tree-item.css";
@@ -12,7 +12,7 @@ const T5 = ["",[]];
 const T6 = ["",[]];
 let P0, P1, P2, P3, P4, P5, P6;
 const S = { n: ["internalExpanded","structuralLevel","tabStop","isContainer","moving"], t: ["b","i","b","b","b"], f: import.meta.url, g: "ui-tree-item", d: { "expand": [detailCheck(checkObject([["id", checkString, false], ["expanded", checkBoolean, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), false, true, false] }, x: dispatchDeclared };
-const D = { props: { "accepts": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "actionsVisible": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "container": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "dragType": { "required":false,"default":"item", c: checkString, t: "string", j: 0, m: "s" }, "dropDepth": { "required":false, c: checkNumber, t: "number", j: 0, m: "n" }, "dropScope": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "expanded": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "itemId": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "label": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "lazy": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "marquee": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "selected": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "sortable": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "subtreeDepth": { "required":false, c: checkNumber, t: "number", j: 0, m: "n" } } };
+const D = { g: "ui-tree-item", props: { "accepts": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "actionsVisible": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "container": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "dragType": { "required":false,"default":"item", c: checkString, t: "string", j: 0, m: "s" }, "dropDepth": { "required":false, c: checkNumber, t: "number", j: 0, m: "n" }, "dropScope": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "expanded": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "itemId": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "label": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "lazy": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "marquee": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "selected": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "sortable": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "subtreeDepth": { "required":false, c: checkNumber, t: "number", j: 0, m: "n" } } };
 const C = (host) => controller.default(host);
 
 export function createUiTreeItem(options = {}, html) {
@@ -26,7 +26,7 @@ export function createUiTreeItem(options = {}, html) {
   element.setAttribute("data-component", "ui-tree-item");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
   const v = [false, 1, false, false, false, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null];
-  const B = acceptProps(element, D, S.n, v, componentProps, ["accepts","dragType","dropDepth","dropScope","itemId","subtreeDepth"], html);
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
   const m1 = (d) => {
     const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
     const r = { n, v0: null };

package/vue/UiActionBar.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 { checkHydratedRoot, nativeAttrs } from './host'
 
@@ -8,12 +8,12 @@ checkHydratedRoot('div', 'ui-action-bar')
 </script>
 
 <template>
-  <div class="ui-action-bar" v-bind="nativeAttrs($attrs)">
-    <div class="bar">
-      <span class="tertiary"><slot name="tertiary" /></span>
-      <span class="secondary"><slot name="secondary" />
+  <div class="ui-action-bar" v-bind="nativeAttrs($attrs)" data-hn data-hn-ui-action-bar>
+    <div class="bar" data-hn-ui-action-bar>
+      <span class="tertiary" data-hn-ui-action-bar><slot name="tertiary" /></span>
+      <span class="secondary" data-hn-ui-action-bar><slot name="secondary" />
         <slot /></span>
-      <span class="primary"><slot name="primary" /></span>
+      <span class="primary" data-hn-ui-action-bar><slot name="primary" /></span>
     </div>
   </div>
 </template>
@@ -37,8 +37,8 @@ checkHydratedRoot('div', 'ui-action-bar')
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-action-bar) {
-  :scope:where(:scope) {
+@scope (.ui-action-bar) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-action-bar])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-action-bar-gap: var(--ui-action-bar-gap);
 
@@ -50,35 +50,43 @@ checkHydratedRoot('div', 'ui-action-bar')
     min-inline-size: 0;
   }
 
-  .bar, .tertiary, .secondary, .primary {
+  :global(.bar:where([data-hn-ui-action-bar])),
+  :global(.tertiary:where([data-hn-ui-action-bar])),
+  :global(.secondary:where([data-hn-ui-action-bar])),
+  :global(.primary:where([data-hn-ui-action-bar])) {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--_ui-action-bar-gap, var(--_gap));
   }
-  .bar {
+  :global(.bar:where([data-hn-ui-action-bar])) {
     justify-content: flex-end;
   }
 
-  .tertiary {
+  :global(.tertiary:where([data-hn-ui-action-bar])) {
     flex: 1 1 auto;
   }
 
-  .tertiary:empty, .secondary:empty, .primary:empty {
+  :global(.tertiary:empty:where([data-hn-ui-action-bar])),
+  :global(.secondary:empty:where([data-hn-ui-action-bar])),
+  :global(.primary:empty:where([data-hn-ui-action-bar])) {
     display: none;
   }
   @container (inline-size < 24rem) {
-    .bar, .tertiary, .secondary, .primary {
+    :global(.bar:where([data-hn-ui-action-bar])),
+    :global(.tertiary:where([data-hn-ui-action-bar])),
+    :global(.secondary:where([data-hn-ui-action-bar])),
+    :global(.primary:where([data-hn-ui-action-bar])) {
       flex-direction: column-reverse;
       flex-wrap: nowrap;
       align-items: stretch;
     }
 
-    .tertiary {
+    :global(.tertiary:where([data-hn-ui-action-bar])) {
       flex: none;
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-action-bar])) {
     display: none;
   }
 }

package/vue/UiAffordanceScope.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'
@@ -67,7 +67,7 @@ const engaged = ref(false)
 provide('html-next:ui-affordance-scope:engaged', engaged)
 checkHydratedRoot('span', 'ui-affordance-scope')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     engaged.value && 'engaged',
@@ -110,9 +110,11 @@ useComponentHost(() => import('../components/ui-affordance-scope/ui-affordance-s
   <span
     class="ui-affordance-scope"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-affordance-scope
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-guide="reflectedProp('guide', 'guide', checkedProps.guide, undefined, false)"
-    :data-near-radius="reflectedProp('nearRadius', 'near-radius', checkedProps.nearRadius, undefined, false)"
+    :data-ui-affordance-scope-prop-guide="reflectedProp('guide', 'guide', checkedProps.guide, undefined, false)"
+    :data-ui-affordance-scope-prop-near-radius="reflectedProp('nearRadius', 'near-radius', checkedProps.nearRadius, undefined, false)"
     :data-ui-affordance-scope-state="hostState || undefined"
     ref="root"
   ><slot /></span>
@@ -123,19 +125,19 @@ useComponentHost(() => import('../components/ui-affordance-scope/ui-affordance-s
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-affordance-scope) {
-  :scope:where(:scope) {
+@scope (.ui-affordance-scope) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-affordance-scope])) {
     display: contents;
     --ui-affordance-scope-engaged: 0;
     --ui-affordance-scope-guide: 1;
   }
-  :scope:where(:scope):is([data-ui-affordance-scope-state~="engaged"]) {
+  :global(:scope[data-ui-affordance-scope-state~="engaged"]:where([data-hn-ui-affordance-scope])) {
     --ui-affordance-scope-engaged: 1;
   }
-  :scope:where(:scope):is([data-ui-affordance-scope-state~="guide=none"]) {
+  :global(:scope[data-ui-affordance-scope-state~="guide=none"]:where([data-hn-ui-affordance-scope])) {
     --ui-affordance-scope-guide: 0;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-affordance-scope])) {
     display: none;
   }
 }

package/vue/UiAvatar.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'
@@ -181,7 +181,7 @@ provide('html-next:ui-avatar:initials', initials)
 provide('html-next:ui-avatar:showGlyph', showGlyph)
 checkHydratedRoot('span', 'ui-avatar')
 
-/** 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',
@@ -233,15 +233,17 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
   <span
     class="ui-avatar"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-avatar
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-active="reflectedProp('active', 'active', checkedProps.active, undefined, false)"
-    :data-alt="reflectedProp('alt', 'alt', checkedProps.alt, undefined, false)"
-    :data-decorative="reflectedProp('decorative', 'decorative', checkedProps.decorative, undefined, false)"
-    :data-fallback="reflectedProp('fallback', 'fallback', checkedProps.fallback, undefined, false)"
-    :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
-    :data-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-src="reflectedProp('src', 'src', checkedProps.src, undefined, false)"
+    :data-ui-avatar-prop-active="reflectedProp('active', 'active', checkedProps.active, undefined, false)"
+    :data-ui-avatar-prop-alt="reflectedProp('alt', 'alt', checkedProps.alt, undefined, false)"
+    :data-ui-avatar-prop-decorative="reflectedProp('decorative', 'decorative', checkedProps.decorative, undefined, false)"
+    :data-ui-avatar-prop-fallback="reflectedProp('fallback', 'fallback', checkedProps.fallback, undefined, false)"
+    :data-ui-avatar-prop-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
+    :data-ui-avatar-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
+    :data-ui-avatar-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-avatar-prop-src="reflectedProp('src', 'src', checkedProps.src, undefined, false)"
     :data-ui-avatar-state="hostState || undefined"
     ref="root"
   ><slot />
@@ -249,14 +251,19 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
       class="image"
       alt=""
       aria-hidden="true"
+      data-hn-ui-avatar
       :src="checkedProps.src ?? undefined"
       :hidden="hasAuthoredImage || !hasImage"
       ref="imageElement"
     >
-    <span class="fallback" :aria-hidden="hasImage" :hidden="hasImage"><span :hidden="showGlyph">{{
-        initials
-      }}</span>
-      <span :hidden="!showGlyph"><UiIcon class="ui-icon" name="user-round" /></span></span></span>
+    <span class="fallback" data-hn-ui-avatar :aria-hidden="hasImage" :hidden="hasImage"><span
+        data-hn-ui-avatar
+        :hidden="showGlyph"
+      >{{ initials }}</span>
+      <span data-hn-ui-avatar :hidden="!showGlyph"><UiIcon
+          class="ui-icon"
+          name="user-round"
+        /></span></span></span>
 </template>
 
 <style scoped>
@@ -291,8 +298,8 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-avatar) to (.ui-icon) {
-  :scope:where(:scope) {
+@scope (.ui-avatar) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-avatar])) {
     --_ui-default-icon-size: 1.25rem;
     display: inline-grid;
     place-items: center;
@@ -315,14 +322,14 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
     text-transform: uppercase;
   }
 
-  :scope:where(:scope):is([data-ui-avatar-state~="size=sm"]) {
+  :global(:scope[data-ui-avatar-state~="size=sm"]:where([data-hn-ui-avatar])) {
     --_ui-default-icon-size: 1rem;
     inline-size: 1.75rem;
     block-size: 1.75rem;
     font-size: var(--ui-font-size-xs);
   }
 
-  :scope:where(:scope):is([data-ui-avatar-state~="size=xs"]) {
+  :global(:scope[data-ui-avatar-state~="size=xs"]:where([data-hn-ui-avatar])) {
     --_ui-default-icon-size: 0.75rem;
     inline-size: 1.25rem;
     block-size: 1.25rem;
@@ -331,30 +338,30 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
     letter-spacing: 0.02em;
   }
 
-  :scope:where(:scope):is([data-ui-avatar-state~="hasImage"]) {
+  :global(:scope[data-ui-avatar-state~="hasImage"]:where([data-hn-ui-avatar])) {
     border-color: var(--ui-avatar-border, var(--ui-border-strong));
   }
 
-  :scope:where(:scope):is([data-ui-avatar-state~="shape=circle"]) {
+  :global(:scope[data-ui-avatar-state~="shape=circle"]:where([data-hn-ui-avatar])) {
     box-shadow: var(--ui-shadow-sm);
   }
 
-  :scope:where(:scope):is([data-ui-avatar-state~="shape=square"]) {
+  :global(:scope[data-ui-avatar-state~="shape=square"]:where([data-hn-ui-avatar])) {
     border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
   }
-  :scope:where(:scope):is([data-ui-avatar-state~="active"]) {
+  :global(:scope[data-ui-avatar-state~="active"]:where([data-hn-ui-avatar])) {
     outline: var(--ui-border-width) solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
     outline-offset: var(--ui-border-width);
   }
 
-  .image, :slotted(img) {
+  :global(.image:where([data-hn-ui-avatar])), :global(:where(:not([data-hn-ui-avatar])):is(img)) {
     grid-area: 1 / 1;
     inline-size: 100%;
     block-size: 100%;
     object-fit: cover;
   }
 
-  .fallback {
+  :global(.fallback:where([data-hn-ui-avatar])) {
     grid-area: 1 / 1;
     display: inline-flex;
     align-items: center;
@@ -363,7 +370,7 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
     block-size: 100%;
   }
   @supports (text-box-trim: trim-both) {
-    .fallback {
+    :global(.fallback:where([data-hn-ui-avatar])) {
       display: block;
       text-align: center;
       align-content: center;
@@ -372,10 +379,10 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
     }
   }
 
-  [hidden] {
+  :global([hidden]:where([data-hn-ui-avatar])) {
     display: none;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-avatar])) {
     display: none;
   }
 }

package/vue/UiAvatarGroup.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'
@@ -124,7 +124,7 @@ provide('html-next:ui-avatar-group:overflowCount', overflowCount)
 provide('html-next:ui-avatar-group:overflowAnnouncement', overflowAnnouncement)
 checkHydratedRoot('div', 'ui-avatar-group')
 
-/** 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',
@@ -171,13 +171,15 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
     class="ui-avatar-group"
     role="group"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-avatar-group
     :aria-label="checkedProps.label ?? undefined"
     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-overflow-label="reflectedProp('overflowLabel', 'overflow-label', checkedProps.overflowLabel, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-total="reflectedProp('total', 'total', checkedProps.total, undefined, false)"
+    :data-ui-avatar-group-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-avatar-group-prop-max="reflectedProp('max', 'max', checkedProps.max, undefined, false)"
+    :data-ui-avatar-group-prop-overflow-label="reflectedProp('overflowLabel', 'overflow-label', checkedProps.overflowLabel, undefined, false)"
+    :data-ui-avatar-group-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-avatar-group-prop-total="reflectedProp('total', 'total', checkedProps.total, undefined, false)"
     :data-ui-avatar-group-state="hostState || undefined"
     ref="root"
   >
@@ -185,6 +187,7 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
     <span
       class="overflow"
       role="img"
+      data-hn-ui-avatar-group
       :hidden="!overflowCount"
       :aria-label="overflowAnnouncement"
       ref="overflowElement"
@@ -208,8 +211,8 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-avatar-group) {
-  :scope:where(:scope) {
+@scope (.ui-avatar-group) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-avatar-group])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-avatar-group-overlap-shadow: var(--ui-avatar-group-overlap-shadow);
     --_ui-avatar-group-edge-ring: var(--ui-avatar-group-edge-ring);
@@ -223,20 +226,20 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
     flex-direction: row;
     gap: 0;
   }
-  :slotted(*) {
+  :global(:where(:not([data-hn-ui-avatar-group])):is(*)) {
     margin-inline-start: -0.5rem;
     flex-shrink: 0;
   }
 
-  :slotted(*:first-child) {
+  :global(:where(:not([data-hn-ui-avatar-group])):is(*:first-child)) {
     margin-inline-start: 0;
   }
 
-  :scope:where(:scope):is(:dir(rtl)) {
+  :global(:scope:dir(rtl):where([data-hn-ui-avatar-group])) {
     --_overlap-shadow: 1px 0 0 0 rgb(0 0 0 / 0.22);
   }
 
-  .overflow {
+  :global(.overflow:where([data-hn-ui-avatar-group])) {
     margin-inline-start: -0.5rem;
     display: inline-flex;
     align-items: center;
@@ -256,13 +259,15 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
     flex-shrink: 0;
   }
 
-  :scope[data-ui-avatar-group-state~="size=sm"] .overflow {
+  :global(:scope[data-ui-avatar-group-state~="size=sm"]
+    .overflow:where([data-hn-ui-avatar-group])) {
     margin-inline-start: -0.25rem;
     inline-size: 1.75rem;
     block-size: 1.75rem;
   }
 
-  :scope[data-ui-avatar-group-state~="size=xs"] .overflow {
+  :global(:scope[data-ui-avatar-group-state~="size=xs"]
+    .overflow:where([data-hn-ui-avatar-group])) {
     margin-inline-start: -0.1875rem;
     inline-size: 1.25rem;
     block-size: 1.25rem;
@@ -271,10 +276,10 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
     line-height: 1;
   }
 
-  .overflow[hidden] {
+  :global(.overflow[hidden]:where([data-hn-ui-avatar-group])) {
     display: none;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-avatar-group])) {
     display: none;
   }
 }