@threadlabs/looma 0.1.22 → 0.1.24

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

@@ -1,15 +1,20 @@
 :host {
   display: inline-flex;
   vertical-align: middle;
-  color: var(--ui-text-primary);
+  color: var(--ui-action-secondary-text, var(--ui-text-primary));
 }
 
-:host([variant='outline'])::slotted(button),
+:host([data-variant='solid']) {
+  color: var(--ui-action-primary-text, var(--ui-text-on-accent));
+}
+
+:host([data-variant='outline']) ::slotted(button),
 ::slotted(button) {
   appearance: none;
-  border: 1px solid var(--ui-border-default);
+  min-block-size: var(--ui-button-min-block-size, 2.5rem);
+  border: 1px solid var(--ui-control-border, var(--ui-border-default));
   border-radius: var(--ui-button-radius, var(--ui-radius-2));
-  background: var(--ui-surface-default);
+  background: var(--ui-action-secondary-surface, var(--ui-surface-default));
   color: inherit;
   font: inherit;
   font-weight: var(--ui-font-medium, 500);
@@ -25,76 +30,77 @@
   margin: 0;
 }
 
-:host([data-size='sm'])::slotted(button) {
+: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) {
+:host([data-size='lg']) ::slotted(button) {
+  min-block-size: var(--ui-control-min-block-size, 2.75rem);
   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);
+  background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
+  border-color: var(--ui-control-border-hover, var(--ui-border-strong));
 }
 
 ::slotted(button:active:enabled) {
   background: var(--ui-surface-subtle);
 }
 
-:host([variant='solid'])::slotted(button) {
-  border-color: var(--ui-accent-solid);
-  background: var(--ui-accent-solid);
-  color: var(--ui-text-on-accent);
+:host([data-variant='solid']) ::slotted(button) {
+  border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
+  background: var(--ui-action-primary-surface, var(--ui-accent-solid));
+  color: var(--ui-action-primary-text, var(--ui-text-on-accent));
   box-shadow: var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs));
 }
 
-:host([variant='solid'])::slotted(button:hover:enabled) {
-  background: var(--ui-accent-hover);
-  border-color: var(--ui-accent-hover);
+:host([data-variant='solid']) ::slotted(button:hover:enabled) {
+  background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
+  border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
   box-shadow: var(--ui-shadow-sm);
   transform: translateY(-1px);
 }
 
-:host([variant='solid'])::slotted(button:active:enabled) {
-  background: var(--ui-accent-active);
-  border-color: var(--ui-accent-active);
+:host([data-variant='solid']) ::slotted(button:active:enabled) {
+  background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
+  border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
   box-shadow: none;
   transform: translateY(0);
 }
 
-:host([variant='destructive'])::slotted(button) {
+: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-button-destructive-shadow, inset 0 1px rgb(255 255 255 / 0.14), var(--ui-shadow-xs));
 }
 
-:host([variant='destructive'])::slotted(button:hover:enabled) {
+: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);
   transform: translateY(-1px);
 }
 
