@threadlabs/looma 0.1.21 → 0.1.23

package/dist/cjs/ui-tree-item.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');
 
 /**
@@ -616,6 +616,10 @@ const UITreeItem = class {
     label = '';
     /** One-based visual and semantic nesting level. */
     depth = 1;
+    /** Application hierarchy depth used for drop constraints. Defaults to visual depth. */
+    dropDepth;
+    /** Deepest descendant distance, used with the tree's max-depth drop constraint. */
+    subtreeDepth;
     /** Whether this item accepts children and exposes disclosure behavior. */
     container = false;
     /** Whether this item participates in pointer drag and drop. */
@@ -678,10 +682,10 @@ const UITreeItem = class {
         const level = Math.max(1, Math.floor(this.depth));
         const disclosureLabel = `${this.internalExpanded ? 'Collapse' : 'Expand'} ${this.label || 'item'}`;
         const dragLabel = `Drag ${this.label || 'item'} to reorder`;
-        return (index.h(index.Host, { key: 'ea8ed538aa3883c87257a25614a066965364693f', role: "treeitem", "aria-level": String(level), "aria-expanded": this.container ? String(this.internalExpanded) : undefined, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "data-container": this.container ? '' : undefined, "data-selected": this.selected ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-drag-type": this.dragType || 'item', "data-drop-scope": this.dropScope || undefined, "data-accepts": this.accepts || undefined, tabIndex: this.disabled ? -1 : 0, style: {
+        return (index.h(index.Host, { key: '606f5fdac8a95489d0c62cd7d4918c6d5d0c759e', role: "treeitem", "aria-level": String(level), "aria-expanded": this.container ? String(this.internalExpanded) : undefined, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "data-container": this.container ? '' : undefined, "data-selected": this.selected ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-drag-type": this.dragType || 'item', "data-drop-scope": this.dropScope || undefined, "data-accepts": this.accepts || undefined, tabIndex: this.disabled ? -1 : 0, style: {
                 '--ui-tree-item-depth': String(level - 1),
                 'margin-inline-start': level > 1 ? 'var(--ui-tree-indent, 16px)' : '0px',
-            } }, index.h("div", { key: '740b93aa47e65d8a1cb899d4b9c966d9ad1d456f', class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? (index.h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, index.h("span", { innerHTML: loomaIconMarkup('grip-vertical') }))) : null, this.container ? (index.h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(this.internalExpanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, index.h("span", { class: { 'disclosure-icon': true, 'disclosure-icon--expanded': this.internalExpanded }, innerHTML: loomaIconMarkup('chevron-down') }))) : index.h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), index.h("span", { key: '37e1b7f1cdddf623734becef465ffde83d8b86f2', class: "leading", part: "leading" }, index.h("slot", { key: '0ab3a60c98628f009918d0d720772154912d2709', name: "leading" })), index.h("span", { key: 'defdd343f25a0f4354110e981f3889e1d09c27ee', class: "label", part: "label" }, index.h("slot", { key: 'bde46ccacc1a620348062fc300503c4f1736316b' })), index.h("span", { key: 'caff9ada38c41be90aeb6e331f4c54a51f31d26c', class: "actions", part: "actions" }, index.h("slot", { key: 'e11704d6871445c91eaa29c99302d8b751be69d3', name: "actions" })), index.h("span", { key: '9efc0e95588f1dd4527dade2b7ff9f2774462c2e', class: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? (index.h("div", { class: "children", part: "children", role: "group", hidden: !this.internalExpanded }, index.h("slot", { name: "children" }))) : null, index.h("span", { key: '8893ec2c4082bb8af942ef563055a2910d0d4201', class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })));
+            } }, index.h("div", { key: '2b4bb03d4b24ef668f22b08e803f7f43c2d63ae5', class: "row", part: "row", onClick: this.onRowClick }, this.sortable && !this.disabled ? (index.h("button", { class: "drag-handle", part: "drag-handle", type: "button", draggable: true, "aria-label": dragLabel, title: dragLabel }, index.h("span", { innerHTML: loomaIconMarkup('grip-vertical') }))) : null, this.container ? (index.h("button", { class: "disclosure", part: "disclosure", type: "button", "aria-label": disclosureLabel, "aria-expanded": String(this.internalExpanded), disabled: this.disabled, onClick: this.onDisclosureClick, onKeyDown: this.onDisclosureKeydown }, index.h("span", { class: { 'disclosure-icon': true, 'disclosure-icon--expanded': this.internalExpanded }, innerHTML: loomaIconMarkup('chevron-down') }))) : index.h("span", { class: "disclosure-spacer", "aria-hidden": "true" }), index.h("span", { key: 'e7b935158e35cdc6518bdd73d54c42dcfa211aee', class: "leading", part: "leading" }, index.h("slot", { key: '8448462349fd23b8be0fb673fc6e101bf94beaa7', name: "leading" })), index.h("span", { key: 'e0b6338e1ec9ec043446e42c5f03724adf7e1862', class: "label", part: "label" }, index.h("slot", { key: 'ed44e6f2ce3466c28d2b87fc7511399ecc339255' })), index.h("span", { key: '2aea78227904fe23cfc4b8e14852a4601e3cc34b', class: "actions", part: "actions" }, index.h("slot", { key: '7c6549008c2a54c3ea6fcdf9e0fdbe445d379922', name: "actions" })), index.h("span", { key: '05166ba04765bc518d6b95ca7ae5a67c4394d1bf', class: "drop-indicator row-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })), this.container ? (index.h("div", { class: "children", part: "children", role: "group", hidden: !this.internalExpanded }, index.h("slot", { name: "children" }))) : null, index.h("span", { key: '7381d6e9e2a8f94695f29e73194b1603d79cefb9', class: "drop-indicator subtree-drop-indicator", part: "drop-indicator", "aria-hidden": "true" })));
     }
     static get watchers() { return {
         "expanded": [{

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');
 
 /**
@@ -64,13 +64,19 @@ 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;
     componentDidLoad() {
         this.hoverIntent = createHoverIntent(this.hoverExpandDelay, this.expandTarget);
         this.host.addEventListener('dragstart', this.onDragStart);
+        this.host.addEventListener('drag', this.onDrag);
         this.host.addEventListener('dragenter', this.onDragOver);
         this.host.addEventListener('dragover', this.onDragOver);
         this.host.addEventListener('dragleave', this.onDragLeave);
@@ -81,6 +87,7 @@ const UITree = class {
     disconnectedCallback() {
         this.hoverIntent?.destroy();
         this.host.removeEventListener('dragstart', this.onDragStart);
+        this.host.removeEventListener('drag', this.onDrag);
         this.host.removeEventListener('dragenter', this.onDragOver);
         this.host.removeEventListener('dragover', this.onDragOver);
         this.host.removeEventListener('dragleave', this.onDragLeave);
@@ -132,19 +139,42 @@ 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);
+        if (item.depth !== undefined)
+            return item.depth;
+        return Number(item.getAttribute('depth')) || 1;
+    }
+    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' };
+            }
         }
-        return sourceMeta.type === targetMeta.type;
+        else if (sourceMeta.type !== targetMeta.type) {
+            return { reason: 'incompatible' };
+        }
+        const maxDepth = Math.max(0, Math.floor(this.maxDepth));
+        if (maxDepth > 0 && source.subtreeDepth !== undefined) {
+            const targetDepth = Math.max(0, Math.floor(this.constraintDepth(target)));
+            const subtreeDepth = Math.max(0, Math.floor(source.subtreeDepth));
+            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');
@@ -152,10 +182,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'))
@@ -188,27 +224,36 @@ const UITree = class {
         }
         setElementDragImage(event.dataTransfer, row);
     };
-    onDragOver = (event) => {
+    updateTarget(target, clientY, dataTransfer) {
         if (!this.source)
-            return;
-        const target = this.itemFromEvent(event);
+            return false;
         if (!target || target === this.source) {
             this.clearTarget();
-            return;
+            this.clearRejection();
+            return false;
         }
         const row = this.rowFor(target);
         if (!row)
-            return;
-        const position = classifyDropPosition(row.getBoundingClientRect(), event.clientY, this.acceptsChildren(target));
-        if (!this.permitsDrop(this.source, target, position)) {
-            if (event.dataTransfer)
-                event.dataTransfer.dropEffect = 'none';
+            return false;
+        const position = classifyDropPosition(row.getBoundingClientRect(), clientY, this.acceptsChildren(target));
+        const rejection = this.dropRejection(this.source, target, position);
+        if (rejection) {
+            if (dataTransfer)
+                dataTransfer.dropEffect = 'none';
             this.clearTarget();
-            return;
+            if (rejection.reason === 'max-depth') {
+                this.rejectedTarget = target;
+                this.rejectedPosition = position;
+                this.rejection = rejection;
+            }
+            else {
+                this.clearRejection();
+            }
+            return false;
         }
-        event.preventDefault();
-        if (event.dataTransfer)
-            event.dataTransfer.dropEffect = 'move';
+        this.clearRejection();
+        if (dataTransfer)
+            dataTransfer.dropEffect = 'move';
         if (this.target !== target || this.position !== position) {
             this.clearTarget();
             this.target = target;
@@ -221,6 +266,26 @@ const UITree = class {
         else {
             this.hoverIntent?.cancel();
         }
+        return true;
+    }
+    onDrag = (event) => {
+        if (!this.source || (event.clientX === 0 && event.clientY === 0))
+            return;
+        const target = this.itemAtPoint(event.clientX, event.clientY);
+        // Native dragenter does not fire when a nested source moves onto an
+        // ancestor row: the pointer was already inside that ancestor's host. The
+        // source drag event still carries the live pointer coordinates, so use it
+        // to keep ancestor/outdent feedback current.
+        if (target)
+            this.updateTarget(target, event.clientY, event.dataTransfer);
+    };
+    onDragOver = (event) => {
+        if (!this.source)
+            return;
+        const target = this.itemFromEvent(event);
+        if (this.updateTarget(target, event.clientY, event.dataTransfer)) {
+            event.preventDefault();
+        }
     };
     onDragLeave = (event) => {
         if (this.isWithinTree(event.relatedTarget))
@@ -228,12 +293,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', {
@@ -247,6 +315,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;
@@ -256,14 +339,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);
+                    }
                 }
             }
         }
@@ -288,7 +380,7 @@ const UITree = class {
         next.focus();
     };
     render() {
-        return (index.h(index.Host, { key: 'b659635f6acdf09a3618c514f5bdd9bf173f9d98', role: "tree", "aria-label": this.label || 'Tree' }, index.h("slot", { key: '0815f0eb0bfe766dd2f358385af1516fd4328e2e' })));
+        return (index.h(index.Host, { key: '474c2154d2abe3c76eee9c36bf552390089df6e8', role: "tree", "aria-label": this.label || 'Tree' }, index.h("slot", { key: '93aedd02f984dd33b5efc811fef417d1199917bd' })));
     }
 };
 UITree.style = uiTreeCss();

package/dist/collection/collection-manifest.json

@@ -6,6 +6,7 @@
     "components/ui-badge/ui-badge.js",
     "components/ui-button/ui-button.js",
     "components/ui-checkbox/ui-checkbox.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-button/ui-button.css

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

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

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

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

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