@threadlabs/looma 0.1.0

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

@@ -0,0 +1,106 @@
+'use strict';
+
+var index = require('./index-D07f6BOw.js');
+var events = require('./events-TcQIzpNv.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) {
+        index.registerInstance(this, hostRef);
+    }
+    get host() { return index.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;
+        events.dispatchDetail(this.host, 'input', {
+            value: this.internalValue,
+            trigger: events.eventToTrigger(e),
+        });
+    };
+    onChange = (e) => {
+        const textarea = this.getTextarea();
+        if (!textarea)
+            return;
+        this.internalValue = textarea.value;
+        events.dispatchDetail(this.host, 'change', {
+            value: this.internalValue,
+            trigger: events.eventToTrigger(e),
+        });
+    };
+    render() {
+        return (index.h(index.Host, { key: 'd52719875939fa9b2f757a35fb4cd1aa31a194c5', "data-invalid": this.invalid ? '' : undefined }, index.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();
+
+exports.ui_textarea = UITextarea;

package/dist/cjs/ui-toast-region.cjs.entry.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var index = require('./index-D07f6BOw.js');
+var events = require('./events-TcQIzpNv.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) {
+        index.registerInstance(this, hostRef);
+    }
+    get host() { return index.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();
+        events.dispatchDetail(this.host, 'dismiss', {
+            id,
+            reason: 'action',
+            trigger: events.eventToTrigger(e),
+        });
+        this.updateOpenState();
+        if (this.getToasts().length === 0) {
+            events.dispatchDetail(this.host, 'close', {
+                open: false,
+                reason: 'action',
+                trigger: events.eventToTrigger(e),
+            });
+        }
+    };
+    render() {
+        return (index.h(index.Host, { key: '8e99577d8770984b8d6d29e442931570c1f1bc4d', role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? '' : undefined }, index.h("slot", { key: '06f2c6cf39c4795afc0937669aa2104821aef3d6' })));
+    }
+    static get watchers() { return {
+        "open": [{
+                "syncFromProp": 0
+            }]
+    }; }
+};
+UIToastRegion.style = uiToastRegionCss();
+
+exports.ui_toast_region = UIToastRegion;

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

@@ -0,0 +1,133 @@
+'use strict';
+
+var index = require('./index-D07f6BOw.js');
+var manager = require('./manager-BOpVXb92.js');
+var events = require('./events-TcQIzpNv.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) {
+        index.registerInstance(this, hostRef);
+    }
+    get host() { return index.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) {
+            manager.openOverlay({
+                id: this.overlayId,
+                modal: false,
+                element: this.host,
+                dismissible: true,
+                requestClose: (reason, trigger) => this.handleRequestClose(reason, trigger),
+            });
+        }
+        else {
+            manager.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);
+        manager.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;
+        events.dispatchDetail(this.host, 'open', { open: true, reason: 'action', trigger: 'pointer' });
+        this.syncOverlay();
+    };
+    onTriggerLeave = () => {
+        this.internalOpen = false;
+        events.dispatchDetail(this.host, 'close', { open: false, reason: 'action', trigger: 'pointer' });
+        this.syncOverlay();
+    };
+    onTriggerFocusIn = () => {
+        this.internalOpen = true;
+        events.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;
+        events.dispatchDetail(this.host, 'close', { open: false, reason: 'action', trigger: 'keyboard' });
+        this.syncOverlay();
+    };
+    handleRequestClose(reason, trigger) {
+        if (reason === 'escape') {
+            this.internalOpen = false;
+            events.dispatchDetail(this.host, 'close', {
+                open: false,
+                reason: 'escape',
+                trigger: trigger,
+            });
+            this.trigger?.focus();
+        }
+    }
+    onKeydown = (e) => {
+        if (e.key === 'Escape') {
+            manager.requestTopOverlayClose('escape', 'keyboard');
+        }
+    };
+    render() {
+        return (index.h(index.Host, { key: '900ec6fc08ea7a7965195e8203fd779e70cfa6e6', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, index.h("slot", { key: 'b384f779fa9a229cf635be5adb3476ca93270c24' })));
+    }
+    static get watchers() { return {
+        "open": [{
+                "syncFromProp": 0
+            }],
+        "internalOpen": [{
+                "syncOverlay": 0
+            }]
+    }; }
+};
+UITooltip.style = uiTooltipCss();
+
+exports.ui_tooltip = UITooltip;

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

@@ -0,0 +1,43 @@
+'use strict';
+
+var index = require('./index-D07f6BOw.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) {
+        index.registerInstance(this, hostRef);
+    }
+    get host() { return index.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 (index.h(index.Host, { key: '23cbff2fdb06a40f0380dbf217d064cb1b9f7a9c' }, index.h("header", { key: '9472960f4445f8ed7d0800d71db3cbac020fca3f', class: "top-bar", part: "base" }, index.h("div", { key: 'd408be025d90fdcf1416213b9e76f3b780f47d97', class: "top-bar__leading", hidden: !this.hasLeading }, index.h("slot", { key: '3dc4db316a040ff10a8b8b218b42799d3e1a7b97', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: '1b362f19f9a738600afb266e9641c0ee5c8870c9', class: "top-bar__title" }, index.h("slot", { key: 'bb93d34a3dea15c697dcd19dc0ecc3488ee390c8' })), index.h("div", { key: '3d61d781b654ee1d91a6ce5ba64db9732ee1f8ee', class: "top-bar__search", hidden: !this.hasSearch }, index.h("slot", { key: '5731817be644f10ed745fdc0868b85b66a9c06d4', name: "search", ref: (el) => (this.searchSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: '2ee868b93f5195832830900382545b2131e78bb8', class: "top-bar__actions", hidden: !this.hasActions }, index.h("slot", { key: '1d410fa60f112904cfb866cff5a3f2fb18021c93', name: "actions", ref: (el) => (this.actionsSlot = el), onSlotchange: this.syncSlots })))));
+    }
+};
+UITopBar.style = uiTopBarCss();
+
+exports.ui_top_bar = UITopBar;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,38 @@
+{
+  "entries": [
+    "components/ui-avatar/ui-avatar.js",
+    "components/ui-avatar-group/ui-avatar-group.js",
+    "components/ui-badge/ui-badge.js",
+    "components/ui-button/ui-button.js",
+    "components/ui-checkbox/ui-checkbox.js",
+    "components/ui-context-menu/ui-context-menu.js",
+    "components/ui-dialog/ui-dialog.js",
+    "components/ui-disclosure/ui-disclosure.js",
+    "components/ui-floating-action-button/ui-floating-action-button.js",
+    "components/ui-form-field/ui-form-field.js",
+    "components/ui-icon-button/ui-icon-button.js",
+    "components/ui-input/ui-input.js",
+    "components/ui-menu/ui-menu.js",
+    "components/ui-menu-item/ui-menu-item.js",
+    "components/ui-popover/ui-popover.js",
+    "components/ui-radio/ui-radio.js",
+    "components/ui-radio-group/ui-radio-group.js",
+    "components/ui-search-result-row/ui-search-result-row.js",
+    "components/ui-search-shell/ui-search-shell.js",
+    "components/ui-select/ui-select.js",
+    "components/ui-switch/ui-switch.js",
+    "components/ui-tabs/ui-tabs.js",
+    "components/ui-textarea/ui-textarea.js",
+    "components/ui-toast-region/ui-toast-region.js",
+    "components/ui-tooltip/ui-tooltip.js",
+    "components/ui-top-bar/ui-top-bar.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.43.2",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/ui-avatar/ui-avatar.css

@@ -0,0 +1,35 @@
+: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%;
+}

package/dist/collection/components/ui-avatar/ui-avatar.js

@@ -0,0 +1,130 @@
+import { Host, h } from "@stencil/core";
+import { toInitials } from "../../utils/initials";
+export class UIAvatar {
+    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 ? '' : undefined }, 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 is() { return "ui-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-avatar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src",
+                "defaultValue": "''"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "fallback": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fallback",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasImage": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "src",
+                "methodName": "watchSrc"
+            }];
+    }
+}

package/dist/collection/components/ui-avatar-group/ui-avatar-group.css

@@ -0,0 +1,32 @@
+: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;
+}