@threadlabs/looma 0.21.6 → 0.22.0

package/vue/UiStack.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: {
+    align: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'align' },
+      description:
+        'How items sit across the stack: stretch (the default) makes each fill the stack\'s width; start, center, and end keep each at its own width, against the\n      start, in the middle, or against the end.',
+      values: ['start', 'center', 'end', 'stretch'],
+    },
+    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-stack-gap custom property,\n      set on the stack itself, overrides it; set on an ancestor, it does nothing.',
+      values: ['xs', 's', 'm', 'l', 'xl'],
+    },
+    justify: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'justify' },
+      description:
+        'Where items sit along a stack that is taller than its content: start (the default), center, end, or between, which spreads the spare space between items.\n      It has no effect unless the stack is given a height or stretched to one.',
+      values: ['start', 'center', 'end', 'between'],
+    },
+  },
+}
 const props = defineProps({
   align: {
     type: null as unknown as PropType<'start' | 'center' | 'end' | 'stretch' | null>,
@@ -23,24 +51,18 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'align',
-    undefined,
-    ['start', 'center', 'end', 'stretch'],
   ),
   gap: checkedProp<'xs' | 's' | 'm' | 'l' | 'xl'>(
     props['gap'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'gap',
-    undefined,
-    ['xs', 's', 'm', 'l', 'xl'],
   ),
   justify: checkedProp<'start' | 'center' | 'end' | 'between'>(
     props['justify'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'justify',
-    undefined,
-    ['start', 'center', 'end', 'between'],
   ),
 }))
 void checkedProps.value
@@ -113,6 +135,7 @@ const hostState = computed(() =>
   <div
     data-component="ui-stack"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
     :data-justify="reflectedProp('justify', 'justify', checkedProps.justify, undefined, false)"

package/vue/UiStatusMessage.vue

@@ -1,12 +1,41 @@
-<!-- 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'
 import UiSpinner from './UiSpinner.vue'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    heading: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'heading' },
+      description: 'A short heading above the message, such as "No pages yet". Optional.',
+      default: '',
+    },
+    kind: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'kind' },
+      description:
+        'What the view is saying. empty: there is nothing here yet (announced politely); loading: it is on its way, with a spinner (announced politely); error: it\n      could not be shown, in the danger tone (announced at once).',
+      values: ['empty', 'loading', 'error'],
+      default: 'empty',
+    },
+    layout: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'layout' },
+      description:
+        'Where it sits. inline takes its place in the view\'s flow; panel sits it on a dashed surface, for an empty area in a page; fill centres it in all the space\n      it is given, for a whole view that is loading or failed.',
+      values: ['inline', 'panel', 'fill'],
+      default: 'inline',
+    },
+  },
+}
 const props = defineProps({
   heading: { type: null as unknown as PropType<string | null>, default: '' },
   kind: {
@@ -24,24 +53,18 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'string' },
     false,
     'heading',
-    undefined,
-    undefined,
   ) as string,
   kind: checkedProp<'empty' | 'loading' | 'error'>(
     props['kind'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'kind',
-    undefined,
-    ['empty', 'loading', 'error'],
   ) as 'empty' | 'loading' | 'error',
   layout: checkedProp<'inline' | 'panel' | 'fill'>(
     props['layout'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'layout',
-    undefined,
-    ['inline', 'panel', 'fill'],
   ) as 'inline' | 'panel' | 'fill',
 }))
 void checkedProps.value
@@ -130,6 +153,7 @@ function attribute(value: unknown): any {
     :role="attribute(
       (({ true: 'alert', false: 'status' }) as Record<string, any>)[`${checkedProps.kind === 'error'}`],
     )"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-heading="reflectedProp('heading', 'heading', checkedProps.heading, undefined, false)"
     :data-kind="reflectedProp('kind', 'kind', checkedProps.kind, undefined, false)"
     :data-layout="reflectedProp('layout', 'layout', checkedProps.layout, undefined, false)"

package/vue/UiSwitch.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/UiSwitch.vue

