@threadlabs/looma 0.24.1 → 0.25.0

package/vue/UiContainer.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/UiContextMenu.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, useTemplateRef, 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 })
@@ -116,7 +117,7 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
-const menuElement = useTemplateRef<HTMLElement>('menu')
+const menuElement = useTemplateRef<HTMLElement>('menuElement')
 const internalOpen = ref(false)
 provide('html-next:ui-context-menu:internalOpen', internalOpen)
 const hydrationNode = hydrationInstance?.vnode.el
@@ -136,8 +137,9 @@ if (
   )
 }
 
-const isOpenDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+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'
@@ -146,16 +148,17 @@ const isOpenDetail = (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))
-const isSelectDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key)))
+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))
+  && Object.keys(detail as object).every((key) => ['value', 'checked', 'trigger'].includes(key)))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     open: isOpenDetail,
@@ -168,6 +171,12 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
 useComponentHost(() => import('../components/ui-context-menu/ui-context-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-context-menu/ui-context-menu.js',
     definition: './components/ui-context-menu/ui-context-menu.html',
@@ -196,7 +205,7 @@ useComponentHost(() => import('../components/ui-context-menu/ui-context-menu.js'
     :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
     :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     ref="root"
-  ><div class="menu" role="menu" aria-orientation="vertical" ref="menu"><slot /></div></span>
+  ><div class="menu" role="menu" aria-orientation="vertical" ref="menuElement"><slot /></div></span>
 </template>
 
 <style scoped>

package/vue/UiCover.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/UiDescriptionItem.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/UiDescriptionList.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/UiDialog.d.ts

@@ -1,11 +1,7 @@
 import type { PropType } from 'vue';
-declare var __VLS_7: {}, __VLS_9: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
-} & {
-    actions?: (props: typeof __VLS_9) => 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<{
     alert: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -104,10 +100,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     closedby: "none" | "any" | "closerequest" | null;
     modal: boolean | null;
     modeless: 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;
+} & {
+    actions?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/vue/UiDialog.vue

@@ -1,8 +1,20 @@
-<!-- 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, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
+import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiScrollArea from './UiScrollArea.vue'
 
@@ -216,14 +228,18 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
-const closeElement = useTemplateRef<HTMLElement>('close')
+const closeElement = useTemplateRef<HTMLElement>('closeElement')
 const internalOpen = ref(false)
 const accessibleLabel = ref('Dialog')
 let guardedPrevious: any
 const guarded = computed(() => {
-  if (!(accessibleLabel.value == null || typeof accessibleLabel.value === 'string')) {
-    return guardedPrevious
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      accessibleLabel.value == null || typeof accessibleLabel.value === 'string',
+      'accessibleLabel:accessibleLabel',
+      './components/ui-dialog/ui-dialog.html: HR007: Reference accessibleLabel does not satisfy its declared type.',
+    ))
+  ) return guardedPrevious
   return guardedPrevious = accessibleLabel.value
 })
 provide('html-next:ui-dialog:internalOpen', internalOpen)
@@ -251,17 +267,19 @@ const hostState = computed(() =>
   ].filter(Boolean).join(' ')
 )
 
-const isOpenDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+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'
@@ -270,7 +288,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: {
     open: isOpenDetail,
@@ -282,6 +300,15 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
 useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   root,
   dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({
+        internalOpen: { kind: 'terminal', name: 'boolean' },
+        accessibleLabel: { kind: 'terminal', name: 'string' },
+      } as Record<string, any>)[name],
+      keys,
+    ),
   controllerSource: {
     specifier: '../components/ui-dialog/ui-dialog.js',
     definition: './components/ui-dialog/ui-dialog.html',
@@ -321,7 +348,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   >
     <header>
       <h2 v-if="checkedProps.label" class="title">{{ checkedProps.label }}</h2>
-      <button class="close" type="button" aria-label="Close" ref="close"></button>
+      <button class="close" type="button" aria-label="Close" ref="closeElement"></button>
     </header>
     <UiScrollArea class="body"><slot /></UiScrollArea>
     <footer><slot name="actions" /></footer>

package/vue/UiDisclosure.d.ts

@@ -1,15 +1,7 @@
 import type { PropType } from 'vue';
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
-type __VLS_Slots = {} & {
-    leading?: (props: typeof __VLS_1) => any;
-} & {
-    summary?: (props: typeof __VLS_3) => any;
-} & {
-    indicator?: (props: typeof __VLS_5) => any;
-} & {
-    default?: (props: typeof __VLS_7) => 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<{
     density: {
         type: PropType<"comfortable" | "compact" | null>;
         default: string;
@@ -117,10 +109,15 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     density: "comfortable" | "compact" | null;
     headingLevel: number | null;
     requiredOpen: 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>, {
+    leading?: (props: {}) => any;
+} & {
+    summary?: (props: {}) => any;
+} & {
+    indicator?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/vue/UiDisclosure.vue

@@ -1,8 +1,20 @@
-<!-- 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, getCurrentInstance, provide, ref, useTemplateRef, 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 })
@@ -234,44 +246,66 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
-const headingElement = useTemplateRef<HTMLElement>('heading')
-const triggerElement = useTemplateRef<HTMLElement>('trigger')
-const panelElement = useTemplateRef<HTMLElement>('panel')
+const headingElement = useTemplateRef<HTMLElement>('headingElement')
+const triggerElement = useTemplateRef<HTMLElement>('triggerElement')
+const panelElement = useTemplateRef<HTMLElement>('panelElement')
 const internalOpen = ref(false)
 const contentId = ref('')
 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
+  if (
+    !(htmlNextAuthoredCheck2(
+      headingRole.value == null || true,
+      'headingRole:headingRole',
+      './components/ui-disclosure/ui-disclosure.html: HR007: Reference headingRole does not satisfy its declared type.',
+    ))
+  ) return guardedPrevious
   return guardedPrevious = headingRole.value ?? undefined
 })
 let guardedBindingPrevious: any
 const guardedBinding = computed(() => {
-  if (!(headingAriaLevel.value == null || Number.isInteger(headingAriaLevel.value))) {
-    return guardedBindingPrevious
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      headingAriaLevel.value == null || Number.isInteger(headingAriaLevel.value),
+      'headingAriaLevel:headingAriaLevel',
+      './components/ui-disclosure/ui-disclosure.html: HR007: Reference headingAriaLevel does not satisfy its declared type.',
+    ))
+  ) return guardedBindingPrevious
   return guardedBindingPrevious = headingAriaLevel.value ?? undefined
 })
 let guardedBinding2Previous: any
 const guardedBinding2 = computed(() => {
-  if (!(contentId.value == null || typeof contentId.value === 'string')) {
-    return guardedBinding2Previous
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      contentId.value == null || typeof contentId.value === 'string',
+      'contentId:contentId',
+      './components/ui-disclosure/ui-disclosure.html: HR007: Reference contentId does not satisfy its declared type.',
+    ))
+  ) return guardedBinding2Previous
   return guardedBinding2Previous = contentId.value
 })
 let guardedBinding3Previous: any
 const guardedBinding3 = computed(() => {
-  if (!(internalOpen.value == null || typeof internalOpen.value === 'boolean')) {
-    return guardedBinding3Previous
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      internalOpen.value == null || typeof internalOpen.value === 'boolean',
+      'internalOpen:internalOpen',
+      './components/ui-disclosure/ui-disclosure.html: HR007: Reference internalOpen does not satisfy its declared type.',
+    ))
+  ) return guardedBinding3Previous
   return guardedBinding3Previous = internalOpen.value
 })
 let guardedBinding4Previous: any
 const guardedBinding4 = computed(() => {
-  if (!(contentId.value == null || typeof contentId.value === 'string')) {
-    return guardedBinding4Previous
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      contentId.value == null || typeof contentId.value === 'string',
+      'contentId:contentId',
+      './components/ui-disclosure/ui-disclosure.html: HR007: Reference contentId does not satisfy its declared type.',
+    ))
+  ) return guardedBinding4Previous
   return guardedBinding4Previous = contentId.value
 })
 provide('html-next:ui-disclosure:internalOpen', internalOpen)
