@threadlabs/looma 0.1.0

package/dist/ui-textarea.entry-BYT47RAQ.js

@@ -0,0 +1,117 @@
+import {
+  dispatchDetail,
+  eventToTrigger
+} from "./chunk-UL7UIUJZ.js";
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-YK4MTZGJ.js";
+
+// dist/esm/ui-textarea.entry.js
+var uiTextareaCss = () => `:host{display:inline-flex;color:var(--ui-text-primary)}::slotted(textarea){width:100%;appearance:none;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background: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-border-strong)}::slotted(textarea:focus){border-color:var(--ui-focus-ring);box-shadow:0 0 0 3px var(--ui-accent-soft)}:host([data-invalid='true'])::slotted(textarea),::slotted(textarea[aria-invalid='true']){border-color:var(--ui-accent-active)}::slotted(textarea:disabled){background: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}`;
+var UITextarea = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return getElement(this);
+  }
+  value = "";
+  defaultValue = "";
+  disabled = false;
+  invalid = false;
+  readOnly = false;
+  rows = 4;
+  internalValue = "";
+  slotRef;
+  syncFromProp() {
+    this.internalValue = this.value;
+  }
+  syncToTextarea() {
+    const textarea = this.getTextarea();
+    if (!textarea)
+      return;
+    this.host.dataset.invalid = this.invalid ? "true" : "";
+    textarea.value = this.internalValue;
+    textarea.defaultValue = this.defaultValue;
+    textarea.disabled = this.disabled;
+    textarea.readOnly = this.readOnly;
+    textarea.rows = this.rows;
+    textarea.setAttribute("aria-invalid", this.invalid ? "true" : "false");
+  }
+  componentDidLoad() {
+    this.syncFromProp();
+    this.slotRef?.addEventListener("slotchange", () => this.syncToTextarea());
+    this.syncToTextarea();
+    const textarea = this.getTextarea();
+    textarea?.addEventListener("input", this.onInput);
+    textarea?.addEventListener("change", this.onChange);
+  }
+  disconnectedCallback() {
+    const textarea = this.getTextarea();
+    textarea?.removeEventListener("input", this.onInput);
+    textarea?.removeEventListener("change", this.onChange);
+  }
+  componentDidUpdate() {
+    this.syncToTextarea();
+  }
+  getTextarea() {
+    const slot = this.host.shadowRoot?.querySelector("slot");
+    const nodes = slot?.assignedElements() ?? Array.from(this.host.children);
+    return nodes.find((el) => el.tagName === "TEXTAREA") ?? null;
+  }
+  onInput = (e) => {
+    const textarea = e.target;
+    if (!textarea)
+      return;
+    this.internalValue = textarea.value;
+    dispatchDetail(this.host, "input", {
+      value: this.internalValue,
+      trigger: eventToTrigger(e)
+    });
+  };
+  onChange = (e) => {
+    const textarea = this.getTextarea();
+    if (!textarea)
+      return;
+    this.internalValue = textarea.value;
+    dispatchDetail(this.host, "change", {
+      value: this.internalValue,
+      trigger: eventToTrigger(e)
+    });
+  };
+  render() {
+    return h(Host, { key: "d52719875939fa9b2f757a35fb4cd1aa31a194c5", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "e40ba71b60cae07437219d6ab4b5879b26af1ac2", ref: (el) => this.slotRef = el }));
+  }
+  static get watchers() {
+    return {
+      "value": [{
+        "syncFromProp": 0
+      }],
+      "internalValue": [{
+        "syncToTextarea": 0
+      }],
+      "defaultValue": [{
+        "syncToTextarea": 0
+      }],
+      "disabled": [{
+        "syncToTextarea": 0
+      }],
+      "invalid": [{
+        "syncToTextarea": 0
+      }],
+      "readOnly": [{
+        "syncToTextarea": 0
+      }],
+      "rows": [{
+        "syncToTextarea": 0
+      }]
+    };
+  }
+};
+UITextarea.style = uiTextareaCss();
+export {
+  UITextarea as ui_textarea
+};

package/dist/ui-toast-region.entry-6UYR3ZU2.js