@@ -1,13 +1,65 @@
-<!-- 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 switch is checked initially or when set externally. A form reset returns it to this.',
+      default: false,
+    },
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description: 'Disables the native switch, so it cannot be toggled or focused.',
+      default: false,
+    },
+    name: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'name' },
+      description:
+        'The native name the switch submits under: a form that contains it sends name=value while it is on, and nothing while it is off, as a native checkbox does.\n      Left empty, it takes no part in form submission.',
+      default: '',
+    },
+    required: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'required' },
+      description:
+        'Marks the native switch required, so native form validation treats it as invalid until it is on.',
+      default: false,
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'Aligns the switch with fields and buttons of the same size. It keeps its track size; the label takes that size\'s field type size and its first line centres\n      in 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\n      baseline. 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 a form submits under name while the switch is on, also reported in the change event\'s detail so one handler can tell switches apart. on by\n      default, as on a native checkbox.',
+      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 +74,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 +161,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-switch:internalChecked', internalChecked)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -176,6 +217,7 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
   <label
     data-component="ui-switch"
     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/UiSwitcher.vue

@@ -1,12 +1,47 @@
-<!-- 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: {
+    align: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'align' },
+      description:
+        'How items line up while they sit in a row: stretch (the default) makes them equally tall; start, center, and end align their tops, middles, or\n      bottoms.',
+      values: ['start', 'center', 'end', 'stretch'],
+    },
+    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-switcher-gap custom\n      property, set on the switcher itself, overrides it; set on an ancestor, it does nothing.',
+      values: ['xs', 's', 'm', 'l', 'xl'],
+    },
+    limit: {
+      type: { kind: 'terminal', name: 'integer' },
+      required: false,
+      target: { attribute: 'limit' },
+      description:
+        'Most children allowed in a horizontal row. When the count exceeds this value, every child stacks regardless of width. Omit it for no count limit.',
+    },
+    threshold: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'threshold' },
+      description:
+        'The container width at which items switch between a row and a stack: wider, they all sit side by side; narrower, each takes the full width. xs is 20rem, sm\n      is 30rem (also the default), md is 45rem, and lg is 60rem.',
+      values: ['xs', 'sm', 'md', 'lg'],
+    },
+  },
+}
 const props = defineProps({
   align: {
     type: null as unknown as PropType<'start' | 'center' | 'end' | 'stretch' | null>,
@@ -22,32 +57,19 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'align',
-    undefined,
-    ['start', 'center', 'end', 'stretch'],
   ),
   gap: checkedProp<'xs' | 's' | 'm' | 'l' | 'xl'>(
     props['gap'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'gap',
-    undefined,
-    ['xs', 's', 'm', 'l', 'xl'],
-  ),
-  limit: checkedProp<number>(
-    props['limit'],
-    { kind: 'terminal', name: 'integer' },
-    false,
-    'limit',
-    undefined,
-    undefined,
   ),
+  limit: checkedProp<number>(props['limit'], { kind: 'terminal', name: 'integer' }, false, 'limit'),
   threshold: checkedProp<'xs' | 'sm' | 'md' | 'lg'>(
     props['threshold'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'threshold',
-    undefined,
-    ['xs', 'sm', 'md', 'lg'],
   ),
 }))
 void checkedProps.value
@@ -90,6 +112,7 @@ const hydrationInstance = getCurrentInstance()
 
 const root = ref<HTMLElement | null>(null)
 const overLimit = ref(false)
+provide('html-next:ui-switcher:overLimit', overLimit)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -139,6 +162,7 @@ useComponentHost(() => import('../components/ui-switcher/ui-switcher.js'), {
   <div
     data-component="ui-switcher"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
     :data-limit="reflectedProp('limit', 'limit', checkedProps.limit, undefined, false)"

package/vue/UiTable.vue

@@ -1,12 +1,33 @@
-<!-- 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: {
+    density: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'density' },
+      description:
+        'How tall each row is. Every row is at least one control tall, so a row holding a control lines up with the rows around it. comfortable fits a control of\n      the standard height (2.5rem), for tables read or edited at a glance; compact fits a small one (2rem), such as a Checkbox or a Button with size="sm", for\n      long tables to scan.',
+      values: ['comfortable', 'compact'],
+      default: 'comfortable',
+    },
+    stickyHeader: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'stickyheader' },
+      description:
+        'Keeps the header row in view while the rows scroll beneath it. The table scrolls inside its own box, so this needs a bounded height, such as a table that\n      fills a fixed-height panel.',
+      default: false,
+    },
+  },
+}
 const props = defineProps({
   density: {
     type: null as unknown as PropType<'comfortable' | 'compact' | null>,
@@ -20,16 +41,12 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'density',
-    undefined,
-    ['comfortable', 'compact'],
   ) as 'comfortable' | 'compact',
   stickyHeader: checkedProp<boolean>(
     props['stickyHeader'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'stickyHeader',
-    undefined,
-    undefined,
   ) as boolean,
 }))
 void checkedProps.value
