@threadlabs/looma 0.22.9 → 0.22.11

package/vue/UiFormField.vue

@@ -1,9 +1,9 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 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, vPropValidity } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
@@ -34,30 +34,34 @@ const propValidityContract = {
       default: false,
     },
   },
-}
+} as const
 const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   invalid: { type: null as unknown as PropType<boolean | null>, default: false },
   required: { type: null as unknown as PropType<boolean | null>, default: false },
 })
+const acceptedProps: Record<string, unknown> = { disabled: false, invalid: false, required: false }
 const checkedProps = computed(() => ({
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
+    acceptedProps,
   ) as boolean,
   invalid: checkedProp<boolean>(
     props['invalid'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'invalid',
+    acceptedProps,
   ) as boolean,
   required: checkedProp<boolean>(
     props['required'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'required',
+    acceptedProps,
   ) as boolean,
 }))
 void checkedProps.value
@@ -133,6 +137,16 @@ useComponentHost(() => import('../components/ui-form-field/ui-form-field.js'), {
     definition: './components/ui-form-field/ui-form-field.html',
   },
   props: checkedProps,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['disabled', 'invalid', 'required'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
 </script>
 
@@ -140,7 +154,7 @@ useComponentHost(() => import('../components/ui-form-field/ui-form-field.js'), {
   <div
     data-component="ui-form-field"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
     :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"

package/vue/UiGrid.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -32,30 +32,34 @@ const propValidityContract = {
       values: ['sm', 'md', 'lg'],
     },
   },
-}
+} as const
 const props = defineProps({
   columns: { type: null as unknown as PropType<number | null>, default: null },
   gap: { type: null as unknown as PropType<'xs' | 's' | 'm' | 'l' | 'xl' | null>, default: null },
   min: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: null },
 })
+const acceptedProps: Record<string, unknown> = { columns: null, gap: null, min: null }
 const checkedProps = computed(() => ({
   columns: checkedProp<number>(
     props['columns'],
     { kind: 'terminal', name: 'integer' },
     false,
     'columns',
+    acceptedProps,
   ),
   gap: checkedProp<'xs' | 's' | 'm' | 'l' | 'xl'>(
     props['gap'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'gap',
+    acceptedProps,
   ),
   min: checkedProp<'sm' | 'md' | 'lg'>(
     props['min'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'min',
+    acceptedProps,
   ),
 }))
 void checkedProps.value
@@ -126,7 +130,7 @@ const hostState = computed(() =>
     data-component="ui-grid"
     v-bind="nativeAttrs($attrs)"
     :style="{ '--_grid-column-cap': checkedProps.columns ?? undefined }"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-columns="reflectedProp('columns', 'columns', checkedProps.columns, undefined, false)"
     :data-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
     :data-min="reflectedProp('min', 'min', checkedProps.min, undefined, false)"

package/vue/UiIcon.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -17,16 +17,18 @@ const propValidityContract = {
       default: '',
     },
   },
-}
+} as const
 const props = defineProps({
   name: { type: null as unknown as PropType<string | null>, default: '' },
 })
+const acceptedProps: Record<string, unknown> = { name: '' }
 const checkedProps = computed(() => ({
   name: checkedProp<string>(
     props['name'],
     { kind: 'terminal', name: 'string' },
     false,
     'name',
+    acceptedProps,
   ) as string,
 }))
 void checkedProps.value
@@ -448,7 +450,7 @@ function list(value: unknown): any[] {
     data-component="ui-icon"
     aria-hidden="true"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
   ><svg
       viewBox="0 0 24 24"

package/vue/UiIconButton.vue

@@ -1,9 +1,9 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 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, vPropValidity } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiSpinner from './UiSpinner.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -73,7 +73,7 @@ const propValidityContract = {
       default: 'ghost',
     },
   },
