@threadlabs/looma 0.28.22 → 0.29.1

package/vue/UiEditorTableOverlay.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'
@@ -654,9 +654,11 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
           :class="{ active: control.key === activeKey }"
           :style="{ top: control.offset }"
         >
-          <span class="line" aria-hidden="true"></span>
-          <span class="guide" data-ui-guide="" aria-hidden="true"></span>
-          <button
+          <span class="line" aria-hidden="true"></span>{{ ' ' }}<span
+            class="guide"
+            data-ui-guide=""
+            aria-hidden="true"
+          ></span>{{ ' ' }}<button
             type="button"
             class="handle"
             :data-ui-affordance="control.affordance"
@@ -664,8 +666,9 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
             :data-boundary-index="control.index"
             :aria-label="control.label"
           >
-            <UiIcon class="ui-icon" name="plus" />
-            <span class="tooltip" role="tooltip">{{ control.label }}</span>
+            <UiIcon class="ui-icon" name="plus" />{{ ' ' }}<span class="tooltip" role="tooltip">{{
+              control.label
+            }}</span>
           </button>
         </div></KeyedBoundary>
     </div>
@@ -678,9 +681,11 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
           :class="{ active: control.key === activeKey }"
           :style="{ left: control.offset }"
         >
-          <span class="line" aria-hidden="true"></span>
-          <span class="guide" data-ui-guide="" aria-hidden="true"></span>
-          <button
+          <span class="line" aria-hidden="true"></span>{{ ' ' }}<span
+            class="guide"
+            data-ui-guide=""
+            aria-hidden="true"
+          ></span>{{ ' ' }}<button
             type="button"
             class="handle"
             :data-ui-affordance="control.affordance"
@@ -688,12 +693,13 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
             :data-boundary-index="control.index"
             :aria-label="control.label"
           >
-            <UiIcon class="ui-icon" name="plus" />
-            <span class="tooltip" role="tooltip">{{ control.label }}</span>
+            <UiIcon class="ui-icon" name="plus" />{{ ' ' }}<span class="tooltip" role="tooltip">{{
+              control.label
+            }}</span>
           </button>
         </div></KeyedBoundary>
     </div>
-    <template v-if="hovered"><button
+    <template v-if="hovered">{{ ' ' }}<button
         type="button"
         class="selector row"
         data-action="select-row"
@@ -704,8 +710,7 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
         :style="{ top: guarded }"
       >
         <span class="glyph"><UiIcon class="ui-icon" name="grip-vertical" /></span>
-      </button>
-      <button
+      </button>{{ ' ' }}<button
         type="button"
         class="selector column"
         data-action="select-column"
@@ -716,8 +721,7 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
         :style="{ left: guardedBinding3 }"
       >
         <span class="glyph"><UiIcon class="ui-icon" name="grip-horizontal" /></span>
-      </button></template>
-    <button
+      </button>{{ ' ' }}</template>{{ ' ' }}<button
       v-if="active"
       type="button"
       class="cell-menu"
@@ -729,8 +733,12 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
       :style="{ left: guardedBinding6, top: guardedBinding7 }"
     >
       <UiIcon class="ui-icon" name="chevron-down" />
-    </button>
-    <span class="drop-indicator" data-drop-indicator="" hidden="" aria-hidden="true"></span>
+    </button>{{ ' ' }}<span
+      class="drop-indicator"
+      data-drop-indicator=""
+      hidden=""
+      aria-hidden="true"
+    ></span>
   </div>
 </template>
 

package/vue/UiEditorTableToolbar.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'
@@ -517,26 +517,27 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
         >
           <UiIcon class="ui-icon" :name="item.action" />
         </button></KeyedBoundary>