-:host([variant='destructive'])::slotted(button:active:enabled) {
+:host([data-variant='destructive']) ::slotted(button:active:enabled) {
   box-shadow: none;
   transform: translateY(0);
 }
 
-:host([variant='ghost'])::slotted(button) {
+:host([data-variant='ghost']) ::slotted(button) {
   border-color: transparent;
   background: transparent;
 }
 
-:host([variant='ghost'])::slotted(button:hover:enabled) {
+:host([data-variant='ghost']) ::slotted(button:hover:enabled) {
   background: var(--ui-surface-muted);
   border-color: transparent;
 }
 
-:host([variant='ghost'])::slotted(button:active:enabled) {
+:host([data-variant='ghost']) ::slotted(button:active:enabled) {
   background: var(--ui-surface-subtle);
   border-color: transparent;
 }
@@ -104,8 +110,12 @@
   outline-offset: 2px;
 }
 
-::slotted(button:disabled),
-:host([data-disabled]) {
+:host([data-disabled='true']),
+:host([disabled]) {
   opacity: 0.6;
   cursor: not-allowed;
 }
+
+::slotted(button:disabled) {
+  cursor: not-allowed;
+}

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

@@ -10,8 +10,19 @@ export class UIButton {
         const btn = this.getButton();
         if (!btn)
             return;
-        this.host.dataset.size = this.size || '';
-        this.host.dataset.disabled = this.disabled ? 'true' : '';
+        if (this.size) {
+            this.host.dataset.size = this.size;
+        }
+        else {
+            delete this.host.dataset.size;
+        }
+        if (this.disabled) {
+            this.host.dataset.disabled = 'true';
+        }
+        else {
+            delete this.host.dataset.disabled;
+        }
+        this.host.dataset.variant = this.variant;
         btn.disabled = this.disabled;
     }
     componentDidLoad() {
@@ -34,7 +45,7 @@ export class UIButton {
         this.host.click();
     };
     render() {
-        return (h(Host, { key: 'b5f9152db70a276334df047f5cf53d1b8efe2174', "data-size": this.size || undefined, "data-disabled": this.disabled ? '' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: 'b39657e832abc63a6ea6090fa061779c3ae654b5', ref: (el) => (this.slotRef = el) })));
+        return (h(Host, { key: '58a90293e2ac169c8bc3c6cb3d15428cc73629b7', "data-size": this.size || undefined, "data-variant": this.variant, "data-disabled": this.disabled ? 'true' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: '05439bdc2af81bcabe9da11b4baf13f880e0a75f', ref: (el) => (this.slotRef = el) })));
     }
     static get is() { return "ui-button"; }
     static get encapsulation() { return "shadow"; }

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

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

@@ -0,0 +1,59 @@
+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.js

@@ -1,8 +1,10 @@
 import { Host, h } from "@stencil/core";
 import { eventToTrigger, dispatchDetail } from "../../utils/events";
+import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
 export class UICheckbox {
     host;
-    checked = false;
+    /** Controlled checked state. Omit it to use defaultChecked and local interaction state. */
+    checked;
     defaultChecked = false;
     disabled = false;
     indeterminate = false;
@@ -11,7 +13,8 @@ export class UICheckbox {
     internalChecked = false;
     slotRef;
     syncFromProp() {
-        this.internalChecked = this.checked;
+        if (isControlled(this.checked))
+            this.internalChecked = this.checked;
     }
     syncToInput() {
         const input = this.getInput();
@@ -26,8 +29,7 @@ export class UICheckbox {
         input.value = this.value;
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalChecked = this.internalChecked || this.defaultChecked;
+        this.internalChecked = controlledOrDefault(this.checked, this.defaultChecked);
         this.slotRef?.addEventListener('slotchange', () => this.syncToInput());
         this.syncToInput();
         const input = this.getInput();
@@ -49,16 +51,20 @@ export class UICheckbox {
         const input = e.target;
         if (!input)
             return;
-        this.internalChecked = input.checked;
+        const checked = input.checked;
+        if (!isControlled(this.checked))
+            this.internalChecked = checked;
+        else
+            this.syncToInput();
         this.indeterminate = input.indeterminate;
         dispatchDetail(this.host, 'change', {
-            checked: this.internalChecked,
+            checked,
             value: this.value,
             trigger: eventToTrigger(e),
         });
     };
     render() {
-        return (h(Host, { key: '66b6708ae71c9eca6c03c63891b590bd050c2506', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined }, h("slot", { key: 'b5e168a9ff0c6e5e747fff6c6264c59744f10a56', ref: (el) => (this.slotRef = el) })));
+        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"; }
@@ -83,16 +89,15 @@ export class UICheckbox {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Controlled checked state. Omit it to use defaultChecked and local interaction state."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "checked",
-                "defaultValue": "false"
+                "attribute": "checked"
             },
             "defaultChecked": {
                 "type": "boolean",

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

@@ -0,0 +1,43 @@
+: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;
+  max-width: 100%;
+}
+
+.chip__surface {
+  display: inline-flex;
+  align-items: center;
+  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;
+  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

@@ -0,0 +1,45 @@
+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';
+    render() {
+        return (h(Host, { key: 'fe1246a1e698098f0ca9cb04e749d5adf233e50c', "data-appearance": this.appearance }, h("span", { key: 'a17237699b9eb20fb0a084adbd900a3aa9bc12b0', class: "chip__surface" }, h("slot", { key: '7f4e5dcc82d360083d4ded2617fa39a9dc1fd3ef' }))));
+    }
+    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'"
+            }
+        };
+    }
+}

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

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