-}
+} as const
 const props = defineProps({
   anticipatory: { type: null as unknown as PropType<boolean | null>, default: false },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -87,49 +87,72 @@ const props = defineProps({
     default: 'ghost',
   },
 })
+const acceptedProps: Record<string, unknown> = {
+  anticipatory: false,
+  disabled: false,
+  label: null,
+  loading: false,
+  pending: false,
+  round: false,
+  size: 'md',
+  variant: 'ghost',
+}
 const checkedProps = computed(() => ({
   anticipatory: checkedProp<boolean>(
     props['anticipatory'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'anticipatory',
+    acceptedProps,
   ) as boolean,
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
+    acceptedProps,
   ) as boolean,
-  label: checkedProp<string>(props['label'], { kind: 'terminal', name: 'string' }, false, 'label'),
+  label: checkedProp<string>(
+    props['label'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'label',
+    acceptedProps,
+  ),
   loading: checkedProp<boolean>(
     props['loading'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'loading',
+    acceptedProps,
   ) as boolean,
   pending: checkedProp<boolean>(
     props['pending'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'pending',
+    acceptedProps,
   ) as boolean,
   round: checkedProp<boolean>(
     props['round'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'round',
+    acceptedProps,
   ) as boolean,
   size: checkedProp<'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
+    acceptedProps,
   ) as 'sm' | 'md' | 'lg',
   variant: checkedProp<'ghost' | 'outline' | 'solid'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
+    acceptedProps,
   ) as 'ghost' | 'outline' | 'solid',
 }))
 void checkedProps.value
@@ -213,6 +236,25 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     definition: './components/ui-icon-button/ui-icon-button.html',
   },
   props: checkedProps,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: [
+    'anticipatory',
+    'disabled',
+    'label',
+    'loading',
+    'pending',
+    'round',
+    'size',
+    'variant',
+  ],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
 
 function text(value: unknown): string {
@@ -250,7 +292,7 @@ function attribute(value: unknown): any {
       ],
     )"
     :aria-busy="checkedProps.loading || checkedProps.pending"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-anticipatory="reflectedProp('anticipatory', 'anticipatory', checkedProps.anticipatory, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"

package/vue/UiInput.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
 <script
   setup
   lang="ts"
@@ -23,7 +23,7 @@ import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { readBoundControl, vBindControl } from './control'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp, selectedPropNode, vPropValidity } from './props'
+import { checkedProp, propValidityState, selectedPropNode, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
@@ -136,7 +136,7 @@ const propValidityContract = {
       },
     },
   },
-}
+} as const
 const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   invalid: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -184,38 +184,58 @@ const props = defineProps({
     >,
   },
 })
