@prolibu-suite/cobalt-core 0.4.0 → 0.5.0

package/dist/cjs/co-chip_2.cjs.entry.js

@@ -0,0 +1,485 @@
+'use strict';
+
+var index = require('./index-DxEFsH_t.js');
+var normalizeText = require('./normalizeText-B-v-XPKf.js');
+var overlayScroll = require('./overlayScroll-ifzDNeyb.js');
+require('./overlayscrollbars-BlBHo2Xx.js');
+
+const coChipCss = () => `:host{display:inline-flex;max-width:var(--co-chip-max-width, none)}.co-chip{display:inline-flex;align-items:center;justify-content:center;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;box-sizing:border-box;-webkit-font-smoothing:antialiased;max-width:100%;overflow:hidden;border:1px solid transparent;transition:background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;cursor:default;margin:0;padding:0}button.co-chip{cursor:pointer;outline:none}button.co-chip:focus-visible{box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-chip__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.co-chip__value{color:var(--co-chip-value-color, var(--co-color-gray-500, #888888))}.co-chip--filled{background:var(--co-chip-bg, var(--co-semantic-surface-muted));color:var(--co-chip-color, var(--co-semantic-text-default));border-color:var(--co-chip-border, transparent)}.co-chip--filled.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-color-opacity-negro-8, rgba(0, 0, 0, 0.08))}.co-chip--filled.co-chip--clickable:active:not(.co-chip--disabled){opacity:0.85}.co-chip--filled.co-chip--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary)}.co-chip--filled.co-chip--primary.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-semantic-surface-primary);opacity:0.85}.co-chip--filled.co-chip--success{background:var(--co-semantic-status-success);color:#fff}.co-chip--filled.co-chip--error{background:var(--co-semantic-status-error);color:#fff}.co-chip--filled.co-chip--warning{background:var(--co-color-status-review);color:#fff}.co-chip--filled.co-chip--info{background:var(--co-semantic-status-info);color:#fff}.co-chip--filled.co-chip--pending{background:var(--co-color-status-pending);color:#fff}.co-chip--filled.co-chip--progress{background:var(--co-color-status-progress);color:#fff}.co-chip--filled.co-chip--review{background:var(--co-color-status-review);color:#fff}.co-chip--filled.co-chip--submitted{background:var(--co-color-status-submitted);color:#fff}.co-chip--outlined{background:transparent;color:var(--co-semantic-text-default);border-color:var(--co-semantic-border-default)}.co-chip--outlined.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-semantic-surface-hover)}.co-chip--outlined.co-chip--clickable:active:not(.co-chip--disabled){background:var(--co-semantic-surface-muted)}.co-chip--outlined.co-chip--primary{color:var(--co-semantic-surface-primary);border-color:var(--co-semantic-surface-primary)}.co-chip--outlined.co-chip--success{color:var(--co-semantic-status-success);border-color:var(--co-semantic-status-success)}.co-chip--outlined.co-chip--error{color:var(--co-semantic-status-error);border-color:var(--co-semantic-status-error)}.co-chip--outlined.co-chip--warning{color:var(--co-color-status-review);border-color:var(--co-color-status-review)}.co-chip--outlined.co-chip--info{color:var(--co-semantic-status-info);border-color:var(--co-semantic-status-info)}.co-chip--filled.co-chip--selected{box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.3)}.co-chip--outlined.co-chip--selected{background:var(--co-semantic-surface-muted);border-width:2px}.co-chip--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}button.co-chip--disabled{pointer-events:auto;}.co-chip--large{font-size:var(--co-font-size-12)}.co-chip--large.co-chip--icon-none{padding:var(--co-spacing-sm) var(--co-spacing-sm2);gap:0}.co-chip--large.co-chip--icon-left{padding:var(--co-spacing-xs) var(--co-spacing-sm2) var(--co-spacing-xs) var(--co-spacing-sm);gap:var(--co-spacing-sm)}.co-chip--large.co-chip--icon-right{padding:var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-sm2);gap:var(--co-spacing-sm)}.co-chip--large.co-chip--icon-both{padding:var(--co-spacing-xs);gap:var(--co-spacing-sm)}.co-chip--small{font-size:var(--co-font-size-10)}.co-chip--small.co-chip--icon-none{padding:var(--co-spacing-xs) var(--co-spacing-sm);gap:0}.co-chip--small.co-chip--icon-left{padding:var(--co-spacing-xs) var(--co-spacing-sm) var(--co-spacing-xs) var(--co-spacing-xs);gap:var(--co-spacing-xs)}.co-chip--small.co-chip--icon-right{padding:var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-sm);gap:var(--co-spacing-xs)}.co-chip--small.co-chip--icon-both{padding:var(--co-spacing-xs);gap:var(--co-spacing-xs)}.co-chip--rounded{border-radius:var(--co-border-radius-full)}.co-chip--square{border-radius:var(--co-spacing-sm)}.co-chip__icon-left,.co-chip__icon-right,.co-chip__dot,.co-chip__trailing{display:inline-flex;flex-shrink:0;align-items:center}.co-chip__trailing{color:var(--co-chip-trailing-color, currentColor)}.co-chip--large .co-chip__icon-left,.co-chip--large .co-chip__icon-right,.co-chip--large .co-chip__dot{width:16px;height:16px}.co-chip--small .co-chip__icon-left,.co-chip--small .co-chip__icon-right,.co-chip--small .co-chip__dot{width:10px;height:10px}.co-chip__remove{display:inline-flex;flex-shrink:0;align-items:center;cursor:pointer;opacity:1;transition:opacity 0.1s ease;border:none;background:transparent;padding:0;color:inherit}.co-chip__remove:hover{opacity:0.7}.co-chip--large .co-chip__remove{width:16px;height:16px}.co-chip--small .co-chip__remove{width:10px;height:10px}::slotted(*){display:inline-flex;width:100%;height:100%}.co-chip.co-chip--filter{height:34px;padding:0 12px;gap:7px;font-size:13.5px;border-radius:var(--co-border-radius-full);background:var(--co-color-base-blanco, #fff);color:var(--co-color-base-negro, #1f1c1b);border-color:transparent;box-shadow:inset 0 0 0 1px var(--co-color-opacity-negro-16, rgba(0, 0, 0, 0.16))}.co-chip--filter .co-chip__icon-left{color:var(--co-color-gray-500, #888888)}.co-chip--filter .co-chip__trailing{color:var(--co-color-gray-400, #a0a0a0)}.co-chip--filter.co-chip--clickable:hover:not(.co-chip--disabled){box-shadow:inset 0 0 0 1px var(--co-color-opacity-negro-25, rgba(0, 0, 0, 0.25))}.co-chip--filter.co-chip--clickable:active:not(.co-chip--disabled){background:var(--co-color-gray-100, #f6f6f6)}.co-chip--filter.co-chip--selected{background:var(--co-color-gray-100, #f6f6f6)}`;
+
+const CoChip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coRemove = index.createEvent(this, "coRemove", 7);
+        this.coClick = index.createEvent(this, "coClick", 7);
+        /** Shape: pill or straight corners */
+        this.shape = 'rounded';
+        /** Size: large (12px text), small (10px text) */
+        this.size = 'large';
+        /**
+         * Icon mode (for slot-based icons):
+         * - none    = no icon slots
+         * - left    = icon before label (Figma "1nd Icon")
+         * - both    = icon before + icon after (Figma "2nd Icon")
+         */
+        this.iconMode = 'none';
+        /** Visual variant.
+         *  - filled/outlined = existing tag/chip looks (unchanged defaults).
+         *  - filter = Cloud Drive filter-trigger pill (white pill, inset hairline
+         *    ring, tinted leading icon, two-tone value, trailing caret). */
+        this.variant = 'filled';
+        /** Semantic color */
+        this.color = 'default';
+        /** Icon weight applied to prop-based iconLeft / iconRight / trailingIcon. */
+        this.iconWeight = 'regular';
+        /** Show dismiss/remove button and emit coRemove on click. Reflected so it
+         *  survives lazy hydration when set via a framework wrapper. */
+        this.removable = false;
+        /** Show a leading colour dot (status/value colour). Reflected for hydration. */
+        this.dot = false;
+        /** Make the chip clickable (emits coClick) */
+        this.clickable = false;
+        /** Disabled state */
+        this.disabled = false;
+        /** Selected / active state */
+        this.selected = false;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            if (this.clickable)
+                this.coClick.emit();
+        };
+        this.handleRemove = (e) => {
+            e.stopPropagation();
+            if (this.disabled)
+                return;
+            this.coRemove.emit();
+        };
+    }
+    render() {
+        const hasLeftSlot = this.iconMode === 'left' || this.iconMode === 'both';
+        const hasRightSlot = this.iconMode === 'both' && !this.removable;
+        const iconSize = this.size === 'large' ? 16 : 10;
+        const removeIconSize = this.size === 'large' ? 16 : 10;
+        // Filter-variant trailing caret is a fixed 13px; otherwise match icon size.
+        const trailingIconSize = this.variant === 'filter' ? 13 : iconSize;
+        // Determine effective icon mode for CSS padding (the dot counts as a left icon).
+        const hasAnyLeft = hasLeftSlot || !!this.iconLeft || this.dot;
+        const hasAnyRight = hasRightSlot || !!this.iconRight || this.removable || !!this.trailingIcon;
+        let effectiveIconMode;
+        if (hasAnyLeft && hasAnyRight)
+            effectiveIconMode = 'both';
+        else if (hasAnyLeft)
+            effectiveIconMode = 'left';
+        else if (hasAnyRight)
+            effectiveIconMode = 'right';
+        else
+            effectiveIconMode = 'none';
+        const Tag = this.clickable ? 'button' : 'div';
+        return (index.h(Tag, { key: '3210b69426aa37cc7e1f9cc7d7a9add9fd0dd93b', class: {
+                'co-chip': true,
+                [`co-chip--${this.shape}`]: true,
+                [`co-chip--${this.size}`]: true,
+                [`co-chip--icon-${effectiveIconMode}`]: true,
+                [`co-chip--${this.variant}`]: true,
+                [`co-chip--${this.color}`]: this.color !== 'default',
+                'co-chip--clickable': this.clickable,
+                'co-chip--disabled': this.disabled,
+                'co-chip--selected': this.selected,
+            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (index.h("span", { key: '105306abb8267ebec6a4241b85be844ce9e0fe9e', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, index.h("co-icon", { key: 'a6e6bbf79ec321916bae16fea448b63f22109bd0', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (index.h("span", { key: '6ddd3f25eca0380831c10fce157aa042d5195da5', class: "co-chip__icon-left", part: "icon-left" }, index.h("co-icon", { key: 'd331947abb472bede535a794dfae052a021d06b1', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (index.h("span", { key: 'ddf803655d633a17901ecab726739ad69ae03d5c', class: "co-chip__icon-left", part: "icon-left" }, index.h("slot", { key: '4602a3f28aa74f31bd7a5124b9ef1a1337f4d960', name: "icon-left" }))), index.h("span", { key: 'aebc08bb058e32d13ef3c962e1cf23cfdbc3baf5', class: "co-chip__label" }, index.h("slot", { key: 'be0e8625634f0b4a9da70944e32bb7d2c80c3a00' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (index.h("span", { key: '11634b783e3a482fe161781658fd22d0ec015265', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (index.h("span", { key: '49837e189f540874558c337bce19a983a5bd77f2', class: "co-chip__icon-right", part: "icon-right" }, index.h("co-icon", { key: '6510c33b909da03ef0e6ee59fb52b5c12a5faa86', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (index.h("span", { key: '9c6e6ccea304803daaecf447a5651d5e8a67cc07', class: "co-chip__icon-right", part: "icon-right" }, index.h("slot", { key: '3bdd7c888bba838894b88a41039df45af8f7547c', name: "icon-right" }))), this.removable && (index.h("span", { key: 'a4d45167d0c3fc237692371a131af5a76840a89a', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, index.h("co-icon", { key: 'ce146e623ce90a936c54a8bfad349b7ea04691fa', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (index.h("span", { key: 'fe01795e08be25909f530d6da4f57cb38b6f8a8e', class: "co-chip__trailing", part: "trailing" }, index.h("co-icon", { key: '2d8c0bba14a8fa9128c9f9673d9d295f191f1e5c', name: this.trailingIcon, size: trailingIconSize, weight: this.iconWeight })))));
+    }
+};
+CoChip.style = coChipCss();
+
+// optionListLogic.ts — lógica pura de co-option-list (patrón commandSearchLogic).
+function parseItems(raw) {
+    let parsed = raw;
+    if (typeof raw === 'string') {
+        try {
+            parsed = JSON.parse(raw);
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    return Array.isArray(parsed) ? parsed : [];
+}
+function parseValue(raw) {
+    if (!raw)
+        return [];
+    try {
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed : [raw];
+    }
+    catch (_a) {
+        return [raw];
+    }
+}
+/**
+ * Selected-first contra el snapshot tomado al abrir (patrón co-ref-field):
+ * idle → bloque seleccionado en orden de snapshot (sintetizando desde
+ * snapshotDisplay los que la página actual no contiene) + resto en orden de
+ * server; buscando → solo resultados reales, seleccionados primero.
+ *
+ * Invariante: todo id en `snapshotIds` DEBE tener una entrada correspondiente
+ * en `snapshotDisplay` (armado por el caller desde selectedItems ∪ items al
+ * tomar el snapshot). Un id sin display-item asociado se cae silenciosamente
+ * de la lista en modo idle (el `byId.get(d._id) ?? d` sintetiza desde el
+ * display-item mismo, pero no hay nada que sintetizar si el id nunca entró a
+ * snapshotDisplay en primer lugar).
+ */
+function orderItems(items, snapshotIds, snapshotDisplay, searching) {
+    var _a;
+    if (snapshotIds.size === 0)
+        return items;
+    const byId = new Map(items.map((i) => [i._id, i]));
+    const selectedBlock = [];
+    if (!searching) {
+        for (const d of snapshotDisplay)
+            selectedBlock.push((_a = byId.get(d._id)) !== null && _a !== void 0 ? _a : d);
+    }
+    else {
+        for (const i of items)
+            if (snapshotIds.has(i._id))
+                selectedBlock.push(i);
+    }
+    const rest = items.filter((i) => !snapshotIds.has(i._id));
+    return [...selectedBlock, ...rest];
+}
+/** Aplana a filas de render insertando un header cuando `group` cambia
+ *  (groupItems de co-command-search). `index` cuenta solo items. */
+function buildRows(items) {
+    const rows = [];
+    let lastGroup;
+    let index = 0;
+    for (const it of items) {
+        if (it.group && it.group !== lastGroup)
+            rows.push({ kind: 'header', label: it.group });
+        lastGroup = it.group;
+        rows.push({ kind: 'item', item: it, index });
+        index++;
+    }
+    return rows;
+}
+/** Siguiente highlight: wrap, salta disabled. -1 = sin items navegables. */
+function nextActiveIndex(current, delta, items) {
+    const positions = [];
+    items.forEach((it, idx) => {
+        if (!it.disabled)
+            positions.push(idx);
+    });
+    if (positions.length === 0)
+        return -1;
+    const at = positions.indexOf(current);
+    if (at === -1)
+        return delta === 1 ? positions[0] : positions[positions.length - 1];
+    return positions[(at + delta + positions.length) % positions.length];
+}
+/** `total > 0` tiene precedencia (deriva remaining); si no, vale `hasMoreProp`. */
+function deriveMore(count, total, hasMoreProp) {
+    if (total > 0)
+        return { hasMore: count < total, remaining: Math.max(0, total - count) };
+    return { hasMore: hasMoreProp, remaining: 0 };
+}
+// Misma matemática que la virtualización de co-autocomplete / co-combobox.
+const VIRTUAL_ITEM_HEIGHT = 34;
+const VIRTUAL_VIEWPORT_ITEMS = 8;
+const VIRTUAL_OVERSCAN = 3;
+function virtualSlice(scrollTop, count) {
+    const totalHeight = count * VIRTUAL_ITEM_HEIGHT;
+    const startIdx = Math.max(0, Math.floor(scrollTop / VIRTUAL_ITEM_HEIGHT) - VIRTUAL_OVERSCAN);
+    const endIdx = Math.min(count, startIdx + VIRTUAL_VIEWPORT_ITEMS + VIRTUAL_OVERSCAN * 2);
+    return { totalHeight, startIdx, endIdx, offsetY: startIdx * VIRTUAL_ITEM_HEIGHT };
+}
+
+const coOptionListCss = () => `.os-size-observer,.os-size-observer-listener{scroll-behavior:auto !important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(0.1)}.os-size-observer::before{content:"";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(calc(1 / 0.1))}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty::before{content:"";width:100%;height:100%}.os-size-observer-listener:empty::before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{from{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0px;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}html[data-overlayscrollbars-body]{overflow:hidden}html[data-overlayscrollbars-body],html[data-overlayscrollbars-body]>body{width:100%;height:100%;margin:0}html[data-overlayscrollbars-body]>body{overflow:visible;margin:0}[data-overlayscrollbars]{position:relative}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;align-items:stretch !important;flex-direction:row !important;flex-wrap:nowrap !important;scroll-behavior:auto !important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){box-sizing:inherit;position:relative;flex:auto;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){--os-vaw:0;--os-vah:0;outline:none}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus{outline:none}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before{content:"";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{overflow:hidden !important}[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],[data-overlayscrollbars-padding~=noClipping]{overflow:visible !important}[data-overlayscrollbars-viewport]{--os-viewport-overflow-x:hidden;--os-viewport-overflow-y:hidden;overflow-x:var(--os-viewport-overflow-x);overflow-y:var(--os-viewport-overflow-y)}[data-overlayscrollbars-viewport~=overflowXVisible]{--os-viewport-overflow-x:visible}[data-overlayscrollbars-viewport~=overflowXHidden]{--os-viewport-overflow-x:hidden}[data-overlayscrollbars-viewport~=overflowXScroll]{--os-viewport-overflow-x:scroll}[data-overlayscrollbars-viewport~=overflowYVisible]{--os-viewport-overflow-y:visible}[data-overlayscrollbars-viewport~=overflowYHidden]{--os-viewport-overflow-y:hidden}[data-overlayscrollbars-viewport~=overflowYScroll]{--os-viewport-overflow-y:scroll}[data-overlayscrollbars-viewport~=overflowImportant]{overflow-x:var(--os-viewport-overflow-x) !important;overflow-y:var(--os-viewport-overflow-y) !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId){font-size:0 !important;line-height:0 !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::before,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::after,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)>*:not(#osFakeId){display:none !important;position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}[data-overlayscrollbars-viewport~=measuring],[data-overlayscrollbars-viewport~=scrolling]{scroll-behavior:auto !important;scroll-snap-type:none !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible]{overflow-x:hidden !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible]{overflow-y:hidden !important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{height:auto !important;width:auto !important}@property --os-scroll-percent{syntax:"<number>";inherits:true;initial-value:0}@property --os-viewport-percent{syntax:"<number>";inherits:true;initial-value:0}.os-scrollbar{--os-viewport-percent:0;--os-scroll-percent:0;--os-scroll-direction:0;--os-scroll-percent-directional:calc(     var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) *       var(--os-scroll-direction)   )}.os-scrollbar{contain:size layout;contain:size layout style;transition:opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none !important}.os-scrollbar-track{position:relative;padding:0 !important;border:none !important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none !important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0 !important;transition:none !important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0;left:calc(var(--os-scroll-percent-directional) * 100%);transform:translateX(calc(var(--os-scroll-percent-directional) * -100%));width:calc(var(--os-viewport-percent) * 100%)}.os-scrollbar-vertical .os-scrollbar-handle{right:0;top:calc(var(--os-scroll-percent-directional) * 100%);transform:translateY(calc(var(--os-scroll-percent-directional) * -100%));height:calc(var(--os-viewport-percent) * 100%)}@supports (container-type: size){.os-scrollbar-track{container-type:size}.os-scrollbar-horizontal .os-scrollbar-handle{left:auto;transform:translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-vertical .os-scrollbar-handle{top:auto;transform:translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle{right:auto;left:0}}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}@media print{.os-scrollbar{display:none}}.os-scrollbar{--os-size:0;--os-padding-perpendicular:0;--os-padding-axis:0;--os-track-border-radius:0;--os-track-bg:none;--os-track-bg-hover:none;--os-track-bg-active:none;--os-track-border:none;--os-track-border-hover:none;--os-track-border-active:none;--os-handle-border-radius:0;--os-handle-bg:none;--os-handle-bg-hover:none;--os-handle-bg-active:none;--os-handle-border:none;--os-handle-border-hover:none;--os-handle-border-active:none;--os-handle-min-size:33px;--os-handle-max-size:none;--os-handle-perpendicular-size:100%;--os-handle-perpendicular-size-hover:100%;--os-handle-perpendicular-size-active:100%;--os-handle-interactive-area-offset:0}.os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s}.os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-track:before,.os-scrollbar-handle:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-track:before{top:calc(var(--os-padding-perpendicular) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-track:before{left:calc(var(--os-padding-perpendicular) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}[data-overlayscrollbars-viewport~=measuring]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none !important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-border-radius:10px;--os-handle-interactive-area-offset:4px;--os-handle-border-radius:10px}.os-theme-dark{--os-handle-bg:rgba(0, 0, 0, 0.44);--os-handle-bg-hover:rgba(0, 0, 0, 0.55);--os-handle-bg-active:rgba(0, 0, 0, 0.66)}.os-theme-light{--os-handle-bg:rgba(255, 255, 255, 0.44);--os-handle-bg-hover:rgba(255, 255, 255, 0.55);--os-handle-bg-active:rgba(255, 255, 255, 0.66)}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),[data-overlayscrollbars-viewport~=scrollbarHidden],html[data-overlayscrollbars-viewport~=scrollbarHidden]>body{scrollbar-width:none !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar,[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar-corner{-webkit-appearance:none !important;appearance:none !important;display:none !important;width:0 !important;height:0 !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}:host{display:block;font-family:var(--co-font-family-primary, 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)}.co-option-list{display:flex;flex-direction:column;min-width:0}.co-option-list__search{display:flex;align-items:center;gap:var(--co-spacing-sm, 6px);height:32px;box-sizing:border-box;margin:var(--co-spacing-md, 12px) var(--co-spacing-md, 12px) 0;padding:0 var(--co-spacing-sm2, 8px) 0 var(--co-spacing-xs, 4px);border:1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));border-radius:var(--co-border-radius-xs, 8px);color:var(--co-semantic-text-muted, #888888)}.co-option-list__search:focus-within{border-color:var(--co-semantic-border-focus, rgba(31, 28, 27, 0.25))}.co-option-list__search co-icon{flex-shrink:0;width:24px;display:flex;align-items:center;justify-content:center;opacity:0.7}.co-option-list__search-input{flex:1;min-width:0;border:0;outline:none;background:transparent;padding:0;font-family:var(--co-font-family-primary, 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);font-size:var(--co-font-size-12, 12px);font-weight:500;letter-spacing:var(--co-font-letter-spacing-body, -0.03em);line-height:1;color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__search-input::placeholder{color:var(--co-semantic-text-muted, #888888)}.co-option-list__options{max-height:280px;overflow-y:auto;overflow-x:hidden;padding:var(--co-spacing-md, 12px)}.co-option-list__inner{display:flex;flex-direction:column;gap:var(--co-spacing-xxs, 2px);min-width:0}.os-scrollbar.os-theme-co{--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-bg:transparent;--os-handle-border-radius:var(--co-border-radius-full, 9999px);--os-handle-bg:var(--co-color-opacity-negro-16, rgba(31, 28, 27, 0.16));--os-handle-bg-hover:var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));--os-handle-bg-active:var(--co-color-opacity-negro-50, rgba(31, 28, 27, 0.5));--os-handle-min-size:24px}.co-option-list__option{display:flex;align-items:center;gap:var(--co-spacing-sm2, 8px);min-width:0;min-height:32px;box-sizing:border-box;padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm2, 8px) var(--co-spacing-xs, 4px) var(--co-spacing-xs, 4px);border-radius:var(--co-border-radius-xs, 8px);cursor:pointer;font-size:var(--co-font-size-12, 12px);letter-spacing:var(--co-font-letter-spacing-body, -0.03em);color:var(--co-semantic-text-default, #1f1c1b);transition:background 0.1s ease}.co-option-list__spacer .co-option-list__option{height:32px;margin-bottom:var(--co-spacing-xxs, 2px)}.co-option-list__option--active{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-option-list__option--selected{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-option-list__option--disabled{opacity:0.5;cursor:not-allowed}.co-option-list__avatar,.co-option-list__icon{flex-shrink:0}.co-option-list__icon{margin:0 var(--co-spacing-xs, 4px)}.co-option-list__dot{flex-shrink:0;width:10px;height:10px;margin:0 7px;border-radius:var(--co-border-radius-full, 9999px)}.co-option-list__text{display:flex;flex-direction:column;gap:var(--co-spacing-xxs, 2px);flex:1;min-width:0}.co-option-list__title{display:flex;align-items:center;gap:var(--co-spacing-xs, 4px);min-width:0}.co-option-list__label{font-weight:400;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-option-list__suffix{color:var(--co-semantic-text-secondary, #585858);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1}.co-option-list__badge{flex-shrink:0;padding:0 var(--co-spacing-xs, 4px);border-radius:var(--co-border-radius-full, 9999px);background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04));color:var(--co-semantic-text-default, #1f1c1b);font-size:var(--co-font-size-10, 10px);font-weight:600;line-height:16px}.co-option-list__desc{font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-muted, #888888);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-option-list__match{color:var(--co-color-primary-azul, #2563eb);font-weight:700}.co-option-list__check{flex-shrink:0;color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__row-action{flex-shrink:0;display:inline-flex;align-items:center;border:0;background:transparent;padding:0;cursor:pointer;color:var(--co-semantic-text-muted, #888888);transition:color 0.15s ease}.co-option-list__row-action:hover{color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__group{padding:var(--co-spacing-sm2, 8px) var(--co-spacing-xs, 4px) var(--co-spacing-xs, 4px);font-family:var(--co-font-family-mono, 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace);font-size:var(--co-font-size-10, 10px);font-weight:400;text-transform:uppercase;letter-spacing:var(--co-font-letter-spacing-overline, 0.08em);line-height:1.1;color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__clear-row{display:flex;align-items:center;gap:var(--co-spacing-sm2, 8px);width:100%;min-height:32px;box-sizing:border-box;border:0;background:transparent;padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm2, 8px);border-radius:var(--co-border-radius-xs, 8px);cursor:pointer;text-align:left;font-family:var(--co-font-family-primary, 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);font-size:var(--co-font-size-12, 12px);letter-spacing:var(--co-font-letter-spacing-body, -0.03em);color:var(--co-semantic-text-secondary, #585858)}.co-option-list__clear-row:hover{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-option-list__loading,.co-option-list__loading-more{display:flex;justify-content:center;padding:var(--co-spacing-sm, 6px)}.co-option-list__empty{display:flex;align-items:center;gap:var(--co-spacing-sm2, 8px);padding:var(--co-spacing-md, 12px) var(--co-spacing-xs, 4px);font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-muted, #888888)}.co-option-list__more{padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm, 6px);font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-muted, #888888);text-align:center}.co-option-list__option:focus-visible,.co-option-list__clear-row:focus-visible{outline:2px solid var(--co-semantic-border-focus, rgba(31, 28, 27, 0.25));outline-offset:-2px}`;
+
+const CoOptionList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coSearch = index.createEvent(this, "coSearch", 3);
+        this.coChange = index.createEvent(this, "coChange", 3);
+        this.coLoadMore = index.createEvent(this, "coLoadMore", 3);
+        this.coClearSelection = index.createEvent(this, "coClearSelection", 3);
+        this.coRemoveItem = index.createEvent(this, "coRemoveItem", 3);
+        // ── Data (controlada) ──────────────────────────────────────
+        /** JSON string o array de OptionListItem. */
+        this.items = '[]';
+        /** Selección actual: id single o JSON array de ids. */
+        this.value = '';
+        /** Display-items de la selección (para selected-first con ids fuera de página). */
+        this.selectedItems = '[]';
+        this.multiple = false;
+        /** Partición selected-first (snapshot al llamar snapshotOrder()). */
+        this.selectedFirst = false;
+        /** Afford. del seleccionado: check (combobox/autocomplete) o X deselect (ref-field). */
+        this.selectedAffordance = 'check';
+        /** Botón remove por fila seleccionada en multiple (tags de combobox). */
+        this.removableItems = false;
+        // ── Search integrado (opcional) ────────────────────────────
+        this.searchable = false;
+        this.searchPlaceholder = 'Search…';
+        this.searchDebounce = 350;
+        /** Pre-seed del término (modo convert de las celdas). */
+        this.initialTerm = '';
+        // ── Estados ────────────────────────────────────────────────
+        this.loading = false;
+        /** Total del server: deriva hasMore + hint "N more results". */
+        this.total = 0;
+        /** Fallback cuando el host no conoce totales (⌘K). total>0 manda. */
+        this.hasMore = false;
+        this.emptyMessage = 'No results found';
+        /** Si se setea y hay selección, fila "quitar selección" al tope. */
+        this.clearOptionLabel = '';
+        // ── Presentación ───────────────────────────────────────────
+        /** Lista virtualizada (autocomplete/combobox). Ignora `group`. */
+        this.virtual = false;
+        /** Resalta el match del término en los labels. */
+        this.highlightMatches = false;
+        /** Término externo para highlight (input en el host, p.ej. ⌘K). */
+        this.highlightTerm = '';
+        this.avatarShape = 'circle';
+        // ── Navegación ─────────────────────────────────────────────
+        /** Auto-resalta la primera fila navegable al montar y en cada cambio de
+         *  items (paridad command-palette: tipear + Enter = primer resultado).
+         *  Salta filas disabled vía nextActiveIndex. */
+        this.autoHighlight = false;
+        this.term = '';
+        this.activeIndex = -1;
+        this.scrollTop = 0;
+        /** Snapshot selected-first (ver snapshotOrder). */
+        this.sortSnapshot = new Set();
+        this.displaySnapshot = [];
+        /**
+         * Enter sobre un control real (footer, fila clear) activa ese control
+         * nativamente — nunca el highlight (regla heredada de CellRefPicker).
+         */
+        this.onRootKeyDown = (e) => {
+            var _a, _b;
+            if (e.key === 'Enter') {
+                const origin = (((_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)[0]) || e.target);
+                // `instanceof HTMLElement`, NO `Element`: el decorador `@Element` importado
+                // de `@stencil/core` arriba shadowea el nombre global `Element` en este
+                // módulo, así que `origin instanceof Element` referenciaría el decorador
+                // (siempre false / rompe el narrowing de TS) en vez del DOM Element.
+                if (origin instanceof HTMLElement && ((_b = origin.closest) === null || _b === void 0 ? void 0 : _b.call(origin, 'button:not(.co-option-list__option), co-list-footer')))
+                    return;
+            }
+            if (this.processKey(e.key))
+                e.preventDefault();
+        };
+        this.onSearchInput = (e) => {
+            const v = e.target.value;
+            this.term = v;
+            this.activeIndex = -1;
+            if (this.debounceTimer)
+                clearTimeout(this.debounceTimer);
+            this.debounceTimer = setTimeout(() => this.coSearch.emit(v), this.searchDebounce);
+        };
+        this.onNativeScroll = (e) => {
+            // Fallback pre-OverlayScrollbars (primer frame) — misma lógica.
+            const el = e.target;
+            this.scrollTop = el.scrollTop;
+            this.maybeLoadMore(el.scrollTop, el.clientHeight, el.scrollHeight);
+        };
+    }
+    // ── Parsed ─────────────────────────────────────────────────
+    get parsedItems() { return parseItems(this.items); }
+    get selectedIds() { return parseValue(this.value); }
+    get orderedItems() {
+        if (!this.selectedFirst)
+            return this.parsedItems;
+        return orderItems(this.parsedItems, this.sortSnapshot, this.displaySnapshot, !!this.term);
+    }
+    get effectiveHighlightTerm() {
+        if (!this.highlightMatches)
+            return '';
+        return this.searchable ? this.term : this.highlightTerm;
+    }
+    // ── Lifecycle ──────────────────────────────────────────────
+    componentWillLoad() {
+        this.term = this.initialTerm || '';
+        this.takeSnapshot();
+        if (this.autoHighlight)
+            this.activeIndex = nextActiveIndex(-1, 1, this.orderedItems);
+    }
+    componentDidRender() {
+        // OverlayScrollbars sobre el contenedor; wrapper interno estable para que
+        // Stencil pueda seguir agregando filas (infinite scroll) sin pelear con
+        // la reestructuración de DOM de OS (patrón co-ref-field).
+        if (this.optionsEl && !this.osInstance) {
+            this.osInstance = overlayScroll.initOverlayScroll(this.optionsEl, (vp) => {
+                this.scrollTop = vp.scrollTop;
+                this.maybeLoadMore(vp.scrollTop, vp.clientHeight, vp.scrollHeight);
+            });
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.debounceTimer)
+            clearTimeout(this.debounceTimer);
+        (_a = this.osInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.osInstance = undefined;
+    }
+    onItemsChange() {
+        // Nueva página / nuevos resultados: si autoHighlight, re-resalta la primera fila
+        // navegable (paridad command-palette); si no, solo resetea cuando el highlight
+        // quedó fuera de rango.
+        if (this.autoHighlight) {
+            this.activeIndex = nextActiveIndex(-1, 1, this.orderedItems);
+        }
+        else if (this.activeIndex >= this.orderedItems.length) {
+            this.activeIndex = -1;
+        }
+        // Clamp defensivo del scroll virtual: si la nueva lista es más corta que el
+        // scrollTop actual (p.ej. búsqueda que redujo drásticamente el resultset),
+        // reencuadra dentro de rango. NO resetear a 0 incondicionalmente — eso
+        // rompería el infinite scroll por append (la lista crece hacia abajo y el
+        // usuario sigue viendo su posición de scroll).
+        const maxScrollTop = Math.max(0, this.orderedItems.length * VIRTUAL_ITEM_HEIGHT - VIRTUAL_VIEWPORT_ITEMS * VIRTUAL_ITEM_HEIGHT);
+        if (this.scrollTop > this.orderedItems.length * VIRTUAL_ITEM_HEIGHT) {
+            this.scrollTop = maxScrollTop;
+        }
+    }
+    // ── Métodos públicos ───────────────────────────────────────
+    /** Re-toma el snapshot selected-first. El host la llama al abrir su panel. */
+    async snapshotOrder() {
+        this.takeSnapshot();
+    }
+    /**
+     * Enfoca el input de búsqueda esperando visibilidad real: el panel del host
+     * se vuelve visible frames después (showPopover/position en rAF) y focus()
+     * sobre subtree oculto es no-op silencioso. Reintenta ~20 frames.
+     */
+    async focusSearch() {
+        var _a, _b;
+        for (let i = 0; i < 20; i++) {
+            (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
+            if (this.searchInputEl && ((_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement) === this.searchInputEl)
+                return;
+            await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+        }
+    }
+    /** Navegación para hosts con input externo. true = tecla consumida (host hace preventDefault). */
+    async handleKey(e) {
+        return this.processKey(e.key);
+    }
+    // ── Internos ───────────────────────────────────────────────
+    takeSnapshot() {
+        this.sortSnapshot = new Set(this.selectedIds);
+        const byId = new Map();
+        for (const it of parseItems(this.selectedItems))
+            byId.set(it._id, it);
+        for (const it of this.parsedItems)
+            if (!byId.has(it._id))
+                byId.set(it._id, it);
+        this.displaySnapshot = this.selectedIds
+            .map((id) => byId.get(id))
+            .filter(Boolean);
+    }
+    processKey(key) {
+        const items = this.orderedItems;
+        switch (key) {
+            case 'ArrowDown':
+                this.activeIndex = nextActiveIndex(this.activeIndex, 1, items);
+                this.scrollActiveIntoView();
+                return true;
+            case 'ArrowUp':
+                this.activeIndex = nextActiveIndex(this.activeIndex, -1, items);
+                this.scrollActiveIntoView();
+                return true;
+            case 'Enter': {
+                // Enter con un fetch in-flight pickearía de la lista STALE (race
+                // detectada en smoke: el usuario teclea y confirma antes de que
+                // lleguen los resultados). Se consume sin actuar; el siguiente
+                // Enter opera sobre la lista fresca.
+                if (this.loading)
+                    return true;
+                const item = items[this.activeIndex];
+                if (item && !item.disabled) {
+                    this.pick(item);
+                    return true;
+                }
+                return false;
+            }
+            default:
+                return false;
+        }
+    }
+    pick(item) {
+        if (this.multiple) {
+            const current = this.selectedIds;
+            const idx = current.indexOf(item._id);
+            const next = idx >= 0 ? current.filter((id) => id !== item._id) : [...current, item._id];
+            this.coChange.emit({ value: next, item });
+        }
+        else {
+            this.coChange.emit({ value: item._id, item });
+        }
+    }
+    maybeLoadMore(scrollTop, clientHeight, scrollHeight) {
+        if (this.loading)
+            return;
+        const { hasMore } = deriveMore(this.parsedItems.length, this.total, this.hasMore);
+        if (hasMore && scrollTop + clientHeight >= scrollHeight - 40)
+            this.coLoadMore.emit();
+    }
+    scrollActiveIntoView() {
+        requestAnimationFrame(() => {
+            var _a, _b;
+            (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(`co-optlist-${this.activeIndex}`)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    // ── Render helpers ─────────────────────────────────────────
+    renderLeading(item) {
+        if (item.image || item.avatar) {
+            return (index.h("co-avatar", { class: "co-option-list__avatar", type: item.image ? 'image' : 'text', src: item.image, text: item.avatar, color: item.color, size: "xxs", shape: this.avatarShape }));
+        }
+        if (item.color)
+            return index.h("span", { class: "co-option-list__dot", style: { backgroundColor: item.color } });
+        if (item.icon)
+            return index.h("co-icon", { name: item.icon, size: 16, class: "co-option-list__icon" });
+        return null;
+    }
+    renderLabelText(label) {
+        const term = this.effectiveHighlightTerm;
+        const seg = term ? normalizeText.highlightMatch(label, term) : null;
+        if (!seg)
+            return label;
+        return [seg.pre, index.h("span", { class: "co-option-list__match" }, seg.match), seg.post];
+    }
+    renderRow(item, index$1, selectedIds) {
+        const isSelected = selectedIds.includes(item._id);
+        return (index.h("div", { class: {
+                'co-option-list__option': true,
+                'co-option-list__option--selected': isSelected,
+                'co-option-list__option--active': index$1 === this.activeIndex,
+                'co-option-list__option--disabled': !!item.disabled,
+            }, key: item._id, id: `co-optlist-${index$1}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', onClick: () => !item.disabled && this.pick(item), onMouseEnter: () => { this.activeIndex = index$1; } }, this.renderLeading(item), index.h("div", { class: "co-option-list__text" }, index.h("span", { class: "co-option-list__title" }, index.h("span", { class: "co-option-list__label", style: item.labelColor ? { color: item.labelColor, fontWeight: '600' } : undefined }, this.renderLabelText(item.label)), item.suffix && index.h("span", { class: "co-option-list__suffix" }, "- ", item.suffix), item.badge && (index.h("span", { class: "co-option-list__badge", style: item.badge.color ? { backgroundColor: item.badge.color, color: 'var(--co-color-base-blanco, #fff)' } : undefined }, item.badge.label))), item.description && index.h("span", { class: "co-option-list__desc" }, item.description)), isSelected && this.removableItems && this.multiple && (index.h("button", { class: "co-option-list__row-action", type: "button", tabIndex: -1, "aria-label": `Remove ${item.label}`, onClick: (e) => { e.stopPropagation(); this.coRemoveItem.emit(item._id); } }, index.h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.removableItems && this.selectedAffordance === 'deselect' && (index.h("button", { class: "co-option-list__row-action", type: "button", tabIndex: -1, "aria-label": `Deselect ${item.label}`, onClick: (e) => { e.stopPropagation(); this.pick(item); } }, index.h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.removableItems && this.selectedAffordance === 'check' && (index.h("co-icon", { name: "check", size: 16, class: "co-option-list__check" }))));
+    }
+    renderVirtual(items, selectedIds) {
+        const { totalHeight, startIdx, endIdx, offsetY } = virtualSlice(this.scrollTop, items.length);
+        return (index.h("div", { class: "co-option-list__spacer", style: { height: `${totalHeight}px`, position: 'relative' } }, index.h("div", { style: { position: 'absolute', top: `${offsetY}px`, left: '0', right: '0' } }, items.slice(startIdx, endIdx).map((item, i) => this.renderRow(item, startIdx + i, selectedIds)))));
+    }
+    render() {
+        const items = this.orderedItems;
+        const selectedIds = this.selectedIds;
+        const { hasMore, remaining } = deriveMore(this.parsedItems.length, this.total, this.hasMore);
+        const showClear = !!this.clearOptionLabel && selectedIds.length > 0;
+        return (index.h("div", { key: 'f6262519bd90bb9a419daeb9a1386147396a79ff', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (index.h("div", { key: '081a2cfee9a8a903c6bd2a2f0bd06cbac635c021', class: "co-option-list__search", part: "search" }, index.h("co-icon", { key: 'a001c71f5de00288907cde1e123f8d393e052a9e', name: "magnifying-glass", size: 16 }), index.h("input", { key: '355520b7d77077e02666fcd5012f36c648eaeacf', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), index.h("div", { key: '833708f614d3f561ba45bf1656f4bcfa6701b8ce', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, index.h("div", { key: '10da99a56133af0748f43c20af62e03e975aebcd', class: "co-option-list__inner" }, showClear && (index.h("button", { key: '208bc13eb8e89c88657022fbc174bb22ffe9e1c4', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, index.h("co-icon", { key: '8c6d29e405a12e53bd3ab9f1662c7237bcae0617', name: "x-circle", size: 14 }), index.h("span", { key: 'd7e11cc7753c8dd63ae6a556bf5368c01ea1fc2a' }, this.clearOptionLabel))), this.loading && items.length === 0 && (index.h("div", { key: 'dec374969fe6b401a95d60d101cc625c181f3e72', class: "co-option-list__loading" }, index.h("co-loader", { key: 'c1547fc0f49911f2f8ab8b85063bf15af6500314', size: "sm" }))), !this.loading && items.length === 0 && (index.h("div", { key: '1e0692572f89d4f9507f1e4b8c4ef90f9f8d307c', class: "co-option-list__empty" }, index.h("co-icon", { key: 'ff979119305afdd7b2180336c203ff33adc3c463', name: "magnifying-glass", size: 20 }), index.h("span", { key: '9d460743d6edf7734012d75cabb0f488b67d20cf' }, this.emptyMessage))), items.length > 0 && this.virtual
+            ? this.renderVirtual(items, selectedIds)
+            : buildRows(items).map((row) => row.kind === 'header'
+                ? index.h("div", { class: "co-option-list__group", role: "presentation" }, row.label)
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (index.h("div", { key: 'f9c506fddfba9d360a7dd4b2d4ed4142aaa179c5', class: "co-option-list__loading-more" }, index.h("co-loader", { key: '587d93ebd03eb3764e5637c748975c925d1bd59f', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (index.h("div", { key: 'cef0c72b2aa1f246404001bae6c8ee4ea560ee07', class: "co-option-list__more" }, remaining, " more results")))), index.h("slot", { key: '646b6421fb03008d55e5361e14f12d05db08e299', name: "footer" })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "items": [{
+                "onItemsChange": 0
+            }]
+    }; }
+};
+CoOptionList.style = coOptionListCss();
+
+exports.co_chip = CoChip;
+exports.co_option_list = CoOptionList;

package/dist/cjs/co-color-picker.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-NNvye1ul.js');
-var requiredMark = require('./requiredMark-DyjZzUCd.js');
+var index = require('./index-DxEFsH_t.js');
+var requiredMark = require('./requiredMark-B3pKyqYI.js');
 
 /**
  * Default color presets derived from Cobalt design tokens (base.json).
@@ -99,10 +99,10 @@ const CoColorPicker = class {
         const presets = this.parsedPresets;
         const hasValue = !!this.value;
         const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
-        return (index.h("div", { key: 'ebbdbeba0134c87da27ae4f6e375041eee78892b', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (index.h("label", { key: '6b3a330cf0384860a796ba513af37f8e78e12093', class: "co-color-picker__label" }, this.label, index.h(requiredMark.RequiredMark, { key: '5643e85578787a4f37f6325cb352f3a304557acd', required: this.required }))), index.h("co-popover", { key: 'ae7d44830dfde43e0a5c5047e6c7fb821d1243c7', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("div", { key: 'ba3bfbb61193dd643ec906c83cde0856ff71858f', slot: "trigger", class: "co-color-picker__trigger" }, index.h("span", { key: '9de65c4a8b4ca9778547bbb3fe84a3672420dfc9', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), index.h("span", { key: '36e94cac1eb3855ae7425ffc37273be18ee6e351', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (index.h("div", { key: '2df3f1fa6a56038fd37f065df00a63f48ea4aacc', class: "co-color-picker__panel" }, index.h("div", { key: 'ab3f73100473640dd86ade5b28d6356b78cc87fd', class: "co-color-picker__grid" }, presets.map((preset) => {
+        return (index.h("div", { key: 'cf82d2fe5d1ca59a0be4edbd98f2f127cbb0666c', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (index.h("label", { key: 'ad0e372b32b0e7d5294609b7a952e8d4fb633447', class: "co-color-picker__label" }, this.label, index.h(requiredMark.RequiredMark, { key: '9976b6350be9c69a5db48079cdcc32b597b99e4f', required: this.required }))), index.h("co-popover", { key: 'e50a584f035be8e4cb7d18968c16e6dfe5b8fad2', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("div", { key: '79bfb8856c30be5bbedf2471651eafabf4c2faa5', slot: "trigger", class: "co-color-picker__trigger" }, index.h("span", { key: '468b9f7f6a63297086f48938155bea1a5a82ec04', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), index.h("span", { key: '727966662cfa0c6647d66f0268eca9f77452c46d', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (index.h("div", { key: '25df03b58bf3a690e524f53d53a16fe299f019ed', class: "co-color-picker__panel" }, index.h("div", { key: 'd102f3c6b266046dc2b8d6d7536d25aa2dffb79c', class: "co-color-picker__grid" }, presets.map((preset) => {
             var _a;
             return (index.h("button", { type: "button", key: preset.value, class: `co-color-picker__grid-item ${preset.value.toUpperCase() === ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toUpperCase()) ? 'co-color-picker__grid-item--selected' : ''}`, style: { background: preset.value }, title: preset.name, onClick: () => this.handleSwatchClick(preset.value) }));
-        })), hasValue && (index.h("div", { key: '962004b803249536b0d30da30f697c1908779ff5', class: "co-color-picker__hex-row" }, index.h("span", { key: '127afe4fbc44043d6417d3f335703b72c8657e59', class: "co-color-picker__hex-prefix" }, "#"), index.h("span", { key: '6ed71ff0812ab2597eea32f5c1c8a64af02d9c7c', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), index.h("button", { key: '32038edf8d6fd3ab7746997b6ba1383ee6210b63', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, index.h("co-icon", { key: '1cee861c8db908d6d900a0454029136a2bc37383', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (index.h("div", { key: 'da2a382c68d0ad972007a9589176480996fa4a52', class: "co-color-picker__helper" }, this.statusIcon && (index.h("co-icon", { key: 'cf7218f5309d7ec91f03df33199cf1ce3a49ba4d', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), index.h("span", { key: '2a469362e5001e9c65074ed6280e275e471b0334', class: "co-color-picker__helper-text" }, this.helperText)))));
+        })), hasValue && (index.h("div", { key: '4897fc8e3c3d371b23b7ae6c9e5c04c92dfe27df', class: "co-color-picker__hex-row" }, index.h("span", { key: '625828e841d8f8b545ee6119d74e839eca80841e', class: "co-color-picker__hex-prefix" }, "#"), index.h("span", { key: '00f73948a453f2db74103ab1d49013e999d13b1f', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), index.h("button", { key: 'c87e69f32065bf05dcad1eaa73cf21d028abf93c', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, index.h("co-icon", { key: 'bf8e7abbb52e543bb4335acc577b268cce40c2be', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (index.h("div", { key: '368cf0c7f3877c1a6fd35c992b6543862b1cebc8', class: "co-color-picker__helper" }, this.statusIcon && (index.h("co-icon", { key: '5b9f3568320860fde1d701ef6e5d9b3475903d8c', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), index.h("span", { key: '5a480e0edaf010df948e8f73e9befa70f88b0865', class: "co-color-picker__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/co-column-picker.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-NNvye1ul.js');
+var index = require('./index-DxEFsH_t.js');
 var normalizeText = require('./normalizeText-B-v-XPKf.js');
 
 /**
@@ -423,13 +423,13 @@ const CoColumnPicker = class {
         return (index.h("div", { class: "co-column-picker__empty" }, index.h("co-icon", { name: "magnifying-glass", size: 40, class: "co-column-picker__empty-icon" }), index.h("span", null, this.emptyText)));
     }
     render() {
-        return (index.h("div", { key: '7c9f0c6d1d8a297be3b31219ccab24c7be7e2664', class: {
+        return (index.h("div", { key: '2666e34dab21c03638a74bb5aa49ab0e886a0693', class: {
                 'co-column-picker': true,
                 'co-column-picker--open': this.isOpen,
                 'co-column-picker--disabled': this.disabled,
                 'co-column-picker--focused': this.focused,
                 [`co-column-picker--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (index.h("div", { key: '7721083bb4f68dabc7d1a6e35f097e98b6416f55', class: "co-column-picker__labels" }, this.label && index.h("label", { key: '4cd1198cc290b7fc3e6959e04fba230d5de9f488', class: "co-column-picker__label" }, this.label), this.secondaryLabel && index.h("span", { key: 'b4f56c7947100ca9be3eb8c4d3540ab5cb34c1ef', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (index.h("div", { key: '4138e1b3549460b5f819a1d9065d05c4fc07c72f', class: "co-column-picker__dropdown" }, this.showSearch && (index.h("div", { key: '22cc772780508c2efdd2e429dcecbe616261d8f1', class: "co-column-picker__search" }, index.h("co-icon", { key: '62ab36ee523d75866c2844aa0d8f1b9b5a7f1ced', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), index.h("input", { key: 'ace44104a9babc7fb8a5cc3f5af6affd525db28a', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (index.h("button", { key: '93c0047a52e8700cf78906ecc723152d845b8d4d', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, index.h("co-icon", { key: 'e789f4a19e49cf1f8549f756398cb13f00839f3d', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (index.h("div", { key: '2b1bd3f29832f37e8e9047d0dd2189cb00ce9058', class: "co-column-picker__toolbar" }, index.h("button", { key: 'fe1d23d1a58cdebb3f01687579206133cf58b46c', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), index.h("button", { key: 'f768bbcd4c33d125aba7140484a8c7bd0797ac8c', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), index.h("span", { key: 'f0aa650e5d8caf03d05284776c81a2525c7dd527', class: "co-column-picker__toolbar-sep" }), index.h("button", { key: 'beea0db7feaee1e4940a0c8f320196573311307b', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), index.h("button", { key: '97c5971a6583b2ee67bda1ad1c2081900b3e36c3', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), index.h("span", { key: '91e6e4c2c69bc7baf9a0057994885aa32c570cad', style: { flex: '1' } }), this.selectedValues.length > 0 && index.h("span", { key: 'b4eac29c58acf345217cc201fe3cb54f788915c0', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), index.h("div", { key: '920616150803f151c44a9796b6bd7edbdf572d8a', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (index.h("div", { key: '292137377ece5e75c45965a147fa4e162476e7b5', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '127c1f85c85da87f5bdbed1c7631b7e6679cfe86', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), index.h("span", { key: 'df3432d43a0bccdbaf20a02427479cf9b97fd79d', class: "co-column-picker__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (index.h("div", { key: '14278387662b21beb294db48c0758fc6ff265676', class: "co-column-picker__labels" }, this.label && index.h("label", { key: '3f96a7fc4f4c41a4dfd96461b68c3f5b58bb681c', class: "co-column-picker__label" }, this.label), this.secondaryLabel && index.h("span", { key: '96c8aee4265a6a1714d17ab91035bb635df4a925', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (index.h("div", { key: '71ec0116e86706c139eba9a2368c238e527c2251', class: "co-column-picker__dropdown" }, this.showSearch && (index.h("div", { key: 'b17441aa3d0d73dab3b16ae7d9f2d0796968c9da', class: "co-column-picker__search" }, index.h("co-icon", { key: '007c2975b633af4bfde6248372b24cf0a2f9b862', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), index.h("input", { key: 'd6bbaf600cc3f2ed2e490d095045a744b46bed8d', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (index.h("button", { key: 'ba292c3f2ee4fcfb73d1360d681c5ed2ccdd0f41', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, index.h("co-icon", { key: '1ec246b29fb288351153e896b2014b8f4fdec62c', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (index.h("div", { key: '007a4067b4c369f076eef0e5068419ad1ad7717b', class: "co-column-picker__toolbar" }, index.h("button", { key: 'd4ad1c99e81cba77cce7d7f8a121b16398b4b462', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), index.h("button", { key: '2ac4546a1375c337363c905a1262082f4ec4ac25', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), index.h("span", { key: '053b07244ea82a1d83eadc0f3e0d7f3c79df3f1c', class: "co-column-picker__toolbar-sep" }), index.h("button", { key: '0568ea5680716dc2560ca93e89dbb0649145f552', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), index.h("button", { key: '6538744f86c59489871040bed656a85220fbdb1c', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), index.h("span", { key: 'd0c4294e408378f9613655f9f1a8665fff4bc866', style: { flex: '1' } }), this.selectedValues.length > 0 && index.h("span", { key: '5dc6510896ca75e4d1d62608ca9fd0c46daa2158', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), index.h("div", { key: 'bb7a021742ab70da4d1c8b29b58944a826d50399', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (index.h("div", { key: '8135e8db252ad8de777683d308e7440f7902d281', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: 'cd2416dde35f709547185a893cd61c981be0de3f', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), index.h("span", { key: 'eb8b1353ec98c16360ad13484944879046235339', class: "co-column-picker__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {