@threadlabs/looma 0.1.0

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

@@ -0,0 +1,103 @@
+import { Host, h } from "@stencil/core";
+const OVERFLOW_ATTR = 'data-ui-avatar-group-overflow';
+export class UIAvatarGroup {
+    host;
+    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 || undefined }, 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 is() { return "ui-avatar-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-avatar-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-avatar-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "5"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'People'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "overflowCount": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "max",
+                "methodName": "syncOverflow"
+            }];
+    }
+}

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

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

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

@@ -0,0 +1,62 @@
+import { Host, h } from "@stencil/core";
+export class UIBadge {
+    variant;
+    tone;
+    render() {
+        return (h(Host, { key: '53eba0640816bc09ae198de29f9a1ac97c1d5f1d', "data-variant": this.variant || undefined, "data-tone": this.tone || undefined }, h("slot", { key: 'abc8a9e09c2001f222f9aa8f164da76ff8343e01' })));
+    }
+    static get is() { return "ui-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant"
+            },
+            "tone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tone"
+            }
+        };
+    }
+}

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

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

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

@@ -0,0 +1,127 @@
+import { Host, h } from "@stencil/core";
+import { isActivationKey } from "../../utils/events";
+export class UIButton {
+    host;
+    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 || undefined, "data-size": this.size || undefined, "data-disabled": this.disabled ? '' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: '2bf0274d2732ea46fdf016a46d85bbe6e0d96bba', ref: (el) => (this.slotRef = el) })));
+    }
+    static get is() { return "ui-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "variant",
+                "methodName": "syncToButton"
+            }, {
+                "propName": "size",
+                "methodName": "syncToButton"
+            }, {
+                "propName": "disabled",
+                "methodName": "syncToButton"
+            }];
+    }
+}

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

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