@threadlabs/looma 0.21.6 → 0.22.1

package/vue/UiContextMenu.vue

@@ -1,12 +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, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    for: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'for' },
+      description:
+        'ID of the element whose context click (right-click, long-press, Shift+F10, or the Menu key) opens the menu.',
+      default: '',
+    },
+    open: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'open' },
+      description: 'Whether the context menu is open initially or when set externally.',
+      default: false,
+    },
+  },
+}
 const props = defineProps({
   for: { type: null as unknown as PropType<string | null>, default: '' },
   open: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -17,16 +36,12 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'string' },
     false,
     'for',
-    undefined,
-    undefined,
   ) as string,
   open: checkedProp<boolean>(
     props['open'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'open',
-    undefined,
-    undefined,
   ) as boolean,
 }))
 void checkedProps.value
@@ -100,6 +115,7 @@ const emit = defineEmits<{
 const root = ref<HTMLElement | null>(null)
 const menuElement = useTemplateRef<HTMLElement>('menu')
 const internalOpen = ref(false)
+provide('html-next:ui-context-menu:internalOpen', internalOpen)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -163,6 +179,7 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
   <span
     data-component="ui-context-menu"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
     :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     ref="root"

package/vue/UiCover.vue

@@ -1,11 +1,24 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'How tall the cover is. screen is at least the viewport\'s height, for a view that is one centred card, such as sign-in; fill takes the space its parent\n      gives it.',
+      values: ['screen', 'fill'],
+      default: 'screen',
+    },
+  },
+}
 const props = defineProps({
   size: { type: null as unknown as PropType<'screen' | 'fill' | null>, default: 'screen' },
 })
@@ -15,8 +28,6 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
-    undefined,
-    ['screen', 'fill'],
   ) as 'screen' | 'fill',
 }))
 void checkedProps.value
@@ -84,6 +95,7 @@ const hostState = computed(() =>
   <div
     data-component="ui-cover"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-cover-state="hostState || undefined"
   >

package/vue/UiDescriptionItem.vue

@@ -1,11 +1,22 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    term: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'term' },
+      description: 'What the value is, such as "Invited by". The value is the item\'s content.',
+      default: '',
+    },
+  },
+}
 const props = defineProps({
   term: { type: null as unknown as PropType<string | null>, default: '' },
 })
@@ -15,8 +26,6 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'string' },
     false,
     'term',
-    undefined,
-    undefined,
   ) as string,
 }))
 void checkedProps.value
