@threadlabs/looma 0.21.5 → 0.22.0

package/vue/UiCombobox.vue

@@ -1,10 +1,11 @@
-<!-- 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,
@@ -12,12 +13,231 @@ import {
 import type { PropType, VNode } from 'vue'
 import { vBindControl } from './control'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 import UiBadge from './UiBadge.vue'
 import UiTooltip from './UiTooltip.vue'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    allowCreate: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'allowcreate' },
+      description:
+        'Offers the current query as a new option, reported as create-item. When nothing else matches, the offer is highlighted, so Enter creates it; with nothing\n      highlighted, Enter in multiple mode commits the typed text as a token separator does.',
+      default: false,
+    },
+    allowFreeText: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'allowfreetext' },
+      description: 'Allows values that do not match an authored option.',
+      default: false,
+    },
+    clearable: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'clearable' },
+      description:
+        'Adds a clear button to the field that empties the input and clears the selection, reported as value-change with kind "clear". It is disabled when there is\n      nothing to clear. In multiple mode it clears only the typed text; chosen items stay.',
+      default: false,
+    },
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description:
+        'Disables the input and every button in the field: the chosen-item badges, the clear and disclosure buttons, and the help button. The list closes and cannot\n      be opened, the value cannot be cleared, and a named combobox submits nothing with its form.',
+      default: false,
+    },
+    disclosure: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disclosure' },
+      description:
+        'Adds a chevron button that opens and closes the full, unfiltered list of options, for users who would rather browse than type. ArrowDown opens the same\n      list with or without it.',
+      default: false,
+    },
+    filter: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'filter' },
+      description:
+        'How the list narrows as the user types. label lists the options whose label contains the typed text, ignoring case. none lists every authored option, for\n      options already narrowed elsewhere, such as a server search, so a result that matched on data other than its label still shows. Leaving the field still\n      commits an option whose label matches the text, or the only one listed.',
+      values: ['label', 'none'],
+      default: 'label',
+    },
+    help: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'help' },
+      description:
+        'Help text for the field. When set, a help button appears beside the field and opens a tooltip with this text; while it is open, the input is described by\n      it.',
+      default: '',
+    },
+    invalid: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'invalid' },
+      description:
+        'Exposes an externally validated error on the input and field. It remains until the consumer clears it, independently of native validation.',
+      default: false,
+    },
+    items: {
+      type: {
+        kind: 'list',
+        item: {
+          kind: 'object',
+          fields: [
+            { name: 'id', type: { kind: 'terminal', name: 'string' }, optional: false },
+            { name: 'value', type: { kind: 'terminal', name: 'string' }, optional: false },
+            { name: 'label', type: { kind: 'terminal', name: 'string' }, optional: false },
+            { name: 'group', type: { kind: 'terminal', name: 'string' }, optional: true },
+            { name: 'disabled', type: { kind: 'terminal', name: 'boolean' }, optional: true },
+            { name: 'description', type: { kind: 'terminal', name: 'string' }, optional: true },
+            {
+              name: 'tag',
+              type: {
+                kind: 'object',
+                fields: [{
+                  name: 'label',
+                  type: { kind: 'terminal', name: 'string' },
+                  optional: false,
+                }, {
+                  name: 'tone',
+                  type: {
+                    kind: 'constrained',
+                    base: { kind: 'terminal', name: 'keyword' },
+                    values: ['neutral', 'accent', 'info', 'success', 'warning', 'danger'],
+                  },
+                  optional: true,
+                }, { name: 'color', type: { kind: 'terminal', name: 'string' }, optional: true }],
+                open: false,
+              },
+              optional: true,
+            },
+          ],
+          open: false,
+        },
+      },
+      required: false,
+      target: { attribute: 'items' },
+      description:
+        'The selected items in multiple mode, as JSON; a named combobox submits each one\'s value. A form reset returns to these items, or to authored selected\n      options when unset.',
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'label' },
+      description:
+        'The field\'s label, tied to its input and shown above it; required adds an asterisk. It also names the suggestion list. Pair it with\n      labelVisibility="sr-only" when the context already labels the field visibly.',
+      default: '',
+    },
+    labelVisibility: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'labelvisibility' },
+      description:
+        'visible shows the label above the field; sr-only hides it visually but keeps it as the input\'s accessible name. Use sr-only only when the surrounding\n      layout already makes the field\'s purpose clear.',
+      values: ['visible', 'sr-only'],
+      default: 'visible',
+    },
+    loading: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'aria-busy' },
+      description:
+        'Marks the suggestion list busy while the consumer loads options. It announces loading and suppresses the empty state and create offer until cleared.',
+      default: false,
+    },
+    multiple: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'data-multiple' },
+      description:
+        'Lets the user choose several options. Each choice becomes a removable badge before the input, the list stays open between picks, and choosing a checked\n      option removes it. items-change then reports the whole list of items, and selected-values-change the list of their values; use selectedValues or items,\n      not value, in this mode.',
+      default: false,
+    },
+    name: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'name' },
+      description:
+        'The form field name the combobox submits its value under, never the label shown in the field. Single mode sends one entry: the selected option\'s value, the\n      typed text when allowFreeText is set and no option is selected, or an empty string. Multiple mode sends one entry per chosen item\'s value, and nothing\n      when none is chosen. A disabled combobox sends nothing.',
+      default: '',
+    },
+    openOnFocus: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'openonfocus' },
+      description: 'Opens suggestions when the input receives focus, before typing.',
+      default: false,
+    },
+    placeholder: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'placeholder' },
+      description:
+        'Hint text shown in the empty input, as on a native input. It disappears as the user types, so it never replaces label.',
+      default: '',
+    },
+    query: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'query' },
+      description:
+        'The input\'s text, when the consumer controls it. Once set, the consumer owns the text: typing reports query-change, and the input returns to query unless\n      query is updated to match. Leave it unset to let the combobox manage its own text, showing the chosen option\'s label.',
+    },
+    readonly: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'readonly' },
+      description:
+        'Shows the current value without letting it change: the text can be selected but not edited, the list does not open, and the clear, disclosure, and badge\n      remove buttons are disabled. A named combobox still submits its value.',
+      default: false,
+    },
+    required: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'required' },
+      description:
+        'Requires a value: adds an asterisk to the label, marks the input required for native form validation, and makes validation report "A value is required."\n      when the field is left empty. In multiple mode a chosen item satisfies it, whatever is left in the input.',
+      default: false,
+    },
+    selectedValues: {
+      type: { kind: 'list', item: { kind: 'terminal', name: 'string' } },
+      required: false,
+      target: { attribute: 'selectedvalues' },
+      description:
+        'The selected option values in multiple mode, when the consumer controls the selection. Without it or items, authored options with selected set the initial\n      selection. Once set, the consumer owns it: each value shows as a badge with its authored option\'s label, adding or removing one reports\n      selected-values-change with the new list, and the badges follow selectedValues, not the user, unless it is updated to match. Setting it reports nothing.\n      It takes precedence over items; leave it unset to let the combobox keep its own selection.',
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'Field height, padding, and type size, matching Button\'s sizes so a field and a button of one size share a row. sm is the small control height (2rem by\n      default) with smaller text, for compact rows such as a table row or a filter bar; md is the standard control height; lg is taller with roomier padding.\n      Under a coarse pointer, sm grows to the 44px touch minimum and keeps body-size text. The label keeps its size.',
+      values: ['sm', 'md', 'lg'],
+      default: 'md',
+    },
+    tokenSeparators: {
+      type: { kind: 'list', item: { kind: 'terminal', name: 'string' } },
+      required: false,
+      target: { attribute: 'tokenseparators' },
+      description:
+        'Keys that commit the typed text in multiple mode, as KeyboardEvent key values such as "," or ";". The text is added as the option whose label matches it,\n      ignoring case, or with allowCreate is reported as create-item; otherwise it stays in the input.',
+    },
+    value: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'value' },
+      description:
+        'The selected value in single mode, which a named combobox submits with its form. The field shows the matching option\'s label, and a form reset returns to\n      this value. In a strict combobox, typing a search does not change the selection; leaving with no match restores its label. If omitted, the first authored\n      option with selected sets the initial value.',
+    },
+  },
+}
 const props = defineProps({
   allowCreate: { type: null as unknown as PropType<boolean | null>, default: false },
   allowFreeText: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -69,64 +289,48 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'allowCreate',
-    undefined,
-    undefined,
   ) as boolean,
   allowFreeText: checkedProp<boolean>(
     props['allowFreeText'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'allowFreeText',
-    undefined,
-    undefined,
   ) as boolean,
   clearable: checkedProp<boolean>(
     props['clearable'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'clearable',
-    undefined,
-    undefined,
   ) as boolean,
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
-    undefined,
-    undefined,
   ) as boolean,
   disclosure: checkedProp<boolean>(
     props['disclosure'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disclosure',
-    undefined,
-    undefined,
   ) as boolean,
   filter: checkedProp<'label' | 'none'>(
     props['filter'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'filter',
-    undefined,
-    ['label', 'none'],
   ) as 'label' | 'none',
   help: checkedProp<string>(
     props['help'],
     { kind: 'terminal', name: 'string' },
     false,
     'help',
-    undefined,
-    undefined,
   ) as string,
   invalid: checkedProp<boolean>(
     props['invalid'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'invalid',
-    undefined,
-    undefined,
   ) as boolean,
   items: checkedProp<
     readonly ({
@@ -182,121 +386,81 @@ const checkedProps = computed(() => ({
     },
     false,
     'items',
-    undefined,
-    undefined,
   ),
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
     false,
     'label',
-    undefined,
-    undefined,
   ) as string,
   labelVisibility: checkedProp<'visible' | 'sr-only'>(
     props['labelVisibility'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'labelVisibility',
-    undefined,
-    ['visible', 'sr-only'],
   ) as 'visible' | 'sr-only',
   loading: checkedProp<boolean>(
     props['loading'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'loading',
-    undefined,
-    undefined,
   ) as boolean,
   multiple: checkedProp<boolean>(
     props['multiple'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'multiple',
-    undefined,
-    undefined,
   ) as boolean,
   name: checkedProp<string>(
     props['name'],
     { kind: 'terminal', name: 'string' },
     false,
     'name',
-    undefined,
-    undefined,
   ) as string,
   openOnFocus: checkedProp<boolean>(
     props['openOnFocus'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'openOnFocus',
-    undefined,
-    undefined,
   ) as boolean,
   placeholder: checkedProp<string>(
     props['placeholder'],
     { kind: 'terminal', name: 'string' },
     false,
     'placeholder',
-    undefined,
-    undefined,
   ) as string,
-  query: checkedProp<string>(
-    props['query'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'query',
-    undefined,
-    undefined,
-  ),
+  query: checkedProp<string>(props['query'], { kind: 'terminal', name: 'string' }, false, 'query'),
   readonly: checkedProp<boolean>(
     props['readonly'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'readonly',
-    undefined,
-    undefined,
   ) as boolean,
   required: checkedProp<boolean>(
     props['required'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'required',
-    undefined,
-    undefined,
   ) as boolean,
   selectedValues: checkedProp<readonly (string)[]>(
     props['selectedValues'],
     { kind: 'list', item: { kind: 'terminal', name: 'string' } },
     false,
     'selectedValues',
-    undefined,
-    undefined,
   ),
   size: checkedProp<'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
-    undefined,
-    ['sm', 'md', 'lg'],
   ) as 'sm' | 'md' | 'lg',
   tokenSeparators: checkedProp<readonly (string)[]>(
     props['tokenSeparators'],
     { kind: 'list', item: { kind: 'terminal', name: 'string' } },
     false,
     'tokenSeparators',
-    undefined,
-    undefined,
-  ),
-  value: checkedProp<string>(
-    props['value'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'value',
-    undefined,
-    undefined,
   ),
+  value: checkedProp<string>(props['value'], { kind: 'terminal', name: 'string' }, false, 'value'),
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -591,7 +755,7 @@ const rows = ref<
     }
   }[]
 >([])
-const active = ref<number | null>(-1)
+const active = ref(-1)
 const helpOpen = ref(false)
 const lookupError = ref('')
 const validation = ref<
@@ -636,22 +800,94 @@ const statusText = ref('')
 const validationStatus = ref('pristine')
 let guardedPrevious: any
 const guarded = computed(() => {
+  if (!(expanded.value == null || typeof expanded.value === 'boolean')) return guardedPrevious
+  return guardedPrevious = expanded.value
+})
+let guardedBindingPrevious: any
+const guardedBinding = computed(() => {
+  if (!(validationStatus.value == null || typeof validationStatus.value === 'string')) {
+    return guardedBindingPrevious
+  }
+  return guardedBindingPrevious = checkedProps.value.invalid || validationStatus.value === 'error'
+})
+let guardedBinding2Previous: any
+const guardedBinding2 = computed(() => {
+  if (!(validationStatus.value == null || typeof validationStatus.value === 'string')) {
+    return guardedBinding2Previous
+  }
+  return guardedBinding2Previous = checkedProps.value.loading
+    || validationStatus.value === 'pending'
+})
+let guardedBinding3Previous: any
+const guardedBinding3 = computed(() => {
   if (
     !(internalItems.value?.['0'] == null
       || (typeof internalItems.value?.['0'] === 'object' && internalItems.value?.['0'] !== null
         && !Array.isArray(internalItems.value?.['0'])))
-  ) return guardedPrevious
-  return guardedPrevious = checkedProps.value.required
+  ) return guardedBinding3Previous
+  return guardedBinding3Previous = checkedProps.value.required
     && !(checkedProps.value.multiple && internalItems.value[0])
 })
-let guardedBindingPrevious: any
-const guardedBinding = computed(() => {
+let guardedBinding4Previous: any
+const guardedBinding4 = computed(() => {
+  if (!(submitted.value == null || typeof submitted.value === 'string')) {
+    return guardedBinding4Previous
+  }
+  return guardedBinding4Previous = submitted.value
+})
+let guardedBinding5Previous: any
+const guardedBinding5 = computed(() => {
   if (
-    !(selected.value == null || (typeof selected.value === 'string' || selected.value === null))
-  ) return guardedBindingPrevious
-  return guardedBindingPrevious = checkedProps.value.disabled || checkedProps.value.readonly
+    !((raw.value == null || typeof raw.value === 'string')
+      && (selected.value == null || typeof selected.value === 'string'))
+  ) return guardedBinding5Previous
+  return guardedBinding5Previous = checkedProps.value.disabled || checkedProps.value.readonly
     || (!raw.value && (checkedProps.value.multiple || selected.value === null))
 })
+let guardedBinding6Previous: any
+const guardedBinding6 = computed(() => {
+  if (!(expanded.value == null || typeof expanded.value === 'boolean')) {
+    return guardedBinding6Previous
+  }
+  return guardedBinding6Previous = !expanded.value
+})
+let guardedBinding7Previous: any
+const guardedBinding7 = computed(() => {
+  if (!(createIndex.value == null || Number.isInteger(createIndex.value))) {
+    return guardedBinding7Previous
+  }
+  return guardedBinding7Previous = createIndex.value
+})
+let guardedBinding8Previous: any
+const guardedBinding8 = computed(() => {
+  if (!(message.value == null || typeof message.value === 'string')) return guardedBinding8Previous
+  return guardedBinding8Previous = message.value
+})
+let guardedBinding9Previous: any
+const guardedBinding9 = computed(() => {
+  if (!(statusText.value == null || typeof statusText.value === 'string')) {
+    return guardedBinding9Previous
+  }
+  return guardedBinding9Previous = statusText.value
+})
+provide('html-next:ui-combobox:internalItems', internalItems)
+provide('html-next:ui-combobox:raw', raw)
+provide('html-next:ui-combobox:display', display)
+provide('html-next:ui-combobox:selected', selected)
+provide('html-next:ui-combobox:expanded', expanded)
+provide('html-next:ui-combobox:rows', rows)
+provide('html-next:ui-combobox:active', active)
+provide('html-next:ui-combobox:helpOpen', helpOpen)
+provide('html-next:ui-combobox:lookupError', lookupError)
+provide('html-next:ui-combobox:validation', validation)
+provide('html-next:ui-combobox:uid', uid)
+provide('html-next:ui-combobox:submitted', submitted)
+provide('html-next:ui-combobox:groups', groups)
+provide('html-next:ui-combobox:creatable', creatable)
+provide('html-next:ui-combobox:createIndex', createIndex)
+provide('html-next:ui-combobox:message', message)
+provide('html-next:ui-combobox:statusText', statusText)
+provide('html-next:ui-combobox:validationStatus', validationStatus)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -1071,6 +1307,7 @@ function uniqueKeys<T>(
   <div
     data-component="ui-combobox"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-allow-create="reflectedProp('allowCreate', 'allow-create', checkedProps.allowCreate, undefined, false)"
     :data-allow-free-text="reflectedProp('allowFreeText', 'allow-free-text', checkedProps.allowFreeText, undefined, false)"
     :data-clearable="reflectedProp('clearable', 'clearable', checkedProps.clearable, undefined, false)"
@@ -1126,13 +1363,13 @@ function uniqueKeys<T>(
             v-bind-control="{ tag: 'input', name: 'value', value: display, nativeProperty: true, defaultValue: '' }"
             :id="`${uid}-input`"
             :aria-controls="`${uid}-listbox`"
-            :aria-expanded="expanded"
-            :aria-invalid="checkedProps.invalid || validationStatus === 'error'"
-            :aria-busy="checkedProps.loading || validationStatus === 'pending'"
+            :aria-expanded="guarded"
+            :aria-invalid="guardedBinding"
+            :aria-busy="guardedBinding2"
             :placeholder="checkedProps.placeholder ?? undefined"
             :disabled="checkedProps.disabled ?? undefined"
             :readonly="checkedProps.readonly ?? undefined"
-            :required="guarded"
+            :required="guardedBinding3"
             ref="input"
           >
         </div>
@@ -1140,7 +1377,7 @@ function uniqueKeys<T>(
           v-if="checkedProps.name && !checkedProps.multiple"
           type="hidden"
           :name="checkedProps.name ?? undefined"
-          :value.attr="submitted"
+          :value.attr="guardedBinding4"
           :disabled="checkedProps.disabled ?? undefined"
         >
         <template v-if="checkedProps.name && checkedProps.multiple"><KeyedBoundary><input
@@ -1156,7 +1393,7 @@ function uniqueKeys<T>(
           type="button"
           data-combobox-action="clear"
           aria-label="Clear"
-          :disabled="guardedBinding"
+          :disabled="guardedBinding5"
         >
           <svg
             class="affordance-icon"
@@ -1223,7 +1460,7 @@ function uniqueKeys<T>(
       :id="`${uid}-help-text`"
       :for="`${uid}-help`"
     >{{ checkedProps.help }}</UiTooltip>
-    <div class="popup" :hidden="!expanded" ref="popup">
+    <div class="popup" :hidden="guardedBinding6" ref="popup">
       <div
         role="listbox"
         :id="`${uid}-listbox`"
@@ -1281,12 +1518,12 @@ function uniqueKeys<T>(
           aria-selected="false"
           :data-multiple="checkedProps.multiple ? '' : undefined"
           :id="`${uid}-option-${createIndex}`"
-          :data-index="createIndex"
+          :data-index="guardedBinding7"
           :class="{ active: createIndex === active }"
         >
           {{ `Create “${raw}”` }}
         </div>
-        <div v-if="message" class="message">{{ message }}</div>
+        <div v-if="message" class="message">{{ guardedBinding8 }}</div>
         <div
           v-if="!checkedProps.loading && !(rows[0]) && !creatable && !lookupError"
           class="message"
@@ -1301,7 +1538,9 @@ function uniqueKeys<T>(
         {{ issue.message }}
       </div>
     </div>
-    <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">{{ statusText }}</div>
+    <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+      {{ guardedBinding9 }}
+    </div>
     <div class="authored-options" hidden="" aria-hidden="true" ref="options"><slot /></div>
   </div>
 </template>

package/vue/UiContainer.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: {
+    gutters: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'gutters' },
+      description:
+        'Inline padding on both sides, which keeps content off the edges of a narrow screen: s is 0.75rem, m is 1rem (also the default), and l is 1.5rem.',
+      values: ['s', 'm', 'l'],
+    },
+    measure: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'measure' },
+      description:
+        'The container\'s maximum width, in characters of the current font: narrow is 45ch, wide is 80ch, and unset is 65ch, a comfortable reading line. The\n      container centres itself when its parent is wider. The --ui-container-measure custom property, set on the container itself, overrides it; set on an\n      ancestor, it does nothing.',
+      values: ['narrow', 'wide'],
+    },
+  },
+}
 const props = defineProps({
   gutters: { type: null as unknown as PropType<'s' | 'm' | 'l' | null>, default: null },
   measure: { type: null as unknown as PropType<'narrow' | 'wide' | null>, default: null },
@@ -16,16 +36,12 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'gutters',
-    undefined,
-    ['s', 'm', 'l'],
   ),
   measure: checkedProp<'narrow' | 'wide'>(
     props['measure'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'measure',
-    undefined,
-    ['narrow', 'wide'],
   ),
 }))
 void checkedProps.value
@@ -100,6 +116,7 @@ const hostState = computed(() =>
   <div
     data-component="ui-container"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-gutters="reflectedProp('gutters', 'gutters', checkedProps.gutters, undefined, false)"
     :data-measure="reflectedProp('measure', 'measure', checkedProps.measure, undefined, false)"
     :data-ui-container-state="hostState || undefined"