@threadlabs/looma 0.22.9 → 0.22.11

package/vue/UiAvatar.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'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -75,7 +75,7 @@ const propValidityContract = {
         'The image to show, cropped to fill the circle. Until it loads, or if it fails, the avatar shows initials instead. An img element authored inside the avatar\n      takes precedence over src.',
     },
   },
-}
+} as const
 const props = defineProps({
   active: { type: null as unknown as PropType<boolean | null>, default: false },
   alt: { type: null as unknown as PropType<string | null>, default: '' },
@@ -86,50 +86,73 @@ const props = defineProps({
   size: { type: null as unknown as PropType<'xs' | 'sm' | 'md' | null>, default: 'md' },
   src: { type: null as unknown as PropType<string | null>, default: null },
 })
+const acceptedProps: Record<string, unknown> = {
+  active: false,
+  alt: '',
+  decorative: false,
+  fallback: '',
+  name: '',
+  shape: 'circle',
+  size: 'md',
+  src: null,
+}
 const checkedProps = computed(() => ({
   active: checkedProp<boolean>(
     props['active'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'active',
+    acceptedProps,
   ) as boolean,
   alt: checkedProp<string>(
     props['alt'],
     { kind: 'terminal', name: 'string' },
     false,
     'alt',
+    acceptedProps,
   ) as string,
   decorative: checkedProp<boolean>(
     props['decorative'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'decorative',
+    acceptedProps,
   ) as boolean,
   fallback: checkedProp<string>(
     props['fallback'],
     { kind: 'terminal', name: 'string' },
     false,
     'fallback',
+    acceptedProps,
   ) as string,
   name: checkedProp<string>(
     props['name'],
     { kind: 'terminal', name: 'string' },
     false,
     'name',
+    acceptedProps,
   ) as string,
   shape: checkedProp<'circle' | 'square'>(
     props['shape'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'shape',
+    acceptedProps,
   ) as 'circle' | 'square',
   size: checkedProp<'xs' | 'sm' | 'md'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
+    acceptedProps,
   ) as 'xs' | 'sm' | 'md',
-  src: checkedProp<string>(props['src'], { kind: 'terminal', name: 'string' }, false, 'src'),
+  src: checkedProp<string>(
+    props['src'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'src',
+    acceptedProps,
+  ),
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -258,6 +281,16 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
     definition: './components/ui-avatar/ui-avatar.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: ['active', 'alt', 'decorative', 'fallback', 'name', 'shape', 'size', 'src'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { image: imageElement },
   state: { hasImage, hasAuthoredImage, initials, showGlyph },
 })
@@ -267,7 +300,7 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
   <span
     data-component="ui-avatar"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-active="reflectedProp('active', 'active', checkedProps.active, undefined, false)"
     :data-alt="reflectedProp('alt', 'alt', checkedProps.alt, undefined, false)"
     :data-decorative="reflectedProp('decorative', 'decorative', checkedProps.decorative, undefined, false)"

package/vue/UiAvatarGroup.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 })
 
@@ -50,7 +50,7 @@ const propValidityContract = {
         'The true number of people when only some avatars are authored. The overflow badge counts the people beyond the visible avatars; it never counts fewer than\n      the authored avatars.',
     },
   },
-}
+} as const
 const props = defineProps({
   label: { type: null as unknown as PropType<string | null>, default: 'People' },
   max: { type: null as unknown as PropType<number | null>, default: 5 },
@@ -58,32 +58,49 @@ const props = defineProps({
   size: { type: null as unknown as PropType<'xs' | 'sm' | 'md' | null>, default: 'md' },
   total: { type: null as unknown as PropType<number | null>, default: null },
 })
+const acceptedProps: Record<string, unknown> = {
+  label: 'People',
+  max: 5,
+  overflowLabel: '{count} more',
+  size: 'md',
+  total: null,
+}
 const checkedProps = computed(() => ({
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
+    acceptedProps,
   ) as string,
   max: checkedProp<number>(
     props['max'],
     { kind: 'terminal', name: 'number' },
     false,
     'max',
+    acceptedProps,
   ) as number,
   overflowLabel: checkedProp<string>(
     props['overflowLabel'],
     { kind: 'terminal', name: 'string' },
     false,
     'overflowLabel',
+    acceptedProps,
   ) as string,
   size: checkedProp<'xs' | 'sm' | 'md'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
+    acceptedProps,
   ) as 'xs' | 'sm' | 'md',
-  total: checkedProp<number>(props['total'], { kind: 'terminal', name: 'integer' }, false, 'total'),
+  total: checkedProp<number>(
+    props['total'],
+    { kind: 'terminal', name: 'integer' },
+    false,
+    'total',
+    acceptedProps,
+  ),
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -178,6 +195,16 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
     definition: './components/ui-avatar-group/ui-avatar-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: ['label', 'max', 'overflowLabel', 'size', 'total'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { overflow: overflowElement },
   state: { overflowCount, overflowAnnouncement },
 })
@@ -189,7 +216,7 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
     role="group"
     v-bind="nativeAttrs($attrs)"
     :aria-label="checkedProps.label ?? undefined"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
     :data-max="reflectedProp('max', 'max', checkedProps.max, undefined, false)"
     :data-overflow-label="reflectedProp('overflowLabel', 'overflow-label', checkedProps.overflowLabel, undefined, false)"

package/vue/UiBadge.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'
@@ -45,7 +45,7 @@ const propValidityContract = {
       default: 'subtle',
     },
   },
-}
+} as const
 const props = defineProps({
   shape: { type: null as unknown as PropType<'pill' | 'tag' | null>, default: 'pill' },
   size: { type: null as unknown as PropType<'xs' | 'md' | null>, default: 'md' },
@@ -60,30 +60,40 @@ const props = defineProps({
     default: 'subtle',
   },
 })
+const acceptedProps: Record<string, unknown> = {
+  shape: 'pill',
+  size: 'md',
+  tone: 'neutral',
+  variant: 'subtle',
+}
 const checkedProps = computed(() => ({
   shape: checkedProp<'pill' | 'tag'>(
     props['shape'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'shape',
+    acceptedProps,
   ) as 'pill' | 'tag',
   size: checkedProp<'xs' | 'md'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
+    acceptedProps,
   ) as 'xs' | 'md',
   tone: checkedProp<'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
+    acceptedProps,
   ) as 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger',
   variant: checkedProp<'solid' | 'subtle' | 'outline'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
+    acceptedProps,
   ) as 'solid' | 'subtle' | 'outline',
 }))
 void checkedProps.value