@@ -0,0 +1,78 @@
+import {
+  dispatchDetail,
+  eventToTrigger
+} from "./chunk-UL7UIUJZ.js";
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-YK4MTZGJ.js";
+
+// dist/esm/ui-toast-region.entry.js
+var uiToastRegionCss = () => `:host{position:fixed;top:var(--ui-space-4);left:50%;transform:translateX(-50%);z-index:9999;display:grid;gap:var(--ui-space-2);max-width:min(24rem, 90vw);pointer-events:none}:host>*{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}`;
+var UIToastRegion = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return getElement(this);
+  }
+  open = true;
+  internalOpen = true;
+  syncFromProp() {
+    this.internalOpen = this.open;
+  }
+  componentDidLoad() {
+    this.syncFromProp();
+    this.host.addEventListener("click", this.onClick);
+  }
+  disconnectedCallback() {
+    this.host.removeEventListener("click", this.onClick);
+  }
+  getToasts() {
+    return Array.from(this.host.querySelectorAll("[data-ui-toast]"));
+  }
+  updateOpenState() {
+    const toasts = this.getToasts();
+    this.internalOpen = toasts.length > 0;
+  }
+  onClick = (e) => {
+    const dismissBtn = e.target.closest?.("[data-ui-toast-dismiss]");
+    if (!dismissBtn)
+      return;
+    const toast = dismissBtn.closest?.("[data-ui-toast]");
+    if (!toast)
+      return;
+    const id = toast.id ?? "";
+    toast.setAttribute("aria-hidden", "true");
+    toast.remove();
+    dispatchDetail(this.host, "dismiss", {
+      id,
+      reason: "action",
+      trigger: eventToTrigger(e)
+    });
+    this.updateOpenState();
+    if (this.getToasts().length === 0) {
+      dispatchDetail(this.host, "close", {
+        open: false,
+        reason: "action",
+        trigger: eventToTrigger(e)
+      });
+    }
+  };
+  render() {
+    return h(Host, { key: "8e99577d8770984b8d6d29e442931570c1f1bc4d", role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? "" : void 0 }, h("slot", { key: "06f2c6cf39c4795afc0937669aa2104821aef3d6" }));
+  }
+  static get watchers() {
+    return {
+      "open": [{
+        "syncFromProp": 0
+      }]
+    };
+  }
+};
+UIToastRegion.style = uiToastRegionCss();
+export {
+  UIToastRegion as ui_toast_region
+};

package/dist/ui-tooltip.entry-YS7UX4FS.js

@@ -0,0 +1,145 @@
+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-tooltip.entry.js
+var uiTooltipCss = () => `:host{display:inline-block;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md)}:host([hidden]){display:none !important}`;
+var UITooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return getElement(this);
+  }
+  for = "";
+  open = false;
+  defaultOpen = false;
+  internalOpen = false;
+  overlayId = `ui-tooltip-${Math.random().toString(36).slice(2, 11)}`;
+  trigger = null;
+  syncFromProp() {
+    this.internalOpen = this.open;
+  }
+  syncOverlay() {
+    if (this.internalOpen) {
+      openOverlay({
+        id: this.overlayId,
+        modal: false,
+        element: this.host,
+        dismissible: true,
+        requestClose: (reason, trigger) => this.handleRequestClose(reason, trigger)
+      });
+    } else {
+      closeOverlay(this.overlayId);
+    }
+  }
+  componentDidLoad() {
+    this.syncFromProp();
+    this.internalOpen = this.internalOpen || this.defaultOpen;
+    this.resolveTrigger();
+    this.attachTriggerListeners();
+    this.host.addEventListener("keydown", this.onKeydown);
+    this.syncOverlay();
+  }
+  componentDidUpdate() {
+    this.resolveTrigger();
+    this.attachTriggerListeners();
+    this.syncOverlay();
+  }
+  disconnectedCallback() {
+    this.detachTriggerListeners();
+    this.host.removeEventListener("keydown", this.onKeydown);
+    closeOverlay(this.overlayId);
+  }
+  resolveTrigger() {
+    if (this.for) {
+      this.trigger = document.getElementById(this.for);
+    } else {
+      this.trigger = this.host.previousElementSibling;
+    }
+  }
+  attachTriggerListeners() {
+    this.detachTriggerListeners();
+    if (!this.trigger)
+      return;
+    this.trigger.addEventListener("pointerenter", this.onTriggerEnter);
+    this.trigger.addEventListener("pointerleave", this.onTriggerLeave);
+    this.trigger.addEventListener("focusin", this.onTriggerFocusIn);
+    this.trigger.addEventListener("focusout", this.onTriggerFocusOut);
+  }
+  detachTriggerListeners() {
+    if (!this.trigger)
+      return;
+    this.trigger.removeEventListener("pointerenter", this.onTriggerEnter);
+    this.trigger.removeEventListener("pointerleave", this.onTriggerLeave);
+    this.trigger.removeEventListener("focusin", this.onTriggerFocusIn);
+    this.trigger.removeEventListener("focusout", this.onTriggerFocusOut);
+  }
+  onTriggerEnter = () => {
+    this.internalOpen = true;
+    dispatchDetail(this.host, "open", { open: true, reason: "action", trigger: "pointer" });
+    this.syncOverlay();
+  };
+  onTriggerLeave = () => {
+    this.internalOpen = false;
+    dispatchDetail(this.host, "close", { open: false, reason: "action", trigger: "pointer" });
+    this.syncOverlay();
+  };
+  onTriggerFocusIn = () => {
+    this.internalOpen = true;
+    dispatchDetail(this.host, "open", { open: true, reason: "action", trigger: "keyboard" });
+    this.syncOverlay();
+  };
+  onTriggerFocusOut = (e) => {
+    const related = e.relatedTarget;
+    if (related && this.host.contains(related))
+      return;
+    this.internalOpen = false;
+    dispatchDetail(this.host, "close", { open: false, reason: "action", trigger: "keyboard" });
+    this.syncOverlay();
+  };
+  handleRequestClose(reason, trigger) {
+    if (reason === "escape") {
+      this.internalOpen = false;
+      dispatchDetail(this.host, "close", {
+        open: false,
+        reason: "escape",
+        trigger
+      });
+      this.trigger?.focus();
+    }
+  }
+  onKeydown = (e) => {
+    if (e.key === "Escape") {
+      requestTopOverlayClose("escape", "keyboard");
+    }
+  };
+  render() {
+    return h(Host, { key: "900ec6fc08ea7a7965195e8203fd779e70cfa6e6", role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("slot", { key: "b384f779fa9a229cf635be5adb3476ca93270c24" }));
+  }
+  static get watchers() {
+    return {
+      "open": [{
+        "syncFromProp": 0
+      }],
+      "internalOpen": [{
+        "syncOverlay": 0
+      }]
+    };
+  }
+};
+UITooltip.style = uiTooltipCss();
+export {
+  UITooltip as ui_tooltip
+};

