@threadlabs/looma 0.2.4 → 0.2.6

package/dist/chunk-3K45IWIJ.js

@@ -0,0 +1,4733 @@
+import {
+  __export
+} from "./chunk-MLKGABMK.js";
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-affordance-scope.js
+var ui_affordance_scope_exports = {};
+__export(ui_affordance_scope_exports, {
+  default: () => controller
+});
+function distance(point, rect) {
+  const dx = Math.max(rect.left - point.x, 0, point.x - rect.right);
+  const dy = Math.max(rect.top - point.y, 0, point.y - rect.bottom);
+  return Math.hypot(dx, dy);
+}
+function controller(host) {
+  const element = host.element;
+  const owner = element.ownerDocument.defaultView;
+  let anchors = [];
+  let frame = null;
+  let point = null;
+  let dirty = false;
+  let nearRadius = Number(host.state.nearRadius ?? 16);
+  const clear = () => {
+    for (const anchor of anchors) anchor.element.removeAttribute("data-ui-proximity");
+    element.removeAttribute("data-ui-interaction");
+  };
+  const measure = () => {
+    anchors = Array.from(element.querySelectorAll("[data-ui-affordance]")).filter((anchor) => !anchor.hasAttribute("disabled") && anchor.getAttribute("aria-disabled") !== "true").map((anchor) => ({ element: anchor, rect: anchor.getBoundingClientRect() }));
+    dirty = false;
+  };
+  const update = () => {
+    frame = null;
+    if (dirty) measure();
+    if (!point) {
+      clear();
+      return;
+    }
+    let engaged = false;
+    for (const anchor of anchors) {
+      const near = distance(point, anchor.rect) <= nearRadius;
+      anchor.element.toggleAttribute("data-ui-proximity", near);
+      if (near) anchor.element.setAttribute("data-ui-proximity", "near");
+      engaged ||= near;
+    }
+    if (engaged) element.setAttribute("data-ui-interaction", "engaged");
+    else element.removeAttribute("data-ui-interaction");
+  };
+  const schedule = () => {
+    if (frame === null) frame = owner.requestAnimationFrame(update);
+  };
+  const invalidate = () => {
+    dirty = true;
+    schedule();
+  };
+  const onPointermove = (event) => {
+    point = event.pointerType === "touch" ? null : { x: event.clientX, y: event.clientY };
+    schedule();
+  };
+  const observer = new MutationObserver(invalidate);
+  observer.observe(element, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-ui-affordance", "disabled", "aria-disabled"] });
+  element.addEventListener("pointermove", onPointermove, { passive: true });
+  owner.addEventListener("resize", invalidate, { passive: true });
+  owner.addEventListener("scroll", invalidate, { passive: true, capture: true });
+  owner.visualViewport?.addEventListener("resize", invalidate, { passive: true });
+  owner.visualViewport?.addEventListener("scroll", invalidate, { passive: true });
+  const stop = host.effect(() => {
+    const configured = Number(host.state.nearRadius ?? 16);
+    nearRadius = Number.isFinite(configured) ? Math.max(0, configured) : 16;
+    invalidate();
+  });
+  measure();
+  return () => {
+    stop();
+    observer.disconnect();
+    element.removeEventListener("pointermove", onPointermove);
+    owner.removeEventListener("resize", invalidate);
+    owner.removeEventListener("scroll", invalidate, true);
+    owner.visualViewport?.removeEventListener("resize", invalidate);
+    owner.visualViewport?.removeEventListener("scroll", invalidate);
+    if (frame !== null) owner.cancelAnimationFrame(frame);
+    clear();
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-avatar-group.js
+var ui_avatar_group_exports = {};
+__export(ui_avatar_group_exports, {
+  default: () => controller2
+});
+function controller2(host) {
+  const el = host.element;
+  const limit = () => {
+    const m = Number(host.state.max);
+    return Number.isFinite(m) ? Math.max(0, Math.floor(m)) : 0;
+  };
+  const update = () => {
+    const children = [...el.children].filter((c) => !c.hasAttribute("data-ui-avatar-group-overflow"));
+    const visible = limit();
+    children.forEach((c, i) => {
+      c.style.display = i >= visible ? "none" : "";
+    });
+    const overflow = children.length > visible ? children.length - visible : 0;
+    let badge = el.querySelector("[data-ui-avatar-group-overflow]");
+    if (overflow > 0) {
+      if (badge === null) {
+        badge = el.ownerDocument.createElement("span");
+        badge.className = "overflow";
+        badge.setAttribute("role", "img");
+        badge.setAttribute("data-ui-avatar-group-overflow", "");
+        el.appendChild(badge);
+      }
+      badge.textContent = `+${overflow}`;
+      badge.setAttribute("aria-label", `${overflow} more ${overflow === 1 ? "person" : "people"}`);
+    } else if (badge !== null) {
+      badge.remove();
+    }
+  };
+  const observer = new MutationObserver(update);
+  observer.observe(el, { childList: true });
+  const stop = host.effect(update);
+  update();
+  return () => {
+    stop?.();
+    observer.disconnect();
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-avatar.js
+var ui_avatar_exports = {};
+__export(ui_avatar_exports, {
+  default: () => controller3
+});
+function toInitials(value) {
+  const tokens = (value || "").trim().split(/\s+/).filter((t) => t.length > 0);
+  if (tokens.length === 0) return "?";
+  if (tokens.length === 1) return tokens[0].slice(0, 2).toUpperCase();
+  return `${tokens[0][0] ?? ""}${tokens[1][0] ?? ""}`.toUpperCase();
+}
+function controller3(host) {
+  const img = host.element.querySelector("img");
+  const fallback = host.element.querySelector(".fallback");
+  let hasImage = false;
+  const apply = () => {
+    const label = host.state.alt || host.state.name || "Avatar";
+    host.element.setAttribute("role", "img");
+    host.element.setAttribute("aria-label", label);
+    if (fallback) fallback.textContent = host.state.fallback || toInitials(host.state.name || host.state.alt);
+    if (img) {
+      img.src = host.state.src || "";
+      img.alt = label;
+      img.hidden = !hasImage;
+      img.setAttribute("aria-hidden", hasImage ? "false" : "true");
+    }
+    if (fallback) {
+      fallback.hidden = hasImage;
+      fallback.setAttribute("aria-hidden", hasImage ? "true" : "false");
+    }
+    if (hasImage) host.element.setAttribute("data-has-image", "");
+    else host.element.removeAttribute("data-has-image");
+  };
+  const onLoad = () => {
+    hasImage = true;
+    apply();
+  };
+  const onError = () => {
+    hasImage = false;
+    apply();
+  };
+  img?.addEventListener("load", onLoad);
+  img?.addEventListener("error", onError);
+  const stop = host.effect(apply);
+  return () => {
+    stop?.();
+    img?.removeEventListener("load", onLoad);
+    img?.removeEventListener("error", onError);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-button.js
+var ui_button_exports = {};
+__export(ui_button_exports, {
+  default: () => controller4
+});
+function controller4(host) {
+  const element = host.element;
+  const button = element.querySelector("button");
+  const apply = () => {
+    const disabled3 = Boolean(host.state.disabled);
+    button && (button.disabled = disabled3);
+  };
+  const onKeydown = (event) => {
+    if (button || host.state.disabled || !["Enter", " "].includes(event.key)) return;
+    event.preventDefault();
+    element.click();
+  };
+  element.addEventListener("keydown", onKeydown);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    element.removeEventListener("keydown", onKeydown);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-checkbox.js
+var ui_checkbox_exports = {};
+__export(ui_checkbox_exports, {
+  default: () => controller5
+});
+function triggerFor(event) {
+  if (event instanceof KeyboardEvent) return "keyboard";
+  if (event instanceof MouseEvent || event instanceof PointerEvent) return "pointer";
+  return "programmatic";
+}
+function controller5(host) {
+  const element = host.element;
+  const input = element.querySelector('input[type="checkbox"]');
+  host.state.internalChecked = host.state.checked === void 0 ? Boolean(host.state.defaultChecked) : Boolean(host.state.checked);
+  const apply = () => {
+    if (host.state.checked !== void 0) host.state.internalChecked = Boolean(host.state.checked);
+    const disabled3 = Boolean(host.state.disabled);
+    element.setAttribute("aria-disabled", String(disabled3));
+    element.setAttribute("aria-checked", host.state.indeterminate ? "mixed" : String(Boolean(host.state.internalChecked)));
+    if (!input) return;
+    input.checked = Boolean(host.state.internalChecked);
+    input.indeterminate = Boolean(host.state.indeterminate);
+    input.disabled = disabled3;
+    input.required = Boolean(host.state.required);
+    input.value = String(host.state.value ?? "on");
+  };
+  const onChange = (event) => {
+    if (!input) return;
+    const checked = input.checked;
+    if (host.state.checked === void 0) host.state.internalChecked = checked;
+    else apply();
+    host.dispatch("change", { checked, value: String(host.state.value ?? "on"), trigger: triggerFor(event) });
+  };
+  input?.addEventListener("change", onChange);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    input?.removeEventListener("change", onChange);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-combobox.js
+var ui_combobox_exports = {};
+__export(ui_combobox_exports, {
+  default: () => controller6,
+  focusInput: () => focusInput,
+  validate: () => validate
+});
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/shared/overlay.js
+var stacks = /* @__PURE__ */ new WeakMap();
+var anchorSequence = 0;
+var anchorBindings = /* @__PURE__ */ new WeakMap();
+function stateFor(document) {
+  let state = stacks.get(document);
+  if (state) return state;
+  state = { records: [], modalCount: 0, listening: false };
+  stacks.set(document, state);
+  return state;
+}
+function syncScrollLock(document, state) {
+  document.documentElement.toggleAttribute("data-ui-scroll-lock", state.modalCount > 0);
+  if (state.modalCount > 0) document.documentElement.style.overflow = "hidden";
+  else document.documentElement.style.removeProperty("overflow");
+}
+function requestClose(document, reason, trigger) {
+  const record = stateFor(document).records.at(-1);
+  if (!record || record.dismissible === false && (reason === "escape" || reason === "light-dismiss")) return false;
+  record.requestClose(reason, trigger);
+  return true;
+}
+function ensureListeners(document, state) {
+  if (state.listening) return;
+  state.onKeydown = (event) => {
+    if (event.key === "Escape") requestClose(document, "escape", "keyboard");
+  };
+  state.onPointerdown = (event) => {
+    const top = state.records.at(-1);
+    if (!top || top.dismissible === false) return;
+    const boundary = [top.element, ...top.relatedElements ?? []];
+    if (event.composedPath().some((target) => target instanceof Node && boundary.some((element) => element.contains(target)))) return;
+    requestClose(document, "light-dismiss", "pointer");
+  };
+  document.addEventListener("keydown", state.onKeydown);
+  document.addEventListener("pointerdown", state.onPointerdown, true);
+  state.listening = true;
+}
+function removeListeners(document, state) {
+  if (!state.listening || state.records.length) return;
+  document.removeEventListener("keydown", state.onKeydown);
+  document.removeEventListener("pointerdown", state.onPointerdown, true);
+  state.listening = false;
+}
+function openOverlay(record) {
+  const document = record.element.ownerDocument;
+  const state = stateFor(document);
+  closeOverlay(document, record.id);
+  state.records.push(record);
+  if (record.modal) {
+    state.modalCount += 1;
+    syncScrollLock(document, state);
+  }
+  ensureListeners(document, state);
+}
+function closeOverlay(document, id2) {
+  const state = stateFor(document);
+  const index = state.records.findIndex((record) => record.id === id2);
+  if (index >= 0) {
+    const [record] = state.records.splice(index, 1);
+    if (record?.modal) {
+      state.modalCount = Math.max(0, state.modalCount - 1);
+      syncScrollLock(document, state);
+    }
+  }
+  removeListeners(document, state);
+}
+function requestTopOverlayClose(document, reason, trigger) {
+  return requestClose(document, reason, trigger);
+}
+function topLayerOpen(surface) {
+  try {
+    return surface.matches(":popover-open");
+  } catch {
+    return !surface.hidden;
+  }
+}
+function show(surface) {
+  surface.setAttribute("popover", "manual");
+  surface.hidden = false;
+  if (typeof surface.showPopover === "function" && !topLayerOpen(surface)) {
+    try {
+      surface.showPopover();
+    } catch {
+    }
+  }
+}
+function hide(surface) {
+  if (typeof surface.hidePopover === "function" && topLayerOpen(surface)) {
+    try {
+      surface.hidePopover();
+    } catch {
+    }
+  }
+  surface.hidden = true;
+}
+function bindAnchor(anchor, name) {
+  const binding = anchorBindings.get(anchor) ?? { original: anchor.style.getPropertyValue("anchor-name"), names: /* @__PURE__ */ new Set() };
+  binding.names.add(name);
+  anchorBindings.set(anchor, binding);
+  anchor.style.setProperty("anchor-name", [binding.original, ...binding.names].filter(Boolean).join(", "));
+}
+function unbindAnchor(anchor, name) {
+  const binding = anchorBindings.get(anchor);
+  if (!binding) return;
+  binding.names.delete(name);
+  if (binding.names.size) anchor.style.setProperty("anchor-name", [binding.original, ...binding.names].filter(Boolean).join(", "));
+  else {
+    if (binding.original) anchor.style.setProperty("anchor-name", binding.original);
+    else anchor.style.removeProperty("anchor-name");
+    anchorBindings.delete(anchor);
+  }
+}
+function viewport(owner) {
+  const visual = owner.visualViewport;
+  const left = visual?.offsetLeft ?? 0;
+  const top = visual?.offsetTop ?? 0;
+  const width = visual?.width ?? owner.innerWidth;
+  const height = visual?.height ?? owner.innerHeight;
+  return { left, top, right: left + width, bottom: top + height, width, height };
+}
+function clamp(rect, bounds, gutter) {
+  const availableWidth = Math.max(0, bounds.width - gutter * 2);
+  const availableHeight = Math.max(0, bounds.height - gutter * 2);
+  const left = rect.width > availableWidth ? bounds.left + gutter : Math.min(Math.max(rect.left, bounds.left + gutter), bounds.right - gutter - rect.width);
+  const top = rect.height > availableHeight ? bounds.top + gutter : Math.min(Math.max(rect.top, bounds.top + gutter), bounds.bottom - gutter - rect.height);
+  return { x: left - rect.left, y: top - rect.top };
+}
+function fallbackPosition(surface, anchor, placement, gap, viewportGap, surfaceRect = surface.getBoundingClientRect()) {
+  const bounds = viewport(surface.ownerDocument.defaultView);
+  const preferTop = placement.startsWith("top");
+  const preferEnd = placement.endsWith("end");
+  const below = bounds.bottom - anchor.bottom - viewportGap;
+  const above = anchor.top - bounds.top - viewportGap;
+  const useTop = preferTop ? !(above < surfaceRect.height + gap && below > above) : below < surfaceRect.height + gap && above > below;
+  const top = useTop ? anchor.top - surfaceRect.height - gap : anchor.bottom + gap;
+  const left = preferEnd ? anchor.right - surfaceRect.width : anchor.left;
+  const shift = clamp({ left, top, right: left + surfaceRect.width, bottom: top + surfaceRect.height, width: surfaceRect.width, height: surfaceRect.height }, bounds, viewportGap);
+  surface.style.left = `${Math.round(left + shift.x)}px`;
+  surface.style.top = `${Math.round(top + shift.y)}px`;
+  surface.style.right = "auto";
+  surface.style.bottom = "auto";
+}
+function createAnchoredSurface(surface, options = {}) {
+  const owner = surface.ownerDocument.defaultView;
+  let placement = options.placement ?? "bottom-start";
+  const gap = Math.max(0, options.gap ?? 4);
+  const viewportGap = Math.max(0, options.viewportGap ?? 8);
+  const nativeAnchor = owner.CSS?.supports?.("anchor-name: --ui-anchor-test") && owner.CSS.supports("position-anchor: --ui-anchor-test") && owner.CSS.supports("top: anchor(bottom)");
+  const anchorName = `--ui-anchor-${++anchorSequence}`;
+  let anchor = options.anchor ?? null;
+  let point = null;
+  let open = false;
+  let frame = null;
+  let abort = null;
+  let sizeObserver = null;
+  surface.setAttribute("popover", "manual");
+  surface.dataset.uiPositioning = nativeAnchor ? "anchor" : "fallback";
+  surface.style.position = "fixed";
+  surface.style.margin = "0";
+  const bind = (next) => {
+    if (anchor) unbindAnchor(anchor, anchorName);
+    anchor = next;
+    if (anchor) {
+      bindAnchor(anchor, anchorName);
+      surface.style.setProperty("position-anchor", anchorName);
+    } else surface.style.removeProperty("position-anchor");
+  };
+  const position = () => {
+    frame = null;
+    if (!open) return;
+    if (point) {
+      fallbackPosition(surface, { left: point.x, right: point.x, top: point.y, bottom: point.y, width: 0, height: 0 }, "bottom-start", gap, viewportGap);
+      return;
+    }
+    if (!anchor) return;
+    let rect;
+    if (nativeAnchor) {
+      const blockEnd = placement.startsWith("bottom");
+      const inlineEnd = placement.endsWith("end");
+      surface.style.top = blockEnd ? `calc(anchor(bottom) + ${gap}px)` : "auto";
+      surface.style.bottom = blockEnd ? "auto" : `calc(anchor(top) + ${gap}px)`;
+      surface.style.left = inlineEnd ? "auto" : "anchor(left)";
+      surface.style.right = inlineEnd ? "anchor(right)" : "auto";
+      surface.style.setProperty("position-try-fallbacks", "flip-block, flip-inline");
+      rect = surface.getBoundingClientRect();
+      if (!rect.width || !rect.height) return;
+      const shift = clamp(rect, viewport(owner), viewportGap);
+      if (!shift.x && !shift.y) return;
+    }
+    fallbackPosition(surface, anchor.getBoundingClientRect(), placement, gap, viewportGap, rect);
+  };
+  const schedule = () => {
+    if (open && frame === null) frame = owner.requestAnimationFrame(position);
+  };
+  const syncListeners = () => {
+    const needed = open && (point || anchor);
+    if (!needed) {
+      abort?.abort();
+      abort = null;
+      return;
+    }
+    if (abort) return;
+    abort = new AbortController();
+    const signal = abort.signal;
+    owner.addEventListener("resize", schedule, { passive: true, signal });
+    owner.addEventListener("scroll", schedule, { passive: true, capture: true, signal });
+    owner.visualViewport?.addEventListener("resize", schedule, { passive: true, signal });
+    owner.visualViewport?.addEventListener("scroll", schedule, { passive: true, signal });
+  };
+  const observeSize = () => {
+    if (sizeObserver || !owner.ResizeObserver) return;
+    sizeObserver = new owner.ResizeObserver(schedule);
+    sizeObserver.observe(surface);
+  };
+  const stopSize = () => {
+    sizeObserver?.disconnect();
+    sizeObserver = null;
+  };
+  bind(anchor);
+  return {
+    setAnchor(next) {
+      point = null;
+      bind(next);
+      syncListeners();
+      schedule();
+    },
+    setPlacement(next) {
+      placement = next || "bottom-start";
+      schedule();
+    },
+    show() {
+      point = null;
+      open = true;
+      syncListeners();
+      show(surface);
+      position();
+      schedule();
+      observeSize();
+    },
+    showAtPoint(next) {
+      point = next;
+      open = true;
+      syncListeners();
+      show(surface);
+      position();
+      schedule();
+      observeSize();
+    },
+    hide() {
+      open = false;
+      point = null;
+      syncListeners();
+      stopSize();
+      if (frame !== null) owner.cancelAnimationFrame(frame);
+      frame = null;
+      hide(surface);
+    },
+    refresh: schedule,
+    destroy() {
+      open = false;
+      abort?.abort();
+      abort = null;
+      stopSize();
+      if (frame !== null) owner.cancelAnimationFrame(frame);
+      frame = null;
+      hide(surface);
+      bind(null);
+    }
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-combobox.js
+var instances = /* @__PURE__ */ new WeakMap();
+function configFor(host) {
+  return host.state.config && typeof host.state.config === "object" ? host.state.config : {};
+}
+function formatEditingValue(raw, selection, format) {
+  const unchanged = { display: raw, selection };
+  if (typeof format !== "function") return unchanged;
+  let result;
+  try {
+    result = format(raw, selection);
+  } catch {
+    return unchanged;
+  }
+  if (!result) return unchanged;
+  const characters = Array.from(raw);
+  let cursor = 0;
+  for (const character of result.display) if (character === characters[cursor]) cursor += 1;
+  if (!Number.isInteger(result.selection.start) || !Number.isInteger(result.selection.end) || cursor !== characters.length || result.selection.start < 0 || result.selection.end < result.selection.start || result.selection.end > result.display.length) return unchanged;
+  return result;
+}
+async function validateField(request, config) {
+  let output = request.raw;
+  let issues = [];
+  const check = () => request.signal.throwIfAborted();
+  try {
+    check();
+    if (config.parse) output = await config.parse(request.raw, request);
+    check();
+    if (config.schema) {
+      const result = await config.schema["~standard"].validate(output);
+      check();
+      if (result.issues) issues = result.issues;
+      else if ("value" in result) output = result.value;
+    }
+    if (!issues.some((issue) => issue.severity !== "warning")) {
+      if (config.normalize) output = await config.normalize(output, request);
+      check();
+      if (config.validator) {
+        const result = await config.validator(output, request);
+        check();
+        issues = [...issues, ...result.issues ?? []];
+        if ("output" in result) output = result.output;
+      }
+    }
+  } catch (error) {
+    check();
+    issues = [{ message: error instanceof Error ? error.message : "Unable to validate this value." }];
+  }
+  issues = [...issues, ...config.issues ?? []];
+  return { output: issues.some((issue) => issue.severity !== "warning") ? void 0 : output, issues };
+}
+async function validate(host) {
+  return instances.get(host.element)?.validate();
+}
+async function focusInput(host) {
+  instances.get(host.element)?.input?.focus();
+}
+function controller6(host) {
+  const element = host.element;
+  const document = element.ownerDocument;
+  const overlayId = `ui-combobox-${Math.random().toString(36).slice(2)}`;
+  let input;
+  let field;
+  let popup;
+  let listbox;
+  let itemsContainer;
+  let validationElement;
+  let statusElement;
+  let surface;
+  let lookup;
+  let validationRun;
+  let lookupTimer;
+  let composing = false;
+  let alive = true;
+  let fullSet = false;
+  let initialRaw = "";
+  let awaitingLabel = null;
+  let proposedChange;
+  let formattedRaw;
+  let formattedWith;
+  let lastValue = host.state.value;
+  let lastQuery = host.state.query;
+  let lastConfig = host.state.config;
+  const knownOptions = /* @__PURE__ */ new Map();
+  const config = () => configFor(host);
+  const items = () => host.state.multiple && Array.isArray(host.state.value) ? host.state.value : [];
+  const selectedValues = () => new Set(items().map((item) => item.value));
+  const setValidation = (result, touched = host.state.validation?.touched ?? false) => {
+    const issues = result.issues ?? [];
+    const blocking = issues.some((issue) => issue.severity !== "warning");
+    host.state.validation = {
+      status: blocking ? "error" : issues.length ? "warning" : "valid",
+      touched,
+      dirty: host.state.raw !== initialRaw,
+      ...result,
+      issues
+    };
+    host.dispatch("validation-change", host.state.validation);
+  };
+  const resetValidation = () => {
+    validationRun?.abort();
+    host.state.validation = {
+      status: "pristine",
+      touched: host.state.validation?.touched ?? false,
+      dirty: host.state.raw !== initialRaw,
+      issues: []
+    };
+    host.dispatch("validation-change", host.state.validation);
+  };
+  const applyServerIssues = () => {
+    const issues = config().issues ?? [];
+    if (issues.length) setValidation({ issues }, host.state.validation?.touched ?? false);
+    else resetValidation();
+  };
+  const cancelLookup = () => {
+    clearTimeout(lookupTimer);
+    lookup?.abort();
+    lookup = void 0;
+    host.state.loading = false;
+  };
+  const close = () => {
+    host.state.expanded = false;
+    host.state.active = -1;
+    cancelLookup();
+    surface?.hide();
+    closeOverlay(document, overlayId);
+  };
+  const canCreate = () => {
+    const current = config();
+    const candidates = current.options ? [...current.options, ...host.state.rows ?? []] : host.state.rows ?? [];
+    return Boolean(current.allowCreate && String(host.state.raw).trim() && !host.state.loading && !host.state.lookupError && !candidates.some((row) => row.label.toLocaleLowerCase() === String(host.state.raw).toLocaleLowerCase()));
+  };
+  const search = (reason) => {
+    cancelLookup();
+    fullSet = reason === "disclosure";
+    host.state.active = -1;
+    host.state.lookupError = "";
+    const current = config();
+    const query = fullSet ? "" : String(host.state.raw);
+    const controller29 = new AbortController();
+    lookup = controller29;
+    const applyOptions = (options) => {
+      if (controller29.signal.aborted || !alive) return;
+      for (const option of options) knownOptions.set(option.value, option);
+      const selectedOption = host.state.selected == null ? void 0 : knownOptions.get(host.state.selected);
+      if (host.state.query === void 0 && awaitingLabel === host.state.selected && selectedOption) {
+        host.state.raw = selectedOption.label;
+        host.state.display = selectedOption.label;
+        awaitingLabel = null;
+        formattedRaw = void 0;
+        resetValidation();
+      }
+      const ids = /* @__PURE__ */ new Set();
+      const selected = host.state.multiple ? selectedValues() : void 0;
+      const filtered = options.filter((option) => {
+        if (ids.has(option.id)) return false;
+        ids.add(option.id);
+        if (fullSet) return true;
+        if (selected) return !selected.has(option.value) && (current.filter ? current.filter(option, query, current.context) : option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()));
+        return current.filter ? current.filter(option, query, current.context) : current.provider ? true : option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase());
+      });
+      const groups = /* @__PURE__ */ new Map();
+      for (const row of filtered) {
+        const group = row.group ?? "";
+        if (!groups.has(group)) groups.set(group, []);
+        groups.get(group).push(row);
+      }
+      host.state.rows = [...groups.values()].flat();
+      host.state.loading = false;
+      host.dispatch("options-change", host.state.rows);
+    };
+    if (!current.provider) {
+      applyOptions(current.options ?? []);
+      return;
+    }
+    host.state.rows = [];
+    host.state.loading = true;
+    lookupTimer = setTimeout(async () => {
+      try {
+        applyOptions(await current.provider({ query, context: current.context, signal: controller29.signal, reason }));
+      } catch (error) {
+        if (!controller29.signal.aborted && alive) {
+          host.state.loading = false;
+          host.state.lookupError = error instanceof Error ? error.message : "Unable to load suggestions.";
+        }
+      }
+    }, reason === "disclosure" ? 0 : Math.max(0, Number(current.debounce ?? 200)));
+  };
+  const open = (reason = "input") => {
+    if (host.state.disabled || host.state.readOnly) return;
+    host.state.expanded = true;
+    if (popup && field) popup.style.minWidth = `${field.getBoundingClientRect().width}px`;
+    surface?.show();
+    if (popup) openOverlay({ id: overlayId, element: popup, relatedElements: [element], modal: false, requestClose: close });
+    search(reason);
+  };
+  const format = (timing) => {
+    const current = config();
+    if ((current.formatOn ?? "blur") !== timing || !input) return;
+    if (formattedRaw === host.state.raw && formattedWith === current.format) return;
+    const result = formatEditingValue(String(host.state.raw), {
+      start: input.selectionStart ?? String(host.state.raw).length,
+      end: input.selectionEnd ?? String(host.state.raw).length,
+      direction: input.selectionDirection ?? "none"
+    }, current.format);
+    formattedRaw = host.state.raw;
+    formattedWith = current.format;
+    host.state.display = result.display;
+    if (input.value !== result.display) {
+      input.value = result.display;
+      input.setSelectionRange(result.selection.start, result.selection.end, result.selection.direction);
+    }
+  };
+  const commit = (value, query, option, kind, trigger) => {
+    awaitingLabel = null;
+    const queryChanged = query !== host.state.raw;
+    if (host.state.value === void 0) host.state.selected = value;
+    if (host.state.query === void 0 && queryChanged) {
+      host.state.raw = query;
+      host.state.display = query;
+      formattedRaw = void 0;
+    }
+    resetValidation();
+    const detail = { value, query, option, kind, trigger };
+    const proposal = { value, query };
+    proposedChange = proposal;
+    host.dispatch("value-change", detail);
+    if (queryChanged) host.dispatch("query-change", { query, display: query, trigger });
+    if (kind === "create") host.dispatch("create-entry", detail);
+    if (kind === "free-entry") host.dispatch("free-entry", detail);
+    if (kind === "invalidation") host.dispatch("dependency-invalidate", detail);
+    queueMicrotask(() => {
+      if (proposedChange !== proposal) return;
+      if (host.state.value !== void 0 && host.state.value !== proposal.value) syncValue();
+      if (host.state.query !== void 0 && host.state.query !== proposal.query) syncQuery();
+      proposedChange = void 0;
+    });
+  };
+  const emitItems = (next) => host.dispatch("value-change", next);
+  const setMultiQuery = (query, trigger) => {
+    if (host.state.query === void 0) {
+      host.state.raw = query;
+      host.state.display = query;
+      formattedRaw = void 0;
+    }
+    if (input) input.value = query;
+    host.dispatch("query-change", { query, display: query, trigger });
+  };
+  const addSelectedItem = (option, trigger) => {
+    const current = items();
+    host.dispatch("add-item", { item: option, index: current.length, trigger });
+    emitItems([...current, option]);
+  };
+  const createSelectedItem = (query, trigger) => {
+    if (query) host.dispatch("create-item", { query, trigger });
+  };
+  const choose = (index, trigger) => {
+    const option = (host.state.rows ?? [])[index];
+    if (option?.disabled) return;
+    if (host.state.multiple) {
+      if (option) addSelectedItem(option, trigger);
+      else if (canCreate() && index === host.state.rows.length) createSelectedItem(String(host.state.raw).trim(), trigger);
+      else return;
+      setMultiQuery("", trigger);
+    } else if (option) commit(option.value, option.label, option, "selection", trigger);
+    else if (canCreate() && index === host.state.rows.length) commit(null, host.state.raw, null, "create", trigger);
+    else return;
+    close();
+    input?.focus();
+    if (!host.state.multiple && config().validateOn !== "submit") queueMicrotask(() => void validateCurrent());
+  };
+  const commitQuery = (trigger) => {
+    const query = String(host.state.raw).trim();
+    if (!query) return;
+    const option = (host.state.rows ?? []).find((row) => row.label.trim().toLocaleLowerCase() === query.toLocaleLowerCase());
+    if (option) {
+      setMultiQuery("", trigger);
+      addSelectedItem(option, trigger);
+    } else if (config().allowCreate) {
+      setMultiQuery("", trigger);
+      createSelectedItem(query, trigger);
+    }
+  };
+  const itemButtons = () => Array.from(element.querySelectorAll('[part="item"]'));
+  const removeItemAt = (index, trigger) => {
+    const current = items();
+    const item = current[index];
+    if (!item || item.disabled || host.state.disabled || host.state.readOnly) return;
+    host.dispatch("remove-item", { item, index, trigger });
+    emitItems(current.filter((_, position) => position !== index));
+    requestAnimationFrame(() => itemButtons()[Math.min(index, itemButtons().length - 1)]?.focus?.() ?? input?.focus());
+  };
+  const move = (key) => {
+    const rows = host.state.rows ?? [];
+    const indices = rows.flatMap((row, index) => row.disabled ? [] : [index]);
+    if (canCreate()) indices.push(rows.length);
+    if (!indices.length) return;
+    const current = indices.indexOf(host.state.active);
+    const next = key === "Home" ? 0 : key === "End" ? indices.length - 1 : key === "ArrowDown" ? Math.min(current + 1, indices.length - 1) : current < 0 ? indices.length - 1 : Math.max(0, current - 1);
+    host.state.active = indices[next];
+    requestAnimationFrame(() => element.querySelector(`#option-${host.state.active}`)?.scrollIntoView({ block: "nearest" }));
+  };
+  const validateCurrent = async () => {
+    validationRun?.abort();
+    const run = new AbortController();
+    validationRun = run;
+    host.state.validation = { ...host.state.validation, status: "pending", output: void 0 };
+    host.dispatch("validation-change", host.state.validation);
+    try {
+      const current = config();
+      const result = await validateField({ raw: host.state.raw, value: host.state.selected, context: current.context, signal: run.signal }, current);
+      if (host.state.required && !String(host.state.raw).trim()) result.issues = [...result.issues, { message: "A value is required." }];
+      else if (host.state.raw && host.state.selected === null && !current.allowFreeText && !current.allowCreate) result.issues = [...result.issues, { message: "Choose a suggestion." }];
+      if (result.issues.some((issue) => issue.severity !== "warning")) result.output = void 0;
+      if (!run.signal.aborted && alive) setValidation(result);
+    } catch {
+    }
+    return host.state.validation;
+  };
+  const syncValue = () => {
+    if (host.state.multiple || host.state.value === void 0) return;
+    host.state.selected = host.state.value;
+    if (host.state.query === void 0) {
+      const proposal = proposedChange;
+      const option = config().options?.find((row) => row.value === host.state.selected) ?? (host.state.selected == null ? void 0 : knownOptions.get(host.state.selected));
+      const nextRaw = proposal?.value === host.state.selected ? proposal.query : option?.label ?? host.state.selected ?? "";
+      if (proposal?.value !== host.state.selected || nextRaw !== host.state.raw) {
+        host.state.raw = nextRaw;
+        host.state.display = nextRaw;
+        formattedRaw = void 0;
+      }
+      awaitingLabel = !option && host.state.selected !== null ? host.state.selected : null;
+    }
+    resetValidation();
+  };
+  const syncQuery = () => {
+    if (host.state.query === void 0 || host.state.query === host.state.raw) return;
+    if (host.state.value === void 0 && proposedChange?.query !== host.state.query) host.state.selected = null;
+    awaitingLabel = null;
+    formattedRaw = void 0;
+    host.state.raw = host.state.query;
+    host.state.display = host.state.query;
+    resetValidation();
+    if (host.state.expanded) search("input");
+  };
+  const makeChip = (item) => {
+    const projected = element.querySelector(`[slot="item-${CSS.escape(item.id)}"]`);
+    if (projected) return projected;
+    const chip = document.createElement("ui-chip");
+    chip.setAttribute("appearance", "pill");
+    chip.textContent = item.label;
+    return chip;
+  };
+  const makeOptionContent = (row) => {
+    const projected = element.querySelector(`[slot="option-${CSS.escape(row.id)}"]`);
+    if (projected) return [projected];
+    const primary = document.createElement("span");
+    primary.className = "primary";
+    primary.setAttribute("part", "option-primary");
+    primary.textContent = row.label;
+    if (!row.description) return [primary];
+    const secondary = document.createElement("span");
+    secondary.className = "secondary";
+    secondary.setAttribute("part", "option-secondary");
+    secondary.textContent = row.description;
+    return [primary, secondary];
+  };
+  const renderDynamic = () => {
+    if (itemsContainer) {
+      itemsContainer.replaceChildren();
+      items().forEach((item, index) => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "item";
+        button.setAttribute("part", "item");
+        button.dataset.value = item.value;
+        button.dataset.index = String(index);
+        button.tabIndex = -1;
+        button.disabled = Boolean(host.state.disabled || host.state.readOnly || item.disabled);
+        button.setAttribute("aria-label", `${item.label}, press Delete or Backspace to remove`);
+        button.append(makeChip(item));
+        itemsContainer.append(button);
+      });
+    }
+    if (listbox) {
+      listbox.replaceChildren();
+      const rows = host.state.rows ?? [];
+      const groups = [...new Set(rows.map((row) => row.group ?? ""))];
+      for (const group of groups) {
+        const wrapper = document.createElement("div");
+        wrapper.setAttribute("role", group ? "group" : "presentation");
+        if (group) {
+          wrapper.setAttribute("aria-label", group);
+          const heading = document.createElement("div");
+          heading.className = "group";
+          heading.setAttribute("part", "group");
+          heading.textContent = group;
+          wrapper.append(heading);
+        }
+        rows.forEach((row, index) => {
+          if ((row.group ?? "") !== group) return;
+          const option = document.createElement("div");
+          option.id = `option-${index}`;
+          option.className = "option";
+          option.setAttribute("part", "option");
+          option.setAttribute("role", "option");
+          option.setAttribute("aria-selected", String(host.state.selected === row.value));
+          option.setAttribute("aria-disabled", String(Boolean(row.disabled)));
+          option.toggleAttribute("data-active", host.state.active === index);
+          option.dataset.index = String(index);
+          option.append(...makeOptionContent(row));
+          wrapper.append(option);
+        });
+        listbox.append(wrapper);
+      }
+      if (canCreate()) {
+        const option = document.createElement("div");
+        option.id = `option-${rows.length}`;
+        option.className = "option";
+        option.setAttribute("part", "option");
+        option.setAttribute("role", "option");
+        option.setAttribute("aria-selected", "false");
+        option.toggleAttribute("data-active", host.state.active === rows.length);
+        option.dataset.index = String(rows.length);
+        option.textContent = `Create \u201C${host.state.raw}\u201D`;
+        listbox.append(option);
+      }
+      const message = document.createElement("div");
+      message.className = "message";
+      if (host.state.loading) message.textContent = "Loading suggestions\u2026";
+      else if (host.state.lookupError) message.textContent = host.state.lookupError;
+      else if (!rows.length && !canCreate()) message.textContent = "No suggestions.";
+      if (message.textContent) listbox.append(message);
+    }
+    if (validationElement) {
+      validationElement.replaceChildren(...(host.state.validation?.issues ?? []).map((issue) => {
+        const line = document.createElement("div");
+        line.textContent = issue.message;
+        return line;
+      }));
+      validationElement.hidden = !host.state.validation?.issues?.length;
+    }
+  };
+  const wire = () => {
+    input = element.querySelector('input[part="input"]');
+    field = element.querySelector('[part="field"]');
+    popup = element.querySelector('[part="popup"]');
+    listbox = element.querySelector("#listbox");
+    itemsContainer = element.querySelector(".items");
+    validationElement = element.querySelector("#validation");
+    statusElement = element.querySelector('[role="status"]');
+    if (!surface && popup && field) surface = createAnchoredSurface(popup, { anchor: field, placement: "bottom-start" });
+    const clearButton = Array.from(field?.querySelectorAll('button[part="affordance"]') ?? []).find((button) => button.textContent?.trim() === "\xD7");
+    const disclosureButton = field?.querySelector('button[aria-controls="listbox"]');
+    if (clearButton) clearButton.dataset.comboboxAction = "clear";
+    if (disclosureButton) disclosureButton.dataset.comboboxAction = "disclosure";
+  };
+  const render = () => {
+    wire();
+    const validation = host.state.validation ?? { status: "pristine", issues: [] };
+    element.dataset.validation = validation.status;
+    element.dataset.size = String(host.state.size ?? "md");
+    const label = element.querySelector('label[part="label"]');
+    if (label) {
+      label.textContent = `${host.state.label ?? ""}${host.state.required ? " *" : ""}`;
+      label.classList.toggle("sr-only", host.state.labelVisibility === "sr-only");
+    }
+    if (input) {
+      if (!composing && input.value !== host.state.display) input.value = String(host.state.display ?? "");
+      input.placeholder = String(host.state.placeholder ?? "");
+      input.name = String(host.state.name ?? "");
+      input.disabled = Boolean(host.state.disabled);
+      input.readOnly = Boolean(host.state.readOnly);
+      input.required = Boolean(host.state.required);
+      input.setAttribute("aria-expanded", String(Boolean(host.state.expanded)));
+      input.setAttribute("aria-invalid", String(validation.status === "error"));
+      input.setAttribute("aria-busy", String(validation.status === "pending"));
+      if (host.state.expanded && host.state.active >= 0) input.setAttribute("aria-activedescendant", `option-${host.state.active}`);
+      else input.removeAttribute("aria-activedescendant");
+      const description = [host.state.helpOpen ? "help-text" : "", validation.issues?.length ? "validation" : ""].filter(Boolean).join(" ");
+      if (description) input.setAttribute("aria-describedby", description);
+      else input.removeAttribute("aria-describedby");
+    }
+    if (popup) popup.hidden = !host.state.expanded;
+    listbox?.setAttribute("aria-label", `${host.state.label ?? ""} suggestions`);
+    listbox?.setAttribute("aria-busy", String(Boolean(host.state.loading)));
+    if (statusElement) {
+      const status = host.state.loading ? "Loading suggestions\u2026" : host.state.lookupError || (host.state.expanded ? `${host.state.rows?.length ?? 0} suggestions available.` : "");
+      statusElement.textContent = `${status} ${validation.status === "pending" ? "Checking value\u2026" : (validation.issues ?? []).map((issue) => issue.message).join(" ")}`.trim();
+    }
+    renderDynamic();
+    if (host.state.expanded) surface?.refresh();
+  };
+  const onInput = (event) => {
+    if (event.target !== input || composing || event.isComposing) return;
+    awaitingLabel = null;
+    formattedRaw = void 0;
+    host.state.raw = input.value;
+    host.state.display = input.value;
+    resetValidation();
+    format("input");
+    host.dispatch("query-change", { query: host.state.raw, display: host.state.display, trigger: "keyboard" });
+    if (host.state.selected !== null) commit(null, host.state.raw, null, "clear", "keyboard");
+    open();
+    if (config().validateOn === "input") void validateCurrent();
+    queueMicrotask(() => {
+      if (host.state.query !== void 0 && host.state.query !== host.state.raw) syncQuery();
+    });
+  };
+  const onKeydown = (event) => {
+    const item = event.target.closest?.('[part="item"]');
+    if (item) {
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+      const index = Number(item.dataset.index);
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        itemButtons()[Math.max(0, index - 1)]?.focus();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        index === items().length - 1 ? input?.focus() : itemButtons()[index + 1]?.focus();
+      } else if (["Backspace", "Delete"].includes(event.key)) {
+        event.preventDefault();
+        removeItemAt(index, "keyboard");
+      }
+      return;
+    }
+    if (event.target !== input || composing || event.isComposing || host.state.disabled || host.state.readOnly) return;
+    if (host.state.multiple && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+      if ((host.state.tokenSeparators ?? []).includes(event.key)) {
+        event.preventDefault();
+        commitQuery("keyboard");
+        return;
+      }
+      if (!host.state.raw && (input.selectionStart ?? 0) === 0 && event.key === "ArrowLeft" && items().length) {
+        event.preventDefault();
+        itemButtons().at(-1)?.focus();
+        return;
+      }
+      if (!host.state.raw && (input.selectionStart ?? 0) === 0 && event.key === "Backspace" && items().length) {
+        event.preventDefault();
+        removeItemAt(items().length - 1, "keyboard");
+        return;
+      }
+    }
+    if (event.key === "Escape" && host.state.expanded) {
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+    } else if (event.key === "Tab") close();
+    else if (!event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey && ["ArrowDown", "ArrowUp"].includes(event.key)) {
+      event.preventDefault();
+      if (!host.state.expanded) open("disclosure");
+      move(event.key);
+    } else if (["Home", "End"].includes(event.key) && host.state.expanded && host.state.active >= 0) {
+      event.preventDefault();
+      move(event.key);
+    } else if (event.key === "Enter" && host.state.expanded) {
+      if (host.state.active >= 0) {
+        event.preventDefault();
+        choose(host.state.active, "keyboard");
+      } else if (config().allowFreeText) {
+        event.preventDefault();
+        commit(null, host.state.raw, null, "free-entry", "keyboard");
+        close();
+      }
+    }
+  };
+  const onClick = (event) => {
+    const option = event.target.closest?.('[role="option"][data-index]');
+    if (option) {
+      choose(Number(option.dataset.index), "pointer");
+      return;
+    }
+    const action = event.target.closest?.("[data-combobox-action]")?.dataset.comboboxAction;
+    if (action === "clear") {
+      commit(null, "", null, "clear", "pointer");
+      close();
+      input?.focus();
+    } else if (action === "disclosure") {
+      host.state.expanded ? close() : open("disclosure");
+      input?.focus();
+    } else if (field?.contains(event.target) && !event.target.closest?.("button")) input?.focus();
+  };
+  const onPointerdown = (event) => {
+    if (event.target.closest?.('[role="option"]')) event.preventDefault();
+  };
+  const onFocusout = (event) => {
+    if (event.relatedTarget instanceof Node && element.contains(event.relatedTarget)) return;
+    close();
+    format("blur");
+    host.state.validation = { ...host.state.validation, touched: true };
+    if (!host.state.multiple && config().allowFreeText && host.state.selected === null) commit(null, host.state.raw, null, "free-entry", "keyboard");
+    if ((config().validateOn ?? "blur") === "blur") void validateCurrent();
+  };
+  const onCompositionstart = (event) => {
+    if (event.target === input) composing = true;
+  };
+  const onCompositionend = (event) => {
+    if (event.target === input) {
+      composing = false;
+      onInput(new InputEvent("input"));
+    }
+  };
+  const onTooltipOpen = (event) => {
+    if (event.target.closest?.('[data-component-root~="ui-tooltip"]')) host.state.helpOpen = true;
+  };
+  const onTooltipClose = (event) => {
+    if (event.target.closest?.('[data-component-root~="ui-tooltip"]')) host.state.helpOpen = false;
+  };
+  if (host.state.multiple) {
+    host.state.selected = null;
+    host.state.raw = host.state.query ?? host.state.defaultQuery ?? "";
+  } else {
+    host.state.selected = host.state.value !== void 0 ? host.state.value : host.state.defaultValue ?? null;
+    host.state.raw = host.state.query ?? host.state.defaultQuery ?? "";
+    if (host.state.query === void 0 && !host.state.raw && host.state.selected !== null) {
+      host.state.raw = config().options?.find((row) => row.value === host.state.selected)?.label ?? host.state.selected;
+    }
+    if (host.state.query === void 0 && host.state.selected !== null && host.state.raw === host.state.selected) awaitingLabel = host.state.selected;
+  }
+  host.state.display = host.state.raw;
+  initialRaw = host.state.raw;
+  host.state.validation = { status: "pristine", touched: false, dirty: false, issues: [] };
+  applyServerIssues();
+  wire();
+  const api = { get input() {
+    return input;
+  }, validate: validateCurrent };
+  instances.set(element, api);
+  const listeners = { input: onInput, keydown: onKeydown, click: onClick, pointerdown: onPointerdown, focusout: onFocusout, compositionstart: onCompositionstart, compositionend: onCompositionend, open: onTooltipOpen, close: onTooltipClose };
+  for (const [name, listener] of Object.entries(listeners)) element.addEventListener(name, listener);
+  const observer = new MutationObserver(wire);
+  observer.observe(element, { childList: true, subtree: true });
+  const stop = host.effect(() => {
+    if (host.state.value !== lastValue) {
+      lastValue = host.state.value;
+      syncValue();
+    }
+    if (host.state.query !== lastQuery) {
+      lastQuery = host.state.query;
+      syncQuery();
+    }
+    if (host.state.config !== lastConfig) {
+      const previous = configFor({ state: { config: lastConfig } });
+      const next = config();
+      lastConfig = host.state.config;
+      validationRun?.abort();
+      if (next.provider !== previous.provider || next.context !== previous.context) knownOptions.clear();
+      if (next.context !== previous.context) {
+        close();
+        const policy = next.invalidation ?? "retain-query";
+        if (host.state.multiple) {
+          if (policy === "clear") setMultiQuery("", "programmatic");
+        } else commit(policy === "retain" ? host.state.selected : null, policy === "clear" ? "" : host.state.raw, null, "invalidation", "programmatic");
+      }
+      applyServerIssues();
+      if (host.state.expanded) search("context");
+    }
+    if (host.state.disabled || host.state.readOnly) close();
+    render();
+  });
+  render();
+  return () => {
+    alive = false;
+    stop();
+    observer.disconnect();
+    for (const [name, listener] of Object.entries(listeners)) element.removeEventListener(name, listener);
+    close();
+    validationRun?.abort();
+    surface?.destroy();
+    instances.delete(element);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-context-menu.js
+var ui_context_menu_exports = {};
+__export(ui_context_menu_exports, {
+  default: () => controller7
+});
+function disabled(item) {
+  return item.getAttribute("aria-disabled") === "true" || item.hasAttribute("disabled") || item.getAttribute("disabled") === "true";
+}
+function controller7(host) {
+  const element = host.element;
+  const document = element.ownerDocument;
+  const menuSurface = element.querySelector(".menu");
+  const overlayId = `ui-context-menu-${Math.random().toString(36).slice(2, 11)}`;
+  let trigger = null;
+  let contextTarget = null;
+  let surface = null;
+  let point = null;
+  let lastFor = host.state.for;
+  let lastOpenProp = host.state.open;
+  host.state.internalOpen = Boolean(host.state.open || host.state.defaultOpen);
+  const items = () => Array.from(element.querySelectorAll('[data-component-root~="ui-menu-item"]')).filter((item) => !disabled(item));
+  const focusFirst = () => requestAnimationFrame(() => items()[0]?.focus());
+  const detach = () => {
+    trigger?.removeEventListener("click", onTriggerClick);
+    trigger?.removeEventListener("keydown", onTriggerKeydown);
+    contextTarget?.removeEventListener("contextmenu", onContextMenu);
+  };
+  const resolveTargets = () => {
+    const nextTrigger = element.querySelector('[slot="trigger"]');
+    const nextContext = (host.state.for ? document.getElementById(String(host.state.for)) : null) ?? nextTrigger ?? element.parentElement;
+    if (nextTrigger === trigger && nextContext === contextTarget) return;
+    detach();
+    trigger = nextTrigger;
+    contextTarget = nextContext;
+    trigger?.addEventListener("click", onTriggerClick);
+    trigger?.addEventListener("keydown", onTriggerKeydown);
+    contextTarget?.addEventListener("contextmenu", onContextMenu);
+    surface?.setAnchor(trigger);
+  };
+  const syncNested = (open) => {
+    const nested = menuSurface?.querySelector('[data-component-root~="ui-menu"]');
+    if (!nested) return;
+    nested.open = open;
+    nested.setAttribute("aria-hidden", String(!open));
+    if (open && typeof nested.showPopover === "function") {
+      nested.setAttribute("popover", "manual");
+      try {
+        if (!nested.matches(":popover-open")) nested.showPopover();
+      } catch {
+      }
+    } else if (!open && typeof nested.hidePopover === "function") {
+      try {
+        if (nested.matches(":popover-open")) nested.hidePopover();
+      } catch {
+      }
+    }
+  };
+  const close = (reason, input, returnFocus = true) => {
+    if (!host.state.internalOpen) return;
+    host.state.internalOpen = false;
+    host.dispatch("close", { open: false, reason, trigger: input });
+    if (returnFocus) trigger?.focus();
+  };
+  const apply = () => {
+    if (host.state.for !== lastFor) {
+      lastFor = host.state.for;
+      resolveTargets();
+    }
+    if (host.state.open !== lastOpenProp) {
+      lastOpenProp = host.state.open;
+      host.state.internalOpen = Boolean(host.state.open);
+    }
+    const open = Boolean(host.state.internalOpen);
+    if (open) element.setAttribute("data-focus-trigger", String(host.state.focusTrigger ?? "programmatic"));
+    else element.removeAttribute("data-focus-trigger");
+    if (trigger) {
+      trigger.setAttribute("aria-haspopup", "menu");
+      trigger.setAttribute("aria-expanded", String(open));
+    }
+    syncNested(open);
+    if (open) {
+      if (point) surface?.showAtPoint(point);
+      else surface?.show();
+      openOverlay({ id: overlayId, modal: false, element, dismissible: true, requestClose: close });
+    } else {
+      surface?.hide();
+      closeOverlay(document, overlayId);
+    }
+  };
+  const openFromTrigger = (input) => {
+    if (!trigger) return;
+    point = null;
+    host.state.focusTrigger = input;
+    host.state.internalOpen = true;
+    host.dispatch("open", { open: true, reason: "action", trigger: input });
+    focusFirst();
+  };
+  function onTriggerClick(event) {
+    const input = event.detail === 0 ? "keyboard" : "pointer";
+    if (host.state.internalOpen) close("action", input);
+    else openFromTrigger(input);
+  }
+  function onTriggerKeydown(event) {
+    if (!["Enter", " ", "ArrowDown"].includes(event.key)) return;
+    event.preventDefault();
+    if (!host.state.internalOpen) openFromTrigger("keyboard");
+    else focusFirst();
+  }
+  function onContextMenu(event) {
+    event.preventDefault();
+    point = { x: event.clientX, y: event.clientY };
+    host.state.focusTrigger = "pointer";
+    surface?.showAtPoint(point);
+    host.state.internalOpen = true;
+    host.dispatch("open", { open: true, reason: "action", trigger: "pointer" });
+    focusFirst();
+  }
+  const onKeydown = (event) => {
+    if (!host.state.internalOpen) return;
+    host.state.focusTrigger = "keyboard";
+    if (event.key === "Escape") {
+      event.preventDefault();
+      requestTopOverlayClose(document, "escape", "keyboard");
+    } else if (["Enter", " "].includes(event.key)) {
+      const item = event.target.closest?.('[data-component-root~="ui-menu-item"]');
+      if (!item || disabled(item)) return;
+      event.preventDefault();
+      host.dispatch("select", { value: item.getAttribute("data-value") ?? item.getAttribute("value") ?? "", trigger: "keyboard" });
+      close("action", "keyboard");
+    }
+  };
+  const onClick = (event) => {
+    const item = event.target.closest?.('[data-component-root~="ui-menu-item"]');
+    if (!item || disabled(item)) return;
+    host.dispatch("select", { value: item.getAttribute("data-value") ?? item.getAttribute("value") ?? "", trigger: "pointer" });
+    close("action", "pointer");
+  };
+  resolveTargets();
+  if (menuSurface) surface = createAnchoredSurface(menuSurface, { anchor: trigger, placement: "bottom-start" });
+  element.addEventListener("keydown", onKeydown);
+  element.addEventListener("click", onClick);
+  const observer = new MutationObserver(() => {
+    resolveTargets();
+    syncNested(Boolean(host.state.internalOpen));
+  });
+  observer.observe(element, { childList: true, subtree: true });
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    observer.disconnect();
+    detach();
+    element.removeEventListener("keydown", onKeydown);
+    element.removeEventListener("click", onClick);
+    surface?.destroy();
+    closeOverlay(document, overlayId);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-dialog.js
+var ui_dialog_exports = {};
+__export(ui_dialog_exports, {
+  default: () => controller8
+});
+function inferredLabel(element, explicit) {
+  if (String(explicit ?? "").trim()) return String(explicit).trim();
+  return element.querySelector('[slot="heading"], [data-ui-dialog-title], h1, h2, h3, h4, h5, h6')?.textContent?.trim() || "Dialog";
+}
+function controller8(host) {
+  const element = host.element;
+  const document = element.ownerDocument;
+  const dialog = element.querySelector("dialog");
+  const overlayId = `ui-dialog-${Math.random().toString(36).slice(2, 11)}`;
+  host.state.internalOpen = host.state.open === void 0 ? Boolean(host.state.defaultOpen) : Boolean(host.state.open);
+  const requestClose2 = (reason, trigger) => {
+    if (host.state.open === void 0) host.state.internalOpen = false;
+    host.dispatch("close", { open: false, reason, trigger });
+  };
+  const apply = () => {
+    if (host.state.open !== void 0) host.state.internalOpen = Boolean(host.state.open);
+    host.state.accessibleLabel = inferredLabel(element, host.state.label);
+    dialog?.setAttribute("aria-label", String(host.state.accessibleLabel));
+    const open = Boolean(host.state.internalOpen);
+    if (!dialog) return;
+    if (open) {
+      if (!dialog.open) {
+        if (host.state.modal === false) dialog.show();
+        else dialog.showModal();
+      }
+      openOverlay({ id: overlayId, modal: host.state.modal !== false, element, dismissible: host.state.dismissible !== false, requestClose: requestClose2 });
+    } else {
+      if (dialog.open) dialog.close();
+      closeOverlay(document, overlayId);
+    }
+  };
+  const onClose = () => {
+    if (!host.state.internalOpen) return;
+    if (host.state.open === void 0) {
+      host.state.internalOpen = false;
+      closeOverlay(document, overlayId);
+    } else requestAnimationFrame(apply);
+    host.dispatch("close", { open: false, reason: "programmatic", trigger: "programmatic" });
+  };
+  const onKeydown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      requestTopOverlayClose(document, "escape", "keyboard");
+    }
+  };
+  const onCancel = (event) => {
+    event.preventDefault();
+    requestTopOverlayClose(document, "escape", "keyboard");
+  };
+  const observer = new MutationObserver(() => {
+    const label = inferredLabel(element, host.state.label);
+    if (label !== host.state.accessibleLabel) host.state.accessibleLabel = label;
+  });
+  observer.observe(element, { childList: true, subtree: true, characterData: true });
+  dialog?.addEventListener("close", onClose);
+  dialog?.addEventListener("cancel", onCancel);
+  element.addEventListener("keydown", onKeydown);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    observer.disconnect();
+    dialog?.removeEventListener("close", onClose);
+    dialog?.removeEventListener("cancel", onCancel);
+    element.removeEventListener("keydown", onKeydown);
+    closeOverlay(document, overlayId);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-disclosure.js
+var ui_disclosure_exports = {};
+__export(ui_disclosure_exports, {
+  default: () => controller9
+});
+var nextDisclosureId = 0;
+function triggerFor2(event) {
+  if (event instanceof KeyboardEvent) return "keyboard";
+  if (event instanceof MouseEvent || event instanceof PointerEvent) return "pointer";
+  return "programmatic";
+}
+function controller9(host) {
+  const element = host.element;
+  const trigger = element.querySelector("[data-ui-disclosure-trigger], button, [aria-controls]");
+  const controlsId = trigger?.getAttribute("aria-controls") ?? "";
+  const children = Array.from(element.children);
+  const content = controlsId ? element.ownerDocument.getElementById(controlsId) : children.find((child) => child !== trigger) ?? null;
+  if (trigger && content) {
+    if (!content.id) content.id = `disclosure-content-${++nextDisclosureId}`;
+    trigger.setAttribute("aria-controls", content.id);
+    host.state.contentId = content.id;
+  }
+  host.state.internalOpen = host.state.open === void 0 ? Boolean(host.state.defaultOpen) : Boolean(host.state.open);
+  const apply = () => {
+    if (host.state.open !== void 0) host.state.internalOpen = Boolean(host.state.open);
+    const open = Boolean(host.state.internalOpen);
+    trigger?.setAttribute("aria-expanded", String(open));
+    if (content) content.hidden = !open;
+    if (trigger instanceof HTMLButtonElement) trigger.disabled = Boolean(host.state.disabled);
+    else trigger?.setAttribute("aria-disabled", String(Boolean(host.state.disabled)));
+  };
+  const setOpen = (next, event, triggerType = triggerFor2(event)) => {
+    if (host.state.disabled || Boolean(host.state.internalOpen) === next) return;
+    if (host.state.open === void 0) host.state.internalOpen = next;
+    apply();
+    host.dispatch(next ? "open" : "close", { open: next, reason: "action", trigger: triggerType });
+  };
+  const onClick = (event) => {
+    if (host.state.disabled) event.preventDefault();
+    else setOpen(!Boolean(host.state.internalOpen), event);
+  };
+  const onKeydown = (event) => {
+    if (host.state.disabled || !["Enter", " "].includes(event.key)) return;
+    event.preventDefault();
+    setOpen(!Boolean(host.state.internalOpen), event, "keyboard");
+  };
+  trigger?.addEventListener("click", onClick);
+  trigger?.addEventListener("keydown", onKeydown);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    trigger?.removeEventListener("click", onClick);
+    trigger?.removeEventListener("keydown", onKeydown);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-editable.js
+var ui_editable_exports = {};
+__export(ui_editable_exports, {
+  default: () => controller10
+});
+function triggerElement(event) {
+  return event.composedPath().find((node) => node instanceof HTMLElement && node.hasAttribute("data-ui-editable-trigger"));
+}
+function controller10(host) {
+  const element = host.element;
+  const document = element.ownerDocument;
+  let trigger = null;
+  host.state.internalEdit = host.state.edit === void 0 ? Boolean(host.state.defaultEdit) : Boolean(host.state.edit);
+  const apply = () => {
+    if (host.state.edit !== void 0) host.state.internalEdit = Boolean(host.state.edit);
+    const editing = Boolean(host.state.internalEdit);
+    const preview = element.querySelector('[part="preview"]');
+    const editor = element.querySelector('[part="edit"]');
+    if (preview) preview.hidden = editing;
+    if (editor) editor.hidden = !editing;
+  };
+  const focusEditor = () => {
+    const editRoot = element.querySelector('[slot="edit"]');
+    const selector = "input, textarea, select, button, [tabindex], [data-component-root~='ui-combobox']";
+    const candidate = editRoot?.matches(selector) ? editRoot : editRoot?.querySelector(selector);
+    if (typeof candidate?.focusInput === "function") void candidate.focusInput();
+    else candidate?.focus?.();
+  };
+  const requestEdit = (next, reason, input) => {
+    if (host.state.disabled || Boolean(host.state.internalEdit) === next) return;
+    if (host.state.edit === void 0) host.state.internalEdit = next;
+    apply();
+    host.dispatch("edit-change", { edit: next, reason, trigger: input });
+    requestAnimationFrame(() => next ? focusEditor() : trigger?.focus?.());
+  };
+  const onClick = (event) => {
+    if (host.state.internalEdit || host.state.disabled) return;
+    const candidate = triggerElement(event);
+    if (!candidate) return;
+    trigger = candidate;
+    requestEdit(true, "activate", "pointer");
+  };
+  const onKeydown = (event) => {
+    if (host.state.internalEdit && event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      requestEdit(false, "escape", "keyboard");
+      return;
+    }
+    if (host.state.internalEdit || !["Enter", " "].includes(event.key)) return;
+    const candidate = triggerElement(event);
+    if (!candidate) return;
+    event.preventDefault();
+    trigger = candidate;
+    requestEdit(true, "activate", "keyboard");
+  };
+  const onDocumentPointerdown = (event) => {
+    if (host.state.internalEdit && !event.composedPath().includes(element)) {
+      requestEdit(false, "light-dismiss", "pointer");
+    }
+  };
+  element.addEventListener("click", onClick);
+  element.addEventListener("keydown", onKeydown);
+  document.addEventListener("pointerdown", onDocumentPointerdown, true);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    element.removeEventListener("click", onClick);
+    element.removeEventListener("keydown", onKeydown);
+    document.removeEventListener("pointerdown", onDocumentPointerdown, true);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-form-field.js
+var ui_form_field_exports = {};
+__export(ui_form_field_exports, {
+  default: () => controller11
+});
+var nextFieldId = 0;
+function id(prefix) {
+  nextFieldId += 1;
+  return `${prefix}-${nextFieldId}`;
+}
+function descriptionIds(input) {
+  return Array.from(new Set((input.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean)));
+}
+function controller11(host) {
+  const element = host.element;
+  let activeInput = null;
+  let owned = /* @__PURE__ */ new Set();
+  let queued = false;
+  const removeOwned = (input) => {
+    if (!input || owned.size === 0) return;
+    const remaining = descriptionIds(input).filter((value) => !owned.has(value));
+    if (remaining.length) input.setAttribute("aria-describedby", remaining.join(" "));
+    else input.removeAttribute("aria-describedby");
+  };
+  const wire = () => {
+    const label = element.querySelector("label");
+    const input = element.querySelector("input, textarea, select");
+    const help = element.querySelector('[data-slot="help"]');
+    const error = element.querySelector('[data-slot="error"], [role="alert"]');
+    if (input !== activeInput) {
+      removeOwned(activeInput);
+      activeInput = input;
+      owned = /* @__PURE__ */ new Set();
+    }
+    if (!input) return;
+    if (!input.id) input.id = id("form-field-input");
+    if (label && !label.getAttribute("for")) label.setAttribute("for", input.id);
+    const external = descriptionIds(input).filter((value) => !owned.has(value));
+    const described = [];
+    if (help) {
+      if (!help.id) help.id = id("form-field-help");
+      described.push(help.id);
+    }
+    if (error) {
+      if (!error.id) error.id = id("form-field-error");
+      described.push(error.id);
+    }
+    owned = new Set(described.filter((value) => !external.includes(value)));
+    const next = Array.from(/* @__PURE__ */ new Set([...external, ...described])).join(" ");
+    if (next && input.getAttribute("aria-describedby") !== next) input.setAttribute("aria-describedby", next);
+    else if (!next && input.hasAttribute("aria-describedby")) input.removeAttribute("aria-describedby");
+    input.disabled = Boolean(host.state.disabled);
+    input.required = Boolean(host.state.required);
+    input.setAttribute("aria-invalid", String(Boolean(host.state.invalid)));
+  };
+  const schedule = () => {
+    if (queued) return;
+    queued = true;
+    queueMicrotask(() => {
+      queued = false;
+      wire();
+    });
+  };
+  const observer = new MutationObserver(schedule);
+  observer.observe(element, { childList: true, subtree: true, attributes: true, attributeFilter: ["aria-describedby", "data-slot", "id", "role"] });
+  const stop = host.effect(schedule);
+  wire();
+  return () => {
+    stop();
+    observer.disconnect();
+    removeOwned(activeInput);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-icon-button.js
+var ui_icon_button_exports = {};
+__export(ui_icon_button_exports, {
+  default: () => controller12
+});
+function controller12(host) {
+  const element = host.element;
+  const button = element.querySelector("button");
+  const apply = () => {
+    const disabled3 = Boolean(host.state.disabled);
+    if (host.state.anticipatory) element.setAttribute("data-ui-affordance", "button");
+    else element.removeAttribute("data-ui-affordance");
+    if (button) {
+      button.disabled = disabled3;
+      const label = String(host.state.label ?? "");
+      if (label) button.setAttribute("aria-label", label);
+      else button.removeAttribute("aria-label");
+    }
+  };
+  const stop = host.effect(apply);
+  apply();
+  return stop;
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-input.js
+var ui_input_exports = {};
+__export(ui_input_exports, {
+  default: () => controller13
+});
+function triggerFor3(event) {
+  if (event instanceof KeyboardEvent) return "keyboard";
+  if (event instanceof MouseEvent || event instanceof PointerEvent) return "pointer";
+  return "programmatic";
+}
+function controller13(host) {
+  const element = host.element;
+  const input = element.querySelector("input");
+  if (host.state.value !== void 0) host.state.internalValue = String(host.state.value);
+  const apply = () => {
+    if (!input) return;
+    const controlled = host.state.value !== void 0;
+    if (controlled) {
+      host.state.internalValue = String(host.state.value);
+      input.value = String(host.state.internalValue);
+    }
+    input.defaultValue = String(host.state.defaultValue ?? "");
+    input.disabled = Boolean(host.state.disabled);
+    input.readOnly = Boolean(host.state.readOnly);
+    input.setAttribute("aria-invalid", String(Boolean(host.state.invalid)));
+  };
+  const emitValue = (name, event) => {
+    if (!input) return;
+    host.state.internalValue = input.value;
+    host.dispatch(name, { value: input.value, trigger: triggerFor3(event) });
+  };
+  const onInput = (event) => emitValue("input", event);
+  const onChange = (event) => emitValue("change", event);
+  input?.addEventListener("input", onInput);
+  input?.addEventListener("change", onChange);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    input?.removeEventListener("input", onInput);
+    input?.removeEventListener("change", onChange);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-menu.js
+var ui_menu_exports = {};
+__export(ui_menu_exports, {
+  default: () => controller14
+});
+function triggerFor4(event) {
+  if (event instanceof KeyboardEvent) return "keyboard";
+  if (event instanceof MouseEvent || event instanceof PointerEvent) return "pointer";
+  return "programmatic";
+}
+function disabled2(item) {
+  return item.getAttribute("aria-disabled") === "true" || item.hasAttribute("disabled") || item.getAttribute("disabled") === "true";
+}
+function controller14(host) {
+  const element = host.element;
+  const document = element.ownerDocument;
+  const overlayId = `ui-menu-${Math.random().toString(36).slice(2, 11)}`;
+  const items = () => Array.from(element.querySelectorAll('[data-component-root~="ui-menu-item"]'));
+  let anchor = null;
+  let surface = null;
+  let lastFor;
+  let lastPlacement;
+  host.state.internalOpen = host.state.open === void 0 ? Boolean(host.state.defaultOpen) : Boolean(host.state.open);
+  const close = (reason, trigger) => {
+    if (!host.state.internalOpen) return;
+    if (host.state.open === void 0) host.state.internalOpen = false;
+    host.dispatch("close", { open: false, reason, trigger });
+    if (reason === "escape") anchor?.focus();
+  };
+  const setup = () => {
+    const nextFor = String(host.state.for ?? "");
+    const nextPlacement = String(host.state.placement ?? "bottom-start");
+    if (nextFor === lastFor && nextPlacement === lastPlacement && surface) return;
+    lastFor = nextFor;
+    lastPlacement = nextPlacement;
+    surface?.destroy();
+    anchor = nextFor ? document.getElementById(nextFor) : null;
+    surface = anchor ? createAnchoredSurface(element, { anchor, placement: nextPlacement }) : null;
+  };
+  const apply = () => {
+    if (host.state.open !== void 0) host.state.internalOpen = Boolean(host.state.open);
+    setup();
+    const open = Boolean(host.state.internalOpen);
+    if (anchor) {
+      anchor.setAttribute("aria-haspopup", "menu");
+      anchor.setAttribute("aria-expanded", String(open));
+    }
+    if (open) {
+      surface?.show();
+      openOverlay({ id: overlayId, modal: false, element, relatedElements: anchor ? [anchor] : [], dismissible: true, requestClose: close });
+    } else {
+      surface?.hide();
+      closeOverlay(document, overlayId);
+    }
+  };
+  const select = (item, trigger) => {
+    if (!item || disabled2(item)) return;
+    const value = item.getAttribute("data-value") ?? item.getAttribute("value") ?? "";
+    host.dispatch("select", { value, trigger });
+    host.dispatch("close", { open: false, reason: "action", trigger });
+    if (host.state.open === void 0) host.state.internalOpen = false;
+  };
+  const onClick = (event) => select(event.target.closest?.('[data-component-root~="ui-menu-item"]'), triggerFor4(event));
+  const onKeydown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      requestTopOverlayClose(document, "escape", "keyboard");
+      return;
+    }
+    const enabled = items().filter((item) => !disabled2(item));
+    const target = event.target.closest?.('[data-component-root~="ui-menu-item"]');
+    const index = target ? enabled.indexOf(target) : -1;
+    if (["Enter", " "].includes(event.key)) {
+      if (index >= 0) {
+        event.preventDefault();
+        select(target, "keyboard");
+      }
+    } else if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled.length) {
+      event.preventDefault();
+      const next = event.key === "ArrowDown" ? index < 0 ? 0 : Math.min(index + 1, enabled.length - 1) : index <= 0 ? enabled.length - 1 : index - 1;
+      enabled[next]?.focus();
+    }
+  };
+  element.addEventListener("click", onClick);
+  element.addEventListener("keydown", onKeydown);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    element.removeEventListener("click", onClick);
+    element.removeEventListener("keydown", onKeydown);
+    surface?.destroy();
+    closeOverlay(document, overlayId);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-popover.js
+var ui_popover_exports = {};
+__export(ui_popover_exports, {
+  default: () => controller15
+});
+function controller15(host) {
+  const element = host.element;
+  const document = element.ownerDocument;
+  const overlayId = `ui-popover-${Math.random().toString(36).slice(2, 11)}`;
+  let anchor = null;
+  let surface = null;
+  let lastFor;
+  let lastPlacement;
+  let lastOpen;
+  host.state.internalOpen = host.state.open === void 0 ? Boolean(host.state.defaultOpen) : Boolean(host.state.open);
+  const close = (reason, trigger) => {
+    if (host.state.open === void 0) host.state.internalOpen = false;
+    host.dispatch("close", { open: false, reason, trigger });
+  };
+  const setup = () => {
+    const nextFor = String(host.state.for ?? "");
+    const nextPlacement = String(host.state.placement ?? "bottom-start");
+    if (surface && nextFor === lastFor && nextPlacement === lastPlacement) return;
+    lastFor = nextFor;
+    lastPlacement = nextPlacement;
+    surface?.destroy();
+    anchor = nextFor ? document.getElementById(nextFor) : null;
+    surface = anchor ? createAnchoredSurface(element, { anchor, placement: nextPlacement }) : null;
+  };
+  const apply = () => {
+    if (host.state.open !== void 0) host.state.internalOpen = Boolean(host.state.open);
+    setup();
+    const open = Boolean(host.state.internalOpen);
+    if (open) {
+      surface?.show();
+      openOverlay({ id: overlayId, modal: false, element, relatedElements: anchor ? [anchor] : [], dismissible: true, requestClose: close });
+    } else {
+      surface?.hide();
+      closeOverlay(document, overlayId);
+    }
+    if (lastOpen !== void 0 && lastOpen !== open) {
+      host.dispatch(open ? "open" : "close", { open, reason: "programmatic", trigger: "programmatic" });
+    }
+    lastOpen = open;
+  };
+  const onKeydown = (event) => {
+    if (event.key === "Escape") requestTopOverlayClose(document, "escape", "keyboard");
+  };
+  element.addEventListener("keydown", onKeydown);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    element.removeEventListener("keydown", onKeydown);
+    surface?.destroy();
+    closeOverlay(document, overlayId);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-radio-group.js
+var ui_radio_group_exports = {};
+__export(ui_radio_group_exports, {
+  default: () => controller16
+});
+function triggerFor5(event) {
+  if (event instanceof KeyboardEvent) return "keyboard";
+  if (event instanceof MouseEvent || event instanceof PointerEvent) return "pointer";
+  return "programmatic";
+}
+function controller16(host) {
+  const element = host.element;
+  const groupName = String(host.state.name || `ui-radio-group-${Math.random().toString(36).slice(2, 9)}`);
+  const radios = () => Array.from(element.querySelectorAll('[data-component-root~="ui-radio"]'));
+  host.state.internalValue = String(host.state.value ?? "");
+  let lastValue = host.state.value;
+  const apply = () => {
+    if (host.state.value !== lastValue) {
+      lastValue = host.state.value;
+      host.state.internalValue = String(host.state.value ?? "");
+    }
+    const disabled3 = Boolean(host.state.disabled);
+    const current = String(host.state.internalValue ?? "");
+    const items = radios();
+    const selectedIndex = items.findIndex((radio) => (radio.getAttribute("data-value") ?? radio.getAttribute("value") ?? "") === current);
+    items.forEach((radio, index) => {
+      const input = radio.querySelector('input[type="radio"]');
+      const checked = (radio.getAttribute("data-value") ?? radio.getAttribute("value") ?? "") === current;
+      radio.checked = checked;
+      radio.name = groupName;
+      radio.setAttribute("aria-checked", String(checked));
+      radio.disabled = disabled3;
+      if (!input) return;
+      input.checked = checked;
+      input.name = groupName;
+      input.disabled = disabled3;
+      input.tabIndex = index === (selectedIndex >= 0 ? selectedIndex : 0) ? 0 : -1;
+    });
+  };
+  const setValue = (value, trigger) => {
+    const previousValue = String(host.state.internalValue ?? "");
+    host.state.internalValue = value;
+    apply();
+    host.dispatch("select", { value, previousValue, trigger });
+    host.dispatch("change", { checked: true, value, trigger });
+  };
+  const onChange = (event) => {
+    const radio = event.target.closest?.('[data-component-root~="ui-radio"]');
+    const value = radio?.getAttribute("data-value") ?? radio?.getAttribute("value") ?? "";
+    if (value && value !== host.state.internalValue) setValue(value, triggerFor5(event));
+  };
+  const onKeydown = (event) => {
+    const items = radios();
+    if (!items.length) return;
+    const current = items.findIndex((radio2) => (radio2.getAttribute("data-value") ?? radio2.getAttribute("value") ?? "") === host.state.internalValue);
+    const vertical = host.state.orientation === "vertical";
+    const previous = vertical ? "ArrowUp" : "ArrowLeft";
+    const next = vertical ? "ArrowDown" : "ArrowRight";
+    if (event.key !== previous && event.key !== next) return;
+    event.preventDefault();
+    const index = event.key === next ? current < 0 ? 0 : Math.min(current + 1, items.length - 1) : current <= 0 ? items.length - 1 : current - 1;
+    const radio = items[index];
+    const value = radio?.getAttribute("data-value") ?? radio?.getAttribute("value") ?? "";
+    if (value) {
+      setValue(value, "keyboard");
+      radio.querySelector('input[type="radio"]')?.focus();
+    }
+  };
+  element.addEventListener("change", onChange);
+  element.addEventListener("keydown", onKeydown);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    element.removeEventListener("change", onChange);
+    element.removeEventListener("keydown", onKeydown);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-radio.js
+var ui_radio_exports = {};
+__export(ui_radio_exports, {
+  default: () => controller17
+});
+function triggerFor6(event) {
+  if (event instanceof KeyboardEvent) return "keyboard";
+  if (event instanceof MouseEvent || event instanceof PointerEvent) return "pointer";
+  return "programmatic";
+}
+function controller17(host) {
+  const element = host.element;
+  const input = element.querySelector('input[type="radio"]');
+  host.state.internalChecked = host.state.checked === void 0 ? Boolean(host.state.defaultChecked) : Boolean(host.state.checked);
+  const apply = () => {
+    if (host.state.checked !== void 0) host.state.internalChecked = Boolean(host.state.checked);
+    const disabled3 = Boolean(host.state.disabled);
+    element.setAttribute("aria-disabled", String(disabled3));
+    element.setAttribute("aria-checked", String(Boolean(host.state.internalChecked)));
+    if (!input) return;
+    input.checked = Boolean(host.state.internalChecked);
+    input.disabled = disabled3;
+    input.name = String(host.state.name ?? "");
+    input.required = Boolean(host.state.required);
+    input.value = String(host.state.value ?? "on");
+  };
+  const onChange = (event) => {
+    if (!input?.checked) return;
+    if (host.state.checked === void 0) host.state.internalChecked = true;
+    else apply();
+    host.dispatch("change", { checked: true, value: String(host.state.value ?? "on"), trigger: triggerFor6(event) });
+  };
+  input?.addEventListener("change", onChange);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    input?.removeEventListener("change", onChange);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-search-result-row.js
+var ui_search_result_row_exports = {};
+__export(ui_search_result_row_exports, {
+  default: () => controller18,
+  hasContent: () => hasContent
+});
+function hasContent(region) {
+  return [...region.childNodes].some((node) => node.nodeType !== 3 || Boolean(node.textContent?.trim()));
+}
+function controller18(host) {
+  const regions = {
+    hasLeading: host.element.querySelector(".search-result-row__leading"),
+    hasMeta: host.element.querySelector(".search-result-row__meta"),
+    hasExcerpt: host.element.querySelector(".search-result-row__excerpt"),
+    hasTrailing: host.element.querySelector(".search-result-row__trailing")
+  };
+  const syncSlots = () => {
+    for (const [state, region] of Object.entries(regions)) host.state[state] = Boolean(region && hasContent(region));
+  };
+  const observer = new MutationObserver(syncSlots);
+  for (const region of Object.values(regions)) {
+    if (region) observer.observe(region, { childList: true, subtree: true });
+  }
+  syncSlots();
+  return () => observer.disconnect();
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-search-shell.js
+var ui_search_shell_exports = {};
+__export(ui_search_shell_exports, {
+  default: () => controller19,
+  hasContent: () => hasContent2
+});
+function hasContent2(region) {
+  return [...region.childNodes].some((node) => node.nodeType !== 3 || Boolean(node.textContent?.trim()));
+}
+function controller19(host) {
+  const status = host.element.querySelector(".search-shell__status");
+  const footer = host.element.querySelector(".search-shell__footer");
+  const syncSlots = () => {
+    if (status) status.hidden = !hasContent2(status);
+    if (footer) footer.hidden = !hasContent2(footer);
+  };
+  const observer = new MutationObserver(syncSlots);
+  if (status) observer.observe(status, { childList: true, subtree: true });
+  if (footer) observer.observe(footer, { childList: true, subtree: true });
+  syncSlots();
+  return () => observer.disconnect();
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-select.js
+var ui_select_exports = {};
+__export(ui_select_exports, {
+  default: () => controller20
+});
+function triggerFor7(event) {
+  if (event instanceof KeyboardEvent) return "keyboard";
+  if (event instanceof MouseEvent || event instanceof PointerEvent) return "pointer";
+  return "programmatic";
+}
+function controller20(host) {
+  const element = host.element;
+  const select = element.querySelector("select");
+  let initialized = false;
+  if (host.state.value !== void 0) host.state.internalValue = String(host.state.value);
+  const apply = () => {
+    if (!select) return;
+    if (host.state.value !== void 0) {
+      host.state.internalValue = String(host.state.value);
+      select.value = String(host.state.internalValue);
+    } else if (!initialized && host.state.defaultValue !== void 0) {
+      select.value = String(host.state.defaultValue);
+    }
+    initialized = true;
+    select.disabled = Boolean(host.state.disabled);
+    select.required = Boolean(host.state.required);
+    select.setAttribute("aria-invalid", String(Boolean(host.state.invalid)));
+  };
+  const emitValue = (name, event) => {
+    if (!select) return;
+    host.state.internalValue = select.value;
+    host.dispatch(name, { value: select.value, trigger: triggerFor7(event) });
+  };
+  const onInput = (event) => emitValue("input", event);
+  const onChange = (event) => emitValue("change", event);
+  select?.addEventListener("input", onInput);
+  select?.addEventListener("change", onChange);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    select?.removeEventListener("input", onInput);
+    select?.removeEventListener("change", onChange);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-switch.js
+var ui_switch_exports = {};
+__export(ui_switch_exports, {
+  default: () => controller21
+});
+function controller21(host) {
+  const element = host.element;
+  const input = element.querySelector('input[type="checkbox"]');
+  host.state.internalChecked = host.state.checked === void 0 ? Boolean(host.state.defaultChecked) : Boolean(host.state.checked);
+  const apply = () => {
+    if (host.state.checked !== void 0) host.state.internalChecked = Boolean(host.state.checked);
+    const checked = Boolean(host.state.internalChecked);
+    const disabled3 = Boolean(host.state.disabled);
+    element.setAttribute("aria-checked", String(checked));
+    element.setAttribute("aria-disabled", String(disabled3));
+    element.tabIndex = disabled3 ? -1 : 0;
+    if (!input) return;
+    input.checked = checked;
+    input.disabled = disabled3;
+    input.required = Boolean(host.state.required);
+    input.value = String(host.state.value ?? "on");
+  };
+  const toggle = (trigger) => {
+    if (host.state.disabled) return;
+    const checked = !Boolean(host.state.internalChecked);
+    if (host.state.checked === void 0) host.state.internalChecked = checked;
+    apply();
+    host.dispatch("change", { checked, value: String(host.state.value ?? "on"), trigger });
+  };
+  const onKeydown = (event) => {
+    if (event.key !== " " || host.state.disabled) return;
+    event.preventDefault();
+    toggle("keyboard");
+  };
+  const onClick = (event) => {
+    if (event.target !== input) toggle("pointer");
+  };
+  const onChange = () => {
+    if (!input) return;
+    const checked = input.checked;
+    if (host.state.checked === void 0) host.state.internalChecked = checked;
+    host.dispatch("change", { checked, value: String(host.state.value ?? "on"), trigger: "pointer" });
+    if (host.state.checked !== void 0) apply();
+  };
+  element.addEventListener("keydown", onKeydown);
+  element.addEventListener("click", onClick);
+  input?.addEventListener("change", onChange);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    element.removeEventListener("keydown", onKeydown);
+    element.removeEventListener("click", onClick);
+    input?.removeEventListener("change", onChange);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-tabs.js
+var ui_tabs_exports = {};
+__export(ui_tabs_exports, {
+  default: () => controller22
+});
+function triggerFor8(event) {
+  if (event instanceof KeyboardEvent) return "keyboard";
+  if (event instanceof MouseEvent || event instanceof PointerEvent) return "pointer";
+  return "programmatic";
+}
+function controller22(host) {
+  const element = host.element;
+  const tabs = () => Array.from(element.querySelectorAll('[role="tab"]'));
+  host.state.internalValue = host.state.value === void 0 ? String(host.state.defaultValue ?? "") : String(host.state.value);
+  if (host.state.value === void 0 && !host.state.internalValue) {
+    const first = tabs()[0];
+    host.state.internalValue = first?.id || first?.getAttribute("aria-controls") || "";
+  }
+  const apply = () => {
+    if (host.state.value !== void 0) host.state.internalValue = String(host.state.value);
+    for (const tab of tabs()) {
+      const value = tab.id || tab.getAttribute("aria-controls") || "";
+      const selected = value === host.state.internalValue;
+      tab.setAttribute("aria-selected", String(selected));
+      tab.tabIndex = selected ? 0 : -1;
+      const controls = tab.getAttribute("aria-controls");
+      const panel = controls && (element.querySelector(`#${CSS.escape(controls)}`) || element.ownerDocument.getElementById(controls));
+      if (panel) panel.hidden = !selected;
+    }
+  };
+  const select = (tab, trigger) => {
+    const value = tab.id || tab.getAttribute("aria-controls") || "";
+    if (!value) return;
+    const previousValue = String(host.state.internalValue || "") || void 0;
+    if (host.state.value === void 0) host.state.internalValue = value;
+    apply();
+    host.dispatch("select", { value, previousValue, trigger });
+  };
+  const onClick = (event) => {
+    const tab = event.target.closest?.('[role="tab"]');
+    if (tab && element.contains(tab)) select(tab, triggerFor8(event));
+  };
+  const onKeydown = (event) => {
+    const tab = event.target.closest?.('[role="tab"]');
+    if (!tab || !element.contains(tab)) return;
+    const items = tabs();
+    const index = items.indexOf(tab);
+    const vertical = host.state.orientation === "vertical";
+    const previous = vertical ? "ArrowUp" : "ArrowLeft";
+    const next = vertical ? "ArrowDown" : "ArrowRight";
+    if (event.key !== previous && event.key !== next) return;
+    event.preventDefault();
+    const nextIndex = event.key === next ? Math.min(index + 1, items.length - 1) : index <= 0 ? items.length - 1 : index - 1;
+    const nextTab = items[nextIndex];
+    if (nextTab) {
+      select(nextTab, "keyboard");
+      nextTab.focus();
+    }
+  };
+  element.addEventListener("click", onClick);
+  element.addEventListener("keydown", onKeydown);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    element.removeEventListener("click", onClick);
+    element.removeEventListener("keydown", onKeydown);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-textarea.js
+var ui_textarea_exports = {};
+__export(ui_textarea_exports, {
+  default: () => controller23
+});
+function triggerFor9(event) {
+  if (event instanceof KeyboardEvent) return "keyboard";
+  if (event instanceof MouseEvent || event instanceof PointerEvent) return "pointer";
+  return "programmatic";
+}
+function controller23(host) {
+  const element = host.element;
+  const textarea = element.querySelector("textarea");
+  if (host.state.value !== void 0) host.state.internalValue = String(host.state.value);
+  const apply = () => {
+    if (!textarea) return;
+    if (host.state.value !== void 0) {
+      host.state.internalValue = String(host.state.value);
+      textarea.value = String(host.state.internalValue);
+    }
+    textarea.defaultValue = String(host.state.defaultValue ?? "");
+    textarea.disabled = Boolean(host.state.disabled);
+    textarea.readOnly = Boolean(host.state.readOnly);
+    textarea.rows = Number(host.state.rows ?? 4);
+    textarea.setAttribute("aria-invalid", String(Boolean(host.state.invalid)));
+  };
+  const emitValue = (name, event) => {
+    if (!textarea) return;
+    host.state.internalValue = textarea.value;
+    host.dispatch(name, { value: textarea.value, trigger: triggerFor9(event) });
+  };
+  const onInput = (event) => emitValue("input", event);
+  const onChange = (event) => emitValue("change", event);
+  textarea?.addEventListener("input", onInput);
+  textarea?.addEventListener("change", onChange);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    textarea?.removeEventListener("input", onInput);
+    textarea?.removeEventListener("change", onChange);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-toast-region.js
+var ui_toast_region_exports = {};
+__export(ui_toast_region_exports, {
+  default: () => controller24
+});
+function triggerFor10(event) {
+  if (event instanceof KeyboardEvent) return "keyboard";
+  if (event instanceof MouseEvent || event instanceof PointerEvent) return "pointer";
+  return "programmatic";
+}
+function controller24(host) {
+  const element = host.element;
+  let pendingDismiss = null;
+  element.setAttribute("popover", "manual");
+  element.dataset.uiPositioning = "viewport";
+  const toasts = () => Array.from(element.querySelectorAll("[data-ui-toast]"));
+  const setSurfaceOpen = (open) => {
+    element.hidden = !open;
+    if (open && typeof element.showPopover === "function") {
+      try {
+        if (!element.matches(":popover-open")) element.showPopover();
+      } catch {
+      }
+    } else if (!open && typeof element.hidePopover === "function") {
+      try {
+        if (element.matches(":popover-open")) element.hidePopover();
+      } catch {
+      }
+    }
+  };
+  const sync = () => {
+    const open = Boolean(host.state.open) && toasts().length > 0;
+    const wasOpen = Boolean(host.state.internalOpen);
+    const completed = pendingDismiss && !element.contains(pendingDismiss.toast) ? pendingDismiss : null;
+    host.state.internalOpen = open;
+    setSurfaceOpen(open);
+    if (wasOpen && !open && completed) {
+      host.dispatch("close", { open: false, reason: "action", trigger: completed.trigger });
+    }
+    if (completed || !host.state.open) pendingDismiss = null;
+  };
+  const onClick = (event) => {
+    const dismiss = event.target.closest?.("[data-ui-toast-dismiss]");
+    const toast = dismiss?.closest?.("[data-ui-toast]");
+    if (!toast) return;
+    const trigger = triggerFor10(event);
+    pendingDismiss = { toast, trigger };
+    host.dispatch("dismiss", { id: toast.id || "", reason: "action", trigger });
+  };
+  const observer = new MutationObserver(sync);
+  observer.observe(element, { childList: true, subtree: true });
+  element.addEventListener("click", onClick);
+  const stop = host.effect(sync);
+  sync();
+  return () => {
+    stop();
+    observer.disconnect();
+    element.removeEventListener("click", onClick);
+    setSurfaceOpen(false);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-tooltip.js
+var ui_tooltip_exports = {};
+__export(ui_tooltip_exports, {
+  default: () => controller25
+});
+function controller25(host) {
+  const element = host.element;
+  const document = element.ownerDocument;
+  const overlayId = element.id || `ui-tooltip-${Math.random().toString(36).slice(2, 11)}`;
+  if (!element.id) element.id = overlayId;
+  let pinned = false;
+  let focused = false;
+  let trigger = null;
+  let surface = null;
+  let showTimer = null;
+  let hideTimer = null;
+  let lastFor;
+  let lastPlacement;
+  host.state.internalOpen = host.state.open === void 0 ? Boolean(host.state.defaultOpen) : Boolean(host.state.open);
+  const clearShow = () => {
+    if (showTimer !== null) clearTimeout(showTimer);
+    showTimer = null;
+  };
+  const clearHide = () => {
+    if (hideTimer !== null) clearTimeout(hideTimer);
+    hideTimer = null;
+  };
+  const clearTimers = () => {
+    clearShow();
+    clearHide();
+  };
+  const setOpen = (open, input) => {
+    if (Boolean(host.state.internalOpen) === open) return;
+    if (host.state.open === void 0) host.state.internalOpen = open;
+    host.dispatch(open ? "open" : "close", { open, reason: "action", trigger: input });
+  };
+  const onClick = (event) => {
+    if (!host.state.toggleOnClick) return;
+    clearTimers();
+    pinned = !pinned;
+    setOpen(pinned, event.detail === 0 ? "keyboard" : "pointer");
+  };
+  const onKeydown = (event) => {
+    if (event.key === "Escape") clearTimers();
+  };
+  const onEnter = (event) => {
+    if (event.pointerType === "touch") return;
+    clearHide();
+    if (host.state.internalOpen || showTimer !== null) return;
+    showTimer = setTimeout(() => {
+      showTimer = null;
+      setOpen(true, "pointer");
+    }, Math.max(0, Number(host.state.showDelay ?? 500)));
+  };
+  const onLeave = () => {
+    clearShow();
+    if (focused || pinned || !host.state.internalOpen || hideTimer !== null) return;
+    hideTimer = setTimeout(() => {
+      hideTimer = null;
+      setOpen(false, "pointer");
+    }, Math.max(0, Number(host.state.hideDelay ?? 100)));
+  };
+  const onFocusin = () => {
+    focused = true;
+    clearTimers();
+    setOpen(true, "keyboard");
+  };
+  const onFocusout = (event) => {
+    if (event.relatedTarget && element.contains(event.relatedTarget)) return;
+    focused = false;
+    pinned = false;
+    clearTimers();
+    setOpen(false, "keyboard");
+  };
+  const detach = () => {
+    if (!trigger) return;
+    const ids = (trigger.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((id2) => id2 && id2 !== element.id);
+    if (ids.length) trigger.setAttribute("aria-describedby", ids.join(" "));
+    else trigger.removeAttribute("aria-describedby");
+    trigger.removeEventListener("click", onClick);
+    trigger.removeEventListener("keydown", onKeydown);
+    trigger.removeEventListener("pointerenter", onEnter);
+    trigger.removeEventListener("pointerleave", onLeave);
+    trigger.removeEventListener("focusin", onFocusin);
+    trigger.removeEventListener("focusout", onFocusout);
+  };
+  const attach = () => {
+    if (!trigger) return;
+    const ids = new Set((trigger.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean));
+    ids.add(element.id);
+    trigger.setAttribute("aria-describedby", [...ids].join(" "));
+    trigger.addEventListener("click", onClick);
+    trigger.addEventListener("keydown", onKeydown);
+    trigger.addEventListener("pointerenter", onEnter);
+    trigger.addEventListener("pointerleave", onLeave);
+    trigger.addEventListener("focusin", onFocusin);
+    trigger.addEventListener("focusout", onFocusout);
+  };
+  const setup = () => {
+    const nextFor = String(host.state.for ?? "");
+    const nextPlacement = String(host.state.placement ?? "top-start");
+    if (surface && nextFor === lastFor && nextPlacement === lastPlacement) return;
+    lastFor = nextFor;
+    lastPlacement = nextPlacement;
+    const nextTrigger = nextFor ? document.getElementById(nextFor) : element.previousElementSibling;
+    if (nextTrigger !== trigger) {
+      detach();
+      trigger = nextTrigger;
+      attach();
+    }
+    surface?.destroy();
+    surface = createAnchoredSurface(element, { anchor: trigger, placement: nextPlacement });
+  };
+  const close = (reason, input) => {
+    if (reason !== "escape" && !(reason === "light-dismiss" && host.state.toggleOnClick)) return;
+    pinned = false;
+    clearTimers();
+    if (host.state.open === void 0) host.state.internalOpen = false;
+    host.dispatch("close", { open: false, reason, trigger: input });
+  };
+  const apply = () => {
+    if (host.state.open !== void 0) host.state.internalOpen = Boolean(host.state.open);
+    setup();
+    const open = Boolean(host.state.internalOpen);
+    element.hidden = !open;
+    if (open) {
+      surface?.show();
+      openOverlay({ id: overlayId, modal: false, element, relatedElements: trigger ? [trigger] : [], dismissible: true, requestClose: close });
+    } else {
+      surface?.hide();
+      closeOverlay(document, overlayId);
+    }
+  };
+  const onSurfaceEnter = () => clearHide();
+  element.addEventListener("pointerenter", onSurfaceEnter);
+  element.addEventListener("pointerleave", onLeave);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    clearTimers();
+    detach();
+    surface?.destroy();
+    element.removeEventListener("pointerenter", onSurfaceEnter);
+    element.removeEventListener("pointerleave", onLeave);
+    closeOverlay(document, overlayId);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-top-bar.js
+var ui_top_bar_exports = {};
+__export(ui_top_bar_exports, {
+  default: () => controller26
+});
+function hasContent3(region) {
+  return [...region.childNodes].some((node) => node.nodeType !== 3 || Boolean(node.textContent?.trim()));
+}
+function controller26(host) {
+  const regions = ["leading", "search", "actions"].map((name) => host.element.querySelector(`.top-bar__${name}`)).filter(Boolean);
+  const syncSlots = () => {
+    for (const region of regions) region.hidden = !hasContent3(region);
+  };
+  const observer = new MutationObserver(syncSlots);
+  for (const region of regions) observer.observe(region, { childList: true, subtree: true });
+  syncSlots();
+  return () => observer.disconnect();
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-tree-item.js
+var ui_tree_item_exports = {};
+__export(ui_tree_item_exports, {
+  default: () => controller27
+});
+function triggerFor11(event) {
+  if (typeof KeyboardEvent !== "undefined" && event instanceof KeyboardEvent) return "keyboard";
+  if (typeof MouseEvent !== "undefined" && event instanceof MouseEvent || typeof PointerEvent !== "undefined" && event instanceof PointerEvent || ["click", "pointerdown", "pointerup"].includes(event.type)) return "pointer";
+  return "programmatic";
+}
+function parentItem(element) {
+  return element.parentElement?.closest('[data-component-root~="ui-tree-item"]') ?? null;
+}
+function controller27(host) {
+  const element = host.element;
+  const row = element.querySelector('[part="row"]');
+  const disclosure = element.querySelector('[part="disclosure"]');
+  const children = element.querySelector('[part="children"]');
+  const dragHandle = element.querySelector('[part="drag-handle"]');
+  host.state.internalExpanded = host.state.expanded === void 0 ? Boolean(host.state.defaultExpanded) : Boolean(host.state.expanded);
+  const expanded = () => host.state.expanded === void 0 ? Boolean(host.state.internalExpanded) : Boolean(host.state.expanded);
+  const updateLevel = () => {
+    const tree = element.closest('[data-component-root~="ui-tree"]');
+    let ancestor = parentItem(element);
+    let level = 1;
+    while (ancestor && tree?.contains(ancestor)) {
+      level += 1;
+      ancestor = parentItem(ancestor);
+    }
+    host.state.structuralLevel = level;
+  };
+  const apply = () => {
+    if (host.state.expanded !== void 0) host.state.internalExpanded = Boolean(host.state.expanded);
+    const container = Boolean(host.state.container);
+    const disabled3 = Boolean(host.state.disabled);
+    const open = container && expanded();
+    const level = Number(host.state.structuralLevel ?? 1);
+    element.setAttribute("role", "treeitem");
+    if (host.state.label) element.setAttribute("aria-label", String(host.state.label));
+    else element.removeAttribute("aria-label");
+    element.setAttribute("aria-level", String(level));
+    element.setAttribute("aria-selected", String(Boolean(host.state.selected)));
+    element.setAttribute("aria-disabled", String(disabled3));
+    if (container) element.setAttribute("aria-expanded", String(open));
+    else element.removeAttribute("aria-expanded");
+    element.tabIndex = disabled3 || !host.state.tabStop ? -1 : 0;
+    element.style.setProperty("--ui-tree-item-depth", String(level - 1));
+    element.style.marginInlineStart = level > 1 ? "var(--ui-tree-indent, 16px)" : "0px";
+    if (children) children.hidden = !open;
+    if (disclosure) {
+      disclosure.disabled = disabled3;
+      disclosure.setAttribute("aria-expanded", String(open));
+      disclosure.setAttribute("aria-label", `${open ? "Collapse" : "Expand"} ${host.state.label || "item"}`);
+    }
+    disclosure?.querySelector(".disclosure-icon")?.classList.toggle("disclosure-icon--expanded", open);
+    if (dragHandle) {
+      const label = `Drag ${host.state.label || "item"} to reorder`;
+      dragHandle.setAttribute("aria-label", label);
+      dragHandle.title = label;
+      dragHandle.draggable = Boolean(host.state.sortable) && !disabled3;
+    }
+  };
+  const setExpanded = (open, trigger) => {
+    if (!host.state.container || host.state.disabled || expanded() === open) return;
+    if (host.state.expanded === void 0) host.state.internalExpanded = open;
+    apply();
+    host.dispatch("expand", { id: String(host.state.itemId ?? ""), expanded: open, trigger });
+    element.dispatchEvent(new CustomEvent("ui-tree-expansion-change", { bubbles: true }));
+  };
+  const onAutoExpand = () => setExpanded(true, "pointer");
+  const onStructure = () => {
+    updateLevel();
+    apply();
+  };
+  const onRoving = (event) => {
+    host.state.tabStop = Boolean(event.detail?.active) && !host.state.disabled;
+  };
+  const onExpansionRequest = (event) => {
+    if (typeof event.detail?.expanded === "boolean") setExpanded(event.detail.expanded, event.detail.trigger ?? "keyboard");
+  };
+  const onDisclosureClick = (event) => {
+    event.stopPropagation();
+    setExpanded(!expanded(), triggerFor11(event));
+  };
+  const onDisclosureKeydown = (event) => {
+    if (!["ArrowRight", "ArrowLeft"].includes(event.key)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setExpanded(event.key === "ArrowRight", "keyboard");
+  };
+  const onRowClick = (event) => {
+    if (!host.state.container || host.state.disabled) return;
+    const interactive = event.composedPath().some((node) => node instanceof HTMLElement && (node.matches('a, button, input, select, textarea, [role="button"], [role="link"]') || node.getAttribute("slot") === "actions"));
+    if (!interactive) setExpanded(!expanded(), triggerFor11(event));
+  };
+  element.addEventListener("ui-tree-auto-expand", onAutoExpand);
+  element.addEventListener("ui-tree-structure-sync", onStructure);
+  element.addEventListener("ui-tree-roving-tab-stop", onRoving);
+  element.addEventListener("ui-tree-request-expanded", onExpansionRequest);
+  disclosure?.addEventListener("click", onDisclosureClick);
+  disclosure?.addEventListener("keydown", onDisclosureKeydown);
+  row?.addEventListener("click", onRowClick);
+  updateLevel();
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    element.removeEventListener("ui-tree-auto-expand", onAutoExpand);
+    element.removeEventListener("ui-tree-structure-sync", onStructure);
+    element.removeEventListener("ui-tree-roving-tab-stop", onRoving);
+    element.removeEventListener("ui-tree-request-expanded", onExpansionRequest);
+    disclosure?.removeEventListener("click", onDisclosureClick);
+    disclosure?.removeEventListener("keydown", onDisclosureKeydown);
+    row?.removeEventListener("click", onRowClick);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/core/components/controllers/ui-tree.js
+var ui_tree_exports = {};
+__export(ui_tree_exports, {
+  default: () => controller28
+});
+function classify(rect, y, acceptsChildren) {
+  const progress = rect.height > 0 ? Math.min(1, Math.max(0, (y - rect.top) / rect.height)) : 0.5;
+  if (!acceptsChildren) return progress < 0.5 ? "before" : "after";
+  if (progress < 0.25) return "before";
+  if (progress > 0.75) return "after";
+  return "inside";
+}
+function itemId(item) {
+  return item.dataset.itemId || item.getAttribute("item-id") || "";
+}
+function parentItem2(item, tree) {
+  const parent = item.parentElement?.closest('[data-component-root~="ui-tree-item"]') ?? null;
+  return parent && tree.contains(parent) ? parent : null;
+}
+function controller28(host) {
+  const element = host.element;
+  const document = element.ownerDocument;
+  const itemSelector = '[data-component-root~="ui-tree-item"]';
+  let source = null;
+  let target = null;
+  let position = null;
+  let rejection = null;
+  let rejectedTarget = null;
+  let rejectedPosition = null;
+  let tabStop = null;
+  let hoverTimer = null;
+  let hoverKey = null;
+  const allItems = () => Array.from(element.querySelectorAll(itemSelector));
+  const visibleItems = () => allItems().filter((item) => item.getClientRects().length > 0 && item.getAttribute("aria-disabled") !== "true");
+  const rowFor = (item) => item.querySelector('[part="row"]');
+  const acceptsChildren = (item) => item.getAttribute("data-container") === "true" && item.getAttribute("aria-disabled") !== "true";
+  const metadata = (item) => ({
+    type: item.dataset.dragType || item.getAttribute("drag-type") || "item",
+    scope: item.dataset.dropScope || item.getAttribute("drop-scope") || "",
+    accepts: (item.dataset.accepts || item.getAttribute("accepts") || "").split(",").map((value) => value.trim()).filter(Boolean)
+  });
+  const depth = (item) => Number(item.dataset.dropDepth ?? item.getAttribute("drop-depth")) || Number(item.getAttribute("aria-level")) || 1;
+  const subtreeDepth = (item) => {
+    const override = item.dataset.subtreeDepth ?? item.getAttribute("subtree-depth");
+    if (override != null) return Math.max(0, Math.floor(Number(override)));
+    return Array.from(item.querySelectorAll(itemSelector)).reduce((deepest, descendant) => {
+      let nesting = 0;
+      let ancestor = parentItem2(descendant, element);
+      while (ancestor && ancestor !== item) {
+        nesting += 1;
+        ancestor = parentItem2(ancestor, element);
+      }
+      return ancestor === item ? Math.max(deepest, nesting + 1) : deepest;
+    }, 0);
+  };
+  const rejected = (from, to, nextPosition) => {
+    if (from.contains(to)) return { reason: "descendant" };
+    const fromMeta = metadata(from);
+    const toMeta = metadata(to);
+    if (nextPosition === "inside") {
+      if (!acceptsChildren(to) || toMeta.accepts.length && !toMeta.accepts.includes(fromMeta.type)) return { reason: "incompatible" };
+    } else if (fromMeta.type !== toMeta.type) return { reason: "incompatible" };
+    const maxDepth = Math.max(0, Math.floor(Number(host.state.maxDepth ?? 0)));
+    if (maxDepth > 0) {
+      const resultingDepth = Math.max(0, Math.floor(depth(to))) + (nextPosition === "inside" ? 1 : 0) + subtreeDepth(from);
+      if (resultingDepth > maxDepth) return { reason: "max-depth", maxDepth, resultingDepth };
+    }
+    return null;
+  };
+  const cancelHover = () => {
+    if (hoverTimer !== null) clearTimeout(hoverTimer);
+    hoverTimer = null;
+    hoverKey = null;
+  };
+  const expandTarget = (id2) => {
+    const item = allItems().find((candidate) => itemId(candidate) === id2);
+    if (item?.getAttribute("aria-expanded") === "false") item.dispatchEvent(new CustomEvent("ui-tree-auto-expand"));
+  };
+  const scheduleHover = (id2) => {
+    if (hoverKey === id2 && hoverTimer !== null) return;
+    cancelHover();
+    hoverKey = id2;
+    hoverTimer = setTimeout(() => {
+      const key = hoverKey;
+      hoverTimer = null;
+      hoverKey = null;
+      if (key) expandTarget(key);
+    }, Math.max(0, Number(host.state.hoverExpandDelay ?? 700)));
+  };
+  const clearTarget = () => {
+    target?.removeAttribute("data-drop-position");
+    target = null;
+    position = null;
+    cancelHover();
+  };
+  const finish = () => {
+    source?.removeAttribute("data-dragging");
+    source = null;
+    clearTarget();
+    rejection = null;
+    rejectedTarget = null;
+    rejectedPosition = null;
+  };
+  const itemFromEvent = (event) => event.composedPath().find((node) => node instanceof HTMLElement && node.matches?.(itemSelector)) ?? null;
+  const itemAtPoint = (x, y) => document.elementFromPoint(x, y)?.closest?.(itemSelector) ?? null;
+  const updateTarget = (nextTarget, y, transfer) => {
+    if (!source || !nextTarget || nextTarget === source) {
+      clearTarget();
+      rejection = rejectedTarget = rejectedPosition = null;
+      return false;
+    }
+    const row = rowFor(nextTarget);
+    if (!row) return false;
+    const nextPosition = classify(row.getBoundingClientRect(), y, acceptsChildren(nextTarget));
+    const nextRejection = rejected(source, nextTarget, nextPosition);
+    if (nextRejection) {
+      if (transfer) transfer.dropEffect = "none";
+      clearTarget();
+      if (nextRejection.reason === "max-depth") {
+        rejection = nextRejection;
+        rejectedTarget = nextTarget;
+        rejectedPosition = nextPosition;
+      } else rejection = rejectedTarget = rejectedPosition = null;
+      return false;
+    }
+    rejection = rejectedTarget = rejectedPosition = null;
+    if (transfer) transfer.dropEffect = "move";
+    if (target !== nextTarget || position !== nextPosition) {
+      clearTarget();
+      target = nextTarget;
+      position = nextPosition;
+      target.setAttribute("data-drop-position", position);
+    }
+    if (position === "inside" && target.getAttribute("aria-expanded") === "false") scheduleHover(itemId(target));
+    else cancelHover();
+    return true;
+  };
+  const dispatchReorder = (from, to, nextPosition) => {
+    const sourceId = itemId(from);
+    const targetId = itemId(to);
+    if (!sourceId || !targetId) return;
+    if (nextPosition === "inside") expandTarget(targetId);
+    const fromMeta = metadata(from);
+    const toMeta = metadata(to);
+    host.dispatch("reorder", { sourceId, targetId, position: nextPosition, sourceType: fromMeta.type, targetType: toMeta.type, sourceScope: fromMeta.scope, targetScope: toMeta.scope, trigger: "pointer" });
+  };
+  const dispatchRejected = (from, to, nextPosition, detail) => {
+    const sourceId = itemId(from);
+    const targetId = itemId(to);
+    if (sourceId && targetId) host.dispatch("reorder-rejected", { sourceId, targetId, position: nextPosition, reason: "max-depth", maxDepth: detail.maxDepth, resultingDepth: detail.resultingDepth, trigger: "pointer" });
+  };
+  const onDragStart = (event) => {
+    const item = itemFromEvent(event);
+    const fromHandle = event.composedPath().some((node) => node instanceof HTMLElement && node.getAttribute("part") === "drag-handle");
+    if (!item || item.getAttribute("data-sortable") !== "true" || item.getAttribute("aria-disabled") === "true" || !fromHandle) {
+      event.preventDefault();
+      return;
+    }
+    const id2 = itemId(item);
+    const row = rowFor(item);
+    if (!id2 || !row) {
+      event.preventDefault();
+      return;
+    }
+    source = item;
+    item.setAttribute("data-dragging", "true");
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", id2);
+      if (typeof event.dataTransfer.setDragImage === "function") event.dataTransfer.setDragImage(row, 16, Math.max(0, row.getBoundingClientRect().height / 2));
+    }
+  };
+  const onDrag = (event) => {
+    if (!source || !event.clientX && !event.clientY) return;
+    const item = itemAtPoint(event.clientX, event.clientY);
+    if (item) updateTarget(item, event.clientY, event.dataTransfer);
+  };
+  const onDragOver = (event) => {
+    if (source && updateTarget(itemFromEvent(event), event.clientY, event.dataTransfer)) event.preventDefault();
+  };
+  const onDragLeave = (event) => {
+    if (event.relatedTarget && element.contains(event.relatedTarget)) return;
+    if (!itemAtPoint(event.clientX, event.clientY)) {
+      clearTarget();
+      rejection = rejectedTarget = rejectedPosition = null;
+    }
+  };
+  const onDrop = (event) => {
+    if (!source || !target || !position) return;
+    event.preventDefault();
+    dispatchReorder(source, target, position);
+    finish();
+  };
+  const onDragEnd = (event) => {
+    if (source && rejectedTarget && rejectedPosition && rejection) dispatchRejected(source, rejectedTarget, rejectedPosition, rejection);
+    else if (source) {
+      const item = itemAtPoint(event.clientX, event.clientY);
+      const row = item && item !== source ? rowFor(item) : null;
+      if (item && row) {
+        const nextPosition = classify(row.getBoundingClientRect(), event.clientY, acceptsChildren(item));
+        const nextRejection = rejected(source, item, nextPosition);
+        if (!nextRejection) dispatchReorder(source, item, nextPosition);
+        else if (nextRejection.reason === "max-depth") dispatchRejected(source, item, nextPosition, nextRejection);
+      }
+    }
+    finish();
+  };
+  const syncTabStop = (preferred = null) => {
+    const items = visibleItems();
+    const next = preferred && items.includes(preferred) ? preferred : tabStop && items.includes(tabStop) ? tabStop : items[0] ?? null;
+    tabStop = next;
+    for (const item of items) item.dispatchEvent(new CustomEvent("ui-tree-roving-tab-stop", { detail: { active: item === next } }));
+  };
+  const syncStructure = () => {
+    for (const item of allItems()) item.dispatchEvent(new CustomEvent("ui-tree-structure-sync"));
+    syncTabStop();
+  };
+  const interactive = (event) => {
+    for (const node of event.composedPath()) {
+      if (node instanceof HTMLElement && node.matches?.(itemSelector)) break;
+      if (node instanceof HTMLElement && node.matches('a, button, input, select, textarea, [role="button"], [role="link"]')) return true;
+    }
+    return false;
+  };
+  const focusItem = (item) => {
+    syncTabStop(item);
+    item.focus();
+  };
+  const onFocusin = (event) => {
+    if (!interactive(event)) {
+      const item = itemFromEvent(event);
+      if (item) syncTabStop(item);
+    }
+  };
+  const onExpansion = () => requestAnimationFrame(() => syncTabStop());
+  const onKeydown = (event) => {
+    if (interactive(event)) return;
+    const current = itemFromEvent(event);
+    if (!current) return;
+    const items = visibleItems();
+    const index = items.indexOf(current);
+    if (index < 0) return;
+    const next = event.key === "ArrowDown" ? items[index + 1] : event.key === "ArrowUp" ? items[index - 1] : event.key === "Home" ? items[0] : event.key === "End" ? items.at(-1) : null;
+    if (next) {
+      event.preventDefault();
+      focusItem(next);
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      if (current.getAttribute("aria-expanded") === "true") {
+        event.preventDefault();
+        current.dispatchEvent(new CustomEvent("ui-tree-request-expanded", { detail: { expanded: false, trigger: "keyboard" } }));
+      } else {
+        const parent = parentItem2(current, element);
+        if (parent) {
+          event.preventDefault();
+          focusItem(parent);
+        }
+      }
+    } else if (event.key === "ArrowRight") {
+      if (current.getAttribute("aria-expanded") === "false") {
+        event.preventDefault();
+        current.dispatchEvent(new CustomEvent("ui-tree-request-expanded", { detail: { expanded: true, trigger: "keyboard" } }));
+      } else if (current.getAttribute("aria-expanded") === "true") {
+        const child = items.find((item) => parentItem2(item, element) === current);
+        if (child) {
+          event.preventDefault();
+          focusItem(child);
+        }
+      }
+    }
+  };
+  const listeners = { dragstart: onDragStart, drag: onDrag, dragenter: onDragOver, dragover: onDragOver, dragleave: onDragLeave, drop: onDrop, dragend: onDragEnd, keydown: onKeydown, focusin: onFocusin, "ui-tree-expansion-change": onExpansion };
+  for (const [name, listener] of Object.entries(listeners)) element.addEventListener(name, listener);
+  const observer = new MutationObserver(syncStructure);
+  observer.observe(element, { childList: true, subtree: true });
+  const stop = host.effect(() => element.setAttribute("aria-label", String(host.state.label || "Tree")));
+  syncStructure();
+  return () => {
+    stop();
+    observer.disconnect();
+    cancelHover();
+    for (const [name, listener] of Object.entries(listeners)) element.removeEventListener(name, listener);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/adoption/core/registry.js
+var records = [
+  { tag: "ui-affordance-scope", source: `<template component="ui-affordance-scope" controller="./controllers/ui-affordance-scope.js" status="early" summary="Migrated Looma ui-affordance-scope component.">
+  <defs>
+    <prop name="nearRadius" type="number" default="16">nearRadius token.</prop>
+  </defs>
+  <span><slot></slot></span>
+  <style>:scope {
+  display: contents;
+  --ui-affordance-scope-engaged: 0;
+}
+
+:scope[data-ui-interaction='engaged'] {
+  --ui-affordance-scope-engaged: 1;
+}
+</style>
+</template>
+`, controller: ui_affordance_scope_exports },
+  { tag: "ui-avatar-group", source: '<template component="ui-avatar-group" controller="./controllers/ui-avatar-group.js" status="early" summary="Migrated Looma ui-avatar-group component.">\n  <defs>\n    <prop name="max" type="number" default="5">max token.</prop>\n    <prop name="label" type="string" default="People">label token.</prop>\n    <state name="overflowCount" :value="0"></state>\n  </defs>\n  <div role="group" :aria-label="label"><slot></slot></div>\n  <style>:scope {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  gap: 0;\n}\n\n:slotted(*) {\n  margin-inline-end: -0.5rem;\n  flex-shrink: 0;\n}\n\n:slotted(*:last-of-type) {\n  margin-inline-end: 0;\n}\n\n.overflow {\n  margin-inline-end: -0.5rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 2.5rem;\n  block-size: 2.5rem;\n  border-radius: 999px;\n  border: 1px solid var(--ui-border-default);\n  background: var(--ui-surface-muted);\n  color: var(--ui-text-secondary);\n  font: inherit;\n  font-size: 0.75rem;\n  font-weight: 600;\n  flex-shrink: 0;\n}\n</style>\n</template>\n', controller: ui_avatar_group_exports },
+  { tag: "ui-avatar", source: '<template component="ui-avatar" controller="./controllers/ui-avatar.js" status="early" summary="Migrated Looma ui-avatar component.">\n  <defs>\n    <prop name="src" type="string" default="">src token.</prop>\n    <prop name="alt" type="string" default="">alt token.</prop>\n    <prop name="name" type="string" default="">name token.</prop>\n    <prop name="fallback" type="string" default="">fallback token.</prop>\n    <state name="hasImage" :value="false"></state>\n  </defs>\n  <span role="img" :data-has-image="hasImage"><div class="avatar"><img :src="src" :hidden="not hasImage"></img><span class="fallback"></span></div></span>\n  <style>:scope {\n  display: inline-flex;\n}\n\n.avatar {\n  display: inline-grid;\n  place-items: center;\n  overflow: hidden;\n  inline-size: 2.5rem;\n  block-size: 2.5rem;\n  border-radius: 999px;\n  border: 1px solid var(--ui-border-default);\n  background: var(--ui-surface-muted);\n  color: var(--ui-text-secondary);\n  font: inherit;\n  font-size: 0.875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.avatar img {\n  grid-area: 1 / 1;\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n}\n\n.avatar .fallback {\n  grid-area: 1 / 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 100%;\n  block-size: 100%;\n}\n</style>\n</template>\n', controller: ui_avatar_exports },
+  { tag: "ui-badge", source: `<template component="ui-badge" status="early" summary="Migrated Looma ui-badge component.">
+  <defs>
+    <prop name="variant" type="string">variant token.</prop>
+    <prop name="tone" type="string">tone token.</prop>
+  </defs>
+  <span :data-variant="variant" :data-tone="tone"><span class="badge__surface"><slot></slot></span></span>
+  <style>:scope {
+  --ui-badge-surface: var(--ui-surface-muted);
+  --ui-badge-text: var(--ui-text-secondary);
+  --ui-badge-border: var(--ui-border-default);
+  --ui-badge-font-size: var(--ui-font-size-xs);
+  --ui-badge-font-weight: var(--ui-font-normal);
+  --ui-badge-line-height: var(--ui-line-height-tight);
+  --ui-badge-padding-block: var(--ui-space-0-5);
+  --ui-badge-padding-inline: var(--ui-space-2);
+
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.badge__surface {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  padding: var(--ui-badge-padding-block) var(--ui-badge-padding-inline);
+  border: 1px solid var(--ui-badge-border);
+  border-radius: var(--ui-radius-round);
+  background: var(--ui-badge-surface);
+  color: var(--ui-badge-text);
+  font-family: var(--ui-font-family-sans);
+  font-size: var(--ui-badge-font-size);
+  font-weight: var(--ui-badge-font-weight);
+  line-height: var(--ui-badge-line-height);
+  white-space: nowrap;
+}
+
+:scope[data-tone='accent'] .badge__surface {
+  --ui-badge-surface: var(--ui-accent-solid);
+  --ui-badge-border: var(--ui-accent-solid);
+  --ui-badge-text: var(--ui-text-on-accent);
+}
+
+:scope[data-tone='danger'] .badge__surface {
+  --ui-badge-surface: var(--ui-danger-solid);
+  --ui-badge-border: var(--ui-danger-solid);
+  --ui-badge-text: var(--ui-text-on-accent);
+}
+
+:scope[data-tone='success'] .badge__surface {
+  --ui-badge-surface: var(--ui-success-solid);
+  --ui-badge-border: var(--ui-success-solid);
+  --ui-badge-text: var(--ui-text-on-accent);
+}
+
+:scope[data-tone='warning'] .badge__surface {
+  --ui-badge-surface: var(--ui-warning-solid);
+  --ui-badge-border: var(--ui-warning-solid);
+  --ui-badge-text: var(--ui-text-primary);
+}
+
+:scope[data-tone='info'] .badge__surface {
+  --ui-badge-surface: var(--ui-info-solid);
+  --ui-badge-border: var(--ui-info-solid);
+  --ui-badge-text: var(--ui-text-on-accent);
+}
+
+:scope[data-variant='subtle'][data-tone='accent'] .badge__surface {
+  --ui-badge-surface: var(--ui-accent-soft);
+  --ui-badge-border: var(--ui-accent-soft);
+  --ui-badge-text: var(--ui-accent-solid);
+}
+
+:scope[data-variant='subtle'][data-tone='danger'] .badge__surface {
+  --ui-badge-surface: var(--ui-danger-soft);
+  --ui-badge-border: var(--ui-danger-soft);
+  --ui-badge-text: var(--ui-danger-solid);
+}
+
+:scope[data-variant='subtle'][data-tone='success'] .badge__surface {
+  --ui-badge-surface: var(--ui-success-soft);
+  --ui-badge-border: var(--ui-success-soft);
+  --ui-badge-text: var(--ui-success-solid);
+}
+
+:scope[data-variant='subtle'][data-tone='warning'] .badge__surface {
+  --ui-badge-surface: var(--ui-warning-soft);
+  --ui-badge-border: var(--ui-warning-soft);
+  --ui-badge-text: var(--ui-warning-solid);
+}
+
+:scope[data-variant='subtle'][data-tone='info'] .badge__surface {
+  --ui-badge-surface: var(--ui-info-soft);
+  --ui-badge-border: var(--ui-info-soft);
+  --ui-badge-text: var(--ui-info-solid);
+}
+</style>
+</template>
+`, controller: void 0 },
+  { tag: "ui-button", source: `<template component="ui-button" controller="./controllers/ui-button.js" status="early" summary="Migrated Looma ui-button component.">
+  <defs>
+    <prop name="variant" type="string" default="outline">variant token.</prop>
+    <prop name="size" type="string">size token.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+  </defs>
+  <span :data-size="size" :data-variant="variant"><slot></slot></span>
+  <style>:scope {
+  display: inline-flex;
+  vertical-align: middle;
+  color: var(--ui-action-secondary-text, var(--ui-text-primary));
+}
+
+:scope[data-variant='solid'] {
+  color: var(--ui-action-primary-text, var(--ui-text-on-accent));
+}
+
+:scope[data-variant='outline'] :slotted(button),
+:slotted(button) {
+  appearance: none;
+  min-block-size: var(--ui-button-min-block-size, 2.5rem);
+  border: 1px solid var(--ui-control-border, var(--ui-border-default));
+  border-radius: var(--ui-button-radius, var(--ui-radius-2));
+  background: var(--ui-action-secondary-surface, var(--ui-surface-default));
+  color: inherit;
+  font: inherit;
+  font-weight: var(--ui-font-medium, 500);
+  line-height: var(--ui-line-height-tight);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  cursor: pointer;
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    border-color var(--ui-motion-fast) var(--ui-motion-ease),
+    color var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+    transform var(--ui-motion-fast) var(--ui-motion-ease);
+  margin: 0;
+}
+
+:scope[data-size='sm'] :slotted(button) {
+  padding: var(--ui-space-1) var(--ui-space-2);
+  font-size: 0.875rem;
+}
+
+:scope[data-size='lg'] :slotted(button) {
+  min-block-size: var(--ui-control-min-block-size, 2.75rem);
+  padding: var(--ui-space-3) var(--ui-space-4);
+  font-size: 1rem;
+}
+
+:slotted(button:hover:enabled) {
+  background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
+  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
+}
+
+:slotted(button:active:enabled) {
+  background: var(--ui-surface-subtle);
+}
+
+:scope[data-variant='solid'] :slotted(button) {
+  border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
+  background: var(--ui-action-primary-surface, var(--ui-accent-solid));
+  color: var(--ui-action-primary-text, var(--ui-text-on-accent));
+  box-shadow: var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs));
+}
+
+:scope[data-variant='solid'] :slotted(button:hover:enabled) {
+  background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
+  border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
+  box-shadow: var(--ui-shadow-sm);
+  transform: translateY(-1px);
+}
+
+:scope[data-variant='solid'] :slotted(button:active:enabled) {
+  background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
+  border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
+  box-shadow: none;
+  transform: translateY(0);
+}
+
+:scope[data-variant='destructive'] :slotted(button) {
+  border-color: var(--ui-danger-solid);
+  background: var(--ui-danger-solid);
+  color: var(--ui-text-on-accent);
+  box-shadow: var(--ui-button-destructive-shadow, inset 0 1px rgb(255 255 255 / 0.14), var(--ui-shadow-xs));
+}
+
+:scope[data-variant='destructive'] :slotted(button:hover:enabled) {
+  background: var(--ui-danger-hover);
+  border-color: var(--ui-danger-hover);
+  box-shadow: var(--ui-shadow-sm);
+  transform: translateY(-1px);
+}
+
+:scope[data-variant='destructive'] :slotted(button:active:enabled) {
+  box-shadow: none;
+  transform: translateY(0);
+}
+
+:scope[data-variant='ghost'] :slotted(button) {
+  border-color: transparent;
+  background: transparent;
+}
+
+:scope[data-variant='ghost'] :slotted(button:hover:enabled) {
+  background: var(--ui-surface-muted);
+  border-color: transparent;
+}
+
+:scope[data-variant='ghost'] :slotted(button:active:enabled) {
+  background: var(--ui-surface-subtle);
+  border-color: transparent;
+}
+
+:slotted(button:focus-visible) {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 2px;
+}
+
+:scope[data-disabled='true'],
+:scope[data-disabled='true'] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+:slotted(button:disabled) {
+  cursor: not-allowed;
+}
+</style>
+</template>
+`, controller: ui_button_exports },
+  { tag: "ui-callout", source: `<template component="ui-callout" status="early" summary="Migrated Looma ui-callout component.">
+  <defs>
+    <prop name="tone" type="info | note | warning | success | error" default="info">tone token.</prop>
+  </defs>
+  <div role="note" :data-tone="tone"><div class="callout__surface"><span class="icon" aria-hidden="true"></span><div class="content"><slot></slot></div></div></div>
+  <style>:scope {
+  --ui-callout-surface: var(--ui-info-soft);
+  --ui-callout-text: var(--ui-text-primary);
+  --ui-callout-border: var(--ui-info-solid);
+  --ui-callout-icon: var(--ui-info-solid);
+  --ui-callout-padding-block: var(--ui-space-2);
+  --ui-callout-padding-inline: var(--ui-space-3);
+  --ui-callout-icon-column: 1rem;
+  --ui-callout-gap: var(--ui-space-2);
+  --ui-callout-icon-size: 1rem;
+  --ui-callout-border-width: 1px;
+  --ui-callout-leading-border-width: 4px;
+
+  display: block;
+  max-width: 100%;
+}
+
+.callout__surface {
+  display: grid;
+  grid-template-columns: var(--ui-callout-icon-column) minmax(0, 1fr);
+  gap: var(--ui-callout-gap);
+  align-items: start;
+  padding: var(--ui-callout-padding-block) var(--ui-callout-padding-inline);
+  border: var(--ui-callout-border-width) solid color-mix(in srgb, var(--ui-callout-border) 35%, transparent);
+  border-inline-start: var(--ui-callout-leading-border-width) solid var(--ui-callout-border);
+  border-radius: var(--ui-radius-2);
+  background: var(--ui-callout-surface);
+  color: var(--ui-callout-text);
+  font-family: var(--ui-font-family-sans);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-normal);
+  line-height: var(--ui-line-height-md);
+}
+
+.icon {
+  display: grid;
+  place-items: center;
+  inline-size: var(--ui-callout-icon-column);
+  block-size: var(--ui-callout-icon-column);
+  color: var(--ui-callout-icon);
+}
+
+.icon svg {
+  inline-size: var(--ui-callout-icon-size);
+  block-size: var(--ui-callout-icon-size);
+}
+
+.content {
+  min-inline-size: 0;
+}
+
+:scope[data-tone='note'] {
+  --ui-callout-surface: var(--ui-surface-muted);
+  --ui-callout-border: var(--ui-border-strong);
+  --ui-callout-icon: var(--ui-text-secondary);
+}
+
+:scope[data-tone='warning'] {
+  --ui-callout-surface: var(--ui-warning-soft);
+  --ui-callout-border: var(--ui-warning-solid);
+  --ui-callout-icon: var(--ui-warning-solid);
+}
+
+:scope[data-tone='success'] {
+  --ui-callout-surface: var(--ui-success-soft);
+  --ui-callout-border: var(--ui-success-solid);
+  --ui-callout-icon: var(--ui-success-solid);
+}
+
+:scope[data-tone='error'] {
+  --ui-callout-surface: var(--ui-danger-soft);
+  --ui-callout-border: var(--ui-danger-solid);
+  --ui-callout-icon: var(--ui-danger-solid);
+}
+</style>
+</template>
+`, controller: void 0 },
+  { tag: "ui-checkbox", source: `<template component="ui-checkbox" controller="./controllers/ui-checkbox.js" status="early" summary="Migrated Looma ui-checkbox component.">
+  <defs>
+    <prop name="checked" type="boolean">checked token.</prop>
+    <prop name="defaultChecked" type="boolean" default="false">defaultChecked token.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="indeterminate" type="boolean" default="false">indeterminate token.</prop>
+    <prop name="required" type="boolean" default="false">required token.</prop>
+    <prop name="value" type="string" default="on">value token.</prop>
+    <state name="internalChecked" :value="false"></state>
+    <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <span role="checkbox" :data-disabled="disabled"><slot></slot></span>
+  <style>:scope {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  color: var(--ui-text-primary);
+}
+
+:scope[aria-disabled='true'],
+:scope[data-disabled='true'] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+:slotted(input[type='checkbox']) {
+  accent-color: var(--ui-accent-solid);
+  width: 1.125em;
+  height: 1.125em;
+  cursor: pointer;
+}
+
+:slotted(input[type='checkbox']:focus-visible) {
+  outline: 2px solid var(--ui-accent-solid);
+  outline-offset: 2px;
+}
+</style>
+</template>
+`, controller: ui_checkbox_exports },
+  { tag: "ui-chip", source: `<template component="ui-chip" status="early" summary="Migrated Looma ui-chip component.">
+  <defs>
+    <prop name="appearance" type="tag | pill" default="tag">appearance token.</prop>
+    <prop name="size" type="xs | sm" default="xs">size token.</prop>
+  </defs>
+  <span :data-appearance="appearance" :data-size="size"><span class="chip__surface"><span class="chip__label"><slot></slot></span></span></span>
+  <style>:scope {
+  --ui-chip-surface: var(--ui-surface-subtle);
+  --ui-chip-text: var(--ui-text-secondary);
+  --ui-chip-border: var(--ui-border-default);
+  --ui-chip-font-size: var(--ui-font-size-xs);
+  --ui-chip-font-weight: var(--ui-font-normal);
+  --ui-chip-line-height: var(--ui-line-height-tight);
+  --ui-chip-padding-block: var(--ui-space-0-5);
+  --ui-chip-padding-inline: var(--ui-space-2);
+  --ui-chip-notch: var(--ui-space-1);
+
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+}
+
+:scope[data-size='sm'] {
+  --ui-chip-font-size: var(--ui-font-size-sm);
+}
+
+.chip__surface {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  padding: var(--ui-chip-padding-block) var(--ui-chip-padding-inline);
+  border: 1px solid var(--ui-chip-border);
+  background: var(--ui-chip-surface);
+  /* The shared light-DOM reset establishes a baseline host color; the chip's
+     semantic text hook must remain authoritative for consumer color systems. */
+  color: var(--ui-chip-text) !important;
+  /* The shared light-DOM reset establishes inherited defaults; this compact
+     metadata primitive owns its own typography contract. */
+  font-family: var(--ui-font-family-sans) !important;
+  font-size: var(--ui-chip-font-size) !important;
+  font-weight: var(--ui-chip-font-weight) !important;
+  line-height: var(--ui-chip-line-height) !important;
+}
+
+.chip__label {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:scope[data-appearance='pill'] .chip__surface {
+  border-radius: var(--ui-radius-round);
+}
+
+:scope[data-appearance='tag'] .chip__surface {
+  border: 0;
+  padding-inline-end: calc(var(--ui-chip-padding-inline) + var(--ui-chip-notch));
+  clip-path: polygon(0 0, calc(100% - var(--ui-chip-notch)) 0, 100% 50%, calc(100% - var(--ui-chip-notch)) 100%, 0 100%);
+}
+</style>
+</template>
+`, controller: void 0 },
+  { tag: "ui-combobox", source: `
+
+<template component="ui-combobox" controller="./controllers/ui-combobox.js" status="early" summary="Migrated Looma ui-combobox component.">
+  <defs>
+    <prop name="label" type="string" default="">label token.</prop>
+    <prop name="placeholder" type="string" default="">placeholder token.</prop>
+    <prop name="name" type="string" default="">name token.</prop>
+    <prop name="value" type="string | null | list(object({ id: string, value: string, label: string, description?: string, metadata?: unknown, group?: string, disabled?: boolean }))">value token.</prop>
+    <prop name="defaultValue" type="string">defaultValue token.</prop>
+    <prop name="multiple" type="boolean" default="false">multiple token.</prop>
+    <prop name="tokenSeparators" type="list(string)">tokenSeparators token.</prop>
+    <prop name="query" type="string">query token.</prop>
+    <prop name="defaultQuery" type="string" default="">defaultQuery token.</prop>
+    <prop name="config" type="unknown">config token.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="readOnly" type="boolean" default="false">readOnly token.</prop>
+    <prop name="required" type="boolean" default="false">required token.</prop>
+    <prop name="size" type="sm | md" default="md">size token.</prop>
+    <prop name="labelVisibility" type="visible | sr-only" default="visible">labelVisibility token.</prop>
+    <prop name="disclosure" type="boolean" default="false">disclosure token.</prop>
+    <prop name="clearable" type="boolean" default="false">clearable token.</prop>
+    <prop name="help" type="string" default="">help token.</prop>
+    <state name="raw" :value="''"></state>
+    <state name="display" :value="''"></state>
+    <state name="selected" :value="null"></state>
+    <state name="expanded" :value="false"></state>
+    <state name="rows" :value="[]"></state>
+    <state name="active" :value="-1"></state>
+    <state name="loading" :value="false"></state>
+    <state name="helpOpen" :value="false"></state>
+    <state name="lookupError" :value="''"></state>
+    <state name="validation" :value="{ status: 'pristine', touched: false, dirty: false, issues: [] }"></state>
+    <event name="query-change" type="object({ query: string, display: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="value-change" type="object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, description?: string, metadata?: unknown, group?: string, disabled?: boolean }) | null, kind: selection | clear | free-entry | create | invalidation, trigger: keyboard | pointer | programmatic }) | list(object({ id: string, value: string, label: string, description?: string, metadata?: unknown, group?: string, disabled?: boolean }))"></event>
+    <event name="free-entry" type="object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, description?: string, metadata?: unknown, group?: string, disabled?: boolean }) | null, kind: selection | clear | free-entry | create | invalidation, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="create-entry" type="object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, description?: string, metadata?: unknown, group?: string, disabled?: boolean }) | null, kind: selection | clear | free-entry | create | invalidation, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="dependency-invalidate" type="object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, description?: string, metadata?: unknown, group?: string, disabled?: boolean }) | null, kind: selection | clear | free-entry | create | invalidation, trigger: keyboard | pointer | programmatic })"></event>
+    <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 })"></event>
+    <event name="options-change" type="list(object({ id: string, value: string, label: string, description?: string, metadata?: unknown, group?: string, disabled?: boolean }))"></event>
+    <event name="add-item" type="object({ item: object({ id: string, value: string, label: string, description?: string, metadata?: unknown, group?: string, disabled?: boolean }), index: integer, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="remove-item" type="object({ item: object({ id: string, value: string, label: string, description?: string, metadata?: unknown, group?: string, disabled?: boolean }), index: integer, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="create-item" type="object({ query: string, trigger: keyboard | pointer | programmatic })"></event>
+    <method name="validate" export="validate" returns="promise(unknown)"></method>
+    <method name="focusInput" export="focusInput" returns="promise(undefined)"></method>
+  </defs>
+  <div .value="value" .tokenSeparators="tokenSeparators" .config="config" :data-size="size"><label for="input" part="label"><template $value="label"></template></label><div class="field" part="field"><slot name="start"></slot><div $if="multiple" class="items" role="group"></div><input id="input" role="combobox" aria-autocomplete="list" aria-controls="listbox" :value="display" :placeholder="placeholder" :name="name" :disabled="disabled" :readOnly="readOnly" :required="required" autoComplete="off" part="input"></input><button $if="clearable" type="button" part="affordance">\xD7</button><button $if="help" id="help" type="button" part="affordance" :disabled="disabled"><span aria-hidden="true">?</span></button><button $if="disclosure" type="button" part="affordance" aria-controls="listbox"><span aria-hidden="true">\u2304</span></button></div><ui-tooltip $if="help" id="help-text" for="help"><template $value="help"></template></ui-tooltip><div class="popup" part="popup" :hidden="not expanded"><div id="listbox" role="listbox"></div><slot name="footer"></slot></div><div id="validation" class="message" part="validation" :hidden="not validation.issues.length"></div><div class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div></div>
+  <style>:scope { display: grid; gap: var(--ui-space-1); min-inline-size: 0; color: var(--ui-text-primary); font: inherit; }
+label { color: var(--ui-field-label-color, var(--ui-text-primary)); font-size: var(--ui-field-label-size, 0.875rem); font-weight: var(--ui-field-label-weight, 500); }
+.field { display: flex; min-inline-size: 0; border: 1px solid var(--ui-control-border, var(--ui-border-default)); border-radius: var(--ui-radius-2); background: var(--ui-control-surface, var(--ui-surface-default)); }
+.field:focus-within { border-color: var(--ui-control-focus, var(--ui-focus-ring)); outline: 2px solid var(--ui-control-focus, var(--ui-focus-ring)); outline-offset: 1px; }
+input { appearance: none; width: 100%; min-inline-size: 0; min-block-size: var(--ui-control-min-block-size, 2.75rem); box-sizing: border-box; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; line-height: var(--ui-line-height-md); padding: var(--ui-space-2) var(--ui-space-3); margin: 0; outline: none; }
+:scope[data-size='sm'] input { min-block-size: var(--ui-field-compact-size, 2rem); padding: var(--ui-space-1) var(--ui-space-2); }
+button { appearance: none; border: 0; border-radius: var(--ui-radius-2); background: transparent; color: var(--ui-field-affordance-color, var(--ui-text-secondary)); font: inherit; font-weight: var(--ui-field-affordance-weight, 400); min-inline-size: 2rem; padding: var(--ui-space-1); cursor: pointer; }
+button:hover:enabled { background: var(--ui-surface-muted); color: var(--ui-text-primary); }
+button:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: -3px; }
+input:disabled, button:disabled { color: var(--ui-text-muted); cursor: not-allowed; }
+.field:has(input:disabled) { background: var(--ui-control-surface-disabled, var(--ui-surface-muted)); }
+:scope[data-validation='error'] .field { border-color: var(--ui-danger-solid, var(--ui-accent-active)); }
+.popup { box-sizing: border-box; min-inline-size: 12rem; max-inline-size: calc(100vw - 1rem); max-block-size: var(--ui-combobox-max-block-size, 18rem); overflow: auto; margin: 0; padding: var(--ui-space-1); border: 1px solid var(--ui-border-default); border-radius: var(--ui-radius-2); background: var(--ui-surface-elevated); color: var(--ui-text-primary); box-shadow: var(--ui-shadow-md); }
+[hidden] { display: none !important; }
+.option { padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-radius-1); cursor: pointer; overflow-wrap: anywhere; }
+.option:hover, .option[data-active] { background: var(--ui-surface-muted); outline: 1px solid var(--ui-focus-ring); outline-offset: -1px; }
+.option[aria-disabled='true'] { color: var(--ui-text-muted); cursor: not-allowed; }
+.primary { display: block; color: var(--ui-option-primary-color, var(--ui-text-primary)); font-weight: var(--ui-option-primary-weight, 500); }
+.secondary { display: block; color: var(--ui-option-secondary-color, var(--ui-text-secondary)); font-weight: var(--ui-option-secondary-weight, 400); font-size: var(--ui-font-size-sm); }
+.message, .group { color: var(--ui-field-message-color, var(--ui-text-secondary)); font-weight: var(--ui-field-message-weight, 400); font-size: var(--ui-font-size-sm); line-height: var(--ui-line-height-md); overflow-wrap: anywhere; }
+.group, .popup .message { padding: var(--ui-space-2) var(--ui-space-3); }
+.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@media (pointer: coarse) { button { min-inline-size: 2.75rem; min-block-size: 2.75rem; } }
+@media (forced-colors: active) { .field, .popup { border-color: CanvasText; } .option[data-active] { outline-color: Highlight; } }
+
+/* Multiple mode: chips wrap before the cursor on one flexible field line. */
+:scope[data-multiple='true'] .field { flex-wrap: wrap; align-items: center; gap: var(--ui-space-1); min-block-size: var(--ui-multi-combobox-min-block-size, 2.5rem); padding: var(--ui-space-1); }
+:scope[data-multiple='true'] input { flex: 1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem); width: auto; min-block-size: 1.75rem; padding: var(--ui-space-0-5) var(--ui-space-1); }
+.items { display: contents; }
+.item {
+  appearance: none;
+  display: inline-flex;
+  min-inline-size: 0;
+  max-inline-size: min(100%, var(--ui-multi-combobox-item-max-inline-size, 12rem));
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+  border-radius: var(--ui-radius-1);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: default;
+}
+.item > slot { display: block; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; }
+.item > slot:slotted(*) { min-inline-size: 0; max-inline-size: 100%; }
+.item:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: 1px; }
+.item:disabled { opacity: .6; }
+</style>
+</template>
+`, controller: ui_combobox_exports },
+  { tag: "ui-context-menu", source: `
+<template component="ui-context-menu" controller="./controllers/ui-context-menu.js" status="early" summary="Migrated Looma ui-context-menu component.">
+  <defs>
+    <prop name="open" type="boolean">open token.</prop>
+    <prop name="defaultOpen" type="boolean" default="false">defaultOpen token.</prop>
+    <prop name="for" type="string">for token.</prop>
+    <state name="internalOpen" :value="false"></state>
+    <state name="focusTrigger" :value="'programmatic'"></state>
+    <event name="open" type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="close" type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="select" type="object({ value: string, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <span :data-state-open="internalOpen"><slot name="trigger"></slot><div class="menu" :data-state-open="internalOpen"><ui-menu><slot></slot></ui-menu></div></span>
+  <style>:scope {
+  display: contents;
+}
+
+:scope[data-focus-trigger='pointer'] :slotted(ui-menu-item:focus) {
+  outline: none;
+}
+
+.menu {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  z-index: var(--ui-z-overlay, 1000);
+  min-width: 12rem;
+  opacity: 0;
+  transform: translateY(-4px) scale(0.99);
+  transition:
+    opacity var(--ui-motion-fast) var(--ui-motion-ease),
+    transform var(--ui-motion-fast) var(--ui-motion-ease),
+    display var(--ui-motion-fast) allow-discrete,
+    overlay var(--ui-motion-fast) allow-discrete;
+}
+
+.menu:popover-open { opacity: 1; transform: translateY(0) scale(1); }
+
+@starting-style {
+  .menu:popover-open { opacity: 0; transform: translateY(-4px) scale(0.99); }
+}
+
+.menu[hidden] { display: none !important; }
+
+@media (prefers-reduced-motion: reduce) {
+  .menu { transition: none; }
+}
+</style>
+</template>
+`, controller: ui_context_menu_exports },
+  { tag: "ui-dialog", source: `<template component="ui-dialog" controller="./controllers/ui-dialog.js" status="early" summary="Migrated Looma ui-dialog component.">
+  <defs>
+    <prop name="open" type="boolean">open token.</prop>
+    <prop name="defaultOpen" type="boolean" default="false">defaultOpen token.</prop>
+    <prop name="modal" type="boolean" default="true">modal token.</prop>
+    <prop name="dismissible" type="boolean" default="true">dismissible token.</prop>
+    <prop name="label" type="string">label token.</prop>
+    <state name="internalOpen" :value="false"></state>
+    <state name="accessibleLabel" :value="'Dialog'"></state>
+    <event name="close" type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <div :data-state-open="internalOpen"><dialog :aria-label="accessibleLabel"><slot></slot></dialog></div>
+  <style>:scope {
+  display: block;
+}
+
+:scope:not([data-open]) {
+  display: none;
+}
+
+:scope dialog {
+  --ui-dialog-duration: var(--ui-motion-base);
+  --ui-dialog-viewport-gap: var(--ui-space-4, 1rem);
+  position: fixed;
+  inset: 0;
+  box-sizing: border-box;
+  inline-size: min(
+    calc(100% - (var(--ui-dialog-viewport-gap) * 2)),
+    var(--ui-dialog-max-width, 440px)
+  );
+  max-inline-size: none;
+  max-block-size: calc(100dvh - (var(--ui-dialog-viewport-gap) * 2));
+  margin: auto;
+  padding: var(--ui-space-4);
+  overflow: auto;
+  background: var(--ui-surface-elevated);
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-dialog);
+  box-shadow: var(--ui-shadow-dialog);
+  visibility: hidden;
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.96);
+  transition:
+    opacity var(--ui-dialog-duration) var(--ui-motion-ease),
+    transform var(--ui-dialog-duration) var(--ui-motion-ease),
+    visibility var(--ui-dialog-duration),
+    display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,
+    overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete;
+}
+
+:scope dialog[open] {
+  visibility: visible;
+  pointer-events: auto;
+  opacity: 1;
+  transform: scale(1);
+  animation: ui-dialog-enter var(--ui-dialog-duration) var(--ui-motion-ease);
+}
+
+@keyframes ui-dialog-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+:scope dialog::backdrop {
+  background-color: transparent;
+  transition:
+    background-color var(--ui-dialog-duration) var(--ui-motion-ease),
+    display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,
+    overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete;
+}
+
+:scope dialog[open]::backdrop {
+  background-color: var(--ui-overlay-backdrop);
+  animation: ui-dialog-backdrop-enter var(--ui-dialog-duration) var(--ui-motion-ease);
+}
+
+@keyframes ui-dialog-backdrop-enter {
+  from {
+    background-color: transparent;
+  }
+}
+</style>
+</template>
+`, controller: ui_dialog_exports },
+  { tag: "ui-disclosure", source: `<template component="ui-disclosure" controller="./controllers/ui-disclosure.js" status="early" summary="Migrated Looma ui-disclosure component.">
+  <defs>
+    <prop name="open" type="boolean">open token.</prop>
+    <prop name="defaultOpen" type="boolean" default="false">defaultOpen token.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <state name="internalOpen" :value="false"></state>
+    <state name="contentId" :value="''"></state>
+    <event name="open" type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="close" type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <div><slot></slot></div>
+  <style>:scope {
+  display: block;
+}
+
+:slotted([hidden]) {
+  display: none !important;
+}
+</style>
+</template>
+`, controller: ui_disclosure_exports },
+  { tag: "ui-editable", source: '<template component="ui-editable" controller="./controllers/ui-editable.js" status="early" summary="Migrated Looma ui-editable component.">\n  <defs>\n    <prop name="edit" type="boolean">edit token.</prop>\n    <prop name="defaultEdit" type="boolean" default="false">defaultEdit token.</prop>\n    <prop name="disabled" type="boolean" default="false">disabled token.</prop>\n    <state name="internalEdit" :value="false"></state>\n    <event name="edit-change" type="object({ edit: boolean, reason: activate | light-dismiss | escape | programmatic, trigger: keyboard | pointer | programmatic })"></event>\n  </defs>\n  <div :data-state-edit="internalEdit" :data-disabled="disabled"><div part="preview"><slot name="preview"></slot></div><div part="edit" :hidden="not internalEdit"><slot name="edit"></slot></div></div>\n  <style>:scope { display: block; min-inline-size: 0; }\n[hidden] { display: none !important; }\n</style>\n</template>\n', controller: ui_editable_exports },
+  { tag: "ui-floating-action-button", source: `<template component="ui-floating-action-button" status="early" summary="Migrated Looma ui-floating-action-button component.">
+  <defs>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="mobileOnly" type="boolean" default="false">mobileOnly token.</prop>
+    <prop name="label" type="string" default="">label token.</prop>
+  </defs>
+  <span :data-disabled="disabled"><button type="button" :aria-label="label"><slot></slot></button></span>
+  <style>:scope {
+  position: fixed;
+  inset-block-end: calc(
+    var(--ui-floating-action-button-bottom, var(--ui-space-6, 1.5rem)) + env(safe-area-inset-bottom)
+  );
+  inset-inline-end: max(
+    var(--ui-floating-action-button-inline-end, var(--ui-space-5, 1.25rem)),
+    env(safe-area-inset-right)
+  );
+  inline-size: var(--ui-floating-action-button-size, 56px);
+  block-size: var(--ui-floating-action-button-size, 56px);
+  display: inline-flex;
+  z-index: var(--ui-floating-action-button-z-index, 100);
+}
+
+button {
+  appearance: none;
+  inline-size: 100%;
+  block-size: 100%;
+  border: none;
+  border-radius: 999px;
+  margin: 0;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ui-floating-action-button-bg, var(--ui-accent-solid));
+  color: var(--ui-floating-action-button-color, var(--ui-text-on-accent));
+  box-shadow: var(
+    --ui-floating-action-button-shadow,
+    0 4px 12px color-mix(in srgb, var(--ui-accent-solid) 40%, transparent)
+  );
+  cursor: pointer;
+  transition:
+    background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
+    transform var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
+    box-shadow var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
+}
+
+button:hover:enabled {
+  background: var(--ui-floating-action-button-hover-bg, var(--ui-accent-hover));
+  box-shadow: var(
+    --ui-floating-action-button-hover-shadow,
+    0 6px 16px color-mix(in srgb, var(--ui-accent-solid) 50%, transparent)
+  );
+}
+
+button:active:enabled {
+  transform: scale(var(--ui-floating-action-button-active-scale, 0.94));
+}
+
+button:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 2px;
+}
+
+button:disabled,
+:scope[data-disabled='true'] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+:slotted(svg) {
+  inline-size: var(--ui-floating-action-button-icon-size, 24px);
+  block-size: var(--ui-floating-action-button-icon-size, 24px);
+  flex-shrink: 0;
+}
+
+@media (min-width: 768px) {
+  :scope[data-mobile-only='true'] {
+    display: none;
+  }
+}
+</style>
+</template>
+`, controller: void 0 },
+  { tag: "ui-form-field", source: `<template component="ui-form-field" controller="./controllers/ui-form-field.js" status="early" summary="Migrated Looma ui-form-field component.">
+  <defs>
+    <prop name="invalid" type="boolean" default="false">invalid token.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="required" type="boolean" default="false">required token.</prop>
+  </defs>
+  <div :data-invalid="invalid" :data-disabled="disabled" :data-required="required"><slot></slot></div>
+  <style>:scope {
+  display: grid;
+  gap: var(--ui-space-2);
+  min-inline-size: 0;
+  align-content: start;
+  color: var(--ui-text-primary);
+}
+
+:slotted(label) {
+  color: var(--ui-text-secondary);
+  font-size: 0.95rem;
+}
+
+:slotted([data-slot='help']) {
+  min-block-size: var(--ui-form-field-help-min-block-size, 0);
+  color: var(--ui-text-muted);
+  font-size: 0.875rem;
+  line-height: var(--ui-line-height-md);
+}
+
+:slotted([data-slot='error']),
+:slotted([role='alert']) {
+  color: var(--ui-accent-active);
+  font-size: 0.875rem;
+}
+</style>
+</template>
+`, controller: ui_form_field_exports },
+  { tag: "ui-icon-button", source: `<template component="ui-icon-button" controller="./controllers/ui-icon-button.js" status="early" summary="Migrated Looma ui-icon-button component.">
+  <defs>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="label" type="string" default="">label token.</prop>
+    <prop name="size" type="sm | md | lg" default="md">size token.</prop>
+    <prop name="variant" type="ghost | outline | solid" default="ghost">variant token.</prop>
+    <prop name="anticipatory" type="boolean" default="false">anticipatory token.</prop>
+  </defs>
+  <span :data-disabled="disabled"><button type="button" :aria-label="label"><slot></slot></button></span>
+  <style>:scope {
+  display: inline-flex;
+  color: var(--ui-text-secondary);
+}
+
+:scope[data-anticipatory='true'] {
+  position: relative;
+}
+
+:scope[data-anticipatory='true']::before {
+  content: '';
+  position: absolute;
+  inset: 50% auto auto 50%;
+  z-index: 1;
+  inline-size: var(--ui-affordance-guide-size, 0.25rem);
+  block-size: var(--ui-affordance-guide-size, 0.25rem);
+  border-radius: var(--ui-radius-round, 999px);
+  background: var(--ui-affordance-guide-color, var(--ui-border-strong));
+  opacity: var(--ui-affordance-guide-opacity, 0.42);
+  transform: translate(-50%, -50%);
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+  pointer-events: none;
+}
+
+:scope[data-anticipatory='true'] button {
+  opacity: 0;
+  transform: scale(0.72);
+  pointer-events: none;
+}
+
+:scope[data-anticipatory='true'][data-ui-proximity='near']::before,
+:scope[data-anticipatory='true']:focus-within::before,
+:scope[data-anticipatory='true']:hover::before,
+:scope[data-anticipatory='true'][data-variant='solid']::before {
+  opacity: 0;
+}
+
+:scope[data-anticipatory='true'][data-ui-proximity='near'] button,
+:scope[data-anticipatory='true']:focus-within button,
+:scope[data-anticipatory='true']:hover button,
+:scope[data-anticipatory='true'][data-variant='solid'] button {
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
+}
+
+button {
+  appearance: none;
+  inline-size: var(--ui-icon-button-size, 2.5rem);
+  block-size: var(--ui-icon-button-size, 2.5rem);
+  min-inline-size: var(--ui-icon-button-size, 2.5rem);
+  min-block-size: var(--ui-icon-button-size, 2.5rem);
+  padding: 0;
+  margin: 0;
+  border: 1px solid transparent;
+  border-radius: var(--ui-icon-button-radius, var(--ui-radius-2));
+  background: var(--ui-icon-button-bg, transparent);
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    border-color var(--ui-motion-fast) var(--ui-motion-ease),
+    color var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+    transform var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+@media (hover: none), (pointer: coarse) {
+  :scope[data-anticipatory='true']::before {
+    opacity: 0;
+  }
+
+  :scope[data-anticipatory='true'] button {
+    opacity: 1;
+    transform: none;
+    pointer-events: auto;
+  }
+}
+
+:scope[data-size='sm'] button {
+  inline-size: var(--ui-icon-button-size-sm, 2rem);
+  block-size: var(--ui-icon-button-size-sm, 2rem);
+  min-inline-size: var(--ui-icon-button-size-sm, 2rem);
+  min-block-size: var(--ui-icon-button-size-sm, 2rem);
+}
+
+:scope[data-size='lg'] button {
+  inline-size: var(--ui-icon-button-size-lg, 2.75rem);
+  block-size: var(--ui-icon-button-size-lg, 2.75rem);
+  min-inline-size: var(--ui-icon-button-size-lg, 2.75rem);
+  min-block-size: var(--ui-icon-button-size-lg, 2.75rem);
+}
+
+:scope[data-variant='outline'] button {
+  border-color: var(--ui-icon-button-border, var(--ui-border-default));
+  background: var(--ui-icon-button-outline-bg, var(--ui-surface-default));
+  color: var(--ui-icon-button-outline-color, var(--ui-text-primary));
+}
+
+:scope[data-variant='solid'] button {
+  background: var(--ui-icon-button-solid-bg, var(--ui-accent-solid));
+  color: var(--ui-icon-button-solid-color, var(--ui-text-on-accent));
+  box-shadow: var(
+    --ui-icon-button-solid-shadow,
+    0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
+  );
+}
+
+button:hover:enabled {
+  background: var(--ui-icon-button-hover-bg, var(--ui-surface-muted));
+  color: var(--ui-icon-button-hover-color, var(--ui-text-primary));
+}
+
+:scope[data-variant='outline'] button:hover:enabled {
+  border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
+}
+
+:scope[data-variant='solid'] button:hover:enabled {
+  background: var(--ui-icon-button-solid-hover-bg, var(--ui-accent-hover));
+}
+
+button:active:enabled {
+  transform: scale(var(--ui-icon-button-active-scale, 0.96));
+}
+
+button:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 2px;
+}
+
+button:disabled,
+:scope[data-disabled='true'] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+:slotted(svg) {
+  inline-size: var(--ui-icon-button-icon-size, 1.125rem);
+  block-size: var(--ui-icon-button-icon-size, 1.125rem);
+  flex-shrink: 0;
+  stroke-width: var(--ui-icon-button-icon-stroke-width, 1.75);
+}
+</style>
+</template>
+`, controller: ui_icon_button_exports },
+  { tag: "ui-input", source: `<template component="ui-input" controller="./controllers/ui-input.js" status="early" summary="Migrated Looma ui-input component.">
+  <defs>
+    <prop name="value" type="string">value token.</prop>
+    <prop name="defaultValue" type="string" default="">defaultValue token.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="invalid" type="boolean" default="false">invalid token.</prop>
+    <prop name="readOnly" type="boolean" default="false">readOnly token.</prop>
+    <state name="internalValue" :value="''"></state>
+    <event name="input" type="object({ value: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="change" type="object({ value: string, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <span :data-invalid="invalid"><slot></slot></span>
+  <style>:scope {
+  display: inline-flex;
+  min-inline-size: 0;
+  color: var(--ui-text-primary);
+}
+
+:slotted(input) {
+  width: 100%;
+  appearance: none;
+  min-block-size: var(--ui-control-min-block-size, 2.75rem);
+  border: 1px solid var(--ui-control-border, var(--ui-border-default));
+  border-radius: var(--ui-radius-2);
+  background: var(--ui-control-surface, var(--ui-surface-default));
+  color: inherit;
+  font: inherit;
+  line-height: var(--ui-line-height-md);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  margin: 0;
+  transition:
+    border-color var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+    background-color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+:slotted(input:hover:not(:focus):not(:disabled)) {
+  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
+}
+
+:slotted(input:focus) {
+  border-color: var(--ui-control-focus, var(--ui-focus-ring));
+  box-shadow: 0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft));
+}
+
+:scope[data-invalid='true']:slotted(input),
+:slotted(input[aria-invalid='true']) {
+  border-color: var(--ui-accent-active);
+}
+
+:slotted(input:disabled) {
+  background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+  color: var(--ui-text-muted);
+  cursor: not-allowed;
+}
+
+:slotted(input:focus-visible) {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 2px;
+}
+</style>
+</template>
+`, controller: ui_input_exports },
+  { tag: "ui-menu-item", source: `<template component="ui-menu-item" status="early" summary="Migrated Looma ui-menu-item component.">
+  <defs>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="value" type="string" default="">value token.</prop>
+  </defs>
+  <div role="menuitem" :data-value="value"><span class="menu-item__surface"><slot></slot></span></div>
+  <style>:scope {
+  display: block;
+  width: 100%;
+}
+
+.menu-item__surface {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--ui-space-2) var(--ui-space-3);
+  text-align: left;
+  background: none;
+  border: none;
+  border-radius: var(--ui-radius-2);
+  color: var(--ui-text-primary);
+  font-size: var(--ui-font-size-md);
+  font-weight: var(--ui-font-medium, 500);
+  cursor: pointer;
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+:scope:hover:not([aria-disabled='true']):not([data-disabled='true']) .menu-item__surface {
+  background: var(--ui-surface-subtle);
+}
+
+:scope[aria-disabled='true'] .menu-item__surface,
+:scope[data-disabled='true'] .menu-item__surface {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>
+</template>
+`, controller: void 0 },
+  { tag: "ui-menu", source: '<template component="ui-menu" controller="./controllers/ui-menu.js" status="early" summary="Migrated Looma ui-menu component.">\n  <defs>\n    <prop name="open" type="boolean">open token.</prop>\n    <prop name="defaultOpen" type="boolean" default="false">defaultOpen token.</prop>\n    <prop name="for" type="string">for token.</prop>\n    <prop name="placement" type="string" default="bottom-start">placement token.</prop>\n    <state name="internalOpen" :value="false"></state>\n    <event name="select" type="object({ value: string, trigger: keyboard | pointer | programmatic })"></event>\n    <event name="close" type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"></event>\n  </defs>\n  <div role="menu" aria-orientation="vertical" :data-state-open="internalOpen"><div class="menu__surface"><slot></slot></div></div>\n  <style>:scope {\n  --ui-menu-viewport-gap: var(--ui-space-2, 0.5rem);\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  inline-size: max-content;\n  min-inline-size: min(12rem, calc(100vw - (var(--ui-menu-viewport-gap) * 2)));\n  max-inline-size: calc(100vw - (var(--ui-menu-viewport-gap) * 2));\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  overflow: visible;\n}\n\n.menu__surface {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  max-inline-size: inherit;\n  padding: var(--ui-space-1);\n  background: var(--ui-surface-elevated);\n  border: 1px solid var(--ui-border-default);\n  border-radius: var(--ui-radius-3);\n  box-shadow: var(--ui-shadow-lg);\n  max-block-size: inherit;\n  overflow: auto;\n}\n\n:scope:not([data-state-open]) {\n  display: none;\n}\n\n:scope[popover] {\n  position: fixed;\n  inset: auto;\n  margin: 0;\n  overflow: visible;\n  max-block-size: calc(100dvh - (var(--ui-menu-viewport-gap) * 2));\n  opacity: 0;\n  transform: translateY(-4px) scale(0.99);\n  transition:\n    opacity var(--ui-motion-fast) var(--ui-motion-ease),\n    transform var(--ui-motion-fast) var(--ui-motion-ease),\n    display var(--ui-motion-fast) allow-discrete,\n    overlay var(--ui-motion-fast) allow-discrete;\n}\n\n:scope[popover]:popover-open {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n}\n\n@starting-style {\n  :scope[popover]:popover-open {\n    opacity: 0;\n    transform: translateY(-4px) scale(0.99);\n  }\n}\n\n:scope[hidden] {\n  display: none !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :scope[popover] { transition: none; }\n}\n\n:slotted(ui-menu-item) {\n  display: block;\n  width: 100%;\n}\n</style>\n</template>\n', controller: ui_menu_exports },
+  { tag: "ui-popover", source: '<template component="ui-popover" controller="./controllers/ui-popover.js" status="early" summary="Migrated Looma ui-popover component.">\n  <defs>\n    <prop name="open" type="boolean">open token.</prop>\n    <prop name="defaultOpen" type="boolean" default="false">defaultOpen token.</prop>\n    <prop name="for" type="string">for token.</prop>\n    <prop name="placement" type="string" default="bottom-start">placement token.</prop>\n    <state name="internalOpen" :value="false"></state>\n    <event name="open" type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"></event>\n    <event name="close" type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"></event>\n  </defs>\n  <span :data-state-open="internalOpen"><div class="popover__surface"><slot></slot></div></span>\n  <style>:scope {\n  --ui-popover-viewport-gap: var(--ui-space-2, 0.5rem);\n  box-sizing: border-box;\n  max-inline-size: min(\n    20rem,\n    calc(100vw - (var(--ui-popover-viewport-gap) * 2))\n  );\n  max-block-size: calc(100dvh - (var(--ui-popover-viewport-gap) * 2));\n  overflow: visible;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n}\n\n.popover__surface {\n  box-sizing: border-box;\n  max-inline-size: inherit;\n  max-block-size: inherit;\n  overflow: auto;\n  padding: var(--ui-space-3);\n  background: var(--ui-surface-elevated);\n  border: 1px solid var(--ui-border-default);\n  border-radius: var(--ui-radius-3);\n  box-shadow: var(--ui-shadow-lg);\n}\n\n:scope:not([data-state-open]) {\n  display: none;\n}\n\n:scope[popover] {\n  position: fixed;\n  inset: auto;\n  margin: 0;\n  opacity: 0;\n  transform: translateY(-4px) scale(0.99);\n  transition:\n    opacity var(--ui-motion-fast) var(--ui-motion-ease),\n    transform var(--ui-motion-fast) var(--ui-motion-ease),\n    display var(--ui-motion-fast) allow-discrete,\n    overlay var(--ui-motion-fast) allow-discrete;\n}\n\n:scope[popover]:popover-open { opacity: 1; transform: translateY(0) scale(1); }\n\n@starting-style {\n  :scope[popover]:popover-open { opacity: 0; transform: translateY(-4px) scale(0.99); }\n}\n\n:scope[hidden] {\n  display: none !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :scope[popover] { transition: none; }\n}\n</style>\n</template>\n', controller: ui_popover_exports },
+  { tag: "ui-radio-group", source: `<template component="ui-radio-group" controller="./controllers/ui-radio-group.js" status="early" summary="Migrated Looma ui-radio-group component.">
+  <defs>
+    <prop name="value" type="string" default="">value token.</prop>
+    <prop name="name" type="string" default="">name token.</prop>
+    <prop name="orientation" type="horizontal | vertical" default="horizontal">orientation token.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="required" type="boolean" default="false">required token.</prop>
+    <state name="internalValue" :value="''"></state>
+    <event name="select" type="object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <span role="radiogroup" :data-orientation="orientation" :data-disabled="disabled"><slot></slot></span>
+  <style>:scope {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+}
+
+:scope[data-orientation='vertical'] {
+  display: inline-grid;
+  justify-items: start;
+}
+</style>
+</template>
+`, controller: ui_radio_group_exports },
+  { tag: "ui-radio", source: `<template component="ui-radio" controller="./controllers/ui-radio.js" status="early" summary="Migrated Looma ui-radio component.">
+  <defs>
+    <prop name="checked" type="boolean">checked token.</prop>
+    <prop name="defaultChecked" type="boolean" default="false">defaultChecked token.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="name" type="string" default="">name token.</prop>
+    <prop name="required" type="boolean" default="false">required token.</prop>
+    <prop name="value" type="string" default="on">value token.</prop>
+    <state name="internalChecked" :value="false"></state>
+    <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <span role="radio" :data-disabled="disabled"><slot></slot></span>
+  <style>:scope {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  color: var(--ui-text-primary);
+}
+
+:scope[data-disabled='true'],
+:scope[aria-disabled='true'] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+:slotted(input[type='radio']) {
+  accent-color: var(--ui-accent-solid);
+  cursor: pointer;
+}
+
+:slotted(input[type='radio']:focus-visible) {
+  outline: 2px solid var(--ui-accent-solid);
+  outline-offset: 2px;
+}
+</style>
+</template>
+`, controller: ui_radio_exports },
+  { tag: "ui-search-result-row", source: `<template component="ui-search-result-row" controller="./controllers/ui-search-result-row.js" status="early" summary="Migrated Looma ui-search-result-row component.">
+  <defs>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="selected" type="boolean" default="false">selected token.</prop>
+    <state name="hasLeading" :value="false"></state>
+    <state name="hasMeta" :value="false"></state>
+    <state name="hasExcerpt" :value="false"></state>
+    <state name="hasTrailing" :value="false"></state>
+  </defs>
+  <div><button class="search-result-row" type="button" :disabled="disabled" part="button"><span class="search-result-row__leading" part="leading" :hidden="not hasLeading"><slot name="leading"></slot></span><span class="search-result-row__content" part="content"><span class="search-result-row__title" part="title"><slot name="title"></slot></span><span class="search-result-row__meta" part="meta" :hidden="not hasMeta"><slot name="meta"></slot></span><span class="search-result-row__excerpt" part="excerpt" :hidden="not hasExcerpt"><slot name="excerpt"></slot></span></span><span class="search-result-row__trailing" part="trailing" :hidden="not hasTrailing"><slot name="trailing"></slot></span></button></div>
+  <style>:scope {
+  display: block;
+}
+
+.search-result-row {
+  appearance: none;
+  inline-size: 100%;
+  min-block-size: var(--ui-search-result-row-min-height, 56px);
+  margin: 0;
+  padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3, 0.75rem));
+  padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4, 1rem));
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ui-search-result-row-gap, var(--ui-space-3, 0.75rem));
+  background: var(--ui-search-result-row-bg, transparent);
+  border: none;
+  border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border, #e5e7eb));
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
+}
+
+:scope:last-child .search-result-row {
+  border-block-end: none;
+}
+
+.search-result-row:hover:enabled {
+  background: var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%));
+}
+
+:scope[data-selected='true'] .search-result-row {
+  background: var(
+    --ui-search-result-row-selected-bg,
+    var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%))
+  );
+}
+
+.search-result-row:focus-visible {
+  outline: 2px solid var(--ui-focus-ring, #2563eb);
+  outline-offset: -2px;
+}
+
+.search-result-row:disabled,
+:scope[data-disabled='true'] .search-result-row {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.search-result-row__leading,
+.search-result-row__trailing {
+  display: inline-flex;
+  align-items: flex-start;
+  flex-shrink: 0;
+}
+
+.search-result-row__content {
+  min-inline-size: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-result-row__title,
+.search-result-row__meta,
+.search-result-row__excerpt {
+  display: block;
+  min-inline-size: 0;
+}
+
+[hidden] {
+  display: none;
+}
+
+:slotted([slot='title']),
+:slotted([slot='meta']),
+:slotted([slot='excerpt']) {
+  display: block;
+  margin: 0;
+}
+</style>
+</template>
+`, controller: ui_search_result_row_exports },
+  { tag: "ui-search-shell", source: '<template component="ui-search-shell" controller="./controllers/ui-search-shell.js" status="early" summary="Migrated Looma ui-search-shell component.">\n  <defs>\n    <state name="hasStatus" :value="false"></state>\n    <state name="hasFooter" :value="false"></state>\n  </defs>\n  <div><div class="search-shell" part="base"><slot name="backdrop"></slot><div class="search-shell__panel" part="panel"><div class="search-shell__search" part="search"><slot name="search"></slot></div><div class="search-shell__status" part="status" :hidden="not hasStatus"><slot name="status"></slot></div><div class="search-shell__body" part="body"><slot name="body"></slot></div><div class="search-shell__footer" part="footer" :hidden="not hasFooter"><slot name="footer"></slot></div></div></div></div>\n  <style>:scope {\n  position: fixed;\n  inset: 0;\n  z-index: var(--ui-search-shell-z-index, 400);\n  display: block;\n}\n\n.search-shell {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding-block-start: var(--ui-search-shell-padding-top, 10vh);\n}\n\n.search-shell__panel {\n  position: relative;\n  inline-size: min(\n    calc(100% - (var(--ui-search-shell-margin-inline, var(--ui-space-4, 1rem)) * 2)),\n    var(--ui-search-shell-max-width, 640px)\n  );\n  max-block-size: var(--ui-search-shell-max-height, 80vh);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--ui-search-shell-bg, var(--ui-surface, #ffffff));\n  border: 1px solid var(--ui-search-shell-border, var(--ui-border, #e5e7eb));\n  border-radius: var(--ui-search-shell-radius, var(--ui-radius-xl, 1rem));\n  box-shadow: var(--ui-search-shell-shadow, var(--ui-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12)));\n}\n\n.search-shell__search,\n.search-shell__status,\n.search-shell__footer {\n  flex-shrink: 0;\n}\n\n.search-shell__body {\n  flex: 1;\n  min-block-size: 0;\n}\n\n[hidden] {\n  display: none;\n}\n\n@media (max-width: 767px) {\n  .search-shell {\n    padding-block-start: 0;\n    align-items: stretch;\n  }\n\n  .search-shell__panel {\n    inline-size: 100%;\n    block-size: 100vh;\n    block-size: 100dvh;\n    max-block-size: none;\n    border-radius: 0;\n    border-inline: none;\n    border-block-start: none;\n  }\n}\n</style>\n</template>\n', controller: ui_search_shell_exports },
+  { tag: "ui-select", source: `<template component="ui-select" controller="./controllers/ui-select.js" status="early" summary="Migrated Looma ui-select component.">
+  <defs>
+    <prop name="value" type="string">value token.</prop>
+    <prop name="defaultValue" type="string">defaultValue token.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="invalid" type="boolean" default="false">invalid token.</prop>
+    <prop name="required" type="boolean" default="false">required token.</prop>
+    <state name="internalValue" :value="''"></state>
+    <event name="input" type="object({ value: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="change" type="object({ value: string, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <span :data-invalid="invalid"><slot></slot></span>
+  <style>:scope {
+  display: inline-flex;
+  min-inline-size: 0;
+  color: var(--ui-text-primary);
+}
+
+:slotted(select) {
+  width: 100%;
+  appearance: none;
+  min-block-size: var(--ui-control-min-block-size, 2.75rem);
+  border: 1px solid var(--ui-control-border, var(--ui-border-default));
+  border-radius: var(--ui-radius-2);
+  background-color: var(--ui-control-surface, var(--ui-surface-default));
+  color: inherit;
+  font: inherit;
+  line-height: var(--ui-line-height-md);
+  padding-block: var(--ui-select-padding-block, var(--ui-space-2));
+  padding-inline-start: var(--ui-select-padding-inline-start, var(--ui-space-3));
+  padding-inline-end: var(--ui-select-padding-inline-end, calc(var(--ui-space-6) + var(--ui-space-3)));
+  margin: 0;
+  background-image:
+    linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position:
+    calc(100% - 1rem) calc(50% - 2px),
+    calc(100% - 0.7rem) calc(50% - 2px);
+  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
+  background-repeat: no-repeat;
+  transition:
+    border-color var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+    background-color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+:slotted(select:hover:not(:focus):not(:disabled)) {
+  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
+}
+
+:slotted(select:focus) {
+  border-color: var(--ui-control-focus, var(--ui-focus-ring));
+  box-shadow: 0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft));
+}
+
+:scope[data-invalid='true']:slotted(select),
+:slotted(select[aria-invalid='true']) {
+  border-color: var(--ui-accent-active);
+}
+
+:slotted(select:disabled) {
+  background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+  color: var(--ui-text-muted);
+  cursor: not-allowed;
+}
+
+:slotted(select:focus-visible) {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 2px;
+}
+
+:slotted(select[multiple]),
+:slotted(select[size]:not([size='1'])) {
+  background-image: none;
+  padding-inline-end: var(--ui-select-padding-inline-start, var(--ui-space-3));
+}
+</style>
+</template>
+`, controller: ui_select_exports },
+  { tag: "ui-switch", source: `<template component="ui-switch" controller="./controllers/ui-switch.js" status="early" summary="Migrated Looma ui-switch component.">
+  <defs>
+    <prop name="checked" type="boolean">checked token.</prop>
+    <prop name="defaultChecked" type="boolean" default="false">defaultChecked token.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="required" type="boolean" default="false">required token.</prop>
+    <prop name="value" type="string" default="on">value token.</prop>
+    <state name="internalChecked" :value="false"></state>
+    <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <span role="switch" :data-disabled="disabled"><input type="checkbox" :checked="internalChecked" :required="required" :value="value" aria-hidden="true"></input><slot></slot></span>
+  <style>:scope {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  color: var(--ui-text-primary);
+}
+
+:scope[aria-disabled='true'],
+:scope[data-disabled='true'] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+:scope[role='switch'] {
+  cursor: pointer;
+}
+
+:scope input[type='checkbox'] {
+  appearance: none;
+  -webkit-appearance: none;
+  display: block;
+  position: relative;
+  width: 2.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 1px solid var(--ui-border-default);
+  border-radius: 999px;
+  background: var(--ui-surface-muted);
+  cursor: pointer;
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    border-color var(--ui-motion-fast) var(--ui-motion-ease);
+  margin: 0;
+}
+
+:scope input[type='checkbox']::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 0.875rem;
+  height: 0.875rem;
+  border-radius: 999px;
+  background: var(--ui-surface-default);
+  border: 1px solid var(--ui-border-default);
+  transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+:scope input[type='checkbox']:checked {
+  background: var(--ui-accent-solid);
+  border-color: var(--ui-accent-solid);
+}
+
+:scope input[type='checkbox']:checked::after {
+  transform: translateX(calc(2.25rem - 0.875rem - 4px));
+  background: var(--ui-text-on-accent);
+  border-color: var(--ui-text-on-accent);
+}
+
+:scope input[type='checkbox']:focus-visible {
+  outline: 2px solid var(--ui-accent-solid);
+  outline-offset: 2px;
+}
+</style>
+</template>
+`, controller: ui_switch_exports },
+  { tag: "ui-tabs", source: `<template component="ui-tabs" controller="./controllers/ui-tabs.js" status="early" summary="Migrated Looma ui-tabs component.">
+  <defs>
+    <prop name="value" type="string">value token.</prop>
+    <prop name="defaultValue" type="string" default="">defaultValue token.</prop>
+    <prop name="orientation" type="horizontal | vertical" default="horizontal">orientation token.</prop>
+    <state name="internalValue" :value="''"></state>
+    <event name="select" type="object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <div :data-orientation="orientation"><slot></slot></div>
+  <style>:scope {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+:scope[data-orientation='vertical'] {
+  flex-direction: row;
+}
+
+:slotted([role='tablist']) {
+  display: flex;
+  gap: 0;
+  max-inline-size: 100%;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  border-bottom: 1px solid var(--ui-border-default);
+}
+
+:scope[data-orientation='vertical'] :slotted([role='tablist']) {
+  flex-direction: column;
+  border-bottom: none;
+  border-inline-end: 1px solid var(--ui-border-default);
+}
+
+:slotted(button[role='tab']),
+:slotted([role='tab']),
+:slotted(ui-button) button[role='tab'] {
+  padding: var(--ui-space-2) var(--ui-space-3);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-medium, 500);
+  color: var(--ui-text-secondary);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  cursor: pointer;
+  transition: color var(--ui-motion-fast) var(--ui-motion-ease);
+  box-shadow: none;
+}
+
+:slotted(button[role='tab']:hover),
+:slotted([role='tab']:hover) {
+  color: var(--ui-text-primary);
+}
+
+:slotted(button[role='tab'][aria-selected='true']),
+:slotted([role='tab'][aria-selected='true']) {
+  color: var(--ui-accent-solid);
+  border-bottom-color: var(--ui-accent-solid);
+}
+
+:scope[data-orientation='vertical'] :slotted(button[role='tab']),
+:scope[data-orientation='vertical'] :slotted([role='tab']) {
+  border-bottom: none;
+  border-inline-end: 2px solid transparent;
+  margin-bottom: 0;
+  margin-inline-end: -1px;
+}
+
+:scope[data-orientation='vertical'] :slotted(button[role='tab'][aria-selected='true']),
+:scope[data-orientation='vertical'] :slotted([role='tab'][aria-selected='true']) {
+  border-inline-end-color: var(--ui-accent-solid);
+}
+
+:slotted([role='tabpanel']) {
+  padding: var(--ui-space-4);
+}
+</style>
+</template>
+`, controller: ui_tabs_exports },
+  { tag: "ui-textarea", source: `<template component="ui-textarea" controller="./controllers/ui-textarea.js" status="early" summary="Migrated Looma ui-textarea component.">
+  <defs>
+    <prop name="value" type="string">value token.</prop>
+    <prop name="defaultValue" type="string" default="">defaultValue token.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="invalid" type="boolean" default="false">invalid token.</prop>
+    <prop name="readOnly" type="boolean" default="false">readOnly token.</prop>
+    <prop name="rows" type="number" default="4">rows token.</prop>
+    <state name="internalValue" :value="''"></state>
+    <event name="input" type="object({ value: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="change" type="object({ value: string, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <span :data-invalid="invalid"><slot></slot></span>
+  <style>:scope {
+  display: inline-flex;
+  min-inline-size: 0;
+  color: var(--ui-text-primary);
+}
+
+:slotted(textarea) {
+  width: 100%;
+  appearance: none;
+  border: 1px solid var(--ui-control-border, var(--ui-border-default));
+  border-radius: var(--ui-radius-2);
+  background: var(--ui-control-surface, var(--ui-surface-default));
+  color: inherit;
+  font: inherit;
+  line-height: var(--ui-line-height-md);
+  min-block-size: calc(var(--ui-space-12, 3rem) * 2);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  margin: 0;
+  resize: vertical;
+  transition:
+    border-color var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+    background-color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+:slotted(textarea:hover:not(:focus):not(:disabled)) {
+  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
+}
+
+:slotted(textarea:focus) {
+  border-color: var(--ui-control-focus, var(--ui-focus-ring));
+  box-shadow: 0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft));
+}
+
+:scope[data-invalid='true']:slotted(textarea),
+:slotted(textarea[aria-invalid='true']) {
+  border-color: var(--ui-accent-active);
+}
+
+:slotted(textarea:disabled) {
+  background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+  color: var(--ui-text-muted);
+  cursor: not-allowed;
+}
+
+:slotted(textarea:focus-visible) {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 2px;
+}
+</style>
+</template>
+`, controller: ui_textarea_exports },
+  { tag: "ui-toast-region", source: `<template component="ui-toast-region" controller="./controllers/ui-toast-region.js" status="early" summary="Migrated Looma ui-toast-region component.">
+  <defs>
+    <prop name="open" type="boolean" default="true">open token.</prop>
+    <state name="internalOpen" :value="false"></state>
+    <event name="close" type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="dismiss" type="object({ id: string, reason: action, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <div role="region" aria-label="Notifications" aria-live="polite" :data-state-open="internalOpen"><slot></slot></div>
+  <style>:scope {
+  position: fixed;
+  top: calc(var(--ui-space-4) + env(safe-area-inset-top));
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  display: grid;
+  gap: var(--ui-space-2);
+  inline-size: min(24rem, calc(100vw - (var(--ui-space-4) * 2)));
+  max-inline-size: 100%;
+  pointer-events: none;
+}
+
+:scope[popover] {
+  right: auto;
+  bottom: auto;
+  margin: 0;
+}
+
+:scope > * {
+  pointer-events: auto;
+}
+
+:slotted([data-ui-toast]) {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--ui-space-2);
+  align-items: start;
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-3);
+  padding: var(--ui-space-3) var(--ui-space-4);
+  background: var(--ui-surface-elevated);
+  color: var(--ui-text-primary);
+  box-shadow: var(--ui-shadow-lg);
+  animation: ui-toast-enter 0.25s var(--ui-motion-ease) forwards;
+}
+
+@keyframes ui-toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+:slotted([data-ui-toast][aria-hidden='true']) {
+  display: none;
+}
+
+:slotted([data-ui-toast-dismiss]) {
+  border: 0;
+  background: transparent;
+  color: var(--ui-text-secondary);
+  cursor: pointer;
+  font: inherit;
+}
+</style>
+</template>
+`, controller: ui_toast_region_exports },
+  { tag: "ui-tooltip", source: '<template component="ui-tooltip" controller="./controllers/ui-tooltip.js" status="early" summary="Migrated Looma ui-tooltip component.">\n  <defs>\n    <prop name="for" type="string" default="">for token.</prop>\n    <prop name="open" type="boolean">open token.</prop>\n    <prop name="defaultOpen" type="boolean" default="false">defaultOpen token.</prop>\n    <prop name="placement" type="string" default="top-start">placement token.</prop>\n    <prop name="showDelay" type="number" default="500">showDelay token.</prop>\n    <prop name="hideDelay" type="number" default="100">hideDelay token.</prop>\n    <prop name="toggleOnClick" type="boolean" default="false">toggleOnClick token.</prop>\n    <state name="internalOpen" :value="false"></state>\n    <event name="open" type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"></event>\n    <event name="close" type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"></event>\n  </defs>\n  <span role="tooltip" :hidden="not internalOpen" :data-state-open="internalOpen"><div class="tooltip__surface"><slot></slot></div></span>\n  <style>:scope {\n  position: fixed;\n  inset: auto;\n  margin: 0;\n  display: inline-block;\n  box-sizing: border-box;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  opacity: 0;\n  transform: translateY(4px);\n  transition:\n    opacity var(--ui-motion-fast) var(--ui-motion-ease),\n    transform var(--ui-motion-fast) var(--ui-motion-ease),\n    display var(--ui-motion-fast) allow-discrete,\n    overlay var(--ui-motion-fast) allow-discrete;\n}\n\n.tooltip__surface {\n  box-sizing: border-box;\n  border: 1px solid var(--ui-border-default);\n  border-radius: var(--ui-radius-2);\n  background: var(--ui-surface-elevated);\n  color: var(--ui-text-primary);\n  padding: var(--ui-space-2) var(--ui-space-3);\n  font-size: var(--ui-font-size-sm);\n  box-shadow: var(--ui-shadow-md);\n}\n\n:scope:popover-open { opacity: 1; transform: translateY(0); }\n\n@starting-style {\n  :scope:popover-open { opacity: 0; transform: translateY(4px); }\n}\n\n:scope[hidden] {\n  display: none !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :scope { transition: none; }\n}\n</style>\n</template>\n', controller: ui_tooltip_exports },
+  { tag: "ui-top-bar", source: '<template component="ui-top-bar" controller="./controllers/ui-top-bar.js" status="early" summary="Migrated Looma ui-top-bar component.">\n  <defs>\n    <state name="hasLeading" :value="false"></state>\n    <state name="hasSearch" :value="false"></state>\n    <state name="hasActions" :value="false"></state>\n  </defs>\n  <div><header class="top-bar" part="base"><div class="top-bar__leading" :hidden="not hasLeading"><slot name="leading"></slot></div><div class="top-bar__title"><slot></slot></div><div class="top-bar__search" :hidden="not hasSearch"><slot name="search"></slot></div><div class="top-bar__actions" :hidden="not hasActions"><slot name="actions"></slot></div></header></div>\n  <style>:scope {\n  position: sticky;\n  inset-block-start: 0;\n  z-index: var(--ui-top-bar-z-index, 100);\n  display: block;\n}\n\n.top-bar {\n  min-block-size: calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));\n  display: flex;\n  align-items: center;\n  gap: var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));\n  padding-block-start: env(safe-area-inset-top);\n  padding-inline-start: max(\n    var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)),\n    env(safe-area-inset-left)\n  );\n  padding-inline-end: max(\n    var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)),\n    env(safe-area-inset-right)\n  );\n  background: var(--ui-top-bar-bg, var(--ui-surface, #ffffff));\n  border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border, #e5e7eb));\n}\n\n.top-bar__leading,\n.top-bar__search,\n.top-bar__actions {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.top-bar__actions {\n  gap: var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem));\n}\n\n.top-bar__title {\n  min-inline-size: 0;\n  flex: 1;\n}\n\n[hidden] {\n  display: none;\n}\n\n@media (min-width: 768px) {\n  :scope {\n    display: none;\n  }\n}\n</style>\n</template>\n', controller: ui_top_bar_exports },
+  { tag: "ui-tree-item", source: `<template component="ui-tree-item" controller="./controllers/ui-tree-item.js" status="early" summary="Migrated Looma ui-tree-item component.">
+  <defs>
+    <prop name="itemId" type="string" default="">itemId token.</prop>
+    <prop name="label" type="string" default="">label token.</prop>
+    <prop name="dropDepth" type="number">dropDepth token.</prop>
+    <prop name="subtreeDepth" type="number">subtreeDepth token.</prop>
+    <prop name="container" type="boolean" default="false">container token.</prop>
+    <prop name="sortable" type="boolean" default="false">sortable token.</prop>
+    <prop name="dragType" type="string" default="item">dragType token.</prop>
+    <prop name="dropScope" type="string" default="">dropScope token.</prop>
+    <prop name="accepts" type="string" default="">accepts token.</prop>
+    <prop name="expanded" type="boolean">expanded token.</prop>
+    <prop name="defaultExpanded" type="boolean" default="false">defaultExpanded token.</prop>
+    <prop name="selected" type="boolean" default="false">selected token.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <state name="internalExpanded" :value="false"></state>
+    <state name="structuralLevel" :value="1"></state>
+    <state name="tabStop" :value="false"></state>
+    <event name="expand" type="object({ id: string, expanded: boolean, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <div role="treeitem" :aria-label="label" :data-container="container" :data-selected="selected" :data-disabled="disabled" :data-drop-scope="dropScope" :data-accepts="accepts"><div class="row" part="row"><button $if="sortable and not disabled" class="drag-handle" part="drag-handle" type="button"><span></span></button><template $match><button $when="container" class="disclosure" part="disclosure" type="button"><span></span></button><span $else class="disclosure-spacer" aria-hidden="true"></span></template><span class="leading" part="leading"><slot name="leading"></slot></span><span class="label" part="label"><slot></slot></span><span class="actions" part="actions"><slot name="actions"></slot></span><span class="drop-indicator row-drop-indicator" part="drop-indicator" aria-hidden="true"></span></div><div $if="container" class="children" part="children" role="group"><slot name="children"></slot></div><span class="drop-indicator subtree-drop-indicator" part="drop-indicator" aria-hidden="true"></span></div>
+  <style>:scope {
+  --ui-tree-indent: 16px;
+  --ui-tree-row-min-height: 32px;
+  --ui-tree-drop-color: var(--ui-accent-solid);
+
+  position: relative;
+  display: block;
+  min-inline-size: 0;
+  margin-inline-start: calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent));
+}
+
+.row {
+  position: relative;
+  display: grid;
+  grid-template-columns: 20px auto minmax(0, 1fr) auto;
+  align-items: center;
+  min-block-size: var(--ui-tree-row-min-height);
+  min-inline-size: 0;
+  font-size: var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));
+  border-radius: var(--ui-radius-md);
+  color: var(--ui-text-secondary);
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    color var(--ui-motion-fast) var(--ui-motion-ease),
+    opacity var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+    min-block-size var(--ui-motion-base) var(--ui-motion-ease);
+}
+
+.row:hover,
+:scope[data-selected] .row,
+.row:focus-within {
+  color: var(--ui-text-primary);
+  background: var(--ui-surface-muted);
+}
+
+:scope[data-disabled] .row {
+  opacity: 0.55;
+}
+
+:scope[data-dragging] .row {
+  opacity: 0.42;
+}
+
+:scope:focus {
+  outline: none;
+}
+
+:scope:focus-visible .row {
+  box-shadow: 0 0 0 2px var(--ui-focus-ring);
+}
+
+:scope[data-drop-position='inside'] .row {
+  background: var(--ui-accent-subtle);
+  box-shadow: inset 0 0 0 1px var(--ui-tree-drop-color);
+}
+
+.disclosure,
+.disclosure-spacer {
+  grid-column: 1;
+  grid-row: 1;
+  inline-size: 20px;
+  block-size: 28px;
+}
+
+.disclosure {
+  display: grid;
+  place-items: center;
+  padding: 0;
+  color: var(--ui-text-muted);
+  background: transparent;
+  border: 0;
+  border-radius: var(--ui-radius-sm);
+  cursor: pointer;
+}
+
+.disclosure:hover {
+  color: var(--ui-text-primary);
+  background: var(--ui-surface-elevated);
+}
+
+.disclosure-icon {
+  display: block;
+  inline-size: 14px;
+  block-size: 14px;
+  transform: rotate(-90deg);
+  transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+.disclosure-icon--expanded {
+  transform: rotate(0deg);
+}
+
+.disclosure-icon :is(svg),
+.drag-handle :is(svg) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.leading {
+  display: none;
+}
+
+.leading:has(*) {
+  display: inline-grid;
+  place-items: center;
+  grid-column: 2;
+  grid-row: 1;
+  inline-size: 16px;
+  block-size: 16px;
+  margin-inline-start: var(--ui-space-1);
+}
+
+.label {
+  grid-column: 3;
+  grid-row: 1;
+  min-inline-size: 0;
+  padding: var(--ui-space-1) var(--ui-space-2);
+}
+
+.actions {
+  grid-column: 4;
+  grid-row: 1;
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 0;
+}
+
+.drag-handle {
+  position: absolute;
+  z-index: 2;
+  inset-block-start: 50%;
+  inset-inline-start: -22px;
+  inline-size: 20px;
+  block-size: 32px;
+  display: grid;
+  place-items: center;
+  padding: 7px 3px;
+  color: var(--ui-text-muted);
+  background: var(--ui-surface-elevated);
+  border: 1px solid transparent;
+  border-radius: var(--ui-radius-sm);
+  cursor: grab;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-50%);
+  transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+.row:hover .drag-handle,
+.drag-handle:focus-visible,
+:scope[data-dragging] .drag-handle {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+}
+
+.drop-indicator {
+  position: absolute;
+  z-index: 3;
+  inset-inline: 1px;
+  display: none;
+  block-size: 2px;
+  border-radius: 999px;
+  background: var(--ui-tree-drop-color);
+  pointer-events: none;
+}
+
+.drop-indicator::before,
+.drop-indicator::after {
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  inline-size: 7px;
+  block-size: 7px;
+  border: 2px solid var(--ui-tree-drop-color);
+  border-radius: 999px;
+  background: var(--ui-surface-elevated);
+  transform: translateY(-50%);
+}
+
+.drop-indicator::before { inset-inline-start: -1px; }
+.drop-indicator::after { inset-inline-end: -1px; }
+
+:scope[data-drop-position='before'] .row-drop-indicator {
+  display: block;
+  inset-block-start: -1px;
+}
+
+:scope[data-drop-position='after'] .subtree-drop-indicator {
+  display: block;
+  inset-block-end: -1px;
+}
+
+.children[hidden] {
+  display: none;
+}
+
+html[data-ui-input-modality='touch'] :scope {
+  --ui-tree-row-min-height: 44px;
+}
+
+html[data-ui-input-modality='touch'] :scope .drag-handle {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .row,
+  .disclosure-icon,
+  .drag-handle {
+    transition: none;
+  }
+}
+</style>
+</template>
+`, controller: ui_tree_item_exports },
+  { tag: "ui-tree", source: '\n<template component="ui-tree" controller="./controllers/ui-tree.js" status="early" summary="Migrated Looma ui-tree component.">\n  <defs>\n    <prop name="label" type="string" default="Tree">label token.</prop>\n    <prop name="hoverExpandDelay" type="number" default="700">hoverExpandDelay token.</prop>\n    <prop name="maxDepth" type="number" default="0">maxDepth token.</prop>\n    <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 })"></event>\n    <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 })"></event>\n  </defs>\n  <div role="tree"><slot></slot></div>\n  <style>:scope {\n  --ui-tree-indent: 16px;\n  --ui-tree-gutter: 0px;\n\n  display: block;\n  min-inline-size: 0;\n  padding-inline-start: var(--ui-tree-gutter);\n}\n\n:slotted(ui-tree-item) {\n  --ui-tree-indent: inherit;\n}\n</style>\n</template>\n', controller: ui_tree_exports }
+];
+var styles = "";
+
+export {
+  records,
+  styles
+};