@threadlabs/looma 0.1.24 → 0.1.25

package/dist/{ui-tabs.entry-LXB62RJJ.js → ui-tabs.entry-6X56UOUE.js}

@@ -11,7 +11,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-IMHSPETJ.js";
+} from "./chunk-UY423IKN.js";
 
 // dist/esm/ui-tabs.entry.js
 var uiTabsCss = () => `:host{display:flex;flex-direction:column;gap:0}:host([data-orientation='vertical']){flex-direction:row}::slotted([role='tablist']){display:flex;gap:0;max-inline-size:100%;overflow-x:auto;overscroll-behavior-inline:contain;border-bottom:1px solid var(--ui-border-default)}:host([data-orientation='vertical']) ::slotted([role='tablist']){flex-direction:column;border-bottom:none;border-inline-end:1px solid var(--ui-border-default)}::slotted(button[role='tab']),::slotted([role='tab']),::slotted(ui-button) button[role='tab']{padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-medium, 500);color:var(--ui-text-secondary);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color var(--ui-motion-fast) var(--ui-motion-ease);box-shadow:none}::slotted(button[role='tab']:hover),::slotted([role='tab']:hover){color:var(--ui-text-primary)}::slotted(button[role='tab'][aria-selected='true']),::slotted([role='tab'][aria-selected='true']){color:var(--ui-accent-solid);border-bottom-color:var(--ui-accent-solid)}:host([data-orientation='vertical']) ::slotted(button[role='tab']),:host([data-orientation='vertical']) ::slotted([role='tab']){border-bottom:none;border-inline-end:2px solid transparent;margin-bottom:0;margin-inline-end:-1px}:host([data-orientation='vertical']) ::slotted(button[role='tab'][aria-selected='true']),:host([data-orientation='vertical']) ::slotted([role='tab'][aria-selected='true']){border-inline-end-color:var(--ui-accent-solid)}::slotted([role='tabpanel']){padding:var(--ui-space-4)}`;
