@threadlabs/looma 0.29.0 → 0.29.1

package/vanilla/UiTooltip.js

@@ -1,9 +1,9 @@
-// Generated by HTML Next 1.0.0-alpha.53 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.54 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";
 
-const T0 = ["",[],["div",["class","surface"],4,["span",["class","shortcut"],4]]];
+const T0 = ["",[],["div",["class","surface"],"\n      ",["span",["class","label"],4],"\n      ",["span",["class","shortcut"],4],"\n    "]];
 const T1 = ["",[]];
 const T2 = ["",[]];
 let P0, P1, P2;
@@ -50,17 +50,18 @@ export function createUiTooltip(options = {}, html) {
       const s1 = x1;
       if (s1 !== r.v1) writeAttribute(r.n, "data-ui-tooltip-state", (r.v1 = s1) === "" ? null : s1);
     }
-    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a2, r.e1, "shortcut", J, false, undefined, d);
-      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m2(d); at.before(r.b1.n); } }
-    else if (r.b1 !== undefined) p2(r.b1, c, d);
     if (r.f0 === undefined) { r.f0 = 1; const at = fillSlot(r.a1, r.e0, "", J, false, undefined, d);
       if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b0 = m1(d); at.before(r.b0.n); } }
     else if (r.b0 !== undefined) p1(r.b0, c, d);
+    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a2, r.e1, "shortcut", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m2(d); at.before(r.b1.n); } }
+    else if (r.b1 !== undefined) p2(r.b1, c, d);
   };
   const t0 = element.firstChild;
-  const t1 = t0.firstChild;
-  const t2 = t1.nextSibling.nextSibling.firstChild;
-  const R = { n: element, v0: undefined, v1: undefined, a1: t1, e0: t1.nextSibling, b0: undefined, f0: undefined, a2: t2, e1: t2.nextSibling, b1: undefined, f1: undefined };
+  const t1 = t0.firstChild.nextSibling;
+  const t2 = t1.firstChild;
+  const t3 = t1.nextSibling.nextSibling.firstChild;
+  const R = { n: element, v0: undefined, v1: undefined, a1: t2, e0: t2.nextSibling, b0: undefined, f0: undefined, a2: t3, e1: t3.nextSibling, b1: undefined, f1: undefined };
   const I = { B };
   const J = project(I, children, slots);
   I.R = new Set();

package/vanilla/UiTopBar.d.ts

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

package/vanilla/UiTopBar.js

@@ -1,8 +1,8 @@
-// Generated by HTML Next 1.0.0-alpha.53 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.54 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, dispose, project, fillSlot } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-top-bar.css";
 
-const T0 = ["",[],["div",["class","leading"],4],["div",["class","title"],4],["div",["class","search"],4],["div",["class","actions"],4]];
+const T0 = ["",[],"\n    ",["div",["class","leading"],4],"\n    ",["div",["class","title"],4],"\n    ",["div",["class","search"],4],"\n    ",["div",["class","actions"],4],"\n  "];
 const T1 = ["",[]];
 const T2 = ["",[]];
 const T3 = ["",[]];
@@ -66,13 +66,13 @@ export function createUiTopBar(options = {}) {
       if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b3 = m4(d); at.before(r.b3.n); } }
     else if (r.b3 !== undefined) p4(r.b3, c, d);
   };
-  const t0 = element.firstChild;
+  const t0 = element.firstChild.nextSibling;
   const t1 = t0.firstChild;
-  const t2 = t0.nextSibling;
+  const t2 = t0.nextSibling.nextSibling;
   const t3 = t2.firstChild;
-  const t4 = t2.nextSibling;
+  const t4 = t2.nextSibling.nextSibling;
   const t5 = t4.firstChild;