@@ -309,8 +343,9 @@ const hostState = computed(() =>
   ].filter(Boolean).join(' ')
 )
 
-const isOpenDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+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'
@@ -319,7 +354,7 @@ const isOpenDetail = (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: {
     open: isOpenDetail,
@@ -331,6 +366,17 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
 useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   root,
   dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({
+        internalOpen: { kind: 'terminal', name: 'boolean' },
+        contentId: { kind: 'terminal', name: 'string' },
+        headingRole: { kind: 'terminal', name: 'keyword' },
+        headingAriaLevel: { kind: 'terminal', name: 'integer' },
+      } as Record<string, any>)[name],
+      keys,
+    ),
   controllerSource: {
     specifier: '../components/ui-disclosure/ui-disclosure.js',
     definition: './components/ui-disclosure/ui-disclosure.html',
@@ -378,14 +424,14 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
     :data-ui-disclosure-state="hostState || undefined"
     ref="root"
   >
-    <div class="heading" :role="guarded" :aria-level="guardedBinding" ref="heading">
+    <div class="heading" :role="guarded" :aria-level="guardedBinding" ref="headingElement">
       <button
         class="trigger"
         type="button"
         :aria-controls="guardedBinding2"
         :aria-expanded="guardedBinding3"
         :disabled="checkedProps.disabled ?? undefined"
-        ref="trigger"
+        ref="triggerElement"
       >
         <span class="leading"><slot name="leading" /></span>
         <span class="summary"><slot name="summary">{{ checkedProps.summary }}</slot></span>
@@ -394,7 +440,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
             ></span></slot></span>
       </button>
     </div>
-    <div class="panel" :id="guardedBinding4" ref="panel">
+    <div class="panel" :id="guardedBinding4" ref="panelElement">
       <div class="panel-inner"><slot /></div>
     </div>
   </div>
@@ -539,7 +585,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   border-block-end: 0;
   border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
 }
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"][data-ui-disclosure-state~="internalOpen"] {
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"][data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] {
   flex-grow: 1;
 }
 [data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .heading {

package/vue/UiEditable.d.ts

@@ -1,4 +1,6 @@
 import type { PropType } from 'vue';
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     actions: {
         type: PropType<boolean | null>;
@@ -130,11 +132,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>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/vue/UiEditable.vue

@@ -1,9 +1,21 @@
-<!-- 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, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { vBindControl } from './control'
 import { createDispatch, useComponentHost } from './host'
+import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -269,28 +281,42 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
-const previewElement = useTemplateRef<HTMLElement>('preview')
-const inputElement = useTemplateRef<HTMLElement>('input')
+const previewElement = useTemplateRef<HTMLElement>('previewElement')
+const inputElement = useTemplateRef<HTMLElement>('inputElement')
 const internalEdit = ref(false)
 const internalValue = ref('')
 const draft = ref('')
 let guardedPrevious: any
 const guarded = computed(() => {
-  if (!(internalValue.value == null || typeof internalValue.value === 'string')) {
-    return guardedPrevious
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      internalValue.value == null || typeof internalValue.value === 'string',
+      '$internalValue:internalValue',
+      './components/ui-editable/ui-editable.html: HR007: Reference internalValue does not satisfy its declared type.',
+    ))
+  ) return guardedPrevious
   return guardedPrevious = internalValue.value
 })
 let guardedBindingPrevious: any
 const guardedBinding = computed(() => {
-  if (!(draft.value == null || typeof draft.value === 'string')) return guardedBindingPrevious
+  if (
+    !(htmlNextAuthoredCheck2(
+      draft.value == null || typeof draft.value === 'string',
+      'draft:draft',
+      './components/ui-editable/ui-editable.html: HR007: Reference draft does not satisfy its declared type.',
+    ))
+  ) return guardedBindingPrevious
   return guardedBindingPrevious = draft.value
 })
 let guardedBinding2Previous: any
 const guardedBinding2 = computed(() => {
-  if (!(internalEdit.value == null || typeof internalEdit.value === 'boolean')) {
-    return guardedBinding2Previous
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      internalEdit.value == null || typeof internalEdit.value === 'boolean',
+      'disabled or not internalEdit:internalEdit',
+      './components/ui-editable/ui-editable.html: HR007: Reference internalEdit does not satisfy its declared type.',
+    ))
+  ) return guardedBinding2Previous
   return guardedBinding2Previous = checkedProps.value.disabled || !internalEdit.value
 })
 provide('html-next:ui-editable:internalEdit', internalEdit)