@@ -106,7 +106,7 @@ var UITabs = class {
     }
   };
   render() {
-    return h(Host, { key: "8681e699c6afdbafd59ed986b8bf3c815b32cd1c", orientation: this.orientation, "data-orientation": this.orientation }, h("slot", { key: "673f4db2ae0aded3bd40934c1fff518cf6f83837" }));
+    return h(Host, { key: "19207153c7b7a6ea5f5ffb50439e99af70984b44", orientation: this.orientation, "data-orientation": this.orientation }, h("slot", { key: "5045cd040eeccd028c00328206d47f7d17b622de" }));
   }
   static get watchers() {
     return {

package/dist/{ui-textarea.entry-JYGMGPX2.js → ui-textarea.entry-RDYP6O77.js}

@@ -7,7 +7,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-IMHSPETJ.js";
+} from "./chunk-UY423IKN.js";
 
 // dist/esm/ui-textarea.entry.js
 var uiTextareaCss = () => `:host{display:inline-flex;min-inline-size:0;color:var(--ui-text-primary)}::slotted(textarea){width:100%;appearance:none;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));color:inherit;font:inherit;line-height:var(--ui-line-height-md);min-block-size:calc(var(--ui-space-12, 3rem) * 2);padding:var(--ui-space-2) var(--ui-space-3);margin:0;resize:vertical;transition:border-color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     background-color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(textarea:hover:not(:focus):not(:disabled)){border-color:var(--ui-control-border-hover, var(--ui-border-strong))}::slotted(textarea:focus){border-color:var(--ui-control-focus, var(--ui-focus-ring));box-shadow:0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft))}:host([data-invalid='true'])::slotted(textarea),::slotted(textarea[aria-invalid='true']){border-color:var(--ui-accent-active)}::slotted(textarea:disabled){background:var(--ui-control-surface-disabled, var(--ui-surface-muted));color:var(--ui-text-muted);cursor:not-allowed}::slotted(textarea:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}`;
@@ -85,7 +85,7 @@ var UITextarea = class {
     });
   };
   render() {
-    return h(Host, { key: "6ce80349ca316f7a44d08e83862125f6b4d736a6", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "2c1ce87c9019d8346673ae5e7dd8a543d1bcb91c", ref: (el) => this.slotRef = el }));
+    return h(Host, { key: "020adfed4a177ef5d07852ff2e6ffb66b6f80742", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "2e9bd0e071e24fcf248eadf38f16484321359503", ref: (el) => this.slotRef = el }));
   }
   static get watchers() {
     return {

package/dist/{ui-toast-region.entry-TOW4KZLZ.js → ui-toast-region.entry-EBY42KS5.js}

@@ -10,7 +10,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-IMHSPETJ.js";
+} from "./chunk-UY423IKN.js";
 
 // dist/esm/ui-toast-region.entry.js
 var uiToastRegionCss = () => `:host{position:fixed;top:calc(var(--ui-space-4) + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9999;display:grid;gap:var(--ui-space-2);inline-size:min(24rem, calc(100vw - (var(--ui-space-4) * 2)));max-inline-size:100%;pointer-events:none}:host([popover]){right:auto;bottom:auto;margin:0}:host>*{pointer-events:auto}::slotted([data-ui-toast]){display:grid;grid-template-columns:1fr auto;gap:var(--ui-space-2);align-items:start;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);padding:var(--ui-space-3) var(--ui-space-4);background:var(--ui-surface-elevated);color:var(--ui-text-primary);box-shadow:var(--ui-shadow-lg);animation:ui-toast-enter 0.25s var(--ui-motion-ease) forwards}@keyframes ui-toast-enter{from{opacity:0;transform:translateY(-0.5rem)}to{opacity:1;transform:translateY(0)}}::slotted([data-ui-toast][aria-hidden='true']){display:none}::slotted([data-ui-toast-dismiss]){border:0;background:transparent;color:var(--ui-text-secondary);cursor:pointer;font:inherit}`;
@@ -85,7 +85,7 @@ var UIToastRegion = class {
     });
   };
   render() {
-    return h(Host, { key: "b4430aceacb7a66202c6a43ad7b0bbe31c51eb94", role: "region", "aria-label": "Notifications", "aria-live": "polite", "data-open": this.internalOpen ? "" : void 0 }, h("slot", { key: "8bfb02d38366fab29a1668a53b7834ccd1a9aa65" }));
+    return h(Host, { key: "8a3546bcd59e12f21393ea55fa4d232d3907a34e", role: "region", "aria-label": "Notifications", "aria-live": "polite", "data-open": this.internalOpen ? "" : void 0 }, h("slot", { key: "a4a4525a1ca768d65ff36b3889a821b8dda8b6f7" }));
   }
   static get watchers() {
     return {

package/dist/{ui-tooltip.entry-SKFNYXPH.js → ui-tooltip.entry-PLXMPOKV.js}

@@ -18,7 +18,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-IMHSPETJ.js";
+} from "./chunk-UY423IKN.js";
 
 // dist/esm/ui-tooltip.entry.js
 var uiTooltipCss = () => `:host{position:fixed;inset:auto;margin:0;display:inline-block;box-sizing:border-box;padding:0;border:0;border-radius:0;background:transparent;opacity:0;transform:translateY(4px);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}.tooltip__surface{box-sizing:border-box;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md)}:host(:popover-open){opacity:1;transform:translateY(0)}@starting-style{:host(:popover-open){opacity:0;transform:translateY(4px)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
@@ -232,7 +232,7 @@ var UITooltip = class {
     }
   }
   render() {
-    return h(Host, { key: "ce34c51bc3a9c9f7f31b7f0d329175df0cee1ab3", role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? "" : void 0 }, h("div", { key: "e5bb2bcb146fe8ec3b4e9a6abb550961181e3c06", class: "tooltip__surface" }, h("slot", { key: "bdb71bfcb0f72c212cbb5c64fb69510fdded4afb" })));
+    return h(Host, { key: "6c70f235889d6f1c425f0a51fcfc04e06a96dea4", role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? "" : void 0 }, h("div", { key: "5c4f1d264e32d308f5b26af4e967e13369c4238a", class: "tooltip__surface" }, h("slot", { key: "52b5900d67ffa7590b0ff97511f99718d2e8c311" })));
   }
   static get watchers() {
     return {

package/dist/{ui-top-bar.entry-S3YP52EA.js → ui-top-bar.entry-QKE2DLVD.js}

@@ -3,7 +3,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-IMHSPETJ.js";
+} from "./chunk-UY423IKN.js";
 
 // dist/esm/ui-top-bar.entry.js
 var uiTopBarCss = () => `:host{position:sticky;inset-block-start:0;z-index:var(--ui-top-bar-z-index, 100);display:block}.top-bar{min-block-size:calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));display:flex;align-items:center;gap:var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));padding-block-start:env(safe-area-inset-top);padding-inline-start:max(     var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)),     env(safe-area-inset-left)   );padding-inline-end:max(     var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)),     env(safe-area-inset-right)   );background:var(--ui-top-bar-bg, var(--ui-surface, #ffffff));border-block-end:1px solid var(--ui-top-bar-border, var(--ui-border, #e5e7eb))}.top-bar__leading,.top-bar__search,.top-bar__actions{display:flex;align-items:center;flex-shrink:0}.top-bar__actions{gap:var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem))}.top-bar__title{min-inline-size:0;flex:1}[hidden]{display:none}@media (min-width: 768px){:host{display:none}}`;
@@ -40,7 +40,7 @@ var UITopBar = class {
     this.hasActions = slotHasContent(this.actionsSlot);
   };
   render() {
-    return h(Host, { key: "b92aa4e03475b3e623212a1e98f45d5532860b51" }, h("header", { key: "a3552708b0e424e762e100ee55fc6bfac4cd830a", class: "top-bar", part: "base" }, h("div", { key: "4c8a9e3a04ff23a615bf09e368f4212dd5b38157", class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: "64ecc99672b8fd37305810e0776a24bf87ea6f08", name: "leading", ref: (el) => this.leadingSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "37fc003aba2b87f7c8c0e654cd6810d7f231f365", class: "top-bar__title" }, h("slot", { key: "e6c901c15852e83340ca8ad1e264fd5e35445e84" })), h("div", { key: "37b1ac319367eeded4182ada401a31e0b9c2555a", class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: "0a8b5ef500dd843909bb35a1133be548411f3b71", name: "search", ref: (el) => this.searchSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "7e5054a3ed6ecfe8d9d8b1b36992843aa0fb62eb", class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: "19fe59c5ba4da7f0ceda764948f1288bfaa2a41d", name: "actions", ref: (el) => this.actionsSlot = el, onSlotchange: this.syncSlots }))));
+    return h(Host, { key: "ef7cf644a8e8381d7d1f8d093bcfefcdc4620682" }, h("header", { key: "5055594a179d86efefd43529e070a582c51cb1d8", class: "top-bar", part: "base" }, h("div", { key: "bd6ec069ae9d7820a6992250ba1aa997b4cc6754", class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: "3b9b1b73fb455ad720e1db46757555eb3713c0b8", name: "leading", ref: (el) => this.leadingSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "e402cc0cb7ec4418460182f8f32cb161c6139221", class: "top-bar__title" }, h("slot", { key: "fce0cfc11da269167853f591742b1369023864ae" })), h("div", { key: "6861bb04f399076378aa1fa9be24b35db277106a", class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: "3857f37d53ec99b36a52cb7830e634afdee29d2e", name: "search", ref: (el) => this.searchSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "538f6297078b6d5aa85906e902066e8809f52540", class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: "3c45ff59c4b48673e796c6e93842cb11fceb652f", name: "actions", ref: (el) => this.actionsSlot = el, onSlotchange: this.syncSlots }))));
   }
 };
 UITopBar.style = uiTopBarCss();

