@threadlabs/looma 0.1.0

package/dist/types/utils/events.d.ts

@@ -0,0 +1,4 @@
+export type OverlayTrigger = 'keyboard' | 'pointer' | 'programmatic';
+export declare function eventToTrigger(event: Event): OverlayTrigger;
+export declare function isActivationKey(event: KeyboardEvent): boolean;
+export declare function dispatchDetail<T>(el: HTMLElement, name: string, detail: T): void;

package/dist/types/utils/id.d.ts

@@ -0,0 +1 @@
+export declare function createId(prefix: string): string;

package/dist/types/utils/initials.d.ts

@@ -0,0 +1 @@
+export declare function toInitials(value: string): string;

package/dist/ui-avatar-group.entry-BZGXBOSE.js

@@ -0,0 +1,59 @@
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-YK4MTZGJ.js";
+
+// dist/esm/ui-avatar-group.entry.js
+var uiAvatarGroupCss = () => `:host{display:flex;align-items:center;flex-direction:row-reverse;gap:0}::slotted(*:not([data-ui-avatar-group-overflow])){margin-inline-end:-0.5rem;flex-shrink:0}::slotted(*:last-of-type:not([data-ui-avatar-group-overflow])){margin-inline-end:0}.overflow{margin-inline-end:-0.5rem;display:inline-flex;align-items:center;justify-content:center;inline-size:2.5rem;block-size:2.5rem;border-radius:999px;border:1px solid var(--ui-border-default);background:var(--ui-surface-muted);color:var(--ui-text-secondary);font:inherit;font-size:0.75rem;font-weight:600;flex-shrink:0}`;
+var OVERFLOW_ATTR = "data-ui-avatar-group-overflow";
+var UIAvatarGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return getElement(this);
+  }
+  max = 5;
+  label = "People";
+  overflowCount = 0;
+  slotRef;
+  syncOverflow() {
+    this.updateOverflow();
+  }
+  componentDidLoad() {
+    this.slotRef?.addEventListener("slotchange", () => this.updateOverflow());
+    this.updateOverflow();
+  }
+  componentDidUpdate() {
+    this.updateOverflow();
+  }
+  updateOverflow() {
+    const slot = this.host.shadowRoot?.querySelector("slot");
+    const nodes = slot?.assignedElements() ?? Array.from(this.host.children);
+    const children = nodes.filter((el) => !el.hasAttribute(OVERFLOW_ATTR));
+    const total = children.length;
+    const visibleCount = Math.min(this.max, total);
+    const overflowCount = total > this.max ? total - this.max : 0;
+    children.forEach((el, i) => {
+      el.hidden = i >= visibleCount;
+      el.setAttribute("aria-hidden", String(i >= visibleCount));
+    });
+    this.overflowCount = overflowCount;
+  }
+  render() {
+    return h(Host, { key: "9c8fbeb6e8c87ef4d86778a70a52f48b62717728", role: "list", "aria-label": this.label || void 0 }, h("slot", { key: "432877b335f2a75f6b17a14b4be768c68ba04bfa" }), this.overflowCount > 0 && h("span", { key: "ccf8007947e5d97edcdf42b7f4740db33560956b", class: "overflow", role: "listitem", "aria-label": `${this.overflowCount} more`, "data-ui-avatar-group-overflow": true }, "+", this.overflowCount));
+  }
+  static get watchers() {
+    return {
+      "max": [{
+        "syncOverflow": 0
+      }]
+    };
+  }
+};
+UIAvatarGroup.style = uiAvatarGroupCss();
+export {
+  UIAvatarGroup as ui_avatar_group
+};

package/dist/ui-avatar.entry-S2O2W5SA.js