-  const t6 = t4.nextSibling.firstChild;
+  const t6 = t4.nextSibling.nextSibling.firstChild;
   const R = { a0: t1, e0: t1.nextSibling, b0: undefined, f0: undefined, a1: t3, e1: t3.nextSibling, b1: undefined, f1: undefined, a2: t5, e2: t5.nextSibling, b2: undefined, f2: undefined, a3: t6, e3: t6.nextSibling, b3: undefined, f3: undefined };
   const I = {};
   const J = project(I, children, slots);

package/vanilla/UiTree.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.53 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.54 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.53 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.54 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";

package/vanilla/UiTreeItem.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.53 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.54 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,10 +1,10 @@
-// Generated by HTML Next 1.0.0-alpha.53 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.54 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";
 
-const T0 = ["",[],["div",["class","row"],1,["button",["class","disclosure","type","button"],["span",["class","disclosure-icon","aria-hidden","true"]]],["label",["class","selection-hit"],["input",["class","selection-checkbox","type","checkbox","tabindex","-1"]]],["span",["class","leading"],4],["span",["class","label"],["span",["class","label-text"],4]],["span",["class","actions"],1,["span",[],4]],["span",["class","drop-indicator row-drop-indicator","aria-hidden","true"]]],["div",["class","children","role","group"],4],["span",["class","drop-indicator subtree-drop-indicator","aria-hidden","true"]]];
-const T1 = ["button",["class","drag-handle","type","button","draggable","true"],["svg",["aria-hidden","true","focusable","false","viewBox","0 0 24 24","fill","none","stroke","currentColor","stroke-width","2","stroke-linecap","round","stroke-linejoin","round"],["circle",["cx","9","cy","12","r","1"]],["circle",["cx","9","cy","5","r","1"]],["circle",["cx","9","cy","19","r","1"]],["circle",["cx","15","cy","12","r","1"]],["circle",["cx","15","cy","5","r","1"]],["circle",["cx","15","cy","19","r","1"]]]];
+const T0 = ["",[],"\n    ",["div",["class","row"],"\n      ",1,"\n      ",["button",["class","disclosure","type","button"],"\n        ",["span",["class","disclosure-icon","aria-hidden","true"]],"\n      "],"\n      ",["label",["class","selection-hit"],["input",["class","selection-checkbox","type","checkbox","tabindex","-1"]]],"\n      ",["span",["class","leading"],4],"\n      ",["span",["class","label"],["span",["class","label-text"],4]],"\n      ",["span",["class","actions"],"\n        ",1,"\n        ",["span",[],4],"\n      "],"\n      ",["span",["class","drop-indicator row-drop-indicator","aria-hidden","true"]],"\n    "],"\n    ",["div",["class","children","role","group"],4],"\n    ",["span",["class","drop-indicator subtree-drop-indicator","aria-hidden","true"]],"\n  "];
+const T1 = ["button",["class","drag-handle","type","button","draggable","true"],"\n        ",["svg",["aria-hidden","true","focusable","false","viewBox","0 0 24 24","fill","none","stroke","currentColor","stroke-width","2","stroke-linecap","round","stroke-linejoin","round"],["circle",["cx","9","cy","12","r","1"]],["circle",["cx","9","cy","5","r","1"]],["circle",["cx","9","cy","19","r","1"]],["circle",["cx","15","cy","12","r","1"]],["circle",["cx","15","cy","5","r","1"]],["circle",["cx","15","cy","19","r","1"]]],"\n      "];
 const T2 = ["",[]];
 const T3 = ["",[],0];
 const T4 = ["ui-button",["data-tree-cancel-move","","variant","ghost","tone","neutral","size","sm","aria-label","Cancel move"],"Cancel"];
@@ -189,20 +189,20 @@ export function createUiTreeItem(options = {}, html) {
       if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b5 = m6(d); at.before(r.b5.n); } }
     else if (r.b5 !== undefined) p6(r.b5, c, d);
   };
-  const t0 = element.firstChild;
-  const t1 = t0.firstChild;
-  const t2 = t1.nextSibling.nextSibling;
-  const t3 = t2.nextSibling;
+  const t0 = element.firstChild.nextSibling;
+  const t1 = t0.firstChild.nextSibling;
+  const t2 = t1.nextSibling.nextSibling.nextSibling;
+  const t3 = t2.nextSibling.nextSibling;
   const t4 = t3.firstChild;