-    </div>
-    <div v-if="alignments.length && structure.length" class="sep" aria-hidden="true"></div>
-    <div v-if="structure.length" class="group" role="group" aria-label="Table structure">
+    </div>{{ ' ' }}<div v-if="alignments.length && structure.length" class="sep" aria-hidden="true">
+    </div>{{ ' ' }}<div
+      v-if="structure.length"
+      class="group"
+      role="group"
+      aria-label="Table structure"
+    >
       <KeyedBoundary><button
           v-for="item in uniqueKeys(structure, (item, indexLoop, loop) => item.action)"
           :key="item.action"
           type="button"
           :data-action="item.action"
         >
-          <UiIcon class="ui-icon" :name="item.icon" />
-          <span>{{ item.label }}</span>
+          <UiIcon class="ui-icon" :name="item.icon" />{{ ' ' }}<span>{{ item.label }}</span>
         </button></KeyedBoundary>
-    </div>
-    <div
+    </div>{{ ' ' }}<div
       v-if="(alignments.length || structure.length) && hasOverflow"
       class="sep"
       aria-hidden="true"
     >
-    </div>
-    <div v-if="hasOverflow" class="overflow">
+    </div>{{ ' ' }}<div v-if="hasOverflow" class="overflow">
       <button
         type="button"
         class="more"
@@ -544,11 +545,15 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
         aria-haspopup="menu"
         :aria-expanded="overflowOpen"
       >
-        <UiIcon class="ui-icon" name="table" />
-        <span>Table options</span>
-        <span class="chevron"><UiIcon class="ui-icon" name="chevron-down" /></span>
-      </button>
-      <div v-if="overflowOpen" class="menu" role="menu" aria-label="More table actions">
+        <UiIcon class="ui-icon" name="table" />{{ ' ' }}<span>Table options</span>{{ ' ' }}<span
+          class="chevron"
+        ><UiIcon class="ui-icon" name="chevron-down" /></span>
+      </button>{{ ' ' }}<div
+        v-if="overflowOpen"
+        class="menu"
+        role="menu"
+        aria-label="More table actions"
+      >
         <div v-if="swatches.length" class="menu-section" role="none">
           <div class="menu-heading" role="presentation">Background</div>
           <div class="swatches" role="group" aria-label="Cell background">
@@ -566,12 +571,10 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
                   class="swatch"
                   :class="{ default: !swatch.color }"
                   :style="{ '--_swatch': swatch.color }"
-                ></span>
-                <span>{{ swatch.label }}</span>
+                ></span>{{ ' ' }}<span>{{ swatch.label }}</span>
               </button></KeyedBoundary>
           </div>
-        </div>
-        <KeyedBoundary><div
+        </div>{{ ' ' }}<KeyedBoundary><div
             v-for="section in uniqueKeys(sections, (section, indexLoop3, loop) => section.heading)"
             :key="section.heading"
             class="menu-section divided"
@@ -615,8 +618,7 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
                 :data-action="item.action"
                 :class="{ danger: item.danger }"
               >
-                <UiIcon class="ui-icon" :name="item.icon" />
-                <span>{{ item.label }}</span>
+                <UiIcon class="ui-icon" :name="item.icon" />{{ ' ' }}<span>{{ item.label }}</span>
               </button></KeyedBoundary>
           </div></KeyedBoundary>
       </div>