@@ -0,0 +1,51 @@
+import {
+  Host,
+  h,
+  registerInstance
+} from "./chunk-YK4MTZGJ.js";
+
+// dist/esm/ui-avatar.entry.js
+function toInitials(value) {
+  const tokens = value.trim().split(/\s+/).filter((token) => token.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();
+}
+var uiAvatarCss = () => `:host{display:inline-grid;place-items:center;overflow:hidden;inline-size:2.5rem;block-size:2.5rem;border-radius:999px;border:1px solid var(--ui-border-default);background:var(--ui-surface-muted);color:var(--ui-text-secondary);font:inherit;font-size:0.875rem;font-weight:600;text-transform:uppercase}.avatar{display:contents}.avatar img{grid-area:1 / 1;inline-size:100%;block-size:100%;object-fit:cover}.avatar .fallback{grid-area:1 / 1;display:inline-flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%}`;
+var UIAvatar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  src = "";
+  alt = "";
+  name = "";
+  fallback = "";
+  hasImage = false;
+  watchSrc() {
+    this.hasImage = false;
+  }
+  onImageLoad = () => {
+    this.hasImage = true;
+  };
+  onImageError = () => {
+    this.hasImage = false;
+  };
+  render() {
+    const fallbackText = this.fallback || toInitials(this.name || this.alt);
+    const label = this.alt || this.name || "Avatar";
+    return h(Host, { key: "f61c3a4e5556be947b9f573591d4db0687fd01fd", role: "img", "aria-label": label, "data-has-image": this.hasImage ? "" : void 0 }, h("div", { key: "03d4a3d1c86bb1d1779ad007ba12407230478dac", class: "avatar" }, h("img", { key: "512015d68f9118bf8b8181b5b5118c133e783baf", src: this.src, alt: label, onLoad: this.onImageLoad, onError: this.onImageError, hidden: !this.hasImage, "aria-hidden": this.hasImage ? "false" : "true" }), h("span", { key: "48b0f1f81a6465c6021d4c867af67a559b9b8a67", class: "fallback", hidden: this.hasImage, "aria-hidden": this.hasImage ? "true" : "false" }, fallbackText)));
+  }
+  static get watchers() {
+    return {
+      "src": [{
+        "watchSrc": 0
+      }]
+    };
+  }
+};
+UIAvatar.style = uiAvatarCss();
+export {
+  UIAvatar as ui_avatar
+};

package/dist/ui-badge.entry-CVJDISCR.js