package/dist/{ui-tree-item.entry-LWYIPYLC.js → ui-tree-item.entry-TC6YWIC6.js}

@@ -10,7 +10,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-IMHSPETJ.js";
+} from "./chunk-UY423IKN.js";
 
 // dist/esm/ui-tree-item.entry.js
 var uiTreeItemCss = () => `:host{--ui-tree-indent:16px;--ui-tree-row-min-height:32px;--ui-tree-drop-color:var(--ui-accent-solid);position:relative;display:block;min-inline-size:0;margin-inline-start:calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent))}.row{position:relative;display:grid;grid-template-columns:20px auto minmax(0, 1fr) auto;align-items:center;min-block-size:var(--ui-tree-row-min-height);min-inline-size:0;font-size:var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));border-radius:var(--ui-radius-md);color:var(--ui-text-secondary);transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease),     opacity var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     min-block-size var(--ui-motion-base) var(--ui-motion-ease)}.row:hover,:host([data-selected]) .row,.row:focus-within{color:var(--ui-text-primary);background:var(--ui-surface-muted)}:host([data-disabled]) .row{opacity:0.55}:host([data-dragging]) .row{opacity:0.42}:host(:focus){outline:none}:host(:focus-visible) .row{box-shadow:0 0 0 2px var(--ui-focus-ring)}:host([data-drop-position='inside']) .row{background:var(--ui-accent-subtle);box-shadow:inset 0 0 0 1px var(--ui-tree-drop-color)}.disclosure,.disclosure-spacer{grid-column:1;grid-row:1;inline-size:20px;block-size:28px}.disclosure{display:grid;place-items:center;padding:0;color:var(--ui-text-muted);background:transparent;border:0;border-radius:var(--ui-radius-sm);cursor:pointer}.disclosure:hover{color:var(--ui-text-primary);background:var(--ui-surface-elevated)}.disclosure-icon{display:block;inline-size:14px;block-size:14px;transform:rotate(-90deg);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}.disclosure-icon--expanded{transform:rotate(0deg)}.disclosure-icon :is(svg),.drag-handle :is(svg){display:block;inline-size:100%;block-size:100%}.leading{display:none}.leading:has(*){display:inline-grid;place-items:center;grid-column:2;grid-row:1;inline-size:16px;block-size:16px;margin-inline-start:var(--ui-space-1)}.label{grid-column:3;grid-row:1;min-inline-size:0;padding:var(--ui-space-1) var(--ui-space-2)}.actions{grid-column:4;grid-row:1;display:inline-flex;align-items:center;min-inline-size:0}.drag-handle{position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:-22px;inline-size:20px;block-size:32px;display:grid;place-items:center;padding:7px 3px;color:var(--ui-text-muted);background:var(--ui-surface-elevated);border:1px solid transparent;border-radius:var(--ui-radius-sm);cursor:grab;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover .drag-handle,.drag-handle:focus-visible,:host([data-dragging]) .drag-handle{opacity:1;pointer-events:auto}.drag-handle:active{cursor:grabbing}.drop-indicator{position:absolute;z-index:3;inset-inline:1px;display:none;block-size:2px;border-radius:999px;background:var(--ui-tree-drop-color);pointer-events:none}.drop-indicator::before,.drop-indicator::after{content:'';position:absolute;inset-block-start:50%;inline-size:7px;block-size:7px;border:2px solid var(--ui-tree-drop-color);border-radius:999px;background:var(--ui-surface-elevated);transform:translateY(-50%)}.drop-indicator::before{inset-inline-start:-1px}.drop-indicator::after{inset-inline-end:-1px}:host([data-drop-position='before']) .row-drop-indicator{display:block;inset-block-start:-1px}:host([data-drop-position='after']) .subtree-drop-indicator{display:block;inset-block-end:-1px}.children[hidden]{display:none}:host-context(html[data-ui-input-modality='touch']){--ui-tree-row-min-height:44px}:host-context(html[data-ui-input-modality='touch']) .drag-handle{display:none}@media (prefers-reduced-motion: reduce){.row,.disclosure-icon,.drag-handle{transition:none}}`;
