@threadlabs/looma 0.4.0 → 0.5.1

package/vanilla/UiTreeItem.js

@@ -0,0 +1,164 @@
+// Generated by HTML Next 1.0.0-alpha.1 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/declarative-components/runtime";
+import * as controller from "../components/ui-tree-item/ui-tree-item.js";
+import "../styles/ui-tree-item.css";
+
+const definition = {...{"contract":{"tag":"ui-tree-item","props":{"accepts":{"type":"string","required":false,"target":{"attribute":"data-accepts"},"default":""},"container":{"type":"boolean","required":false,"target":{"attribute":"container"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"aria-disabled"},"default":false},"dragType":{"type":"string","required":false,"target":{"attribute":"data-drag-type"},"default":"item"},"dropDepth":{"type":"number","required":false,"target":{"attribute":"data-drop-depth"}},"dropScope":{"type":"string","required":false,"target":{"attribute":"data-drop-scope"},"default":""},"expanded":{"type":"boolean","required":false,"target":{"attribute":"expanded"},"default":false},"itemId":{"type":"string","required":false,"target":{"attribute":"data-item-id"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":""},"selected":{"type":"boolean","required":false,"target":{"attribute":"aria-selected"},"default":false},"sortable":{"type":"boolean","required":false,"target":{"attribute":"sortable"},"default":false},"subtreeDepth":{"type":"number","required":false,"target":{"attribute":"data-subtree-depth"}}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"treeitem"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"aria-level","expression":"structuralLevel","expressionPlan":{"source":"structuralLevel","ast":{"kind":"id","name":"structuralLevel"},"dependencies":["structuralLevel"]}},{"kind":"attribute","name":"aria-selected","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"data-item-id","expression":"itemId","expressionPlan":{"source":"itemId","ast":{"kind":"id","name":"itemId"},"dependencies":["itemId"]}},{"kind":"attribute","name":"data-drag-type","expression":"dragType","expressionPlan":{"source":"dragType","ast":{"kind":"id","name":"dragType"},"dependencies":["dragType"]}},{"kind":"attribute","name":"data-drop-scope","expression":"dropScope","expressionPlan":{"source":"dropScope","ast":{"kind":"id","name":"dropScope"},"dependencies":["dropScope"]}},{"kind":"attribute","name":"data-accepts","expression":"accepts","expressionPlan":{"source":"accepts","ast":{"kind":"id","name":"accepts"},"dependencies":["accepts"]}},{"kind":"attribute","name":"data-drop-depth","expression":"dropDepth","expressionPlan":{"source":"dropDepth","ast":{"kind":"id","name":"dropDepth"},"dependencies":["dropDepth"]}},{"kind":"attribute","name":"data-subtree-depth","expression":"subtreeDepth","expressionPlan":{"source":"subtreeDepth","ast":{"kind":"id","name":"subtreeDepth"},"dependencies":["subtreeDepth"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"row"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"drag-handle"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"draggable","value":"true"},{"kind":"attribute","name":"aria-label","expression":"format('Drag %s to reorder', label)","expressionPlan":{"source":"format('Drag %s to reorder', label)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"Drag %s to reorder"},{"kind":"id","name":"label"}]},"dependencies":["label"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"focusable","value":"false"},{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"5"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"19"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"5"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"19"},{"kind":"literal","name":"r","value":"1"}],"children":[]}]}],"flow":{"kind":"if","test":"sortable and not disabled","testPlan":{"source":"sortable and not disabled","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"sortable"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}},"dependencies":["disabled","sortable"]}},"ref":"dragHandle"},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"disclosure"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"hidden","expression":"not isContainer","expressionPlan":{"source":"not isContainer","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"isContainer"}},"dependencies":["isContainer"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"disclosure-icon"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"disclosure"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[]}],"name":"label"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"actions"}],"children":[{"kind":"slot","fallback":[],"name":"actions"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator row-drop-indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"row"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"children"},{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"hidden","expression":"not (isContainer and internalExpanded)","expressionPlan":{"source":"not (isContainer and internalExpanded)","ast":{"kind":"unary","op":"not","operand":{"kind":"binary","op":"and","left":{"kind":"id","name":"isContainer"},"right":{"kind":"id","name":"internalExpanded"}}},"dependencies":["internalExpanded","isContainer"]}}],"children":[{"kind":"slot"}],"ref":"children"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator subtree-drop-indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}]},"declarations":[{"kind":"state","name":"internalExpanded","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"structuralLevel","expression":{"source":"1","ast":{"kind":"literal","value":1},"dependencies":[]}},{"kind":"state","name":"tabStop","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"isContainer","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"expand","type":"object({ id: string, expanded: boolean, trigger: keyboard | pointer | programmatic })","bubbles":false,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+
+export function createUiTreeItem(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  if (!element.hasAttribute("role")) element.setAttribute("role", "treeitem");
+  const value0 = componentProps["label"] === undefined ? "" : componentProps["label"];
+  if (value0 === null || value0 === undefined) element.removeAttribute("aria-label");
+  else element.setAttribute("aria-label", String(value0));
+  const value1 = componentProps["selected"] === undefined ? false : componentProps["selected"];
+  if (typeof value1 === "boolean") element.setAttribute("aria-selected", String(value1));
+  else element.removeAttribute("aria-selected");
+  const value2 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (typeof value2 === "boolean") element.setAttribute("aria-disabled", String(value2));
+  else element.removeAttribute("aria-disabled");
+  const value3 = componentProps["itemId"] === undefined ? "" : componentProps["itemId"];
+  if (value3 === null || value3 === undefined) element.removeAttribute("data-item-id");
+  else element.setAttribute("data-item-id", String(value3));
+  const value4 = componentProps["dragType"] === undefined ? "item" : componentProps["dragType"];
+  if (value4 === null || value4 === undefined) element.removeAttribute("data-drag-type");
+  else element.setAttribute("data-drag-type", String(value4));
+  const value5 = componentProps["dropScope"] === undefined ? "" : componentProps["dropScope"];
+  if (value5 === null || value5 === undefined) element.removeAttribute("data-drop-scope");
+  else element.setAttribute("data-drop-scope", String(value5));
+  const value6 = componentProps["accepts"] === undefined ? "" : componentProps["accepts"];
+  if (value6 === null || value6 === undefined) element.removeAttribute("data-accepts");
+  else element.setAttribute("data-accepts", String(value6));
+  const value7 = componentProps["dropDepth"] === undefined ? undefined : componentProps["dropDepth"];
+  if (value7 === null || value7 === undefined) element.removeAttribute("data-drop-depth");
+  else element.setAttribute("data-drop-depth", String(value7));
+  const value8 = componentProps["subtreeDepth"] === undefined ? undefined : componentProps["subtreeDepth"];
+  if (value8 === null || value8 === undefined) element.removeAttribute("data-subtree-depth");
+  else element.setAttribute("data-subtree-depth", String(value8));
+  element.setAttribute("data-component", "ui-tree-item");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "row");
+  const element1 = document.createElement("button");
+  element1.setAttribute("class", "drag-handle");
+  element1.setAttribute("type", "button");
+  element1.setAttribute("draggable", "true");
+  const element2 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  element2.setAttribute("aria-hidden", "true");
+  element2.setAttribute("focusable", "false");
+  element2.setAttribute("viewBox", "0 0 24 24");
+  element2.setAttribute("fill", "none");
+  element2.setAttribute("stroke", "currentColor");
+  element2.setAttribute("stroke-width", "2");
+  element2.setAttribute("stroke-linecap", "round");
+  element2.setAttribute("stroke-linejoin", "round");
+  const element3 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  element3.setAttribute("cx", "9");
+  element3.setAttribute("cy", "12");
+  element3.setAttribute("r", "1");
+  element2.append(element3);
+  const element4 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  element4.setAttribute("cx", "9");
+  element4.setAttribute("cy", "5");
+  element4.setAttribute("r", "1");
+  element2.append(element4);
+  const element5 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  element5.setAttribute("cx", "9");
+  element5.setAttribute("cy", "19");
+  element5.setAttribute("r", "1");
+  element2.append(element5);
+  const element6 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  element6.setAttribute("cx", "15");
+  element6.setAttribute("cy", "12");
+  element6.setAttribute("r", "1");
+  element2.append(element6);
+  const element7 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  element7.setAttribute("cx", "15");
+  element7.setAttribute("cy", "5");
+  element7.setAttribute("r", "1");
+  element2.append(element7);
+  const element8 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  element8.setAttribute("cx", "15");
+  element8.setAttribute("cy", "19");
+  element8.setAttribute("r", "1");
+  element2.append(element8);
+  element1.append(element2);
+  element0.append(element1);
+  const element9 = document.createElement("button");
+  element9.setAttribute("class", "disclosure");
+  element9.setAttribute("type", "button");
+  const value9 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value9 === true) element9.setAttribute("disabled", "");
+  else element9.removeAttribute("disabled");
+  const element10 = document.createElement("span");
+  element10.setAttribute("class", "disclosure-icon");
+  element10.setAttribute("aria-hidden", "true");
+  element9.append(element10);
+  element0.append(element9);
+  const element11 = document.createElement("span");
+  element11.setAttribute("class", "leading");
+  if (slots["leading"] ?? [].length > 0) {
+    for (const child of slots["leading"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "leading"]);
+      element11.append(node);
+    }
+  } else {
+  }
+  element0.append(element11);
+  const element12 = document.createElement("span");
+  element12.setAttribute("class", "label");
+  if (slots["label"] ?? [].length > 0) {
+    for (const child of slots["label"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "label"]);
+      element12.append(node);
+    }
+  } else {
+  const element13 = document.createElement("template");
+  element12.append(element13);
+  }
+  element0.append(element12);
+  const element14 = document.createElement("span");
+  element14.setAttribute("class", "actions");
+  if (slots["actions"] ?? [].length > 0) {
+    for (const child of slots["actions"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "actions"]);
+      element14.append(node);
+    }
+  } else {
+  }
+  element0.append(element14);
+  const element15 = document.createElement("span");
+  element15.setAttribute("class", "drop-indicator row-drop-indicator");
+  element15.setAttribute("aria-hidden", "true");
+  element0.append(element15);
+  element.append(element0);
+  const element16 = document.createElement("div");
+  element16.setAttribute("class", "children");
+  element16.setAttribute("role", "group");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element16.append(node);
+    }
+  } else {
+  }
+  element.append(element16);
+  const element17 = document.createElement("span");
+  element17.setAttribute("class", "drop-indicator subtree-drop-indicator");
+  element17.setAttribute("aria-hidden", "true");
+  element.append(element17);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/index.js