@@ -112,6 +129,7 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
   <div
     data-component="ui-table"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-sticky-header="reflectedProp('stickyHeader', 'sticky-header', checkedProps.stickyHeader, undefined, false)"
     :data-ui-table-state="hostState || undefined"

package/vue/UiTabs.vue

@@ -1,20 +1,75 @@
-<!-- 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,
+  provide,
   ref,
   useTemplateRef,
   watchSyncEffect,
 } from 'vue'
 import type { PropType, VNode } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    activation: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'activation' },
+      description:
+        'In auto mode, arrow keys move focus and select the next panel. In manual mode, arrows move focus while Enter or Space selects a panel. Use manual when\n      displaying a panel takes time.',
+      values: ['auto', 'manual'],
+      default: 'auto',
+    },
+    density: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'density' },
+      description: 'Compact trades padding and type size for rows that fit more on screen.',
+      values: ['comfortable', 'compact'],
+      default: 'comfortable',
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description:
+        'The tab list\'s accessible name, announced when focus enters the list. Name what the tabs switch between.',
+      default: 'Tabs',
+    },
+    orientation: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'aria-orientation' },
+      description:
+        'horizontal puts the tabs in a row above the panels, moved between with the Left and Right arrow keys; vertical puts them in a column beside the panels,\n      moved between with Up and Down.',
+      values: ['horizontal', 'vertical'],
+      default: 'horizontal',
+    },
+    stretch: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'stretch' },
+      description:
+        'Share the full width of the tab list equally between tabs instead of sizing each to its label.',
+      default: false,
+    },
+    value: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'value' },
+      description:
+        'The id of the selected panel, initially or when set externally; empty selects the first panel. Choosing a tab updates it from there and reports a select\n      event. A panel without an id is given a generated one.',
+      default: '',
+    },
+  },
+}
 const props = defineProps({
   activation: { type: null as unknown as PropType<'auto' | 'manual' | null>, default: 'auto' },
   density: {
@@ -35,48 +90,36 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'activation',
-    undefined,
-    ['auto', 'manual'],
   ) as 'auto' | 'manual',
   density: checkedProp<'comfortable' | 'compact'>(
     props['density'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'density',
-    undefined,
-    ['comfortable', 'compact'],
   ) as 'comfortable' | 'compact',
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
-    undefined,
-    undefined,
   ) as string,
   orientation: checkedProp<'horizontal' | 'vertical'>(
     props['orientation'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'orientation',
-    undefined,
-    ['horizontal', 'vertical'],
   ) as 'horizontal' | 'vertical',
   stretch: checkedProp<boolean>(
     props['stretch'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'stretch',
-    undefined,
-    undefined,
   ) as boolean,
   value: checkedProp<string>(
     props['value'],
     { kind: 'terminal', name: 'string' },
     false,
     'value',
-    undefined,
-    undefined,
   ) as string,
 }))
 void checkedProps.value
@@ -160,6 +203,8 @@ const listElement = useTemplateRef<HTMLElement>('list')
 const panelsElement = useTemplateRef<HTMLElement>('panels')
 const internalValue = ref('')
 const tabs = ref<{ id: string; label: string }[]>([])
+provide('html-next:ui-tabs:internalValue', internalValue)
+provide('html-next:ui-tabs:tabs', tabs)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -254,6 +299,7 @@ function uniqueKeys<T>(
   <div
     data-component="ui-tabs"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-activation="reflectedProp('activation', 'activation', checkedProps.activation, undefined, false)"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"