@threadlabs/looma 0.1.22 → 0.1.24

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D07f6BOw.js');
+var index = require('./index-BHG9Rpil.js');
 var events = require('./events-TcQIzpNv.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) {
@@ -64,10 +64,17 @@ const UITree = class {
     get host() { return index.getElement(this); }
     label = 'Tree';
     hoverExpandDelay = 700;
+    /** Maximum resulting item depth accepted by pointer reordering. Zero is unlimited. */
+    maxDepth = 0;
     source = null;
     target = null;
     position = null;
+    rejectedTarget = null;
+    rejectedPosition = null;
+    rejection = null;
     hoverIntent = null;
+    structureObserver = null;
+    tabStop = null;
     componentDidLoad() {
         this.hoverIntent = createHoverIntent(this.hoverExpandDelay, this.expandTarget);
         this.host.addEventListener('dragstart', this.onDragStart);
@@ -78,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();
@@ -89,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') || '';
     }
@@ -134,19 +180,56 @@ const UITree = class {
                 .filter(Boolean),
         };
     }
-    permitsDrop(source, target, position) {
+    constraintDepth(item) {
+        if (item.dropDepth !== undefined)
+            return item.dropDepth;
+        const dropDepth = item.getAttribute('drop-depth');
+        if (dropDepth !== null)
+            return Number(dropDepth);
+        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.
         // Reject the target before showing any insertion affordance so the preview
         // stays truthful instead of promising a move the consumer must undo.
         if (source.contains(target))
-            return false;
+            return { reason: 'descendant' };
         const sourceMeta = this.itemMetadata(source);
         const targetMeta = this.itemMetadata(target);
         if (position === 'inside') {
-            return this.acceptsChildren(target)
-                && (targetMeta.accepts.length === 0 || targetMeta.accepts.includes(sourceMeta.type));
+            if (!this.acceptsChildren(target)
+                || (targetMeta.accepts.length > 0 && !targetMeta.accepts.includes(sourceMeta.type))) {
+                return { reason: 'incompatible' };
+            }
+        }
+        else if (sourceMeta.type !== targetMeta.type) {
+            return { reason: 'incompatible' };
         }
-        return sourceMeta.type === targetMeta.type;
+        const maxDepth = Math.max(0, Math.floor(this.maxDepth));
+        if (maxDepth > 0) {
+            const targetDepth = Math.max(0, Math.floor(this.constraintDepth(target)));
+            const subtreeDepth = this.subtreeDepth(source);
+            const resultingDepth = targetDepth + (position === 'inside' ? 1 : 0) + subtreeDepth;
+            if (resultingDepth > maxDepth)
+                return { reason: 'max-depth', maxDepth, resultingDepth };
+        }
+        return null;
     }
     clearTarget() {
         this.target?.removeAttribute('data-drop-position');
@@ -154,10 +237,16 @@ const UITree = class {
         this.position = null;
         this.hoverIntent?.cancel();
     }
+    clearRejection() {
+        this.rejectedTarget = null;
+        this.rejectedPosition = null;
+        this.rejection = null;
+    }
     finishDrag() {
         this.source?.removeAttribute('data-dragging');
         this.source = null;
         this.clearTarget();
+        this.clearRejection();
     }
     expandTarget = (itemId) => {
         const item = Array.from(this.host.querySelectorAll('ui-tree-item'))
@@ -195,18 +284,29 @@ const UITree = class {
             return false;
         if (!target || target === this.source) {
             this.clearTarget();
+            this.clearRejection();
             return false;
         }
         const row = this.rowFor(target);
         if (!row)
             return false;
         const position = classifyDropPosition(row.getBoundingClientRect(), clientY, this.acceptsChildren(target));
-        if (!this.permitsDrop(this.source, target, position)) {
+        const rejection = this.dropRejection(this.source, target, position);
+        if (rejection) {
             if (dataTransfer)
                 dataTransfer.dropEffect = 'none';
             this.clearTarget();
+            if (rejection.reason === 'max-depth') {
+                this.rejectedTarget = target;
+                this.rejectedPosition = position;
+                this.rejection = rejection;
+            }
+            else {
+                this.clearRejection();
+            }
             return false;
         }
+        this.clearRejection();
         if (dataTransfer)
             dataTransfer.dropEffect = 'move';
         if (this.target !== target || this.position !== position) {
@@ -248,12 +348,15 @@ const UITree = class {
         if (this.itemAtPoint(event.clientX, event.clientY))
             return;
         this.clearTarget();
+        this.clearRejection();
     };
     dispatchReorder(source, target, position) {
         const sourceId = this.itemId(source);
         const targetId = this.itemId(target);
         if (!sourceId || !targetId)
             return;
+        if (position === 'inside')
+            this.expandTarget(targetId);
         const sourceMeta = this.itemMetadata(source);
         const targetMeta = this.itemMetadata(target);
         events.dispatchDetail(this.host, 'reorder', {
@@ -267,6 +370,21 @@ const UITree = class {
             trigger: 'pointer',
         });
     }
+    dispatchReorderRejected(source, target, position, rejection) {
+        const sourceId = this.itemId(source);
+        const targetId = this.itemId(target);
+        if (!sourceId || !targetId)
+            return;
+        events.dispatchDetail(this.host, 'reorder-rejected', {
+            sourceId,
+            targetId,
+            position,
+            reason: 'max-depth',
+            maxDepth: rejection.maxDepth,
+            resultingDepth: rejection.resultingDepth,
+            trigger: 'pointer',
+        });
+    }
     onDrop = (event) => {
         if (!this.source || !this.target || !this.position)
             return;
@@ -276,14 +394,23 @@ const UITree = class {
     };
     onDragEnd = (event) => {
         if (this.source) {
+            if (this.rejectedTarget && this.rejectedPosition && this.rejection) {
+                this.dispatchReorderRejected(this.source, this.rejectedTarget, this.rejectedPosition, this.rejection);
+                this.finishDrag();
+                return;
+            }
             const target = this.itemAtPoint(event.clientX, event.clientY);
             if (target && target !== this.source) {
                 const row = this.rowFor(target);
                 if (row) {
                     const position = classifyDropPosition(row.getBoundingClientRect(), event.clientY, this.acceptsChildren(target));
-                    if (this.permitsDrop(this.source, target, position)) {
+                    const rejection = this.dropRejection(this.source, target, position);
+                    if (!rejection) {
                         this.dispatchReorder(this.source, target, position);
                     }
+                    else if (rejection.reason === 'max-depth') {
+                        this.dispatchReorderRejected(this.source, target, position, rejection);
+                    }
                 }
             }
         }
@@ -293,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;
@@ -301,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: '7da064127eb199f5e2cfc59489a07204c9dac2f2', role: "tree", "aria-label": this.label || 'Tree' }, index.h("slot", { key: '31a98a6774ab35e565dab65f1dd8202494432b32' })));
+        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,14 @@
 {
   "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",
     "components/ui-disclosure/ui-disclosure.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"; }