@threadlabs/looma 0.22.8 → 0.22.10

package/vue/UiPageHeader.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, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -18,16 +18,18 @@ const propValidityContract = {
       default: 'start',
     },
   },
-}
+} as const
 const props = defineProps({
   align: { type: null as unknown as PropType<'start' | 'center' | null>, default: 'start' },
 })
+const acceptedProps: Record<string, unknown> = { align: 'start' }
 const checkedProps = computed(() => ({
   align: checkedProp<'start' | 'center'>(
     props['align'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'align',
+    acceptedProps,
   ) as 'start' | 'center',
 }))
 void checkedProps.value
@@ -98,7 +100,7 @@ const hostState = computed(() =>
   <header
     data-component="ui-page-header"
     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-ui-page-header-state="hostState || undefined"
   >

package/vue/UiPopover.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 })
 
@@ -46,7 +46,7 @@ const propValidityContract = {
       default: 'bottom-start',
     },
   },
-}
+} as const
 const props = defineProps({
   for: { type: null as unknown as PropType<string | null>, default: '' },
   open: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -69,18 +69,21 @@ const props = defineProps({
     default: 'bottom-start',
   },
 })
+const acceptedProps: Record<string, unknown> = { for: '', open: false, placement: 'bottom-start' }
 const checkedProps = computed(() => ({
   for: checkedProp<string>(
     props['for'],
     { kind: 'terminal', name: 'string' },
     false,
     'for',
+    acceptedProps,
   ) as string,
   open: checkedProp<boolean>(
     props['open'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'open',
+    acceptedProps,
   ) as boolean,
   placement: checkedProp<
     | 'top'
@@ -95,7 +98,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'
@@ -222,6 +225,16 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
     definition: './components/ui-popover/ui-popover.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', 'open', 'placement'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { internalOpen },
 })
 </script>
@@ -230,7 +243,7 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
   <span
     data-component="ui-popover"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
     :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     :data-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"

package/vue/UiRadio.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, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { vBindControl } from './control'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp, vPropValidity } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
@@ -60,7 +60,7 @@ const propValidityContract = {
       default: 'on',
     },
   },
-}
+} as const
 const props = defineProps({
   checked: { type: null as unknown as PropType<boolean | null>, default: false },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -69,42 +69,56 @@ const props = defineProps({
   size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
   value: { type: null as unknown as PropType<string | null>, default: 'on' },
 })
+const acceptedProps: Record<string, unknown> = {
+  checked: false,
+  disabled: false,
+  name: '',
+  required: false,
+  size: 'md',
+  value: 'on',
+}
 const checkedProps = computed(() => ({
   checked: checkedProp<boolean>(
     props['checked'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'checked',
+    acceptedProps,
   ) as boolean,
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
+    acceptedProps,
   ) as boolean,
   name: checkedProp<string>(
     props['name'],
     { kind: 'terminal', name: 'string' },
     false,
     'name',
+    acceptedProps,
   ) as string,
   required: checkedProp<boolean>(
     props['required'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'required',
+    acceptedProps,
   ) as boolean,
   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',
+    acceptedProps,
   ) as string,
 }))
 void checkedProps.value
@@ -209,6 +223,16 @@ useComponentHost(() => import('../components/ui-radio/ui-radio.js'), {
     definition: './components/ui-radio/ui-radio.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: ['checked', 'disabled', 'name', 'required', 'size', 'value'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { input: inputElement, description: descriptionElement },
   state: { internalChecked },
 })
@@ -218,7 +242,7 @@ useComponentHost(() => import('../components/ui-radio/ui-radio.js'), {
   <label
     data-component="ui-radio"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"

package/vue/UiRadioGroup.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 })
 
@@ -67,7 +67,7 @@ const propValidityContract = {
       default: '',
     },
   },
-}
+} as const
 const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   invalid: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -80,48 +80,64 @@ const props = defineProps({
   required: { 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> = {
+  disabled: false,
+  invalid: false,
+  label: 'Options',
+  name: '',
+  orientation: 'horizontal',
+  required: false,
+  value: '',
+}
 const checkedProps = computed(() => ({
   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,
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
+    acceptedProps,
   ) as string,
   name: checkedProp<string>(
     props['name'],
     { kind: 'terminal', name: 'string' },
     false,
     'name',
+    acceptedProps,
   ) as string,
   orientation: checkedProp<'horizontal' | 'vertical'>(
     props['orientation'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'orientation',
+    acceptedProps,
   ) as 'horizontal' | 'vertical',
   required: checkedProp<boolean>(
     props['required'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'required',
+    acceptedProps,
   ) as boolean,
   value: checkedProp<string>(
     props['value'],
     { kind: 'terminal', name: 'string' },
     false,
     'value',
+    acceptedProps,
   ) as string,
 }))
 void checkedProps.value
@@ -247,6 +263,16 @@ useComponentHost(() => import('../components/ui-radio-group/ui-radio-group.js'),
     definition: './components/ui-radio-group/ui-radio-group.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: ['disabled', 'invalid', 'label', 'name', 'orientation', 'required', 'value'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { internalValue },
 })
 </script>
@@ -259,7 +285,7 @@ useComponentHost(() => import('../components/ui-radio-group/ui-radio-group.js'),
     :aria-required="checkedProps.required ?? undefined"
     :aria-invalid="checkedProps.invalid ?? undefined"
     :disabled="checkedProps.disabled ?? undefined"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"

package/vue/UiReel.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, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -33,30 +33,34 @@ const propValidityContract = {
       values: ['start', 'center'],
     },
   },
-}
+} as const
 const props = defineProps({
   gap: { type: null as unknown as PropType<'xs' | 's' | 'm' | 'l' | 'xl' | null>, default: null },
   itemWidth: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: null },
   snap: { type: null as unknown as PropType<'start' | 'center' | null>, default: null },
 })