@@ -321,15 +347,17 @@ const hostState = computed(() =>
   ].filter(Boolean).join(' ')
 )
 
-const isInputDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+const isInputDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['value'] === 'string'
   && ((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', 'trigger'].includes(key))
-const isChangeDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Object.keys(detail as object).every((key) => ['value', 'trigger'].includes(key)))
+const isChangeDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['value'] === 'string'
   && typeof (detail as Record<string, unknown>)['previousValue'] === 'string'
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
@@ -337,9 +365,10 @@ const isChangeDetail = (detail: unknown): boolean =>
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
   && Object.keys(detail as object).every((key) =>
     ['value', 'previousValue', 'trigger'].includes(key)
-  )
-const isEditChangeDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  ))
+const isEditChangeDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['edit'] === 'boolean'
   && ((detail as Record<string, unknown>)['reason'] === 'activate'
     || (detail as Record<string, unknown>)['reason'] === 'commit'
@@ -350,7 +379,7 @@ const isEditChangeDetail = (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) => ['edit', 'reason', 'trigger'].includes(key))
+  && Object.keys(detail as object).every((key) => ['edit', 'reason', 'trigger'].includes(key)))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     input: isInputDetail,
@@ -363,6 +392,16 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
 useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
   root,
   dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({
+        internalEdit: { kind: 'terminal', name: 'boolean' },
+        internalValue: { kind: 'terminal', name: 'string' },
+        draft: { kind: 'terminal', name: 'string' },
+      } as Record<string, any>)[name],
+      keys,
+    ),
   controllerSource: {
     specifier: '../components/ui-editable/ui-editable.js',
     definition: './components/ui-editable/ui-editable.html',
@@ -419,7 +458,7 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
         class="preview"
         type="button"
         :disabled="checkedProps.disabled ?? undefined"
-        ref="preview"
+        ref="previewElement"
       >
         <span class="text">{{ guarded }}</span>
         <span v-if="checkedProps.hint" class="hint" aria-hidden="true">{{
@@ -434,7 +473,7 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
         :placeholder="checkedProps.placeholder ?? undefined"
         :required="checkedProps.required ?? undefined"
         :disabled="guardedBinding2"
-        ref="input"
+        ref="inputElement"
       >
     </div>
     <div v-if="checkedProps.actions" class="actions">

package/vue/UiEditorInsertTableGrid.d.ts

@@ -1,4 +1,6 @@
 import type { PropType } from 'vue';
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     headerRow: {
         type: PropType<boolean | null>;
@@ -51,5 +53,3 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     maxCols: number | null;
     maxRows: number | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;