@threadlabs/looma 0.29.18 → 0.30.0

package/vue/UiEditorLinkForm.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -464,15 +464,10 @@ useComponentHost(() => import('../components/ui-editor-link-form/ui-editor-link-
   >
     <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>
-          <UiInputGroup v-if="checkedProps.searchable" prefix-kind="icon"><UiIcon
-              slot="prefix"
-              :name="guardedBinding"
-            />
-            <UiInput
+      }}<UiStack gap="s"><UiFormField :invalid="checkedProps.error !== ''"><UiInputGroup
+            v-if="checkedProps.searchable"
+            prefix-kind="icon"
+          ><UiInput
               data-link-destination=""
               data-link-search=""
               type="text"
@@ -482,14 +477,15 @@ useComponentHost(() => import('../components/ui-editor-link-form/ui-editor-link-
               :placeholder="checkedProps.placeholder"
               :value="checkedProps.value"
             />
-            <UiIconButton
-              v-if="checkedProps.value !== ''"
-              slot="action"
-              label="Clear search"
-              variant="ghost"
-              size="sm"
-              data-link-clear=""
-            ><UiIcon name="x" /></UiIconButton></UiInputGroup>{{ ' ' }}<template
+            <template #prefix><UiIcon slot="prefix" :name="guardedBinding" /></template>
+            <template #action><UiIconButton
+                v-if="checkedProps.value !== ''"
+                slot="action"
+                label="Clear search"
+                variant="ghost"
+                size="sm"
+                data-link-clear=""
+              ><UiIcon name="x" /></UiIconButton></template></UiInputGroup>{{ ' ' }}<template
             v-if="!checkedProps.searchable"
           >{{ ' ' }}<UiInput
               data-link-destination=""
@@ -499,7 +495,10 @@ useComponentHost(() => import('../components/ui-editor-link-form/ui-editor-link-
               :id="guardedBinding3"
               :placeholder="checkedProps.placeholder"
               :value="checkedProps.value"
-            />{{ ' ' }}</template></UiFormField>{{ ' ' }}<UiScrollArea
+            />{{ ' ' }}</template>
+          <template #label><label slot="label" :for="guarded">{{
+              text(fieldLabel)
+            }}</label></template></UiFormField>{{ ' ' }}<UiScrollArea
           v-if="checkedProps.mode === 'target'"
           size="sm"
           aria-label="Destination search results"
@@ -512,40 +511,41 @@ useComponentHost(() => import('../components/ui-editor-link-form/ui-editor-link-
               data-link-result=""
               :selected="result.id === checkedProps.selected"
               :data-link-id="result.id"
-            ><UiIcon slot="leading" name="file-text" />
-              <UiText
-                slot="title"
-                as="strong"
-                size="sm"
-                weight="medium"
-                :truncate="true"
-                :title="result.label"
-              >{{ result.label }}</UiText>
-              <UiText
-                v-if="result.detail"
-                slot="meta"
-                as="span"
-                size="xs"
-                tone="secondary"
-                :truncate="true"
-                :title="result.detail"
-              >{{ result.detail }}</UiText>
-              <UiIcon
-                v-if="result.id === checkedProps.selected"
-                slot="trailing"
-                name="check"
-              /></UiSearchResultRow></KeyedBoundary></UiScrollArea>{{ ' ' }}<template
+            ><template #leading><UiIcon slot="leading" name="file-text" /></template>
+              <template #title><UiText
+                  slot="title"
+                  as="strong"
+                  size="sm"
+                  weight="medium"
+                  :truncate="true"
+                  :title="result.label"
+                >{{ result.label }}</UiText></template>
+              <template #meta><UiText
+                  v-if="result.detail"
+                  slot="meta"
+                  as="span"
+                  size="xs"
+                  tone="secondary"
+                  :truncate="true"
+                  :title="result.detail"
+                >{{ result.detail }}</UiText></template>
+              <template #trailing><UiIcon
+                  v-if="result.id === checkedProps.selected"
+                  slot="trailing"
+                  name="check"
+                /></template></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
+      >{{ ' ' }}<UiFormField><UiInput
             data-link-text=""
             size="sm"
             :id="guardedBinding5"
             :value="checkedProps.text"
-          /></UiFormField>{{ ' ' }}</template>{{ ' ' }}<UiText
+          />
+          <template #label><label slot="label" :for="guardedBinding4"
+            >Text</label></template></UiFormField>{{ ' ' }}</template>{{ ' ' }}<UiText
         v-if="checkedProps.error !== ''"
         size="sm"
         tone="danger"

package/vue/UiEditorMentionMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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/UiEditorMentionMenuItem.vue

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

package/vue/UiEditorSlashMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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/UiEditorSlashMenuGroup.vue

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

package/vue/UiEditorSurface.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -44,7 +44,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('div', 'ui-editor-surface')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.density && 'density',

package/vue/UiEditorTableContextMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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/UiEditorTableOverlay.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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/UiEditorTableToolbar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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/UiEditorToolbar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -49,7 +49,7 @@ const root = ref<HTMLElement | null>(null)
 const stripElement = useTemplateRef<HTMLElement>('stripElement')
 checkHydratedRoot('div', 'ui-editor-toolbar')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.floating && 'floating',

package/vue/UiFloatingActionButton.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -72,7 +72,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('button', 'ui-floating-action-button')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.mobileOnly && 'mobileOnly',

package/vue/UiFormField.d.ts

@@ -3,7 +3,7 @@ declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_1) => any;
 } & {
-    'label-action'?: (props: typeof __VLS_3) => any;
+    labelAction?: (props: typeof __VLS_3) => any;
 } & {
     default?: (props: typeof __VLS_5) => any;
 } & {

package/vue/UiFormField.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -80,7 +80,7 @@ const hydrationInstance = getCurrentInstance()
 const root = ref<HTMLElement | null>(null)
 checkHydratedRoot('div', 'ui-form-field')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.invalid && 'invalid',
@@ -125,7 +125,7 @@ useComponentHost(() => import('../components/ui-form-field/ui-form-field.js'), {
   >
     <div class="label" data-hn-ui-form-field>
       <slot name="label" />{{ ' ' }}<span class="label-action" data-hn-ui-form-field><slot
-          name="label-action"
+          name="labelAction"
         /></span>
     </div>
     <slot />

package/vue/UiGrid.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -71,7 +71,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('div', 'ui-grid')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.gap && 'gap',

package/vue/UiIcon.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -439,7 +439,7 @@ const shapes = cycleCheckedComputed(() =>
 )
 checkHydratedRoot('span', 'ui-icon')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.tone && 'tone',

package/vue/UiIconButton.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -280,7 +280,7 @@ const guarded = computed(() => {
 })
 checkHydratedRoot('button', 'ui-icon-button')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.tone && 'tone',

package/vue/UiImage.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -166,7 +166,7 @@ const root = ref<HTMLElement | null>(null)
 const frameElement = useTemplateRef<HTMLElement>('frameElement')
 checkHydratedRoot('figure', 'ui-image')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.placement && 'placement',

package/vue/UiInput.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script
   setup
   lang="ts"
@@ -400,7 +400,7 @@ const model = computed({
 const root = ref<HTMLElement | null>(null)
 checkHydratedRoot('input', 'ui-input')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.size && 'size',

package/vue/UiInputGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -123,7 +123,7 @@ const hydrationInstance = getCurrentInstance()
 const root = ref<HTMLElement | null>(null)
 checkHydratedRoot('div', 'ui-input-group')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.variant && 'variant',

package/vue/UiList.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -103,7 +103,7 @@ const root = rootArmElement
 preserveRootFocus(root)
 checkHydratedRoot((checkedProps.value.as === 'ol') ? 'ol' : ('ul'), 'ui-list')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.as && 'as',

package/vue/UiListItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -129,7 +129,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('li', 'ui-list-item')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.variant && 'variant',

package/vue/UiListbox.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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/UiMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -186,7 +186,7 @@ const internalOpen = ref(false)
 provide('html-next:ui-menu:internalOpen', internalOpen)
 checkHydratedRoot('div', 'ui-menu')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.density && 'density',

package/vue/UiMenuGroup.vue

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

package/vue/UiMenuItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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'
@@ -187,7 +187,7 @@ checkHydratedRoot(
   'ui-menu-item',
 )
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.tone && 'tone',

package/vue/UiMeter.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -784,7 +784,7 @@ const guardedBinding7 = computed(() => {
 })
 checkHydratedRoot('span', 'ui-meter')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.size && 'size',

package/vue/UiNavItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -236,7 +236,7 @@ const guardedBinding = computed(() => {
 })
 checkHydratedRoot((checkedProps.value.as === 'a') ? 'a' : ('button'), 'ui-nav-item')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.variant && 'variant',

package/vue/UiPageHeader.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -41,7 +41,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('header', 'ui-page-header')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.align && 'align',

package/vue/UiPopover.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -177,7 +177,7 @@ const internalOpen = ref(false)
 provide('html-next:ui-popover:internalOpen', internalOpen)
 checkHydratedRoot('span', 'ui-popover')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     internalOpen.value && 'internalOpen',

package/vue/UiRadio.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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'
@@ -155,7 +155,7 @@ const internalChecked = ref(false)
 provide('html-next:ui-radio:internalChecked', internalChecked)
 checkHydratedRoot('label', 'ui-radio')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.disabled && 'disabled',

package/vue/UiRadioGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -201,7 +201,7 @@ const internalValue = ref('')
 provide('html-next:ui-radio-group:internalValue', internalValue)
 checkHydratedRoot('fieldset', 'ui-radio-group')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.invalid && 'invalid',

package/vue/UiReel.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -72,7 +72,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('div', 'ui-reel')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.gap && 'gap',
@@ -121,12 +121,14 @@ const hostState = computed(() =>
 
 @scope (.ui-reel) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-reel])) {
-    /* Hooks do not inherit, so the parts below read them from the root. */
-    --_ui-reel-item-width: var(--ui-reel-item-width);
-
     --_reel-gap: var(--ui-space-4);
-    --_reel-item-width: auto;
-    display: flex;
+    --_reel-item-width: max-content;
+    /* Sizes its children from its own box: one row of columns, each the item width, that never
+       shrinks to fit, so the reel scrolls once they overflow. */
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: var(--ui-reel-item-width, var(--_reel-item-width));
+    justify-content: start;
     inline-size: 100%;
     gap: var(--ui-reel-gap, var(--_reel-gap));
     min-inline-size: 0;
@@ -163,11 +165,6 @@ const hostState = computed(() =>
     --_ui-scroll-fade-direction: to left;
   }
 
-  :global(:scope > :where(:not([data-hn-ui-reel])):is(*)) {
-    min-inline-size: 0;
-    flex: 0 0 var(--_ui-reel-item-width, var(--_reel-item-width));
-  }
-
   :global(:scope[data-ui-reel-state~="gap=xs"]:where([data-hn-ui-reel])) {
     --_reel-gap: var(--ui-space-2);
   }

package/vue/UiScrollArea.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -131,11 +131,10 @@ const root = ref<HTMLElement | null>(null)
 const contentElement = useTemplateRef<HTMLElement>('contentElement')
 checkHydratedRoot('div', 'ui-scroll-area')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.fill && 'fill',
-    checkedProps.value.trim && 'trim',
     checkedProps.value.orientation && 'orientation',
     checkedProps.value.orientation != null
     && `orientation=${encodeURIComponent(checkedProps.value.orientation)}`,
@@ -144,6 +143,7 @@ const hostState = computed(() =>
     checkedProps.value.padding && 'padding',
     checkedProps.value.padding != null
     && `padding=${encodeURIComponent(checkedProps.value.padding)}`,
+    checkedProps.value.trim && 'trim',
   ].filter(Boolean).join(' ')
 )
 

package/vue/UiSearchResultRow.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -80,7 +80,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('button', 'ui-search-result-row')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.density && 'density',

package/vue/UiSearchShell.vue

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