@threadlabs/looma 0.21.6 → 0.22.0

package/vue/UiPopover.vue

@@ -1,12 +1,52 @@
-<!-- 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 { computed, getCurrentInstance, provide, 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: {
+    for: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'for' },
+      description: 'ID of the control that toggles and anchors the popover.',
+      default: '',
+    },
+    open: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'open' },
+      description: 'Whether the popover is open initially or when set externally.',
+      default: false,
+    },
+    placement: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'placement' },
+      description:
+        'Positions the surface around its trigger. Start and end on top or bottom follow the writing direction.',
+      values: [
+        'top',
+        'top-start',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'left-start',
+        'left-end',
+        'right',
+        'right-start',
+        'right-end',
+      ],
+      default: 'bottom-start',
+    },
+  },
+}
 const props = defineProps({
   for: { type: null as unknown as PropType<string | null>, default: '' },
   open: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -35,16 +75,12 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'string' },
     false,
     'for',
-    undefined,
-    undefined,
   ) as string,
   open: checkedProp<boolean>(
     props['open'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'open',
-    undefined,
-    undefined,
   ) as boolean,
   placement: checkedProp<
     | 'top'
@@ -59,20 +95,7 @@ const checkedProps = computed(() => ({
     | 'right'
     | 'right-start'
     | 'right-end'
-  >(props['placement'], { kind: 'terminal', name: 'keyword' }, false, 'placement', undefined, [
-    'top',
-    'top-start',
-    'top-end',
-    'bottom',
-    'bottom-start',
-    'bottom-end',
-    'left',
-    'left-start',
-    'left-end',
-    'right',
-    'right-start',
-    'right-end',
-  ]) as
+  >(props['placement'], { kind: 'terminal', name: 'keyword' }, false, 'placement') as
     | 'top'
     | 'top-start'
     | 'top-end'
@@ -147,6 +170,7 @@ const emit = defineEmits<{
 
 const root = ref<HTMLElement | null>(null)
 const internalOpen = ref(false)
+provide('html-next:ui-popover:internalOpen', internalOpen)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -206,6 +230,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 } }"
     :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.d.ts

@@ -31,13 +31,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:checked": (value: boolean) => any;
-    "update:value": (value: string) => any;
     change: (event: CustomEvent<{
         readonly checked: boolean;
         readonly value: string;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
+    "update:checked": (value: boolean) => any;
+    "update:value": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     checked: {
         type: PropType<boolean | null>;
@@ -64,13 +64,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{
-    "onUpdate:checked"?: ((value: boolean) => any) | undefined;
-    "onUpdate:value"?: ((value: string) => any) | undefined;
     onChange?: ((event: CustomEvent<{
         readonly checked: boolean;
         readonly value: string;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
+    "onUpdate:checked"?: ((value: boolean) => any) | undefined;
+    "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
     name: string | null;
     value: string | null;

package/vue/UiRadio.vue

@@ -1,13 +1,66 @@
-<!-- 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 { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { vBindControl } from './control'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    checked: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'checked' },
+      description:
+        'Whether the radio is checked initially or when set externally. A form reset returns it to this. Inside a ui-radio-group the group\'s value decides\n      instead.',
+      default: false,
+    },
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description:
+        'Disables the native radio, so it cannot be chosen, focused, or reached with the arrow keys.',
+      default: false,
+    },
+    name: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'name' },
+      description:
+        'The native name that groups radios: of the radios that share a name, only one can be checked, and the arrow keys move between them. Inside a ui-radio-group\n      the group sets the name, so leave this empty there.',
+      default: '',
+    },
+    required: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'required' },
+      description:
+        'Marks the native radio required, so native form validation fails until a radio with the same name is checked.',
+      default: false,
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'Aligns the radio with fields and buttons of the same size. It keeps its box size; the label takes that size\'s field type size and its first line centres in\n      that control height (sm 2rem, lg 3rem by default), so in a row of inputs, selects, and buttons of one size it shares their height and their text baseline.\n      Under a coarse pointer an sm row grows to the 44px touch minimum, as they do. md is the standard layout.',
+      values: ['sm', 'md', 'lg'],
+      default: 'md',
+    },
+    value: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'value' },
+      description:
+        'The value this radio stands for: submitted with a form, reported in its change event, and matched against a ui-radio-group\'s value to decide which radio is\n      checked.',
+      default: 'on',
+    },
+  },
+}
 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 },