@@ -79,6 +88,7 @@ if (
   <div
     data-component="ui-description-item"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-term="reflectedProp('term', 'term', checkedProps.term, undefined, false)"
   >
     <dt>{{ checkedProps.term }}</dt>

package/vue/UiDescriptionList.vue

@@ -1,11 +1,41 @@
-<!-- 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: {
+    columns: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'columns' },
+      description:
+        'The most columns grid and tiles set on a wide list; a narrow list still drops to fewer. Left unset, they fit as many as the width allows.',
+      values: ['2', '3', '4'],
+    },
+    density: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'density' },
+      description:
+        'How much room each pair takes. comfortable spaces the pairs apart to read; compact sets them close together, for facts inside other content such as a card\n      or a table\'s detail row.',
+      values: ['comfortable', 'compact'],
+      default: 'comfortable',
+    },
+    layout: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'layout' },
+      description:
+        'rows sets each term beside its value, one per line, for a short summary; stacked sets every term above its value, one pair per line, for a narrow space;\n      grid sets the pairs, term above value, in as many columns as fit, for facts to scan across; tiles sets each pair on its own bordered tile in a grid, for\n      figures to compare.',
+      values: ['rows', 'stacked', 'grid', 'tiles'],
+      default: 'rows',
+    },
+  },
+}
 const props = defineProps({
   columns: { type: null as unknown as PropType<'2' | '3' | '4' | null>, default: null },
   density: {
@@ -23,24 +53,18 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'columns',
-    undefined,
-    ['2', '3', '4'],
   ),
   density: checkedProp<'comfortable' | 'compact'>(
     props['density'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'density',
-    undefined,
-    ['comfortable', 'compact'],
   ) as 'comfortable' | 'compact',
   layout: checkedProp<'rows' | 'stacked' | 'grid' | 'tiles'>(
     props['layout'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'layout',
-    undefined,
-    ['rows', 'stacked', 'grid', 'tiles'],
   ) as 'rows' | 'stacked' | 'grid' | 'tiles',
 }))
 void checkedProps.value
@@ -117,6 +141,7 @@ const hostState = computed(() =>
   <dl
     data-component="ui-description-list"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-columns="reflectedProp('columns', 'columns', checkedProps.columns, undefined, false)"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-layout="reflectedProp('layout', 'layout', checkedProps.layout, undefined, false)"

package/vue/UiDialog.vue

@@ -1,13 +1,77 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 import UiScrollArea from './UiScrollArea.vue'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    alert: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'alert' },
+      description:
+        'Use alert dialog semantics and require an explicit action instead of the header close button. An alert dialog is always modal.',
+      default: false,
+    },
+    closedby: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'closedby' },
+      description:
+        'Which user close requests work: any includes outside presses, closerequest includes Escape, and none requires an action. Unset follows native dialog:\n      closerequest when modal, none when not.',
+      values: ['any', 'closerequest', 'none'],
+    },
+    for: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'for' },
+      description: 'ID of the control that opens the dialog.',
+      default: '',
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'label' },
+      description: 'Visible title in the dialog header; also its accessible name.',
+    },
+    modal: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'modal' },
+      description:
+        'Open in the top layer with a backdrop and make the rest of the page inert until it closes, like native showModal(). Without it the dialog is non-modal,\n      like native show().',
+      default: false,
+    },
+    modeless: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'modeless' },
+      description:
+        'Deprecated: does nothing, since dialogs are non-modal unless modal is set. Accepted so markup written for 0.15 keeps working; modal wins when both are\n      set.',
+      default: false,
+    },
+    open: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'open' },
+      description: 'Whether the dialog is open initially or when set externally.',
+      default: false,
+    },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description: 'Choose a compact, standard, wide, or viewport-filling dialog.',
+      values: ['sm', 'md', 'lg', 'fullscreen'],
+      default: 'md',
+    },
+  },
+}
 const props = defineProps({
   alert: { type: null as unknown as PropType<boolean | null>, default: false },
   closedby: {
@@ -30,64 +94,43 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'boolean' },
     false,
     'alert',
-    undefined,
-    undefined,
   ) as boolean,
   closedby: checkedProp<'any' | 'closerequest' | 'none'>(
     props['closedby'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'closedby',
-    undefined,
-    ['any', 'closerequest', 'none'],
   ),
   for: checkedProp<string>(
     props['for'],
     { kind: 'terminal', name: 'string' },
     false,
     'for',
-    undefined,
-    undefined,
   ) as string,
-  label: checkedProp<string>(
-    props['label'],
-    { kind: 'terminal', name: 'string' },
-    false,
-    'label',
-    undefined,
-    undefined,
-  ),
+  label: checkedProp<string>(props['label'], { kind: 'terminal', name: 'string' }, false, 'label'),
   modal: checkedProp<boolean>(
     props['modal'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'modal',
-    undefined,
-    undefined,
   ) as boolean,
   modeless: checkedProp<boolean>(
     props['modeless'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'modeless',
-    undefined,
-    undefined,
   ) as boolean,
   open: checkedProp<boolean>(
     props['open'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'open',
-    undefined,
-    undefined,
   ) as boolean,
   size: checkedProp<'sm' | 'md' | 'lg' | 'fullscreen'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
-    undefined,
-    ['sm', 'md', 'lg', 'fullscreen'],
   ) as 'sm' | 'md' | 'lg' | 'fullscreen',
 }))
 void checkedProps.value
@@ -153,6 +196,15 @@ const root = ref<HTMLElement | null>(null)
 const closeElement = useTemplateRef<HTMLElement>('close')
 const internalOpen = ref(false)
 const accessibleLabel = ref('Dialog')
+let guardedPrevious: any
+const guarded = computed(() => {
+  if (!(accessibleLabel.value == null || typeof accessibleLabel.value === 'string')) {
+    return guardedPrevious
+  }
+  return guardedPrevious = accessibleLabel.value
+})
+provide('html-next:ui-dialog:internalOpen', internalOpen)
+provide('html-next:ui-dialog:accessibleLabel', accessibleLabel)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -221,7 +273,8 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   <dialog
     data-component="ui-dialog"
     v-bind="nativeAttrs($attrs)"
-    :aria-label="accessibleLabel"
+    :aria-label="guarded"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-alert="reflectedProp('alert', 'alert', checkedProps.alert, undefined, false)"
     :data-closedby="reflectedProp('closedby', 'closedby', checkedProps.closedby, undefined, false)"
     :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"

package/vue/UiDisclosure.vue

@@ -1,12 +1,64 @@
-<!-- Generated by HTML Next 1.0.0-alpha.14 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.15 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
-import { checkedProp } from './props'
+import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const propValidityContract = {
+  props: {
+    density: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'density' },
+      description: 'Compact trades padding and type size for rows that fit more on screen.',
+      values: ['comfortable', 'compact'],
+      default: 'comfortable',
+    },
+    disabled: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'disabled' },
+      description:
+        'Disables the trigger and mutes its text, so the disclosure keeps its current state and the user cannot toggle it.',
+      default: false,
+    },
+    headingLevel: {
+      type: { kind: 'terminal', name: 'integer' },
+      required: false,
+      target: { attribute: 'headinglevel' },
+      description:
+        'Adds heading semantics around the trigger at level 2 through 6. Zero leaves it a plain disclosure; choose a level that matches the page outline.',
+      default: 0,
+    },
+    name: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'name' },
+      description:
+        'Disclosures with the same nonempty name form an exclusive group in one document: opening one closes the others. An empty name allows multiple open\n      items.',
+      default: '',
+    },
+    open: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'open' },
+      description:
+        'Whether the disclosure is open initially or when set externally. The trigger toggles it from there, reporting each change as an open or close event.',
+      default: false,
+    },
+    summary: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'summary' },
+      description:
+        'The text of the trigger row that opens and closes the disclosure. It is the trigger button\'s accessible name, so name what the content is.',
+      default: 'Details',
+    },
+  },
+}
 const props = defineProps({
   density: {
     type: null as unknown as PropType<'comfortable' | 'compact' | null>,
@@ -24,48 +76,36 @@ const checkedProps = computed(() => ({
     { kind: 'terminal', name: 'keyword' },
     false,
     'density',
-    undefined,
-    ['comfortable', 'compact'],
   ) as 'comfortable' | 'compact',
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'disabled',
-    undefined,
-    undefined,
   ) as boolean,
   headingLevel: checkedProp<number>(
     props['headingLevel'],
     { kind: 'terminal', name: 'integer' },
     false,
     'headingLevel',
-    undefined,
-    undefined,
   ) as number,
   name: checkedProp<string>(
     props['name'],
     { kind: 'terminal', name: 'string' },
     false,
     'name',
-    undefined,
-    undefined,
   ) as string,
   open: checkedProp<boolean>(
     props['open'],
     { kind: 'terminal', name: 'boolean' },
     false,
     'open',
-    undefined,
-    undefined,
   ) as boolean,
   summary: checkedProp<string>(
     props['summary'],
     { kind: 'terminal', name: 'string' },
     false,
     'summary',
-    undefined,
-    undefined,
   ) as string,
 }))
 void checkedProps.value
@@ -132,8 +172,45 @@ const triggerElement = useTemplateRef<HTMLElement>('trigger')
 const panelElement = useTemplateRef<HTMLElement>('panel')
 const internalOpen = ref(false)
 const contentId = ref('')
-const headingRole = ref<any>(null)
-const headingAriaLevel = ref<any>(null)
+const headingRole = ref<string | null>(null)
+const headingAriaLevel = ref<number | null>(null)
+let guardedPrevious: any
+const guarded = computed(() => {
+  if (!(headingRole.value == null || true)) return guardedPrevious
+  return guardedPrevious = headingRole.value ?? undefined
+})
+let guardedBindingPrevious: any
+const guardedBinding = computed(() => {
+  if (!(headingAriaLevel.value == null || Number.isInteger(headingAriaLevel.value))) {
+    return guardedBindingPrevious
+  }
+  return guardedBindingPrevious = headingAriaLevel.value ?? undefined
+})
+let guardedBinding2Previous: any
+const guardedBinding2 = computed(() => {
+  if (!(contentId.value == null || typeof contentId.value === 'string')) {
+    return guardedBinding2Previous
+  }
+  return guardedBinding2Previous = contentId.value
+})
+let guardedBinding3Previous: any
+const guardedBinding3 = computed(() => {
+  if (!(internalOpen.value == null || typeof internalOpen.value === 'boolean')) {
+    return guardedBinding3Previous
+  }
+  return guardedBinding3Previous = internalOpen.value
+})
+let guardedBinding4Previous: any
+const guardedBinding4 = computed(() => {
+  if (!(contentId.value == null || typeof contentId.value === 'string')) {
+    return guardedBinding4Previous
+  }
+  return guardedBinding4Previous = contentId.value
+})
+provide('html-next:ui-disclosure:internalOpen', internalOpen)
+provide('html-next:ui-disclosure:contentId', contentId)
+provide('html-next:ui-disclosure:headingRole', headingRole)
+provide('html-next:ui-disclosure:headingAriaLevel', headingAriaLevel)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -191,25 +268,13 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   refs: { trigger: triggerElement, panel: panelElement },
   state: { internalOpen, contentId, headingRole, headingAriaLevel },
 })