package/vue/UiEditorToolbar.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, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiFloatingActionButton.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/UiFormField.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, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -124,8 +124,9 @@ useComponentHost(() => import('../components/ui-form-field/ui-form-field.js'), {
     ref="root"
   >
     <div class="label" data-hn-ui-form-field>
-      <slot name="label" />
-      <span class="label-action" data-hn-ui-form-field><slot name="label-action" /></span>
+      <slot name="label" />{{ ' ' }}<span class="label-action" data-hn-ui-form-field><slot
+          name="label-action"
+        /></span>
     </div>
     <slot />
     <div class="help" data-hn-ui-form-field><slot name="help" /></div>

package/vue/UiGrid.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/UiIcon.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/UiIconButton.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, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -345,8 +345,9 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     :data-ui-icon-button-state="hostState || undefined"
     ref="root"
   >
-    <UiSpinner v-if="checkedProps.loading || checkedProps.pending" class="ui-spinner" size="sm" />
-    <span class="content" data-hn-ui-icon-button><slot /></span>
+    <UiSpinner v-if="checkedProps.loading || checkedProps.pending" class="ui-spinner" size="sm" />{{
+      ' '
+    }}<span class="content" data-hn-ui-icon-button><slot /></span>
   </button>
 </template>
 

package/vue/UiImage.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, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -255,24 +255,21 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
           aria-label="Resize image from top left"
           data-hn-ui-image
         >
-        </button>
-        <button
+        </button>{{ ' ' }}<button
           type="button"
           class="handle"
           data-corner="top-right"
           aria-label="Resize image from top right"
           data-hn-ui-image
         >
-        </button>
-        <button
+        </button>{{ ' ' }}<button
           type="button"
           class="handle"
           data-corner="bottom-left"
           aria-label="Resize image from bottom left"
           data-hn-ui-image
         >
-        </button>
-        <button
+        </button>{{ ' ' }}<button
           type="button"
           class="handle"
           data-corner="bottom-right"

package/vue/UiInput.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"

package/vue/UiInputGroup.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, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -178,10 +178,12 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
     :data-ui-input-group-state="hostState || undefined"
     ref="root"
   >
-    <span class="affix" data-hn-ui-input-group><slot name="prefix" /></span>
-    <span class="field" data-hn-ui-input-group><slot /></span>
-    <span class="affix" data-hn-ui-input-group><slot name="suffix" /></span>
-    <span class="action" data-hn-ui-input-group><slot name="action" /></span>
+    <span class="affix" data-hn-ui-input-group><slot name="prefix" /></span>{{ ' ' }}<span
+      class="field"
+      data-hn-ui-input-group
+    ><slot /></span>{{ ' ' }}<span class="affix" data-hn-ui-input-group><slot
+        name="suffix"
+      /></span>{{ ' ' }}<span class="action" data-hn-ui-input-group><slot name="action" /></span>
   </div>
 </template>
 

package/vue/UiList.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/UiListItem.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'
@@ -167,13 +167,16 @@ const hostState = computed(() =>
     :data-ui-list-item-prop-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-list-item-state="hostState || undefined"
   >
-    <span class="leading" data-hn-ui-list-item><slot name="leading" /></span>
-    <span class="content" data-hn-ui-list-item><span
-        class="title"
+    <span class="leading" data-hn-ui-list-item><slot name="leading" /></span>{{ ' ' }}<span
+      class="content"
+      data-hn-ui-list-item
+    ><span class="title" data-hn-ui-list-item><slot /></span>{{ ' ' }}<span
+        class="description"
         data-hn-ui-list-item
-      ><slot /></span>
-      <span class="description" data-hn-ui-list-item><slot name="description" /></span></span>
-    <span class="trailing" data-hn-ui-list-item><slot name="trailing" /></span>
+      ><slot name="description" /></span></span>{{ ' ' }}<span
+      class="trailing"
+      data-hn-ui-list-item
+    ><slot name="trailing" /></span>
   </li>
 </template>
 

package/vue/UiListbox.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'
@@ -336,16 +336,14 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
       ref="optionsElement"
     >
       <slot />
-    </select>
-    <template v-if="checkedProps.name && !checkedProps.disabled"><input
+    </select>{{ ' ' }}<template v-if="checkedProps.name && !checkedProps.disabled">{{ ' ' }}<input
         v-for="(selected, indexLoop) in selection"
         :key="indexLoop"
         type="hidden"
         data-hn-ui-listbox
         :name="checkedProps.name ?? undefined"
         :value.attr="selected"
-      ></template>
-    <input
+      >{{ ' ' }}</template>{{ ' ' }}<input
       class="validity"
       type="checkbox"
       aria-hidden="true"

package/vue/UiMenu.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/UiMenuGroup.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'
@@ -53,8 +53,7 @@ checkHydratedRoot('div', 'ui-menu-group')
   >
     <div v-if="checkedProps.label" class="heading" data-hn-ui-menu-group>
       {{ checkedProps.label }}
-    </div>
-    <slot />
+    </div>{{ ' ' }}<slot />
   </div>
 </template>
 

package/vue/UiMenuItem.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'
@@ -266,11 +266,13 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
     :data-ui-menu-item-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     :data-ui-menu-item-state="hostState || undefined"
     ref="@html-next/root"
-  ><span class="icon" aria-hidden="true" data-hn-ui-menu-item><slot name="icon" /></span>
-    <span class="label" data-hn-ui-menu-item><slot /></span>
-    <span class="shortcut" aria-hidden="true" data-hn-ui-menu-item><slot
-        name="shortcut"
-      /></span></a>
+  ><span class="icon" aria-hidden="true" data-hn-ui-menu-item><slot name="icon" /></span>{{
+      ' '
+    }}<span class="label" data-hn-ui-menu-item><slot /></span>{{ ' ' }}<span
+      class="shortcut"
+      aria-hidden="true"
+      data-hn-ui-menu-item
+    ><slot name="shortcut" /></span></a>
   <div
     v-else
     class="ui-menu-item"
@@ -314,10 +316,13 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
         v-if="(checkedProps.type === 'checkbox' || checkedProps.type === 'radio') && internalChecked"
         class="ui-icon"
         name="check"
-      /></span>
-    <span class="icon" aria-hidden="true" data-hn-ui-menu-item><slot name="icon" /></span>
-    <span class="label" data-hn-ui-menu-item><slot /></span>
-    <span class="shortcut" aria-hidden="true" data-hn-ui-menu-item><slot name="shortcut" /></span>
+      /></span>{{ ' ' }}<span class="icon" aria-hidden="true" data-hn-ui-menu-item><slot
+        name="icon"
+      /></span>{{ ' ' }}<span class="label" data-hn-ui-menu-item><slot /></span>{{ ' ' }}<span
+      class="shortcut"
+      aria-hidden="true"
+      data-hn-ui-menu-item
+    ><slot name="shortcut" /></span>
   </div>
 </template>
 

package/vue/UiMeter.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'
@@ -825,16 +825,15 @@ const hostState = computed(() =>
       v-if="checkedProps.variant === 'progress'"
       class="fill"
       :style="{ 'inline-size': guardedBinding7 }"
-    ></span>
-    <template v-if="checkedProps.variant === 'distribution'"><template
+    ></span>{{ ' ' }}<template v-if="checkedProps.variant === 'distribution'">{{ ' ' }}<template
         v-for="(part, index) in checkedProps.parts ?? []"
         :key="index"
-      ><span
+      >{{ ' ' }}<span
           v-if="part.value > 0 && (decimalSubtract(part.value, part.value)) === 0"
           class="part"
           aria-hidden="true"
           :style="{ 'flex-grow': part.value, 'background-color': part.color }"
-        ></span></template></template></span>
+        ></span>{{ ' ' }}</template>{{ ' ' }}</template></span>
 </template>
 
 <style scoped>

package/vue/UiNavItem.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'
@@ -270,14 +270,17 @@ const hostState = computed(() =>
     :data-ui-nav-item-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-nav-item-state="hostState || undefined"
     ref="@html-next/root"
-  ><span class="indicator" aria-hidden="true" data-hn-ui-nav-item></span>
-    <span class="leading" data-hn-ui-nav-item><slot name="leading" /></span>
-    <span class="content" data-hn-ui-nav-item><span
+  ><span class="indicator" aria-hidden="true" data-hn-ui-nav-item></span>{{ ' ' }}<span
+      class="leading"
+      data-hn-ui-nav-item
+    ><slot name="leading" /></span>{{ ' ' }}<span class="content" data-hn-ui-nav-item><span
         class="label"
         data-hn-ui-nav-item
-      ><slot /></span>
-      <span class="description" data-hn-ui-nav-item><slot name="description" /></span></span>
-    <span class="trailing" data-hn-ui-nav-item><slot name="trailing" /></span></a>
+      ><slot /></span>{{ ' ' }}<span class="description" data-hn-ui-nav-item><slot
+          name="description"
+        /></span></span>{{ ' ' }}<span class="trailing" data-hn-ui-nav-item><slot
+        name="trailing"
+      /></span></a>
   <button
     v-else
     class="ui-nav-item"
@@ -297,14 +300,17 @@ const hostState = computed(() =>
     :data-ui-nav-item-state="hostState || undefined"
     ref="@html-next/root"
   >
-    <span class="indicator" aria-hidden="true" data-hn-ui-nav-item></span>
-    <span class="leading" data-hn-ui-nav-item><slot name="leading" /></span>
-    <span class="content" data-hn-ui-nav-item><span
+    <span class="indicator" aria-hidden="true" data-hn-ui-nav-item></span>{{ ' ' }}<span
+      class="leading"
+      data-hn-ui-nav-item
+    ><slot name="leading" /></span>{{ ' ' }}<span class="content" data-hn-ui-nav-item><span
         class="label"
         data-hn-ui-nav-item
-      ><slot /></span>
-      <span class="description" data-hn-ui-nav-item><slot name="description" /></span></span>
-    <span class="trailing" data-hn-ui-nav-item><slot name="trailing" /></span>
+      ><slot /></span>{{ ' ' }}<span class="description" data-hn-ui-nav-item><slot
+          name="description"
+        /></span></span>{{ ' ' }}<span class="trailing" data-hn-ui-nav-item><slot
+        name="trailing"
+      /></span>
   </button>
 </template>
 

package/vue/UiPageHeader.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'
@@ -60,13 +60,14 @@ const hostState = computed(() =>
     :data-ui-page-header-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-ui-page-header-state="hostState || undefined"
   >
-    <span class="leading" data-hn-ui-page-header><slot name="leading" /></span>
-    <span class="copy" data-hn-ui-page-header><span class="eyebrow" data-hn-ui-page-header><slot
-          name="eyebrow"
-        /></span>
+    <span class="leading" data-hn-ui-page-header><slot name="leading" /></span>{{ ' ' }}<span
+      class="copy"
+      data-hn-ui-page-header
+    ><span class="eyebrow" data-hn-ui-page-header><slot name="eyebrow" /></span>
       <h1 class="title" data-hn-ui-page-header><slot /></h1>
-      <span class="description" data-hn-ui-page-header><slot name="description" /></span></span>
-    <span class="actions" data-hn-ui-page-header><slot name="actions" /></span>
+      <span class="description" data-hn-ui-page-header><slot name="description" /></span></span>{{
+      ' '
+    }}<span class="actions" data-hn-ui-page-header><slot name="actions" /></span>
   </header>
 </template>
 

package/vue/UiPopover.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/UiRadio.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'
@@ -239,11 +239,15 @@ useComponentHost(() => import('../components/ui-radio/ui-radio.js'), {
       :value.attr="checkedProps.value ?? undefined"
       :name="checkedProps.name ?? undefined"
       ref="inputElement"
-    >
-    <span class="text" data-hn-ui-radio><span class="label" data-hn-ui-radio><slot /></span>
-      <span class="description" aria-hidden="true" data-hn-ui-radio ref="descriptionElement"><slot
-          name="description"
-        /></span></span></label>
+    >{{ ' ' }}<span class="text" data-hn-ui-radio><span
+        class="label"
+        data-hn-ui-radio
+      ><slot /></span>{{ ' ' }}<span
+        class="description"
+        aria-hidden="true"
+        data-hn-ui-radio
+        ref="descriptionElement"
+      ><slot name="description" /></span></span></label>
 </template>
 
 <style scoped>

package/vue/UiRadioGroup.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/UiReel.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/UiScrollArea.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, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'