@threadlabs/looma 0.29.0 → 0.29.2

package/vue/UiDialog.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'
@@ -293,8 +293,9 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
     ref="root"
   >
     <header data-hn-ui-dialog ref="headerElement">
-      <h2 v-if="checkedProps.label" class="title" data-hn-ui-dialog>{{ checkedProps.label }}</h2>
-      <button class="close" type="button" aria-label="Close" data-hn-ui-dialog ref="closeElement">
+      <h2 v-if="checkedProps.label" class="title" data-hn-ui-dialog>{{ checkedProps.label }}</h2>{{
+        ' '
+      }}<button class="close" type="button" aria-label="Close" data-hn-ui-dialog ref="closeElement">
       </button>
     </header>
     <div class="body" data-hn-ui-dialog ref="bodyElement">

package/vue/UiDisclosure.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'
@@ -348,13 +348,14 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
         :disabled="checkedProps.disabled ?? undefined"
         ref="triggerElement"
       >
-        <span class="leading" data-hn-ui-disclosure><slot name="leading" /></span>
-        <span class="summary" data-hn-ui-disclosure><slot name="summary">{{
-            checkedProps.summary
-          }}</slot></span>
-        <span class="indicator" aria-hidden="true" data-hn-ui-disclosure><slot
-            name="indicator"
-          ><span class="chevron" data-hn-ui-disclosure></span></slot></span>
+        <span class="leading" data-hn-ui-disclosure><slot name="leading" /></span>{{ ' ' }}<span
+          class="summary"
+          data-hn-ui-disclosure
+        ><slot name="summary">{{ checkedProps.summary }}</slot></span>{{ ' ' }}<span
+          class="indicator"
+          aria-hidden="true"
+          data-hn-ui-disclosure
+        ><slot name="indicator"><span class="chevron" data-hn-ui-disclosure></span></slot></span>
       </button>
     </div>
     <div class="panel" data-hn-ui-disclosure :id="contentId" ref="panelElement">

package/vue/UiEditable.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'
@@ -377,12 +377,12 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
         :disabled="checkedProps.disabled ?? undefined"
         ref="previewElement"
       >
-        <span class="text">{{ internalValue }}</span>
-        <span v-if="checkedProps.hint" class="hint" aria-hidden="true">{{
-          checkedProps.hint
-        }}</span>
-      </button>
-      <input
+        <span class="text">{{ internalValue }}</span>{{ ' ' }}<span
+          v-if="checkedProps.hint"
+          class="hint"
+          aria-hidden="true"
+        >{{ checkedProps.hint }}</span>
+      </button>{{ ' ' }}<input
         class="input"
         type="text"
         v-bind-control="{ tag: 'input', name: 'value', value: draft, nativeProperty: true, defaultValue: '' }"
@@ -394,8 +394,12 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
       >
     </div>
     <div v-if="checkedProps.actions" class="actions">
-      <button class="save" type="button">{{ checkedProps.saveLabel }}</button>
-      <button class="cancel" type="button">{{ checkedProps.cancelLabel }}</button>
+      <button class="save" type="button">{{ checkedProps.saveLabel }}</button>{{ ' ' }}<button
+        class="cancel"
+        type="button"
+      >
+        {{ checkedProps.cancelLabel }}
+      </button>
     </div>
   </div>
 </template>