+const acceptedProps: Record<string, unknown> = {
+  disabled: false,
+  invalid: false,
+  readonly: false,
+  required: false,
+  size: 'md',
+  type: 'text',
+  value: null,
+}
 const checkedProps = computed(() => ({
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
+    acceptedProps,
   ) as boolean,
   invalid: checkedProp<boolean>(
     props['invalid'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'invalid',
+    acceptedProps,
   ) as boolean,
   readonly: checkedProp<boolean>(
     props['readonly'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'readonly',
+    acceptedProps,
   ) as boolean,
   required: checkedProp<boolean>(
     props['required'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'required',
+    acceptedProps,
   ) as boolean,
   size: checkedProp<'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
+    acceptedProps,
   ) as 'sm' | 'md' | 'lg',
-  type: checkedProp<T0>(props['type'], { kind: 'terminal', name: 'keyword' }, false, 'type') as T0,
+  type: checkedProp<T0>(
+    props['type'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'type',
+    acceptedProps,
+  ) as T0,
   value: checkedProp<
     T0 extends 'text' ? string | null
       : T0 extends 'search' ? string | null
@@ -234,24 +254,34 @@ const checkedProps = computed(() => ({
       : null
   >(
     props['value'],
-    selectedPropNode(props['type'], [
-      { value: 'text', type: { kind: 'terminal', name: 'string' } },
-      { value: 'search', type: { kind: 'terminal', name: 'string' } },
-      { value: 'tel', type: { kind: 'terminal', name: 'string' } },
-      { value: 'url', type: { kind: 'terminal', name: 'string' } },
-      { value: 'email', type: { kind: 'terminal', name: 'string' } },
-      { value: 'password', type: { kind: 'terminal', name: 'string' } },
-      { value: 'date', type: { kind: 'terminal', name: 'string' } },
-      { value: 'month', type: { kind: 'terminal', name: 'string' } },
-      { value: 'week', type: { kind: 'terminal', name: 'string' } },
-      { value: 'time', type: { kind: 'terminal', name: 'string' } },
-      { value: 'datetime-local', type: { kind: 'terminal', name: 'string' } },
-      { value: 'number', type: { kind: 'terminal', name: 'number' } },
-      { value: 'range', type: { kind: 'terminal', name: 'number' } },
-      { value: 'color', type: { kind: 'terminal', name: 'string' } },
-    ]),
+    selectedPropNode(
+      checkedProp<unknown>(
+        props['type'],
+        { kind: 'terminal', name: 'keyword' },
+        false,
+        'type',
+        acceptedProps,
+      ),
+      [
+        { value: 'text', type: { kind: 'terminal', name: 'string' } },
+        { value: 'search', type: { kind: 'terminal', name: 'string' } },
+        { value: 'tel', type: { kind: 'terminal', name: 'string' } },
+        { value: 'url', type: { kind: 'terminal', name: 'string' } },
+        { value: 'email', type: { kind: 'terminal', name: 'string' } },
+        { value: 'password', type: { kind: 'terminal', name: 'string' } },
+        { value: 'date', type: { kind: 'terminal', name: 'string' } },
+        { value: 'month', type: { kind: 'terminal', name: 'string' } },
+        { value: 'week', type: { kind: 'terminal', name: 'string' } },
+        { value: 'time', type: { kind: 'terminal', name: 'string' } },
+        { value: 'datetime-local', type: { kind: 'terminal', name: 'string' } },
+        { value: 'number', type: { kind: 'terminal', name: 'number' } },
+        { value: 'range', type: { kind: 'terminal', name: 'number' } },
+        { value: 'color', type: { kind: 'terminal', name: 'string' } },
+      ],
+    ),
     false,
     'value',
+    acceptedProps,
   ),
   modelValue: checkedProp<
     T0 extends 'text' ? string | null
@@ -271,24 +301,34 @@ const checkedProps = computed(() => ({
       : null
   >(
     props.modelValue,
-    selectedPropNode(props['type'], [
-      { value: 'text', type: { kind: 'terminal', name: 'string' } },
-      { value: 'search', type: { kind: 'terminal', name: 'string' } },
-      { value: 'tel', type: { kind: 'terminal', name: 'string' } },
-      { value: 'url', type: { kind: 'terminal', name: 'string' } },
-      { value: 'email', type: { kind: 'terminal', name: 'string' } },
-      { value: 'password', type: { kind: 'terminal', name: 'string' } },
-      { value: 'date', type: { kind: 'terminal', name: 'string' } },
-      { value: 'month', type: { kind: 'terminal', name: 'string' } },
-      { value: 'week', type: { kind: 'terminal', name: 'string' } },
-      { value: 'time', type: { kind: 'terminal', name: 'string' } },
-      { value: 'datetime-local', type: { kind: 'terminal', name: 'string' } },
-      { value: 'number', type: { kind: 'terminal', name: 'number' } },
-      { value: 'range', type: { kind: 'terminal', name: 'number' } },
-      { value: 'color', type: { kind: 'terminal', name: 'string' } },
-    ]),
+    selectedPropNode(
+      checkedProp<unknown>(
+        props['type'],
+        { kind: 'terminal', name: 'keyword' },
+        false,
+        'type',
+        acceptedProps,
+      ),
+      [
+        { value: 'text', type: { kind: 'terminal', name: 'string' } },
+        { value: 'search', type: { kind: 'terminal', name: 'string' } },
+        { value: 'tel', type: { kind: 'terminal', name: 'string' } },
+        { value: 'url', type: { kind: 'terminal', name: 'string' } },
+        { value: 'email', type: { kind: 'terminal', name: 'string' } },
+        { value: 'password', type: { kind: 'terminal', name: 'string' } },
+        { value: 'date', type: { kind: 'terminal', name: 'string' } },
+        { value: 'month', type: { kind: 'terminal', name: 'string' } },
+        { value: 'week', type: { kind: 'terminal', name: 'string' } },
+        { value: 'time', type: { kind: 'terminal', name: 'string' } },
+        { value: 'datetime-local', type: { kind: 'terminal', name: 'string' } },
+        { value: 'number', type: { kind: 'terminal', name: 'number' } },
+        { value: 'range', type: { kind: 'terminal', name: 'number' } },
+        { value: 'color', type: { kind: 'terminal', name: 'string' } },
+      ],
+    ),
     false,
     'modelValue',
+    acceptedProps,
   ),
 }))
 void checkedProps.value
@@ -403,6 +443,19 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
     definition: './components/ui-input/ui-input.html',
   },
   props: checkedProps,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['disabled', 'invalid', 'readonly', 'required', 'size', 'type', 'value'],
+  propValidity: (name: string) =>
+    propValidityState({
+      contract: propValidityContract,
+      values: { ...props, type: checkedProps.value['type'] },
+    }, name),
 })
 </script>
 
@@ -415,7 +468,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
     :readonly="checkedProps.readonly ?? undefined"
     :required="checkedProps.required ?? undefined"
     :aria-invalid="checkedProps.invalid ?? undefined"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props, type: checkedProps['type'] } }"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
     :data-readonly="reflectedProp('readonly', 'readonly', checkedProps.readonly, undefined, false)"

package/vue/UiInputGroup.vue

@@ -1,9 +1,9 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 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, vPropValidity } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
@@ -18,16 +18,18 @@ const propValidityContract = {
       default: false,
     },
   },
-}
+} as const
 const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
 })
