@threadlabs/looma 0.21.6 → 0.22.1

package/vue/UiEditorTableToolbar.vue

@@ -1,13 +1,100 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, defineComponent, getCurrentInstance, h, ref, watchSyncEffect } from 'vue'
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  provide,
+  ref,
+  watchSyncEffect,
+} from 'vue'
 import type { PropType, VNode } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    actions: {
+      type: {
+        kind: 'list',
+        item: {
+          kind: 'constrained',
+          base: { kind: 'terminal', name: 'keyword' },
+          values: [
+            'align-left',
+            'align-center',
+            'align-right',
+            'background-none',
+            'background-gray',
+            'background-yellow',
+            'background-blue',
+            'background-green',
+            'background-red',
+            'add-row-before',
+            'add-row-after',
+            'add-column-before',
+            'add-column-after',
+            'toggle-header-row',
+            'toggle-header-column',
+            'move-row-up',
+            'move-row-down',
+            'move-column-left',
+            'move-column-right',
+            'clear-cells',
+            'merge-cells',
+            'split-cell',
+            'delete-row',
+            'delete-column',
+            'delete-table',
+          ],
+        },
+      },
+      required: false,
+      target: { attribute: 'actions' },
+      description: 'The complete set of commands the current selection permits.',
+    },
+    cellAlignment: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'cellalignment' },
+      description: 'Marks the alignment command that is active for the current cell.',
+      values: ['left', 'center', 'right'],
+      default: 'left',
+    },
+    cellBackground: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'cellbackground' },
+      description: 'Identifies the background choice that is active for the current cell.',
+      default: '',
+    },
+    headerColumn: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'headercolumn' },
+      description: 'Whether the table\'s first column currently uses header cells.',
+      default: false,
+    },
+    headerRow: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'headerrow' },
+      description: 'Whether the table\'s first row currently uses header cells.',
+      default: false,
+    },
+    open: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'open' },
+      description: 'Shows the toolbar while a table selection is active.',
+      default: false,
+    },
+  },
+}
 const props = defineProps({
   actions: {
     type: null as unknown as PropType<
@@ -117,48 +204,36 @@ const checkedProps = computed(() => ({
     },
     false,
     'actions',
-    undefined,
-    undefined,
   ),
   cellAlignment: checkedProp<'left' | 'center' | 'right'>(
     props['cellAlignment'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'cellAlignment',
-    undefined,
-    ['left', 'center', 'right'],
   ) as 'left' | 'center' | 'right',
   cellBackground: checkedProp<string>(
     props['cellBackground'],
     { kind: 'terminal', name: 'string' },
     false,
     'cellBackground',
-    undefined,
-    undefined,
   ) as string,
   headerColumn: checkedProp<boolean>(
     props['headerColumn'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'headerColumn',
-    undefined,
-    undefined,
   ) as boolean,
   headerRow: checkedProp<boolean>(
     props['headerRow'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'headerRow',
-    undefined,
-    undefined,
   ) as boolean,
   open: checkedProp<boolean>(
     props['open'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'open',
-    undefined,
-    undefined,
   ) as boolean,
 }))
 void checkedProps.value
@@ -282,6 +357,19 @@ const sections = ref<
 >([])
 const hasOverflow = ref(false)
 const overflowOpen = ref(false)
+let guardedPrevious: any
+const guarded = computed(() => {
+  if (!(overflowOpen.value == null || typeof overflowOpen.value === 'boolean')) {
+    return guardedPrevious
+  }
+  return guardedPrevious = overflowOpen.value
+})
+provide('html-next:ui-editor-table-toolbar:alignments', alignments)
+provide('html-next:ui-editor-table-toolbar:structure', structure)
+provide('html-next:ui-editor-table-toolbar:swatches', swatches)
+provide('html-next:ui-editor-table-toolbar:sections', sections)
+provide('html-next:ui-editor-table-toolbar:hasOverflow', hasOverflow)
+provide('html-next:ui-editor-table-toolbar:overflowOpen', overflowOpen)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -393,6 +481,7 @@ function uniqueKeys<T>(
     aria-label="Table actions"
     v-bind="nativeAttrs($attrs)"
     :hidden="!checkedProps.open"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-actions="reflectedProp('actions', 'actions', checkedProps.actions, undefined, false)"
     :data-cell-alignment="reflectedProp('cellAlignment', 'cell-alignment', checkedProps.cellAlignment, undefined, false)"
     :data-cell-background="reflectedProp('cellBackground', 'cell-background', checkedProps.cellBackground, undefined, false)"
@@ -440,7 +529,7 @@ function uniqueKeys<T>(
         class="more"
         data-action="toggle-overflow"
         aria-haspopup="menu"
-        :aria-expanded="overflowOpen"
+        :aria-expanded="guarded"
       >
         <UiIcon name="table" />
         <span>Table options</span>

package/vue/UiEditorToolbar.vue

@@ -1,12 +1,24 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 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 } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    floating: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'floating' },
+      description:
+        'Shows the toolbar as a floating bar beside the selection rather than pinned to the editor.',
+      default: false,
+    },
+  },
+}
 const props = defineProps({
   floating: { type: null as unknown as PropType<boolean | null>, default: false },
 })
@@ -16,8 +28,6 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'floating',
-    undefined,
-    undefined,
   ) as boolean,
 }))
 void checkedProps.value