package/vue/UiEditorBlockActions.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'
@@ -119,8 +119,9 @@ useComponentHost(() => import('../components/ui-editor-block-actions/ui-editor-b
       aria-label="Block actions"
       :for="checkedProps.for"
       :placement="checkedProps.placement"
-    ><UiMenuItem value="insert-below">Insert paragraph below</UiMenuItem>
-      <UiMenuItem value="duplicate">Duplicate block</UiMenuItem>
-      <UiMenuItem value="delete">Delete block</UiMenuItem></UiMenu>
+    ><UiMenuItem value="insert-below">Insert paragraph below</UiMenuItem>{{ ' ' }}<UiMenuItem
+        value="duplicate"
+      >Duplicate block</UiMenuItem>{{ ' ' }}<UiMenuItem value="delete"
+      >Delete block</UiMenuItem></UiMenu>
   </div>
 </template>

package/vue/UiEditorChipEditor.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'
@@ -149,16 +149,14 @@ useComponentHost(() => import('../components/ui-editor-chip-editor/ui-editor-chi
         placeholder="Set a label"
         aria-label="Chip text"
         :value="checkedProps.label"
-      />
-      <UiRadioGroup
+      />{{ ' ' }}<UiRadioGroup
         label="Chip color"
         label-visibility="sr-only"
         :value="checkedProps.color"
-      ><UiSwatch tone="neutral" />
-        <UiSwatch tone="blue" />
-        <UiSwatch tone="green" />
-        <UiSwatch tone="yellow" />
-        <UiSwatch tone="red" />
-        <UiSwatch tone="purple" /></UiRadioGroup></UiStack>
+      ><UiSwatch tone="neutral" />{{ ' ' }}<UiSwatch tone="blue" />{{ ' ' }}<UiSwatch
+          tone="green"
+        />{{ ' ' }}<UiSwatch tone="yellow" />{{ ' ' }}<UiSwatch tone="red" />{{ ' ' }}<UiSwatch
+          tone="purple"
+        /></UiRadioGroup></UiStack>
   </div>
 </template>

package/vue/UiEditorCodeLanguage.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'
@@ -142,8 +142,8 @@ useComponentHost(() => import('../components/ui-editor-code-language/ui-editor-c
       label="Code language"
       label-visibility="sr-only"
       size="sm"
-      filter="label"
       :disclosure="true"
+      filter="label"
       :value="checkedProps.value"
     ><KeyedBoundary><option
           v-for="language in uniqueKeys(checkedProps.languages ?? [], (language, index, loop) => language.value)"

package/vue/UiEditorImageToolbar.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'
@@ -338,8 +338,8 @@ useComponentHost(() => import('../components/ui-editor-image-toolbar/ui-editor-i
     ref="root"
   >
     <UiText as="div" font="sans"><UiEditorToolbar
-        aria-label="Image actions"
         :floating="true"
+        aria-label="Image actions"
       ><UiIconButton
           label="Image in line"
           size="sm"
@@ -347,48 +347,46 @@ useComponentHost(() => import('../components/ui-editor-image-toolbar/ui-editor-i
           :id="guarded"
           :variant="guardedBinding"
           :aria-pressed="guardedBinding2"
-        ><UiIcon name="panel-top" /></UiIconButton>
-        <UiIconButton
+        ><UiIcon name="panel-top" /></UiIconButton>{{ ' ' }}<UiIconButton
           label="Center image"
           size="sm"
           data-placement="center"
           :id="guardedBinding3"
           :variant="guardedBinding4"
           :aria-pressed="guardedBinding5"
-        ><UiIcon name="align-center" /></UiIconButton>
-        <UiIconButton
+        ><UiIcon name="align-center" /></UiIconButton>{{ ' ' }}<UiIconButton
           label="Wrap text to the right"
           size="sm"
           data-placement="wrap-left"
           :id="guardedBinding6"
           :variant="guardedBinding7"
           :aria-pressed="guardedBinding8"
-        ><UiIcon name="panel-left" /></UiIconButton>
-        <UiIconButton
+        ><UiIcon name="panel-left" /></UiIconButton>{{ ' ' }}<UiIconButton
           label="Wrap text to the left"
           size="sm"
           data-placement="wrap-right"
           :id="guardedBinding9"
           :variant="guardedBinding10"
           :aria-pressed="guardedBinding11"
-        ><UiIcon name="panel-right" /></UiIconButton>
-        <UiIconButton label="Image description" size="sm" variant="ghost" :id="base"><UiIcon
-            name="file-text"
-          /></UiIconButton>
-        <UiIconButton
+        ><UiIcon name="panel-right" /></UiIconButton>{{ ' ' }}<UiIconButton
+          label="Image description"
+          size="sm"
+          variant="ghost"
+          :id="base"
+        ><UiIcon name="file-text" /></UiIconButton>{{ ' ' }}<UiIconButton
           label="Delete image"
           size="sm"
           variant="ghost"
           data-action="delete"
           :id="guardedBinding12"
-        ><UiIcon name="trash" /></UiIconButton></UiEditorToolbar>
-      <UiTooltip :for="guardedBinding13">Image in line</UiTooltip>
-      <UiTooltip :for="guardedBinding14">Center image</UiTooltip>
-      <UiTooltip :for="guardedBinding15">Wrap text to the right</UiTooltip>
-      <UiTooltip :for="guardedBinding16">Wrap text to the left</UiTooltip>
-      <UiTooltip :for="base">Image description</UiTooltip>
-      <UiTooltip :for="guardedBinding17">Delete image</UiTooltip>
-      <UiPopover
+        ><UiIcon name="trash" /></UiIconButton></UiEditorToolbar>{{ ' ' }}<UiTooltip
+        :for="guardedBinding13"
+      >Image in line</UiTooltip>{{ ' ' }}<UiTooltip :for="guardedBinding14"
+      >Center image</UiTooltip>{{ ' ' }}<UiTooltip :for="guardedBinding15"
+      >Wrap text to the right</UiTooltip>{{ ' ' }}<UiTooltip :for="guardedBinding16"
+      >Wrap text to the left</UiTooltip>{{ ' ' }}<UiTooltip :for="base"
+      >Image description</UiTooltip>{{ ' ' }}<UiTooltip :for="guardedBinding17"
+      >Delete image</UiTooltip>{{ ' ' }}<UiPopover
         size="sm"
         aria-label="Image description"
         :for="base"
@@ -401,17 +399,12 @@ useComponentHost(() => import('../components/ui-editor-image-toolbar/ui-editor-i
                 :id="guardedBinding19"
                 :value="draft"
                 ref="altElement"
-              /></UiFormField>
-            <UiText size="xs" tone="secondary"
-            >Describe the image for people using a screen reader.</UiText>
-            <UiCluster justify="end" gap="xs"><UiButton
-                type="button"
-                variant="ghost"
-                tone="neutral"
-                size="sm"
-                data-action="cancel"
-              >Cancel</UiButton>
-              <UiButton type="submit" variant="solid" size="sm"
+              /></UiFormField>{{ ' ' }}<UiText size="xs" tone="secondary"
+            >Describe the image for people using a screen reader.</UiText>{{ ' ' }}<UiCluster
+              justify="end"
+              gap="xs"
+            ><UiButton type="button" variant="ghost" tone="neutral" size="sm" data-action="cancel"
+              >Cancel</UiButton>{{ ' ' }}<UiButton type="submit" variant="solid" size="sm"
               >Save</UiButton></UiCluster></UiStack>
         </form></UiPopover></UiText>
   </div>

package/vue/UiEditorInsertTableGrid.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/UiEditorLinkCard.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'
@@ -272,22 +272,21 @@ useComponentHost(() => import('../components/ui-editor-link-card/ui-editor-link-
         wrap="nowrap"
         role="group"
         aria-label="Link actions"
-      ><UiIcon :name="guarded" />
-        <UiStack gap="none" :title="checkedProps.href" :aria-label="guardedBinding"><UiText
-            as="strong"
-            size="sm"
-            weight="medium"
-            font="sans"
-            wrap="anywhere"
-          >{{ text(shown) }}</UiText>
-          <UiText
+      ><UiIcon :name="guarded" />{{ ' ' }}<UiStack
+          gap="none"
+          :title="checkedProps.href"
+          :aria-label="guardedBinding"
+        ><UiText as="strong" size="sm" weight="medium" font="sans" wrap="anywhere">{{
+            text(shown)
+          }}</UiText>{{ ' ' }}<UiText
             v-if="checkedProps.detail !== ''"
             as="small"
             size="xs"
             tone="secondary"
             font="sans"
-          >{{ checkedProps.detail }}</UiText></UiStack>
-        <template v-if="checkedProps.openHref !== ''"><UiButton
+          >{{ checkedProps.detail }}</UiText></UiStack>{{ ' ' }}<template
+          v-if="checkedProps.openHref !== ''"
+        >{{ ' ' }}<UiButton
             as="a"
             variant="ghost"
             tone="neutral"
@@ -298,23 +297,21 @@ useComponentHost(() => import('../components/ui-editor-link-card/ui-editor-link-
             :id="guardedBinding2"
             :href="checkedProps.openHref"
           ><UiCluster gap="xs" wrap="nowrap"><UiIcon name="external-link" />Open
-              link</UiCluster></UiButton>
-          <UiTooltip :for="guardedBinding3">Open link</UiTooltip></template>
-        <UiIconButton
+              link</UiCluster></UiButton>{{ ' ' }}<UiTooltip :for="guardedBinding3"
+          >Open link</UiTooltip>{{ ' ' }}</template>{{ ' ' }}<UiIconButton
           label="Edit link"
           variant="ghost"
           size="sm"
           data-link-action="edit"
           :id="guardedBinding4"
-        ><UiIcon name="pencil" /></UiIconButton>
-        <UiTooltip :for="guardedBinding5">Edit link</UiTooltip>
-        <UiIconButton
+        ><UiIcon name="pencil" /></UiIconButton>{{ ' ' }}<UiTooltip :for="guardedBinding5"
+        >Edit link</UiTooltip>{{ ' ' }}<UiIconButton
           label="Remove link"
           variant="ghost"
           size="sm"
           data-link-action="remove"
           :id="guardedBinding6"
-        ><UiIcon name="unlink" /></UiIconButton>
-        <UiTooltip :for="guardedBinding7">Remove link</UiTooltip></UiCluster></UiCard>
+        ><UiIcon name="unlink" /></UiIconButton>{{ ' ' }}<UiTooltip :for="guardedBinding7"
+        >Remove link</UiTooltip></UiCluster></UiCard>
   </div>
 </template>

package/vue/UiEditorLinkForm.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'
@@ -462,8 +462,9 @@ useComponentHost(() => import('../components/ui-editor-link-form/ui-editor-link-
     :data-ui-editor-link-form-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     ref="root"
   >
-    <UiStack gap="s"><UiText as="h3" size="sm" weight="semibold">{{ text(heading) }}</UiText>
-      <UiStack gap="s"><UiFormField :invalid="checkedProps.error !== ''"><label
+    <UiStack gap="s"><UiText as="h3" size="sm" weight="semibold">{{ text(heading) }}</UiText>{{
+        ' '
+      }}<UiStack gap="s"><UiFormField :invalid="checkedProps.error !== ''"><label
             slot="label"
             :for="guarded"
           >{{ text(fieldLabel) }}</label>
@@ -488,8 +489,9 @@ useComponentHost(() => import('../components/ui-editor-link-form/ui-editor-link-
               variant="ghost"
               size="sm"
               data-link-clear=""
-            ><UiIcon name="x" /></UiIconButton></UiInputGroup>
-          <template v-if="!checkedProps.searchable"><UiInput
+            ><UiIcon name="x" /></UiIconButton></UiInputGroup>{{ ' ' }}<template
+            v-if="!checkedProps.searchable"
+          >{{ ' ' }}<UiInput
               data-link-destination=""
               type="text"
               inputmode="url"
@@ -497,15 +499,13 @@ useComponentHost(() => import('../components/ui-editor-link-form/ui-editor-link-
               :id="guardedBinding3"
               :placeholder="checkedProps.placeholder"
               :value="checkedProps.value"
-            /></template></UiFormField>
-        <UiScrollArea
+            />{{ ' ' }}</template></UiFormField>{{ ' ' }}<UiScrollArea
           v-if="checkedProps.mode === 'target'"
           size="sm"
           aria-label="Destination search results"
         ><UiText v-if="checkedProps.status !== ''" size="sm" tone="secondary" role="status">{{
             checkedProps.status
-          }}</UiText>
-          <KeyedBoundary><UiSearchResultRow
+          }}</UiText>{{ ' ' }}<KeyedBoundary><UiSearchResultRow
               v-for="result in uniqueKeys(checkedProps.results ?? [], (result, index, loop) => result.id)"
               :key="result.id"
               density="compact"
@@ -534,24 +534,22 @@ useComponentHost(() => import('../components/ui-editor-link-form/ui-editor-link-
                 v-if="result.id === checkedProps.selected"
                 slot="trailing"
                 name="check"
-              /></UiSearchResultRow></KeyedBoundary></UiScrollArea>
-        <template v-if="checkedProps.mode === 'url'"><UiCheckbox
-            size="sm"
-            data-link-new-tab=""
-            :checked="checkedProps.newTab"
-          >Open in new tab</UiCheckbox></template></UiStack>
-      <template v-if="checkedProps.textEditable"><UiFormField><label
-            slot="label"
-            :for="guardedBinding4"
-          >Text</label>
+              /></UiSearchResultRow></KeyedBoundary></UiScrollArea>{{ ' ' }}<template
+          v-if="checkedProps.mode === 'url'"
+        >{{ ' ' }}<UiCheckbox size="sm" data-link-new-tab="" :checked="checkedProps.newTab"
+          >Open in new tab</UiCheckbox>{{ ' ' }}</template></UiStack>{{ ' ' }}<template
+        v-if="checkedProps.textEditable"
+      >{{ ' ' }}<UiFormField><label slot="label" :for="guardedBinding4">Text</label>
           <UiInput
             data-link-text=""
             size="sm"
             :id="guardedBinding5"
             :value="checkedProps.text"
-          /></UiFormField></template>
-      <UiText v-if="checkedProps.error !== ''" size="sm" tone="danger" role="alert">{{
-        checkedProps.error
-      }}</UiText></UiStack>
+          /></UiFormField>{{ ' ' }}</template>{{ ' ' }}<UiText
+        v-if="checkedProps.error !== ''"
+        size="sm"
+        tone="danger"
+        role="alert"
+      >{{ checkedProps.error }}</UiText></UiStack>
   </form>
 </template>

package/vue/UiEditorMentionMenu.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'
@@ -362,8 +362,12 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
     <div class="header" data-hn-ui-editor-mention-menu><slot name="header" /></div>
     <div v-if="searching" class="loading" role="status" data-hn-ui-editor-mention-menu>
       {{ checkedProps.loadingLabel }}
-    </div>
-    <ul v-if="!searching" class="list" role="presentation" data-hn-ui-editor-mention-menu>
+    </div>{{ ' ' }}<ul
+      v-if="!searching"
+      class="list"
+      role="presentation"
+      data-hn-ui-editor-mention-menu
+    >
       <li
         v-for="(row, index) in rows"
         :key="index"
@@ -378,16 +382,14 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
       >
         <span class="avatar" aria-hidden="true" data-hn-ui-editor-mention-menu>{{
           row.initials
-        }}</span>
-        <span class="body" data-hn-ui-editor-mention-menu><span
+        }}</span>{{ ' ' }}<span class="body" data-hn-ui-editor-mention-menu><span
             class="label"
             data-hn-ui-editor-mention-menu
           >{{ row.label }}</span>
           <span v-if="row.detail" class="detail" data-hn-ui-editor-mention-menu>{{
             row.detail
           }}</span></span>
-      </li>
-      <slot />
+      </li>{{ ' ' }}<slot />
     </ul>
     <div class="empty" data-hn-ui-editor-mention-menu ref="emptyElement"><slot name="empty" /></div>
   </div>

package/vue/UiEditorMentionMenuItem.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'
@@ -87,11 +87,10 @@ checkHydratedRoot('li', 'ui-editor-mention-menu-item')
   >
     <span class="avatar" aria-hidden="true" data-hn-ui-editor-mention-menu-item><slot
         name="start"
-      >{{ checkedProps.initials }}</slot></span>
-    <span class="body" data-hn-ui-editor-mention-menu-item><span
-        class="label"
-        data-hn-ui-editor-mention-menu-item
-      ><slot /></span>
+      >{{ checkedProps.initials }}</slot></span>{{ ' ' }}<span
+      class="body"
+      data-hn-ui-editor-mention-menu-item
+    ><span class="label" data-hn-ui-editor-mention-menu-item><slot /></span>
       <span v-if="checkedProps.detail" class="detail" data-hn-ui-editor-mention-menu-item>{{
         checkedProps.detail
       }}</span></span>

package/vue/UiEditorSlashMenu.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'
@@ -327,16 +327,14 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
         <span class="icon" aria-hidden="true" data-hn-ui-editor-slash-menu><UiIcon
             class="ui-icon"
             :name="item.icon"
-          /></span>
-        <span class="body" data-hn-ui-editor-slash-menu><span
+          /></span>{{ ' ' }}<span class="body" data-hn-ui-editor-slash-menu><span
             class="title"
             data-hn-ui-editor-slash-menu
           >{{ item.title }}</span>
           <span class="description" data-hn-ui-editor-slash-menu>{{
             item.description
           }}</span></span>
-      </li>
-      <slot />
+      </li>{{ ' ' }}<slot />
     </ul>
     <div class="empty" data-hn-ui-editor-slash-menu ref="emptyElement"><slot name="empty" /></div>
     <div class="footer" data-hn-ui-editor-slash-menu><slot name="footer" /></div>

package/vue/UiEditorSlashMenuGroup.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/UiEditorSlashMenuItem.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'
@@ -131,11 +131,10 @@ checkHydratedRoot('li', 'ui-editor-slash-menu-item')
       class="icon"
       aria-hidden="true"
       data-hn-ui-editor-slash-menu-item
-    ><UiIcon class="ui-icon" :name="checkedProps.icon" /></span>
-    <span class="body" data-hn-ui-editor-slash-menu-item><span
-        class="title"
-        data-hn-ui-editor-slash-menu-item
-      ><slot /></span>
+    ><UiIcon class="ui-icon" :name="checkedProps.icon" /></span>{{ ' ' }}<span
+      class="body"
+      data-hn-ui-editor-slash-menu-item
+    ><span class="title" data-hn-ui-editor-slash-menu-item><slot /></span>
       <span v-if="checkedProps.description" class="description" data-hn-ui-editor-slash-menu-item>{{
         checkedProps.description
       }}</span></span>

package/vue/UiEditorSurface.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/UiEditorTableContextMenu.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'
@@ -470,12 +470,10 @@ useComponentHost(
               class="swatch"
               :class="{ default: !swatch.color }"
               :style="{ '--_swatch': swatch.color }"
-            ></span>
-            <span class="swatch-label">{{ swatch.label }}</span>
+            ></span>{{ ' ' }}<span class="swatch-label">{{ swatch.label }}</span>
           </button></KeyedBoundary>
       </div>
-    </div>
-    <KeyedBoundary><template
+    </div>{{ ' ' }}<KeyedBoundary><template
         v-for="section in uniqueKeys(sections, (section, indexLoop, loop) => section.heading)"
         :key="section.heading"
       ><div class="sep"></div>
@@ -518,8 +516,7 @@ useComponentHost(
               :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></template></KeyedBoundary>
   </div>