@@ -22,48 +75,36 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'checked',
-    undefined,
-    undefined,
   ) as boolean,
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
-    undefined,
-    undefined,
   ) as boolean,
   name: checkedProp<string>(
     props['name'],
     { kind: 'terminal', name: 'string' },
     false,
     'name',
-    undefined,
-    undefined,
   ) as string,
   required: checkedProp<boolean>(
     props['required'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'required',
-    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',
   value: checkedProp<string>(
     props['value'],
     { kind: 'terminal', name: 'string' },
     false,
     'value',
-    undefined,
-    undefined,
   ) as string,
 }))
 void checkedProps.value
@@ -121,6 +162,7 @@ const root = ref<HTMLElement | null>(null)
 const inputElement = useTemplateRef<HTMLElement>('input')
 const descriptionElement = useTemplateRef<HTMLElement>('description')
 const internalChecked = ref(false)
+provide('html-next:ui-radio:internalChecked', internalChecked)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -176,6 +218,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 } }"
     :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.d.ts

@@ -38,12 +38,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly previousValue: string;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
-    "update:value": (value: string) => any;
     change: (event: CustomEvent<{
         readonly checked: boolean;
         readonly value: string;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
+    "update:value": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: {
         type: PropType<boolean | null>;
@@ -79,18 +79,18 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly previousValue: string;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
-    "onUpdate:value"?: ((value: string) => any) | undefined;
     onChange?: ((event: CustomEvent<{
         readonly checked: boolean;
         readonly value: string;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
+    "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
     label: string | null;
     name: string | null;
     value: string | null;
-    disabled: boolean | null;
     invalid: boolean | null;
+    disabled: boolean | null;
     required: boolean | null;
     orientation: "vertical" | "horizontal" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiRadioGroup.vue

@@ -1,12 +1,73 @@
-<!-- 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 { computed, getCurrentInstance, provide, 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 every radio in the group through the native fieldset, so no choice can be made and the group submits nothing with its form. A radio disabled on\n      its own stays disabled when the group is enabled.',
+      default: false,
+    },
+    invalid: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'aria-invalid' },
+      description:
+        'Exposes an externally validated error on the group and styles its legend with the field danger colour.',
+      default: false,
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'label' },
+      description:
+        'The group\'s legend, shown above the radios and announced as the group\'s name. Phrase it as the question the radios answer.',
+      default: 'Options',
+    },
+    name: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'name' },
+      description:
+        'The native name given to every radio in the group, under which a form submits the chosen value. Left empty, the group generates a unique name that keeps\n      the radios together, so set it when the choice submits with a form.',
+      default: '',
+    },
+    orientation: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'orientation' },
+      description:
+        'horizontal lays the radios out in a row; vertical stacks them in a column. The arrow keys move between radios either way.',
+      values: ['horizontal', 'vertical'],
+      default: 'horizontal',
+    },
+    required: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'aria-required' },
+      description:
+        'Makes a choice required, as a required native radio does for its group: the group states aria-required, every radio in it is marked required, and native\n      form validation fails until one is checked.',
+      default: false,
+    },
+    value: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'value' },
+      description:
+        'The value of the checked radio, initially or when set externally; empty checks none. The user\'s choice updates it from there and is reported as select and\n      change events, and a form reset returns the group to it.',
+      default: '',
+    },
+  },
+}
 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 },
@@ -25,56 +86,42 @@ 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,
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
-    undefined,
-    undefined,
   ) as string,
   name: checkedProp<string>(
     props['name'],
     { kind: 'terminal', name: 'string' },
     false,
     'name',
-    undefined,
-    undefined,
   ) as string,
   orientation: checkedProp<'horizontal' | 'vertical'>(
     props['orientation'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'orientation',
-    undefined,
-    ['horizontal', 'vertical'],
   ) as 'horizontal' | 'vertical',
   required: checkedProp<boolean>(
     props['required'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'required',
-    undefined,
-    undefined,
   ) as boolean,
   value: checkedProp<string>(
     props['value'],
     { kind: 'terminal', name: 'string' },
     false,
     'value',
-    undefined,
-    undefined,
   ) as string,
 }))
 void checkedProps.value
