@threadlabs/looma 0.1.23 → 0.1.24

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

@@ -55,7 +55,7 @@ function createHoverIntent(delay, onIntent) {
     };
 }
 
-const uiTreeCss = () => `:host{--ui-tree-indent:16px;display:block;min-inline-size:0;padding-inline-start:var(--ui-tree-gutter, 22px)}::slotted(ui-tree-item){--ui-tree-indent:inherit}`;
+const uiTreeCss = () => `:host{--ui-tree-indent:16px;--ui-tree-gutter:0px;display:block;min-inline-size:0;padding-inline-start:var(--ui-tree-gutter)}::slotted(ui-tree-item){--ui-tree-indent:inherit}`;
 
 const UITree = class {
     constructor(hostRef) {
@@ -73,6 +73,8 @@ const UITree = class {
     rejectedPosition = null;
     rejection = null;
     hoverIntent = null;
+    structureObserver = null;
+    tabStop = null;
     componentDidLoad() {
         this.hoverIntent = createHoverIntent(this.hoverExpandDelay, this.expandTarget);
         this.host.addEventListener('dragstart', this.onDragStart);
@@ -83,6 +85,11 @@ const UITree = class {
         this.host.addEventListener('drop', this.onDrop);
         this.host.addEventListener('dragend', this.onDragEnd);
         this.host.addEventListener('keydown', this.onKeyDown);
+        this.host.addEventListener('focusin', this.onFocusIn);
+        this.host.addEventListener('ui-tree-expansion-change', this.onExpansionChange);
+        this.syncStructuralLevels();
+        this.structureObserver = new MutationObserver(this.syncStructuralLevels);
+        this.structureObserver.observe(this.host, { childList: true, subtree: true });
     }
     disconnectedCallback() {
         this.hoverIntent?.destroy();
@@ -94,10 +101,44 @@ const UITree = class {
         this.host.removeEventListener('drop', this.onDrop);
         this.host.removeEventListener('dragend', this.onDragEnd);
         this.host.removeEventListener('keydown', this.onKeyDown);
+        this.host.removeEventListener('focusin', this.onFocusIn);
+        this.host.removeEventListener('ui-tree-expansion-change', this.onExpansionChange);
+        this.structureObserver?.disconnect();
+        this.structureObserver = null;
+    }
+    syncStructuralLevels = () => {
+        for (const item of Array.from(this.host.querySelectorAll('ui-tree-item'))) {
+            item.dispatchEvent(new CustomEvent('ui-tree-structure-sync'));
+        }
+        this.syncTabStop();
+    };
+    syncTabStop(preferred) {
+        const items = this.visibleItems();
+        const next = preferred && items.includes(preferred)
+            ? preferred
+            : this.tabStop && items.includes(this.tabStop)
+                ? this.tabStop
+                : items[0] ?? null;
+        this.tabStop = next;
+        for (const item of items) {
+            item.dispatchEvent(new CustomEvent('ui-tree-roving-tab-stop', {
+                detail: { active: item === next },
+            }));
+        }
     }
     itemFromEvent(event) {
         return event.composedPath().find(node => (node instanceof HTMLElement && node.localName === 'ui-tree-item')) ?? null;
     }
+    eventTargetsInteractiveContent(event) {
+        for (const node of event.composedPath()) {
+            if (node instanceof HTMLElement && node.localName === 'ui-tree-item')
+                break;
+            if (node instanceof HTMLElement && node.matches('a, button, input, select, textarea, [role="button"], [role="link"]')) {
+                return true;
+            }
+        }
+        return false;
+    }
     itemId(item) {
         return item.itemId || item.getAttribute('item-id') || '';
     }
@@ -145,9 +186,23 @@ const UITree = class {
         const dropDepth = item.getAttribute('drop-depth');
         if (dropDepth !== null)
             return Number(dropDepth);
-        if (item.depth !== undefined)
-            return item.depth;
-        return Number(item.getAttribute('depth')) || 1;
+        return Number(item.getAttribute('aria-level')) || 1;
+    }
+    subtreeDepth(item) {
+        if (item.subtreeDepth !== undefined)
+            return Math.max(0, Math.floor(item.subtreeDepth));
+        const override = item.getAttribute('subtree-depth');
+        if (override !== null)
+            return Math.max(0, Math.floor(Number(override)));
+        return Array.from(item.querySelectorAll('ui-tree-item')).reduce((deepest, descendant) => {
+            let nesting = 0;
+            let ancestor = descendant.parentElement?.closest('ui-tree-item') ?? null;
+            while (ancestor && ancestor !== item) {
+                nesting += 1;
+                ancestor = ancestor.parentElement?.closest('ui-tree-item') ?? null;
+            }
+            return ancestor === item ? Math.max(deepest, nesting + 1) : deepest;
+        }, 0);
     }
     dropRejection(source, target, position) {
         // A tree item can never move into (or beside) one of its own descendants.
@@ -167,9 +222,9 @@ const UITree = class {
             return { reason: 'incompatible' };
         }
         const maxDepth = Math.max(0, Math.floor(this.maxDepth));
-        if (maxDepth > 0 && source.subtreeDepth !== undefined) {
+        if (maxDepth > 0) {
             const targetDepth = Math.max(0, Math.floor(this.constraintDepth(target)));
-            const subtreeDepth = Math.max(0, Math.floor(source.subtreeDepth));
+            const subtreeDepth = this.subtreeDepth(source);
             const resultingDepth = targetDepth + (position === 'inside' ? 1 : 0) + subtreeDepth;
             if (resultingDepth > maxDepth)
                 return { reason: 'max-depth', maxDepth, resultingDepth };
@@ -365,7 +420,35 @@ const UITree = class {
         return Array.from(this.host.querySelectorAll('ui-tree-item'))
             .filter(item => item.getClientRects().length > 0 && !item.hasAttribute('disabled'));
     }
+    parentItem(item) {
+        const parent = item.parentElement?.closest('ui-tree-item') ?? null;
+        return parent && this.host.contains(parent) ? parent : null;
+    }
+    firstVisibleChild(item, items) {
+        return items.find(candidate => this.parentItem(candidate) === item) ?? null;
+    }
+    focusItem(item) {
+        this.syncTabStop(item);
+        item.focus();
+    }
+    requestExpansion(item, expanded) {
+        item.dispatchEvent(new CustomEvent('ui-tree-request-expanded', {
+            detail: { expanded, trigger: 'keyboard' },
+        }));
+    }
+    onFocusIn = (event) => {
+        if (this.eventTargetsInteractiveContent(event))
+            return;
+        const item = this.itemFromEvent(event);
+        if (item)
+            this.syncTabStop(item);
+    };
+    onExpansionChange = () => {
+        requestAnimationFrame(() => this.syncTabStop());
+    };
     onKeyDown = (event) => {
+        if (this.eventTargetsInteractiveContent(event))
+            return;
         const current = this.itemFromEvent(event);
         if (!current)
             return;
@@ -373,14 +456,43 @@ const UITree = class {
         const index = items.indexOf(current);
         if (index < 0)
             return;
-        const next = event.key === 'ArrowDown' ? items[index + 1] : event.key === 'ArrowUp' ? items[index - 1] : null;
-        if (!next)
+        const next = event.key === 'ArrowDown' ? items[index + 1]
+            : event.key === 'ArrowUp' ? items[index - 1]
+                : event.key === 'Home' ? items[0]
+                    : event.key === 'End' ? items.at(-1)
+                        : null;
+        if (next) {
+            event.preventDefault();
+            this.focusItem(next);
             return;
-        event.preventDefault();
-        next.focus();
+        }
+        if (event.key === 'ArrowLeft') {
+            if (current.getAttribute('aria-expanded') === 'true') {
+                event.preventDefault();
+                this.requestExpansion(current, false);
+            }
+            else if (this.parentItem(current)) {
+                event.preventDefault();
+                this.focusItem(this.parentItem(current));
+            }
+            return;
+        }
+        if (event.key === 'ArrowRight') {
+            if (current.getAttribute('aria-expanded') === 'false') {
+                event.preventDefault();
+                this.requestExpansion(current, true);
+            }
+            else if (current.getAttribute('aria-expanded') === 'true') {
+                const child = this.firstVisibleChild(current, items);
+                if (child) {
+                    event.preventDefault();
+                    this.focusItem(child);
+                }
+            }
+        }
     };
     render() {
-        return (index.h(index.Host, { key: '474c2154d2abe3c76eee9c36bf552390089df6e8', role: "tree", "aria-label": this.label || 'Tree' }, index.h("slot", { key: '93aedd02f984dd33b5efc811fef417d1199917bd' })));
+        return (index.h(index.Host, { key: '549c09abc67dc60b16bf2d6b7d6346f214e9d6ae', role: "tree", "aria-label": this.label || 'Tree' }, index.h("slot", { key: 'fea59bde97611bf384e32ce4fb2b3eec9aca784f' })));
     }
 };
 UITree.style = uiTreeCss();

package/dist/collection/collection-manifest.json

@@ -1,11 +1,13 @@
 {
   "entries": [
+    "components/ui-callout/ui-callout.js",
     "components/ui-affordance-scope/ui-affordance-scope.js",
     "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-chip/ui-chip.js",
     "components/ui-combobox/ui-combobox.js",
     "components/ui-context-menu/ui-context-menu.js",
     "components/ui-dialog/ui-dialog.js",

package/dist/collection/components/ui-affordance-scope/ui-affordance-scope.js

@@ -22,7 +22,7 @@ export class UIAffordanceScope {
         this.coordinator?.refresh();
     };
     render() {
-        return (h(Host, { key: '184b0a908494d480ed23aa14b75d4f7b94e5275b' }, h("slot", { key: '570e810db588c1514c6fd85985c9bc4532993a2b', onSlotchange: this.onSlotChange })));
+        return (h(Host, { key: 'f500fa48554ed6224efd2dbe9632880bf0a15a19' }, h("slot", { key: '37c5c5b7925b260ff8f9edd411ee6c90a12a4909', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "ui-affordance-scope"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,8 @@
 :host {
+  display: inline-flex;
+}
+
+.avatar {
   display: inline-grid;
   place-items: center;
   overflow: hidden;
@@ -14,10 +18,6 @@
   text-transform: uppercase;
 }
 
-.avatar {
-  display: contents;
-}
-
 .avatar img {
   grid-area: 1 / 1;
   inline-size: 100%;

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

@@ -18,7 +18,7 @@ export class UIAvatar {
     render() {
         const fallbackText = this.fallback || toInitials(this.name || this.alt);
         const label = this.alt || this.name || 'Avatar';
-        return (h(Host, { key: '18214960ad2f1a0370907c0281102af924739de9', role: "img", "aria-label": label, "data-has-image": this.hasImage ? '' : undefined }, h("div", { key: 'c6d0a00de56b756f0e24fdc4b306d89cdae2a44f', class: "avatar" }, h("img", { key: 'c5bfecb9d18797bc934ff087ce7ed8a4616ab347', src: this.src, alt: label, onLoad: this.onImageLoad, onError: this.onImageError, hidden: !this.hasImage, "aria-hidden": this.hasImage ? 'false' : 'true' }), h("span", { key: '1875a45a9c21de3e3a52924ef25b3f8429a788c4', class: "fallback", hidden: this.hasImage, "aria-hidden": this.hasImage ? 'true' : 'false' }, fallbackText))));
+        return (h(Host, { key: 'bbe6c3a775702022a19d819a6cc9d81d798cb3e1', role: "img", "aria-label": label, "data-has-image": this.hasImage ? '' : undefined }, h("div", { key: '63402327ba5bde122bf5deaea09baf965ee9b047', class: "avatar" }, h("img", { key: 'e52b86773684b80d76efa459cb03ae40881f959b', src: this.src, alt: label, onLoad: this.onImageLoad, onError: this.onImageError, hidden: !this.hasImage, "aria-hidden": this.hasImage ? 'false' : 'true' }), h("span", { key: '82a6d8f0d0c69ca52f81d092a2292fc80238265b', class: "fallback", hidden: this.hasImage, "aria-hidden": this.hasImage ? 'true' : 'false' }, fallbackText))));
     }
     static get is() { return "ui-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,12 +5,12 @@
   gap: 0;
 }
 
-::slotted(*:not([data-ui-avatar-group-overflow])) {
+::slotted(*) {
   margin-inline-end: -0.5rem;
   flex-shrink: 0;
 }
 
-::slotted(*:last-of-type:not([data-ui-avatar-group-overflow])) {
+::slotted(*:last-of-type) {
   margin-inline-end: 0;
 }
 

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

@@ -1,36 +1,28 @@
 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();
+    visibleLimit() {
+        return Number.isFinite(this.max) ? Math.max(0, Math.floor(this.max)) : 0;
     }
     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 children = Array.from(this.host.children);
         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;
+        const visibleLimit = this.visibleLimit();
+        const overflowCount = total > visibleLimit ? total - visibleLimit : 0;
+        if (this.overflowCount !== overflowCount)
+            this.overflowCount = overflowCount;
     }
     render() {
-        return (h(Host, { key: 'bef6efd3c80d29e47742412a497893789ea8790b', role: "list", "aria-label": this.label || undefined }, h("slot", { key: '21585b11dcde36868c3e3bc7fbd0c216be6f011b' }), this.overflowCount > 0 && (h("span", { key: 'ede3b71945d379fe78d522a3346aa29c02d74b15', class: "overflow", role: "listitem", "aria-label": `${this.overflowCount} more`, "data-ui-avatar-group-overflow": true }, "+", this.overflowCount))));
+        return (h(Host, { key: '9ba6693cabc379bbbe6f5698160481f27fe02f31', role: "group", "aria-label": this.label || undefined }, h("style", { key: 'ed231fe96c16a3cdd5a66d4828664c75c6959a9e' }, `::slotted(:nth-child(n + ${this.visibleLimit() + 1})) { display: none !important; }`), h("slot", { key: '463005a7f3c498c80c768151ab32c873ff1abf86', onSlotchange: () => this.updateOverflow() }), this.overflowCount > 0 && (h("span", { key: 'dc1ba88fd97ca461e6518d223f00a93416e6d0f0', class: "overflow", role: "img", "aria-label": `${this.overflowCount} more ${this.overflowCount === 1 ? 'person' : 'people'}`, "data-ui-avatar-group-overflow": true }, "+", this.overflowCount))));
     }
     static get is() { return "ui-avatar-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,74 +1,90 @@
 :host {
+  --ui-badge-surface: var(--ui-surface-muted);
+  --ui-badge-text: var(--ui-text-secondary);
+  --ui-badge-border: var(--ui-border-default);
+  --ui-badge-font-size: var(--ui-font-size-xs);
+  --ui-badge-font-weight: var(--ui-font-normal);
+  --ui-badge-line-height: var(--ui-line-height-tight);
+  --ui-badge-padding-block: var(--ui-space-0-5);
+  --ui-badge-padding-inline: var(--ui-space-2);
+
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.badge__surface {
   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;
+  max-width: 100%;
+  padding: var(--ui-badge-padding-block) var(--ui-badge-padding-inline);
+  border: 1px solid var(--ui-badge-border);
+  border-radius: var(--ui-radius-round);
+  background: var(--ui-badge-surface);
+  color: var(--ui-badge-text);
+  font-family: var(--ui-font-family-sans);
+  font-size: var(--ui-badge-font-size);
+  font-weight: var(--ui-badge-font-weight);
+  line-height: var(--ui-badge-line-height);
   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='accent']) .badge__surface {
+  --ui-badge-surface: var(--ui-accent-solid);
+  --ui-badge-border: var(--ui-accent-solid);
+  --ui-badge-text: 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='danger']) .badge__surface {
+  --ui-badge-surface: var(--ui-danger-solid);
+  --ui-badge-border: var(--ui-danger-solid);
+  --ui-badge-text: 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='success']) .badge__surface {
+  --ui-badge-surface: var(--ui-success-solid);
+  --ui-badge-border: var(--ui-success-solid);
+  --ui-badge-text: 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='warning']) .badge__surface {
+  --ui-badge-surface: var(--ui-warning-solid);
+  --ui-badge-border: var(--ui-warning-solid);
+  --ui-badge-text: 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-tone='info']) .badge__surface {
+  --ui-badge-surface: var(--ui-info-solid);
+  --ui-badge-border: var(--ui-info-solid);
+  --ui-badge-text: 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='accent']) .badge__surface {
+  --ui-badge-surface: var(--ui-accent-soft);
+  --ui-badge-border: var(--ui-accent-soft);
+  --ui-badge-text: 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='danger']) .badge__surface {
+  --ui-badge-surface: var(--ui-danger-soft);
+  --ui-badge-border: var(--ui-danger-soft);
+  --ui-badge-text: 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='success']) .badge__surface {
+  --ui-badge-surface: var(--ui-success-soft);
+  --ui-badge-border: var(--ui-success-soft);
+  --ui-badge-text: 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='warning']) .badge__surface {
+  --ui-badge-surface: var(--ui-warning-soft);
+  --ui-badge-border: var(--ui-warning-soft);
+  --ui-badge-text: 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);
+:host([data-variant='subtle'][data-tone='info']) .badge__surface {
+  --ui-badge-surface: var(--ui-info-soft);
+  --ui-badge-border: var(--ui-info-soft);
+  --ui-badge-text: var(--ui-info-solid);
 }

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

@@ -3,7 +3,7 @@ export class UIBadge {
     variant;
     tone;
     render() {
-        return (h(Host, { key: '8766c0331ac7fbd6409b604578e159ae093c844b', "data-variant": this.variant || undefined, "data-tone": this.tone || undefined }, h("slot", { key: '65016ab530b850c82261e2da718622ff72567634' })));
+        return (h(Host, { key: 'ba96ade6d037a7ed9958e7eed540e62782f846f0', "data-variant": this.variant || undefined, "data-tone": this.tone || undefined }, h("span", { key: 'a1e9587f59de479c19b9ea7aec8c8e932b998369', class: "badge__surface" }, h("slot", { key: '5835ddcea5cda472e700557528fd3cbc9d572616' }))));
     }
     static get is() { return "ui-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@ export class UIButton {
         this.host.click();
     };
     render() {
-        return (h(Host, { key: '9c8d479fe7f1873a447048944513648bac132d52', "data-size": this.size || undefined, "data-variant": this.variant, "data-disabled": this.disabled ? 'true' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: '741f48e7efd42262834992c07c4685d3e929d91c', 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'"
+            }
+        };
+    }
+}