@@ -0,0 +1,48 @@
+export * from "./UiAffordanceScope.js";
+export * from "./UiAvatar.js";
+export * from "./UiAvatarGroup.js";
+export * from "./UiBadge.js";
+export * from "./UiButton.js";
+export * from "./UiCallout.js";
+export * from "./UiCheckbox.js";
+export * from "./UiCluster.js";
+export * from "./UiCombobox.js";
+export * from "./UiContainer.js";
+export * from "./UiContextMenu.js";
+export * from "./UiDialog.js";
+export * from "./UiDisclosure.js";
+export * from "./UiEditable.js";
+export * from "./UiEditorInsertTableGrid.js";
+export * from "./UiEditorMentionMenu.js";
+export * from "./UiEditorSlashMenu.js";
+export * from "./UiEditorTableContextMenu.js";
+export * from "./UiEditorTableOverlay.js";
+export * from "./UiEditorTableToolbar.js";
+export * from "./UiEditorToolbar.js";
+export * from "./UiFloatingActionButton.js";
+export * from "./UiFormField.js";
+export * from "./UiGrid.js";
+export * from "./UiIcon.js";
+export * from "./UiIconButton.js";
+export * from "./UiInput.js";
+export * from "./UiMenu.js";
+export * from "./UiMenuItem.js";
+export * from "./UiPopover.js";
+export * from "./UiRadio.js";
+export * from "./UiRadioGroup.js";
+export * from "./UiReel.js";
+export * from "./UiSearchResultRow.js";
+export * from "./UiSearchShell.js";
+export * from "./UiSelect.js";
+export * from "./UiSeparator.js";
+export * from "./UiSidebar.js";
+export * from "./UiStack.js";
+export * from "./UiSwitch.js";
+export * from "./UiSwitcher.js";
+export * from "./UiTabs.js";
+export * from "./UiTextarea.js";
+export * from "./UiToastRegion.js";
+export * from "./UiTooltip.js";
+export * from "./UiTopBar.js";
+export * from "./UiTree.js";
+export * from "./UiTreeItem.js";

