@threadlabs/looma 0.21.6 → 0.22.1

package/vue/UiButton.vue

@@ -1,13 +1,130 @@
-<!-- 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, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, preserveRootFocus, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 import UiSpinner from './UiSpinner.vue'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    align: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'align' },
+      description:
+        'Content alignment. start lays the content out like a list option: from the start edge, with start-aligned text.',
+      values: ['center', 'start'],
+      default: 'center',
+    },
+    as: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'as' },
+      description:
+        'The native element the button renders: a button, or a link (a) that navigates to href.',
+      values: ['button', 'a'],
+      default: 'button',
+    },
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description:
+        'Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (as="a" with href) drops its\n      href and states aria-disabled="true" instead, because a link has no native disabled state.',
+      default: false,
+    },
+    href: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'href' },
+      description:
+        'The link\'s destination. Pair it with as="a" so the button renders as a real link that navigates. A disabled link drops its href and states\n      aria-disabled="true", so it cannot be followed.',
+    },
+    loading: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'loading' },
+      description:
+        'Keeps the action focusable and its label visible while work is in progress. It shows a decorative spinner, states aria-disabled and aria-busy, and prevents\n      activation or form submission until cleared.',
+      default: false,
+    },
+    pending: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'pending' },
+      description: 'Deprecated alias for loading.',
+      default: false,
+    },
+    rel: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'rel' },
+      description:
+        'The link\'s relationship to its destination, as on a native link. Only meaningful with as="a".',
+    },
+    shape: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'shape' },
+      description:
+        'rounded uses the theme\'s action radius; pill rounds the ends fully, for a compact choice such as a status or a person.',
+      values: ['rounded', 'pill'],
+      default: 'rounded',
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'Height, padding, and type size. xs is 1.5rem with the smallest text, for a control inside a line of small text; sm is the small control height (2rem by\n      default) with tighter padding and smaller text, md is the standard control height (2.5rem), and lg is taller (3rem) with roomier padding. Under touch, sm\n      grows to the touch minimum, while xs keeps its size inside its line and gains an invisible touch-sized hit area.',
+      values: ['xs', 'sm', 'md', 'lg'],
+      default: 'md',
+    },
+    stretch: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'stretch' },
+      description: 'Fills the inline size of its container.',
+      default: false,
+    },
+    target: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'target' },
+      description: 'Where a link opens, as on a native link. Only meaningful with as="a".',
+    },
+    tone: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'tone' },
+      description:
+        'Which colour the button speaks in. It applies to every variant, so an outline, a ghost, and a solid in the same tone are the same action at three volumes:\n      tone="danger" variant="outline" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour.',
+      values: ['accent', 'neutral', 'danger', 'success', 'warning', 'info'],
+      default: 'accent',
+    },
+    type: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'type' },
+      description:
+        'The button\'s type, as on a native button. button by default, so it never submits a form by accident. A link has no type.',
+      values: ['button', 'submit', 'reset'],
+      default: 'button',
+    },
+    variant: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'variant' },
+      description:
+        'Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is\n      hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it.',
+      values: ['outline', 'solid', 'danger', 'ghost', 'link'],
+      default: 'outline',
+    },
+  },
+}
 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' },
@@ -41,112 +158,74 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'align',
-    undefined,
-    ['center', 'start'],
   ) as 'center' | 'start',
   as: checkedProp<'button' | 'a'>(
     props['as'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'as',
-    undefined,
-    ['button', 'a'],
   ) as 'button' | 'a',
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
-    undefined,
-    undefined,
   ) as boolean,
-  href: checkedProp<string>(
-    props['href'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'href',
-    undefined,
-    undefined,
-  ),
+  href: checkedProp<string>(props['href'], { kind: 'terminal', name: 'string' }, false, 'href'),
   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,
-  rel: checkedProp<string>(
-    props['rel'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'rel',
-    undefined,
-    undefined,
-  ),
+  rel: checkedProp<string>(props['rel'], { kind: 'terminal', name: 'string' }, false, 'rel'),
   shape: checkedProp<'rounded' | 'pill'>(
     props['shape'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'shape',
-    undefined,
-    ['rounded', 'pill'],
   ) as 'rounded' | 'pill',
   size: checkedProp<'xs' | 'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
-    undefined,
-    ['xs', 'sm', 'md', 'lg'],
   ) as 'xs' | 'sm' | 'md' | 'lg',
   stretch: checkedProp<boolean>(
     props['stretch'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'stretch',
-    undefined,
-    undefined,
   ) as boolean,
   target: checkedProp<string>(
     props['target'],
     { kind: 'terminal', name: 'string' },
     false,
     'target',
-    undefined,
-    undefined,
   ),
   tone: checkedProp<'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
-    undefined,
-    ['accent', 'neutral', 'danger', 'success', 'warning', 'info'],
   ) as 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info',
   type: checkedProp<'button' | 'submit' | 'reset'>(
     props['type'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'type',
-    undefined,
-    ['button', 'submit', 'reset'],
   ) as 'button' | 'submit' | 'reset',
   variant: checkedProp<'outline' | 'solid' | 'danger' | 'ghost' | 'link'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
-    undefined,
-    ['outline', 'solid', 'danger', 'ghost', 'link'],
   ) as 'outline' | 'solid' | 'danger' | 'ghost' | 'link',
 }))
 void checkedProps.value