@@ -158,7 +168,7 @@ const hostState = computed(() =>
   <span
     data-component="ui-badge"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"

package/vue/UiBreadcrumbItem.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: false,
     },
   },
-}
+} as const
 const props = defineProps({
   current: { type: null as unknown as PropType<boolean | null>, default: false },
 })
+const acceptedProps: Record<string, unknown> = { current: false }
 const checkedProps = computed(() => ({
   current: checkedProp<boolean>(
     props['current'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'current',
+    acceptedProps,
   ) as boolean,
 }))
 void checkedProps.value
@@ -118,7 +120,7 @@ function attribute(value: unknown): any {
     : attribute(
       (({ true: 'page', false: null }) as Record<string, any>)[`${checkedProps.current ?? ''}`],
     )"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
     :data-ui-breadcrumb-item-state="hostState || undefined"
   >

package/vue/UiBreadcrumbs.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'
@@ -16,16 +16,18 @@ const propValidityContract = {
       default: 'Breadcrumb',
     },
   },
-}
+} as const
 const props = defineProps({
   label: { type: null as unknown as PropType<string | null>, default: 'Breadcrumb' },
 })
+const acceptedProps: Record<string, unknown> = { label: 'Breadcrumb' }
 const checkedProps = computed(() => ({
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
+    acceptedProps,
   ) as string,
 }))
 void checkedProps.value
@@ -89,7 +91,7 @@ if (
     data-component="ui-breadcrumbs"
     v-bind="nativeAttrs($attrs)"
     :aria-label="checkedProps.label ?? undefined"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
   >
     <ol role="list"><slot /></ol>

package/vue/UiButton.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, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, preserveRootFocus, useComponentHost } from './host'
-import { checkedProp, vPropValidity } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiSpinner from './UiSpinner.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -124,7 +124,7 @@ const propValidityContract = {
       default: 'outline',
     },
   },
