@threadlabs/looma 0.24.1 → 0.25.1

package/vue/UiInput.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-declare const __VLS_export: <T0 extends "text" | "search" | "tel" | "url" | "email" | "password" | "date" | "month" | "week" | "time" | "datetime-local" | "number" | "range" | "color" | null = "text">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const __VLS_export: <T0 extends "text" | "search" | "tel" | "url" | "email" | "password" | "date" | "month" | "week" | "time" | "datetime-local" | "number" | "range" | "color" | "file" | null = "text">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<import("vue").ExtractPublicPropTypes<{
         disabled: {
             type: PropType<boolean | null>;
@@ -26,21 +26,21 @@ declare const __VLS_export: <T0 extends "text" | "search" | "tel" | "url" | "ema
             default: string;
         };
         value: {
-            type: PropType<T0 extends "text" ? string | null : T0 extends "search" ? string | null : T0 extends "tel" ? string | null : T0 extends "url" ? string | null : T0 extends "email" ? string | null : T0 extends "password" ? string | null : T0 extends "date" ? string | null : T0 extends "month" ? string | null : T0 extends "week" ? string | null : T0 extends "time" ? string | null : T0 extends "datetime-local" ? string | null : T0 extends "number" ? number | null : T0 extends "range" ? number | null : T0 extends "color" ? string | null : null>;
+            type: PropType<T0 extends "text" ? string | null : T0 extends "search" ? string | null : T0 extends "tel" ? string | null : T0 extends "url" ? string | null : T0 extends "email" ? string | null : T0 extends "password" ? string | null : T0 extends "date" ? string | null : T0 extends "month" ? string | null : T0 extends "week" ? string | null : T0 extends "time" ? string | null : T0 extends "datetime-local" ? string | null : T0 extends "number" ? number | null : T0 extends "range" ? number | null : T0 extends "color" ? string | null : T0 extends "file" ? string | null : null>;
             default: null;
         };
         modelValue: {
-            type: PropType<(T0 extends "text" ? string | null : T0 extends "search" ? string | null : T0 extends "tel" ? string | null : T0 extends "url" ? string | null : T0 extends "email" ? string | null : T0 extends "password" ? string | null : T0 extends "date" ? string | null : T0 extends "month" ? string | null : T0 extends "week" ? string | null : T0 extends "time" ? string | null : T0 extends "datetime-local" ? string | null : T0 extends "number" ? number | null : T0 extends "range" ? number | null : T0 extends "color" ? string | null : null) | undefined>;
+            type: PropType<(T0 extends "text" ? string | null : T0 extends "search" ? string | null : T0 extends "tel" ? string | null : T0 extends "url" ? string | null : T0 extends "email" ? string | null : T0 extends "password" ? string | null : T0 extends "date" ? string | null : T0 extends "month" ? string | null : T0 extends "week" ? string | null : T0 extends "time" ? string | null : T0 extends "datetime-local" ? string | null : T0 extends "number" ? number | null : T0 extends "range" ? number | null : T0 extends "color" ? string | null : T0 extends "file" ? string | null : null) | undefined>;
         };
     }> & {
-        "onUpdate:modelValue"?: ((value: T0 extends "text" ? string | null : T0 extends "search" ? string | null : T0 extends "tel" ? string | null : T0 extends "url" ? string | null : T0 extends "email" ? string | null : T0 extends "password" ? string | null : T0 extends "date" ? string | null : T0 extends "month" ? string | null : T0 extends "week" ? string | null : T0 extends "time" ? string | null : T0 extends "datetime-local" ? string | null : T0 extends "number" ? number | null : T0 extends "range" ? number | null : T0 extends "color" ? string | null : null) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T0 extends "text" ? string | null : T0 extends "search" ? string | null : T0 extends "tel" ? string | null : T0 extends "url" ? string | null : T0 extends "email" ? string | null : T0 extends "password" ? string | null : T0 extends "date" ? string | null : T0 extends "month" ? string | null : T0 extends "week" ? string | null : T0 extends "time" ? string | null : T0 extends "datetime-local" ? string | null : T0 extends "number" ? number | null : T0 extends "range" ? number | null : T0 extends "color" ? string | null : T0 extends "file" ? string | null : null) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: (evt: "update:modelValue", value: T0 extends "text" ? string | null : T0 extends "search" ? string | null : T0 extends "tel" ? string | null : T0 extends "url" ? string | null : T0 extends "email" ? string | null : T0 extends "password" ? string | null : T0 extends "date" ? string | null : T0 extends "month" ? string | null : T0 extends "week" ? string | null : T0 extends "time" ? string | null : T0 extends "datetime-local" ? string | null : T0 extends "number" ? number | null : T0 extends "range" ? number | null : T0 extends "color" ? string | null : null) => void;
+    emit: (evt: "update:modelValue", value: T0 extends "text" ? string | null : T0 extends "search" ? string | null : T0 extends "tel" ? string | null : T0 extends "url" ? string | null : T0 extends "email" ? string | null : T0 extends "password" ? string | null : T0 extends "date" ? string | null : T0 extends "month" ? string | null : T0 extends "week" ? string | null : T0 extends "time" ? string | null : T0 extends "datetime-local" ? string | null : T0 extends "number" ? number | null : T0 extends "range" ? number | null : T0 extends "color" ? string | null : T0 extends "file" ? string | null : null) => void;
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/vue/UiInput.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script
   setup
   lang="ts"
@@ -17,6 +17,7 @@
     | 'number'
     | 'range'
     | 'color'
+    | 'file'
     | null = 'text'"
 >
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
@@ -71,7 +72,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'type' },
       description:
-        'The native input mode. Number and range modes accept numeric values; the other supported modes accept strings.',
+        'The native input mode. Number and range modes accept numeric values; the other supported modes accept strings. File inputs expose selected files through\n      the native change event\'s target.files. Their value can only be set to an empty string to clear the selection.',
       values: [
         'text',
         'search',
@@ -87,6 +88,7 @@ const propValidityContract = {
         'number',
         'range',
         'color',
+        'file',
       ],
       default: 'text',
     },
@@ -109,6 +111,7 @@ const propValidityContract = {
           { value: 'number', type: { kind: 'terminal', name: 'number' } },
           { value: 'range', type: { kind: 'terminal', name: 'number' } },
           { value: 'color', type: { kind: 'terminal', name: 'string' } },
+          { value: 'file', type: { kind: 'terminal', name: 'string' } },
         ],
       },
       required: false,
@@ -132,6 +135,7 @@ const propValidityContract = {
           { value: 'number', type: { kind: 'terminal', name: 'number' } },
           { value: 'range', type: { kind: 'terminal', name: 'number' } },
           { value: 'color', type: { kind: 'terminal', name: 'string' } },
+          { value: 'file', type: { kind: 'terminal', name: 'string' } },
         ],
       },
     },
@@ -160,6 +164,7 @@ const props = defineProps({
         : T0 extends 'number' ? number | null
         : T0 extends 'range' ? number | null
         : T0 extends 'color' ? string | null
+        : T0 extends 'file' ? string | null
         : null
     >,
     default: null,
@@ -180,6 +185,7 @@ const props = defineProps({
         : T0 extends 'number' ? number | null
         : T0 extends 'range' ? number | null
         : T0 extends 'color' ? string | null
+        : T0 extends 'file' ? string | null
         : null) | undefined
     >,
   },
@@ -251,6 +257,7 @@ const checkedProps = computed(() => ({
       : T0 extends 'number' ? number | null
       : T0 extends 'range' ? number | null
       : T0 extends 'color' ? string | null
+      : T0 extends 'file' ? string | null
       : null
   >(
     props['value'],
@@ -277,6 +284,7 @@ const checkedProps = computed(() => ({
         { value: 'number', type: { kind: 'terminal', name: 'number' } },
         { value: 'range', type: { kind: 'terminal', name: 'number' } },
         { value: 'color', type: { kind: 'terminal', name: 'string' } },
+        { value: 'file', type: { kind: 'terminal', name: 'string' } },
       ],
     ),
     false,
@@ -298,6 +306,7 @@ const checkedProps = computed(() => ({
       : T0 extends 'number' ? number | null
       : T0 extends 'range' ? number | null
       : T0 extends 'color' ? string | null
+      : T0 extends 'file' ? string | null
       : null
   >(
     props.modelValue,
@@ -324,6 +333,7 @@ const checkedProps = computed(() => ({
         { value: 'number', type: { kind: 'terminal', name: 'number' } },
         { value: 'range', type: { kind: 'terminal', name: 'number' } },
         { value: 'color', type: { kind: 'terminal', name: 'string' } },
+        { value: 'file', type: { kind: 'terminal', name: 'string' } },
       ],
     ),
     false,
@@ -384,6 +394,7 @@ const emit = defineEmits<{
       : T0 extends 'number' ? number | null
       : T0 extends 'range' ? number | null
       : T0 extends 'color' ? string | null
+      : T0 extends 'file' ? string | null
       : null,
   ]
 }>()
@@ -406,6 +417,7 @@ const model = computed({
         : T0 extends 'number' ? number | null
         : T0 extends 'range' ? number | null
         : T0 extends 'color' ? string | null
+        : T0 extends 'file' ? string | null
         : null,
     ),
 })
@@ -476,7 +488,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
     :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
-    v-bind-control="{ tag: 'input', name: 'value', value: model, defaultValue: '' }"
+    v-bind-control="{ tag: 'input', name: 'value', value: model, optionalValue: true, defaultValue: '' }"
     @input="model = readBoundControl(
       $event.currentTarget as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement,
     ) as any"

package/vue/UiInputGroup.d.ts

@@ -14,6 +14,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    multiline: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     prefixKind: {
         type: PropType<"text" | "icon" | null>;
         default: string;
@@ -23,12 +27,17 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    multiline: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     prefixKind: {
         type: PropType<"text" | "icon" | null>;
         default: string;
     };
 }>> & Readonly<{}>, {
     disabled: boolean | null;
+    multiline: boolean | null;
     prefixKind: "text" | "icon" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiInputGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -17,6 +17,13 @@ const propValidityContract = {
         'Fades the group\'s framing to match a disabled input inside it. Disable the input itself too.',
       default: false,
     },
+    multiline: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'multiline' },
+      description: 'Groups a Textarea with an action below its text inside the shared frame.',
+      default: false,
+    },
     prefixKind: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -30,9 +37,14 @@ const propValidityContract = {
 } as const
 const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
+  multiline: { type: null as unknown as PropType<boolean | null>, default: false },
   prefixKind: { type: null as unknown as PropType<'text' | 'icon' | null>, default: 'text' },
 })
-const acceptedProps: Record<string, unknown> = { disabled: false, prefixKind: 'text' }
+const acceptedProps: Record<string, unknown> = {
+  disabled: false,
+  multiline: false,
+  prefixKind: 'text',
+}
 const checkedProps = computed(() => ({
   disabled: checkedProp<boolean>(
     props['disabled'],
@@ -41,6 +53,13 @@ const checkedProps = computed(() => ({
     'disabled',
     acceptedProps,
   ) as boolean,
+  multiline: checkedProp<boolean>(
+    props['multiline'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'multiline',
+    acceptedProps,
+  ) as boolean,
   prefixKind: checkedProp<'text' | 'icon'>(
     props['prefixKind'],
     { kind: 'terminal', name: 'keyword' },
@@ -112,6 +131,7 @@ const hostState = computed(() =>
     checkedProps.value.prefixKind && 'prefixKind',
     checkedProps.value.prefixKind != null
     && `prefixKind=${encodeURIComponent(checkedProps.value.prefixKind)}`,
+    checkedProps.value.multiline && 'multiline',
   ].filter(Boolean).join(' ')
 )
 
@@ -132,7 +152,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['disabled', 'prefixKind'],
+  propNames: ['disabled', 'multiline', 'prefixKind'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
@@ -144,6 +164,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-multiline="reflectedProp('multiline', 'multiline', checkedProps.multiline, undefined, false)"
     :data-prefix-kind="reflectedProp('prefixKind', 'prefix-kind', checkedProps.prefixKind, undefined, false)"
     :data-ui-input-group-state="hostState || undefined"
     ref="root"
@@ -191,6 +212,17 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
   --_ui-default-input-focus-outline: none;
   --_ui-default-input-radius: 0;
   --_ui-default-input-surface: transparent;
+  --_ui-default-textarea-border-width: 0;
+  --_ui-default-textarea-border: transparent;
+  --_ui-default-textarea-border-hover: transparent;
+  --_ui-default-textarea-focus-border: transparent;
+  --_ui-default-textarea-invalid-border: transparent;
+  --_ui-default-textarea-invalid-focus-shadow: none;
+  --_ui-default-textarea-shadow: none;
+  --_ui-default-textarea-focus-shadow: none;
+  --_ui-default-textarea-focus-outline: none;
+  --_ui-default-textarea-radius: 0;
+  --_ui-default-textarea-surface: transparent;
 
   display: flex;
   align-items: stretch;
@@ -226,13 +258,13 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
   }
 }
 
-[data-component~="ui-input-group"]:hover:not(:has(input:focus, input:disabled, input:read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))) {
+[data-component~="ui-input-group"]:hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))) {
   border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }
 
 /* The ring shows when the field's input would show its own: when it is focus-visible, which a
    text input is for a pointer as well as a keyboard. A focused action button draws its own. */
-[data-component~="ui-input-group"]:has(.field input:focus-visible) {
+[data-component~="ui-input-group"]:has(.field :is(input, textarea):focus-visible) {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   box-shadow:
     var(--ui-control-inset),
@@ -246,7 +278,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
   );
 }
 
-[data-component~="ui-input-group"]:has(input:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
+[data-component~="ui-input-group"]:has(:is(input, textarea):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
   box-shadow: var(
     --ui-input-group-invalid-focus-shadow,
     var(--ui-control-inset),
@@ -260,14 +292,14 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
 
 /* Forced colors drop box shadows, so the focus ring becomes an outline. */
 @media (forced-colors: active) {
-  [data-component~="ui-input-group"]:has(input:focus-visible) {
+  [data-component~="ui-input-group"]:has(:is(input, textarea):focus-visible) {
     outline: var(--ui-focus-width) solid Highlight;
     outline-offset: var(--ui-border-width);
   }
 }
 
 [data-component~="ui-input-group"][data-ui-input-group-state~="disabled"],
-[data-component~="ui-input-group"]:has(input:disabled) {
+[data-component~="ui-input-group"]:has(:is(input, textarea):disabled) {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   box-shadow: none;
   cursor: not-allowed;
@@ -323,6 +355,23 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
   padding-inline: var(--ui-space-1);
 }
 
+/* Multiline text owns the first row; its action remains inside the same frame below it. */
+[data-component~="ui-input-group"][data-ui-input-group-state~="multiline"] {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+}
+
+[data-component~="ui-input-group"][data-ui-input-group-state~="multiline"] .field {
+  grid-column: 2;
+}
+
+[data-component~="ui-input-group"][data-ui-input-group-state~="multiline"] .action {
+  grid-column: 1 / -1;
+  justify-content: end;
+  padding: var(--ui-space-2);
+  padding-block-start: 0;
+}
+
 .affix:empty,
 .action:empty {
   display: none;

package/vue/UiList.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiListItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiListbox.d.ts

@@ -1,9 +1,7 @@
 import type { PropType } from 'vue';
-declare var __VLS_15: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_15) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     disabled: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -94,10 +92,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     disabled: boolean | null;
     multiple: boolean | null;
     required: boolean | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    default?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/vue/UiListbox.vue

@@ -1,4 +1,15 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
+<script lang="ts">
+const htmlNextAuthoredCheck2Reported = new Set<string>()
+function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
+  if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
+    htmlNextAuthoredCheck2Reported.add(location)
+    console.warn(message)
+  }
+  return accepted
+}
+</script>
+
 <script setup lang="ts">
 import {
   computed,
@@ -12,6 +23,7 @@ import {
 } from 'vue'
 import type { PropType, VNode } from 'vue'
 import { createDispatch, useComponentHost } from './host'
+import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiScrollArea from './UiScrollArea.vue'
 
@@ -234,9 +246,9 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
-const choicesElement = useTemplateRef<HTMLElement>('choices')
-const optionsElement = useTemplateRef<HTMLElement>('options')
-const validityElement = useTemplateRef<HTMLElement>('validity')
+const choicesElement = useTemplateRef<HTMLElement>('choicesElement')
+const optionsElement = useTemplateRef<HTMLElement>('optionsElement')
+const validityElement = useTemplateRef<HTMLElement>('validityElement')
 const choices = ref<
   { value: string; label: string; disabled: boolean; selected: boolean; index: number }[]
 >([])
@@ -263,24 +275,36 @@ const guarded = computed(() => {
 })
 let guardedBindingPrevious: any
 const guardedBinding = computed(() => {
-  if (!(validationError.value == null || typeof validationError.value === 'boolean')) {
-    return guardedBindingPrevious
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      validationError.value == null || typeof validationError.value === 'boolean',
+      'invalid or validationError:validationError',
+      './components/ui-listbox/ui-listbox.html: HR007: Reference validationError does not satisfy its declared type.',
+    ))
+  ) return guardedBindingPrevious
   return guardedBindingPrevious = checkedProps.value.invalid || validationError.value
 })
 let guardedBinding2Previous: any
 const guardedBinding2 = computed(() => {
-  if (!(hasSelection.value == null || typeof hasSelection.value === 'boolean')) {
-    return guardedBinding2Previous
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      hasSelection.value == null || typeof hasSelection.value === 'boolean',
+      'required and not hasSelection and not disabled:hasSelection',
+      './components/ui-listbox/ui-listbox.html: HR007: Reference hasSelection does not satisfy its declared type.',
+    ))
+  ) return guardedBinding2Previous
   return guardedBinding2Previous = checkedProps.value.required && !hasSelection.value
     && !checkedProps.value.disabled
 })
 let guardedBinding3Previous: any
 const guardedBinding3 = computed(() => {
-  if (!(hasSelection.value == null || typeof hasSelection.value === 'boolean')) {
-    return guardedBinding3Previous
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      hasSelection.value == null || typeof hasSelection.value === 'boolean',
+      'hasSelection:hasSelection',
+      './components/ui-listbox/ui-listbox.html: HR007: Reference hasSelection does not satisfy its declared type.',
+    ))
+  ) return guardedBinding3Previous
   return guardedBinding3Previous = hasSelection.value ? true : undefined
 })
 provide('html-next:ui-listbox:choices', choices)
@@ -306,8 +330,9 @@ if (
   )
 }
 
-const isChangeDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+const isChangeDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && (typeof (detail as Record<string, unknown>)['value'] === 'string'
     || (detail as Record<string, unknown>)['value'] === null)
   && (Array.isArray((detail as Record<string, unknown>)['values'])
@@ -316,7 +341,7 @@ const isChangeDetail = (detail: unknown): boolean =>
     ))
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
     || (detail as Record<string, unknown>)['trigger'] === 'pointer')
-  && Object.keys(detail as object).every((key) => ['value', 'values', 'trigger'].includes(key))
+  && Object.keys(detail as object).every((key) => ['value', 'values', 'trigger'].includes(key)))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     change: isChangeDetail,
@@ -327,6 +352,32 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
 useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
   root,
   dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({
+        choices: {
+          kind: 'list',
+          item: {
+            kind: 'object',
+            fields: [
+              { name: 'value', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'label', type: { kind: 'terminal', name: 'string' }, optional: false },
+              { name: 'disabled', type: { kind: 'terminal', name: 'boolean' }, optional: false },
+              { name: 'selected', type: { kind: 'terminal', name: 'boolean' }, optional: false },
+              { name: 'index', type: { kind: 'terminal', name: 'integer' }, optional: false },
+            ],
+            open: false,
+          },
+        },
+        selection: { kind: 'list', item: { kind: 'terminal', name: 'string' } },
+        hasSelection: { kind: 'terminal', name: 'boolean' },
+        active: { kind: 'terminal', name: 'integer' },
+        uid: { kind: 'terminal', name: 'string' },
+        validationError: { kind: 'terminal', name: 'boolean' },
+      } as Record<string, any>)[name],
+      keys,
+    ),
   controllerSource: {
     specifier: '../components/ui-listbox/ui-listbox.js',
     definition: './components/ui-listbox/ui-listbox.html',
@@ -428,7 +479,7 @@ function uniqueKeys<T>(
     :data-values="reflectedProp('values', 'values', checkedProps.values, undefined, false)"
     ref="root"
   >
-    <UiScrollArea class="choices" ref="choices"><KeyedBoundary><div
+    <UiScrollArea class="choices" ref="choicesElement"><KeyedBoundary><div
           v-for="choice in uniqueKeys(choices, (choice, index, loop) => choice.index)"
           :key="choice.index"
           class="option"
@@ -451,7 +502,7 @@ function uniqueKeys<T>(
       :disabled="checkedProps.disabled ?? undefined"
       :required="checkedProps.required ?? undefined"
       :name="checkedProps.name ?? undefined"
-      ref="options"
+      ref="optionsElement"
     >
       <slot />
     </select>
@@ -470,7 +521,7 @@ function uniqueKeys<T>(
       :required="guardedBinding2"
       :checked.attr="guardedBinding3"
       :disabled="checkedProps.disabled ?? undefined"
-      ref="validity"
+      ref="validityElement"
     >
   </div>
 </template>

package/vue/UiMenu.vue

@@ -1,8 +1,9 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
+import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -218,26 +219,29 @@ const hostState = computed(() =>
   ].filter(Boolean).join(' ')
 )
 
-const isSelectDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+const isSelectDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['value'] === 'string'
   && ((detail as Record<string, unknown>)['checked'] === undefined
     || typeof (detail as Record<string, unknown>)['checked'] === 'boolean')
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
     || (detail as Record<string, unknown>)['trigger'] === 'pointer'
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-  && Object.keys(detail as object).every((key) => ['value', 'checked', 'trigger'].includes(key))
-const isOpenDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Object.keys(detail as object).every((key) => ['value', 'checked', 'trigger'].includes(key)))
+const isOpenDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
   && ((detail as Record<string, unknown>)['reason'] === 'action'
     || (detail as Record<string, unknown>)['reason'] === 'programmatic')
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
     || (detail as Record<string, unknown>)['trigger'] === 'pointer'
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-  && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key))
-const isCloseDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key)))
+const isCloseDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
   && ((detail as Record<string, unknown>)['reason'] === 'action'
     || (detail as Record<string, unknown>)['reason'] === 'programmatic'
@@ -246,7 +250,7 @@ const isCloseDetail = (detail: unknown): boolean =>
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
     || (detail as Record<string, unknown>)['trigger'] === 'pointer'
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-  && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key))
+  && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key)))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     select: isSelectDetail,
@@ -259,6 +263,12 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
 useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
   root,
   dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({ internalOpen: { kind: 'terminal', name: 'boolean' } } as Record<string, any>)[name],
+      keys,
+    ),
   controllerSource: {
     specifier: '../components/ui-menu/ui-menu.js',
     definition: './components/ui-menu/ui-menu.html',

package/vue/UiMenuGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'