@@ -126,10 +126,10 @@ var UITreeItem = class {
     const expanded = this.isExpanded();
     const disclosureLabel = `${expanded ? "Collapse" : "Expand"} ${this.label || "item"}`;
     const dragLabel = `Drag ${this.label || "item"} to reorder`;
-    return h(Host, { key: "36ad9eac3e0fe2a606e63294891b1c0697034b46", role: "treeitem", "aria-label": this.label || void 0, "aria-level": String(level), "aria-expanded": this.container ? String(expanded) : void 0, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? "true" : void 0, "data-container": this.container ? "" : void 0, "data-selected": this.selected ? "" : void 0, "data-disabled": this.disabled ? "" : void 0, "data-drag-type": this.dragType || "item", "data-drop-scope": this.dropScope || void 0, "data-accepts": this.accepts || void 0, tabIndex: this.disabled || !this.tabStop ? -1 : 0, style: {
+    return h(Host, { key: "f092fa9586a39aba1a9629ba42e52f8fbc10de05", role: "treeitem", "aria-label": this.label || void 0, "aria-level": String(level), "aria-expanded": this.container ? String(expanded) : void 0, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? "true" : void 0, "data-container": this.container ? "" : void 0, "data-selected": this.selected ? "" : void 0, "data-disabled": this.disabled ? "" : void 0, "data-drag-type": this.dragType || "item", "data-drop-scope": this.dropScope || void 0, "data-accepts": this.accepts || void 0, tabIndex: this.disabled || !this.tabStop ? -1 : 0, style: {
       "--ui-tree-item-depth": String(level - 1),
       "margin-inline-start": level > 1 ? "var(--ui-tree-indent, 16px)" : "0px"
-    } }, h("div", { key: "e92f5bc73accef3b348559ea144e0b769c98c721", class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, h("span", { innerHTML: loomaIconMarkup("grip-vertical") })) : null, this.container ? h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(expanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, h("span", { class: { "disclosure-icon": true, "disclosure-icon--expanded": expanded }, innerHTML: loomaIconMarkup("chevron-down") })) : h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), h("span", { key: "dd2d0550d6846d0a4f80a4108968bfc32c18658f", class: "leading", part: "leading" }, h("slot", { key: "622d449a338dce57bc2e64aaf776471e8d3ce1b4", name: "leading" })), h("span", { key: "29c3e6ace4838ab941ada2547356288358faaeb2", class: "label", part: "label" }, h("slot", { key: "f1594c11fa0b9fbe8a3c20df6edce19421cab148" })), h("span", { key: "e4a6408f86b58a325145e713d116fc09322bb0d3", class: "actions", part: "actions" }, h("slot", { key: "ff3afaf1089426e19ee1fc39c6567c3d40ca4272", name: "actions" })), h("span", { key: "efcf23f7aad6c4353fa24bfe2a81001122335f72", class: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? h("div", { class: "children", part: "children", role: "group", hidden: !expanded }, h("slot", { name: "children" })) : null, h("span", { key: "21bfc8a6ad6e487cd044b5a3cbd7e8f900f2d1e1", class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" }));
+    } }, h("div", { key: "2f16d97219ba9ec9e37688d97ad9144508aa1ed5", class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, h("span", { innerHTML: loomaIconMarkup("grip-vertical") })) : null, this.container ? h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(expanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, h("span", { class: { "disclosure-icon": true, "disclosure-icon--expanded": expanded }, innerHTML: loomaIconMarkup("chevron-down") })) : h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), h("span", { key: "d984631c891df304edb3e1dc5bcd19af3ad8e20d", class: "leading", part: "leading" }, h("slot", { key: "81a0e055859df5d4daaa6dac39013b23dcc2831b", name: "leading" })), h("span", { key: "3ae295523d5a3b9feaa9bfaa16d807349e37d78b", class: "label", part: "label" }, h("slot", { key: "db8503a41d087d283074a41e76fa872ff4b2a707" })), h("span", { key: "ac5b5db7128b31a9263b912bd64cd90ac640eaeb", class: "actions", part: "actions" }, h("slot", { key: "c8842a5d80215ec297688c86f6bfe9b4d9bed333", name: "actions" })), h("span", { key: "b7f239bc16867678291850ad61a5cd752d6a7425", class: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? h("div", { class: "children", part: "children", role: "group", hidden: !expanded }, h("slot", { name: "children" })) : null, h("span", { key: "2a5f448db2f4f363a34a1a950785e0ee12cc9938", class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" }));
   }
   static get watchers() {
     return {

package/dist/{ui-tree.entry-LXKUQFRU.js → ui-tree.entry-UL6UHCUT.js}

@@ -6,7 +6,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-IMHSPETJ.js";
+} from "./chunk-UY423IKN.js";
 
 // dist/esm/ui-tree.entry.js
 function classifyDropPosition(rect, clientY, acceptsChildren) {
@@ -461,7 +461,7 @@ var UITree = class {
     }
   };
   render() {
-    return h(Host, { key: "549c09abc67dc60b16bf2d6b7d6346f214e9d6ae", role: "tree", "aria-label": this.label || "Tree" }, h("slot", { key: "fea59bde97611bf384e32ce4fb2b3eec9aca784f" }));
+    return h(Host, { key: "7efbf793fe63471006df57f0045a5fe995c81440", role: "tree", "aria-label": this.label || "Tree" }, h("slot", { key: "1804e391796e7451c93cb58258e0e23ec3ad98c7" }));
   }
 };
 UITree.style = uiTreeCss();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "type": "module",
   "description": "Looma web components, responsive layout primitives, a complete editor, and supported Vue adapters.",
   "license": "MIT",

package/vue/{chunk-D4AJULDE.js → chunk-GXQY27K2.js}

@@ -109,6 +109,7 @@ var Combobox = defineComponent2({
     placeholder: String,
     name: String,
     size: { type: String, default: "md" },
+    labelVisibility: { type: String, default: "visible" },
     disabled: Boolean,
     readOnly: Boolean,
     required: Boolean,
@@ -170,13 +171,90 @@ var Combobox = defineComponent2({
         required: props.required
       })]),
       ...slots.option ? rows.value.map((option) => h2("div", { slot: `option-${option.id}`, key: option.id }, slots.option({ option }))) : [],
-      ...["loading", "empty", "error", "create"].flatMap((name) => slots[name] ? [h2("div", { slot: name }, slots[name]({}))] : [])
+      ...["start", "footer", "loading", "empty", "error", "create"].flatMap((name) => slots[name] ? [h2("div", { slot: name }, slots[name]({}))] : [])
+    ]);
+  }
+});
+
+// src/MultiCombobox.ts
+import { defineComponent as defineComponent3, h as h3, shallowRef as shallowRef3, watch, watchEffect as watchEffect3 } from "vue";
+var MultiCombobox = defineComponent3({
+  name: "MultiCombobox",
+  inheritAttrs: false,
+  props: {
+    label: { type: String, required: true },
+    items: { type: Array, default: () => [] },
+    config: { type: Object, default: () => ({}) },
+    query: { type: String, default: void 0 },
+    defaultQuery: String,
+    placeholder: String,
+    name: String,
+    disabled: Boolean,
+    readOnly: Boolean,
+    required: Boolean
+  },
+  emits: {
+    "update:query": (_query) => true,
+    queryChange: (_detail) => true,
+    addItem: (_detail) => true,
+    removeItem: (_detail) => true,
+    createItem: (_detail) => true,
+    optionsChange: (_detail) => true
+  },
+  slots: Object,
+  setup(props, { attrs, slots, emit, expose }) {
+    const element = shallowRef3();
+    const rows = shallowRef3(props.config.options ?? []);
+    const currentQuery = shallowRef3(props.query ?? props.defaultQuery ?? "");
+    watch(() => props.query, (query) => {
+      if (query !== void 0) currentQuery.value = query;
+    });
+    watchEffect3(() => {
+      if (!element.value) return;
+      element.value.items = props.items;
+      element.value.config = props.config;
+      element.value.query = props.query;
+    });
+    expose({ focusInput: () => element.value.focusInput() });
+    return () => h3("ui-multi-combobox", {
+      ...attrs,
+      ...Object.fromEntries(Object.entries(props).filter(([key]) => !["items", "config", "query"].includes(key))),
+      items: props.items,
+      config: props.config,
+      query: props.query,
+      "data-allow-mismatch": "class",
+      ref: element,
+      class: [attrs.class, element.value?.shadowRoot && "hydrated"],
+      "onOptions-change": (event) => {
+        rows.value = event.detail;
+        emit("optionsChange", event.detail);
+      },
+      "onQuery-change": (event) => {
+        currentQuery.value = event.detail.query;
+        emit("update:query", event.detail.query);
+        emit("queryChange", event.detail);
+      },
+      "onAdd-item": (event) => emit("addItem", event.detail),
+      "onRemove-item": (event) => emit("removeItem", event.detail),
+      "onCreate-item": (event) => emit("createItem", event.detail)
+    }, [
+      h3("label", { slot: "fallback" }, [props.label, h3("input", {
+        value: props.query ?? props.defaultQuery ?? "",
+        disabled: props.disabled,
+        readonly: props.readOnly,
+        required: props.required
+      })]),
+      ...slots.item ? props.items.map((item) => h3("span", { slot: `item-${item.id}`, key: item.id }, slots.item({ item }))) : [],
+      ...slots.option ? rows.value.map((option) => h3("span", { slot: `option-${option.id}`, key: option.id }, slots.option({ option }))) : [],
+      ...slots.create ? [h3("span", { slot: "create" }, slots.create({ query: currentQuery.value }))] : [],
+      ...["footer", "loading", "empty", "error"].flatMap((name) => slots[name] ? [h3("div", { slot: name }, slots[name]({}))] : [])
     ]);
   }
 });
 
 // src/index.ts
 var Combobox2 = Combobox;
+var MultiCombobox2 = MultiCombobox;
 var Stack = createAdapterComponent("ui-stack", "Stack");
 var Inline = createAdapterComponent("ui-inline", "Inline");
 var Cluster = createAdapterComponent("ui-cluster", "Cluster");
@@ -187,6 +265,7 @@ var Sidebar = createAdapterComponent("ui-sidebar", "Sidebar", [], "");
 var Reel = createAdapterComponent("ui-reel", "Reel");
 var Separator = createAdapterComponent("ui-separator", "Separator");
 var Disclosure = createAdapterComponent("ui-disclosure", "Disclosure", [], "class", ["open"]);
+var Editable = createAdapterComponent("ui-editable", "Editable", [["edit-change", "onEditChange"]], "class", ["edit"]);
 var Tabs = createAdapterComponent("ui-tabs", "Tabs", [], "class", ["value"]);
 var Dialog = createAdapterComponent("ui-dialog", "Dialog", [], "class", ["open"]);
 var Popover = createAdapterComponent("ui-popover", "Popover", [], "class", ["open"]);
@@ -231,6 +310,7 @@ var TreeItem = createAdapterComponent(
 );
 var ADAPTER_COMPONENT_TAG_MAP = {
   Combobox: "ui-combobox",
+  MultiCombobox: "ui-multi-combobox",
   Stack: "ui-stack",
   Inline: "ui-inline",
   Cluster: "ui-cluster",
@@ -241,6 +321,7 @@ var ADAPTER_COMPONENT_TAG_MAP = {
   Reel: "ui-reel",
   Separator: "ui-separator",
   Disclosure: "ui-disclosure",
+  Editable: "ui-editable",
   Tabs: "ui-tabs",
   Dialog: "ui-dialog",
   Popover: "ui-popover",
@@ -278,6 +359,7 @@ export {
   toHTMLElement,
   createAdapterComponent,
   Combobox2 as Combobox,
+  MultiCombobox2 as MultiCombobox,
   Stack,
   Inline,
   Cluster,
@@ -288,6 +370,7 @@ export {
   Reel,
   Separator,
   Disclosure,
+  Editable,
   Tabs,
   Dialog,
   Popover,

package/vue/editor/index.js

@@ -3,7 +3,7 @@ import {
   Popover,
   createAdapterComponent,
   toHTMLElement
-} from "../chunk-D4AJULDE.js";
+} from "../chunk-GXQY27K2.js";
 
 // src/editor/index.ts
 import "@threadlabs/looma/editor";

package/vue/index.d.ts

@@ -1,5 +1,6 @@
 import * as _threadlabs_looma_core from '@threadlabs/looma/core';
-export { ComboboxChange, ComboboxConfig, ComboboxOption, ComboboxProvider, ComboboxRequest, ComboboxValidationState, FieldFormatter, FieldIssue, FieldSchema, FieldValidation } from '@threadlabs/looma/core';
+import { EditableChange } from '@threadlabs/looma/core';
+export { ComboboxChange, ComboboxConfig, ComboboxOption, ComboboxProvider, ComboboxRequest, ComboboxValidationState, EditableChange, FieldFormatter, FieldIssue, FieldSchema, FieldValidation, MultiComboboxCreate, MultiComboboxItem, MultiComboboxItemChange } from '@threadlabs/looma/core';
 import * as vue from 'vue';
 
 interface VueAdapterEventMap {
@@ -56,6 +57,7 @@ interface VueAdapterEventMap {
         expanded: boolean;
         trigger: string;
     };
+    editChange: EditableChange;
 }
 
 interface AdapterBaseProps {
@@ -112,6 +114,12 @@ interface DisclosureProps extends AdapterBaseProps {
     "onClose"?: ((detail: VueAdapterEventMap['close']) => void) | undefined;
     "onOpen"?: ((detail: VueAdapterEventMap['open']) => void) | undefined;
 }
+interface EditableProps extends AdapterBaseProps {
+    "edit"?: boolean | undefined;
+    "defaultEdit"?: boolean | undefined;
+    "disabled"?: boolean | undefined;
+    "onEditChange"?: ((detail: VueAdapterEventMap['editChange']) => void) | undefined;
+}
 interface TabsProps extends AdapterBaseProps {
     "defaultValue"?: string | undefined;
     "orientation"?: "horizontal" | "vertical" | undefined;
@@ -248,6 +256,7 @@ interface BadgeProps extends AdapterBaseProps {
 }
 interface ChipProps extends AdapterBaseProps {
     "appearance"?: "tag" | "pill" | undefined;
+    "size"?: "xs" | "sm" | undefined;
 }
 interface CalloutProps extends AdapterBaseProps {
     "tone"?: "info" | "note" | "warning" | "success" | "error" | undefined;
@@ -308,6 +317,7 @@ interface AdapterComponentProps {
     "Reel": ReelProps;
     "Separator": SeparatorProps;
     "Disclosure": DisclosureProps;
+    "Editable": EditableProps;
     "Tabs": TabsProps;
     "Dialog": DialogProps;
     "Popover": PopoverProps;
@@ -365,6 +375,10 @@ declare const Combobox: vue.DefineComponent<vue.ExtractPropTypes<{
         type: vue.PropType<"sm" | "md">;
         default: string;
     };
+    labelVisibility: {
+        type: vue.PropType<"visible" | "sr-only">;
+        default: string;
+    };
     disabled: BooleanConstructor;
     readOnly: BooleanConstructor;
     required: BooleanConstructor;
@@ -411,6 +425,10 @@ declare const Combobox: vue.DefineComponent<vue.ExtractPropTypes<{
         type: vue.PropType<"sm" | "md">;
         default: string;
     };
+    labelVisibility: {
+        type: vue.PropType<"visible" | "sr-only">;
+        default: string;
+    };
     disabled: BooleanConstructor;
     readOnly: BooleanConstructor;
     required: BooleanConstructor;
@@ -440,6 +458,7 @@ declare const Combobox: vue.DefineComponent<vue.ExtractPropTypes<{
     query: string;
     config: _threadlabs_looma_core.ComboboxConfig;
     size: "sm" | "md";
+    labelVisibility: "visible" | "sr-only";
 }, vue.SlotsType<{
     option: {
         option: _threadlabs_looma_core.ComboboxOption;
@@ -448,6 +467,100 @@ declare const Combobox: vue.DefineComponent<vue.ExtractPropTypes<{
     empty: Record<string, never>;
     error: Record<string, never>;
     create: Record<string, never>;
+    start: Record<string, never>;
+    footer: Record<string, never>;
+}>, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const MultiCombobox: vue.DefineComponent<vue.ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    items: {
+        type: vue.PropType<readonly _threadlabs_looma_core.MultiComboboxItem[]>;
+        default: () => never[];
+    };
+    config: {
+        type: vue.PropType<_threadlabs_looma_core.ComboboxConfig>;
+        default: () => {};
+    };
+    query: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultQuery: StringConstructor;
+    placeholder: StringConstructor;
+    name: StringConstructor;
+    disabled: BooleanConstructor;
+    readOnly: BooleanConstructor;
+    required: BooleanConstructor;
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:query': (_query: string) => true;
+    queryChange: (_detail: {
+        query: string;
+        display: string;
+        trigger: string;
+    }) => true;
+    addItem: (_detail: _threadlabs_looma_core.MultiComboboxItemChange) => true;
+    removeItem: (_detail: _threadlabs_looma_core.MultiComboboxItemChange) => true;
+    createItem: (_detail: _threadlabs_looma_core.MultiComboboxCreate) => true;
+    optionsChange: (_detail: readonly _threadlabs_looma_core.ComboboxOption[]) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    items: {
+        type: vue.PropType<readonly _threadlabs_looma_core.MultiComboboxItem[]>;
+        default: () => never[];
+    };
+    config: {
+        type: vue.PropType<_threadlabs_looma_core.ComboboxConfig>;
+        default: () => {};
+    };
+    query: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultQuery: StringConstructor;
+    placeholder: StringConstructor;
+    name: StringConstructor;
+    disabled: BooleanConstructor;
+    readOnly: BooleanConstructor;
+    required: BooleanConstructor;
+}>> & Readonly<{
+    "onUpdate:query"?: (_query: string) => any;
+    onQueryChange?: (_detail: {
+        query: string;
+        display: string;
+        trigger: string;
+    }) => any;
+    onAddItem?: (_detail: _threadlabs_looma_core.MultiComboboxItemChange) => any;
+    onRemoveItem?: (_detail: _threadlabs_looma_core.MultiComboboxItemChange) => any;
+    onCreateItem?: (_detail: _threadlabs_looma_core.MultiComboboxCreate) => any;
+    onOptionsChange?: (_detail: readonly _threadlabs_looma_core.ComboboxOption<unknown>[]) => any;
+}>, {
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
+    query: string;
+    config: _threadlabs_looma_core.ComboboxConfig;
+    items: readonly _threadlabs_looma_core.MultiComboboxItem[];
+}, vue.SlotsType<{
+    item: {
+        item: _threadlabs_looma_core.MultiComboboxItem;
+    };
+    option: {
+        option: _threadlabs_looma_core.ComboboxOption;
+    };
+    create: {
+        query: string;
+    };
+    footer: Record<string, never>;
+    loading: Record<string, never>;
+    empty: Record<string, never>;
+    error: Record<string, never>;
 }>, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const Stack: vue.DefineComponent<StackProps>;
@@ -460,6 +573,7 @@ declare const Sidebar: vue.DefineComponent<SidebarProps>;
 declare const Reel: vue.DefineComponent<ReelProps>;
 declare const Separator: vue.DefineComponent<SeparatorProps>;
 declare const Disclosure: vue.DefineComponent<DisclosureProps>;
+declare const Editable: vue.DefineComponent<EditableProps>;
 declare const Tabs: vue.DefineComponent<TabsProps>;
 declare const Dialog: vue.DefineComponent<DialogProps>;
 declare const Popover: vue.DefineComponent<PopoverProps>;
@@ -492,6 +606,7 @@ declare const Tree: vue.DefineComponent<TreeProps>;
 declare const TreeItem: vue.DefineComponent<TreeItemProps>;
 declare const ADAPTER_COMPONENT_TAG_MAP: {
     readonly Combobox: "ui-combobox";
+    readonly MultiCombobox: "ui-multi-combobox";
     readonly Stack: "ui-stack";
     readonly Inline: "ui-inline";
     readonly Cluster: "ui-cluster";
@@ -502,6 +617,7 @@ declare const ADAPTER_COMPONENT_TAG_MAP: {
     readonly Reel: "ui-reel";
     readonly Separator: "ui-separator";
     readonly Disclosure: "ui-disclosure";
+    readonly Editable: "ui-editable";
     readonly Tabs: "ui-tabs";
     readonly Dialog: "ui-dialog";
     readonly Popover: "ui-popover";
@@ -535,4 +651,4 @@ declare const ADAPTER_COMPONENT_TAG_MAP: {
 };
 declare const VUE_ADAPTER_NOTE = "Thin adapter only: attrs and slots pass through to custom elements and DOM events map to typed callbacks.";
 
-export { ADAPTER_COMPONENT_TAG_MAP, type AdapterBaseProps, type AdapterComponentProps, AffordanceScope, type AffordanceScopeProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Callout, type CalloutProps, Center, type CenterProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Cluster, type ClusterProps, Combobox, ContextMenu, type ContextMenuProps, Dialog, type DialogProps, Disclosure, type DisclosureProps, FloatingActionButton, type FloatingActionButtonProps, FormField, type FormFieldProps, Grid, type GridProps, IconButton, type IconButtonProps, Inline, type InlineProps, Input, type InputProps, Menu, MenuItem, type MenuItemProps, type MenuProps, Popover, type PopoverProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Reel, type ReelProps, SearchResultRow, type SearchResultRowProps, SearchShell, type SearchShellProps, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarProps, Stack, type StackProps, Switch, type SwitchProps, Switcher, type SwitcherProps, Tabs, type TabsProps, Textarea, type TextareaProps, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TopBar, type TopBarProps, Tree, TreeItem, type TreeItemProps, type TreeProps, VUE_ADAPTER_NOTE, type VueAdapterEventMap };
+export { ADAPTER_COMPONENT_TAG_MAP, type AdapterBaseProps, type AdapterComponentProps, AffordanceScope, type AffordanceScopeProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Callout, type CalloutProps, Center, type CenterProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Cluster, type ClusterProps, Combobox, ContextMenu, type ContextMenuProps, Dialog, type DialogProps, Disclosure, type DisclosureProps, Editable, type EditableProps, FloatingActionButton, type FloatingActionButtonProps, FormField, type FormFieldProps, Grid, type GridProps, IconButton, type IconButtonProps, Inline, type InlineProps, Input, type InputProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MultiCombobox, Popover, type PopoverProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Reel, type ReelProps, SearchResultRow, type SearchResultRowProps, SearchShell, type SearchShellProps, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarProps, Stack, type StackProps, Switch, type SwitchProps, Switcher, type SwitcherProps, Tabs, type TabsProps, Textarea, type TextareaProps, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TopBar, type TopBarProps, Tree, TreeItem, type TreeItemProps, type TreeProps, VUE_ADAPTER_NOTE, type VueAdapterEventMap };

package/vue/index.js

@@ -14,6 +14,7 @@ import {
   ContextMenu,
   Dialog,
   Disclosure,
+  Editable,
   FloatingActionButton,
   FormField,
   Grid,
@@ -22,6 +23,7 @@ import {
   Input,
   Menu,
   MenuItem,
+  MultiCombobox,
   Popover,
   Radio,
   RadioGroup,
@@ -42,7 +44,7 @@ import {
   Tree,
   TreeItem,
   VUE_ADAPTER_NOTE
-} from "./chunk-D4AJULDE.js";
+} from "./chunk-GXQY27K2.js";
 export {
   ADAPTER_COMPONENT_TAG_MAP,
   AffordanceScope,
@@ -59,6 +61,7 @@ export {
   ContextMenu,
   Dialog,
   Disclosure,
+  Editable,
   FloatingActionButton,
   FormField,
   Grid,
@@ -67,6 +70,7 @@ export {
   Input,
   Menu,
   MenuItem,
+  MultiCombobox,
   Popover,
   Radio,
   RadioGroup,

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

@@ -1,19 +0,0 @@
-'use strict';
-
-var index = require('./index-BHG9Rpil.js');
-
-const uiChipCss = () => `: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);color:var(--ui-chip-text) !important;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%)}`;
-
-const UIChip = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /** `tag` has a square leading edge and an angled trailing edge; `pill` is fully rounded. */
-    appearance = 'tag';
-    render() {
-        return (index.h(index.Host, { key: 'fe1246a1e698098f0ca9cb04e749d5adf233e50c', "data-appearance": this.appearance }, index.h("span", { key: 'a17237699b9eb20fb0a084adbd900a3aa9bc12b0', class: "chip__surface" }, index.h("slot", { key: '7f4e5dcc82d360083d4ded2617fa39a9dc1fd3ef' }))));
-    }
-};
-UIChip.style = uiChipCss();
-
-exports.ui_chip = UIChip;

package/dist/esm/ui-chip.entry.js

@@ -1,17 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-8BGiMGQ0.js';
-
-const uiChipCss = () => `: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);color:var(--ui-chip-text) !important;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%)}`;
-
-const UIChip = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /** `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' }))));
-    }
-};
-UIChip.style = uiChipCss();
-
-export { UIChip as ui_chip };

package/dist/looma/p-82f2fa3d.entry.js

@@ -1 +0,0 @@
-import{r as i,h as a,H as e}from"./p-8BGiMGQ0.js";const c=class{constructor(a){i(this,a)}appearance="tag";render(){return a(e,{key:"fe1246a1e698098f0ca9cb04e749d5adf233e50c","data-appearance":this.appearance},a("span",{key:"a17237699b9eb20fb0a084adbd900a3aa9bc12b0",class:"chip__surface"},a("slot",{key:"7f4e5dcc82d360083d4ded2617fa39a9dc1fd3ef"})))}};c.style=":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);color:var(--ui-chip-text) !important;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%)}";export{c as ui_chip}