@threadlabs/looma 0.6.4 → 0.7.0

package/vue/UiAvatarGroup.vue

@@ -1,15 +1,8 @@
-<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.3 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import {
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  shallowRef,
-  useTemplateRef,
-  watchEffect,
-} from 'vue'
+import { ref, useTemplateRef } from 'vue'
 import * as controllerModule from '../components/ui-avatar-group/ui-avatar-group.js'
+import { createDispatch, useComponentHost } from './host'
 
 defineOptions({ inheritAttrs: false })
 
@@ -28,94 +21,14 @@ const root = ref<HTMLElement | null>(null)
 const overflowElement = useTemplateRef<HTMLElement>('overflow')
 const overflowCount = ref(0)
 
-/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-function dispatch(name: string, detail?: unknown): boolean {
-  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }))
-    ?? true
-}
-
-function read(name: string): unknown {
-  if (name === 'overflowCount') return overflowCount.value
-  return (props as Record<string, unknown>)[name]
-}
+const dispatch = createDispatch(root)
 
-function write(name: string, value: unknown): boolean {
-  if (name === 'overflowCount') {
-    overflowCount.value = value as never
-    return true
-  }
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
-}
-
-const stops: Array<() => void> = []
-const host = {
-  get element(): Element {
-    return root.value as Element
-  },
-  state: new Proxy({} as Record<string, unknown>, {
-    get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
-    set: (_target, name, value) => typeof name === 'string' && write(name, value),
-  }),
-  refs: {
-    get overflow(): Element {
-      return overflowElement.value as Element
-    },
-  } as Readonly<Record<string, Element>>,
-  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
-    get: (_target, name) => {
-      if (typeof name !== 'string' || root.value === null) return undefined
-      const form = root.value instanceof HTMLFormElement
-        ? root.value
-        : root.value.querySelector('form')
-      return form?.elements.namedItem(name)
-        ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
-    },
-  }),
-  signal<T>(initialValue: T) {
-    const value = shallowRef(initialValue)
-    return {
-      get: (): T => value.value,
-      set: (next: T): void => {
-        if (!Object.is(value.value, next)) value.value = next
-      },
-      update: (next: (current: T) => T): void => {
-        const updated = next(value.value)
-        if (!Object.is(value.value, updated)) value.value = updated
-      },
-    }
-  },
-  computed<T>(compute: () => T) {
-    const value = computed(compute)
-    return { get: (): T => value.value }
-  },
-  effect(run: () => void | (() => void)): () => void {
-    const stop = watchEffect((onCleanup) => {
-      const cleanup = run()
-      if (typeof cleanup === 'function') onCleanup(cleanup)
-    }, { flush: 'post' })
-    stops.push(stop)
-    return stop
-  },
-  on(event: string, listener: EventListener): () => void {
-    const element = root.value
-    element?.addEventListener(event, listener)
-    const off = (): void => element?.removeEventListener(event, listener)
-    stops.push(off)
-    return off
-  },
+useComponentHost(controllerModule.default, {
+  root,
   dispatch,
-}
-
-let cleanup: void | (() => void)
-let ready: Promise<void> | undefined
-onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
-    cleanup = result
-  })
-})
-onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop()
-  if (typeof cleanup === 'function') cleanup()
+  props,
+  refs: { overflow: overflowElement },
+  state: { overflowCount },
 })
 </script>
 

package/vue/UiBadge.vue

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

package/vue/UiButton.d.ts

@@ -3,7 +3,7 @@ type __VLS_Props = {
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
     stretch?: boolean;
-    tone?: 'neutral' | 'accent';
+    tone?: 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info';
     variant?: 'outline' | 'solid' | 'danger' | 'ghost' | 'link';
 };
 declare var __VLS_1: {};
@@ -11,7 +11,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    tone: "neutral" | "accent";
+    tone: "accent" | "neutral" | "danger" | "success" | "warning" | "info";
     variant: "outline" | "solid" | "danger" | "ghost" | "link";
     align: "center" | "start";
     disabled: boolean;

package/vue/UiButton.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.3 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -10,7 +10,7 @@ const props = withDefaults(
     disabled?: boolean
     size?: 'sm' | 'md' | 'lg'
     stretch?: boolean
-    tone?: 'neutral' | 'accent'
+    tone?: 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info'
     variant?: 'outline' | 'solid' | 'danger' | 'ghost' | 'link'
   }>(),
   {
@@ -18,7 +18,7 @@ const props = withDefaults(
     disabled: false,
     size: 'md',
     stretch: false,
-    tone: 'neutral',
+    tone: 'accent',
     variant: 'outline',
   },
 )
