@threadlabs/looma 0.29.17 → 0.30.0

package/vue/UiEditorImageToolbar.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'
@@ -393,13 +393,16 @@ useComponentHost(() => import('../components/ui-editor-image-toolbar/ui-editor-i
         :open="describing"
         ref="descriptionElement"
       ><form aria-label="Image description">
-          <UiStack gap="s"><UiFormField><label slot="label" :for="guardedBinding18">Alt text</label>
-              <UiInput
+          <UiStack gap="s"><UiFormField><UiInput
                 size="sm"
                 :id="guardedBinding19"
                 :value="draft"
                 ref="altElement"
-              /></UiFormField>{{ ' ' }}<UiText size="xs" tone="secondary"
+              />
+              <template #label><label slot="label" :for="guardedBinding18"
+                >Alt text</label></template></UiFormField>{{ ' ' }}<UiText
+              size="xs"
+              tone="secondary"
             >Describe the image for people using a screen reader.</UiText>{{ ' ' }}<UiCluster
               justify="end"
               gap="xs"

package/vue/UiEditorInsertTableGrid.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/UiEditorLinkCard.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'
@@ -267,16 +267,17 @@ useComponentHost(() => import('../components/ui-editor-link-card/ui-editor-link-
     :data-ui-editor-link-card-prop-target-label="reflectedProp('targetLabel', 'target-label', checkedProps.targetLabel, undefined, false)"
     ref="root"
   >
-    <UiCard variant="elevated" padding="xs" size="content"><UiCluster
+    <UiCard variant="elevated" padding="xs" size="sm"><UiCluster
         gap="xs"
         wrap="nowrap"
         role="group"
         aria-label="Link actions"
       ><UiIcon :name="guarded" />{{ ' ' }}<UiStack
           gap="none"
+          :fill="true"
           :title="checkedProps.href"
           :aria-label="guardedBinding"
-        ><UiText as="strong" size="sm" weight="medium" font="sans" wrap="anywhere">{{
+        ><UiText as="strong" size="sm" weight="medium" font="sans" :truncate="true">{{
             text(shown)
           }}</UiText>{{ ' ' }}<UiText
             v-if="checkedProps.detail !== ''"
@@ -284,6 +285,7 @@ useComponentHost(() => import('../components/ui-editor-link-card/ui-editor-link-
             size="xs"
             tone="secondary"
             font="sans"
+            :truncate="true"
           >{{ checkedProps.detail }}</UiText></UiStack>{{ ' ' }}<template
           v-if="checkedProps.openHref !== ''"
         >{{ ' ' }}<UiButton
@@ -296,8 +298,7 @@ useComponentHost(() => import('../components/ui-editor-link-card/ui-editor-link-
             aria-label="Open link"
             :id="guardedBinding2"
             :href="checkedProps.openHref"
-          ><UiCluster gap="xs" wrap="nowrap"><UiIcon name="external-link" />Open
-              link</UiCluster></UiButton>{{ ' ' }}<UiTooltip :for="guardedBinding3"
+          ><UiIcon name="external-link" /></UiButton>{{ ' ' }}<UiTooltip :for="guardedBinding3"
           >Open link</UiTooltip>{{ ' ' }}</template>{{ ' ' }}<UiIconButton
           label="Edit link"
           variant="ghost"

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.d.ts

@@ -4,13 +4,22 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<string | null>;
         default: string;
     };
+    tone: {
+        type: PropType<"inherit" | "secondary" | "muted" | null>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     name: {
         type: PropType<string | null>;
         default: string;
     };
+    tone: {
+        type: PropType<"inherit" | "secondary" | "muted" | null>;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     name: string | null;
+    tone: "secondary" | "inherit" | "muted" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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'
@@ -24,12 +24,25 @@ const propValidityContract = {
         'Which icon to draw, by its name in Looma\'s icon set (LOOMA_ICONS), such as "align-left". An unknown or empty name draws nothing. The icon is hidden from\n      assistive technology, so name the control it sits in.',
       default: '',
     },
+    tone: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'tone' },
+      description:
+        'Icon colour. inherit follows its control; secondary and muted keep a supporting icon quiet without a text wrapper.',
+      values: ['inherit', 'secondary', 'muted'],
+      default: 'inherit',
+    },
   },
 } as const
 const props = defineProps({
   name: { type: null as unknown as PropType<string | null>, default: '' },
+  tone: {
+    type: null as unknown as PropType<'inherit' | 'secondary' | 'muted' | null>,
+    default: 'inherit',
+  },
 })
-const acceptedProps: Record<string, unknown> = { name: '' }
+const acceptedProps: Record<string, unknown> = { name: '', tone: 'inherit' }
 const checkedProps = computed(() => ({
   name: checkedProp<string>(
     props['name'],
@@ -38,6 +51,13 @@ const checkedProps = computed(() => ({
     'name',
     acceptedProps,
   ) as string,
+  tone: checkedProp<'inherit' | 'secondary' | 'muted'>(
+    props['tone'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'tone',
+    acceptedProps,
+  ) as 'inherit' | 'secondary' | 'muted',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -418,6 +438,14 @@ const shapes = cycleCheckedComputed(() =>
   }) as Record<string, any>)[checkedProps.value.name]
 )
 checkHydratedRoot('span', 'ui-icon')
+
+/** The values the styles' :host() and :state() rules test. */
+const hostState = computed(() =>
+  [
+    checkedProps.value.tone && 'tone',
+    checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
+  ].filter(Boolean).join(' ')
+)
 </script>
 
 <template>
@@ -428,6 +456,8 @@ checkHydratedRoot('span', 'ui-icon')
     data-hn
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-ui-icon-prop-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
+    :data-ui-icon-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-icon-state="hostState || undefined"
   ><svg
       viewBox="0 0 24 24"
       fill="none"
@@ -493,6 +523,14 @@ checkHydratedRoot('span', 'ui-icon')
     block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
   }
 
+  :global(:scope[data-ui-icon-state~="tone=secondary"]) {
+    color: var(--ui-text-secondary);
+  }
+
+  :global(:scope[data-ui-icon-state~="tone=muted"]) {
+    color: var(--ui-text-muted);
+  }
+
   :global(svg) {
     inline-size: 100%;
     block-size: 100%;

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',