-  const t5 = t3.nextSibling;
+  const t5 = t3.nextSibling.nextSibling;
   const t6 = t5.firstChild;
-  const t7 = t5.nextSibling;
+  const t7 = t5.nextSibling.nextSibling;
   const t8 = t7.firstChild;
   const t9 = t8.firstChild;
-  const t10 = t7.nextSibling;
-  const t11 = t10.firstChild;
-  const t12 = t11.nextSibling.nextSibling.firstChild;
-  const t13 = t0.nextSibling;
+  const t10 = t7.nextSibling.nextSibling;
+  const t11 = t10.firstChild.nextSibling;
+  const t12 = t11.nextSibling.nextSibling.nextSibling.firstChild;
+  const t13 = t0.nextSibling.nextSibling;
   const t14 = t13.firstChild;
   const R = { n: element, a3: t2, a4: t4, a13: t13, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, v7: undefined, v8: undefined, v9: undefined, v10: null, v11: null, v12: null, v13: null, v14: null, v15: null, v16: undefined, a2: t1, e0: t1.nextSibling, b0: undefined, a6: t6, e1: t6.nextSibling, b1: undefined, f1: undefined, a9: t9, e2: t9.nextSibling, b2: undefined, f2: undefined, a11: t11, e3: t11.nextSibling, b3: undefined, a12: t12, e4: t12.nextSibling, b4: undefined, f4: undefined, a14: t14, e5: t14.nextSibling, b5: undefined, f5: undefined };
   const I = { B };

package/vue/UiActionBar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { checkHydratedRoot, nativeAttrs } from './host'
 
@@ -10,10 +10,13 @@ checkHydratedRoot('div', 'ui-action-bar')
 <template>
   <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" data-hn-ui-action-bar><slot name="primary" /></span>
+      <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" data-hn-ui-action-bar><slot
+          name="primary"
+        /></span>
     </div>
   </div>
 </template>

package/vue/UiAffordanceScope.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiAvatar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 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'
@@ -246,8 +246,7 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
     :data-ui-avatar-prop-src="reflectedProp('src', 'src', checkedProps.src, undefined, false)"
     :data-ui-avatar-state="hostState || undefined"
     ref="root"
-  ><slot />
-    <img
+  ><slot />{{ ' ' }}<img
       class="image"
       alt=""
       aria-hidden="true"
@@ -255,15 +254,15 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
       :src="checkedProps.src ?? undefined"
       :hidden="hasAuthoredImage || !hasImage"
       ref="imageElement"
-    >
-    <span class="fallback" data-hn-ui-avatar :aria-hidden="hasImage" :hidden="hasImage"><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"
-      >{{ initials }}</span>
-      <span data-hn-ui-avatar :hidden="!showGlyph"><UiIcon
-          class="ui-icon"
-          name="user-round"
-        /></span></span></span>
+        :hidden="!showGlyph"
+      ><UiIcon class="ui-icon" name="user-round" /></span></span></span>
 </template>
 
 <style scoped>

package/vue/UiAvatarGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 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'
@@ -183,8 +183,7 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
     :data-ui-avatar-group-state="hostState || undefined"
     ref="root"
   >
-    <slot />
-    <span
+    <slot />{{ ' ' }}<span
       class="overflow"
       role="img"
       data-hn-ui-avatar-group

