@threadlabs/looma 0.2.20 → 0.3.0

package/svelte/index.js

@@ -0,0 +1,1881 @@
+// src/index.ts
+import "@threadlabs/looma/core";
+import "@threadlabs/looma/layout";
+import "@threadlabs/looma/editor/ui";
+
+// src/generated/vanilla/UiAffordanceScope.js
+import { attachLoomaComponent } from "@threadlabs/looma/core/declarative";
+var definition = { ...{ "contract": { "tag": "ui-affordance-scope", "props": { "nearRadius": { "type": "number", "required": false, "target": { "attribute": "nearradius" }, "default": 16 } } }, "template": { "kind": "element", "name": "span", "attributes": [], "children": [{ "kind": "slot" }] }, "declarations": [], "root": { "kind": "native", "element": "span", "choices": ["span"] } }, source: { file: import.meta.url }, css: "" };
+function createUiAffordanceScope(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("span");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-affordance-scope");
+  element.setAttribute("data-component-root", "ui-affordance-scope");
+  if (children.length > 0) {
+    for (const child of children) element.append(child);
+  } else {
+  }
+  attachLoomaComponent(element, definition, "ui-affordance-scope", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiAvatarGroup.js
+import { attachLoomaComponent as attachLoomaComponent2 } from "@threadlabs/looma/core/declarative";
+var definition2 = { ...{ "contract": { "tag": "ui-avatar-group", "props": { "label": { "type": "string", "required": false, "target": { "attribute": "aria-label" }, "default": "People" }, "max": { "type": "number", "required": false, "target": { "attribute": "max" }, "default": 5 } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "role", "value": "group" }, { "kind": "attribute", "name": "aria-label", "expression": "label", "expressionPlan": { "source": "label", "ast": { "kind": "id", "name": "label" }, "dependencies": ["label"] } }], "children": [{ "kind": "slot" }] }, "declarations": [{ "kind": "state", "name": "overflowCount", "expression": { "source": "0", "ast": { "kind": "literal", "value": 0 }, "dependencies": [] } }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiAvatarGroup(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("role", "group");
+  const value0 = componentProps["label"] === void 0 ? "People" : componentProps["label"];
+  if (value0 === null || value0 === void 0) element.removeAttribute("aria-label");
+  else element.setAttribute("aria-label", String(value0));
+  element.setAttribute("data-component", "ui-avatar-group");
+  element.setAttribute("data-component-root", "ui-avatar-group");
+  if (children.length > 0) {
+    for (const child of children) element.append(child);
+  } else {
+  }
+  attachLoomaComponent2(element, definition2, "ui-avatar-group", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiAvatar.js
+import { attachLoomaComponent as attachLoomaComponent3 } from "@threadlabs/looma/core/declarative";
+var definition3 = { ...{ "contract": { "tag": "ui-avatar", "props": { "alt": { "type": "string", "required": false, "target": { "attribute": "alt" }, "default": "" }, "fallback": { "type": "string", "required": false, "target": { "attribute": "fallback" }, "default": "" }, "name": { "type": "string", "required": false, "target": { "attribute": "name" }, "default": "" }, "src": { "type": "string", "required": false, "target": { "attribute": "src" }, "default": "" } } }, "template": { "kind": "element", "name": "span", "attributes": [{ "kind": "attribute", "name": "data-has-image", "expression": "hasImage", "expressionPlan": { "source": "hasImage", "ast": { "kind": "id", "name": "hasImage" }, "dependencies": ["hasImage"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "avatar" }], "children": [{ "kind": "slot" }, { "kind": "element", "name": "img", "attributes": [{ "kind": "literal", "name": "class", "value": "avatar__managed-image" }, { "kind": "attribute", "name": "src", "expression": "src", "expressionPlan": { "source": "src", "ast": { "kind": "id", "name": "src" }, "dependencies": ["src"] } }, { "kind": "literal", "name": "alt", "value": "" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "fallback" }], "children": [] }] }] }, "declarations": [{ "kind": "state", "name": "hasImage", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "hasAuthoredImage", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }], "root": { "kind": "native", "element": "span", "choices": ["span"] } }, source: { file: import.meta.url }, css: "" };
+function createUiAvatar(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("span");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-avatar");
+  element.setAttribute("data-component-root", "ui-avatar");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "avatar");
+  element0.setAttribute("data-component", "ui-avatar");
+  if (children.length > 0) {
+    for (const child of children) element0.append(child);
+  } else {
+  }
+  const element1 = document.createElement("img");
+  element1.setAttribute("class", "avatar__managed-image");
+  const value0 = componentProps["src"] === void 0 ? "" : componentProps["src"];
+  if (value0 === null || value0 === void 0) element1.removeAttribute("src");
+  else element1.setAttribute("src", String(value0));
+  element1.setAttribute("alt", "");
+  element1.setAttribute("aria-hidden", "true");
+  element1.setAttribute("data-component", "ui-avatar");
+  element0.append(element1);
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "fallback");
+  element2.setAttribute("data-component", "ui-avatar");
+  element0.append(element2);
+  element.append(element0);
+  attachLoomaComponent3(element, definition3, "ui-avatar", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiBadge.js
+import { manageGeneratedProps } from "@threadlabs/looma/core/declarative-generated";
+function createUiBadge(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const prop0 = componentProps["tone"] === void 0 ? "neutral" : componentProps["tone"];
+  const prop1 = componentProps["variant"] === void 0 ? "subtle" : componentProps["variant"];
+  const element = document.createElement("span");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = prop1;
+  if (value0 === null || value0 === void 0) element.removeAttribute("data-variant");
+  else element.setAttribute("data-variant", String(value0));
+  const value1 = prop0;
+  if (value1 === null || value1 === void 0) element.removeAttribute("data-tone");
+  else element.setAttribute("data-tone", String(value1));
+  element.setAttribute("data-component", "ui-badge");
+  element.setAttribute("data-component-root", "ui-badge");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "badge__surface");
+  element0.setAttribute("data-component", "ui-badge");
+  if (children.length > 0) {
+    for (const child of children) element0.append(child);
+  } else {
+  }
+  element.append(element0);
+  manageGeneratedProps(element, [
+    { name: "tone", attribute: "data-tone", value: componentProps["tone"], default: "neutral", bound: true, type: ["neutral", "accent", "info", "success", "warning", "danger"], required: false },
+    { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "subtle", bound: true, type: ["solid", "subtle"], required: false }
+  ]);
+  return element;
+}
+
+// src/generated/vanilla/UiButton.js
+import { attachLoomaComponent as attachLoomaComponent4 } from "@threadlabs/looma/core/declarative";
+var definition4 = { ...{ "contract": { "tag": "ui-button", "props": { "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "size": { "type": { "enum": ["sm", "md", "lg"] }, "required": false, "target": { "attribute": "data-size" }, "default": "md" }, "variant": { "type": { "enum": ["outline", "solid", "danger", "ghost", "link"] }, "required": false, "target": { "attribute": "data-variant" }, "default": "outline" } } }, "template": { "kind": "element", "name": "button", "attributes": [{ "kind": "attribute", "name": "data-size", "expression": "size", "expressionPlan": { "source": "size", "ast": { "kind": "id", "name": "size" }, "dependencies": ["size"] } }, { "kind": "attribute", "name": "data-variant", "expression": "variant", "expressionPlan": { "source": "variant", "ast": { "kind": "id", "name": "variant" }, "dependencies": ["variant"] } }, { "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "slot" }] }, "declarations": [], "root": { "kind": "native", "element": "button", "choices": ["button"] } }, source: { file: import.meta.url }, css: "" };
+function createUiButton(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("button");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = componentProps["size"] === void 0 ? "md" : componentProps["size"];
+  if (value0 === null || value0 === void 0) element.removeAttribute("data-size");
+  else element.setAttribute("data-size", String(value0));
+  const value1 = componentProps["variant"] === void 0 ? "outline" : componentProps["variant"];
+  if (value1 === null || value1 === void 0) element.removeAttribute("data-variant");
+  else element.setAttribute("data-variant", String(value1));
+  const value2 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  if (value2 === true) element.setAttribute("disabled", "");
+  else element.removeAttribute("disabled");
+  element.setAttribute("data-component", "ui-button");
+  element.setAttribute("data-component-root", "ui-button");
+  if (children.length > 0) {
+    for (const child of children) element.append(child);
+  } else {
+  }
+  attachLoomaComponent4(element, definition4, "ui-button", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiCallout.js
+import { attachLoomaComponent as attachLoomaComponent5 } from "@threadlabs/looma/core/declarative";
+var definition5 = { ...{ "contract": { "tag": "ui-callout", "props": { "tone": { "type": { "enum": ["info", "note", "warning", "success", "danger"] }, "required": false, "target": { "attribute": "data-tone" }, "default": "info" } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "role", "value": "note" }, { "kind": "attribute", "name": "data-tone", "expression": "tone", "expressionPlan": { "source": "tone", "ast": { "kind": "id", "name": "tone" }, "dependencies": ["tone"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "callout__surface" }], "children": [{ "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "icon" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "content" }], "children": [{ "kind": "slot" }] }] }] }, "declarations": [], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiCallout(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("role", "note");
+  const value0 = componentProps["tone"] === void 0 ? "info" : componentProps["tone"];
+  if (value0 === null || value0 === void 0) element.removeAttribute("data-tone");
+  else element.setAttribute("data-tone", String(value0));
+  element.setAttribute("data-component", "ui-callout");
+  element.setAttribute("data-component-root", "ui-callout");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "callout__surface");
+  element0.setAttribute("data-component", "ui-callout");
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "icon");
+  element1.setAttribute("aria-hidden", "true");
+  element1.setAttribute("data-component", "ui-callout");
+  element0.append(element1);
+  const element2 = document.createElement("div");
+  element2.setAttribute("class", "content");
+  element2.setAttribute("data-component", "ui-callout");
+  if (children.length > 0) {
+    for (const child of children) element2.append(child);
+  } else {
+  }
+  element0.append(element2);
+  element.append(element0);
+  attachLoomaComponent5(element, definition5, "ui-callout", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiCheckbox.js
+import { attachLoomaComponent as attachLoomaComponent6 } from "@threadlabs/looma/core/declarative";
+var definition6 = { ...{ "contract": { "tag": "ui-checkbox", "props": { "checked": { "type": "boolean", "required": false, "target": { "attribute": "checked" }, "default": false }, "disabled": { "type": "boolean", "required": false, "target": { "attribute": "data-disabled" }, "default": false }, "indeterminate": { "type": "boolean", "required": false, "target": { "attribute": "indeterminate" }, "default": false }, "required": { "type": "boolean", "required": false, "target": { "attribute": "required" }, "default": false }, "value": { "type": "string", "required": false, "target": { "attribute": "value" }, "default": "on" } } }, "template": { "kind": "element", "name": "span", "attributes": [{ "kind": "attribute", "name": "data-disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "element", "name": "label", "attributes": [{ "kind": "literal", "name": "class", "value": "control" }], "children": [{ "kind": "element", "name": "input", "attributes": [{ "kind": "literal", "name": "type", "value": "checkbox" }, { "kind": "attribute", "name": "checked", "expression": "internalChecked", "expressionPlan": { "source": "internalChecked", "ast": { "kind": "id", "name": "internalChecked" }, "dependencies": ["internalChecked"] } }, { "kind": "attribute", "name": "required", "expression": "required", "expressionPlan": { "source": "required", "ast": { "kind": "id", "name": "required" }, "dependencies": ["required"] } }, { "kind": "attribute", "name": "value", "expression": "value", "expressionPlan": { "source": "value", "ast": { "kind": "id", "name": "value" }, "dependencies": ["value"] } }], "children": [] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "label" }], "children": [{ "kind": "slot" }] }] }] }, "declarations": [{ "kind": "state", "name": "internalChecked", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "change", "type": "object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "span", "choices": ["span"] } }, source: { file: import.meta.url }, css: "" };
+function createUiCheckbox(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("span");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  if (value0 === true) element.setAttribute("data-disabled", "");
+  else element.removeAttribute("data-disabled");
+  element.setAttribute("data-component", "ui-checkbox");
+  element.setAttribute("data-component-root", "ui-checkbox");
+  const element0 = document.createElement("label");
+  element0.setAttribute("class", "control");
+  element0.setAttribute("data-component", "ui-checkbox");
+  const element1 = document.createElement("input");
+  element1.setAttribute("type", "checkbox");
+  const value1 = componentProps["required"] === void 0 ? false : componentProps["required"];
+  if (value1 === true) element1.setAttribute("required", "");
+  else element1.removeAttribute("required");
+  const value2 = componentProps["value"] === void 0 ? "on" : componentProps["value"];
+  if (value2 === null || value2 === void 0) element1.removeAttribute("value");
+  else element1.setAttribute("value", String(value2));
+  element1.setAttribute("data-component", "ui-checkbox");
+  element0.append(element1);
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "label");
+  element2.setAttribute("data-component", "ui-checkbox");
+  if (children.length > 0) {
+    for (const child of children) element2.append(child);
+  } else {
+  }
+  element0.append(element2);
+  element.append(element0);
+  attachLoomaComponent6(element, definition6, "ui-checkbox", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiCombobox.js
+import { attachLoomaComponent as attachLoomaComponent7 } from "@threadlabs/looma/core/declarative";
+var definition7 = { ...{ "contract": { "tag": "ui-combobox", "props": { "allowCreate": { "type": "boolean", "required": false, "target": { "attribute": "allowcreate" }, "default": false }, "allowFreeText": { "type": "boolean", "required": false, "target": { "attribute": "allowfreetext" }, "default": false }, "clearable": { "type": "boolean", "required": false, "target": { "attribute": "clearable" }, "default": false }, "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "disclosure": { "type": "boolean", "required": false, "target": { "attribute": "disclosure" }, "default": false }, "help": { "type": "string", "required": false, "target": { "attribute": "help" }, "default": "" }, "items": { "type": { "kind": "list", "item": { "kind": "object", "fields": [{ "name": "id", "type": { "kind": "terminal", "name": "string" }, "optional": false }, { "name": "value", "type": { "kind": "terminal", "name": "string" }, "optional": false }, { "name": "label", "type": { "kind": "terminal", "name": "string" }, "optional": false }, { "name": "group", "type": { "kind": "terminal", "name": "string" }, "optional": true }, { "name": "disabled", "type": { "kind": "terminal", "name": "boolean" }, "optional": true }], "open": false } }, "required": false, "target": { "attribute": "items" } }, "label": { "type": "string", "required": false, "target": { "attribute": "label" }, "default": "" }, "labelVisibility": { "type": { "enum": ["visible", "sr-only"] }, "required": false, "target": { "attribute": "labelvisibility" }, "default": "visible" }, "multiple": { "type": "boolean", "required": false, "target": { "attribute": "multiple" }, "default": false }, "name": { "type": "string", "required": false, "target": { "attribute": "name" }, "default": "" }, "placeholder": { "type": "string", "required": false, "target": { "attribute": "placeholder" }, "default": "" }, "query": { "type": "string", "required": false, "target": { "attribute": "query" } }, "readonly": { "type": "boolean", "required": false, "target": { "attribute": "readonly" }, "default": false }, "required": { "type": "boolean", "required": false, "target": { "attribute": "required" }, "default": false }, "size": { "type": { "enum": ["sm", "md"] }, "required": false, "target": { "attribute": "data-size" }, "default": "md" }, "tokenSeparators": { "type": { "kind": "list", "item": { "kind": "terminal", "name": "string" } }, "required": false, "target": { "attribute": "tokenseparators" } }, "value": { "type": { "kind": "union", "members": [{ "kind": "terminal", "name": "string" }, { "kind": "terminal", "name": "null" }] }, "required": false, "target": { "attribute": "value" } } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "attribute", "name": "data-size", "expression": "size", "expressionPlan": { "source": "size", "ast": { "kind": "id", "name": "size" }, "dependencies": ["size"] } }], "children": [{ "kind": "element", "name": "label", "attributes": [{ "kind": "literal", "name": "for", "value": "input" }, { "kind": "literal", "name": "part", "value": "label" }], "children": [{ "kind": "element", "name": "template", "attributes": [{ "kind": "directive", "name": "value", "expression": "label", "expressionPlan": { "source": "label", "ast": { "kind": "id", "name": "label" }, "dependencies": ["label"] } }], "children": [] }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "field" }, { "kind": "literal", "name": "part", "value": "field" }], "children": [{ "kind": "slot", "fallback": [], "name": "start" }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "items" }, { "kind": "literal", "name": "role", "value": "group" }], "children": [], "flow": { "kind": "if", "test": "multiple", "testPlan": { "source": "multiple", "ast": { "kind": "id", "name": "multiple" }, "dependencies": ["multiple"] } } }, { "kind": "element", "name": "input", "attributes": [{ "kind": "literal", "name": "id", "value": "input" }, { "kind": "literal", "name": "role", "value": "combobox" }, { "kind": "literal", "name": "aria-autocomplete", "value": "list" }, { "kind": "literal", "name": "aria-controls", "value": "listbox" }, { "kind": "attribute", "name": "value", "expression": "display", "expressionPlan": { "source": "display", "ast": { "kind": "id", "name": "display" }, "dependencies": ["display"] } }, { "kind": "attribute", "name": "placeholder", "expression": "placeholder", "expressionPlan": { "source": "placeholder", "ast": { "kind": "id", "name": "placeholder" }, "dependencies": ["placeholder"] } }, { "kind": "attribute", "name": "name", "expression": "name", "expressionPlan": { "source": "name", "ast": { "kind": "id", "name": "name" }, "dependencies": ["name"] } }, { "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }, { "kind": "attribute", "name": "readonly", "expression": "readonly", "expressionPlan": { "source": "readonly", "ast": { "kind": "id", "name": "readonly" }, "dependencies": ["readonly"] } }, { "kind": "attribute", "name": "required", "expression": "required", "expressionPlan": { "source": "required", "ast": { "kind": "id", "name": "required" }, "dependencies": ["required"] } }, { "kind": "literal", "name": "autocomplete", "value": "off" }, { "kind": "literal", "name": "part", "value": "input" }], "children": [] }, { "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "type", "value": "button" }, { "kind": "literal", "name": "part", "value": "affordance" }], "children": [{ "kind": "element", "name": "svg", "attributes": [{ "kind": "literal", "name": "class", "value": "affordance-icon" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }, { "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" }], "children": [{ "kind": "element", "name": "path", "attributes": [{ "kind": "literal", "name": "d", "value": "M7 7l10 10M17 7 7 17" }], "children": [] }] }], "flow": { "kind": "if", "test": "clearable", "testPlan": { "source": "clearable", "ast": { "kind": "id", "name": "clearable" }, "dependencies": ["clearable"] } } }, { "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "id", "value": "help" }, { "kind": "literal", "name": "type", "value": "button" }, { "kind": "literal", "name": "part", "value": "affordance" }, { "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [{ "kind": "text", "value": "?" }] }], "flow": { "kind": "if", "test": "help", "testPlan": { "source": "help", "ast": { "kind": "id", "name": "help" }, "dependencies": ["help"] } } }, { "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "type", "value": "button" }, { "kind": "literal", "name": "part", "value": "affordance" }, { "kind": "literal", "name": "aria-controls", "value": "listbox" }], "children": [{ "kind": "element", "name": "svg", "attributes": [{ "kind": "literal", "name": "class", "value": "affordance-icon" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }, { "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.25" }, { "kind": "literal", "name": "stroke-linecap", "value": "round" }, { "kind": "literal", "name": "stroke-linejoin", "value": "round" }], "children": [{ "kind": "element", "name": "path", "attributes": [{ "kind": "literal", "name": "d", "value": "m6 9 6 6 6-6" }], "children": [] }] }], "flow": { "kind": "if", "test": "disclosure", "testPlan": { "source": "disclosure", "ast": { "kind": "id", "name": "disclosure" }, "dependencies": ["disclosure"] } } }] }, { "kind": "element", "name": "ui-tooltip", "attributes": [{ "kind": "literal", "name": "id", "value": "help-text" }, { "kind": "literal", "name": "for", "value": "help" }], "children": [{ "kind": "element", "name": "template", "attributes": [{ "kind": "directive", "name": "value", "expression": "help", "expressionPlan": { "source": "help", "ast": { "kind": "id", "name": "help" }, "dependencies": ["help"] } }], "children": [] }], "flow": { "kind": "if", "test": "help", "testPlan": { "source": "help", "ast": { "kind": "id", "name": "help" }, "dependencies": ["help"] } } }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "popup" }, { "kind": "literal", "name": "part", "value": "popup" }, { "kind": "attribute", "name": "hidden", "expression": "not expanded", "expressionPlan": { "source": "not expanded", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "expanded" } }, "dependencies": ["expanded"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "id", "value": "listbox" }, { "kind": "literal", "name": "role", "value": "listbox" }], "children": [] }, { "kind": "slot", "fallback": [], "name": "footer" }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "id", "value": "validation" }, { "kind": "literal", "name": "class", "value": "message" }, { "kind": "literal", "name": "part", "value": "validation" }, { "kind": "attribute", "name": "hidden", "expression": "not validation.issues.length", "expressionPlan": { "source": "not validation.issues.length", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "member", "object": { "kind": "member", "object": { "kind": "id", "name": "validation" }, "key": "issues" }, "key": "length" } }, "dependencies": ["validation.issues.length"] } }], "children": [] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "sr-only" }, { "kind": "literal", "name": "role", "value": "status" }, { "kind": "literal", "name": "aria-live", "value": "polite" }, { "kind": "literal", "name": "aria-atomic", "value": "true" }], "children": [] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "authored-options" }, { "kind": "literal", "name": "hidden", "value": "" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [{ "kind": "slot" }] }] }, "declarations": [{ "kind": "state", "name": "raw", "expression": { "source": "''", "ast": { "kind": "literal", "value": "" }, "dependencies": [] } }, { "kind": "state", "name": "display", "expression": { "source": "''", "ast": { "kind": "literal", "value": "" }, "dependencies": [] } }, { "kind": "state", "name": "selected", "expression": { "source": "null", "ast": { "kind": "literal", "value": null }, "dependencies": [] } }, { "kind": "state", "name": "expanded", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "rows", "expression": { "source": "[]", "ast": { "kind": "array", "items": [] }, "dependencies": [] } }, { "kind": "state", "name": "active", "expression": { "source": "-1", "ast": { "kind": "unary", "op": "-", "operand": { "kind": "literal", "value": 1 } }, "dependencies": [] } }, { "kind": "state", "name": "loading", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "helpOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "lookupError", "expression": { "source": "''", "ast": { "kind": "literal", "value": "" }, "dependencies": [] } }, { "kind": "state", "name": "validation", "expression": { "source": "{ status: 'pristine', touched: false, dirty: false, issues: [] }", "ast": { "kind": "object", "pairs": [{ "key": "status", "value": { "kind": "literal", "value": "pristine" } }, { "key": "touched", "value": { "kind": "literal", "value": false } }, { "key": "dirty", "value": { "kind": "literal", "value": false } }, { "key": "issues", "value": { "kind": "array", "items": [] } }] }, "dependencies": [] } }, { "kind": "event", "name": "query-change", "type": "object({ query: string, display: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "value-change", "type": "object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic }) | list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean }))", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "free-entry", "type": "object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "create-entry", "type": "object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "validation-change", "type": "object({ status: pristine | pending | valid | warning | error, touched: boolean, dirty: boolean, issues: list(object({ message: string, path?: list(unknown), severity?: error | warning })), output?: unknown })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "options-change", "type": "list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean }))", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "add-item", "type": "object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }), index: integer, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "remove-item", "type": "object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }), index: integer, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "create-item", "type": "object({ query: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "method", "name": "validate", "exportName": "validate", "returns": "promise(unknown)" }, { "kind": "method", "name": "focusInput", "exportName": "focusInput", "returns": "promise(undefined)" }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiCombobox(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = componentProps["size"] === void 0 ? "md" : componentProps["size"];
+  if (value0 === null || value0 === void 0) element.removeAttribute("data-size");
+  else element.setAttribute("data-size", String(value0));
+  element.setAttribute("data-component", "ui-combobox");
+  element.setAttribute("data-component-root", "ui-combobox");
+  const element0 = document.createElement("label");
+  element0.setAttribute("for", "input");
+  element0.setAttribute("part", "label");
+  element0.setAttribute("data-component", "ui-combobox");
+  const element1 = document.createElement("template");
+  element1.setAttribute("data-component", "ui-combobox");
+  element0.append(element1);
+  element.append(element0);
+  const element2 = document.createElement("div");
+  element2.setAttribute("class", "field");
+  element2.setAttribute("part", "field");
+  element2.setAttribute("data-component", "ui-combobox");
+  if (slots["start"] ?? [].length > 0) {
+    for (const child of slots["start"] ?? []) element2.append(child);
+  } else {
+  }
+  const element3 = document.createElement("div");
+  element3.setAttribute("class", "items");
+  element3.setAttribute("role", "group");
+  element3.setAttribute("data-component", "ui-combobox");
+  element2.append(element3);
+  const element4 = document.createElement("input");
+  element4.setAttribute("id", "input");
+  element4.setAttribute("role", "combobox");
+  element4.setAttribute("aria-autocomplete", "list");
+  element4.setAttribute("aria-controls", "listbox");
+  const value1 = componentProps["placeholder"] === void 0 ? "" : componentProps["placeholder"];
+  if (value1 === null || value1 === void 0) element4.removeAttribute("placeholder");
+  else element4.setAttribute("placeholder", String(value1));
+  const value2 = componentProps["name"] === void 0 ? "" : componentProps["name"];
+  if (value2 === null || value2 === void 0) element4.removeAttribute("name");
+  else element4.setAttribute("name", String(value2));
+  const value3 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  if (value3 === true) element4.setAttribute("disabled", "");
+  else element4.removeAttribute("disabled");
+  const value4 = componentProps["readonly"] === void 0 ? false : componentProps["readonly"];
+  if (value4 === true) element4.setAttribute("readonly", "");
+  else element4.removeAttribute("readonly");
+  const value5 = componentProps["required"] === void 0 ? false : componentProps["required"];
+  if (value5 === true) element4.setAttribute("required", "");
+  else element4.removeAttribute("required");
+  element4.setAttribute("autocomplete", "off");
+  element4.setAttribute("part", "input");
+  element4.setAttribute("data-component", "ui-combobox");
+  element2.append(element4);
+  const element5 = document.createElement("button");
+  element5.setAttribute("type", "button");
+  element5.setAttribute("part", "affordance");
+  element5.setAttribute("data-component", "ui-combobox");
+  const element6 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  element6.setAttribute("class", "affordance-icon");
+  element6.setAttribute("aria-hidden", "true");
+  element6.setAttribute("viewBox", "0 0 24 24");
+  element6.setAttribute("fill", "none");
+  element6.setAttribute("stroke", "currentColor");
+  element6.setAttribute("stroke-width", "2");
+  element6.setAttribute("stroke-linecap", "round");
+  element6.setAttribute("data-component", "ui-combobox");
+  const element7 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element7.setAttribute("d", "M7 7l10 10M17 7 7 17");
+  element7.setAttribute("data-component", "ui-combobox");
+  element6.append(element7);
+  element5.append(element6);
+  element2.append(element5);
+  const element8 = document.createElement("button");
+  element8.setAttribute("id", "help");
+  element8.setAttribute("type", "button");
+  element8.setAttribute("part", "affordance");
+  const value6 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  if (value6 === true) element8.setAttribute("disabled", "");
+  else element8.removeAttribute("disabled");
+  element8.setAttribute("data-component", "ui-combobox");
+  const element9 = document.createElement("span");
+  element9.setAttribute("aria-hidden", "true");
+  element9.setAttribute("data-component", "ui-combobox");
+  element9.append("?");
+  element8.append(element9);
+  element2.append(element8);
+  const element10 = document.createElement("button");
+  element10.setAttribute("type", "button");
+  element10.setAttribute("part", "affordance");
+  element10.setAttribute("aria-controls", "listbox");
+  element10.setAttribute("data-component", "ui-combobox");
+  const element11 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  element11.setAttribute("class", "affordance-icon");
+  element11.setAttribute("aria-hidden", "true");
+  element11.setAttribute("viewBox", "0 0 24 24");
+  element11.setAttribute("fill", "none");
+  element11.setAttribute("stroke", "currentColor");
+  element11.setAttribute("stroke-width", "2.25");
+  element11.setAttribute("stroke-linecap", "round");
+  element11.setAttribute("stroke-linejoin", "round");
+  element11.setAttribute("data-component", "ui-combobox");
+  const element12 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element12.setAttribute("d", "m6 9 6 6 6-6");
+  element12.setAttribute("data-component", "ui-combobox");
+  element11.append(element12);
+  element10.append(element11);
+  element2.append(element10);
+  element.append(element2);
+  const element13 = document.createElement("ui-tooltip");
+  element13.setAttribute("id", "help-text");
+  element13.setAttribute("for", "help");
+  element13.setAttribute("data-component", "ui-combobox");
+  const element14 = document.createElement("template");
+  element14.setAttribute("data-component", "ui-combobox");
+  element13.append(element14);
+  element.append(element13);
+  const element15 = document.createElement("div");
+  element15.setAttribute("class", "popup");
+  element15.setAttribute("part", "popup");
+  element15.setAttribute("data-component", "ui-combobox");
+  const element16 = document.createElement("div");
+  element16.setAttribute("id", "listbox");
+  element16.setAttribute("role", "listbox");
+  element16.setAttribute("data-component", "ui-combobox");
+  element15.append(element16);
+  if (slots["footer"] ?? [].length > 0) {
+    for (const child of slots["footer"] ?? []) element15.append(child);
+  } else {
+  }
+  element.append(element15);
+  const element17 = document.createElement("div");
+  element17.setAttribute("id", "validation");
+  element17.setAttribute("class", "message");
+  element17.setAttribute("part", "validation");
+  element17.setAttribute("data-component", "ui-combobox");
+  element.append(element17);
+  const element18 = document.createElement("div");
+  element18.setAttribute("class", "sr-only");
+  element18.setAttribute("role", "status");
+  element18.setAttribute("aria-live", "polite");
+  element18.setAttribute("aria-atomic", "true");
+  element18.setAttribute("data-component", "ui-combobox");
+  element.append(element18);
+  const element19 = document.createElement("div");
+  element19.setAttribute("class", "authored-options");
+  element19.setAttribute("hidden", "");
+  element19.setAttribute("aria-hidden", "true");
+  element19.setAttribute("data-component", "ui-combobox");
+  if (children.length > 0) {
+    for (const child of children) element19.append(child);
+  } else {
+  }
+  element.append(element19);
+  attachLoomaComponent7(element, definition7, "ui-combobox", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiContextMenu.js
+import { attachLoomaComponent as attachLoomaComponent8 } from "@threadlabs/looma/core/declarative";
+var definition8 = { ...{ "contract": { "tag": "ui-context-menu", "props": { "for": { "type": "string", "required": false, "target": { "attribute": "for" }, "default": "" }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false } } }, "template": { "kind": "element", "name": "span", "attributes": [{ "kind": "attribute", "name": "data-state-open", "expression": "internalOpen", "expressionPlan": { "source": "internalOpen", "ast": { "kind": "id", "name": "internalOpen" }, "dependencies": ["internalOpen"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "menu" }, { "kind": "attribute", "name": "data-state-open", "expression": "internalOpen", "expressionPlan": { "source": "internalOpen", "ast": { "kind": "id", "name": "internalOpen" }, "dependencies": ["internalOpen"] } }], "children": [{ "kind": "element", "name": "ui-menu", "attributes": [], "children": [{ "kind": "slot" }] }] }] }, "declarations": [{ "kind": "state", "name": "internalOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "focusTrigger", "expression": { "source": "'programmatic'", "ast": { "kind": "literal", "value": "programmatic" }, "dependencies": [] } }, { "kind": "event", "name": "open", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "close", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "select", "type": "object({ value: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "span", "choices": ["span"] } }, source: { file: import.meta.url }, css: "" };
+function createUiContextMenu(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("span");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-context-menu");
+  element.setAttribute("data-component-root", "ui-context-menu");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "menu");
+  element0.setAttribute("data-component", "ui-context-menu");
+  const element1 = document.createElement("ui-menu");
+  element1.setAttribute("data-component", "ui-context-menu");
+  if (children.length > 0) {
+    for (const child of children) element1.append(child);
+  } else {
+  }
+  element0.append(element1);
+  element.append(element0);
+  attachLoomaComponent8(element, definition8, "ui-context-menu", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiDialog.js
+import { attachLoomaComponent as attachLoomaComponent9 } from "@threadlabs/looma/core/declarative";
+var definition9 = { ...{ "contract": { "tag": "ui-dialog", "props": { "dismissible": { "type": "boolean", "required": false, "target": { "attribute": "dismissible" }, "default": false }, "for": { "type": "string", "required": false, "target": { "attribute": "for" }, "default": "" }, "label": { "type": "string", "required": false, "target": { "attribute": "label" } }, "modal": { "type": "boolean", "required": false, "target": { "attribute": "modal" }, "default": false }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false } } }, "template": { "kind": "element", "name": "dialog", "attributes": [{ "kind": "attribute", "name": "aria-label", "expression": "accessibleLabel", "expressionPlan": { "source": "accessibleLabel", "ast": { "kind": "id", "name": "accessibleLabel" }, "dependencies": ["accessibleLabel"] } }], "children": [{ "kind": "element", "name": "header", "attributes": [{ "kind": "literal", "name": "class", "value": "dialog__header" }], "children": [{ "kind": "element", "name": "h2", "attributes": [{ "kind": "literal", "name": "class", "value": "dialog__title" }], "children": [{ "kind": "element", "name": "template", "attributes": [{ "kind": "directive", "name": "value", "expression": "label", "expressionPlan": { "source": "label", "ast": { "kind": "id", "name": "label" }, "dependencies": ["label"] } }], "children": [] }], "flow": { "kind": "if", "test": "label", "testPlan": { "source": "label", "ast": { "kind": "id", "name": "label" }, "dependencies": ["label"] } } }, { "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "class", "value": "dialog__close" }, { "kind": "literal", "name": "type", "value": "button" }, { "kind": "literal", "name": "aria-label", "value": "Close" }], "children": [] }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "dialog__body" }], "children": [{ "kind": "slot" }] }, { "kind": "element", "name": "footer", "attributes": [{ "kind": "literal", "name": "class", "value": "dialog__footer" }], "children": [{ "kind": "slot", "fallback": [], "name": "actions" }] }] }, "declarations": [{ "kind": "state", "name": "internalOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "accessibleLabel", "expression": { "source": "'Dialog'", "ast": { "kind": "literal", "value": "Dialog" }, "dependencies": [] } }, { "kind": "event", "name": "close", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "dialog", "choices": ["dialog"] } }, source: { file: import.meta.url }, css: "" };
+function createUiDialog(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("dialog");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-dialog");
+  element.setAttribute("data-component-root", "ui-dialog");
+  const element0 = document.createElement("header");
+  element0.setAttribute("class", "dialog__header");
+  element0.setAttribute("data-component", "ui-dialog");
+  const element1 = document.createElement("h2");
+  element1.setAttribute("class", "dialog__title");
+  element1.setAttribute("data-component", "ui-dialog");
+  const element2 = document.createElement("template");
+  element2.setAttribute("data-component", "ui-dialog");
+  element1.append(element2);
+  element0.append(element1);
+  const element3 = document.createElement("button");
+  element3.setAttribute("class", "dialog__close");
+  element3.setAttribute("type", "button");
+  element3.setAttribute("aria-label", "Close");
+  element3.setAttribute("data-component", "ui-dialog");
+  element0.append(element3);
+  element.append(element0);
+  const element4 = document.createElement("div");
+  element4.setAttribute("class", "dialog__body");
+  element4.setAttribute("data-component", "ui-dialog");
+  if (children.length > 0) {
+    for (const child of children) element4.append(child);
+  } else {
+  }
+  element.append(element4);
+  const element5 = document.createElement("footer");
+  element5.setAttribute("class", "dialog__footer");
+  element5.setAttribute("data-component", "ui-dialog");
+  if (slots["actions"] ?? [].length > 0) {
+    for (const child of slots["actions"] ?? []) element5.append(child);
+  } else {
+  }
+  element.append(element5);
+  attachLoomaComponent9(element, definition9, "ui-dialog", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiDisclosure.js
+import { attachLoomaComponent as attachLoomaComponent10 } from "@threadlabs/looma/core/declarative";
+var definition10 = { ...{ "contract": { "tag": "ui-disclosure", "props": { "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false }, "summary": { "type": "string", "required": false, "target": { "attribute": "summary" }, "default": "Details" } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [{ "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "class", "value": "disclosure__trigger" }, { "kind": "literal", "name": "type", "value": "button" }, { "kind": "attribute", "name": "aria-controls", "expression": "contentId", "expressionPlan": { "source": "contentId", "ast": { "kind": "id", "name": "contentId" }, "dependencies": ["contentId"] } }, { "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "element", "name": "span", "attributes": [], "children": [{ "kind": "element", "name": "template", "attributes": [{ "kind": "directive", "name": "value", "expression": "summary", "expressionPlan": { "source": "summary", "ast": { "kind": "id", "name": "summary" }, "dependencies": ["summary"] } }], "children": [] }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "disclosure__chevron" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [] }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "disclosure__panel" }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "disclosure__panel-inner" }], "children": [{ "kind": "slot" }] }] }] }, "declarations": [{ "kind": "state", "name": "internalOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "contentId", "expression": { "source": "''", "ast": { "kind": "literal", "value": "" }, "dependencies": [] } }, { "kind": "event", "name": "open", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "close", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiDisclosure(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-disclosure");
+  element.setAttribute("data-component-root", "ui-disclosure");
+  const element0 = document.createElement("button");
+  element0.setAttribute("class", "disclosure__trigger");
+  element0.setAttribute("type", "button");
+  const value0 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  if (value0 === true) element0.setAttribute("disabled", "");
+  else element0.removeAttribute("disabled");
+  element0.setAttribute("data-component", "ui-disclosure");
+  const element1 = document.createElement("span");
+  element1.setAttribute("data-component", "ui-disclosure");
+  const element2 = document.createElement("template");
+  element2.setAttribute("data-component", "ui-disclosure");
+  element1.append(element2);
+  element0.append(element1);
+  const element3 = document.createElement("span");
+  element3.setAttribute("class", "disclosure__chevron");
+  element3.setAttribute("aria-hidden", "true");
+  element3.setAttribute("data-component", "ui-disclosure");
+  element0.append(element3);
+  element.append(element0);
+  const element4 = document.createElement("div");
+  element4.setAttribute("class", "disclosure__panel");
+  element4.setAttribute("data-component", "ui-disclosure");
+  const element5 = document.createElement("div");
+  element5.setAttribute("class", "disclosure__panel-inner");
+  element5.setAttribute("data-component", "ui-disclosure");
+  if (children.length > 0) {
+    for (const child of children) element5.append(child);
+  } else {
+  }
+  element4.append(element5);
+  element.append(element4);
+  attachLoomaComponent10(element, definition10, "ui-disclosure", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiEditable.js
+import { attachLoomaComponent as attachLoomaComponent11 } from "@threadlabs/looma/core/declarative";
+var definition11 = { ...{ "contract": { "tag": "ui-editable", "props": { "actions": { "type": "boolean", "required": false, "target": { "attribute": "actions" }, "default": false }, "disabled": { "type": "boolean", "required": false, "target": { "attribute": "data-disabled" }, "default": false }, "edit": { "type": "boolean", "required": false, "target": { "attribute": "edit" }, "default": false }, "hint": { "type": "string", "required": false, "target": { "attribute": "hint" }, "default": "" }, "label": { "type": "string", "required": false, "target": { "attribute": "label" }, "default": "Edit value" }, "value": { "type": "string", "required": false, "target": { "attribute": "value" }, "default": "" } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "attribute", "name": "data-state-edit", "expression": "internalEdit", "expressionPlan": { "source": "internalEdit", "ast": { "kind": "id", "name": "internalEdit" }, "dependencies": ["internalEdit"] } }, { "kind": "attribute", "name": "data-disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "editable__field" }], "children": [{ "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "class", "value": "editable__preview" }, { "kind": "literal", "name": "type", "value": "button" }], "children": [{ "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "editable__text" }], "children": [{ "kind": "element", "name": "template", "attributes": [{ "kind": "directive", "name": "value", "expression": "internalValue", "expressionPlan": { "source": "internalValue", "ast": { "kind": "id", "name": "internalValue" }, "dependencies": ["internalValue"] } }], "children": [] }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "editable__hint" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [{ "kind": "element", "name": "template", "attributes": [{ "kind": "directive", "name": "value", "expression": "hint", "expressionPlan": { "source": "hint", "ast": { "kind": "id", "name": "hint" }, "dependencies": ["hint"] } }], "children": [] }], "flow": { "kind": "if", "test": "hint", "testPlan": { "source": "hint", "ast": { "kind": "id", "name": "hint" }, "dependencies": ["hint"] } } }] }, { "kind": "element", "name": "input", "attributes": [{ "kind": "literal", "name": "class", "value": "editable__input" }, { "kind": "literal", "name": "type", "value": "text" }, { "kind": "attribute", "name": "value", "expression": "draft", "expressionPlan": { "source": "draft", "ast": { "kind": "id", "name": "draft" }, "dependencies": ["draft"] } }], "children": [] }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "editable__actions" }], "children": [{ "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "type", "value": "button" }, { "kind": "literal", "name": "data-action", "value": "save" }], "children": [{ "kind": "text", "value": "Save" }] }, { "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "type", "value": "button" }, { "kind": "literal", "name": "data-action", "value": "cancel" }], "children": [{ "kind": "text", "value": "Cancel" }] }], "flow": { "kind": "if", "test": "actions", "testPlan": { "source": "actions", "ast": { "kind": "id", "name": "actions" }, "dependencies": ["actions"] } } }] }, "declarations": [{ "kind": "state", "name": "internalEdit", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "internalValue", "expression": { "source": "''", "ast": { "kind": "literal", "value": "" }, "dependencies": [] } }, { "kind": "state", "name": "draft", "expression": { "source": "''", "ast": { "kind": "literal", "value": "" }, "dependencies": [] } }, { "kind": "event", "name": "input", "type": "object({ value: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "change", "type": "object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "edit-change", "type": "object({ edit: boolean, reason: activate | commit | cancel | light-dismiss | escape | programmatic, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiEditable(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  if (value0 === true) element.setAttribute("data-disabled", "");
+  else element.removeAttribute("data-disabled");
+  element.setAttribute("data-component", "ui-editable");
+  element.setAttribute("data-component-root", "ui-editable");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "editable__field");
+  element0.setAttribute("data-component", "ui-editable");
+  const element1 = document.createElement("button");
+  element1.setAttribute("class", "editable__preview");
+  element1.setAttribute("type", "button");
+  element1.setAttribute("data-component", "ui-editable");
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "editable__text");
+  element2.setAttribute("data-component", "ui-editable");
+  const element3 = document.createElement("template");
+  element3.setAttribute("data-component", "ui-editable");
+  element2.append(element3);
+  element1.append(element2);
+  const element4 = document.createElement("span");
+  element4.setAttribute("class", "editable__hint");
+  element4.setAttribute("aria-hidden", "true");
+  element4.setAttribute("data-component", "ui-editable");
+  const element5 = document.createElement("template");
+  element5.setAttribute("data-component", "ui-editable");
+  element4.append(element5);
+  element1.append(element4);
+  element0.append(element1);
+  const element6 = document.createElement("input");
+  element6.setAttribute("class", "editable__input");
+  element6.setAttribute("type", "text");
+  element6.setAttribute("data-component", "ui-editable");
+  element0.append(element6);
+  element.append(element0);
+  const element7 = document.createElement("div");
+  element7.setAttribute("class", "editable__actions");
+  element7.setAttribute("data-component", "ui-editable");
+  const element8 = document.createElement("button");
+  element8.setAttribute("type", "button");
+  element8.setAttribute("data-action", "save");
+  element8.setAttribute("data-component", "ui-editable");
+  element8.append("Save");
+  element7.append(element8);
+  const element9 = document.createElement("button");
+  element9.setAttribute("type", "button");
+  element9.setAttribute("data-action", "cancel");
+  element9.setAttribute("data-component", "ui-editable");
+  element9.append("Cancel");
+  element7.append(element9);
+  element.append(element7);
+  attachLoomaComponent11(element, definition11, "ui-editable", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiFormField.js
+import { attachLoomaComponent as attachLoomaComponent12 } from "@threadlabs/looma/core/declarative";
+var definition12 = { ...{ "contract": { "tag": "ui-form-field", "props": { "disabled": { "type": "boolean", "required": false, "target": { "attribute": "data-disabled" }, "default": false }, "invalid": { "type": "boolean", "required": false, "target": { "attribute": "data-invalid" }, "default": false }, "required": { "type": "boolean", "required": false, "target": { "attribute": "data-required" }, "default": false } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "attribute", "name": "data-invalid", "expression": "invalid", "expressionPlan": { "source": "invalid", "ast": { "kind": "id", "name": "invalid" }, "dependencies": ["invalid"] } }, { "kind": "attribute", "name": "data-disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }, { "kind": "attribute", "name": "data-required", "expression": "required", "expressionPlan": { "source": "required", "ast": { "kind": "id", "name": "required" }, "dependencies": ["required"] } }], "children": [{ "kind": "slot", "fallback": [], "name": "label" }, { "kind": "slot" }, { "kind": "slot", "fallback": [], "name": "help" }, { "kind": "slot", "fallback": [], "name": "error" }] }, "declarations": [], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiFormField(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = componentProps["invalid"] === void 0 ? false : componentProps["invalid"];
+  if (value0 === true) element.setAttribute("data-invalid", "");
+  else element.removeAttribute("data-invalid");
+  const value1 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  if (value1 === true) element.setAttribute("data-disabled", "");
+  else element.removeAttribute("data-disabled");
+  const value2 = componentProps["required"] === void 0 ? false : componentProps["required"];
+  if (value2 === true) element.setAttribute("data-required", "");
+  else element.removeAttribute("data-required");
+  element.setAttribute("data-component", "ui-form-field");
+  element.setAttribute("data-component-root", "ui-form-field");
+  if (slots["label"] ?? [].length > 0) {
+    for (const child of slots["label"] ?? []) element.append(child);
+  } else {
+  }
+  if (children.length > 0) {
+    for (const child of children) element.append(child);
+  } else {
+  }
+  if (slots["help"] ?? [].length > 0) {
+    for (const child of slots["help"] ?? []) element.append(child);
+  } else {
+  }
+  if (slots["error"] ?? [].length > 0) {
+    for (const child of slots["error"] ?? []) element.append(child);
+  } else {
+  }
+  attachLoomaComponent12(element, definition12, "ui-form-field", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiIconButton.js
+import { attachLoomaComponent as attachLoomaComponent13 } from "@threadlabs/looma/core/declarative";
+var definition13 = { ...{ "contract": { "tag": "ui-icon-button", "props": { "anticipatory": { "type": "boolean", "required": false, "target": { "attribute": "anticipatory" }, "default": false }, "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "label": { "type": "string", "required": false, "target": { "attribute": "aria-label" }, "default": "" }, "round": { "type": "boolean", "required": false, "target": { "attribute": "data-round" }, "default": false }, "size": { "type": { "enum": ["sm", "md", "lg"] }, "required": false, "target": { "attribute": "size" }, "default": "md" }, "variant": { "type": { "enum": ["ghost", "outline", "solid"] }, "required": false, "target": { "attribute": "variant" }, "default": "ghost" } } }, "template": { "kind": "element", "name": "button", "attributes": [{ "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }, { "kind": "attribute", "name": "data-round", "expression": "round", "expressionPlan": { "source": "round", "ast": { "kind": "id", "name": "round" }, "dependencies": ["round"] } }, { "kind": "literal", "name": "type", "value": "button" }, { "kind": "attribute", "name": "aria-label", "expression": "label", "expressionPlan": { "source": "label", "ast": { "kind": "id", "name": "label" }, "dependencies": ["label"] } }], "children": [{ "kind": "slot" }] }, "declarations": [], "root": { "kind": "native", "element": "button", "choices": ["button"] } }, source: { file: import.meta.url }, css: "" };
+function createUiIconButton(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("button");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  if (value0 === true) element.setAttribute("disabled", "");
+  else element.removeAttribute("disabled");
+  const value1 = componentProps["round"] === void 0 ? false : componentProps["round"];
+  if (value1 === true) element.setAttribute("data-round", "");
+  else element.removeAttribute("data-round");
+  element.setAttribute("type", "button");
+  const value2 = componentProps["label"] === void 0 ? "" : componentProps["label"];
+  if (value2 === null || value2 === void 0) element.removeAttribute("aria-label");
+  else element.setAttribute("aria-label", String(value2));
+  element.setAttribute("data-component", "ui-icon-button");
+  element.setAttribute("data-component-root", "ui-icon-button");
+  if (children.length > 0) {
+    for (const child of children) element.append(child);
+  } else {
+  }
+  attachLoomaComponent13(element, definition13, "ui-icon-button", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiInput.js
+import { attachLoomaComponent as attachLoomaComponent14 } from "@threadlabs/looma/core/declarative";
+var definition14 = { ...{ "contract": { "tag": "ui-input", "props": { "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "invalid": { "type": "boolean", "required": false, "target": { "attribute": "invalid" }, "default": false }, "readonly": { "type": "boolean", "required": false, "target": { "attribute": "readonly" }, "default": false }, "required": { "type": "boolean", "required": false, "target": { "attribute": "required" }, "default": false }, "value": { "type": "string", "required": false, "target": { "attribute": "value" } } } }, "template": { "kind": "element", "name": "input", "attributes": [{ "kind": "attribute", "name": "value", "expression": "value", "expressionPlan": { "source": "value", "ast": { "kind": "id", "name": "value" }, "dependencies": ["value"] } }, { "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }, { "kind": "attribute", "name": "readonly", "expression": "readonly", "expressionPlan": { "source": "readonly", "ast": { "kind": "id", "name": "readonly" }, "dependencies": ["readonly"] } }, { "kind": "attribute", "name": "required", "expression": "required", "expressionPlan": { "source": "required", "ast": { "kind": "id", "name": "required" }, "dependencies": ["required"] } }], "children": [] }, "declarations": [], "root": { "kind": "native", "element": "input", "choices": ["input"] } }, source: { file: import.meta.url }, css: "" };
+function createUiInput(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("input");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = componentProps["value"] === void 0 ? void 0 : componentProps["value"];
+  if (value0 === null || value0 === void 0) element.removeAttribute("value");
+  else element.setAttribute("value", String(value0));
+  const value1 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  if (value1 === true) element.setAttribute("disabled", "");
+  else element.removeAttribute("disabled");
+  const value2 = componentProps["readonly"] === void 0 ? false : componentProps["readonly"];
+  if (value2 === true) element.setAttribute("readonly", "");
+  else element.removeAttribute("readonly");
+  const value3 = componentProps["required"] === void 0 ? false : componentProps["required"];
+  if (value3 === true) element.setAttribute("required", "");
+  else element.removeAttribute("required");
+  element.setAttribute("data-component", "ui-input");
+  element.setAttribute("data-component-root", "ui-input");
+  attachLoomaComponent14(element, definition14, "ui-input", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiMenuItem.js
+import { manageGeneratedProps as manageGeneratedProps2 } from "@threadlabs/looma/core/declarative-generated";
+function createUiMenuItem(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const prop0 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  const prop1 = componentProps["value"] === void 0 ? "" : componentProps["value"];
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("role", "menuitem");
+  const value0 = prop1;
+  if (value0 === null || value0 === void 0) element.removeAttribute("data-value");
+  else element.setAttribute("data-value", String(value0));
+  element.setAttribute("data-component", "ui-menu-item");
+  element.setAttribute("data-component-root", "ui-menu-item");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "menu-item__surface");
+  element0.setAttribute("data-component", "ui-menu-item");
+  if (children.length > 0) {
+    for (const child of children) element0.append(child);
+  } else {
+  }
+  element.append(element0);
+  manageGeneratedProps2(element, [
+    { name: "disabled", attribute: "data-disabled", value: componentProps["disabled"], default: false, type: "boolean", required: false },
+    { name: "value", attribute: "data-value", value: componentProps["value"], default: "", bound: true, type: "string", required: false }
+  ]);
+  return element;
+}
+
+// src/generated/vanilla/UiMenu.js
+import { attachLoomaComponent as attachLoomaComponent15 } from "@threadlabs/looma/core/declarative";
+var definition15 = { ...{ "contract": { "tag": "ui-menu", "props": { "for": { "type": "string", "required": false, "target": { "attribute": "for" }, "default": "" }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false }, "placement": { "type": "string", "required": false, "target": { "attribute": "placement" }, "default": "bottom-start" } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "role", "value": "menu" }, { "kind": "literal", "name": "aria-orientation", "value": "vertical" }, { "kind": "attribute", "name": "data-state-open", "expression": "internalOpen", "expressionPlan": { "source": "internalOpen", "ast": { "kind": "id", "name": "internalOpen" }, "dependencies": ["internalOpen"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "menu__surface" }], "children": [{ "kind": "slot" }] }] }, "declarations": [{ "kind": "state", "name": "internalOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "select", "type": "object({ value: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "open", "type": "object({ open: boolean, reason: action | programmatic, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "close", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiMenu(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("role", "menu");
+  element.setAttribute("aria-orientation", "vertical");
+  element.setAttribute("data-component", "ui-menu");
+  element.setAttribute("data-component-root", "ui-menu");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "menu__surface");
+  element0.setAttribute("data-component", "ui-menu");
+  if (children.length > 0) {
+    for (const child of children) element0.append(child);
+  } else {
+  }
+  element.append(element0);
+  attachLoomaComponent15(element, definition15, "ui-menu", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiPopover.js
+import { attachLoomaComponent as attachLoomaComponent16 } from "@threadlabs/looma/core/declarative";
+var definition16 = { ...{ "contract": { "tag": "ui-popover", "props": { "for": { "type": "string", "required": false, "target": { "attribute": "for" }, "default": "" }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false }, "placement": { "type": "string", "required": false, "target": { "attribute": "placement" }, "default": "bottom-start" } } }, "template": { "kind": "element", "name": "span", "attributes": [{ "kind": "attribute", "name": "data-state-open", "expression": "internalOpen", "expressionPlan": { "source": "internalOpen", "ast": { "kind": "id", "name": "internalOpen" }, "dependencies": ["internalOpen"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "popover__surface" }], "children": [{ "kind": "slot" }] }] }, "declarations": [{ "kind": "state", "name": "internalOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "open", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "close", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "span", "choices": ["span"] } }, source: { file: import.meta.url }, css: "" };
+function createUiPopover(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("span");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-popover");
+  element.setAttribute("data-component-root", "ui-popover");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "popover__surface");
+  element0.setAttribute("data-component", "ui-popover");
+  if (children.length > 0) {
+    for (const child of children) element0.append(child);
+  } else {
+  }
+  element.append(element0);
+  attachLoomaComponent16(element, definition16, "ui-popover", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiRadioGroup.js
+import { attachLoomaComponent as attachLoomaComponent17 } from "@threadlabs/looma/core/declarative";
+var definition17 = { ...{ "contract": { "tag": "ui-radio-group", "props": { "disabled": { "type": "boolean", "required": false, "target": { "attribute": "data-disabled" }, "default": false }, "label": { "type": "string", "required": false, "target": { "attribute": "label" }, "default": "Options" }, "name": { "type": "string", "required": false, "target": { "attribute": "name" }, "default": "" }, "orientation": { "type": { "enum": ["horizontal", "vertical"] }, "required": false, "target": { "attribute": "data-orientation" }, "default": "horizontal" }, "required": { "type": "boolean", "required": false, "target": { "attribute": "required" }, "default": false }, "value": { "type": "string", "required": false, "target": { "attribute": "value" }, "default": "" } } }, "template": { "kind": "element", "name": "fieldset", "attributes": [{ "kind": "literal", "name": "role", "value": "radiogroup" }, { "kind": "attribute", "name": "data-orientation", "expression": "orientation", "expressionPlan": { "source": "orientation", "ast": { "kind": "id", "name": "orientation" }, "dependencies": ["orientation"] } }, { "kind": "attribute", "name": "data-disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "element", "name": "legend", "attributes": [], "children": [{ "kind": "element", "name": "template", "attributes": [{ "kind": "directive", "name": "value", "expression": "label", "expressionPlan": { "source": "label", "ast": { "kind": "id", "name": "label" }, "dependencies": ["label"] } }], "children": [] }] }, { "kind": "slot" }] }, "declarations": [{ "kind": "state", "name": "internalValue", "expression": { "source": "''", "ast": { "kind": "literal", "value": "" }, "dependencies": [] } }, { "kind": "event", "name": "select", "type": "object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "change", "type": "object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "fieldset", "choices": ["fieldset"] } }, source: { file: import.meta.url }, css: "" };
+function createUiRadioGroup(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("fieldset");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("role", "radiogroup");
+  const value0 = componentProps["orientation"] === void 0 ? "horizontal" : componentProps["orientation"];
+  if (value0 === null || value0 === void 0) element.removeAttribute("data-orientation");
+  else element.setAttribute("data-orientation", String(value0));
+  const value1 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  if (value1 === true) element.setAttribute("data-disabled", "");
+  else element.removeAttribute("data-disabled");
+  element.setAttribute("data-component", "ui-radio-group");
+  element.setAttribute("data-component-root", "ui-radio-group");
+  const element0 = document.createElement("legend");
+  element0.setAttribute("data-component", "ui-radio-group");
+  const element1 = document.createElement("template");
+  element1.setAttribute("data-component", "ui-radio-group");
+  element0.append(element1);
+  element.append(element0);
+  if (children.length > 0) {
+    for (const child of children) element.append(child);
+  } else {
+  }
+  attachLoomaComponent17(element, definition17, "ui-radio-group", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiRadio.js
+import { attachLoomaComponent as attachLoomaComponent18 } from "@threadlabs/looma/core/declarative";
+var definition18 = { ...{ "contract": { "tag": "ui-radio", "props": { "checked": { "type": "boolean", "required": false, "target": { "attribute": "checked" }, "default": false }, "disabled": { "type": "boolean", "required": false, "target": { "attribute": "data-disabled" }, "default": false }, "name": { "type": "string", "required": false, "target": { "attribute": "name" }, "default": "" }, "required": { "type": "boolean", "required": false, "target": { "attribute": "required" }, "default": false }, "value": { "type": "string", "required": false, "target": { "attribute": "value" }, "default": "on" } } }, "template": { "kind": "element", "name": "span", "attributes": [{ "kind": "attribute", "name": "data-disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "element", "name": "label", "attributes": [{ "kind": "literal", "name": "class", "value": "control" }], "children": [{ "kind": "element", "name": "input", "attributes": [{ "kind": "literal", "name": "type", "value": "radio" }, { "kind": "attribute", "name": "checked", "expression": "internalChecked", "expressionPlan": { "source": "internalChecked", "ast": { "kind": "id", "name": "internalChecked" }, "dependencies": ["internalChecked"] } }, { "kind": "attribute", "name": "name", "expression": "name", "expressionPlan": { "source": "name", "ast": { "kind": "id", "name": "name" }, "dependencies": ["name"] } }, { "kind": "attribute", "name": "required", "expression": "required", "expressionPlan": { "source": "required", "ast": { "kind": "id", "name": "required" }, "dependencies": ["required"] } }, { "kind": "attribute", "name": "value", "expression": "value", "expressionPlan": { "source": "value", "ast": { "kind": "id", "name": "value" }, "dependencies": ["value"] } }], "children": [] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "label" }], "children": [{ "kind": "slot" }] }] }] }, "declarations": [{ "kind": "state", "name": "internalChecked", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "change", "type": "object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "span", "choices": ["span"] } }, source: { file: import.meta.url }, css: "" };
+function createUiRadio(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("span");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  if (value0 === true) element.setAttribute("data-disabled", "");
+  else element.removeAttribute("data-disabled");
+  element.setAttribute("data-component", "ui-radio");
+  element.setAttribute("data-component-root", "ui-radio");
+  const element0 = document.createElement("label");
+  element0.setAttribute("class", "control");
+  element0.setAttribute("data-component", "ui-radio");
+  const element1 = document.createElement("input");
+  element1.setAttribute("type", "radio");
+  const value1 = componentProps["name"] === void 0 ? "" : componentProps["name"];
+  if (value1 === null || value1 === void 0) element1.removeAttribute("name");
+  else element1.setAttribute("name", String(value1));
+  const value2 = componentProps["required"] === void 0 ? false : componentProps["required"];
+  if (value2 === true) element1.setAttribute("required", "");
+  else element1.removeAttribute("required");
+  const value3 = componentProps["value"] === void 0 ? "on" : componentProps["value"];
+  if (value3 === null || value3 === void 0) element1.removeAttribute("value");
+  else element1.setAttribute("value", String(value3));
+  element1.setAttribute("data-component", "ui-radio");
+  element0.append(element1);
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "label");
+  element2.setAttribute("data-component", "ui-radio");
+  if (children.length > 0) {
+    for (const child of children) element2.append(child);
+  } else {
+  }
+  element0.append(element2);
+  element.append(element0);
+  attachLoomaComponent18(element, definition18, "ui-radio", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiSearchResultRow.js
+import { attachLoomaComponent as attachLoomaComponent19 } from "@threadlabs/looma/core/declarative";
+var definition19 = { ...{ "contract": { "tag": "ui-search-result-row", "props": { "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "selected": { "type": "boolean", "required": false, "target": { "attribute": "data-selected" }, "default": false } } }, "template": { "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "class", "value": "search-result-row" }, { "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": "data-selected", "expression": "selected", "expressionPlan": { "source": "selected", "ast": { "kind": "id", "name": "selected" }, "dependencies": ["selected"] } }, { "kind": "literal", "name": "part", "value": "button" }], "children": [{ "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "search-result-row__leading" }, { "kind": "literal", "name": "part", "value": "leading" }, { "kind": "attribute", "name": "hidden", "expression": "not hasLeading", "expressionPlan": { "source": "not hasLeading", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "hasLeading" } }, "dependencies": ["hasLeading"] } }], "children": [{ "kind": "slot", "fallback": [], "name": "leading" }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "search-result-row__content" }, { "kind": "literal", "name": "part", "value": "content" }], "children": [{ "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "search-result-row__title" }, { "kind": "literal", "name": "part", "value": "title" }], "children": [{ "kind": "slot", "fallback": [], "name": "title" }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "search-result-row__meta" }, { "kind": "literal", "name": "part", "value": "meta" }, { "kind": "attribute", "name": "hidden", "expression": "not hasMeta", "expressionPlan": { "source": "not hasMeta", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "hasMeta" } }, "dependencies": ["hasMeta"] } }], "children": [{ "kind": "slot", "fallback": [], "name": "meta" }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "search-result-row__excerpt" }, { "kind": "literal", "name": "part", "value": "excerpt" }, { "kind": "attribute", "name": "hidden", "expression": "not hasExcerpt", "expressionPlan": { "source": "not hasExcerpt", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "hasExcerpt" } }, "dependencies": ["hasExcerpt"] } }], "children": [{ "kind": "slot", "fallback": [], "name": "excerpt" }] }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "search-result-row__trailing" }, { "kind": "literal", "name": "part", "value": "trailing" }, { "kind": "attribute", "name": "hidden", "expression": "not hasTrailing", "expressionPlan": { "source": "not hasTrailing", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "hasTrailing" } }, "dependencies": ["hasTrailing"] } }], "children": [{ "kind": "slot", "fallback": [], "name": "trailing" }] }] }, "declarations": [{ "kind": "state", "name": "hasLeading", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "hasMeta", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "hasExcerpt", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "hasTrailing", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }], "root": { "kind": "native", "element": "button", "choices": ["button"] } }, source: { file: import.meta.url }, css: "" };
+function createUiSearchResultRow(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("button");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("class", "search-result-row");
+  element.setAttribute("type", "button");
+  const value0 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  if (value0 === true) element.setAttribute("disabled", "");
+  else element.removeAttribute("disabled");
+  const value1 = componentProps["selected"] === void 0 ? false : componentProps["selected"];
+  if (value1 === true) element.setAttribute("data-selected", "");
+  else element.removeAttribute("data-selected");
+  element.setAttribute("part", "button");
+  element.setAttribute("data-component", "ui-search-result-row");
+  element.setAttribute("data-component-root", "ui-search-result-row");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "search-result-row__leading");
+  element0.setAttribute("part", "leading");
+  element0.setAttribute("data-component", "ui-search-result-row");
+  if (slots["leading"] ?? [].length > 0) {
+    for (const child of slots["leading"] ?? []) element0.append(child);
+  } else {
+  }
+  element.append(element0);
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "search-result-row__content");
+  element1.setAttribute("part", "content");
+  element1.setAttribute("data-component", "ui-search-result-row");
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "search-result-row__title");
+  element2.setAttribute("part", "title");
+  element2.setAttribute("data-component", "ui-search-result-row");
+  if (slots["title"] ?? [].length > 0) {
+    for (const child of slots["title"] ?? []) element2.append(child);
+  } else {
+  }
+  element1.append(element2);
+  const element3 = document.createElement("span");
+  element3.setAttribute("class", "search-result-row__meta");
+  element3.setAttribute("part", "meta");
+  element3.setAttribute("data-component", "ui-search-result-row");
+  if (slots["meta"] ?? [].length > 0) {
+    for (const child of slots["meta"] ?? []) element3.append(child);
+  } else {
+  }
+  element1.append(element3);
+  const element4 = document.createElement("span");
+  element4.setAttribute("class", "search-result-row__excerpt");
+  element4.setAttribute("part", "excerpt");
+  element4.setAttribute("data-component", "ui-search-result-row");
+  if (slots["excerpt"] ?? [].length > 0) {
+    for (const child of slots["excerpt"] ?? []) element4.append(child);
+  } else {
+  }
+  element1.append(element4);
+  element.append(element1);
+  const element5 = document.createElement("span");
+  element5.setAttribute("class", "search-result-row__trailing");
+  element5.setAttribute("part", "trailing");
+  element5.setAttribute("data-component", "ui-search-result-row");
+  if (slots["trailing"] ?? [].length > 0) {
+    for (const child of slots["trailing"] ?? []) element5.append(child);
+  } else {
+  }
+  element.append(element5);
+  attachLoomaComponent19(element, definition19, "ui-search-result-row", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiSearchShell.js
+import { attachLoomaComponent as attachLoomaComponent20 } from "@threadlabs/looma/core/declarative";
+var definition20 = { ...{ "contract": { "tag": "ui-search-shell", "props": { "dismissible": { "type": "boolean", "required": false, "target": { "attribute": "dismissible" }, "default": false }, "label": { "type": "string", "required": false, "target": { "attribute": "label" }, "default": "Search" }, "modal": { "type": "boolean", "required": false, "target": { "attribute": "modal" }, "default": false }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [{ "kind": "element", "name": "dialog", "attributes": [{ "kind": "literal", "name": "class", "value": "search-shell" }, { "kind": "literal", "name": "part", "value": "base" }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "search-shell__panel" }, { "kind": "literal", "name": "part", "value": "panel" }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "search-shell__search" }, { "kind": "literal", "name": "part", "value": "search" }], "children": [{ "kind": "slot", "fallback": [], "name": "search" }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "search-shell__status" }, { "kind": "literal", "name": "part", "value": "status" }], "children": [{ "kind": "slot", "fallback": [], "name": "status" }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "search-shell__body" }, { "kind": "literal", "name": "part", "value": "body" }], "children": [{ "kind": "slot", "fallback": [], "name": "body" }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "search-shell__footer" }, { "kind": "literal", "name": "part", "value": "footer" }], "children": [{ "kind": "slot", "fallback": [], "name": "footer" }] }] }] }] }, "declarations": [{ "kind": "state", "name": "internalOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "close", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiSearchShell(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-search-shell");
+  element.setAttribute("data-component-root", "ui-search-shell");
+  const element0 = document.createElement("dialog");
+  element0.setAttribute("class", "search-shell");
+  element0.setAttribute("part", "base");
+  element0.setAttribute("data-component", "ui-search-shell");
+  const element1 = document.createElement("div");
+  element1.setAttribute("class", "search-shell__panel");
+  element1.setAttribute("part", "panel");
+  element1.setAttribute("data-component", "ui-search-shell");
+  const element2 = document.createElement("div");
+  element2.setAttribute("class", "search-shell__search");
+  element2.setAttribute("part", "search");
+  element2.setAttribute("data-component", "ui-search-shell");
+  if (slots["search"] ?? [].length > 0) {
+    for (const child of slots["search"] ?? []) element2.append(child);
+  } else {
+  }
+  element1.append(element2);
+  const element3 = document.createElement("div");
+  element3.setAttribute("class", "search-shell__status");
+  element3.setAttribute("part", "status");
+  element3.setAttribute("data-component", "ui-search-shell");
+  if (slots["status"] ?? [].length > 0) {
+    for (const child of slots["status"] ?? []) element3.append(child);
+  } else {
+  }
+  element1.append(element3);
+  const element4 = document.createElement("div");
+  element4.setAttribute("class", "search-shell__body");
+  element4.setAttribute("part", "body");
+  element4.setAttribute("data-component", "ui-search-shell");
+  if (slots["body"] ?? [].length > 0) {
+    for (const child of slots["body"] ?? []) element4.append(child);
+  } else {
+  }
+  element1.append(element4);
+  const element5 = document.createElement("div");
+  element5.setAttribute("class", "search-shell__footer");
+  element5.setAttribute("part", "footer");
+  element5.setAttribute("data-component", "ui-search-shell");
+  if (slots["footer"] ?? [].length > 0) {
+    for (const child of slots["footer"] ?? []) element5.append(child);
+  } else {
+  }
+  element1.append(element5);
+  element0.append(element1);
+  element.append(element0);
+  attachLoomaComponent20(element, definition20, "ui-search-shell", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiSelect.js
+import { attachLoomaComponent as attachLoomaComponent21 } from "@threadlabs/looma/core/declarative";
+var definition21 = { ...{ "contract": { "tag": "ui-select", "props": { "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "invalid": { "type": "boolean", "required": false, "target": { "attribute": "invalid" }, "default": false }, "multiple": { "type": "boolean", "required": false, "target": { "attribute": "multiple" }, "default": false }, "required": { "type": "boolean", "required": false, "target": { "attribute": "required" }, "default": false }, "value": { "type": "string", "required": false, "target": { "attribute": "value" } } } }, "template": { "kind": "element", "name": "select", "attributes": [{ "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }, { "kind": "attribute", "name": "required", "expression": "required", "expressionPlan": { "source": "required", "ast": { "kind": "id", "name": "required" }, "dependencies": ["required"] } }, { "kind": "attribute", "name": "multiple", "expression": "multiple", "expressionPlan": { "source": "multiple", "ast": { "kind": "id", "name": "multiple" }, "dependencies": ["multiple"] } }], "children": [] }, "declarations": [], "root": { "kind": "native", "element": "select", "choices": ["select"] } }, source: { file: import.meta.url }, css: "" };
+function createUiSelect(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("select");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  if (value0 === true) element.setAttribute("disabled", "");
+  else element.removeAttribute("disabled");
+  const value1 = componentProps["required"] === void 0 ? false : componentProps["required"];
+  if (value1 === true) element.setAttribute("required", "");
+  else element.removeAttribute("required");
+  const value2 = componentProps["multiple"] === void 0 ? false : componentProps["multiple"];
+  if (value2 === true) element.setAttribute("multiple", "");
+  else element.removeAttribute("multiple");
+  element.setAttribute("data-component", "ui-select");
+  element.setAttribute("data-component-root", "ui-select");
+  attachLoomaComponent21(element, definition21, "ui-select", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiSwitch.js
+import { attachLoomaComponent as attachLoomaComponent22 } from "@threadlabs/looma/core/declarative";
+var definition22 = { ...{ "contract": { "tag": "ui-switch", "props": { "checked": { "type": "boolean", "required": false, "target": { "attribute": "checked" }, "default": false }, "disabled": { "type": "boolean", "required": false, "target": { "attribute": "data-disabled" }, "default": false }, "required": { "type": "boolean", "required": false, "target": { "attribute": "required" }, "default": false }, "value": { "type": "string", "required": false, "target": { "attribute": "value" }, "default": "on" } } }, "template": { "kind": "element", "name": "span", "attributes": [{ "kind": "attribute", "name": "data-disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "element", "name": "label", "attributes": [{ "kind": "literal", "name": "class", "value": "control" }], "children": [{ "kind": "element", "name": "input", "attributes": [{ "kind": "literal", "name": "type", "value": "checkbox" }, { "kind": "literal", "name": "role", "value": "switch" }, { "kind": "attribute", "name": "checked", "expression": "internalChecked", "expressionPlan": { "source": "internalChecked", "ast": { "kind": "id", "name": "internalChecked" }, "dependencies": ["internalChecked"] } }, { "kind": "attribute", "name": "required", "expression": "required", "expressionPlan": { "source": "required", "ast": { "kind": "id", "name": "required" }, "dependencies": ["required"] } }, { "kind": "attribute", "name": "value", "expression": "value", "expressionPlan": { "source": "value", "ast": { "kind": "id", "name": "value" }, "dependencies": ["value"] } }], "children": [] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "label" }], "children": [{ "kind": "slot" }] }] }] }, "declarations": [{ "kind": "state", "name": "internalChecked", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "change", "type": "object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "span", "choices": ["span"] } }, source: { file: import.meta.url }, css: "" };
+function createUiSwitch(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("span");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  if (value0 === true) element.setAttribute("data-disabled", "");
+  else element.removeAttribute("data-disabled");
+  element.setAttribute("data-component", "ui-switch");
+  element.setAttribute("data-component-root", "ui-switch");
+  const element0 = document.createElement("label");
+  element0.setAttribute("class", "control");
+  element0.setAttribute("data-component", "ui-switch");
+  const element1 = document.createElement("input");
+  element1.setAttribute("type", "checkbox");
+  element1.setAttribute("role", "switch");
+  const value1 = componentProps["required"] === void 0 ? false : componentProps["required"];
+  if (value1 === true) element1.setAttribute("required", "");
+  else element1.removeAttribute("required");
+  const value2 = componentProps["value"] === void 0 ? "on" : componentProps["value"];
+  if (value2 === null || value2 === void 0) element1.removeAttribute("value");
+  else element1.setAttribute("value", String(value2));
+  element1.setAttribute("data-component", "ui-switch");
+  element0.append(element1);
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "label");
+  element2.setAttribute("data-component", "ui-switch");
+  if (children.length > 0) {
+    for (const child of children) element2.append(child);
+  } else {
+  }
+  element0.append(element2);
+  element.append(element0);
+  attachLoomaComponent22(element, definition22, "ui-switch", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiTabs.js
+import { attachLoomaComponent as attachLoomaComponent23 } from "@threadlabs/looma/core/declarative";
+var definition23 = { ...{ "contract": { "tag": "ui-tabs", "props": { "label": { "type": "string", "required": false, "target": { "attribute": "aria-label" }, "default": "Tabs" }, "orientation": { "type": { "enum": ["horizontal", "vertical"] }, "required": false, "target": { "attribute": "data-orientation" }, "default": "horizontal" }, "stretch": { "type": "boolean", "required": false, "target": { "attribute": "data-stretch" }, "default": false }, "value": { "type": "string", "required": false, "target": { "attribute": "value" }, "default": "" } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "attribute", "name": "data-orientation", "expression": "orientation", "expressionPlan": { "source": "orientation", "ast": { "kind": "id", "name": "orientation" }, "dependencies": ["orientation"] } }, { "kind": "attribute", "name": "data-stretch", "expression": "stretch", "expressionPlan": { "source": "stretch", "ast": { "kind": "id", "name": "stretch" }, "dependencies": ["stretch"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "tabs__list" }, { "kind": "literal", "name": "role", "value": "tablist" }, { "kind": "attribute", "name": "aria-label", "expression": "label", "expressionPlan": { "source": "label", "ast": { "kind": "id", "name": "label" }, "dependencies": ["label"] } }], "children": [] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "tabs__panels" }], "children": [{ "kind": "slot" }] }] }, "declarations": [{ "kind": "state", "name": "internalValue", "expression": { "source": "''", "ast": { "kind": "literal", "value": "" }, "dependencies": [] } }, { "kind": "event", "name": "select", "type": "object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiTabs(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = componentProps["orientation"] === void 0 ? "horizontal" : componentProps["orientation"];
+  if (value0 === null || value0 === void 0) element.removeAttribute("data-orientation");
+  else element.setAttribute("data-orientation", String(value0));
+  const value1 = componentProps["stretch"] === void 0 ? false : componentProps["stretch"];
+  if (value1 === true) element.setAttribute("data-stretch", "");
+  else element.removeAttribute("data-stretch");
+  element.setAttribute("data-component", "ui-tabs");
+  element.setAttribute("data-component-root", "ui-tabs");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "tabs__list");
+  element0.setAttribute("role", "tablist");
+  const value2 = componentProps["label"] === void 0 ? "Tabs" : componentProps["label"];
+  if (value2 === null || value2 === void 0) element0.removeAttribute("aria-label");
+  else element0.setAttribute("aria-label", String(value2));
+  element0.setAttribute("data-component", "ui-tabs");
+  element.append(element0);
+  const element1 = document.createElement("div");
+  element1.setAttribute("class", "tabs__panels");
+  element1.setAttribute("data-component", "ui-tabs");
+  if (children.length > 0) {
+    for (const child of children) element1.append(child);
+  } else {
+  }
+  element.append(element1);
+  attachLoomaComponent23(element, definition23, "ui-tabs", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiTextarea.js
+import { attachLoomaComponent as attachLoomaComponent24 } from "@threadlabs/looma/core/declarative";
+var definition24 = { ...{ "contract": { "tag": "ui-textarea", "props": { "disabled": { "type": "boolean", "required": false, "target": { "attribute": "disabled" }, "default": false }, "invalid": { "type": "boolean", "required": false, "target": { "attribute": "invalid" }, "default": false }, "readonly": { "type": "boolean", "required": false, "target": { "attribute": "readonly" }, "default": false }, "required": { "type": "boolean", "required": false, "target": { "attribute": "required" }, "default": false }, "rows": { "type": { "kind": "terminal", "name": "integer" }, "required": false, "target": { "attribute": "rows" }, "default": 4 }, "value": { "type": "string", "required": false, "target": { "attribute": "value" } } } }, "template": { "kind": "element", "name": "textarea", "attributes": [{ "kind": "attribute", "name": "value", "expression": "value", "expressionPlan": { "source": "value", "ast": { "kind": "id", "name": "value" }, "dependencies": ["value"] } }, { "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }, { "kind": "attribute", "name": "readonly", "expression": "readonly", "expressionPlan": { "source": "readonly", "ast": { "kind": "id", "name": "readonly" }, "dependencies": ["readonly"] } }, { "kind": "attribute", "name": "required", "expression": "required", "expressionPlan": { "source": "required", "ast": { "kind": "id", "name": "required" }, "dependencies": ["required"] } }, { "kind": "attribute", "name": "rows", "expression": "rows", "expressionPlan": { "source": "rows", "ast": { "kind": "id", "name": "rows" }, "dependencies": ["rows"] } }], "children": [] }, "declarations": [], "root": { "kind": "native", "element": "textarea", "choices": ["textarea"] } }, source: { file: import.meta.url }, css: "" };
+function createUiTextarea(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("textarea");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = componentProps["value"] === void 0 ? void 0 : componentProps["value"];
+  if (value0 === null || value0 === void 0) element.removeAttribute("value");
+  else element.setAttribute("value", String(value0));
+  const value1 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  if (value1 === true) element.setAttribute("disabled", "");
+  else element.removeAttribute("disabled");
+  const value2 = componentProps["readonly"] === void 0 ? false : componentProps["readonly"];
+  if (value2 === true) element.setAttribute("readonly", "");
+  else element.removeAttribute("readonly");
+  const value3 = componentProps["required"] === void 0 ? false : componentProps["required"];
+  if (value3 === true) element.setAttribute("required", "");
+  else element.removeAttribute("required");
+  const value4 = componentProps["rows"] === void 0 ? 4 : componentProps["rows"];
+  if (value4 === null || value4 === void 0) element.removeAttribute("rows");
+  else element.setAttribute("rows", String(value4));
+  element.setAttribute("data-component", "ui-textarea");
+  element.setAttribute("data-component-root", "ui-textarea");
+  attachLoomaComponent24(element, definition24, "ui-textarea", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiToastRegion.js
+import { attachLoomaComponent as attachLoomaComponent25 } from "@threadlabs/looma/core/declarative";
+var definition25 = { ...{ "contract": { "tag": "ui-toast-region", "props": { "auto": { "type": "boolean", "required": false, "target": { "attribute": "auto" }, "default": false }, "duration": { "type": "number", "required": false, "target": { "attribute": "duration" }, "default": 5e3 }, "message": { "type": "string", "required": false, "target": { "attribute": "message" }, "default": "Notification" }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "role", "value": "region" }, { "kind": "literal", "name": "aria-label", "value": "Notifications" }, { "kind": "literal", "name": "aria-live", "value": "polite" }, { "kind": "attribute", "name": "data-state-open", "expression": "internalOpen", "expressionPlan": { "source": "internalOpen", "ast": { "kind": "id", "name": "internalOpen" }, "dependencies": ["internalOpen"] } }], "children": [{ "kind": "slot" }] }, "declarations": [{ "kind": "state", "name": "internalOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "close", "type": "object({ open: boolean, reason: action | timeout | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "dismiss", "type": "object({ id: string, reason: action | timeout, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "method", "name": "show", "exportName": "show", "returns": "promise(string)" }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiToastRegion(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("role", "region");
+  element.setAttribute("aria-label", "Notifications");
+  element.setAttribute("aria-live", "polite");
+  element.setAttribute("data-component", "ui-toast-region");
+  element.setAttribute("data-component-root", "ui-toast-region");
+  if (children.length > 0) {
+    for (const child of children) element.append(child);
+  } else {
+  }
+  attachLoomaComponent25(element, definition25, "ui-toast-region", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiTooltip.js
+import { attachLoomaComponent as attachLoomaComponent26 } from "@threadlabs/looma/core/declarative";
+var definition26 = { ...{ "contract": { "tag": "ui-tooltip", "props": { "for": { "type": "string", "required": false, "target": { "attribute": "for" }, "default": "" }, "hideDelay": { "type": "number", "required": false, "target": { "attribute": "hidedelay" }, "default": 100 }, "inverse": { "type": "boolean", "required": false, "target": { "attribute": "data-inverse" }, "default": false }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false }, "placement": { "type": "string", "required": false, "target": { "attribute": "placement" }, "default": "top-start" }, "showDelay": { "type": "number", "required": false, "target": { "attribute": "showdelay" }, "default": 500 } } }, "template": { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "role", "value": "tooltip" }, { "kind": "attribute", "name": "hidden", "expression": "not internalOpen", "expressionPlan": { "source": "not internalOpen", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "internalOpen" } }, "dependencies": ["internalOpen"] } }, { "kind": "attribute", "name": "data-state-open", "expression": "internalOpen", "expressionPlan": { "source": "internalOpen", "ast": { "kind": "id", "name": "internalOpen" }, "dependencies": ["internalOpen"] } }, { "kind": "attribute", "name": "data-inverse", "expression": "inverse", "expressionPlan": { "source": "inverse", "ast": { "kind": "id", "name": "inverse" }, "dependencies": ["inverse"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "tooltip__surface" }], "children": [{ "kind": "slot" }] }] }, "declarations": [{ "kind": "state", "name": "internalOpen", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "open", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "close", "type": "object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "span", "choices": ["span"] } }, source: { file: import.meta.url }, css: "" };
+function createUiTooltip(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("span");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("role", "tooltip");
+  const value0 = componentProps["inverse"] === void 0 ? false : componentProps["inverse"];
+  if (value0 === true) element.setAttribute("data-inverse", "");
+  else element.removeAttribute("data-inverse");
+  element.setAttribute("data-component", "ui-tooltip");
+  element.setAttribute("data-component-root", "ui-tooltip");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "tooltip__surface");
+  element0.setAttribute("data-component", "ui-tooltip");
+  if (children.length > 0) {
+    for (const child of children) element0.append(child);
+  } else {
+  }
+  element.append(element0);
+  attachLoomaComponent26(element, definition26, "ui-tooltip", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiTopBar.js
+import { attachLoomaComponent as attachLoomaComponent27 } from "@threadlabs/looma/core/declarative";
+var definition27 = { ...{ "contract": { "tag": "ui-top-bar", "props": {} }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [{ "kind": "element", "name": "header", "attributes": [{ "kind": "literal", "name": "class", "value": "top-bar" }, { "kind": "literal", "name": "part", "value": "base" }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "top-bar__leading" }, { "kind": "attribute", "name": "hidden", "expression": "not hasLeading", "expressionPlan": { "source": "not hasLeading", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "hasLeading" } }, "dependencies": ["hasLeading"] } }], "children": [{ "kind": "slot", "fallback": [], "name": "leading" }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "top-bar__title" }], "children": [{ "kind": "slot" }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "top-bar__search" }, { "kind": "attribute", "name": "hidden", "expression": "not hasSearch", "expressionPlan": { "source": "not hasSearch", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "hasSearch" } }, "dependencies": ["hasSearch"] } }], "children": [{ "kind": "slot", "fallback": [], "name": "search" }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "top-bar__actions" }, { "kind": "attribute", "name": "hidden", "expression": "not hasActions", "expressionPlan": { "source": "not hasActions", "ast": { "kind": "unary", "op": "not", "operand": { "kind": "id", "name": "hasActions" } }, "dependencies": ["hasActions"] } }], "children": [{ "kind": "slot", "fallback": [], "name": "actions" }] }] }] }, "declarations": [{ "kind": "state", "name": "hasLeading", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "hasSearch", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "hasActions", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiTopBar(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-top-bar");
+  element.setAttribute("data-component-root", "ui-top-bar");
+  const element0 = document.createElement("header");
+  element0.setAttribute("class", "top-bar");
+  element0.setAttribute("part", "base");
+  element0.setAttribute("data-component", "ui-top-bar");
+  const element1 = document.createElement("div");
+  element1.setAttribute("class", "top-bar__leading");
+  element1.setAttribute("data-component", "ui-top-bar");
+  if (slots["leading"] ?? [].length > 0) {
+    for (const child of slots["leading"] ?? []) element1.append(child);
+  } else {
+  }
+  element0.append(element1);
+  const element2 = document.createElement("div");
+  element2.setAttribute("class", "top-bar__title");
+  element2.setAttribute("data-component", "ui-top-bar");
+  if (children.length > 0) {
+    for (const child of children) element2.append(child);
+  } else {
+  }
+  element0.append(element2);
+  const element3 = document.createElement("div");
+  element3.setAttribute("class", "top-bar__search");
+  element3.setAttribute("data-component", "ui-top-bar");
+  if (slots["search"] ?? [].length > 0) {
+    for (const child of slots["search"] ?? []) element3.append(child);
+  } else {
+  }
+  element0.append(element3);
+  const element4 = document.createElement("div");
+  element4.setAttribute("class", "top-bar__actions");
+  element4.setAttribute("data-component", "ui-top-bar");
+  if (slots["actions"] ?? [].length > 0) {
+    for (const child of slots["actions"] ?? []) element4.append(child);
+  } else {
+  }
+  element0.append(element4);
+  element.append(element0);
+  attachLoomaComponent27(element, definition27, "ui-top-bar", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiTreeItem.js
+import { attachLoomaComponent as attachLoomaComponent28 } from "@threadlabs/looma/core/declarative";
+var definition28 = { ...{ "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": "disabled" }, "default": false }, "dragType": { "type": "string", "required": false, "target": { "attribute": "dragtype" }, "default": "item" }, "dropDepth": { "type": "number", "required": false, "target": { "attribute": "dropdepth" } }, "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": "itemid" }, "default": "" }, "label": { "type": "string", "required": false, "target": { "attribute": "label" }, "default": "" }, "selected": { "type": "boolean", "required": false, "target": { "attribute": "selected" }, "default": false }, "sortable": { "type": "boolean", "required": false, "target": { "attribute": "sortable" }, "default": false }, "subtreeDepth": { "type": "number", "required": false, "target": { "attribute": "subtreedepth" } } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "role", "value": "treeitem" }, { "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"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "row" }, { "kind": "literal", "name": "part", "value": "row" }], "children": [{ "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "class", "value": "drag-handle" }, { "kind": "literal", "name": "part", "value": "drag-handle" }, { "kind": "literal", "name": "type", "value": "button" }], "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"] } } }, { "kind": "element", "name": "button", "attributes": [{ "kind": "literal", "name": "class", "value": "disclosure" }, { "kind": "literal", "name": "part", "value": "disclosure" }, { "kind": "literal", "name": "type", "value": "button" }, { "kind": "attribute", "name": "disabled", "expression": "disabled", "expressionPlan": { "source": "disabled", "ast": { "kind": "id", "name": "disabled" }, "dependencies": ["disabled"] } }], "children": [{ "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "disclosure-icon" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [] }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "leading" }, { "kind": "literal", "name": "part", "value": "leading" }], "children": [{ "kind": "slot", "fallback": [], "name": "leading" }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "label" }, { "kind": "literal", "name": "part", "value": "label" }], "children": [] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "actions" }, { "kind": "literal", "name": "part", "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": "part", "value": "drop-indicator" }, { "kind": "literal", "name": "aria-hidden", "value": "true" }], "children": [] }] }, { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "children" }, { "kind": "literal", "name": "part", "value": "children" }, { "kind": "literal", "name": "role", "value": "group" }], "children": [{ "kind": "slot" }] }, { "kind": "element", "name": "span", "attributes": [{ "kind": "literal", "name": "class", "value": "drop-indicator subtree-drop-indicator" }, { "kind": "literal", "name": "part", "value": "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": "hasChildren", "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: "" };
+function createUiTreeItem(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("role", "treeitem");
+  const value0 = componentProps["dropScope"] === void 0 ? "" : componentProps["dropScope"];
+  if (value0 === null || value0 === void 0) element.removeAttribute("data-drop-scope");
+  else element.setAttribute("data-drop-scope", String(value0));
+  const value1 = componentProps["accepts"] === void 0 ? "" : componentProps["accepts"];
+  if (value1 === null || value1 === void 0) element.removeAttribute("data-accepts");
+  else element.setAttribute("data-accepts", String(value1));
+  element.setAttribute("data-component", "ui-tree-item");
+  element.setAttribute("data-component-root", "ui-tree-item");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "row");
+  element0.setAttribute("part", "row");
+  element0.setAttribute("data-component", "ui-tree-item");
+  const element1 = document.createElement("button");
+  element1.setAttribute("class", "drag-handle");
+  element1.setAttribute("part", "drag-handle");
+  element1.setAttribute("type", "button");
+  element1.setAttribute("data-component", "ui-tree-item");
+  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");
+  element2.setAttribute("data-component", "ui-tree-item");
+  const element3 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  element3.setAttribute("cx", "9");
+  element3.setAttribute("cy", "12");
+  element3.setAttribute("r", "1");
+  element3.setAttribute("data-component", "ui-tree-item");
+  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");
+  element4.setAttribute("data-component", "ui-tree-item");
+  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");
+  element5.setAttribute("data-component", "ui-tree-item");
+  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");
+  element6.setAttribute("data-component", "ui-tree-item");
+  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");
+  element7.setAttribute("data-component", "ui-tree-item");
+  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");
+  element8.setAttribute("data-component", "ui-tree-item");
+  element2.append(element8);
+  element1.append(element2);
+  element0.append(element1);
+  const element9 = document.createElement("button");
+  element9.setAttribute("class", "disclosure");
+  element9.setAttribute("part", "disclosure");
+  element9.setAttribute("type", "button");
+  const value2 = componentProps["disabled"] === void 0 ? false : componentProps["disabled"];
+  if (value2 === true) element9.setAttribute("disabled", "");
+  else element9.removeAttribute("disabled");
+  element9.setAttribute("data-component", "ui-tree-item");
+  const element10 = document.createElement("span");
+  element10.setAttribute("class", "disclosure-icon");
+  element10.setAttribute("aria-hidden", "true");
+  element10.setAttribute("data-component", "ui-tree-item");
+  element9.append(element10);
+  element0.append(element9);
+  const element11 = document.createElement("span");
+  element11.setAttribute("class", "leading");
+  element11.setAttribute("part", "leading");
+  element11.setAttribute("data-component", "ui-tree-item");
+  if (slots["leading"] ?? [].length > 0) {
+    for (const child of slots["leading"] ?? []) element11.append(child);
+  } else {
+  }
+  element0.append(element11);
+  const element12 = document.createElement("span");
+  element12.setAttribute("class", "label");
+  element12.setAttribute("part", "label");
+  element12.setAttribute("data-component", "ui-tree-item");
+  element0.append(element12);
+  const element13 = document.createElement("span");
+  element13.setAttribute("class", "actions");
+  element13.setAttribute("part", "actions");
+  element13.setAttribute("data-component", "ui-tree-item");
+  if (slots["actions"] ?? [].length > 0) {
+    for (const child of slots["actions"] ?? []) element13.append(child);
+  } else {
+  }
+  element0.append(element13);
+  const element14 = document.createElement("span");
+  element14.setAttribute("class", "drop-indicator row-drop-indicator");
+  element14.setAttribute("part", "drop-indicator");
+  element14.setAttribute("aria-hidden", "true");
+  element14.setAttribute("data-component", "ui-tree-item");
+  element0.append(element14);
+  element.append(element0);
+  const element15 = document.createElement("div");
+  element15.setAttribute("class", "children");
+  element15.setAttribute("part", "children");
+  element15.setAttribute("role", "group");
+  element15.setAttribute("data-component", "ui-tree-item");
+  if (children.length > 0) {
+    for (const child of children) element15.append(child);
+  } else {
+  }
+  element.append(element15);
+  const element16 = document.createElement("span");
+  element16.setAttribute("class", "drop-indicator subtree-drop-indicator");
+  element16.setAttribute("part", "drop-indicator");
+  element16.setAttribute("aria-hidden", "true");
+  element16.setAttribute("data-component", "ui-tree-item");
+  element.append(element16);
+  attachLoomaComponent28(element, definition28, "ui-tree-item", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiTree.js
+import { attachLoomaComponent as attachLoomaComponent29 } from "@threadlabs/looma/core/declarative";
+var definition29 = { ...{ "contract": { "tag": "ui-tree", "props": { "hoverExpandDelay": { "type": "number", "required": false, "target": { "attribute": "hoverexpanddelay" }, "default": 700 }, "label": { "type": "string", "required": false, "target": { "attribute": "label" }, "default": "Tree" }, "maxDepth": { "type": "number", "required": false, "target": { "attribute": "maxdepth" }, "default": 0 } } }, "template": { "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "role", "value": "tree" }], "children": [{ "kind": "slot" }] }, "declarations": [{ "kind": "event", "name": "reorder", "type": "object({ sourceId: string, targetId: string, position: before | inside | after, sourceType: string, targetType: string, sourceScope: string, targetScope: string, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "reorder-rejected", "type": "object({ sourceId: string, targetId: string, position: before | inside | after, reason: max-depth, maxDepth: integer, resultingDepth: integer, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiTree(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("role", "tree");
+  element.setAttribute("data-component", "ui-tree");
+  element.setAttribute("data-component-root", "ui-tree");
+  if (children.length > 0) {
+    for (const child of children) element.append(child);
+  } else {
+  }
+  attachLoomaComponent29(element, definition29, "ui-tree", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiCluster.js
+import { manageGeneratedProps as manageGeneratedProps3 } from "@threadlabs/looma/core/declarative-generated";
+function createUiCluster(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const prop0 = componentProps["align"] === void 0 ? void 0 : componentProps["align"];
+  const prop1 = componentProps["gap"] === void 0 ? void 0 : componentProps["gap"];
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-cluster");
+  element.setAttribute("data-component-root", "ui-cluster");
+  if (children.length > 0) {
+    for (const child of children) element.append(child);
+  } else {
+  }
+  manageGeneratedProps3(element, [
+    { name: "align", attribute: "data-align", value: componentProps["align"], type: ["start", "center", "end", "stretch"], required: false },
+    { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["xs", "s", "m", "l", "xl"], required: false }
+  ]);
+  return element;
+}
+
+// src/generated/vanilla/UiContainer.js
+import { manageGeneratedProps as manageGeneratedProps4 } from "@threadlabs/looma/core/declarative-generated";
+function createUiContainer(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const prop0 = componentProps["gutters"] === void 0 ? void 0 : componentProps["gutters"];
+  const prop1 = componentProps["measure"] === void 0 ? void 0 : componentProps["measure"];
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-container");
+  element.setAttribute("data-component-root", "ui-container");
+  if (children.length > 0) {
+    for (const child of children) element.append(child);
+  } else {
+  }
+  manageGeneratedProps4(element, [
+    { name: "gutters", attribute: "data-gutters", value: componentProps["gutters"], type: ["s", "m", "l"], required: false },
+    { name: "measure", attribute: "data-measure", value: componentProps["measure"], type: ["narrow", "wide"], required: false }
+  ]);
+  return element;
+}
+
+// src/generated/vanilla/UiGrid.js
+import { manageGeneratedProps as manageGeneratedProps5 } from "@threadlabs/looma/core/declarative-generated";
+function createUiGrid(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const prop0 = componentProps["gap"] === void 0 ? void 0 : componentProps["gap"];
+  const prop1 = componentProps["min"] === void 0 ? void 0 : componentProps["min"];
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-grid");
+  element.setAttribute("data-component-root", "ui-grid");
+  if (children.length > 0) {
+    for (const child of children) element.append(child);
+  } else {
+  }
+  manageGeneratedProps5(element, [
+    { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["xs", "s", "m", "l", "xl"], required: false },
+    { name: "min", attribute: "data-min", value: componentProps["min"], type: ["sm", "md", "lg"], required: false }
+  ]);
+  return element;
+}
+
+// src/generated/vanilla/UiReel.js
+import { attachLoomaComponent as attachLoomaComponent30 } from "@threadlabs/looma/core/declarative";
+var definition30 = { ...{ "contract": { "tag": "ui-reel", "props": { "gap": { "type": { "enum": ["xs", "s", "m", "l", "xl"] }, "required": false, "target": { "attribute": "gap" } }, "itemWidth": { "type": { "enum": ["sm", "md", "lg"] }, "required": false, "target": { "attribute": "itemwidth" } }, "snap": { "type": { "enum": ["start", "center"] }, "required": false, "target": { "attribute": "snap" } } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [{ "kind": "slot" }] }, "declarations": [], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiReel(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-reel");
+  element.setAttribute("data-component-root", "ui-reel");
+  if (children.length > 0) {
+    for (const child of children) element.append(child);
+  } else {
+  }
+  attachLoomaComponent30(element, definition30, "ui-reel", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiSeparator.js
+import { attachLoomaComponent as attachLoomaComponent31 } from "@threadlabs/looma/core/declarative";
+var definition31 = { ...{ "contract": { "tag": "ui-separator", "props": { "orientation": { "type": { "enum": ["horizontal", "vertical"] }, "required": false, "target": { "attribute": "orientation" }, "default": "horizontal" } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [{ "kind": "slot" }] }, "declarations": [], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiSeparator(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-separator");
+  element.setAttribute("data-component-root", "ui-separator");
+  if (children.length > 0) {
+    for (const child of children) element.append(child);
+  } else {
+  }
+  attachLoomaComponent31(element, definition31, "ui-separator", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiSidebar.js
+import { attachLoomaComponent as attachLoomaComponent32 } from "@threadlabs/looma/core/declarative";
+var definition32 = { ...{ "contract": { "tag": "ui-sidebar", "props": { "breakpoint": { "type": { "enum": ["sm", "md", "lg"] }, "required": false, "target": { "attribute": "breakpoint" }, "default": "md" }, "collapsed": { "type": "boolean", "required": false, "target": { "attribute": "collapsed" }, "default": false }, "maxWidth": { "type": "number", "required": false, "target": { "attribute": "maxwidth" }, "default": 480 }, "minWidth": { "type": "number", "required": false, "target": { "attribute": "minwidth" }, "default": 200 }, "resizable": { "type": "boolean", "required": false, "target": { "attribute": "resizable" }, "default": false }, "resizeLabel": { "type": "string", "required": false, "target": { "attribute": "resizelabel" }, "default": "Resize sidebar" }, "resizeStep": { "type": "number", "required": false, "target": { "attribute": "resizestep" }, "default": 16 }, "side": { "type": { "enum": ["start", "end"] }, "required": false, "target": { "attribute": "side" }, "default": "start" }, "width": { "type": "number", "required": false, "target": { "attribute": "width" }, "default": 0 } } }, "template": { "kind": "element", "name": "aside", "attributes": [{ "kind": "attribute", "name": "data-state-collapsed", "expression": "internalCollapsed", "expressionPlan": { "source": "internalCollapsed", "ast": { "kind": "id", "name": "internalCollapsed" }, "dependencies": ["internalCollapsed"] } }, { "kind": "attribute", "name": "data-state-drawer", "expression": "drawer", "expressionPlan": { "source": "drawer", "ast": { "kind": "id", "name": "drawer" }, "dependencies": ["drawer"] } }], "children": [{ "kind": "element", "name": "div", "attributes": [{ "kind": "literal", "name": "class", "value": "sidebar__content" }], "children": [{ "kind": "slot" }] }] }, "declarations": [{ "kind": "state", "name": "internalCollapsed", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "state", "name": "drawer", "expression": { "source": "false", "ast": { "kind": "literal", "value": false }, "dependencies": [] } }, { "kind": "event", "name": "resize", "type": "object({ width: number, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "toggle", "type": "object({ open: boolean, mode: docked | drawer, trigger: keyboard | pointer | programmatic })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "aside", "choices": ["aside"] } }, source: { file: import.meta.url }, css: "" };
+function createUiSidebar(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("aside");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-sidebar");
+  element.setAttribute("data-component-root", "ui-sidebar");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "sidebar__content");
+  element0.setAttribute("data-component", "ui-sidebar");
+  if (children.length > 0) {
+    for (const child of children) element0.append(child);
+  } else {
+  }
+  element.append(element0);
+  attachLoomaComponent32(element, definition32, "ui-sidebar", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiStack.js
+import { manageGeneratedProps as manageGeneratedProps6 } from "@threadlabs/looma/core/declarative-generated";
+function createUiStack(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const prop0 = componentProps["align"] === void 0 ? void 0 : componentProps["align"];
+  const prop1 = componentProps["gap"] === void 0 ? void 0 : componentProps["gap"];
+  const prop2 = componentProps["justify"] === void 0 ? void 0 : componentProps["justify"];
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-stack");
+  element.setAttribute("data-component-root", "ui-stack");
+  if (children.length > 0) {
+    for (const child of children) element.append(child);
+  } else {
+  }
+  manageGeneratedProps6(element, [
+    { name: "align", attribute: "data-align", value: componentProps["align"], type: ["start", "center", "end", "stretch"], required: false },
+    { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["xs", "s", "m", "l", "xl"], required: false },
+    { name: "justify", attribute: "data-justify", value: componentProps["justify"], type: ["start", "center", "end", "between"], required: false }
+  ]);
+  return element;
+}
+
+// src/generated/vanilla/UiSwitcher.js
+import { manageGeneratedProps as manageGeneratedProps7 } from "@threadlabs/looma/core/declarative-generated";
+function createUiSwitcher(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const prop0 = componentProps["align"] === void 0 ? void 0 : componentProps["align"];
+  const prop1 = componentProps["gap"] === void 0 ? void 0 : componentProps["gap"];
+  const prop2 = componentProps["threshold"] === void 0 ? void 0 : componentProps["threshold"];
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-switcher");
+  element.setAttribute("data-component-root", "ui-switcher");
+  if (children.length > 0) {
+    for (const child of children) element.append(child);
+  } else {
+  }
+  manageGeneratedProps7(element, [
+    { name: "align", attribute: "data-align", value: componentProps["align"], type: ["start", "center", "end", "stretch"], required: false },
+    { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["xs", "s", "m", "l", "xl"], required: false },
+    { name: "threshold", attribute: "data-threshold", value: componentProps["threshold"], type: ["xs", "sm", "md", "lg"], required: false }
+  ]);
+  return element;
+}
+
+// src/generated/vanilla/UiEditorInsertTableGrid.js
+import { attachLoomaComponent as attachLoomaComponent33 } from "@threadlabs/looma/core/declarative";
+var definition33 = { ...{ "contract": { "tag": "ui-editor-insert-table-grid", "props": { "headerRow": { "type": "boolean", "required": false, "target": { "attribute": "headerrow" }, "default": false }, "maxCols": { "type": { "kind": "terminal", "name": "integer" }, "required": false, "target": { "attribute": "maxcols" }, "default": 8 }, "maxRows": { "type": { "kind": "terminal", "name": "integer" }, "required": false, "target": { "attribute": "maxrows" }, "default": 8 }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [] }, "declarations": [{ "kind": "event", "name": "insert", "type": "object({ rows: integer, cols: integer, withHeaderRow: boolean })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiEditorInsertTableGrid(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-editor-insert-table-grid");
+  element.setAttribute("data-component-root", "ui-editor-insert-table-grid");
+  attachLoomaComponent33(element, definition33, "ui-editor-insert-table-grid", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiEditorMentionMenu.js
+import { attachLoomaComponent as attachLoomaComponent34 } from "@threadlabs/looma/core/declarative";
+var definition34 = { ...{ "contract": { "tag": "ui-editor-mention-menu", "props": { "anchorRect": { "type": { "kind": "union", "members": [{ "kind": "object", "fields": [{ "name": "left", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "top", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "right", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "bottom", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "x", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "y", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "width", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "height", "type": { "kind": "terminal", "name": "number" }, "optional": true }], "open": false }, { "kind": "terminal", "name": "null" }] }, "required": false, "target": { "attribute": "anchorrect" } }, "items": { "type": { "kind": "list", "item": { "kind": "object", "fields": [{ "name": "id", "type": { "kind": "terminal", "name": "string" }, "optional": false }, { "name": "label", "type": { "kind": "terminal", "name": "string" }, "optional": false }, { "name": "detail", "type": { "kind": "terminal", "name": "string" }, "optional": true }, { "name": "initials", "type": { "kind": "terminal", "name": "string" }, "optional": true }], "open": false } }, "required": false, "target": { "attribute": "items" } }, "loading": { "type": "boolean", "required": false, "target": { "attribute": "loading" }, "default": false }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false }, "query": { "type": "string", "required": false, "target": { "attribute": "query" }, "default": "" }, "selectedIndex": { "type": { "kind": "terminal", "name": "integer" }, "required": false, "target": { "attribute": "selectedindex" }, "default": 0 } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [] }, "declarations": [{ "kind": "event", "name": "highlight", "type": "object({ index: integer })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "select", "type": "object({ index: integer })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiEditorMentionMenu(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-editor-mention-menu");
+  element.setAttribute("data-component-root", "ui-editor-mention-menu");
+  attachLoomaComponent34(element, definition34, "ui-editor-mention-menu", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiEditorSlashMenu.js
+import { attachLoomaComponent as attachLoomaComponent35 } from "@threadlabs/looma/core/declarative";
+var definition35 = { ...{ "contract": { "tag": "ui-editor-slash-menu", "props": { "anchorRect": { "type": { "kind": "union", "members": [{ "kind": "object", "fields": [{ "name": "left", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "top", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "right", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "bottom", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "x", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "y", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "width", "type": { "kind": "terminal", "name": "number" }, "optional": true }, { "name": "height", "type": { "kind": "terminal", "name": "number" }, "optional": true }], "open": false }, { "kind": "terminal", "name": "null" }] }, "required": false, "target": { "attribute": "anchorrect" } }, "items": { "type": { "kind": "list", "item": { "kind": "object", "fields": [{ "name": "title", "type": { "kind": "terminal", "name": "string" }, "optional": false }, { "name": "description", "type": { "kind": "terminal", "name": "string" }, "optional": false }, { "name": "icon", "type": { "kind": "terminal", "name": "string" }, "optional": false }], "open": false } }, "required": false, "target": { "attribute": "items" } }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false }, "query": { "type": "string", "required": false, "target": { "attribute": "query" }, "default": "" }, "selectedIndex": { "type": { "kind": "terminal", "name": "integer" }, "required": false, "target": { "attribute": "selectedindex" }, "default": 0 } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [] }, "declarations": [{ "kind": "event", "name": "highlight", "type": "object({ index: integer })", "bubbles": true, "composed": true, "cancelable": false }, { "kind": "event", "name": "select", "type": "object({ index: integer })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiEditorSlashMenu(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-editor-slash-menu");
+  element.setAttribute("data-component-root", "ui-editor-slash-menu");
+  attachLoomaComponent35(element, definition35, "ui-editor-slash-menu", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiEditorTableContextMenu.js
+import { attachLoomaComponent as attachLoomaComponent36 } from "@threadlabs/looma/core/declarative";
+var definition36 = { ...{ "contract": { "tag": "ui-editor-table-context-menu", "props": { "actions": { "type": { "kind": "list", "item": { "kind": "union", "members": [{ "kind": "keyword", "value": "align-left" }, { "kind": "keyword", "value": "align-center" }, { "kind": "keyword", "value": "align-right" }, { "kind": "keyword", "value": "background-none" }, { "kind": "keyword", "value": "background-gray" }, { "kind": "keyword", "value": "background-yellow" }, { "kind": "keyword", "value": "background-blue" }, { "kind": "keyword", "value": "background-green" }, { "kind": "keyword", "value": "background-red" }, { "kind": "keyword", "value": "add-row-before" }, { "kind": "keyword", "value": "add-row-after" }, { "kind": "keyword", "value": "add-column-before" }, { "kind": "keyword", "value": "add-column-after" }, { "kind": "keyword", "value": "clear-cells" }, { "kind": "keyword", "value": "merge-cells" }, { "kind": "keyword", "value": "split-cell" }, { "kind": "keyword", "value": "delete-row" }, { "kind": "keyword", "value": "delete-column" }, { "kind": "keyword", "value": "delete-table" }] } }, "required": false, "target": { "attribute": "actions" } }, "cellBackground": { "type": "string", "required": false, "target": { "attribute": "cellbackground" }, "default": "" }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [] }, "declarations": [{ "kind": "event", "name": "action", "type": "object({ action: string })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiEditorTableContextMenu(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-editor-table-context-menu");
+  element.setAttribute("data-component-root", "ui-editor-table-context-menu");
+  attachLoomaComponent36(element, definition36, "ui-editor-table-context-menu", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiEditorTableOverlay.js
+import { attachLoomaComponent as attachLoomaComponent37 } from "@threadlabs/looma/core/declarative";
+var definition37 = { ...{ "contract": { "tag": "ui-editor-table-overlay", "props": { "geometry": { "type": { "kind": "union", "members": [{ "kind": "object", "fields": [{ "name": "rowBoundaries", "type": { "kind": "list", "item": { "kind": "terminal", "name": "number" } }, "optional": false }, { "name": "columnBoundaries", "type": { "kind": "list", "item": { "kind": "terminal", "name": "number" } }, "optional": false }, { "name": "activeCell", "type": { "kind": "union", "members": [{ "kind": "object", "fields": [{ "name": "left", "type": { "kind": "terminal", "name": "number" }, "optional": false }, { "name": "top", "type": { "kind": "terminal", "name": "number" }, "optional": false }, { "name": "width", "type": { "kind": "terminal", "name": "number" }, "optional": false }, { "name": "height", "type": { "kind": "terminal", "name": "number" }, "optional": false }, { "name": "rowIndex", "type": { "kind": "terminal", "name": "integer" }, "optional": false }, { "name": "columnIndex", "type": { "kind": "terminal", "name": "integer" }, "optional": false }], "open": false }, { "kind": "terminal", "name": "null" }] }, "optional": false }, { "name": "hoveredCell", "type": { "kind": "union", "members": [{ "kind": "object", "fields": [{ "name": "left", "type": { "kind": "terminal", "name": "number" }, "optional": false }, { "name": "top", "type": { "kind": "terminal", "name": "number" }, "optional": false }, { "name": "width", "type": { "kind": "terminal", "name": "number" }, "optional": false }, { "name": "height", "type": { "kind": "terminal", "name": "number" }, "optional": false }, { "name": "rowIndex", "type": { "kind": "terminal", "name": "integer" }, "optional": false }, { "name": "columnIndex", "type": { "kind": "terminal", "name": "integer" }, "optional": false }], "open": false }, { "kind": "terminal", "name": "null" }] }, "optional": true }], "open": false }, { "kind": "terminal", "name": "null" }] }, "required": false, "target": { "attribute": "geometry" } }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [] }, "declarations": [{ "kind": "event", "name": "action", "type": "object({ action: string, boundaryIndex?: integer, rowIndex?: integer, columnIndex?: integer, anchor?: object({ left: number, top: number, right: number, bottom: number }) })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiEditorTableOverlay(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-editor-table-overlay");
+  element.setAttribute("data-component-root", "ui-editor-table-overlay");
+  attachLoomaComponent37(element, definition37, "ui-editor-table-overlay", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiEditorTableToolbar.js
+import { attachLoomaComponent as attachLoomaComponent38 } from "@threadlabs/looma/core/declarative";
+var definition38 = { ...{ "contract": { "tag": "ui-editor-table-toolbar", "props": { "actions": { "type": { "kind": "list", "item": { "kind": "union", "members": [{ "kind": "keyword", "value": "align-left" }, { "kind": "keyword", "value": "align-center" }, { "kind": "keyword", "value": "align-right" }, { "kind": "keyword", "value": "background-none" }, { "kind": "keyword", "value": "background-gray" }, { "kind": "keyword", "value": "background-yellow" }, { "kind": "keyword", "value": "background-blue" }, { "kind": "keyword", "value": "background-green" }, { "kind": "keyword", "value": "background-red" }, { "kind": "keyword", "value": "add-row-before" }, { "kind": "keyword", "value": "add-row-after" }, { "kind": "keyword", "value": "add-column-before" }, { "kind": "keyword", "value": "add-column-after" }, { "kind": "keyword", "value": "clear-cells" }, { "kind": "keyword", "value": "merge-cells" }, { "kind": "keyword", "value": "split-cell" }, { "kind": "keyword", "value": "delete-row" }, { "kind": "keyword", "value": "delete-column" }, { "kind": "keyword", "value": "delete-table" }] } }, "required": false, "target": { "attribute": "actions" } }, "cellAlignment": { "type": { "enum": ["left", "center", "right"] }, "required": false, "target": { "attribute": "cellalignment" }, "default": "left" }, "cellBackground": { "type": "string", "required": false, "target": { "attribute": "cellbackground" }, "default": "" }, "open": { "type": "boolean", "required": false, "target": { "attribute": "open" }, "default": false } } }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [] }, "declarations": [{ "kind": "event", "name": "action", "type": "object({ action: string })", "bubbles": true, "composed": true, "cancelable": false }], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiEditorTableToolbar(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-editor-table-toolbar");
+  element.setAttribute("data-component-root", "ui-editor-table-toolbar");
+  attachLoomaComponent38(element, definition38, "ui-editor-table-toolbar", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/UiEditorToolbar.js
+import { attachLoomaComponent as attachLoomaComponent39 } from "@threadlabs/looma/core/declarative";
+var definition39 = { ...{ "contract": { "tag": "ui-editor-toolbar", "props": {} }, "template": { "kind": "element", "name": "div", "attributes": [], "children": [{ "kind": "slot" }] }, "declarations": [], "root": { "kind": "native", "element": "div", "choices": ["div"] } }, source: { file: import.meta.url }, css: "" };
+function createUiEditorToolbar(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === void 0 || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-editor-toolbar");
+  element.setAttribute("data-component-root", "ui-editor-toolbar");
+  if (children.length > 0) {
+    for (const child of children) element.append(child);
+  } else {
+  }
+  attachLoomaComponent39(element, definition39, "ui-editor-toolbar", componentProps);
+  return element;
+}
+
+// src/generated/vanilla/index.js
+var factoryByTag = Object.freeze({
+  "ui-affordance-scope": createUiAffordanceScope,
+  "ui-avatar-group": createUiAvatarGroup,
+  "ui-avatar": createUiAvatar,
+  "ui-badge": createUiBadge,
+  "ui-button": createUiButton,
+  "ui-callout": createUiCallout,
+  "ui-checkbox": createUiCheckbox,
+  "ui-combobox": createUiCombobox,
+  "ui-context-menu": createUiContextMenu,
+  "ui-dialog": createUiDialog,
+  "ui-disclosure": createUiDisclosure,
+  "ui-editable": createUiEditable,
+  "ui-form-field": createUiFormField,
+  "ui-icon-button": createUiIconButton,
+  "ui-input": createUiInput,
+  "ui-menu-item": createUiMenuItem,
+  "ui-menu": createUiMenu,
+  "ui-popover": createUiPopover,
+  "ui-radio-group": createUiRadioGroup,
+  "ui-radio": createUiRadio,
+  "ui-search-result-row": createUiSearchResultRow,
+  "ui-search-shell": createUiSearchShell,
+  "ui-select": createUiSelect,
+  "ui-switch": createUiSwitch,
+  "ui-tabs": createUiTabs,
+  "ui-textarea": createUiTextarea,
+  "ui-toast-region": createUiToastRegion,
+  "ui-tooltip": createUiTooltip,
+  "ui-top-bar": createUiTopBar,
+  "ui-tree-item": createUiTreeItem,
+  "ui-tree": createUiTree,
+  "ui-cluster": createUiCluster,
+  "ui-container": createUiContainer,
+  "ui-grid": createUiGrid,
+  "ui-reel": createUiReel,
+  "ui-separator": createUiSeparator,
+  "ui-sidebar": createUiSidebar,
+  "ui-stack": createUiStack,
+  "ui-switcher": createUiSwitcher,
+  "ui-editor-insert-table-grid": createUiEditorInsertTableGrid,
+  "ui-editor-mention-menu": createUiEditorMentionMenu,
+  "ui-editor-slash-menu": createUiEditorSlashMenu,
+  "ui-editor-table-context-menu": createUiEditorTableContextMenu,
+  "ui-editor-table-overlay": createUiEditorTableOverlay,
+  "ui-editor-table-toolbar": createUiEditorTableToolbar,
+  "ui-editor-toolbar": createUiEditorToolbar
+});
+
+// src/index.ts
+function applyProps(node, props) {
+  for (const [name, value] of Object.entries(props)) {
+    if (name in node || typeof value === "object") {
+      node[name] = value;
+      continue;
+    }
+    if (value === null || value === void 0 || value === false) {
+      node.removeAttribute(name);
+    } else {
+      node.setAttribute(name, value === true ? "" : String(value));
+    }
+  }
+}
+function bindEvents(node, handlers) {
+  const listeners = [
+    ["open", handlers.onOpen && ((event) => handlers.onOpen?.(event.detail))],
+    ["close", handlers.onClose && ((event) => handlers.onClose?.(event.detail))],
+    ["select", handlers.onSelect && ((event) => handlers.onSelect?.(event.detail))],
+    ["change", handlers.onChange && ((event) => handlers.onChange?.(event.detail))],
+    ["dismiss", handlers.onDismiss && ((event) => handlers.onDismiss?.(event.detail))]
+  ];
+  for (const [eventName, listener] of listeners) if (listener) node.addEventListener(eventName, listener);
+  return () => {
+    for (const [eventName, listener] of listeners) if (listener) node.removeEventListener(eventName, listener);
+  };
+}
+function bindAdapter(node, options = {}) {
+  applyProps(node, options.props ?? {});
+  let cleanup = bindEvents(node, options);
+  return {
+    update(updatedOptions = {}) {
+      cleanup();
+      applyProps(node, updatedOptions.props ?? {});
+      cleanup = bindEvents(node, updatedOptions);
+    },
+    destroy() {
+      cleanup();
+    }
+  };
+}
+function createAdapterElement(tagName, options = {}) {
+  const factory = factoryByTag[tagName];
+  const factoryOptions = { ...options.props ?? {} };
+  if (options.attributes !== void 0) factoryOptions.attributes = options.attributes;
+  if (options.children !== void 0) factoryOptions.children = options.children;
+  if (options.slots !== void 0) factoryOptions.slots = options.slots;
+  const element = factory(factoryOptions);
+  bindEvents(element, options);
+  return element;
+}
+var ADAPTER_COMPONENT_TAG_MAP = {
+  AffordanceScope: "ui-affordance-scope",
+  AvatarGroup: "ui-avatar-group",
+  Avatar: "ui-avatar",
+  Badge: "ui-badge",
+  Button: "ui-button",
+  Callout: "ui-callout",
+  Checkbox: "ui-checkbox",
+  Combobox: "ui-combobox",
+  ContextMenu: "ui-context-menu",
+  Dialog: "ui-dialog",
+  Disclosure: "ui-disclosure",
+  Editable: "ui-editable",
+  FormField: "ui-form-field",
+  IconButton: "ui-icon-button",
+  Input: "ui-input",
+  MenuItem: "ui-menu-item",
+  Menu: "ui-menu",
+  Popover: "ui-popover",
+  RadioGroup: "ui-radio-group",
+  Radio: "ui-radio",
+  SearchResultRow: "ui-search-result-row",
+  SearchShell: "ui-search-shell",
+  Select: "ui-select",
+  Switch: "ui-switch",
+  Tabs: "ui-tabs",
+  Textarea: "ui-textarea",
+  ToastRegion: "ui-toast-region",
+  Tooltip: "ui-tooltip",
+  TopBar: "ui-top-bar",
+  TreeItem: "ui-tree-item",
+  Tree: "ui-tree",
+  EditorInsertTableGrid: "ui-editor-insert-table-grid",
+  EditorMentionMenu: "ui-editor-mention-menu",
+  EditorSlashMenu: "ui-editor-slash-menu",
+  EditorTableContextMenu: "ui-editor-table-context-menu",
+  EditorTableOverlay: "ui-editor-table-overlay",
+  EditorTableToolbar: "ui-editor-table-toolbar",
+  EditorToolbar: "ui-editor-toolbar",
+  Container: "ui-container",
+  Grid: "ui-grid",
+  Cluster: "ui-cluster",
+  Reel: "ui-reel",
+  Separator: "ui-separator",
+  Sidebar: "ui-sidebar",
+  Stack: "ui-stack",
+  Switcher: "ui-switcher"
+};
+var SVELTE_ADAPTER_NOTE = "Native-root adapter: factories and bindAdapter project the framework-neutral Looma declarative contract into Svelte.";
+export {
+  ADAPTER_COMPONENT_TAG_MAP,
+  SVELTE_ADAPTER_NOTE,
+  bindAdapter,
+  createAdapterElement,
+  createUiAffordanceScope,
+  createUiAvatar,
+  createUiAvatarGroup,
+  createUiBadge,
+  createUiButton,
+  createUiCallout,
+  createUiCheckbox,
+  createUiCluster,
+  createUiCombobox,
+  createUiContainer,
+  createUiContextMenu,
+  createUiDialog,
+  createUiDisclosure,
+  createUiEditable,
+  createUiEditorInsertTableGrid,
+  createUiEditorMentionMenu,
+  createUiEditorSlashMenu,
+  createUiEditorTableContextMenu,
+  createUiEditorTableOverlay,
+  createUiEditorTableToolbar,
+  createUiEditorToolbar,
+  createUiFormField,
+  createUiGrid,
+  createUiIconButton,
+  createUiInput,
+  createUiMenu,
+  createUiMenuItem,
+  createUiPopover,
+  createUiRadio,
+  createUiRadioGroup,
+  createUiReel,
+  createUiSearchResultRow,
+  createUiSearchShell,
+  createUiSelect,
+  createUiSeparator,
+  createUiSidebar,
+  createUiStack,
+  createUiSwitch,
+  createUiSwitcher,
+  createUiTabs,
+  createUiTextarea,
+  createUiToastRegion,
+  createUiTooltip,
+  createUiTopBar,
+  createUiTree,
+  createUiTreeItem,
+  factoryByTag
+};