+const acceptedProps: Record<string, unknown> = { disabled: false }
 const checkedProps = computed(() => ({
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
+    acceptedProps,
   ) as boolean,
 }))
 void checkedProps.value
@@ -103,6 +105,16 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
     definition: './components/ui-input-group/ui-input-group.html',
   },
   props: checkedProps,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['disabled'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
 </script>
 
@@ -110,7 +122,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
   <div
     data-component="ui-input-group"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-ui-input-group-state="hostState || undefined"
     ref="root"
@@ -257,6 +269,20 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
   white-space: nowrap;
 }
 
+/* Fixed text is part of the value, but should not look editable. */
+.affix:has([slot="prefix"]),
+.affix:has([slot="suffix"]) {
+  background: var(--ui-surface-muted);
+}
+
+.affix:has([slot="prefix"]) {
+  border-inline-end: 1px solid var(--ui-border-divider);
+}
+
+.affix:has([slot="suffix"]) {
+  border-inline-start: 1px solid var(--ui-border-divider);
+}
+
 /* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
    small button sits inside it with the difference split evenly, and the field keeps its height. */
 .action {

package/vue/UiList.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.18 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -46,7 +46,7 @@ const propValidityContract = {
       default: 'none',
     },
   },
-}
+} as const
 const props = defineProps({
   as: { type: null as unknown as PropType<'ul' | 'ol' | null>, default: 'ul' },
   density: {
@@ -56,27 +56,40 @@ const props = defineProps({
   layout: { type: null as unknown as PropType<'rows' | 'grid' | null>, default: 'rows' },
   markers: { type: null as unknown as PropType<'none' | 'disc' | null>, default: 'none' },
 })
+const acceptedProps: Record<string, unknown> = {
+  as: 'ul',
+  density: 'comfortable',
+  layout: 'rows',
+  markers: 'none',
+}
 const checkedProps = computed(() => ({
-  as: checkedProp<'ul' | 'ol'>(props['as'], { kind: 'terminal', name: 'keyword' }, false, 'as') as
-    | 'ul'
-    | 'ol',
+  as: checkedProp<'ul' | 'ol'>(
+    props['as'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'as',
+    acceptedProps,
+  ) as 'ul' | 'ol',
   density: checkedProp<'comfortable' | 'compact'>(
     props['density'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'density',
+    acceptedProps,
   ) as 'comfortable' | 'compact',
   layout: checkedProp<'rows' | 'grid'>(
     props['layout'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'layout',
+    acceptedProps,
   ) as 'rows' | 'grid',
   markers: checkedProp<'none' | 'disc'>(
     props['markers'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'markers',
+    acceptedProps,
   ) as 'none' | 'disc',
 }))
 void checkedProps.value
@@ -157,7 +170,7 @@ const hostState = computed(() =>
     v-if="checkedProps.as === 'ol'"
     data-component="ui-list"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-layout="reflectedProp('layout', 'layout', checkedProps.layout, undefined, false)"
@@ -172,7 +185,7 @@ const hostState = computed(() =>
     data-component="ui-list"
     role="list"
     v-bind="nativeAttrs($attrs)"
-    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-layout="reflectedProp('layout', 'layout', checkedProps.layout, undefined, false)"