package/vue/UiBadge.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -138,8 +138,10 @@ const hostState = computed(() =>
     :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" data-hn-ui-badge><slot name="icon" /></span>
-    <span class="label" data-hn-ui-badge><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>

package/vue/UiBreadcrumbItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -98,8 +98,7 @@ const hostState = computed(() =>
     <span class="separator" aria-hidden="true" data-hn-ui-breadcrumb-item><UiIcon
         class="ui-icon"
         name="chevron-right"
-      /></span>
-    <span class="content" data-hn-ui-breadcrumb-item><slot /></span>
+      /></span>{{ ' ' }}<span class="content" data-hn-ui-breadcrumb-item><slot /></span>
   </li>
 </template>
 

package/vue/UiBreadcrumbs.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiButton.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -672,9 +672,9 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       />
       <template v-if="!(checkedProps.loading || checkedProps.pending)"><slot
           name="icon"
-        /></template></span>
-    <span class="card-content" data-hn-ui-button><slot /></span>
-    <span class="card-action" data-hn-ui-button><slot name="action"><UiIcon
+        /></template></span>{{ ' ' }}<span class="card-content" data-hn-ui-button><slot /></span>{{
+      ' '
+    }}<span class="card-action" data-hn-ui-button><slot name="action"><UiIcon
           class="ui-icon"
           name="chevron-right"
           aria-hidden="true"
@@ -714,9 +714,9 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       />
       <template v-if="!(checkedProps.loading || checkedProps.pending)"><slot
           name="icon"
-        /></template></span>
-    <span class="card-content" data-hn-ui-button><slot /></span>
-    <span class="card-action" data-hn-ui-button><slot name="action"><UiIcon
+        /></template></span>{{ ' ' }}<span class="card-content" data-hn-ui-button><slot /></span>{{
+      ' '
+    }}<span class="card-action" data-hn-ui-button><slot name="action"><UiIcon
           class="ui-icon"
           name="chevron-right"
           aria-hidden="true"
@@ -755,9 +755,10 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       v-if="checkedProps.loading || checkedProps.pending"
       class="spinner-wrap"
       data-hn-ui-button
-    ><UiSpinner class="ui-spinner" size="sm" /></span>
-    <slot />
-    <span class="badge" data-hn-ui-button><slot name="badge" /></span></a>
+    ><UiSpinner class="ui-spinner" size="sm" /></span>{{ ' ' }}<slot />{{ ' ' }}<span
+      class="badge"
+      data-hn-ui-button
+    ><slot name="badge" /></span></a>
   <button
     v-else
     class="ui-button"
@@ -790,9 +791,10 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       v-if="checkedProps.loading || checkedProps.pending"
       class="spinner-wrap"
       data-hn-ui-button
-    ><UiSpinner class="ui-spinner" size="sm" /></span>
-    <slot />
-    <span class="badge" data-hn-ui-button><slot name="badge" /></span>
+    ><UiSpinner class="ui-spinner" size="sm" /></span>{{ ' ' }}<slot />{{ ' ' }}<span
+      class="badge"
+      data-hn-ui-button
+    ><slot name="badge" /></span>
   </button>
 </template>
 

package/vue/UiCallout.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -120,8 +120,7 @@ const hostState = computed(() =>
         <circle cx="12" cy="12" r="10" data-hn-ui-callout></circle>
         <path d="M12 16v-4" data-hn-ui-callout></path>
         <path d="M12 8h.01" data-hn-ui-callout></path>
-      </svg>
-      <svg
+      </svg>{{ ' ' }}<svg
         v-if="checkedProps.tone === 'neutral' || checkedProps.tone === 'note'"
         viewBox="0 0 24 24"
         fill="none"
@@ -138,8 +137,7 @@ const hostState = computed(() =>
         </path>
         <path d="M13 2v7h7" data-hn-ui-callout></path>
         <path d="m9.5 17.5 4-4 2 2-4 4H9.5v-2Z" data-hn-ui-callout></path>
-      </svg>
-      <svg
+      </svg>{{ ' ' }}<svg
         v-if="checkedProps.tone === 'tip'"
         viewBox="0 0 24 24"
         fill="none"
@@ -156,8 +154,7 @@ const hostState = computed(() =>
         </path>
         <path d="M9 18h6" data-hn-ui-callout></path>
         <path d="M10 22h4" data-hn-ui-callout></path>
-      </svg>
-      <svg
+      </svg>{{ ' ' }}<svg
         v-if="checkedProps.tone === 'important'"
         viewBox="0 0 24 24"
         fill="none"
@@ -174,8 +171,7 @@ const hostState = computed(() =>
         </path>
         <path d="M12 15h.01" data-hn-ui-callout></path>
         <path d="M12 7v4" data-hn-ui-callout></path>
-      </svg>
-      <svg
+      </svg>{{ ' ' }}<svg
         v-if="checkedProps.tone === 'warning'"
         viewBox="0 0 24 24"
         fill="none"
@@ -192,8 +188,7 @@ const hostState = computed(() =>
         </path>
         <path d="M12 9v4" data-hn-ui-callout></path>
         <path d="M12 17h.01" data-hn-ui-callout></path>
-      </svg>
-      <svg
+      </svg>{{ ' ' }}<svg
         v-if="checkedProps.tone === 'success'"
         viewBox="0 0 24 24"
         fill="none"
@@ -205,8 +200,7 @@ const hostState = computed(() =>
       >
         <circle cx="12" cy="12" r="10" data-hn-ui-callout></circle>
         <path d="m9 12 2 2 4-4" data-hn-ui-callout></path>
-      </svg>
-      <svg
+      </svg>{{ ' ' }}<svg
         v-if="checkedProps.tone === 'danger' || checkedProps.tone === 'caution'"
         viewBox="0 0 24 24"
         fill="none"
@@ -223,8 +217,7 @@ const hostState = computed(() =>
     <div class="content" data-hn-ui-callout>
       <strong v-if="checkedProps.heading" class="heading" data-hn-ui-callout>{{
         checkedProps.heading
-      }}</strong>
-      <slot />
+      }}</strong>{{ ' ' }}<slot />
     </div>
   </div>
 </template>

package/vue/UiCard.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiCheckbox.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 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'
@@ -306,9 +306,10 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
       :name="checkedProps.name ?? undefined"
       :value.attr="checkedProps.value ?? undefined"
       ref="inputElement"
-    >
-    <span class="text" data-hn-ui-checkbox><span class="label" data-hn-ui-checkbox><slot /></span>
-      <span
+    >{{ ' ' }}<span class="text" data-hn-ui-checkbox><span
+        class="label"
+        data-hn-ui-checkbox
+      ><slot /></span>{{ ' ' }}<span
         class="description"
         aria-hidden="true"
         data-hn-ui-checkbox

package/vue/UiCluster.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiCombobox.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 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'
@@ -1648,8 +1648,9 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     <div class="control" data-hn-ui-combobox>
       <div class="field" data-hn-ui-combobox ref="fieldElement">
         <div class="entry" data-hn-ui-combobox>
-          <slot name="start" />
-          <template v-if="checkedProps.multiple"><KeyedBoundary><button
+          <slot name="start" />{{ ' ' }}<template v-if="checkedProps.multiple">{{
+              ' '
+            }}<KeyedBoundary><button
                 v-for="(item, index) in uniqueKeys(internalItems, (item, index, loop) => item.id)"
                 :key="item.id"
                 class="item"
@@ -1663,8 +1664,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
                 <slot :name="concat('item-', item.id)"><UiBadge class="ui-badge">{{
                     item.label
                   }}</UiBadge></slot>
-              </button></KeyedBoundary></template>
-          <input
+              </button></KeyedBoundary>{{ ' ' }}</template>{{ ' ' }}<input
             role="combobox"
             aria-autocomplete="list"
             autocomplete="off"
@@ -1689,8 +1689,9 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
           :name="checkedProps.name ?? undefined"
           :value.attr="submitted"
           :disabled="checkedProps.disabled ?? undefined"
-        >
-        <template v-if="checkedProps.name && checkedProps.multiple"><KeyedBoundary><input
+        >{{ ' ' }}<template v-if="checkedProps.name && checkedProps.multiple">{{
+            ' '
+          }}<KeyedBoundary><input
               v-for="item in uniqueKeys(internalItems, (item, index, loop) => item.id)"
               :key="item.id"
               type="hidden"
@@ -1698,8 +1699,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
               :name="checkedProps.name ?? undefined"
               :value.attr="item.value"
               :disabled="checkedProps.disabled ?? undefined"
-            ></KeyedBoundary></template>
-        <button
+            ></KeyedBoundary>{{ ' ' }}</template>{{ ' ' }}<button
           v-if="checkedProps.clearable"
           type="button"
           data-combobox-action="clear"
@@ -1719,8 +1719,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
           >
             <path d="M7 7l10 10M17 7 7 17" data-hn-ui-combobox></path>
           </svg>
-        </button>
-        <button
+        </button>{{ ' ' }}<button
           v-if="checkedProps.disclosure"
           type="button"
           data-combobox-action="disclosure"
@@ -1794,8 +1793,9 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
             :role="group.role"
             :aria-label="group.label ?? undefined"
           >
-            <div v-if="group.name" class="group" data-hn-ui-combobox>{{ group.name }}</div>
-            <KeyedBoundary><div
+            <div v-if="group.name" class="group" data-hn-ui-combobox>{{ group.name }}</div>{{
+              ' '
+            }}<KeyedBoundary><div
                 v-for="row in uniqueKeys(group.rows, (row, indexLoop2, loop) => row.id)"
                 :key="row.id"
                 class="option"
@@ -1811,7 +1811,7 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
                 :aria-describedby="row.detail ?? undefined"
                 :class="{ active: row.index === active }"
               >
-                <slot :name="concat('option-', row.id)"><span
+                <slot :name="concat('option-', row.id)">{{ ' ' }}<span
                     v-if="row.detail"
                     class="detail"
                     data-hn-ui-combobox
@@ -1819,27 +1819,25 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
                         class="primary"
                         data-hn-ui-combobox
                         :id="concat(uid, '-option-', row.index, '-label')"
-                      >{{ row.label }}</span>
-                      <UiBadge
+                      >{{ row.label }}</span>{{ ' ' }}<UiBadge
                         v-if="row.tag"
                         class="ui-badge"
                         :tone="row.tag?.tone"
                         :style="{ '--ui-badge-color': row.tag?.color ?? undefined }"
                       ><span data-hn-ui-combobox :id="concat(uid, '-option-', row.index, '-tag')">{{
                           row.tag?.label
-                        }}</span></UiBadge></span>
-                    <span
+                        }}</span></UiBadge></span>{{ ' ' }}<span
                       v-if="row.description"
                       class="description"
                       data-hn-ui-combobox
                       :id="concat(uid, '-option-', row.index, '-description')"
-                    >{{ row.description }}</span></span>
-                  <span v-if="!row.detail" class="primary" data-hn-ui-combobox>{{
-                    row.label
-                  }}</span></slot>
+                    >{{ row.description }}</span></span>{{ ' ' }}<span
+                    v-if="!row.detail"
+                    class="primary"
+                    data-hn-ui-combobox
+                  >{{ row.label }}</span>{{ ' ' }}</slot>
               </div></KeyedBoundary>
-          </div></KeyedBoundary>
-        <div
+          </div></KeyedBoundary>{{ ' ' }}<div
           v-if="creatable"
           class="option"
           role="option"
@@ -1852,9 +1850,9 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
           :class="{ active: guardedBinding11 }"
         >
           {{ guardedBinding13 }}
-        </div>
-        <div v-if="message" class="message" data-hn-ui-combobox>{{ message }}</div>
-        <div
+        </div>{{ ' ' }}<div v-if="message" class="message" data-hn-ui-combobox>{{ message }}</div>{{
+          ' '
+        }}<div
           v-if="!checkedProps.loading && !(rows[0]) && !creatable && !lookupError"
           class="message"
           data-hn-ui-combobox

package/vue/UiContainer.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiContextMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 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'

package/vue/UiCover.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiDescriptionItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiDescriptionList.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.54 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'