@@ -282,6 +361,7 @@ function attribute(value: unknown): any {
         `${(checkedProps.loading || checkedProps.pending) && !checkedProps.disabled}`
       ],
     )"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :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)"
@@ -322,6 +402,7 @@ function attribute(value: unknown): any {
       ],
     )"
     :aria-busy="checkedProps.loading || checkedProps.pending"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :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,11 +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, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    tone: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'tone' },
+      description:
+        'Which kind of message the callout carries, shown by its icon and colour: info (the default) for information, neutral for a muted aside, warning for a\n      caution, success for a confirmation, and danger for a harmful consequence. note remains as an alias for neutral.',
+      values: ['info', 'neutral', 'note', 'warning', 'success', 'danger'],
+      default: 'info',
+    },
+  },
+}
 const props = defineProps({
   tone: {
     type: null as unknown as PropType<
@@ -20,8 +33,6 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
-    undefined,
-    ['info', 'neutral', 'note', 'warning', 'success', 'danger'],
   ) as 'info' | 'neutral' | 'note' | 'warning' | 'success' | 'danger',
 }))
 void checkedProps.value
@@ -93,6 +104,7 @@ const hostState = computed(() =>
     data-component="ui-callout"
     role="note"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-ui-callout-state="hostState || undefined"
   >

package/vue/UiCard.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, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { preserveRootFocus } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    as: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'as' },
+      description:
+        'The native element the card renders. Choose the one that names the content: a section of a page, a self-contained article, or an aside.',
+      values: ['div', 'section', 'article', 'aside'],
+      default: 'div',
+    },
+    padding: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'padding' },
+      description:
+        'The space inside the card: sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).',
+      values: ['sm', 'md', 'lg'],
+      default: 'md',
+    },
+    tone: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'tone' },
+      description:
+        'danger adds a soft danger surface and a strong leading edge for consequential content.',
+      values: ['neutral', 'danger'],
+      default: 'neutral',
+    },
+    variant: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'variant' },
+      description:
+        'The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;\n      elevated floats above the page with a shadow, for a view\'s one card, such as sign-in.',
+      values: ['outlined', 'subtle', 'elevated'],
+      default: 'outlined',
+    },
+  },
+}
 const props = defineProps({
   as: {
     type: null as unknown as PropType<'div' | 'section' | 'article' | 'aside' | null>,
@@ -25,32 +65,24 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'as',
-    undefined,
-    ['div', 'section', 'article', 'aside'],
   ) as 'div' | 'section' | 'article' | 'aside',
   padding: checkedProp<'sm' | 'md' | 'lg'>(
     props['padding'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'padding',
-    undefined,
-    ['sm', 'md', 'lg'],
   ) as 'sm' | 'md' | 'lg',
   tone: checkedProp<'neutral' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
-    undefined,
-    ['neutral', 'danger'],
   ) as 'neutral' | 'danger',
   variant: checkedProp<'outlined' | 'subtle' | 'elevated'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
-    undefined,
-    ['outlined', 'subtle', 'elevated'],
   ) as 'outlined' | 'subtle' | 'elevated',
 }))
 void checkedProps.value
@@ -133,6 +165,7 @@ const hostState = computed(() =>
     v-if="checkedProps.as === 'section'"
     data-component="ui-card"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :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)"
@@ -146,6 +179,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 } }"
     :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)"
@@ -159,6 +193,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 } }"
     :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)"
@@ -172,6 +207,7 @@ const hostState = computed(() =>
     v-else
     data-component="ui-card"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :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)"

package/vue/UiCheckbox.d.ts

@@ -39,13 +39,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>;
@@ -80,21 +80,21 @@ 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;
+    invalid: boolean | null;
     size: "sm" | "md" | "lg" | null;
     disabled: boolean | null;
     checked: boolean | null;
     indeterminate: boolean | null;
-    invalid: boolean | null;
     required: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiCheckbox.vue

@@ -1,13 +1,81 @@
-<!-- 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 checkbox 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 checkbox, so it cannot be toggled or focused.',
+      default: false,
+    },
+    indeterminate: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { property: 'indeterminate' },
+      description:
+        'Shows the mixed state, for a checkbox that summarises a group whose items are partly checked. It sets the native indeterminate property, which is\n      independent of checked, so update it as the group changes.',
+      default: false,
+    },
+    invalid: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'aria-invalid' },
+      description:
+        'Exposes an externally validated error and styles the checkbox with the field danger colour.',
+      default: false,
+    },
+    name: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'name' },
+      description:
+        'The native name the checkbox submits under: a form that contains it sends name=value while it is checked, and nothing while it is unchecked, as a native\n      checkbox does. 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 checkbox required, so native form validation treats it as invalid until it is checked.',
+      default: false,
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'Aligns the checkbox 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\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 checkbox is checked, also reported in the change event\'s detail so one handler can tell checkboxes apart. on\n      by 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 },
@@ -24,64 +92,48 @@ 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,
   indeterminate: checkedProp<boolean>(
     props['indeterminate'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'indeterminate',
-    undefined,
-    undefined,
   ) as boolean,
   invalid: checkedProp<boolean>(
     props['invalid'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'invalid',
-    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
@@ -139,6 +191,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-checkbox:internalChecked', internalChecked)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -198,6 +251,7 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
   <label
     data-component="ui-checkbox"
     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-indeterminate="reflectedProp('indeterminate', 'indeterminate', checkedProps.indeterminate, undefined, false)"