@@ -26,10 +26,10 @@ const props = withDefaults(
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
-    props.variant && `variant variant=${props.variant}`,
     props.align && `align align=${props.align}`,
     props.stretch && 'stretch',
     props.size && `size size=${props.size}`,
+    props.variant && `variant variant=${props.variant}`,
     props.tone && `tone tone=${props.tone}`,
   ].filter(Boolean).join(' ')
 )
@@ -49,15 +49,23 @@ const hostState = computed(() =>
 
 <style scoped>
 [data-component~="ui-button"] {
+  --_hue: var(--ui-accent);
+  --_hue-hover: var(--ui-accent-hover);
+  --_hue-active: var(--ui-accent-active);
+  --_hue-text: var(--ui-accent-active);
+  --_on-hue: var(--ui-on-accent);
+
+  --_tone: var(--_hue);
+  --_tone-hover: var(--_hue-hover);
+  --_tone-active: var(--_hue-active);
+  --_tone-text: var(--_hue-text);
+  --_on-tone: var(--_on-hue);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  color: var(--ui-action-secondary-text, var(--ui-text-primary));
-}
-
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"] {
-  color: var(--ui-action-primary-text, var(--ui-text-on-accent));
+  color: var(--_tone-text);
 }
 
 [data-component~="ui-button"][data-ui-button-state~="align=start"] {
@@ -73,23 +81,24 @@ const hostState = computed(() =>
 [data-component~="ui-button"] {
   appearance: none;
   min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
-  border: 1px solid var(--ui-button-border, var(--ui-border-strong));
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--ui-button-border, var(--_tone));
   border-radius: var(--ui-button-radius, var(--ui-radius-md));
-  background: var(--ui-button-surface, var(--ui-surface-elevated));
-  color: var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
+  background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
+  color: var(--ui-button-text, var(--_tone-text));
   font: inherit;
   font-weight: var(--ui-font-medium);
   line-height: var(--ui-line-height-tight);
   padding: var(--ui-space-2) var(--ui-space-3);
   background-image: var(--ui-raised-highlight);
-  box-shadow: var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs)));
+  box-shadow: var(--ui-button-shadow, var(--ui-raised));
   cursor: pointer;
   transition:
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
-    transform var(--ui-motion-fast) var(--ui-motion-ease);
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
   margin: 0;
 }
 
@@ -113,145 +122,143 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-button"]:hover:enabled {
-  background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
-  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
+  border-color: var(--ui-button-hover-border, var(--_tone-hover));
+  background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
 }
 
+/* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
 [data-component~="ui-button"]:active:enabled {
-  background: var(--ui-surface-subtle);
+  background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
+  background-image: none;
+  box-shadow: var(--ui-pressed);
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"] {
-  border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
-  background: var(--ui-action-primary-surface, var(--ui-accent-solid));
-  color: var(--ui-action-primary-text, var(--ui-text-on-accent));
-  box-shadow: var(
-    --ui-button-solid-shadow,
-    inset 0 1px rgb(255 255 255 / 0.16),
-    var(--ui-shadow-xs)
-  );
-}
-
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"]:hover:enabled {
-  background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
-  border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
-  box-shadow: var(--ui-shadow-sm);
-  transform: translateY(-1px);
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"] {
+  border-color: var(--_tone);
+  background-color: var(--_tone);
+  color: var(--_on-tone);
+  box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"]:active:enabled {
-  background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
-  border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
-  box-shadow: none;
-  transform: translateY(0);
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):hover:enabled {
+  background-color: var(--_tone-hover);
+  border-color: var(--_tone-hover);
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"] {
-  border-color: var(--ui-danger-solid);
-  background: var(--ui-danger-solid);
-  color: var(--ui-text-on-accent);
-  box-shadow: var(
-    --ui-button-danger-shadow,
-    inset 0 1px rgb(255 255 255 / 0.14),
-    var(--ui-shadow-xs)
-  );
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):active:enabled {
+  background-color: var(--_tone-active);
+  border-color: var(--_tone-active);
+  background-image: none;
+  box-shadow: var(--ui-pressed);
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"]:hover:enabled {
-  background: var(--ui-danger-hover);
-  border-color: var(--ui-danger-hover);
-  box-shadow: var(--ui-shadow-sm);
-  transform: translateY(-1px);
+/* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
+   destructive secondary action, not a special case. */
+[data-component~="ui-button"][data-ui-button-state~="tone=neutral"] {
+  --_hue: var(--ui-text);
+  --_hue-hover: var(--ui-text);
+  --_hue-active: var(--ui-text);
+  --_hue-text: var(--ui-text);
+  --_on-hue: var(--ui-surface);
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"]:active:enabled {
-  box-shadow: none;
-  transform: translateY(0);
+[data-component~="ui-button"][data-ui-button-state~="tone=danger"],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"] {
+  --_hue: var(--ui-danger);
+  --_hue-hover: var(--ui-danger-hover);
+  --_hue-active: var(--ui-danger-hover);
+  --_hue-text: var(--ui-danger-hover);
+  --_on-hue: var(--ui-on-danger);
 }
 