+const acceptedProps: Record<string, unknown> = { gap: null, itemWidth: null, snap: null }
 const checkedProps = computed(() => ({
   gap: checkedProp<'xs' | 's' | 'm' | 'l' | 'xl'>(
     props['gap'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'gap',
+    acceptedProps,
   ),
   itemWidth: checkedProp<'sm' | 'md' | 'lg'>(
     props['itemWidth'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'itemWidth',
+    acceptedProps,
   ),
   snap: checkedProp<'start' | 'center'>(
     props['snap'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'snap',
+    acceptedProps,
   ),
 }))
 void checkedProps.value
@@ -131,7 +135,7 @@ const hostState = computed(() =>
     role="region"
     tabindex="0"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
     :data-item-width="reflectedProp('itemWidth', 'item-width', checkedProps.itemWidth, undefined, false)"
     :data-snap="reflectedProp('snap', 'snap', checkedProps.snap, undefined, false)"

package/vue/UiScrollArea.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'
 
 defineOptions({ inheritAttrs: false })
 
@@ -19,19 +19,21 @@ const propValidityContract = {
       default: 'vertical',
     },
   },
-}
+} as const
 const props = defineProps({
   orientation: {
     type: null as unknown as PropType<'vertical' | 'horizontal' | null>,
     default: 'vertical',
   },
 })
+const acceptedProps: Record<string, unknown> = { orientation: 'vertical' }
 const checkedProps = computed(() => ({
   orientation: checkedProp<'vertical' | 'horizontal'>(
     props['orientation'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'orientation',
+    acceptedProps,
   ) as 'vertical' | 'horizontal',
 }))
 void checkedProps.value
@@ -110,6 +112,16 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
     definition: './components/ui-scroll-area/ui-scroll-area.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: ['orientation'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { content: contentElement },
 })
 </script>
@@ -118,7 +130,7 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
   <div
     data-component="ui-scroll-area"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
     :data-ui-scroll-area-state="hostState || undefined"
     ref="root"

package/vue/UiSearchResultRow.d.ts

