@threadlabs/looma 0.22.8 → 0.22.10

package/vue/UiTable.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 })
 
@@ -27,7 +27,7 @@ const propValidityContract = {
       default: false,
     },
   },
-}
+} as const
 const props = defineProps({
   density: {
     type: null as unknown as PropType<'comfortable' | 'compact' | null>,
@@ -35,18 +35,21 @@ const props = defineProps({
   },
   stickyHeader: { type: null as unknown as PropType<boolean | null>, default: false },
 })
+const acceptedProps: Record<string, unknown> = { density: 'comfortable', stickyHeader: false }
 const checkedProps = computed(() => ({
   density: checkedProp<'comfortable' | 'compact'>(
     props['density'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'density',
+    acceptedProps,
   ) as 'comfortable' | 'compact',
   stickyHeader: checkedProp<boolean>(
     props['stickyHeader'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'stickyHeader',
+    acceptedProps,
   ) as boolean,
 }))
 void checkedProps.value
@@ -122,6 +125,16 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
     definition: './components/ui-table/ui-table.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', 'stickyHeader'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
 </script>
 
@@ -129,7 +142,7 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
   <div
     data-component="ui-table"
     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-sticky-header="reflectedProp('stickyHeader', 'sticky-header', checkedProps.stickyHeader, undefined, false)"
     :data-ui-table-state="hostState || undefined"

package/vue/UiTabs.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,
@@ -12,7 +12,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'
 
 defineOptions({ inheritAttrs: false })
 
@@ -69,7 +69,7 @@ const propValidityContract = {
       default: '',
     },
   },
-}
+} as const
 const props = defineProps({
   activation: { type: null as unknown as PropType<'auto' | 'manual' | null>, default: 'auto' },
   density: {
@@ -84,42 +84,56 @@ const props = defineProps({
   stretch: { type: null as unknown as PropType<boolean | null>, default: false },
   value: { type: null as unknown as PropType<string | null>, default: '' },
 })
+const acceptedProps: Record<string, unknown> = {
+  activation: 'auto',
+  density: 'comfortable',
+  label: 'Tabs',
+  orientation: 'horizontal',
+  stretch: false,
+  value: '',
+}
 const checkedProps = computed(() => ({
   activation: checkedProp<'auto' | 'manual'>(
     props['activation'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'activation',
+    acceptedProps,
   ) as 'auto' | 'manual',
   density: checkedProp<'comfortable' | 'compact'>(
     props['density'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'density',
+    acceptedProps,
   ) as 'comfortable' | 'compact',
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
+    acceptedProps,
   ) as string,
   orientation: checkedProp<'horizontal' | 'vertical'>(
     props['orientation'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'orientation',
+    acceptedProps,
   ) as 'horizontal' | 'vertical',
   stretch: checkedProp<boolean>(
     props['stretch'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'stretch',
+    acceptedProps,
   ) as boolean,
   value: checkedProp<string>(
     props['value'],
     { kind: 'terminal', name: 'string' },
     false,
     'value',
+    acceptedProps,
   ) as string,
 }))
 void checkedProps.value
@@ -257,6 +271,16 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
     definition: './components/ui-tabs/ui-tabs.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: ['activation', 'density', 'label', 'orientation', 'stretch', 'value'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { list: listElement, panels: panelsElement },
   state: { internalValue, tabs },
 })
@@ -299,7 +323,7 @@ function uniqueKeys<T>(
   <div
     data-component="ui-tabs"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-activation="reflectedProp('activation', 'activation', checkedProps.activation, undefined, false)"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"

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"