@@ -138,6 +185,7 @@ const emit = defineEmits<{
 
 const root = ref<HTMLElement | null>(null)
 const internalValue = ref('')
+provide('html-next:ui-radio-group:internalValue', internalValue)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -211,6 +259,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 } }"
     :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.d.ts

@@ -31,8 +31,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     gap: "s" | "xs" | "m" | "l" | "xl" | null;
-    itemWidth: "sm" | "md" | "lg" | null;
     snap: "center" | "start" | null;
+    itemWidth: "sm" | "md" | "lg" | 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/UiReel.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: {
+    gap: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'gap' },
+      description:
+        'Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-reel-gap custom property,\n      set on the reel itself, overrides it; set on an ancestor, it does nothing.',
+      values: ['xs', 's', 'm', 'l', 'xl'],
+    },
+    itemWidth: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'itemwidth' },
+      description:
+        'A fixed width for every item: sm is 12rem, md is 16rem, and lg is 20rem. Unset, each item keeps its content\'s width. Items never shrink to fit, so the reel\n      scrolls sideways once they overflow.',
+      values: ['sm', 'md', 'lg'],
+    },
+    snap: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'snap' },
+      description:
+        'Snaps scrolling to items: start comes to rest with an item\'s start edge at the reel\'s start, and center with an item centred in the reel. Unset, the reel\n      scrolls freely.',
+      values: ['start', 'center'],
+    },
+  },
+}
 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 },
@@ -17,24 +45,18 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'gap',
-    undefined,
-    ['xs', 's', 'm', 'l', 'xl'],
   ),
   itemWidth: checkedProp<'sm' | 'md' | 'lg'>(
     props['itemWidth'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'itemWidth',
-    undefined,
-    ['sm', 'md', 'lg'],
   ),
   snap: checkedProp<'start' | 'center'>(
     props['snap'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'snap',
-    undefined,
-    ['start', 'center'],
   ),
 }))
 void checkedProps.value
@@ -109,6 +131,7 @@ const hostState = computed(() =>
     role="region"
     tabindex="0"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :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,12 +1,25 @@
-<!-- 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: {
+    orientation: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'orientation' },
+      description:
+        'The direction the content scrolls. Vertical scrolls up and down and clips sideways overflow; horizontal scrolls sideways and clips vertical\n      overflow.',
+      values: ['vertical', 'horizontal'],
+      default: 'vertical',
+    },
+  },
+}
 const props = defineProps({
   orientation: {
     type: null as unknown as PropType<'vertical' | 'horizontal' | null>,
@@ -19,8 +32,6 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'orientation',
-    undefined,
-    ['vertical', 'horizontal'],
   ) as 'vertical' | 'horizontal',
 }))
 void checkedProps.value
@@ -107,6 +118,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 } }"
     :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
     :data-ui-scroll-area-state="hostState || undefined"
     ref="root"

package/vue/UiSearchResultRow.vue

@@ -1,11 +1,31 @@
-<!-- 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 row\'s button, so it cannot be chosen or focused, and gives it a flat muted treatment.',
+      default: false,
+    },
+    selected: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'aria-current' },
+      description:
+        'Marks the row as the current result: it gets the hover surface and aria-current="true", which assistive technology announces as current. Set it on one row\n      at a time, such as the result the arrow keys have moved to.',
+      default: false,
+    },
+  },
+}
 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 },
@@ -16,16 +36,12 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
-    undefined,
-    undefined,
   ) as boolean,
   selected: checkedProp<boolean>(
     props['selected'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'selected',
-    undefined,
-    undefined,
   ) as boolean,
 }))
 void checkedProps.value
@@ -98,6 +114,7 @@ const hostState = computed(() =>
     v-bind="nativeAttrs($attrs)"
     :disabled="checkedProps.disabled ?? undefined"
     :aria-current="checkedProps.selected ?? undefined"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :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"