@threadlabs/looma 0.21.6 → 0.22.1

package/vue/UiMenu.vue

@@ -1,12 +1,62 @@
-<!-- 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: {
+    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',
+    },
+    for: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'for' },
+      description: 'ID of the control that toggles and anchors the menu.',
+      default: '',
+    },
+    inline: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'inline' },
+      description:
+        'Displays the menu in the page flow without an overlay or trigger, for an embedded list of actions.',
+      default: false,
+    },
+    open: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'open' },
+      description: 'Whether the menu is open initially or when set externally.',
+      default: false,
+    },
+    placement: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'placement' },
+      description: 'Positions an associated menu relative to its trigger.',
+      default: 'bottom-start',
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'sm sizes the menu to a small trigger, such as an xs or sm button: smallest text, short rows, a small check, and a narrower minimum width. md is the\n      standard size.',
+      values: ['sm', 'md'],
+      default: 'md',
+    },
+  },
+}
 const props = defineProps({
   density: {
     type: null as unknown as PropType<'comfortable' | 'compact' | null>,
@@ -24,48 +74,36 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'density',
-    undefined,
-    ['comfortable', 'compact'],
   ) as 'comfortable' | 'compact',
   for: checkedProp<string>(
     props['for'],
     { kind: 'terminal', name: 'string' },
     false,
     'for',
-    undefined,
-    undefined,
   ) as string,
   inline: checkedProp<boolean>(
     props['inline'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'inline',
-    undefined,
-    undefined,
   ) as boolean,
   open: checkedProp<boolean>(
     props['open'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'open',
-    undefined,
-    undefined,
   ) as boolean,
   placement: checkedProp<string>(
     props['placement'],
     { kind: 'terminal', name: 'string' },
     false,
     'placement',
-    undefined,
-    undefined,
   ) as string,
   size: checkedProp<'sm' | 'md'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
-    undefined,
-    ['sm', 'md'],
   ) as 'sm' | 'md',
 }))
 void checkedProps.value
@@ -138,6 +176,7 @@ const emit = defineEmits<{
 
 const root = ref<HTMLElement | null>(null)
 const internalOpen = ref(false)
+provide('html-next:ui-menu:internalOpen', internalOpen)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -221,6 +260,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
     role="menu"
     aria-orientation="vertical"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
     :data-inline="reflectedProp('inline', 'inline', checkedProps.inline, undefined, false)"

package/vue/UiMenuGroup.vue

@@ -1,11 +1,22 @@
-<!-- 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: {
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description: 'Visible heading and accessible name for this group of menu items.',
+      default: '',
+    },
+  },
+}
 const props = defineProps({
   label: { type: null as unknown as PropType<string | null>, default: '' },
 })
@@ -15,8 +26,6 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'string' },
     false,
     'label',
-    undefined,
-    undefined,
   ) as string,
 }))
 void checkedProps.value
@@ -81,6 +90,7 @@ if (
     role="group"
     v-bind="nativeAttrs($attrs)"
     :aria-label="checkedProps.label ?? undefined"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
   >
     <div v-if="checkedProps.label" class="heading">{{ checkedProps.label }}</div>

package/vue/UiMenuItem.d.ts

@@ -31,14 +31,14 @@ 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 type: "checkbox" | "radio";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
+    "update:checked": (value: boolean) => any;
+    "update:value": (value: string) => any;
     "update:type": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     checked: {
@@ -62,14 +62,14 @@ 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 type: "checkbox" | "radio";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
+    "onUpdate:checked"?: ((value: boolean) => any) | undefined;
+    "onUpdate:value"?: ((value: string) => any) | undefined;
     "onUpdate:type"?: ((value: string) => any) | undefined;
 }>, {
     value: string | null;

package/vue/UiMenuItem.vue

@@ -1,13 +1,57 @@
-<!-- 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 { createDispatch, preserveRootFocus, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    checked: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'checked' },
+      description: 'Initial or externally controlled checked state of a checkbox or radio item.',
+      default: false,
+    },
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'aria-disabled' },
+      description:
+        'Makes the item unavailable: it is faded, skipped by the arrow keys, and choosing it does nothing. It stays visible and is announced as disabled.',
+      default: false,
+    },
+    href: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'href' },
+      description:
+        'A destination makes an action item a real link, with native navigation and link context actions.',
+      default: '',
+    },
+    type: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'type' },
+      description:
+        'An action closes its menu; a checkbox toggles, and a radio chooses one item within its nearest Menu Group. Checkable items keep the menu open.',
+      values: ['action', 'checkbox', 'radio'],
+      default: 'action',
+    },
+    value: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'data-value' },
+      description:
+        'The value the enclosing menu reports in its select event when this item is chosen. Give each item a distinct value so one handler can tell them\n      apart.',
+      default: '',
+    },
+  },
+}
 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,40 +68,30 @@ 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,
   href: checkedProp<string>(
     props['href'],
     { kind: 'terminal', name: 'string' },
     false,
     'href',
-    undefined,
-    undefined,
   ) as string,
   type: checkedProp<'action' | 'checkbox' | 'radio'>(
     props['type'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'type',
-    undefined,
-    ['action', 'checkbox', 'radio'],
   ) as 'action' | 'checkbox' | 'radio',
   value: checkedProp<string>(
     props['value'],
     { kind: 'terminal', name: 'string' },
     false,
     'value',
-    undefined,
-    undefined,
   ) as string,
 }))
 void checkedProps.value