-/* An accent-tinted secondary action: the outline, ghost, and link variants in the accent colour.
-   Solid and danger already carry their own intent. */
-[data-component~="ui-button"][data-ui-button-state~="tone=accent"][data-component~="ui-button"][data-ui-button-state~="variant=outline"] {
-  border-color: var(--ui-button-accent-border, var(--ui-accent));
-  background: var(--ui-button-accent-surface, var(--ui-accent-subtle));
-  color: var(--ui-button-accent-text, var(--ui-accent-active));
+[data-component~="ui-button"][data-ui-button-state~="tone=success"] {
+  --_hue: var(--ui-success);
+  --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
+  --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
+  --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
+  --_on-hue: var(--ui-surface);
 }
 
-[data-component~="ui-button"][data-ui-button-state~="tone=accent"][data-component~="ui-button"][data-ui-button-state~="variant=outline"]:hover:enabled {
-  border-color: var(--ui-button-accent-hover-border, var(--ui-accent-hover));
-  background: var(
-    --ui-button-accent-hover-surface,
-    color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface))
-  );
+[data-component~="ui-button"][data-ui-button-state~="tone=warning"] {
+  --_hue: var(--ui-warning);
+  --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
+  --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
+  --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
+  --_on-hue: var(--ui-surface);
 }
 
-[data-component~="ui-button"][data-ui-button-state~="tone=accent"]:is([data-component~="ui-button"][data-ui-button-state~="variant=ghost"], [data-component~="ui-button"][data-ui-button-state~="variant=link"]) {
-  color: var(--ui-button-accent-text, var(--ui-accent-active));
+[data-component~="ui-button"][data-ui-button-state~="tone=info"] {
+  --_hue: var(--ui-info);
+  --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
+  --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
+  --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
+  --_on-hue: var(--ui-surface);
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"] {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
-  color: var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
+  color: var(--ui-button-ghost-text, var(--_tone-text));
 }
 
 /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:hover:enabled {
-  background: var(
-    --ui-button-ghost-hover-surface,
-    color-mix(in srgb, currentColor 8%, transparent)
-  );
+  background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
   border-color: transparent;
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:active:enabled {
-  background: var(
-    --ui-button-ghost-active-surface,
-    color-mix(in srgb, currentColor 14%, transparent)
-  );
+  background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
   border-color: transparent;
+  box-shadow: var(--ui-pressed);
 }
 
 /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
 [data-component~="ui-button"]:focus-visible {
   outline: none;
   box-shadow:
-    var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs))),
+    var(--ui-button-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
 
 [data-component~="ui-button"][data-ui-button-state~="variant=solid"]:focus-visible {
   box-shadow:
-    var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs)),
+    var(--ui-button-solid-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
 
-/* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
+/* Disabled drops the tone rather than the shape: every variant keeps its own structure, so a
+   disabled outline is still an outline and a disabled ghost is still text. Intent goes — an
+   unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
+   highlight and shadow, because nothing that cannot be pressed should look raised. */
 [data-component~="ui-button"]:disabled {
+  /* Derived from the tone itself, not from a separate disabled palette: faded toward the
+     page, which desaturates it at the same time. Toward the page rather than toward white,
+     so a dark theme dims where a light one lightens — the same rule, both schemes. */
+  --_tone: color-mix(in oklab, var(--_hue) 58%, var(--ui-surface));
+  --_tone-hover: var(--_tone);
+  --_tone-active: var(--_tone);
+  --_tone-text: color-mix(in oklab, var(--_hue-text) 72%, var(--ui-surface));
+  --_on-tone: var(--_tone-text);
+
   opacity: var(--ui-button-disabled-opacity, 1);
   cursor: not-allowed;
-  border-color: var(--ui-button-disabled-border, var(--ui-border));
-  background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
-  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
-}
-
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"]:disabled {
-  border-color: var(--ui-button-disabled-border, var(--ui-border));
-  background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
-  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
+  background-image: none;
+  box-shadow: none;
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"]:disabled {
-  border-color: var(--ui-button-disabled-border, var(--ui-border));
-  background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
-  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
+/* A filled button keeps its fill, faded further so its text stays legible on it. */
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):disabled {
+  --_tone: color-mix(in oklab, var(--_hue) 34%, var(--ui-surface));
 }
 
