@threadlabs/looma 0.6.3 → 0.6.5

package/vue/UiTreeItem.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-tree-item/ui-tree-item.js'
+import { createDispatch, useComponentHost } from './host'
 
 defineOptions({ inheritAttrs: false })
 
@@ -56,6 +49,7 @@ const root = ref<HTMLElement | null>(null)
 const rowElement = useTemplateRef<HTMLElement>('row')
 const dragHandleElement = useTemplateRef<HTMLElement>('dragHandle')
 const disclosureElement = useTemplateRef<HTMLElement>('disclosure')
+const actionsElement = useTemplateRef<HTMLElement>('actions')
 const childrenElement = useTemplateRef<HTMLElement>('children')
 const internalExpanded = ref(false)
 const structuralLevel = ref(1)
@@ -70,140 +64,34 @@ 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> = {
-    expand: { bubbles: false, composed: true, cancelable: false },
-  }
-  const checks: Record<string, (detail: unknown) => boolean> = {
-    expand: (detail) =>
-      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-      && typeof (detail as Record<string, unknown>)['id'] === 'string'
-      && typeof (detail as Record<string, unknown>)['expanded'] === '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) => ['id', 'expanded', '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' && 'expanded' in detail) {
-    emitEvent('update:expanded', (detail as Record<string, unknown>)['expanded'])
-  }
-  return root.value?.dispatchEvent(
-    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
-  ) ?? true
-}
-
-function read(name: string): unknown {
-  if (name === 'internalExpanded') return internalExpanded.value
-  if (name === 'structuralLevel') return structuralLevel.value
-  if (name === 'tabStop') return tabStop.value
-  if (name === 'isContainer') return isContainer.value
-  return (props as Record<string, unknown>)[name]
-}
-
-function write(name: string, value: unknown): boolean {
-  if (name === 'internalExpanded') {
-    internalExpanded.value = value as never
-    return true
-  }
-  if (name === 'structuralLevel') {
-    structuralLevel.value = value as never
-    return true
-  }
-  if (name === 'tabStop') {
-    tabStop.value = value as never
-    return true
-  }
-  if (name === 'isContainer') {
-    isContainer.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
+const isExpandDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['id'] === 'string'
+  && typeof (detail as Record<string, unknown>)['expanded'] === '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) => ['id', 'expanded', 'trigger'].includes(key))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  declared: { expand: { bubbles: false, composed: true, cancelable: false } },
+  checks: {
+    expand: isExpandDetail,
   },
-  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),
-  }),
+  modeled: ['expanded'],
+})
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
   refs: {
-    get row(): Element {
-      return rowElement.value as Element
-    },
-    get dragHandle(): Element {
-      return dragHandleElement.value as Element
-    },
-    get disclosure(): Element {
-      return disclosureElement.value as Element
-    },
-    get children(): Element {
-      return childrenElement.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
+    row: rowElement,
+    dragHandle: dragHandleElement,
+    disclosure: disclosureElement,
+    actions: actionsElement,
+    children: childrenElement,
   },
-  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()
+  state: { internalExpanded, structuralLevel, tabStop, isContainer },
 })
 </script>
 
