@threadlabs/looma 0.2.4 → 0.2.6

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

@@ -1,74 +0,0 @@
-:host {
-  --ui-callout-surface: var(--ui-info-soft);
-  --ui-callout-text: var(--ui-text-primary);
-  --ui-callout-border: var(--ui-info-solid);
-  --ui-callout-icon: var(--ui-info-solid);
-  --ui-callout-padding-block: var(--ui-space-2);
-  --ui-callout-padding-inline: var(--ui-space-3);
-  --ui-callout-icon-column: 1rem;
-  --ui-callout-gap: var(--ui-space-2);
-  --ui-callout-icon-size: 1rem;
-  --ui-callout-border-width: 1px;
-  --ui-callout-leading-border-width: 4px;
-
-  display: block;
-  max-width: 100%;
-}
-
-.callout__surface {
-  display: grid;
-  grid-template-columns: var(--ui-callout-icon-column) minmax(0, 1fr);
-  gap: var(--ui-callout-gap);
-  align-items: start;
-  padding: var(--ui-callout-padding-block) var(--ui-callout-padding-inline);
-  border: var(--ui-callout-border-width) solid color-mix(in srgb, var(--ui-callout-border) 35%, transparent);
-  border-inline-start: var(--ui-callout-leading-border-width) solid var(--ui-callout-border);
-  border-radius: var(--ui-radius-2);
-  background: var(--ui-callout-surface);
-  color: var(--ui-callout-text);
-  font-family: var(--ui-font-family-sans);
-  font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-normal);
-  line-height: var(--ui-line-height-md);
-}
-
-.icon {
-  display: grid;
-  place-items: center;
-  inline-size: var(--ui-callout-icon-column);
-  block-size: var(--ui-callout-icon-column);
-  color: var(--ui-callout-icon);
-}
-
-.icon svg {
-  inline-size: var(--ui-callout-icon-size);
-  block-size: var(--ui-callout-icon-size);
-}
-
-.content {
-  min-inline-size: 0;
-}
-
-:host([data-tone='note']) {
-  --ui-callout-surface: var(--ui-surface-muted);
-  --ui-callout-border: var(--ui-border-strong);
-  --ui-callout-icon: var(--ui-text-secondary);
-}
-
-:host([data-tone='warning']) {
-  --ui-callout-surface: var(--ui-warning-soft);
-  --ui-callout-border: var(--ui-warning-solid);
-  --ui-callout-icon: var(--ui-warning-solid);
-}
-
-:host([data-tone='success']) {
-  --ui-callout-surface: var(--ui-success-soft);
-  --ui-callout-border: var(--ui-success-solid);
-  --ui-callout-icon: var(--ui-success-solid);
-}
-
-:host([data-tone='error']) {
-  --ui-callout-surface: var(--ui-danger-soft);
-  --ui-callout-border: var(--ui-danger-solid);
-  --ui-callout-icon: var(--ui-danger-solid);
-}

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

@@ -1,59 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { loomaIconMarkup } from "../../icons";
-const toneIcons = {
-    info: 'info',
-    note: 'notebook-pen',
-    warning: 'triangle-alert',
-    success: 'circle-check',
-    error: 'circle-x',
-};
-/** A static semantic message with a tone-specific icon. */
-export class UICallout {
-    tone = 'info';
-    render() {
-        const icon = toneIcons[this.tone] ?? toneIcons.info;
-        return (h(Host, { key: '94bae6fbb688e5c8da979a3bebc12c51b8689c8a', role: "note", "data-tone": this.tone }, h("div", { key: '8fe1a3dae5b7cd3679d187cef018fa0cd810fb76', class: "callout__surface" }, h("span", { key: 'ed62ad8e29c30489e075631d83f1732d7a53a378', class: "icon", "aria-hidden": "true", innerHTML: loomaIconMarkup(icon) }), h("div", { key: '97638d28e3979f71913c17b2501a90e3a9251f0f', class: "content" }, h("slot", { key: '6a91a0d3f189eae28aabbe278924ba7f89015f34' })))));
-    }
-    static get is() { return "ui-callout"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-callout.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-callout.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "tone": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "CalloutTone",
-                    "resolved": "\"error\" | \"info\" | \"note\" | \"success\" | \"warning\"",
-                    "references": {
-                        "CalloutTone": {
-                            "location": "local",
-                            "path": "/home/runner/work/looma/looma/packages/core/src/components/ui-callout/ui-callout.tsx",
-                            "id": "src/components/ui-callout/ui-callout.tsx::CalloutTone"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tone",
-                "defaultValue": "'info'"
-            }
-        };
-    }
-}

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

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

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