@@ -104,6 +114,7 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     role="toolbar"
     aria-label="Editor toolbar"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-floating="reflectedProp('floating', 'floating', checkedProps.floating, undefined, false)"
     :data-ui-editor-toolbar-state="hostState || undefined"
     ref="root"

package/vue/UiFloatingActionButton.vue

@@ -1,11 +1,39 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description:
+        'Disables the button, so it cannot be pressed or focused, and gives it a flat muted treatment.',
+      default: false,
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description:
+        'The button\'s accessible name. The button usually holds only an icon, so name the action it performs.',
+      default: '',
+    },
+    mobileOnly: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'mobileonly' },
+      description:
+        'Hides the button on viewports 768px wide and wider, for a shortcut that only phones need. Make sure the action is reachable another way at those\n      widths.',
+      default: false,
+    },
+  },
+}
 const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   label: { type: null as unknown as PropType<string | null>, default: '' },
@@ -17,24 +45,18 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
-    undefined,
-    undefined,
   ) as boolean,
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
-    undefined,
-    undefined,
   ) as string,
   mobileOnly: checkedProp<boolean>(
     props['mobileOnly'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'mobileOnly',
-    undefined,
-    undefined,
   ) as boolean,
 }))
 void checkedProps.value
@@ -107,6 +129,7 @@ const hostState = computed(() =>
     v-bind="nativeAttrs($attrs)"
     :aria-label="checkedProps.label ?? undefined"
     :disabled="checkedProps.disabled ?? undefined"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
     :data-mobile-only="reflectedProp('mobileOnly', 'mobile-only', checkedProps.mobileOnly, undefined, false)"

package/vue/UiFormField.d.ts

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

package/vue/UiFormField.vue

@@ -1,12 +1,40 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 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 } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description:
+        'Disables the field\'s control: the first input, textarea, or select inside it. The field writes this to the control whenever it updates, so set it here\n      rather than on the control.',
+      default: false,
+    },
+    invalid: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'invalid' },
+      description:
+        'Marks the field\'s control invalid by setting aria-invalid on it. Only while invalid, the error slot appears and becomes part of the control\'s\n      description.',
+      default: false,
+    },
+    required: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'required' },
+      description:
+        'Marks the field\'s control required, for native form validation. Like disabled, it is written to the control, so set it here rather than on the control. It\n      adds no visual marker; show one in the label if the form needs it.',
+      default: false,
+    },
+  },
+}
 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 },
@@ -18,24 +46,18 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
-    undefined,
-    undefined,
   ) as boolean,
   invalid: checkedProp<boolean>(
     props['invalid'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'invalid',
-    undefined,
-    undefined,
   ) as boolean,
   required: checkedProp<boolean>(
     props['required'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'required',
-    undefined,
-    undefined,
   ) as boolean,
 }))
 void checkedProps.value
@@ -118,6 +140,7 @@ useComponentHost(() => import('../components/ui-form-field/ui-form-field.js'), {
   <div
     data-component="ui-form-field"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
     :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"

package/vue/UiGrid.vue

@@ -1,11 +1,38 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    columns: {
+      type: { kind: 'terminal', name: 'integer' },
+      required: false,
+      target: { attribute: 'columns' },
+      description:
+        'Maximum columns when there is room. Omit for no cap. The grid still drops columns as its container narrows; it never forces a fixed column count.',
+    },
+    gap: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'gap' },
+      description:
+        'Space between cells, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-grid-gap custom property,\n      set on the grid itself, overrides it; set on an ancestor, it does nothing.',
+      values: ['xs', 's', 'm', 'l', 'xl'],
+    },
+    min: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'min' },
+      description:
+        'The narrowest a column may get before the grid drops to fewer columns: sm is 12rem (also the default), md is 16rem, and lg is 20rem. The grid fits as many\n      equal columns as its width allows, and a single column never overflows a narrower container.',
+      values: ['sm', 'md', 'lg'],
+    },
+  },
+}
 const props = defineProps({
   columns: { type: null as unknown as PropType<number | null>, default: null },
   gap: { type: null as unknown as PropType<'xs' | 's' | 'm' | 'l' | 'xl' | null>, default: null },
@@ -17,24 +44,18 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'integer' },
     false,
     'columns',
-    undefined,
-    undefined,
   ),
   gap: checkedProp<'xs' | 's' | 'm' | 'l' | 'xl'>(
     props['gap'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'gap',
-    undefined,
-    ['xs', 's', 'm', 'l', 'xl'],
   ),
   min: checkedProp<'sm' | 'md' | 'lg'>(
     props['min'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'min',
-    undefined,
-    ['sm', 'md', 'lg'],
   ),
 }))
 void checkedProps.value
