@threadlabs/looma 0.22.9 → 0.22.10

package/vue/UiText.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -70,7 +70,7 @@ const propValidityContract = {
       default: 'inherit',
     },
   },
-}
+} as const
 const props = defineProps({
   align: { type: null as unknown as PropType<'start' | 'center' | null>, default: 'start' },
   as: {
@@ -107,16 +107,26 @@ const props = defineProps({
     default: 'inherit',
   },
 })
+const acceptedProps: Record<string, unknown> = {
+  align: 'start',
+  as: 'p',
+  size: 'inherit',
+  tone: 'default',
+  truncate: false,
+  variant: 'body',
+  weight: 'inherit',
+}
 const checkedProps = computed(() => ({
   align: checkedProp<'start' | 'center'>(
     props['align'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'align',
+    acceptedProps,
   ) as 'start' | 'center',
   as: checkedProp<
     'p' | 'span' | 'div' | 'small' | 'strong' | 'label' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-  >(props['as'], { kind: 'terminal', name: 'keyword' }, false, 'as') as
+  >(props['as'], { kind: 'terminal', name: 'keyword' }, false, 'as', acceptedProps) as
     | 'p'
     | 'span'
     | 'div'
@@ -133,10 +143,11 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
+    acceptedProps,
   ) as 'inherit' | 'xs' | 'sm' | 'md' | 'lg',
   tone: checkedProp<
     'default' | 'secondary' | 'muted' | 'accent' | 'danger' | 'success' | 'info' | 'warning'
-  >(props['tone'], { kind: 'terminal', name: 'keyword' }, false, 'tone') as
+  >(props['tone'], { kind: 'terminal', name: 'keyword' }, false, 'tone', acceptedProps) as
     | 'default'
     | 'secondary'
     | 'muted'
@@ -150,18 +161,21 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'truncate',
+    acceptedProps,
   ) as boolean,
   variant: checkedProp<'body' | 'eyebrow' | 'code'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
+    acceptedProps,
   ) as 'body' | 'eyebrow' | 'code',
   weight: checkedProp<'inherit' | 'normal' | 'medium' | 'semibold'>(
     props['weight'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'weight',
+    acceptedProps,
   ) as 'inherit' | 'normal' | 'medium' | 'semibold',
 }))
 void checkedProps.value
@@ -262,7 +276,7 @@ const hostState = computed(() =>
     v-if="checkedProps.as === 'span'"
     data-component="ui-text"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -277,7 +291,7 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'div'"
     data-component="ui-text"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -294,7 +308,7 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'small'"
     data-component="ui-text"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -309,7 +323,7 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'strong'"
     data-component="ui-text"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -324,7 +338,7 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'label'"
     data-component="ui-text"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -339,7 +353,7 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'h2'"
     data-component="ui-text"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -356,7 +370,7 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'h3'"
     data-component="ui-text"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -373,7 +387,7 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'h4'"
     data-component="ui-text"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -390,7 +404,7 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'h5'"
     data-component="ui-text"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -407,7 +421,7 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'h6'"
     data-component="ui-text"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -424,7 +438,7 @@ const hostState = computed(() =>
     v-else
     data-component="ui-text"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"

package/vue/UiTextarea.vue

@@ -1,10 +1,10 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { readBoundControl, vBindControl } from './control'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp, vPropValidity } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
@@ -70,7 +70,7 @@ const propValidityContract = {
         'The textarea\'s text. Setting or changing it replaces the live text; between changes the user\'s typing stands, so follow input events to keep it in step. It\n      is also the textarea\'s default, so a form reset returns to it.',
     },
   },
-}
+} as const
 const props = defineProps({
   autosize: { type: null as unknown as PropType<boolean | null>, default: false },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -82,55 +82,79 @@ const props = defineProps({
   value: { type: null as unknown as PropType<string | null>, default: null },
   modelValue: { type: null as unknown as PropType<string | null | undefined> },
 })
+const acceptedProps: Record<string, unknown> = {
+  autosize: false,
+  disabled: false,
+  invalid: false,
+  readonly: false,
+  required: false,
+  rows: 4,
+  size: 'md',
+  value: null,
+}
 const checkedProps = computed(() => ({
   autosize: checkedProp<boolean>(
     props['autosize'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'autosize',
+    acceptedProps,
   ) as boolean,
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
+    acceptedProps,
   ) as boolean,
   invalid: checkedProp<boolean>(
     props['invalid'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'invalid',
+    acceptedProps,
   ) as boolean,
   readonly: checkedProp<boolean>(
     props['readonly'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'readonly',
+    acceptedProps,
   ) as boolean,
   required: checkedProp<boolean>(
     props['required'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'required',
+    acceptedProps,
   ) as boolean,
   rows: checkedProp<number>(
     props['rows'],
     { kind: 'terminal', name: 'integer' },
     false,
     'rows',
+    acceptedProps,
   ) as number,
   size: checkedProp<'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
+    acceptedProps,
   ) as 'sm' | 'md' | 'lg',
-  value: checkedProp<string>(props['value'], { kind: 'terminal', name: 'string' }, false, 'value'),
+  value: checkedProp<string>(
+    props['value'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'value',
+    acceptedProps,
+  ),
   modelValue: checkedProp<string | null>(
     props.modelValue,
     { kind: 'terminal', name: 'string' },
     false,
     'modelValue',
+    acceptedProps,
   ),
 }))
 void checkedProps.value
@@ -215,6 +239,16 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
     definition: './components/ui-textarea/ui-textarea.html',
   },
   props: checkedProps,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['autosize', 'disabled', 'invalid', 'readonly', 'required', 'rows', 'size', 'value'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
 </script>
 
@@ -228,7 +262,7 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
     :aria-invalid="checkedProps.invalid ?? undefined"
     :rows="checkedProps.rows ?? undefined"
     :style="{ '--_rows': checkedProps.rows ?? undefined }"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-autosize="reflectedProp('autosize', 'autosize', checkedProps.autosize, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"

package/vue/UiToast.vue

@@ -1,9 +1,9 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp, vPropValidity } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
 import UiIconButton from './UiIconButton.vue'
 
@@ -29,7 +29,7 @@ const propValidityContract = {
       default: 'neutral',
     },
   },
-}
+} as const
 const props = defineProps({
   duration: { type: null as unknown as PropType<number | null>, default: 0 },
   tone: {
@@ -37,18 +37,21 @@ const props = defineProps({
     default: 'neutral',
   },
 })
+const acceptedProps: Record<string, unknown> = { duration: 0, tone: 'neutral' }
 const checkedProps = computed(() => ({
   duration: checkedProp<number>(
     props['duration'],
     { kind: 'terminal', name: 'number' },
     false,
     'duration',
+    acceptedProps,
   ) as number,
   tone: checkedProp<'neutral' | 'info' | 'success' | 'warning' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
+    acceptedProps,
   ) as 'neutral' | 'info' | 'success' | 'warning' | 'danger',
 }))
 void checkedProps.value
@@ -147,6 +150,16 @@ useComponentHost(() => import('../components/ui-toast/ui-toast.js'), {
     definition: './components/ui-toast/ui-toast.html',
   },
   props: checkedProps,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['duration', 'tone'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { action: actionElement },
 })
 
@@ -177,7 +190,7 @@ function attribute(value: unknown): any {
         danger: 'alert',
       }) as Record<string, any>)[checkedProps.tone],
     )"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-duration="reflectedProp('duration', 'duration', checkedProps.duration, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-ui-toast-state="hostState || undefined"

package/vue/UiToastRegion.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import {
   computed,
@@ -11,7 +11,7 @@ import {
 } from 'vue'
 import type { PropType, VNode } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp, vPropValidity } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
 import UiIconButton from './UiIconButton.vue'
 
@@ -37,7 +37,7 @@ const propValidityContract = {
       default: 'top',
     },
   },