package/vue/UiAffordanceScope.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    nearRadius?: number | null;
+};
+declare var __VLS_1: {};
+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<{}>, {
+    nearRadius: number | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiAffordanceScope.js

@@ -0,0 +1,2 @@
+import { t as UiAffordanceScope_default } from "./chunks/UiAffordanceScope.js";
+export { UiAffordanceScope_default as default };

package/vue/UiAffordanceScope.vue

@@ -0,0 +1,118 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
+import * as controllerModule from "../components/ui-affordance-scope/ui-affordance-scope.js";
+
+defineOptions({ inheritAttrs: false });
+
+const hn = {
+  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
+};
+
+const props = withDefaults(defineProps<{
+  nearRadius?: number | null;
+}>(), {
+  nearRadius: 16,
+});
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+const state_engaged = ref<any>(false);
+
+/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+const dispatch = (name: string, detail?: unknown): boolean => {
+  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail })) ?? true;
+};
+
+/** The resolved values the styles' :host-state() rules test. */
+const hostState = computed(() => (["engaged"] as const).flatMap((name) => {
+  const value = read(name);
+  const tokens: string[] = hn.t(value) ? [name] : [];
+  if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
+  return tokens;
+}).join(" "));
+
+function read(name: string): unknown {
+  if (name === "engaged") return state_engaged.value;
+  return (props as Record<string, unknown>)[name];
+}
+
+function write(name: string, value: unknown): boolean {
+  if (name === "engaged") { state_engaged.value = value; 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: refs 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;
+  },
+  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();
+});
+</script>
+
+<template>
+  <span data-component="ui-affordance-scope" v-bind="$attrs" :data-ui-affordance-scope-state="hostState || undefined" ref="root"><slot></slot></span>
+</template>
+
+<style scoped>
+[data-component~="ui-affordance-scope"] {
+      display: contents;
+      --ui-affordance-scope-engaged: 0;
+    }
+
+    [data-component~="ui-affordance-scope"][data-ui-affordance-scope-state~="engaged"] {
+      --ui-affordance-scope-engaged: 1;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-affordance-scope"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiAvatar.d.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    alt?: string | null;
+    fallback?: string | null;
+    name?: string | null;
+    src?: string | null;
+};
+declare var __VLS_1: {};
+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<{}>, {
+    alt: string | null;
+    fallback: string | null;
+    name: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiAvatar.js

@@ -0,0 +1,2 @@
+import { t as UiAvatar_default } from "./chunks/UiAvatar.js";
+export { UiAvatar_default as default };

package/vue/UiAvatar.vue

@@ -0,0 +1,152 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
+import * as controllerModule from "../components/ui-avatar/ui-avatar.js";
+
+defineOptions({ inheritAttrs: false });
+
+const hn = {
+  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
+  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
+  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
+  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
+};
+
+const props = withDefaults(defineProps<{
+  alt?: string | null;
+  fallback?: string | null;
+  name?: string | null;
+  src?: string | null;
+}>(), {
+  alt: "",
+  fallback: "",
+  name: "",
+});
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+const state_hasImage = ref<any>(false);
+const state_hasAuthoredImage = ref<any>(false);
+const state_initials = ref<any>("?");
+
+/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+const 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 === "hasImage") return state_hasImage.value;
+  if (name === "hasAuthoredImage") return state_hasAuthoredImage.value;
+  if (name === "initials") return state_initials.value;
+  return (props as Record<string, unknown>)[name];
+}
+
+function write(name: string, value: unknown): boolean {
+  if (name === "hasImage") { state_hasImage.value = value; return true; }
+  if (name === "hasAuthoredImage") { state_hasAuthoredImage.value = value; return true; }
+  if (name === "initials") { state_initials.value = value; 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: refs 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;
+  },
+  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();
+});
+</script>
+
+<template>
+  <span data-component="ui-avatar" v-bind="$attrs" ref="root"><slot></slot><img class="image" alt="" aria-hidden="true" :src="hn.attr(props.src)" :hidden="hn.attr((hn.t(state_hasAuthoredImage) || hn.t(!hn.t(state_hasImage))))" :ref="(element) => { refs['image'] = element as Element }"><span class="fallback" :aria-hidden="hn.enumerated(state_hasImage)" :hidden="hn.attr(state_hasImage)">{{ hn.text(state_initials) }}</span></span>
+</template>
+
+<style scoped>
+[data-component~="ui-avatar"] {
+      display: inline-grid;
+      place-items: center;
+      overflow: hidden;
+      inline-size: 2.5rem;
+      block-size: 2.5rem;
+      border-radius: 999px;
+      border: 1px solid var(--ui-avatar-border, var(--ui-border-strong));
+      background: var(--ui-avatar-surface, var(--ui-accent-soft));
+      color: var(--ui-avatar-text, var(--ui-accent-solid));
+      font: inherit;
+      font-size: 0.875rem;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .image,
+    :slotted(img) {
+      grid-area: 1 / 1;
+      inline-size: 100%;
+      block-size: 100%;
+      object-fit: cover;
+    }
+
+    .fallback {
+      grid-area: 1 / 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 100%;
+      block-size: 100%;
+    }
+
+    [hidden] {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-avatar"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiAvatarGroup.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    label?: string | null;
+    max?: number | null;
+};
+declare var __VLS_1: {};
+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<{}>, {
+    label: string | null;
+    max: number | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiAvatarGroup.js

@@ -0,0 +1,2 @@
+import { t as UiAvatarGroup_default } from "./chunks/UiAvatarGroup.js";
+export { UiAvatarGroup_default as default };