package/dist/ui-top-bar.entry-V27H6NFO.js

@@ -0,0 +1,49 @@
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-YK4MTZGJ.js";
+
+// dist/esm/ui-top-bar.entry.js
+var uiTopBarCss = () => `:host{position:sticky;inset-block-start:0;z-index:var(--ui-top-bar-z-index, 100);display:block}.top-bar{min-block-size:var(--ui-top-bar-height, 56px);display:flex;align-items:center;gap:var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));padding-inline:var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem));background:var(--ui-top-bar-bg, var(--ui-surface, #ffffff));border-block-end:1px solid var(--ui-top-bar-border, var(--ui-border, #e5e7eb))}.top-bar__leading,.top-bar__search,.top-bar__actions{display:flex;align-items:center;flex-shrink:0}.top-bar__actions{gap:var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem))}.top-bar__title{min-inline-size:0;flex:1}[hidden]{display:none}@media (min-width: 768px){:host{display:none}}`;
+function slotHasContent(slot) {
+  if (!slot) {
+    return false;
+  }
+  return slot.assignedNodes({ flatten: true }).some((node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      return Boolean(node.textContent?.trim());
+    }
+    return true;
+  });
+}
+var UITopBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return getElement(this);
+  }
+  hasLeading = false;
+  hasSearch = false;
+  hasActions = false;
+  leadingSlot;
+  searchSlot;
+  actionsSlot;
+  componentDidLoad() {
+    this.syncSlots();
+  }
+  syncSlots = () => {
+    this.hasLeading = slotHasContent(this.leadingSlot);
+    this.hasSearch = slotHasContent(this.searchSlot);
+    this.hasActions = slotHasContent(this.actionsSlot);
+  };
+  render() {
+    return h(Host, { key: "23cbff2fdb06a40f0380dbf217d064cb1b9f7a9c" }, h("header", { key: "9472960f4445f8ed7d0800d71db3cbac020fca3f", class: "top-bar", part: "base" }, h("div", { key: "d408be025d90fdcf1416213b9e76f3b780f47d97", class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: "3dc4db316a040ff10a8b8b218b42799d3e1a7b97", name: "leading", ref: (el) => this.leadingSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "1b362f19f9a738600afb266e9641c0ee5c8870c9", class: "top-bar__title" }, h("slot", { key: "bb93d34a3dea15c697dcd19dc0ecc3488ee390c8" })), h("div", { key: "3d61d781b654ee1d91a6ce5ba64db9732ee1f8ee", class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: "5731817be644f10ed745fdc0868b85b66a9c06d4", name: "search", ref: (el) => this.searchSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "2ee868b93f5195832830900382545b2131e78bb8", class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: "1d410fa60f112904cfb866cff5a3f2fb18021c93", name: "actions", ref: (el) => this.actionsSlot = el, onSlotchange: this.syncSlots }))));
+  }
+};
+UITopBar.style = uiTopBarCss();
+export {
+  UITopBar as ui_top_bar
+};