@@ -0,0 +1,22 @@
+import {
+  Host,
+  h,
+  registerInstance
+} from "./chunk-YK4MTZGJ.js";
+
+// dist/esm/ui-badge.entry.js
+var uiBadgeCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-default);border-radius:999px;background:var(--ui-surface-muted);color:var(--ui-text-secondary);font:inherit;font-size:0.75rem;line-height:1;padding:0.25em 0.6em;white-space:nowrap}:host([data-tone='accent']){background:var(--ui-accent-solid);border-color:var(--ui-accent-solid);color:var(--ui-text-on-accent)}:host([data-tone='danger']){background:var(--ui-danger-solid);border-color:var(--ui-danger-solid);color:var(--ui-text-on-accent)}:host([data-tone='success']){background:var(--ui-success-solid);border-color:var(--ui-success-solid);color:var(--ui-text-on-accent)}:host([data-tone='warning']){background:var(--ui-warning-solid);border-color:var(--ui-warning-solid);color:var(--ui-text-primary)}:host([data-tone='info']){background:var(--ui-info-solid);border-color:var(--ui-info-solid);color:var(--ui-text-on-accent)}:host([data-variant='subtle'][data-tone='accent']){background:var(--ui-accent-soft);border-color:var(--ui-accent-soft);color:var(--ui-accent-solid)}:host([data-variant='subtle'][data-tone='danger']){background:var(--ui-danger-soft);border-color:var(--ui-danger-soft);color:var(--ui-danger-solid)}:host([data-variant='subtle'][data-tone='success']){background:var(--ui-success-soft);border-color:var(--ui-success-soft);color:var(--ui-success-solid)}:host([data-variant='subtle'][data-tone='warning']){background:var(--ui-warning-soft);border-color:var(--ui-warning-soft);color:var(--ui-warning-solid)}:host([data-variant='subtle'][data-tone='info']){background:var(--ui-info-soft);border-color:var(--ui-info-soft);color:var(--ui-info-solid)}`;
+var UIBadge = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  variant;
+  tone;
+  render() {
+    return h(Host, { key: "53eba0640816bc09ae198de29f9a1ac97c1d5f1d", "data-variant": this.variant || void 0, "data-tone": this.tone || void 0 }, h("slot", { key: "abc8a9e09c2001f222f9aa8f164da76ff8343e01" }));
+  }
+};
+UIBadge.style = uiBadgeCss();
+export {
+  UIBadge as ui_badge
+};

package/dist/ui-button.entry-LNJBEJFE.js

@@ -0,0 +1,72 @@
+import {
+  isActivationKey
+} from "./chunk-UL7UIUJZ.js";
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-YK4MTZGJ.js";
+
+// dist/esm/ui-button.entry.js
+var uiButtonCss = () => `:host{display:inline-flex;vertical-align:middle;color:var(--ui-text-primary)}::slotted(button){appearance:none;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background: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);margin:0}:host([data-size='sm'])::slotted(button){padding:var(--ui-space-1) var(--ui-space-2);font-size:0.875rem}:host([data-size='lg'])::slotted(button){padding:var(--ui-space-3) var(--ui-space-4);font-size:1rem}::slotted(button:hover:enabled){background:var(--ui-surface-muted);border-color:var(--ui-border-strong)}::slotted(button:active:enabled){background:var(--ui-surface-subtle)}:host([data-variant='solid'])::slotted(button){border-color:var(--ui-accent-solid);background:var(--ui-accent-solid);color:var(--ui-text-on-accent);box-shadow:var(--ui-shadow-xs)}:host([data-variant='solid'])::slotted(button:hover:enabled){background:var(--ui-accent-hover);border-color:var(--ui-accent-hover);box-shadow:var(--ui-shadow-sm)}:host([data-variant='solid'])::slotted(button:active:enabled){background:var(--ui-accent-active);border-color:var(--ui-accent-active);box-shadow:none}:host([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-shadow-xs)}:host([data-variant='destructive'])::slotted(button:hover:enabled){background:var(--ui-danger-hover);border-color:var(--ui-danger-hover);box-shadow:var(--ui-shadow-sm)}:host([data-variant='ghost'])::slotted(button){border-color:transparent;background:transparent}:host([data-variant='ghost'])::slotted(button:hover:enabled){background:var(--ui-surface-muted);border-color:transparent}:host([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}::slotted(button:disabled),:host([data-disabled]){opacity:0.6;cursor:not-allowed}`;
+var UIButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return getElement(this);
+  }
+  variant;
+  size;
+  disabled = false;
+  slotRef;
+  syncToButton() {
+    const btn = this.getButton();
+    if (!btn)
+      return;
+    this.host.dataset.variant = this.variant || "";
+    this.host.dataset.size = this.size || "";
+    this.host.dataset.disabled = this.disabled ? "true" : "";
+    btn.disabled = this.disabled;
+  }
+  componentDidLoad() {
+    this.slotRef?.addEventListener("slotchange", () => this.syncToButton());
+    this.syncToButton();
+  }
+  componentDidUpdate() {
+    this.syncToButton();
+  }
+  getButton() {
+    const slot = this.host.shadowRoot?.querySelector("slot");
+    const nodes = slot?.assignedElements() ?? Array.from(this.host.children);
+    return nodes.find((el) => el.tagName === "BUTTON") ?? null;
+  }
+  onKeydown = (e) => {
+    const btn = this.getButton();
+    if (btn || this.disabled || !isActivationKey(e))
+      return;
+    e.preventDefault();
+    this.host.click();
+  };
+  render() {
+    return h(Host, { key: "01011aa13228b9e8d10ed11b99c95ef1df91326d", "data-variant": this.variant || void 0, "data-size": this.size || void 0, "data-disabled": this.disabled ? "" : void 0, onKeyDown: this.onKeydown }, h("slot", { key: "2bf0274d2732ea46fdf016a46d85bbe6e0d96bba", ref: (el) => this.slotRef = el }));
+  }
+  static get watchers() {
+    return {
+      "variant": [{
+        "syncToButton": 0
+      }],
+      "size": [{
+        "syncToButton": 0
+      }],
+      "disabled": [{
+        "syncToButton": 0
+      }]
+    };
+  }
+};
+UIButton.style = uiButtonCss();
+export {
+  UIButton as ui_button
+};

package/dist/ui-checkbox.entry-5RA2CB43.js

@@ -0,0 +1,102 @@
+import {
+  dispatchDetail,
+  eventToTrigger
+} from "./chunk-UL7UIUJZ.js";
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-YK4MTZGJ.js";
+
+// dist/esm/ui-checkbox.entry.js
+var uiCheckboxCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2);color:var(--ui-text-primary)}:host([aria-disabled='true']),:host([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}`;
+var UICheckbox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return getElement(this);
+  }
+  checked = false;
+  defaultChecked = false;
+  disabled = false;
+  indeterminate = false;
+  required = false;
+  value = "on";
+  internalChecked = false;
+  slotRef;
+  syncFromProp() {
+    this.internalChecked = this.checked;
+  }
+  syncToInput() {
+    const input = this.getInput();
+    if (!input)
+      return;
+    this.host.dataset.disabled = this.disabled ? "true" : "";
+    this.host.setAttribute("aria-disabled", String(this.disabled));
+    input.checked = this.internalChecked;
+    input.indeterminate = this.indeterminate;
+    input.disabled = this.disabled;
+    input.required = this.required;
+    input.value = this.value;
+  }
+  componentDidLoad() {
+    this.syncFromProp();
+    this.internalChecked = this.internalChecked || this.defaultChecked;
+    this.slotRef?.addEventListener("slotchange", () => this.syncToInput());
+    this.syncToInput();
+    const input = this.getInput();
+    input?.addEventListener("change", this.onInputChange);
+  }
+  disconnectedCallback() {
+    const input = this.getInput();
+    input?.removeEventListener("change", this.onInputChange);
+  }
+  componentDidUpdate() {
+    this.syncToInput();
+  }
+  getInput() {
+    const slot = this.host.shadowRoot?.querySelector("slot");
+    const nodes = slot?.assignedElements() ?? Array.from(this.host.children);
+    return nodes.find((el) => el instanceof HTMLInputElement && el.type === "checkbox") ?? null;
+  }
+  onInputChange = (e) => {
+    const input = e.target;
+    if (!input)
+      return;
+    this.internalChecked = input.checked;
+    this.indeterminate = input.indeterminate;
+    dispatchDetail(this.host, "change", {
+      checked: this.internalChecked,
+      value: this.value,
+      trigger: eventToTrigger(e)
+    });
+  };
+  render() {
+    return h(Host, { key: "c125eb000960f63f48ae8a96e8f001c843f8baa7", role: "checkbox", "aria-checked": this.indeterminate ? "mixed" : String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? "" : void 0 }, h("slot", { key: "8eade76069c56e00d160488c5d91dae7b46ccc99", ref: (el) => this.slotRef = el }));
+  }
+  static get watchers() {
+    return {
+      "checked": [{
+        "syncFromProp": 0
+      }],
+      "internalChecked": [{
+        "syncToInput": 0
+      }],
+      "indeterminate": [{
+        "syncToInput": 0
+      }],
+      "disabled": [{
+        "syncToInput": 0
+      }],
+      "required": [{
+        "syncToInput": 0
+      }]
+    };
+  }
+};
+UICheckbox.style = uiCheckboxCss();
+export {
+  UICheckbox as ui_checkbox
+};