@@ -117,6 +151,33 @@ const rootArmElement = useTemplateRef<HTMLElement>('@html-next/root')
 const root = rootArmElement
 preserveRootFocus(root)
 const internalChecked = ref(false)
+let guardedPrevious: any
+const guarded = computed(() => {
+  if (!(internalChecked.value == null || typeof internalChecked.value === 'boolean')) {
+    return guardedPrevious
+  }
+  return guardedPrevious =
+    typeof ((({
+        action: null,
+        checkbox: internalChecked.value,
+        radio: internalChecked.value,
+      }) as Record<string, any>)[checkedProps.value.type]) === 'boolean'
+      ? String(
+        (({
+          action: null,
+          checkbox: internalChecked.value,
+          radio: internalChecked.value,
+        }) as Record<string, any>)[checkedProps.value.type],
+      )
+      : attribute(
+        (({
+          action: null,
+          checkbox: internalChecked.value,
+          radio: internalChecked.value,
+        }) as Record<string, any>)[checkedProps.value.type],
+      )
+})
+provide('html-next:ui-menu-item:internalChecked', internalChecked)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -201,6 +262,7 @@ function attribute(value: unknown): any {
         `${checkedProps.disabled ?? ''}`
       ],
     )"
+    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-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
@@ -221,21 +283,9 @@ function attribute(value: unknown): any {
         any
       >)[checkedProps.type],
     )"
-    :aria-checked="typeof ((({ action: null, checkbox: internalChecked, radio: internalChecked }) as Record<
-      string,
-      any
-    >)[checkedProps.type]) === 'boolean'
-    ? String(
-      (({ action: null, checkbox: internalChecked, radio: internalChecked }) as Record<string, any>)[
-        checkedProps.type
-      ],
-    )
-    : attribute(
-      (({ action: null, checkbox: internalChecked, radio: internalChecked }) as Record<string, any>)[
-        checkedProps.type
-      ],
-    )"
+    :aria-checked="guarded"
     :aria-disabled="checkedProps.disabled ?? undefined"
+    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-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"

package/vue/UiMeter.vue

@@ -1,11 +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, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'label' },
+      description:
+        'What the meter measures, as its accessible name ("Collected"). Leave it empty only when aria-labelledby names the meter from visible text.',
+      default: '',
+    },
+    max: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'aria-valuemax' },
+      description:
+        'The value of a full bar, as on a native meter: 1 for a fraction, or the whole amount (a total, a count of items) with value as the part of it. Must be\n      above 0; otherwise the bar is empty.',
+      default: 1,
+    },
+    segments: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'segments' },
+      description:
+        'How many equal segments to draw the bar as, from 2 to 12, for a count of steps: set max to the same number and value to the steps done, so whole segments\n      fill, and say the step in valueText ("Shipped, step 4 of 6"). A value between steps fills part of a segment. 0 draws one continuous bar, as does any other\n      number.',
+      default: 0,
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'Thickness. sm is a thin bar that sits in a line of text, such as a table cell beside an amount; md stands on its own.',
+      values: ['sm', 'md'],
+      default: 'md',
+    },
+    tone: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'tone' },
+      description:
+        'Which colour the filled part speaks in, as on Badge: neutral is a quiet grey, accent draws the eye, and info, success, warning, and danger mark a state\n      (such as nothing yet, partial, complete, or needs attention). Colour alone says nothing to assistive technology or in forced colours, so say the state in\n      valueText or in text beside the meter too.',
+      values: ['neutral', 'accent', 'info', 'success', 'warning', 'danger'],
+      default: 'neutral',
+    },
+    value: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'value' },
+      description:
+        'How far along, from 0 to max. A value outside that range draws at the nearer end: below 0 is an empty track, above max a full bar.',
+      default: 0,
+    },
+    valueText: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'valuetext' },
+      description:
+        'The value as assistive technology reads it ("$750 of $1,240 collected", "3 of 5 done, overdue"). Empty reads the percentage.',
+      default: '',
+    },
+  },
+}
 const props = defineProps({
   label: { type: null as unknown as PropType<string | null>, default: '' },
   max: { type: null as unknown as PropType<number | null>, default: 1 },
@@ -26,56 +88,42 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'string' },
     false,
     'label',
-    undefined,
-    undefined,
   ) as string,
   max: checkedProp<number>(
     props['max'],
     { kind: 'terminal', name: 'number' },
     false,
     'max',
-    undefined,
-    undefined,
   ) as number,
   segments: checkedProp<number>(
     props['segments'],
     { kind: 'terminal', name: 'number' },
     false,
     'segments',
-    undefined,
-    undefined,
   ) as number,
   size: checkedProp<'sm' | 'md'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