-}
+} as const
 const props = defineProps({
   duration: { type: null as unknown as PropType<number | null>, default: 0 },
   placement: {
@@ -47,16 +47,18 @@ const props = defineProps({
     default: 'top',
   },
 })
+const acceptedProps: Record<string, unknown> = { duration: 0, placement: 'top' }
 const checkedProps = computed(() => ({
   duration: checkedProp<number>(
     props['duration'],
     { kind: 'terminal', name: 'number' },
     false,
     'duration',
+    acceptedProps,
   ) as number,
   placement: checkedProp<
     'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
-  >(props['placement'], { kind: 'terminal', name: 'keyword' }, false, 'placement') as
+  >(props['placement'], { kind: 'terminal', name: 'keyword' }, false, 'placement', acceptedProps) as
     | 'top'
     | 'top-start'
     | 'top-end'
@@ -201,6 +203,16 @@ const { host, ready } = useComponentHost(
       definition: './components/ui-toast-region/ui-toast-region.html',
     },
     props: checkedProps,
+    propInputs: (name: string) => {
+      const incoming = hydrationInstance?.vnode.props
+      const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+      return incoming !== null && incoming !== undefined
+        ? (incoming[name] ?? incoming[kebab] ?? null)
+        : null
+    },
+    propNames: ['duration', 'placement'],
+    propValidity: (name: string) =>
+      propValidityState({ contract: propValidityContract, values: { ...props } }, name),
     state: { toasts },
   },
 )
@@ -267,7 +279,7 @@ function uniqueKeys<T>(
     aria-live="polite"
     popover="manual"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-duration="reflectedProp('duration', 'duration', checkedProps.duration, undefined, false)"
     :data-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
     :data-ui-toast-region-state="hostState || undefined"

package/vue/UiTooltip.vue

@@ -1,9 +1,9 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp, vPropValidity } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
@@ -77,7 +77,7 @@ const propValidityContract = {
       default: 'hover',
     },
   },
-}
+} as const
 const props = defineProps({
   for: { type: null as unknown as PropType<string | null>, default: '' },
   hideDelay: { type: null as unknown as PropType<number | null>, default: 100 },
@@ -107,30 +107,43 @@ const props = defineProps({
     default: 'hover',
   },
 })
+const acceptedProps: Record<string, unknown> = {
+  for: '',
+  hideDelay: 100,
+  inverse: false,
+  open: false,
+  placement: 'top',
+  showDelay: 500,
+  trigger: 'hover',
+}
 const checkedProps = computed(() => ({
   for: checkedProp<string>(
     props['for'],
     { kind: 'terminal', name: 'string' },
     false,
     'for',
+    acceptedProps,
   ) as string,
   hideDelay: checkedProp<number>(
     props['hideDelay'],
     { kind: 'terminal', name: 'number' },
     false,
     'hideDelay',
+    acceptedProps,
   ) as number,
   inverse: checkedProp<boolean>(
     props['inverse'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'inverse',
+    acceptedProps,
   ) as boolean,
   open: checkedProp<boolean>(
     props['open'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'open',
+    acceptedProps,
   ) as boolean,
   placement: checkedProp<
     | 'top'
@@ -145,7 +158,7 @@ const checkedProps = computed(() => ({
     | 'right'
     | 'right-start'
     | 'right-end'
-  >(props['placement'], { kind: 'terminal', name: 'keyword' }, false, 'placement') as
+  >(props['placement'], { kind: 'terminal', name: 'keyword' }, false, 'placement', acceptedProps) as
     | 'top'
     | 'top-start'
     | 'top-end'
@@ -163,12 +176,14 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'number' },
     false,
     'showDelay',
+    acceptedProps,
   ) as number,
   trigger: checkedProp<'hover' | 'click' | 'focus'>(
     props['trigger'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'trigger',
+    acceptedProps,
   ) as 'hover' | 'click' | 'focus',
 }))
 void checkedProps.value
@@ -292,6 +307,16 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
     definition: './components/ui-tooltip/ui-tooltip.html',
   },
   props: checkedProps,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['for', 'hideDelay', 'inverse', 'open', 'placement', 'showDelay', 'trigger'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { internalOpen },
 })
 </script>
@@ -302,7 +327,7 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
     role="tooltip"
     v-bind="nativeAttrs($attrs)"
     :hidden="guarded"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
     :data-hide-delay="reflectedProp('hideDelay', 'hide-delay', checkedProps.hideDelay, undefined, false)"
     :data-inverse="reflectedProp('inverse', 'inverse', checkedProps.inverse, undefined, false)"

package/vue/UiTopBar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { getCurrentInstance } from 'vue'
 

package/vue/UiTree.vue

@@ -1,9 +1,9 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp, vPropValidity } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
@@ -59,7 +59,7 @@ const propValidityContract = {
       default: 'none',
     },
   },
-}
+} as const
 const props = defineProps({
   density: {
     type: null as unknown as PropType<'comfortable' | 'compact' | null>,
@@ -74,42 +74,56 @@ const props = defineProps({
     default: 'none',
   },
 })
+const acceptedProps: Record<string, unknown> = {
+  density: 'comfortable',
+  hoverExpandDelay: 700,
+  label: 'Tree',
+  marquee: false,
+  maxDepth: 0,
+  selection: 'none',
+}
 const checkedProps = computed(() => ({
   density: checkedProp<'comfortable' | 'compact'>(
     props['density'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'density',
+    acceptedProps,
   ) as 'comfortable' | 'compact',
   hoverExpandDelay: checkedProp<number>(
     props['hoverExpandDelay'],
     { kind: 'terminal', name: 'number' },
     false,
     'hoverExpandDelay',
+    acceptedProps,
   ) as number,
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
+    acceptedProps,
   ) as string,
   marquee: checkedProp<boolean>(
     props['marquee'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'marquee',
+    acceptedProps,
   ) as boolean,
   maxDepth: checkedProp<number>(
     props['maxDepth'],
     { kind: 'terminal', name: 'number' },
     false,
     'maxDepth',
+    acceptedProps,
   ) as number,
   selection: checkedProp<'none' | 'single' | 'multiple'>(
     props['selection'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'selection',
+    acceptedProps,
   ) as 'none' | 'single' | 'multiple',
 }))
 void checkedProps.value
@@ -283,6 +297,16 @@ useComponentHost(() => import('../components/ui-tree/ui-tree.js'), {
     definition: './components/ui-tree/ui-tree.html',
   },
   props: checkedProps,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['density', 'hoverExpandDelay', 'label', 'marquee', 'maxDepth', 'selection'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
 </script>
 
@@ -291,7 +315,7 @@ useComponentHost(() => import('../components/ui-tree/ui-tree.js'), {
     data-component="ui-tree"
     role="tree"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-hover-expand-delay="reflectedProp(
       'hoverExpandDelay',

package/vue/UiTreeItem.d.ts

@@ -140,8 +140,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>, {
     label: string | null;
     marquee: boolean | null;
-    disabled: boolean | null;
     selected: boolean | null;
+    disabled: boolean | null;
     expanded: boolean | null;
     container: boolean | null;
     lazy: boolean | null;