@@ -1,228 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { eventToTrigger, dispatchDetail } from "../../utils/events";
-import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
-export class UICheckbox {
-    host;
-    /** Controlled checked state. Omit it to use defaultChecked and local interaction state. */
-    checked;
-    defaultChecked = false;
-    disabled = false;
-    indeterminate = false;
-    required = false;
-    value = 'on';
-    internalChecked = false;
-    slotRef;
-    syncFromProp() {
-        if (isControlled(this.checked))
-            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.internalChecked = controlledOrDefault(this.checked, 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;
-        const checked = input.checked;
-        if (!isControlled(this.checked))
-            this.internalChecked = checked;
-        else
-            this.syncToInput();
-        this.indeterminate = input.indeterminate;
-        dispatchDetail(this.host, 'change', {
-            checked,
-            value: this.value,
-            trigger: eventToTrigger(e),
-        });
-    };
-    render() {
-        return (h(Host, { key: 'eb46eb41a5ab871058960bd2aa1163a03144bc0f', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: 'ce18b1f1b63efebf048cd67b87064641cf4d915c', ref: (el) => (this.slotRef = el) })));
-    }
-    static get is() { return "ui-checkbox"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-checkbox.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-checkbox.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "checked": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Controlled checked state. Omit it to use defaultChecked and local interaction state."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "checked"
-            },
-            "defaultChecked": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "default-checked",
-                "defaultValue": "false"
-            },
-            "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"
-            },
-            "indeterminate": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "indeterminate",
-                "defaultValue": "false"
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "required",
-                "defaultValue": "false"
-            },
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value",
-                "defaultValue": "'on'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "internalChecked": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "checked",
-                "methodName": "syncFromProp"
-            }, {
-                "propName": "internalChecked",
-                "methodName": "syncToInput"
-            }, {
-                "propName": "indeterminate",
-                "methodName": "syncToInput"
-            }, {
-                "propName": "disabled",
-                "methodName": "syncToInput"
-            }, {
-                "propName": "required",
-                "methodName": "syncToInput"
-            }];
-    }
-}

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

@@ -1,57 +0,0 @@
-:host {
-  --ui-chip-surface: var(--ui-surface-subtle);
-  --ui-chip-text: var(--ui-text-secondary);
-  --ui-chip-border: var(--ui-border-default);
-  --ui-chip-font-size: var(--ui-font-size-xs);
-  --ui-chip-font-weight: var(--ui-font-normal);
-  --ui-chip-line-height: var(--ui-line-height-tight);
-  --ui-chip-padding-block: var(--ui-space-0-5);
-  --ui-chip-padding-inline: var(--ui-space-2);
-  --ui-chip-notch: var(--ui-space-1);
-
-  display: inline-flex;
-  min-width: 0;
-  max-width: 100%;
-}
-
-:host([data-size='sm']) {
-  --ui-chip-font-size: var(--ui-font-size-sm);
-}
-
-.chip__surface {
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-  min-width: 0;
-  max-width: 100%;
-  padding: var(--ui-chip-padding-block) var(--ui-chip-padding-inline);
-  border: 1px solid var(--ui-chip-border);
-  background: var(--ui-chip-surface);
-  /* The shared light-DOM reset establishes a baseline host color; the chip's
-     semantic text hook must remain authoritative for consumer color systems. */
-  color: var(--ui-chip-text) !important;
-  /* The shared light-DOM reset establishes inherited defaults; this compact
-     metadata primitive owns its own typography contract. */
-  font-family: var(--ui-font-family-sans) !important;
-  font-size: var(--ui-chip-font-size) !important;
-  font-weight: var(--ui-chip-font-weight) !important;
-  line-height: var(--ui-chip-line-height) !important;
-}
-
-.chip__label {
-  min-width: 0;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-:host([data-appearance='pill']) .chip__surface {
-  border-radius: var(--ui-radius-round);
-}
-
-:host([data-appearance='tag']) .chip__surface {
-  border: 0;
-  padding-inline-end: calc(var(--ui-chip-padding-inline) + var(--ui-chip-notch));
-  clip-path: polygon(0 0, calc(100% - var(--ui-chip-notch)) 0, 100% 50%, calc(100% - var(--ui-chip-notch)) 100%, 0 100%);
-}

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

@@ -1,67 +0,0 @@
-import { Host, h } from "@stencil/core";
-/** A compact, non-interactive metadata label. */
-export class UIChip {
-    /** `tag` has a square leading edge and an angled trailing edge; `pill` is fully rounded. */
-    appearance = 'tag';
-    /** Compact typography size. */
-    size = 'xs';
-    render() {
-        return (h(Host, { key: '970cb48cf8d70c47feaab90fe428c09f0d052a03', "data-appearance": this.appearance, "data-size": this.size }, h("span", { key: '6d8c6104d2869520097a2a61bd2a887b363b4912', class: "chip__surface" }, h("span", { key: '638fb68ff5dffa629576c9e1079bb3169f2adb4f', class: "chip__label" }, h("slot", { key: '8b31f2130e202e18d7717aee6add6bc6e7f119b5' })))));
-    }
-    static get is() { return "ui-chip"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ui-chip.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ui-chip.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "appearance": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'tag' | 'pill'",
-                    "resolved": "\"pill\" | \"tag\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "`tag` has a square leading edge and an angled trailing edge; `pill` is fully rounded."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "appearance",
-                "defaultValue": "'tag'"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'xs' | 'sm'",
-                    "resolved": "\"sm\" | \"xs\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Compact typography size."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size",
-                "defaultValue": "'xs'"
-            }
-        };
-    }
-}

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