-    undefined,
-    ['sm', 'md'],
   ) as 'sm' | 'md',
   tone: checkedProp<'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
-    undefined,
-    ['neutral', 'accent', 'info', 'success', 'warning', 'danger'],
   ) as 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger',
   value: checkedProp<number>(
     props['value'],
     { kind: 'terminal', name: 'number' },
     false,
     'value',
-    undefined,
-    undefined,
   ) as number,
   valueText: checkedProp<string>(
     props['valueText'],
     { kind: 'terminal', name: 'string' },
     false,
     'valueText',
-    undefined,
-    undefined,
   ) as string,
 }))
 void checkedProps.value
@@ -289,6 +337,7 @@ function number(value: unknown): number | undefined {
           : number(checkedProps.segments)! > number(1)!)}`
       ],
     )"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
     :data-max="reflectedProp('max', 'max', checkedProps.max, undefined, false)"
     :data-segments="reflectedProp('segments', 'segments', checkedProps.segments, undefined, false)"

package/vue/UiNavItem.vue

@@ -1,12 +1,54 @@
-<!-- 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 item renders: a button, or a link (a) that navigates to href.',
+      values: ['button', 'a'],
+      default: 'button',
+    },
+    current: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'current' },
+      description:
+        'Marks the item as where you are: it takes the selected surface, a stronger label, and a bar on its start edge, and states aria-current, which assistive\n      technology announces. "true" means the current page (aria-current="page"); "step" marks the current step of a process, and "location" the current place in\n      a set, such as a section of a record. Set it on one item at a time.',
+      values: ['true', 'false', 'page', 'step', 'location'],
+      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 item renders as a real link: a router, a modified click, and "open in new tab" all work. Without it the\n      item is a button, for switching views inside the app.',
+    },
+    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".',
+    },
+    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".',
+    },
+  },
+}
 const props = defineProps({
   as: { type: null as unknown as PropType<'button' | 'a' | null>, default: 'button' },
   current: {
@@ -23,40 +65,20 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'as',
-    undefined,
-    ['button', 'a'],
   ) as 'button' | 'a',
   current: checkedProp<'true' | 'false' | 'page' | 'step' | 'location'>(
     props['current'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'current',
-    undefined,
-    ['true', 'false', 'page', 'step', 'location'],
   ) as 'true' | 'false' | 'page' | 'step' | 'location',
-  href: checkedProp<string>(
-    props['href'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'href',
-    undefined,
-    undefined,
-  ),
-  rel: checkedProp<string>(
-    props['rel'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'rel',
-    undefined,
-    undefined,
-  ),
+  href: checkedProp<string>(props['href'], { kind: 'terminal', name: 'string' }, false, 'href'),
+  rel: checkedProp<string>(props['rel'], { kind: 'terminal', name: 'string' }, false, 'rel'),
   target: checkedProp<string>(
     props['target'],
     { kind: 'terminal', name: 'string' },
     false,
     'target',
-    undefined,
-    undefined,
   ),
 }))
 void checkedProps.value
@@ -159,6 +181,7 @@ function attribute(value: unknown): any {
         any
       >)[`${checkedProps.current ?? ''}`],
     )"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
     :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
@@ -193,6 +216,7 @@ function attribute(value: unknown): any {
         any
       >)[`${checkedProps.current ?? ''}`],
     )"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
     :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"

package/vue/UiPageHeader.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: {
+    align: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'align' },
+      description:
+        'Where the header sits. start runs along the page\'s start edge with actions at the end; center stacks everything centred, for a standalone card such as\n      sign-in.',
+      values: ['start', 'center'],
+      default: 'start',
+    },
+  },
+}
 const props = defineProps({
   align: { type: null as unknown as PropType<'start' | 'center' | null>, default: 'start' },
 })
@@ -15,8 +28,6 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'align',
-    undefined,
-    ['start', 'center'],
   ) as 'start' | 'center',
 }))
 void checkedProps.value
@@ -87,6 +98,7 @@ const hostState = computed(() =>
   <header
     data-component="ui-page-header"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-ui-page-header-state="hostState || undefined"
   >