@@ -105,6 +126,7 @@ const hostState = computed(() =>
     data-component="ui-grid"
     v-bind="nativeAttrs($attrs)"
     :style="{ '--_grid-column-cap': checkedProps.columns ?? undefined }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-columns="reflectedProp('columns', 'columns', checkedProps.columns, undefined, false)"
     :data-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
     :data-min="reflectedProp('min', 'min', checkedProps.min, undefined, false)"

package/vue/UiIcon.vue

@@ -1,11 +1,23 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    name: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'name' },
+      description:
+        'Which icon to draw, by its name in Looma\'s icon set (LOOMA_ICONS), such as "align-left". An unknown or empty name draws nothing. The icon is hidden from\n      assistive technology, so name the control it sits in.',
+      default: '',
+    },
+  },
+}
 const props = defineProps({
   name: { type: null as unknown as PropType<string | null>, default: '' },
 })
@@ -15,8 +27,6 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'string' },
     false,
     'name',
-    undefined,
-    undefined,
   ) as string,
 }))
 void checkedProps.value
@@ -438,6 +448,7 @@ function list(value: unknown): any[] {
     data-component="ui-icon"
     aria-hidden="true"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
   ><svg
       viewBox="0 0 24 24"

package/vue/UiIconButton.vue

@@ -1,13 +1,79 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 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 } from './props'
+import { checkedProp, vPropValidity } from './props'
 import UiSpinner from './UiSpinner.vue'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    anticipatory: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'anticipatory' },
+      description:
+        'Keeps the button out of sight until it is wanted: at rest a fine pointer sees only a small guide dot, and the button appears on hover, on focus, or when\n      the pointer comes near inside a ui-affordance-scope. Touch devices and the solid variant always show it.',
+      default: false,
+    },
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description:
+        'Disables the button, so it cannot be pressed or focused, and gives it a flat neutral surface and muted icon.',
+      default: false,
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description: 'Accessible name for the icon.',
+    },
+    loading: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'loading' },
+      description:
+        'Keeps the button focusable and named while work is in progress. It shows a spinner, states aria-disabled and aria-busy, and prevents activation until\n      cleared.',
+      default: false,
+    },
+    pending: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'pending' },
+      description: 'Deprecated alias for loading.',
+      default: false,
+    },
+    round: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'round' },
+      description: 'Use a fully circular shape.',
+      default: false,
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'Button and icon size together: sm is 1.75rem with a small icon, md is 2rem, and lg is 2.5rem with a large icon. On touch, every size gets an invisible hit\n      area of at least 44px.',
+      values: ['sm', 'md', 'lg'],
+      default: 'md',
+    },
+    variant: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'variant' },
+      description:
+        'Emphasis. ghost shows only the icon until it is hovered, for toolbars and dense rows; outline adds a border on the default surface; solid fills with the\n      accent colour, for the one primary action in a group.',
+      values: ['ghost', 'outline', 'solid'],
+      default: 'ghost',
+    },
+  },
+}
 const props = defineProps({
   anticipatory: { type: null as unknown as PropType<boolean | null>, default: false },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -27,64 +93,43 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'anticipatory',
-    undefined,
-    undefined,
   ) as boolean,
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
-    undefined,
-    undefined,
   ) as boolean,
-  label: checkedProp<string>(
-    props['label'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'label',
-    undefined,
-    undefined,
-  ),
+  label: checkedProp<string>(props['label'], { kind: 'terminal', name: 'string' }, false, 'label'),
   loading: checkedProp<boolean>(
     props['loading'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'loading',
-    undefined,
-    undefined,
   ) as boolean,
   pending: checkedProp<boolean>(
     props['pending'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'pending',
-    undefined,
-    undefined,
   ) as boolean,
   round: checkedProp<boolean>(
     props['round'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'round',
-    undefined,
-    undefined,
   ) as boolean,
   size: checkedProp<'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
-    undefined,
-    ['sm', 'md', 'lg'],
   ) as 'sm' | 'md' | 'lg',
   variant: checkedProp<'ghost' | 'outline' | 'solid'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
-    undefined,
-    ['ghost', 'outline', 'solid'],
   ) as 'ghost' | 'outline' | 'solid',
 }))
 void checkedProps.value
@@ -205,6 +250,7 @@ function attribute(value: unknown): any {
       ],
     )"
     :aria-busy="checkedProps.loading || checkedProps.pending"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-anticipatory="reflectedProp('anticipatory', 'anticipatory', checkedProps.anticipatory, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"