@@ -30,8 +30,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
 }>> & Readonly<{}>, {
-    disabled: boolean | null;
     selected: boolean | null;
+    disabled: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiSearchResultRow.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, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -25,23 +25,26 @@ const propValidityContract = {
       default: false,
     },
   },
-}
+} as const
 const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   selected: { type: null as unknown as PropType<boolean | null>, default: false },
 })
+const acceptedProps: Record<string, unknown> = { disabled: false, selected: false }
 const checkedProps = computed(() => ({
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
+    acceptedProps,
   ) as boolean,
   selected: checkedProp<boolean>(
     props['selected'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'selected',
+    acceptedProps,
   ) as boolean,
 }))
 void checkedProps.value
@@ -114,7 +117,7 @@ const hostState = computed(() =>
     v-bind="nativeAttrs($attrs)"
     :disabled="checkedProps.disabled ?? undefined"
     :aria-current="checkedProps.selected ?? undefined"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
     :data-ui-search-result-row-state="hostState || undefined"

package/vue/UiSearchShell.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, 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'
 
 defineOptions({ inheritAttrs: false })
 
@@ -39,37 +39,47 @@ const propValidityContract = {
       default: false,
     },
   },
-}
+} as const
 const props = defineProps({
   dismissible: { type: null as unknown as PropType<boolean | null>, default: false },
   label: { type: null as unknown as PropType<string | null>, default: 'Search' },
   modal: { type: null as unknown as PropType<boolean | null>, default: false },
   open: { type: null as unknown as PropType<boolean | null>, default: false },
 })
+const acceptedProps: Record<string, unknown> = {
+  dismissible: false,
+  label: 'Search',
+  modal: false,
+  open: false,
+}
 const checkedProps = computed(() => ({
   dismissible: checkedProp<boolean>(
     props['dismissible'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'dismissible',
+    acceptedProps,
   ) as boolean,
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
+    acceptedProps,
   ) as string,
   modal: checkedProp<boolean>(
     props['modal'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'modal',
+    acceptedProps,
   ) as boolean,
   open: checkedProp<boolean>(
     props['open'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'open',
+    acceptedProps,
   ) as boolean,
 }))
 void checkedProps.value
@@ -169,6 +179,16 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
     definition: './components/ui-search-shell/ui-search-shell.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: ['dismissible', 'label', 'modal', 'open'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { dialog: dialogElement },
   state: { internalOpen },
 })
@@ -178,7 +198,7 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
   <div
     data-component="ui-search-shell"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-dismissible="reflectedProp('dismissible', 'dismissible', checkedProps.dismissible, undefined, false)"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
     :data-modal="reflectedProp('modal', 'modal', checkedProps.modal, undefined, false)"

package/vue/UiSection.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, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -35,7 +35,7 @@ const propValidityContract = {
       default: 'plain',
     },
   },
-}
+} as const
 const props = defineProps({
   heading: { type: null as unknown as PropType<string | null>, default: '' },
   tone: { type: null as unknown as PropType<'neutral' | 'danger' | null>, default: 'neutral' },
@@ -44,24 +44,28 @@ const props = defineProps({
     default: 'plain',
   },
 })
+const acceptedProps: Record<string, unknown> = { heading: '', tone: 'neutral', variant: 'plain' }
 const checkedProps = computed(() => ({
   heading: checkedProp<string>(
     props['heading'],
     { kind: 'terminal', name: 'string' },
     false,
     'heading',
+    acceptedProps,
   ) as string,
   tone: checkedProp<'neutral' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
+    acceptedProps,
   ) as 'neutral' | 'danger',
   variant: checkedProp<'plain' | 'card' | 'divided'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
+    acceptedProps,
   ) as 'plain' | 'card' | 'divided',
 }))
 void checkedProps.value
@@ -135,7 +139,7 @@ const hostState = computed(() =>
   <section
     data-component="ui-section"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-heading="reflectedProp('heading', 'heading', checkedProps.heading, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"