@@ -263,7 +151,7 @@ onBeforeUnmount(() => {
       </button>
       <span class="leading"><slot name="leading" /></span>
       <span class="label"><slot name="label">{{ label }}</slot></span>
-      <span class="actions"><slot name="actions" /></span>
+      <span class="actions" ref="actions"><slot name="actions" /></span>
       <span class="drop-indicator row-drop-indicator" aria-hidden="true"></span>
     </div>
     <div class="children" role="group" :hidden="!(isContainer && internalExpanded)" ref="children">
@@ -276,6 +164,7 @@ onBeforeUnmount(() => {
 <style scoped>
 [data-component~="ui-tree-item"] {
   --_tree-row-min-height: 32px;
+  --_tree-disclosure-size: 16px;
 
   position: relative;
   display: block;
@@ -286,7 +175,7 @@ onBeforeUnmount(() => {
 .row {
   position: relative;
   display: grid;
-  grid-template-columns: 20px auto minmax(0, 1fr) auto;
+  grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
   align-items: center;
   min-block-size: var(--ui-tree-item-min-block-size, var(--_tree-row-min-height));
   min-inline-size: 0;
@@ -334,13 +223,14 @@ onBeforeUnmount(() => {
 .disclosure-spacer {
   grid-column: 1;
   grid-row: 1;
-  inline-size: 20px;
+  inline-size: var(--_tree-disclosure-size);
   block-size: 28px;
 }
 
 .disclosure {
   display: grid;
-  place-items: center;
+  /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
+  place-items: center start;
   padding: 0;
   color: var(--ui-text-muted);
   background: transparent;
@@ -361,18 +251,18 @@ onBeforeUnmount(() => {
 .disclosure-icon {
   display: grid;
   place-items: center;
-  inline-size: 14px;
-  block-size: 14px;
+  inline-size: 12px;
+  block-size: 12px;
   transform: rotate(-90deg);
   transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
 .disclosure-icon::before {
   display: block;
-  inline-size: 0.45rem;
-  block-size: 0.45rem;
-  border-inline-end: 2px solid currentColor;
-  border-block-end: 2px solid currentColor;
+  inline-size: 0.375rem;
+  block-size: 0.375rem;
+  border-inline-end: 1.5px solid currentColor;
+  border-block-end: 1.5px solid currentColor;
   content: "";
   /* A chevron's ink sits below its box centre; lift it so it centres optically (in either rotation). */
   transform: translateY(-20%) rotate(45deg);
@@ -434,12 +324,66 @@ onBeforeUnmount(() => {
   min-inline-size: 0;
 }
 
+/* The controls sit over the label's end, so the text fades out where they begin. The fade is
+   the truncation mark while it shows: an ellipsis under it would read as a second one. */
+.row:hover > .label,
+.row:focus-within > .label {
+  text-overflow: clip;
+  mask-image: linear-gradient(
+    to right,
+    #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+    transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+  );
+}
+
+.row:hover > .label:dir(rtl),
+.row:focus-within > .label:dir(rtl) {
+  mask-image: linear-gradient(
+    to left,
+    #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+    transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+  );
+}
+
+.row:hover > .label > :slotted(*),
+.row:focus-within > .label > :slotted(*) {
+  text-overflow: clip;
+}
+
 .actions {
-  grid-column: 4;
-  grid-row: 1;
+  position: absolute;
+  z-index: 1;
+  inset-block: 0;
+  inset-inline-end: 0;
   display: inline-flex;
   align-items: center;
   min-inline-size: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+.row:hover > .actions,
+.row:focus-within > .actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Without hover there is no reveal, so the controls keep their own column. */
+@media (hover: none) {
+  .row {
+    grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+  }
+
+  .actions {
+    position: static;
+    grid-column: 4;
+    grid-row: 1;
+    padding-inline-start: 0;
+    background: none;
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 
 .drag-handle {

package/vue/chunks/UiAffordanceScope.js

@@ -1,5 +1,6 @@
+import { n as useComponentHost, t as createDispatch } from "./host.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, watchEffect } from "vue";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderSlot } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-affordance-scope/ui-affordance-scope.js";
 //#region .build/vue/UiAffordanceScope.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-ui-affordance-scope-state"];
@@ -15,82 +16,12 @@ var UiAffordanceScope_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 		const engaged = ref(false);
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [engaged.value && "engaged"].filter(Boolean).join(" "));
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			if (name === "engaged") return engaged.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "engaged") {
-				engaged.value = value;
-				return true;
-			}
-			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
-		}
-		const stops = [];
-		const host = {
-			get element() {
-				return root.value;
-			},
-			state: new Proxy({}, {
-				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
-				set: (_target, name, value) => typeof name === "string" && write(name, value)
-			}),
-			refs: {},
-			elements: new Proxy({}, { get: (_target, name) => {
-				if (typeof name !== "string" || root.value === null) return void 0;
-				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
-			} }),
-			signal(initialValue) {
-				const value = shallowRef(initialValue);
-				return {
-					get: () => value.value,
-					set: (next) => {
-						if (!Object.is(value.value, next)) value.value = next;
-					},
-					update: (next) => {
-						const updated = next(value.value);
-						if (!Object.is(value.value, updated)) value.value = updated;
-					}
-				};
-			},
-			computed(compute) {
-				const value = computed(compute);
-				return { get: () => value.value };
-			},
-			effect(run) {
-				const stop = watchEffect((onCleanup) => {
-					const cleanup = run();
-					if (typeof cleanup === "function") onCleanup(cleanup);
-				}, { flush: "post" });
-				stops.push(stop);
-				return stop;
-			},
-			on(event, listener) {
-				const element = root.value;
-				element?.addEventListener(event, listener);
-				const off = () => element?.removeEventListener(event, listener);
-				stops.push(off);
-				return off;
-			},
-			dispatch
-		};
-		let cleanup;
-		onMounted(() => {
-			Promise.resolve(controllerModule.default(host)).then((result) => {
-				cleanup = result;
-			});
-		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+		const dispatch = createDispatch(root);
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			state: { engaged }
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-affordance-scope" }, _ctx.$attrs, {
@@ -100,6 +31,6 @@ var UiAffordanceScope_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-3d8ef4c3"]]);
+}), [["__scopeId", "data-v-c1d56d8d"]]);
 //#endregion
 export { UiAffordanceScope_default as t };

package/vue/chunks/UiAvatar.js

@@ -1,5 +1,6 @@
+import { n as useComponentHost, t as createDispatch } from "./host.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, useTemplateRef, watchEffect } from "vue";
+import { createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-avatar/ui-avatar.js";
 //#region .build/vue/UiAvatar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["src", "hidden"];
@@ -22,94 +23,17 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const hasImage = ref(false);
 		const hasAuthoredImage = ref(false);
 		const initials = ref("?");
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			if (name === "hasImage") return hasImage.value;
-			if (name === "hasAuthoredImage") return hasAuthoredImage.value;
-			if (name === "initials") return initials.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "hasImage") {
-				hasImage.value = value;
-				return true;
+		const dispatch = createDispatch(root);
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			refs: { image: imageElement },
+			state: {
+				hasImage,
+				hasAuthoredImage,
+				initials
 			}
-			if (name === "hasAuthoredImage") {
-				hasAuthoredImage.value = value;
-				return true;
-			}
-			if (name === "initials") {
-				initials.value = value;
-				return true;
-			}
-			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
-		}
-		const stops = [];
-		const host = {
-			get element() {
-				return root.value;
-			},
-			state: new Proxy({}, {
-				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
-				set: (_target, name, value) => typeof name === "string" && write(name, value)
-			}),
-			refs: { get image() {
-				return imageElement.value;
-			} },
-			elements: new Proxy({}, { get: (_target, name) => {
-				if (typeof name !== "string" || root.value === null) return void 0;
-				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
-			} }),
-			signal(initialValue) {
-				const value = shallowRef(initialValue);
-				return {
-					get: () => value.value,
-					set: (next) => {
-						if (!Object.is(value.value, next)) value.value = next;
-					},
-					update: (next) => {
-						const updated = next(value.value);
-						if (!Object.is(value.value, updated)) value.value = updated;
-					}
-				};
-			},
-			computed(compute) {
-				const value = computed(compute);
-				return { get: () => value.value };
-			},
-			effect(run) {
-				const stop = watchEffect((onCleanup) => {
-					const cleanup = run();
-					if (typeof cleanup === "function") onCleanup(cleanup);
-				}, { flush: "post" });
-				stops.push(stop);
-				return stop;
-			},
-			on(event, listener) {
-				const element = root.value;
-				element?.addEventListener(event, listener);
-				const off = () => element?.removeEventListener(event, listener);
-				stops.push(off);
-				return off;
-			},
-			dispatch
-		};
-		let cleanup;
-		onMounted(() => {
-			Promise.resolve(controllerModule.default(host)).then((result) => {
-				cleanup = result;
-			});
-		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-avatar" }, _ctx.$attrs, {
@@ -133,6 +57,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16);
 		};
 	}
-}), [["__scopeId", "data-v-3a27ff1d"]]);
+}), [["__scopeId", "data-v-64e52bdd"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiAvatarGroup.js

@@ -1,5 +1,6 @@
+import { n as useComponentHost, t as createDispatch } from "./host.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, useTemplateRef, watchEffect } from "vue";
+import { createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-avatar-group/ui-avatar-group.js";
 //#region .build/vue/UiAvatarGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
@@ -18,84 +19,13 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 		const root = ref(null);
 		const overflowElement = useTemplateRef("overflow");
 		const overflowCount = ref(0);
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			if (name === "overflowCount") return overflowCount.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "overflowCount") {
-				overflowCount.value = value;
-				return true;
-			}
-			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
-		}
-		const stops = [];
-		const host = {
-			get element() {
-				return root.value;
-			},
-			state: new Proxy({}, {
-				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
-				set: (_target, name, value) => typeof name === "string" && write(name, value)
-			}),
-			refs: { get overflow() {
-				return overflowElement.value;
-			} },
-			elements: new Proxy({}, { get: (_target, name) => {
-				if (typeof name !== "string" || root.value === null) return void 0;
-				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
-			} }),
-			signal(initialValue) {
-				const value = shallowRef(initialValue);
-				return {
-					get: () => value.value,
-					set: (next) => {
-						if (!Object.is(value.value, next)) value.value = next;
-					},
-					update: (next) => {
-						const updated = next(value.value);
-						if (!Object.is(value.value, updated)) value.value = updated;
-					}
-				};
-			},
-			computed(compute) {
-				const value = computed(compute);
-				return { get: () => value.value };
-			},
-			effect(run) {
-				const stop = watchEffect((onCleanup) => {
-					const cleanup = run();
-					if (typeof cleanup === "function") onCleanup(cleanup);
-				}, { flush: "post" });
-				stops.push(stop);
-				return stop;
-			},
-			on(event, listener) {
-				const element = root.value;
-				element?.addEventListener(event, listener);
-				const off = () => element?.removeEventListener(event, listener);
-				stops.push(off);
-				return off;
-			},
-			dispatch
-		};
-		let cleanup;
-		onMounted(() => {
-			Promise.resolve(controllerModule.default(host)).then((result) => {
-				cleanup = result;
-			});
-		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+		const dispatch = createDispatch(root);
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			refs: { overflow: overflowElement },
+			state: { overflowCount }
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
@@ -114,6 +44,6 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}, toDisplayString(`+${overflowCount.value}`), 9, _hoisted_2)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-2ad5d86f"]]);
+}), [["__scopeId", "data-v-cbb93f58"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

package/vue/chunks/UiBadge.js

@@ -19,6 +19,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-badge" }, _ctx.$attrs, { "data-ui-badge-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-7e9b5784"]]);
+}), [["__scopeId", "data-v-90c7d1bb"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiButton.js

@@ -41,6 +41,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-405b2c60"]]);
+}), [["__scopeId", "data-v-4fd0ad7f"]]);
 //#endregion
 export { UiButton_default as t };