-
-function text(value: unknown): string {
-  if (Array.isArray(value)) return value.map(text).join(' ')
-  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
-}
-
-function attribute(value: unknown): any {
-  if (
-    value === null || value === undefined || value === false
-    || (typeof value === 'object' && !Array.isArray(value))
-  ) return undefined
-  return value === true ? '' : text(value)
-}
 </script>
 
 <template>
   <div
     data-component="ui-disclosure"
     v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-heading-level="reflectedProp('headingLevel', 'heading-level', checkedProps.headingLevel, undefined, false)"
@@ -219,16 +284,12 @@ function attribute(value: unknown): any {
     :data-ui-disclosure-state="hostState || undefined"
     ref="root"
   >
-    <div
-      class="heading"
-      :role="attribute(headingRole)"
-      :aria-level="typeof headingAriaLevel === 'boolean' ? String(headingAriaLevel) : attribute(headingAriaLevel)"
-    >
+    <div class="heading" :role="guarded" :aria-level="guardedBinding">
       <button
         class="trigger"
         type="button"
-        :aria-controls="contentId"
-        :aria-expanded="internalOpen"
+        :aria-controls="guardedBinding2"
+        :aria-expanded="guardedBinding3"
         :disabled="checkedProps.disabled ?? undefined"
         ref="trigger"
       >
@@ -236,7 +297,9 @@ function attribute(value: unknown): any {
         <span class="chevron" aria-hidden="true"></span>
       </button>
     </div>
-    <div class="panel" :id="contentId" ref="panel"><div class="panel-inner"><slot /></div></div>
+    <div class="panel" :id="guardedBinding4" ref="panel">
+      <div class="panel-inner"><slot /></div>
+    </div>
   </div>
 </template>
 

package/vue/UiEditable.d.ts

@@ -49,12 +49,12 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly value: string;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
-    "update:value": (value: string) => any;
     change: (event: CustomEvent<{
         readonly value: string;
         readonly previousValue: string;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
+    "update:value": (value: string) => any;
     "update:edit": (value: boolean) => any;
     "edit-change": (event: CustomEvent<{
         readonly edit: boolean;
@@ -111,12 +111,12 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly value: string;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
-    "onUpdate:value"?: ((value: string) => any) | undefined;
     onChange?: ((event: CustomEvent<{
         readonly value: string;
         readonly previousValue: string;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
+    "onUpdate:value"?: ((value: string) => any) | undefined;
     "onUpdate:edit"?: ((value: boolean) => any) | undefined;
     "onEdit-change"?: ((event: CustomEvent<{
         readonly edit: boolean;
@@ -130,9 +130,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     required: boolean | null;
     placeholder: string | null;
     actions: boolean | null;
-    cancelLabel: string | null;
     edit: boolean | null;
     hint: string | null;
+    cancelLabel: string | null;
     maxLength: number | null;
     saveLabel: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;