package/dist/ui-context-menu.entry-UUOCT75F.js

@@ -0,0 +1,211 @@
+import {
+  closeOverlay,
+  openOverlay,
+  requestTopOverlayClose
+} from "./chunk-G53JEAQK.js";
+import {
+  dispatchDetail
+} from "./chunk-UL7UIUJZ.js";
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-YK4MTZGJ.js";
+
+// dist/esm/ui-context-menu.entry.js
+var uiContextMenuCss = () => `:host{display:contents}.menu{position:fixed;z-index:var(--ui-z-overlay, 1000);min-width:12rem}.menu[data-open]{display:block}.menu:not([data-open]){display:none !important}`;
+var UIContextMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return getElement(this);
+  }
+  /** Controls the menu when the consumer owns open state. */
+  open = false;
+  /** Opens the menu on first client render. */
+  defaultOpen = false;
+  /** Optional id of the region that should also respond to a context-menu gesture. */
+  for;
+  internalOpen = false;
+  overlayId = `ui-context-menu-${Math.random().toString(36).slice(2, 11)}`;
+  trigger = null;
+  contextTarget = null;
+  pointerX = 0;
+  pointerY = 0;
+  syncFromProp() {
+    this.internalOpen = this.open;
+  }
+  syncTarget() {
+    this.resolveTargets();
+    this.attachTargetListeners();
+  }
+  syncOverlay() {
+    this.syncTriggerState();
+    if (this.internalOpen) {
+      openOverlay({
+        id: this.overlayId,
+        modal: false,
+        element: this.host,
+        dismissible: true,
+        requestClose: (reason, trigger) => this.closeMenu(reason, trigger)
+      });
+    } else {
+      closeOverlay(this.overlayId);
+    }
+  }
+  componentDidLoad() {
+    this.syncFromProp();
+    this.internalOpen = this.internalOpen || this.defaultOpen;
+    this.resolveTargets();
+    this.attachTargetListeners();
+    this.syncTriggerState();
+    this.syncOverlay();
+  }
+  componentDidUpdate() {
+    this.resolveTargets();
+    this.attachTargetListeners();
+    this.syncTriggerState();
+  }
+  disconnectedCallback() {
+    this.detachTargetListeners();
+    closeOverlay(this.overlayId);
+  }
+  resolveTargets() {
+    const previousTrigger = this.trigger;
+    const previousContextTarget = this.contextTarget;
+    const explicitTrigger = this.host.querySelector('[slot="trigger"]');
+    const referencedTarget = this.for ? document.getElementById(this.for) : null;
+    this.trigger = explicitTrigger;
+    this.contextTarget = referencedTarget ?? explicitTrigger ?? this.host.parentElement;
+    if (previousTrigger !== this.trigger || previousContextTarget !== this.contextTarget) {
+      previousTrigger?.removeEventListener("click", this.onTriggerClick);
+      previousTrigger?.removeEventListener("keydown", this.onTriggerKeydown);
+      previousContextTarget?.removeEventListener("contextmenu", this.onContextMenu);
+    }
+  }
+  attachTargetListeners() {
+    this.detachTargetListeners();
+    this.trigger?.addEventListener("click", this.onTriggerClick);
+    this.trigger?.addEventListener("keydown", this.onTriggerKeydown);
+    this.contextTarget?.addEventListener("contextmenu", this.onContextMenu);
+  }
+  detachTargetListeners() {
+    this.trigger?.removeEventListener("click", this.onTriggerClick);
+    this.trigger?.removeEventListener("keydown", this.onTriggerKeydown);
+    this.contextTarget?.removeEventListener("contextmenu", this.onContextMenu);
+  }
+  syncTriggerState() {
+    if (!this.trigger)
+      return;
+    this.trigger.setAttribute("aria-haspopup", "menu");
+    this.trigger.setAttribute("aria-expanded", this.internalOpen ? "true" : "false");
+  }
+  getItems() {
+    return Array.from(this.host.querySelectorAll("ui-menu-item")).filter((item) => !this.isItemDisabled(item));
+  }
+  focusFirstItem() {
+    requestAnimationFrame(() => this.getItems()[0]?.focus());
+  }
+  openMenu(x, y, trigger) {
+    this.pointerX = x;
+    this.pointerY = y;
+    this.internalOpen = true;
+    dispatchDetail(this.host, "open", {
+      open: true,
+      reason: "action",
+      trigger
+    });
+    this.focusFirstItem();
+  }
+  openFromTrigger(trigger) {
+    if (!this.trigger)
+      return;
+    const rect = this.trigger.getBoundingClientRect();
+    this.openMenu(rect.left, rect.bottom, trigger);
+  }
+  closeMenu(reason, trigger, returnFocus = true) {
+    if (!this.internalOpen)
+      return;
+    this.internalOpen = false;
+    dispatchDetail(this.host, "close", {
+      open: false,
+      reason,
+      trigger
+    });
+    if (returnFocus) {
+      this.trigger?.focus();
+    }
+  }
+  onTriggerClick = (event) => {
+    if (this.internalOpen) {
+      this.closeMenu("action", event.detail === 0 ? "keyboard" : "pointer");
+      return;
+    }
+    this.openFromTrigger(event.detail === 0 ? "keyboard" : "pointer");
+  };
+  onTriggerKeydown = (event) => {
+    if (event.key !== "Enter" && event.key !== " " && event.key !== "ArrowDown")
+      return;
+    event.preventDefault();
+    if (!this.internalOpen) {
+      this.openFromTrigger("keyboard");
+      return;
+    }
+    this.focusFirstItem();
+  };
+  onContextMenu = (event) => {
+    event.preventDefault();
+    this.openMenu(event.clientX, event.clientY, "pointer");
+  };
+  isItemDisabled(item) {
+    return item.getAttribute("aria-disabled") === "true" || item.hasAttribute("disabled") || item.getAttribute("disabled") === "true" || item.disabled === true;
+  }
+  onKeydown = (event) => {
+    if (!this.internalOpen)
+      return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      requestTopOverlayClose("escape", "keyboard");
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      const target = event.target.closest?.("ui-menu-item");
+      if (!target || this.isItemDisabled(target))
+        return;
+      event.preventDefault();
+      const value = target.getAttribute("value") ?? target.getAttribute("data-value") ?? "";
+      dispatchDetail(this.host, "select", { value, trigger: "keyboard" });
+      this.closeMenu("action", "keyboard");
+    }
+  };
+  onItemClick = (event) => {
+    const item = event.target.closest?.("ui-menu-item");
+    if (!item || this.isItemDisabled(item))
+      return;
+    const value = item.getAttribute("value") ?? item.getAttribute("data-value") ?? "";
+    dispatchDetail(this.host, "select", { value, trigger: "pointer" });
+    this.closeMenu("action", "pointer");
+  };
+  render() {
+    return h(Host, { key: "c57c08724714d1de8c22a4a1e86e3a790f45fa20", "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: "4048abb040de1125b8eb02358480914c97ea6b06", name: "trigger" }), h("div", { key: "6ce80f67142319260093903d289456070d49bfcc", class: "menu", "data-open": this.internalOpen ? "" : void 0, style: { left: `${this.pointerX}px`, top: `${this.pointerY}px` } }, h("ui-menu", { key: "2a2c22f0a797ca3a70a1399de41de2b18257abf8", open: this.internalOpen }, h("slot", { key: "252cc6e973704cd561301b5bf96f98481c6c74ff" }))));
+  }
+  static get watchers() {
+    return {
+      "open": [{
+        "syncFromProp": 0
+      }],
+      "for": [{
+        "syncTarget": 0
+      }],
+      "internalOpen": [{
+        "syncOverlay": 0
+      }]
+    };
+  }
+};
+UIContextMenu.style = uiContextMenuCss();
+export {
+  UIContextMenu as ui_context_menu
+};

package/dist/ui-dialog.entry-OEPJTEES.js

@@ -0,0 +1,106 @@
+import {
+  closeOverlay,
+  openOverlay,
+  requestTopOverlayClose
+} from "./chunk-G53JEAQK.js";
+import {
+  dispatchDetail
+} from "./chunk-UL7UIUJZ.js";
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-YK4MTZGJ.js";
+
+// dist/esm/ui-dialog.entry.js
+var uiDialogCss = () => `:host{display:block}:host:not([open]){display:none}:host dialog{--ui-dialog-duration:var(--ui-motion-base);position:fixed;inset:var(--ui-space-4);width:min(100%, 440px);max-width:min(100%, 440px);margin:auto;padding:var(--ui-space-4);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}:host 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)}}:host 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}:host 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}}`;
+var UIDialog = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return getElement(this);
+  }
+  open = false;
+  defaultOpen = false;
+  modal = true;
+  dismissible = true;
+  internalOpen = false;
+  overlayId = `ui-dialog-${Math.random().toString(36).slice(2, 11)}`;
+  dialogRef;
+  syncFromProp() {
+    this.internalOpen = this.open;
+  }
+  syncOpen() {
+    if (this.dialogRef) {
+      if (this.internalOpen) {
+        this.dialogRef.showModal();
+        openOverlay({
+          id: this.overlayId,
+          modal: this.modal,
+          element: this.host,
+          dismissible: this.dismissible,
+          requestClose: (reason, trigger) => this.handleRequestClose(reason, trigger)
+        });
+      } else {
+        this.dialogRef.close();
+        closeOverlay(this.overlayId);
+      }
+    }
+  }
+  componentDidLoad() {
+    this.syncFromProp();
+    this.internalOpen = this.internalOpen || this.defaultOpen;
+    this.dialogRef?.addEventListener("close", this.onDialogClose);
+    this.syncOpen();
+  }
+  disconnectedCallback() {
+    this.dialogRef?.removeEventListener("close", this.onDialogClose);
+    closeOverlay(this.overlayId);
+  }
+  componentDidUpdate() {
+    this.syncOpen();
+  }
+  handleRequestClose(reason, trigger) {
+    this.internalOpen = false;
+    dispatchDetail(this.host, "close", {
+      open: false,
+      reason,
+      trigger
+    });
+  }
+  onDialogClose = () => {
+    if (this.internalOpen) {
+      this.internalOpen = false;
+      closeOverlay(this.overlayId);
+      dispatchDetail(this.host, "close", {
+        open: false,
+        reason: "programmatic",
+        trigger: "programmatic"
+      });
+    }
+  };
+  onKeydown = (e) => {
+    if (e.key === "Escape") {
+      requestTopOverlayClose("escape", "keyboard");
+    }
+  };
+  render() {
+    return h(Host, { key: "2a2fcdfa1e3fac5eb3c0e3d6748cebdf388c216d", "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("dialog", { key: "c3eef2bb3bec77fa518269fce38c19c2ededda49", ref: (el) => this.dialogRef = el, open: this.internalOpen }, h("slot", { key: "9ae5c30d57096184ec287fd9dd134ff566b9fd39" })));
+  }
+  static get watchers() {
+    return {
+      "open": [{
+        "syncFromProp": 0
+      }],
+      "internalOpen": [{
+        "syncOpen": 0
+      }]
+    };
+  }
+};
+UIDialog.style = uiDialogCss();
+export {
+  UIDialog as ui_dialog
+};