@@ -1,47 +0,0 @@
-:host { display: grid; gap: var(--ui-space-1); min-inline-size: 0; color: var(--ui-text-primary); font: inherit; }
-label { color: var(--ui-field-label-color, var(--ui-text-primary)); font-size: var(--ui-field-label-size, 0.875rem); font-weight: var(--ui-field-label-weight, 500); }
-.field { display: flex; min-inline-size: 0; border: 1px solid var(--ui-control-border, var(--ui-border-default)); border-radius: var(--ui-radius-2); background: var(--ui-control-surface, var(--ui-surface-default)); }
-.field:focus-within { border-color: var(--ui-control-focus, var(--ui-focus-ring)); outline: 2px solid var(--ui-control-focus, var(--ui-focus-ring)); outline-offset: 1px; }
-input { appearance: none; width: 100%; min-inline-size: 0; min-block-size: var(--ui-control-min-block-size, 2.75rem); box-sizing: border-box; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; line-height: var(--ui-line-height-md); padding: var(--ui-space-2) var(--ui-space-3); margin: 0; outline: none; }
-:host([data-size='sm']) input { min-block-size: var(--ui-field-compact-size, 2rem); padding: var(--ui-space-1) var(--ui-space-2); }
-button { appearance: none; border: 0; border-radius: var(--ui-radius-2); background: transparent; color: var(--ui-field-affordance-color, var(--ui-text-secondary)); font: inherit; font-weight: var(--ui-field-affordance-weight, 400); min-inline-size: 2rem; padding: var(--ui-space-1); cursor: pointer; }
-button:hover:enabled { background: var(--ui-surface-muted); color: var(--ui-text-primary); }
-button:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: -3px; }
-input:disabled, button:disabled { color: var(--ui-text-muted); cursor: not-allowed; }
-.field:has(input:disabled) { background: var(--ui-control-surface-disabled, var(--ui-surface-muted)); }
-:host([data-validation='error']) .field { border-color: var(--ui-danger-solid, var(--ui-accent-active)); }
-.popup { box-sizing: border-box; min-inline-size: 12rem; max-inline-size: calc(100vw - 1rem); max-block-size: var(--ui-combobox-max-block-size, 18rem); overflow: auto; margin: 0; padding: var(--ui-space-1); border: 1px solid var(--ui-border-default); border-radius: var(--ui-radius-2); background: var(--ui-surface-elevated); color: var(--ui-text-primary); box-shadow: var(--ui-shadow-md); }
-[hidden] { display: none !important; }
-.option { padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-radius-1); cursor: pointer; overflow-wrap: anywhere; }
-.option:hover, .option[data-active] { background: var(--ui-surface-muted); outline: 1px solid var(--ui-focus-ring); outline-offset: -1px; }
-.option[aria-disabled='true'] { color: var(--ui-text-muted); cursor: not-allowed; }
-.primary { display: block; color: var(--ui-option-primary-color, var(--ui-text-primary)); font-weight: var(--ui-option-primary-weight, 500); }
-.secondary { display: block; color: var(--ui-option-secondary-color, var(--ui-text-secondary)); font-weight: var(--ui-option-secondary-weight, 400); font-size: var(--ui-font-size-sm); }
-.message, .group { color: var(--ui-field-message-color, var(--ui-text-secondary)); font-weight: var(--ui-field-message-weight, 400); font-size: var(--ui-font-size-sm); line-height: var(--ui-line-height-md); overflow-wrap: anywhere; }
-.group, .popup .message { padding: var(--ui-space-2) var(--ui-space-3); }
-.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
-@media (pointer: coarse) { button { min-inline-size: 2.75rem; min-block-size: 2.75rem; } }
-@media (forced-colors: active) { .field, .popup { border-color: CanvasText; } .option[data-active] { outline-color: Highlight; } }
-
-/* Multiple mode: chips wrap before the cursor on one flexible field line. */
-:host([multiple]) .field { flex-wrap: wrap; align-items: center; gap: var(--ui-space-1); min-block-size: var(--ui-multi-combobox-min-block-size, 2.5rem); padding: var(--ui-space-1); }
-:host([multiple]) input { flex: 1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem); width: auto; min-block-size: 1.75rem; padding: var(--ui-space-0-5) var(--ui-space-1); }
-.items { display: contents; }
-.item {
-  appearance: none;
-  display: inline-flex;
-  min-inline-size: 0;
-  max-inline-size: min(100%, var(--ui-multi-combobox-item-max-inline-size, 12rem));
-  overflow: hidden;
-  padding: 0;
-  border: 0;
-  border-radius: var(--ui-radius-1);
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  cursor: default;
-}
-.item > slot { display: block; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; }
-.item > slot::slotted(*) { min-inline-size: 0; max-inline-size: 100%; }
-.item:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: 1px; }
-.item:disabled { opacity: .6; }