@threadlabs/looma 0.30.1 → 0.30.3

package/vue/UiListbox.d.ts

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
 declare var __VLS_15: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_15) => any;
@@ -6,39 +7,34 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     disabled: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     invalid: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     multiple: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     name: {
         type: PropType<string | null>;
-        default: string;
     };
     required: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     rows: {
         type: PropType<number | null>;
-        default: number;
     };
     value: {
         type: PropType<string | null>;
-        default: null;
     };
     values: {
         type: PropType<readonly (string)[] | null>;
-        default: null;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (event: CustomEvent<{
-        readonly value: string | null;
+        readonly value?: string | null;
         readonly values: readonly (string)[];
         readonly trigger: "keyboard" | "pointer";
     }>) => any;
@@ -47,54 +43,40 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     invalid: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     multiple: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     name: {
         type: PropType<string | null>;
-        default: string;
     };
     required: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     rows: {
         type: PropType<number | null>;
-        default: number;
     };
     value: {
         type: PropType<string | null>;
-        default: null;
     };
     values: {
         type: PropType<readonly (string)[] | null>;
-        default: null;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>> & Readonly<{
     onChange?: ((event: CustomEvent<{
-        readonly value: string | null;
+        readonly value?: string | null;
         readonly values: readonly (string)[];
         readonly trigger: "keyboard" | "pointer";
     }>) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
     "onUpdate:values"?: ((value: readonly string[]) => any) | undefined;
-}>, {
-    values: readonly string[] | null;
-    name: string | null;
-    value: string | null;
-    required: boolean | null;
-    invalid: boolean | null;
-    rows: number | null;
-    disabled: boolean | null;
-    multiple: boolean | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, 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;

package/vue/UiListbox.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.63 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -14,7 +14,18 @@ import {
   useReflectedProp,
 } from './host'
 import { acceptsControllerWrite } from './props'
-import { checkedProp, propValidityState, vPropValidity } from './props'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  type InputBindings,
+  propValidityState,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
 import UiScrollArea from './UiScrollArea.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -81,14 +92,15 @@ 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 },
-  multiple: { type: null as unknown as PropType<boolean | null>, default: false },
-  name: { type: null as unknown as PropType<string | null>, default: '' },
-  required: { type: null as unknown as PropType<boolean | null>, default: false },
-  rows: { type: null as unknown as PropType<number | null>, default: 5 },
-  value: { type: null as unknown as PropType<string | null>, default: null },
-  values: { type: null as unknown as PropType<readonly (string)[] | null>, default: null },
+  disabled: { type: null as unknown as PropType<boolean | null> },
+  invalid: { type: null as unknown as PropType<boolean | null> },
+  multiple: { type: null as unknown as PropType<boolean | null> },
+  name: { type: null as unknown as PropType<string | null> },
+  required: { type: null as unknown as PropType<boolean | null> },
+  rows: { type: null as unknown as PropType<number | null> },
+  value: { type: null as unknown as PropType<string | null> },
+  values: { type: null as unknown as PropType<readonly (string)[] | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = {
   disabled: false,
@@ -100,64 +112,89 @@ const acceptedProps: Record<string, unknown> = {
   value: null,
   values: 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,
-  multiple: checkedProp<boolean>(
-    props['multiple'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'multiple',
-    acceptedProps,
-  ) as boolean,
-  name: checkedProp<string>(
-    props['name'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'name',
-    acceptedProps,
-  ) as string,
-  required: checkedProp<boolean>(
-    props['required'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'required',
-    acceptedProps,
-  ) as boolean,
-  rows: checkedProp<number>(
-    props['rows'],
-    { kind: 'terminal', name: 'number' },
-    false,
-    'rows',
-    acceptedProps,
-  ) as number,
-  value: checkedProp<string>(
-    props['value'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'value',
-    acceptedProps,
-  ),
-  values: checkedProp<readonly (string)[]>(
-    props['values'],
-    { kind: 'list', item: { kind: 'terminal', name: 'string' } },
-    false,
-    'values',
-    acceptedProps,
-  ),
-}))
+const inputTracking = vuePropInputs(acceptedProps, {
+  disabled: false,
+  invalid: false,
+  multiple: false,
+  name: '',
+  required: false,
+  rows: 5,
+}, (name, value, source, values) => {
+  switch (name) {
+    case 'disabled':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'invalid':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'multiple':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'name':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'required':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'rows':
+      return checkPropInput(value, { kind: 'terminal', name: 'number' }, true, true)
+    case 'value':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'values':
+      return checkPropInput(
+        value,
+        { kind: 'list', item: { kind: 'terminal', name: 'string' } },
+        true,
+        true,
+      )
+    default:
+      return { ok: false }
+  }
+}, () => {
+  void checkedProps.value
+})
+const propInputs = inputTracking.inputs
+const checkedProps = computed(() => {
+  void inputTracking.version.value
+  return ({
+    disabled: propInputs.value<boolean | null>(
+      'disabled',
+      props['disabled'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    invalid: propInputs.value<boolean | null>(
+      'invalid',
+      props['invalid'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    multiple: propInputs.value<boolean | null>(
+      'multiple',
+      props['multiple'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    name: propInputs.value<string | null>(
+      'name',
+      props['name'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    required: propInputs.value<boolean | null>(
+      'required',
+      props['required'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    rows: propInputs.value<number | null>(
+      'rows',
+      props['rows'],
+      props[BINDING_INPUTS_PROP],
+    ) as number,
+    value: propInputs.value<string | null>('value', props['value'], props[BINDING_INPUTS_PROP]),
+    values: propInputs.value<readonly (string)[] | null>(
+      'values',
+      props['values'],
+      props[BINDING_INPUTS_PROP],
+    ),
+  })
+})
+const inputStatus = (name: string, handlesError: boolean) => {
+  void checkedProps.value
+  void inputTracking.version.value
+  return requireInputStatus(propInputs.status(name), handlesError)
+}
 void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
@@ -170,7 +207,7 @@ const emit = defineEmits<{
   change: [
     event: CustomEvent<
       {
-        readonly value: string | null
+        readonly value?: string | null
         readonly values: readonly (string)[]
         readonly trigger: 'keyboard' | 'pointer'
       }
@@ -217,8 +254,8 @@ checkHydratedRoot('div', 'ui-listbox')
 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)
+  && ((detail as Record<string, unknown>)['value'] == null
+    || typeof (detail as Record<string, unknown>)['value'] === 'string')
   && (Array.isArray((detail as Record<string, unknown>)['values'])
     && ((detail as Record<string, unknown>)['values'] as unknown[]).every((item: unknown) =>
       typeof item === 'string'
@@ -262,11 +299,14 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
       } as Record<string, any>)[name],
       keys,
     ),
+  initials: { choices: [], selection: [], hasSelection: false, uid: '', validationError: false },
   controllerSource: {
     specifier: '../components/ui-listbox/ui-listbox.js',
     definition: './components/ui-listbox/ui-listbox.html',
   },
   props: checkedProps,
+  inputs: propInputs,
+  inputTracking,
   propInputs: (name: string) => {
     const incoming = hydrationInstance?.vnode.props
     const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())

package/vue/UiMenu.d.ts

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
@@ -6,36 +7,32 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     density: {
         type: PropType<"comfortable" | "compact" | null>;
-        default: string;
     };
     for: {
         type: PropType<string | null>;
-        default: string;
     };
     icons: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     inline: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     open: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     placement: {
         type: PropType<string | null>;
-        default: string;
     };
     size: {
         type: PropType<"sm" | "md" | null>;
-        default: string;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (event: CustomEvent<{
         readonly value: string;
-        readonly checked?: boolean;
+        readonly checked?: boolean | null;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
     close: (event: CustomEvent<{
@@ -52,36 +49,32 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     density: {
         type: PropType<"comfortable" | "compact" | null>;
-        default: string;
     };
     for: {
         type: PropType<string | null>;
-        default: string;
     };
     icons: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     inline: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     open: {
         type: PropType<boolean | null>;
-        default: boolean;
     };
     placement: {
         type: PropType<string | null>;
-        default: string;
     };
     size: {
         type: PropType<"sm" | "md" | null>;
-        default: string;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
     };
 }>> & Readonly<{
     onSelect?: ((event: CustomEvent<{
         readonly value: string;
-        readonly checked?: boolean;
+        readonly checked?: boolean | null;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
     onClose?: ((event: CustomEvent<{
@@ -95,15 +88,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {
-    size: "sm" | "md" | null;
-    open: boolean | null;
-    for: string | null;
-    placement: string | null;
-    inline: boolean | null;
-    density: "comfortable" | "compact" | null;
-    icons: boolean | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, 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;

package/vue/UiMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.63 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -10,7 +10,18 @@ import {
   useReflectedProp,
 } from './host'
 import { acceptsControllerWrite } from './props'
-import { checkedProp, propValidityState, vPropValidity } from './props'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  type InputBindings,
+  propValidityState,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
 
 defineOptions({ inheritAttrs: false })
 
@@ -73,16 +84,14 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
-  density: {
-    type: null as unknown as PropType<'comfortable' | 'compact' | null>,
-    default: 'comfortable',
-  },
-  for: { type: null as unknown as PropType<string | null>, default: '' },
-  icons: { type: null as unknown as PropType<boolean | null>, default: false },
-  inline: { type: null as unknown as PropType<boolean | null>, default: false },
-  open: { type: null as unknown as PropType<boolean | null>, default: false },
-  placement: { type: null as unknown as PropType<string | null>, default: 'bottom-start' },
-  size: { type: null as unknown as PropType<'sm' | 'md' | null>, default: 'md' },
+  density: { type: null as unknown as PropType<'comfortable' | 'compact' | null> },
+  for: { type: null as unknown as PropType<string | null> },
+  icons: { type: null as unknown as PropType<boolean | null> },
+  inline: { type: null as unknown as PropType<boolean | null> },
+  open: { type: null as unknown as PropType<boolean | null> },
+  placement: { type: null as unknown as PropType<string | null> },
+  size: { type: null as unknown as PropType<'sm' | 'md' | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = {
   density: 'comfortable',
@@ -93,57 +102,76 @@ const acceptedProps: Record<string, unknown> = {
   placement: 'bottom-start',
   size: 'md',
 }
-const checkedProps = computed(() => ({
-  density: checkedProp<'comfortable' | 'compact'>(
-    props['density'],
-    { kind: 'terminal', name: 'keyword' },
-    false,
-    'density',
-    acceptedProps,
-  ) as 'comfortable' | 'compact',
-  for: checkedProp<string>(
-    props['for'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'for',
-    acceptedProps,
-  ) as string,
-  icons: checkedProp<boolean>(
-    props['icons'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'icons',
-    acceptedProps,
-  ) as boolean,
-  inline: checkedProp<boolean>(
-    props['inline'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'inline',
-    acceptedProps,
-  ) as boolean,
-  open: checkedProp<boolean>(
-    props['open'],
-    { kind: 'terminal', name: 'boolean' },
-    false,
-    'open',
-    acceptedProps,
-  ) as boolean,
-  placement: checkedProp<string>(
-    props['placement'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'placement',
-    acceptedProps,
-  ) as string,
-  size: checkedProp<'sm' | 'md'>(
-    props['size'],
-    { kind: 'terminal', name: 'keyword' },
-    false,
-    'size',
-    acceptedProps,
-  ) as 'sm' | 'md',
-}))
+const inputTracking = vuePropInputs(acceptedProps, {
+  density: 'comfortable',
+  for: '',
+  icons: false,
+  inline: false,
+  open: false,
+  placement: 'bottom-start',
+  size: 'md',
+}, (name, value, source, values) => {
+  switch (name) {
+    case 'density':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    case 'for':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'icons':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'inline':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'open':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'placement':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'size':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    default:
+      return { ok: false }
+  }
+}, () => {
+  void checkedProps.value
+})
+const propInputs = inputTracking.inputs
+const checkedProps = computed(() => {
+  void inputTracking.version.value
+  return ({
+    density: propInputs.value<'comfortable' | 'compact' | null>(
+      'density',
+      props['density'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'comfortable' | 'compact',
+    for: propInputs.value<string | null>('for', props['for'], props[BINDING_INPUTS_PROP]) as string,
+    icons: propInputs.value<boolean | null>(
+      'icons',
+      props['icons'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    inline: propInputs.value<boolean | null>(
+      'inline',
+      props['inline'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    open: propInputs.value<boolean | null>(
+      'open',
+      props['open'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    placement: propInputs.value<string | null>(
+      'placement',
+      props['placement'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    size: propInputs.value<'sm' | 'md' | null>('size', props['size'], props[BINDING_INPUTS_PROP]) as
+      | 'sm'
+      | 'md',
+  })
+})
+const inputStatus = (name: string, handlesError: boolean) => {
+  void checkedProps.value
+  void inputTracking.version.value
+  return requireInputStatus(propInputs.status(name), handlesError)
+}
 void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
@@ -156,7 +184,7 @@ const emit = defineEmits<{
     event: CustomEvent<
       {
         readonly value: string
-        readonly checked?: boolean
+        readonly checked?: boolean | null
         readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
       }
     >,
@@ -204,7 +232,7 @@ 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
+  && ((detail as Record<string, unknown>)['checked'] == null
     || typeof (detail as Record<string, unknown>)['checked'] === 'boolean')
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
     || (detail as Record<string, unknown>)['trigger'] === 'pointer'
@@ -250,11 +278,14 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
       ({ internalOpen: { kind: 'terminal', name: 'boolean' } } as Record<string, any>)[name],
       keys,
     ),
+  initials: { internalOpen: false },
   controllerSource: {
     specifier: '../components/ui-menu/ui-menu.js',
     definition: './components/ui-menu/ui-menu.html',
   },
   props: checkedProps,
+  inputs: propInputs,
+  inputTracking,
   propInputs: (name: string) => {
     const incoming = hydrationInstance?.vnode.props
     const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())