-}
+} as const
 const props = defineProps({
   align: { type: null as unknown as PropType<'center' | 'start' | null>, default: 'center' },
   as: { type: null as unknown as PropType<'button' | 'a' | null>, default: 'button' },
@@ -152,80 +152,120 @@ const props = defineProps({
     default: 'outline',
   },
 })
+const acceptedProps: Record<string, unknown> = {
+  align: 'center',
+  as: 'button',
+  disabled: false,
+  href: null,
+  loading: false,
+  pending: false,
+  rel: null,
+  shape: 'rounded',
+  size: 'md',
+  stretch: false,
+  target: null,
+  tone: 'accent',
+  type: 'button',
+  variant: 'outline',
+}
 const checkedProps = computed(() => ({
   align: checkedProp<'center' | 'start'>(
     props['align'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'align',
+    acceptedProps,
   ) as 'center' | 'start',
   as: checkedProp<'button' | 'a'>(
     props['as'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'as',
+    acceptedProps,
   ) as 'button' | 'a',
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
+    acceptedProps,
   ) as boolean,
-  href: checkedProp<string>(props['href'], { kind: 'terminal', name: 'string' }, false, 'href'),
+  href: checkedProp<string>(
+    props['href'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'href',
+    acceptedProps,
+  ),
   loading: checkedProp<boolean>(
     props['loading'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'loading',
+    acceptedProps,
   ) as boolean,
   pending: checkedProp<boolean>(
     props['pending'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'pending',
+    acceptedProps,
   ) as boolean,
-  rel: checkedProp<string>(props['rel'], { kind: 'terminal', name: 'string' }, false, 'rel'),
+  rel: checkedProp<string>(
+    props['rel'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'rel',
+    acceptedProps,
+  ),
   shape: checkedProp<'rounded' | 'pill'>(
     props['shape'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'shape',
+    acceptedProps,
   ) as 'rounded' | 'pill',
   size: checkedProp<'xs' | 'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
+    acceptedProps,
   ) as 'xs' | 'sm' | 'md' | 'lg',
   stretch: checkedProp<boolean>(
     props['stretch'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'stretch',
+    acceptedProps,
   ) as boolean,
   target: checkedProp<string>(
     props['target'],
     { kind: 'terminal', name: 'string' },
     false,
     'target',
+    acceptedProps,
   ),
   tone: checkedProp<'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
+    acceptedProps,
   ) as 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info',
   type: checkedProp<'button' | 'submit' | 'reset'>(
     props['type'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'type',
+    acceptedProps,
   ) as 'button' | 'submit' | 'reset',
   variant: checkedProp<'outline' | 'solid' | 'danger' | 'ghost' | 'link'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
+    acceptedProps,
   ) as 'outline' | 'solid' | 'danger' | 'ghost' | 'link',
 }))
 void checkedProps.value
@@ -314,6 +354,31 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     definition: './components/ui-button/ui-button.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: [
+    'align',
+    'as',
+    'disabled',
+    'href',
+    'loading',
+    'pending',
+    'rel',
+    'shape',
+    'size',
+    'stretch',
+    'target',
+    'tone',
+    'type',
+    'variant',
+  ],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
 
 function text(value: unknown): string {
@@ -361,7 +426,7 @@ function attribute(value: unknown): any {
         `${(checkedProps.loading || checkedProps.pending) && !checkedProps.disabled}`
       ],
     )"
-    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-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
@@ -402,7 +467,7 @@ function attribute(value: unknown): any {
       ],
     )"
     :aria-busy="checkedProps.loading || checkedProps.pending"
-    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-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"

package/vue/UiCallout.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,7 +18,7 @@ const propValidityContract = {
       default: 'info',
     },
   },
-}
+} as const
 const props = defineProps({
   tone: {
     type: null as unknown as PropType<
@@ -27,12 +27,14 @@ const props = defineProps({
     default: 'info',
   },
 })
+const acceptedProps: Record<string, unknown> = { tone: 'info' }
 const checkedProps = computed(() => ({
   tone: checkedProp<'info' | 'neutral' | 'note' | 'warning' | 'success' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
+    acceptedProps,
   ) as 'info' | 'neutral' | 'note' | 'warning' | 'success' | 'danger',
 }))
 void checkedProps.value
@@ -104,7 +106,7 @@ const hostState = computed(() =>
     data-component="ui-callout"
     role="note"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-ui-callout-state="hostState || undefined"
   >

package/vue/UiCard.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'
@@ -46,7 +46,7 @@ const propValidityContract = {
       default: 'outlined',
     },
   },
-}
+} as const
 const props = defineProps({
   as: {
     type: null as unknown as PropType<'div' | 'section' | 'article' | 'aside' | null>,
@@ -59,30 +59,40 @@ const props = defineProps({
     default: 'outlined',
   },
 })
+const acceptedProps: Record<string, unknown> = {
+  as: 'div',
+  padding: 'md',
+  tone: 'neutral',
+  variant: 'outlined',
+}
 const checkedProps = computed(() => ({
   as: checkedProp<'div' | 'section' | 'article' | 'aside'>(
     props['as'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'as',
+    acceptedProps,
   ) as 'div' | 'section' | 'article' | 'aside',
   padding: checkedProp<'sm' | 'md' | 'lg'>(
     props['padding'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'padding',
+    acceptedProps,
   ) as 'sm' | 'md' | 'lg',
   tone: checkedProp<'neutral' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
+    acceptedProps,
   ) as 'neutral' | 'danger',
   variant: checkedProp<'outlined' | 'subtle' | 'elevated'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
+    acceptedProps,
   ) as 'outlined' | 'subtle' | 'elevated',
 }))
 void checkedProps.value
@@ -165,7 +175,7 @@ const hostState = computed(() =>
     v-if="checkedProps.as === 'section'"
     data-component="ui-card"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
@@ -179,7 +189,7 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'article'"
     data-component="ui-card"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
@@ -193,7 +203,7 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'aside'"
     data-component="ui-card"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
@@ -207,7 +217,7 @@ const hostState = computed(() =>
     v-else
     data-component="ui-card"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"