+/* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
+   it takes a surface, light and tinted, rather than reading as plain text. */
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:disabled {
-  background: none;
+  background-color: color-mix(in oklab, var(--_hue) 28%, var(--ui-surface));
   border-color: transparent;
-  color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
 
 @media (pointer: coarse) {

package/vue/UiCallout.vue

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

package/vue/UiCheckbox.vue

@@ -1,15 +1,8 @@
-<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.3 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import {
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  shallowRef,
-  useTemplateRef,
-  watchEffect,
-} from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import * as controllerModule from '../components/ui-checkbox/ui-checkbox.js'
+import { createDispatch, useComponentHost } from './host'
 
 defineOptions({ inheritAttrs: false })
 
@@ -52,121 +45,27 @@ const hostState = computed(() =>
   ].filter(Boolean).join(' ')
 )
 
-/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-function dispatch(name: string, detail?: unknown): boolean {
-  const declared: Record<string, EventInit | undefined> = {
-    change: { bubbles: true, composed: true, cancelable: false },
-  }
-  const checks: Record<string, (detail: unknown) => boolean> = {
-    change: (detail) =>
-      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-      && typeof (detail as Record<string, unknown>)['checked'] === 'boolean'
-      && 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) =>
-        ['checked', 'value', 'trigger'].includes(key)
-      ),
-  }
-  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
-    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
-  }
-  const emitEvent = emit as (name: string, detail: unknown) => void
-  emitEvent(name, detail)
-  if (detail !== null && typeof detail === 'object' && 'checked' in detail) {
-    emitEvent('update:checked', (detail as Record<string, unknown>)['checked'])
-  }
-  if (detail !== null && typeof detail === 'object' && 'value' in detail) {
-    emitEvent('update:value', (detail as Record<string, unknown>)['value'])
-  }
-  return root.value?.dispatchEvent(
-    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
-  ) ?? true
-}
-
-function read(name: string): unknown {
-  if (name === 'internalChecked') return internalChecked.value
-  return (props as Record<string, unknown>)[name]
-}
-
-function write(name: string, value: unknown): boolean {
-  if (name === 'internalChecked') {
-    internalChecked.value = value as never
-    return true
-  }
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
-}
-
-const stops: Array<() => void> = []
-const host = {
-  get element(): Element {
-    return root.value as Element
-  },
-  state: new Proxy({} as Record<string, unknown>, {
-    get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
-    set: (_target, name, value) => typeof name === 'string' && write(name, value),
-  }),
-  refs: {
-    get input(): Element {
-      return inputElement.value as Element
-    },
-  } as Readonly<Record<string, Element>>,
-  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
-    get: (_target, name) => {
-      if (typeof name !== 'string' || root.value === null) return undefined
-      const form = root.value instanceof HTMLFormElement
-        ? root.value
-        : root.value.querySelector('form')
-      return form?.elements.namedItem(name)
-        ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
-    },
-  }),
-  signal<T>(initialValue: T) {
-    const value = shallowRef(initialValue)
-    return {
-      get: (): T => value.value,
-      set: (next: T): void => {
-        if (!Object.is(value.value, next)) value.value = next
-      },
-      update: (next: (current: T) => T): void => {
-        const updated = next(value.value)
-        if (!Object.is(value.value, updated)) value.value = updated
-      },
-    }
+const isChangeDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['checked'] === 'boolean'
+  && 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) => ['checked', 'value', 'trigger'].includes(key))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    change: isChangeDetail,
   },
-  computed<T>(compute: () => T) {
-    const value = computed(compute)
-    return { get: (): T => value.value }
-  },
-  effect(run: () => void | (() => void)): () => void {
-    const stop = watchEffect((onCleanup) => {
-      const cleanup = run()
-      if (typeof cleanup === 'function') onCleanup(cleanup)
-    }, { flush: 'post' })
-    stops.push(stop)
-    return stop
-  },
-  on(event: string, listener: EventListener): () => void {
-    const element = root.value
-    element?.addEventListener(event, listener)
-    const off = (): void => element?.removeEventListener(event, listener)
-    stops.push(off)
-    return off
-  },
-  dispatch,
-}
-
-let cleanup: void | (() => void)
-let ready: Promise<void> | undefined
-onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
-    cleanup = result
-  })
+  modeled: ['checked', 'value'],
 })
-onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop()
-  if (typeof cleanup === 'function') cleanup()
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
+  refs: { input: inputElement },
+  state: { internalChecked },
 })
 </script>
 
@@ -241,7 +140,10 @@ input:checked::after {
   margin: auto;
   inline-size: 0.32rem;
   block-size: 0.58rem;
-  border: solid var(--ui-text-on-accent);
+  /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
+     component, which left the tick with no style and no colour. */
+  border-style: solid;
+  border-color: var(--ui-text-on-accent);
   border-width: 0 0.125rem 0.125rem 0;
   opacity: 1;
   transform: translateY(-0.11rem) rotate(45deg);

package/vue/UiCluster.vue

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

package/vue/UiCombobox.d.ts

@@ -234,8 +234,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any) | undefined;
 }>, {
-    label: string;
     name: string;
+    label: string;
     disabled: boolean;
     size: "sm" | "md";
     required: boolean;