@threadlabs/looma 0.1.0

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

@@ -0,0 +1,104 @@
+import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { d as dispatchDetail, e as eventToTrigger } from './events-JwSoedEO.js';
+
+const 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}`;
+
+const 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 ? '' : undefined }, 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/esm/ui-toast-region.entry.js

@@ -0,0 +1,65 @@
+import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { d as dispatchDetail, e as eventToTrigger } from './events-JwSoedEO.js';
+
+const 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}`;
+
+const 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 ? '' : undefined }, h("slot", { key: '06f2c6cf39c4795afc0937669aa2104821aef3d6' })));
+    }
+    static get watchers() { return {
+        "open": [{
+                "syncFromProp": 0
+            }]
+    }; }
+};
+UIToastRegion.style = uiToastRegionCss();
+
+export { UIToastRegion as ui_toast_region };

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

@@ -0,0 +1,131 @@
+import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { o as openOverlay, c as closeOverlay, r as requestTopOverlayClose } from './manager-CR7f2MQC.js';
+import { d as dispatchDetail } from './events-JwSoedEO.js';
+
+const 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}`;
+
+const 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: 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 ? '' : undefined, 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/esm/ui-top-bar.entry.js

@@ -0,0 +1,41 @@
+import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+
+const 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;
+    });
+}
+const 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 };