@prolibu-suite/cobalt-core 0.10.3 → 0.11.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
 import { h as highlightSegments } from './normalizeText-Ba_v-MzM.js';
 import { i as initOverlayScroll } from './overlayScroll-Bpv882_z.js';
 import './overlayscrollbars-ox7HzCZn.js';
@@ -74,7 +74,7 @@ const CoChip = class {
         else
             effectiveIconMode = 'none';
         const Tag = this.clickable ? 'button' : 'div';
-        return (h(Tag, { key: '385173584372bbad8872565f1fc95e8ae8e14563', class: {
+        return (h(Tag, { key: '00d8eb125566907af12d288037c9b6129609857f', class: {
                 'co-chip': true,
                 [`co-chip--${this.shape}`]: true,
                 [`co-chip--${this.size}`]: true,
@@ -84,7 +84,7 @@ const CoChip = class {
                 '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 && (h("span", { key: 'a680c376ac13140b2c073e01fc901f2cfa54bde8', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: '73e58b8b90234eb883b6a1e49b5e37b267f03d1b', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: 'b944fbf0a0161846411d8fc2fe034c48c77d42ea', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: 'b24a5a3c64d0eda1b9d87c66ac93c0d4703973bc', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: '9f1e7fa47bd86e1d7e4812ec0fe5f61490ab0878', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: 'e52df105783ff84c932bc289f6e88304ccc4240a', name: "icon-left" }))), h("span", { key: '269f54eca09a4ff301d9ec4e673bf9c8d19ccd87', class: "co-chip__label" }, h("slot", { key: '31fba7c9c05b830562800cc46c48e667e7dc046c' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: 'a455314236c688f2bff9185135787899da52ea5f', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: '13e5862e03e2fcf7129230a4d68ce7e2b1b4f11e', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '66fc09efbdeea37f1dbce3b5ad4443a760618b66', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: '7acfa1a23e294cb92b17d5174ec0a78161877624', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: '9e8ded0f256a72ab81c587a82d2bb570930288f9', name: "icon-right" }))), this.removable && (h("span", { key: 'e30345ce825c823fbf7da1aaaec4141351e18a02', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: '3d9777c29b706cda71ee64b313961c97e215b900', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: 'd99af23fbbb7a8557b8cefd15a4cebdc7437ff43', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: 'aa99f2c0f6ec96f95656c607ca5846c282447e35', name: this.trailingIcon, size: trailingIconSize, weight: this.iconWeight })))));
+            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (h("span", { key: 'f9df52bcd104f452ae56aaff384c434eebab7bf8', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: 'f50c4eb609c7302eb7cda669d8b560a8193aa9a0', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: 'a068106737290e16d4ffb0d2b2fdb26562f64987', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: '4f1631db1c7348ae0732574e01b3d5690c5a37c2', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: '10d132f52ad0c32f09c02d3917f3f5af689ff453', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: '0194d3829fcbd9141672d0f63e5a60ee147d154b', name: "icon-left" }))), h("span", { key: 'ee278a1de261e142819f8d3d32b8de45435b41b1', class: "co-chip__label" }, h("slot", { key: 'e28bf7aa97b05669fef495f81373064a3e061736' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: '2436fe42a2373a8edce158b8930bcd9f990abb04', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: '84f726d0b004faff58f75a07efdc5162e0669b78', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '5468eda2f54efc471bd36b1b2544088092d3c97b', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: 'd5fcdba05a10556d915b60abbb5a8bc67a663860', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: 'e04de9508615a06bd232db11720d9f540ec35a0f', name: "icon-right" }))), this.removable && (h("span", { key: '37fe709e4d60790707c2dc88693d4b09523d6516', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: '1a9e734ebd80193f2a79a2f9a2339a17d77c7e49', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: 'd9c5f717252d664f5b352944ebadf7628ee161b5', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: '3f2eee2b995c9f27ea502cf586e204ea78a81cd6', name: this.trailingIcon, size: trailingIconSize, weight: this.iconWeight })))));
     }
 };
 CoChip.style = coChipCss();
@@ -251,7 +251,7 @@ function virtualSlice(scrollTop, count) {
     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-14, 14px);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:var(--co-option-list-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:var(--co-option-list-item-min-height, 32px);box-sizing:border-box;padding:var(--co-option-list-item-padding-y, var(--co-spacing-xs, 4px)) var(--co-spacing-sm2, 8px) var(--co-option-list-item-padding-y, 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-14, 14px);letter-spacing:var(--co-font-letter-spacing-body, -0.03em);color:var(--co-semantic-text-default, #1f1c1b);transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out),     opacity var(--co-motion-duration-fast) var(--co-motion-ease-out)}.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-option-list-text-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__suffix--end{flex-shrink:0;margin-left:auto;text-align:right;white-space:nowrap;font-size:var(--co-font-size-13, 13px);color:var(--co-semantic-text-default, #1f1c1b);font-variant-numeric:tabular-nums}.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__badge-tip{display:inline-flex;align-items:center;flex-shrink:0}.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 var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-option-list__row-action:hover{color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__pin{flex-shrink:0;display:flex;align-items:center;justify-content:center;border:0;padding:var(--co-spacing-xxs, 2px);background:transparent;cursor:pointer;border-radius:var(--co-border-radius-xxs, 4px);color:var(--co-semantic-text-muted, #888888)}.co-option-list__pin:hover{color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__pin--active{color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__drag-handle{display:inline-flex;align-items:center;cursor:grab;color:var(--co-semantic-text-muted);margin-right:var(--co-spacing-xs);flex:0 0 auto}.co-option-list__drag-handle:active{cursor:grabbing}.co-option-list__drag-handle{touch-action:none}.co-option-list__option--dragging{opacity:0.5}.co-option-list__option--lifted{position:relative;z-index:2;background:var(--co-semantic-surface-page, #fff);box-shadow:var(--co-shadow-lg);cursor:grabbing}.co-option-list__option--drop-before{box-shadow:inset 0 2px 0 0 var(--co-semantic-border-focus)}.co-option-list__option--drop-after{box-shadow:inset 0 -2px 0 0 var(--co-semantic-border-focus)}.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-14, 14px);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-14, 14px);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 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:var(--co-option-list-search-height, 32px);box-sizing:border-box;margin:var(--co-option-list-search-margin, var(--co-spacing-md, 12px) var(--co-spacing-md, 12px) 0);padding:var(--co-option-list-search-padding, 0 var(--co-spacing-sm2, 8px) 0 var(--co-spacing-xs, 4px));border:var(--co-option-list-search-border, 1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08)));border-radius:var(--co-option-list-search-radius, var(--co-border-radius-xs, 8px));background:var(--co-option-list-search-bg, transparent);color:var(--co-semantic-text-muted, #888888)}.co-option-list__search:focus-within{border-color:var(--co-option-list-search-border-focus, var(--co-semantic-border-focus, rgba(31, 28, 27, 0.25)));background:var(--co-option-list-search-bg-focus, var(--co-option-list-search-bg, transparent))}.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-14, 14px);font-weight:500;letter-spacing:var(--co-font-letter-spacing-body, -0.03em);line-height:1;color:var(--co-semantic-text-default, #1f1c1b);caret-color:var(--co-option-list-search-caret, auto)}.co-option-list__search-input::placeholder{color:var(--co-semantic-text-muted, #888888)}.co-option-list__options{max-height:var(--co-option-list-max-height, 280px);overflow-y:auto;overflow-x:hidden;padding:var(--co-option-list-options-padding, var(--co-spacing-md, 12px))}.co-option-list__inner{display:flex;flex-direction:column;gap:var(--co-option-list-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-option-list-item-gap, var(--co-spacing-sm2, 8px));min-width:0;min-height:var(--co-option-list-item-min-height, 32px);box-sizing:border-box;padding:var(--co-option-list-item-padding-y, var(--co-spacing-xs, 4px)) var(--co-spacing-sm2, 8px) var(--co-option-list-item-padding-y, var(--co-spacing-xs, 4px)) var(--co-spacing-xs, 4px);border-radius:var(--co-option-list-item-radius, var(--co-border-radius-xs, 8px));background:var(--co-option-list-item-bg, transparent);box-shadow:var(--co-option-list-item-ring, none);cursor:pointer;font-size:var(--co-option-list-item-font-size, var(--co-font-size-14, 14px));letter-spacing:var(--co-font-letter-spacing-body, -0.03em);color:var(--co-semantic-text-default, #1f1c1b);transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out),     opacity var(--co-motion-duration-fast) var(--co-motion-ease-out)}.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-option-list-active-bg, var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04)));box-shadow:var(--co-option-list-active-ring, none)}.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__icon-tile{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--co-option-list-icon-tile-size, 22px);height:var(--co-option-list-icon-tile-size, 22px);margin:0 var(--co-spacing-xxs, 2px);border-radius:var(--co-option-list-icon-tile-radius, var(--co-border-radius-xxs, 4px));background:color-mix(in srgb, var(--co-option-list-icon-tint) var(--co-option-list-icon-tile-mix, 12%), transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--co-option-list-icon-tint) var(--co-option-list-icon-tile-ring-mix, 0%), transparent);color:var(--co-option-list-icon-tint)}.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-option-list-text-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:var(--co-option-list-label-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__suffix--end{flex-shrink:0;margin-left:auto;text-align:right;white-space:nowrap;font-size:var(--co-font-size-13, 13px);color:var(--co-semantic-text-default, #1f1c1b);font-variant-numeric:tabular-nums}.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__badge-tip{display:inline-flex;align-items:center;flex-shrink:0}.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 var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-option-list__row-action:hover{color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__pin{flex-shrink:0;display:flex;align-items:center;justify-content:center;border:0;padding:var(--co-spacing-xxs, 2px);background:transparent;cursor:pointer;border-radius:var(--co-border-radius-xxs, 4px);color:var(--co-semantic-text-muted, #888888)}.co-option-list__pin:hover{color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__pin--active{color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__drag-handle{display:inline-flex;align-items:center;cursor:grab;color:var(--co-semantic-text-muted);margin-right:var(--co-spacing-xs);flex:0 0 auto}.co-option-list__drag-handle:active{cursor:grabbing}.co-option-list__drag-handle{touch-action:none}.co-option-list__option--dragging{opacity:0.5}.co-option-list__option--lifted{position:relative;z-index:2;background:var(--co-semantic-surface-page, #fff);box-shadow:var(--co-shadow-lg);cursor:grabbing}.co-option-list__option--drop-before{box-shadow:inset 0 2px 0 0 var(--co-semantic-border-focus)}.co-option-list__option--drop-after{box-shadow:inset 0 -2px 0 0 var(--co-semantic-border-focus)}.co-option-list__group{padding:var(--co-option-list-group-padding-top, var(--co-spacing-sm2, 8px)) var(--co-spacing-xs, 4px) var(--co-option-list-group-padding-bottom, var(--co-spacing-xs, 4px));font-family:var(--co-option-list-group-font-family, var(--co-font-family-mono, 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace));font-size:var(--co-option-list-group-font-size, var(--co-font-size-10, 10px));font-weight:var(--co-option-list-group-font-weight, 400);text-transform:var(--co-option-list-group-text-transform, uppercase);letter-spacing:var(--co-option-list-group-letter-spacing, var(--co-font-letter-spacing-overline, 0.08em));line-height:1.1;color:var(--co-option-list-group-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-14, 14px);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-14, 14px);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) {
@@ -558,6 +558,25 @@ const CoOptionList = class {
     }
     // ── Métodos públicos ───────────────────────────────────────
     /** Re-toma el snapshot selected-first. El host la llama al abrir su panel. */
+    /**
+     * Vacía el buscador (texto, término y cualquier coSearch en vuelo) y emite
+     * `coSearch('')`. Para hosts que reabren el panel (co-popover): el término
+     * vive ACÁ, así que sin esto la búsqueda anterior reaparecía con la lista del
+     * host ya sin filtrar.
+     */
+    async clearSearch() {
+        if (this.debounceTimer)
+            clearTimeout(this.debounceTimer);
+        const hadTerm = !!this.term;
+        this.term = '';
+        this.activeIndex = -1;
+        this.lastFillLen = -1;
+        if (this.searchInputEl)
+            this.searchInputEl.value = '';
+        if (hadTerm)
+            this.takeSnapshot();
+        this.coSearch.emit('');
+    }
     async snapshotOrder() {
         this.takeSnapshot();
     }
@@ -938,6 +957,9 @@ const CoOptionList = class {
         }
         if (item.color)
             return h("span", { class: "co-option-list__dot", style: { backgroundColor: item.color } });
+        if (item.icon && item.iconTint) {
+            return (h("span", { class: "co-option-list__icon-tile", part: "icon-tile", style: { '--co-option-list-icon-tint': item.iconTint } }, h("co-icon", { name: item.icon, size: 14 })));
+        }
         if (item.icon)
             return h("co-icon", { name: item.icon, size: 16, class: "co-option-list__icon" });
         return null;
@@ -989,11 +1011,11 @@ const CoOptionList = class {
         const selectedIds = this.selectedIds;
         const { hasMore, remaining } = deriveMore(this.parsedItems.length, this.total, this.hasMore);
         const showClear = !!this.clearOptionLabel && selectedIds.length > 0;
-        return (h("div", { key: '30f39e9cfe2472f1083768b6e974aa48672e63d0', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: 'f1c125c141ca8ceebae5c1ed0c786919c31805b3', class: "co-option-list__search", part: "search" }, h("co-icon", { key: 'd56810ca205984e7b2c56546930ce25ca70fda68', name: "magnifying-glass", size: 16 }), h("input", { key: 'a85b35debe7b14c604a3262c7c04ee3b9ca41a6a', 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" }))), h("div", { key: 'ea5eecc218a228e07dd05d8f963518b4a8e0039f', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: 'b27071cb3d629022fa6e926050fdc17b2051ef98', class: "co-option-list__inner" }, showClear && (h("button", { key: '443791f8ee2d1f05a16c4002573264acf0a8de1b', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: 'ebe7e65669ff9eb76922ef76e21b9209658a444f', name: "x-circle", size: 14 }), h("span", { key: '82d2bcceb41ec5370e60ea9e25af91a2cbf11e70' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '9f60fedc78ee66d198623a5e3ac9b0f1569ddef4', class: "co-option-list__loading" }, h("co-loader", { key: 'ab7b1947e03af880cc608bef8639d7dc882a53b7', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '6b0870e6c5b2c25e2854431a28a2d6b56253ecf2', class: "co-option-list__empty" }, h("co-icon", { key: '302d71e23e0d56104dfd04948201630ddbb4b078', name: "magnifying-glass", size: 20 }), h("span", { key: 'fc580f9a50974ab22a7b648dbbe4ca17340094d8' }, this.emptyMessage))), items.length > 0 && this.virtual
+        return (h("div", { key: 'af6891bdf933b74b6e680b81387764c3c2a0f2b9', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '68cfffc9df1d3061d38063f6b0502afc58c668c4', class: "co-option-list__search", part: "search" }, h("co-icon", { key: 'abfc569cce22f30146cc714f4157ce12819a729a', name: "magnifying-glass", size: 16 }), h("input", { key: '5150055db79ef22253e0103998fde0c79d3b5eda', 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" }))), h("slot", { key: '1d858e33c3a6971b4abf6dd614603c4e01cba1c6', name: "header" }), h("div", { key: '28fd86f22a7f8e95fdfee4f33f1af0b441ca4c38', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: '3002c5216cac79d5d39aab2b349f6853e6517535', class: "co-option-list__inner" }, showClear && (h("button", { key: 'f6e15aeb7ea9422daf38d65611df3ca4dbb243e2', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '2f22f2b31291145b36721e923c3a422fadcabb50', name: "x-circle", size: 14 }), h("span", { key: 'd4c6b7ad4dd8df4725b763929f34da6793b29649' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: 'c9cb5cf8095ed45d71a143878bd9ed524c6dbf25', class: "co-option-list__loading" }, h("co-loader", { key: '550b8014bec75fb16c9c7b29dd5589355abee9be', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '40ffc1f2945a0acd0a9c7ee4e83a1f23a93ebbd2', class: "co-option-list__empty" }, h("co-icon", { key: '639e88bb241fd79fca5481505d5cab36e89b89df', name: "magnifying-glass", size: 20 }), h("span", { key: '8f01fb62e21ad0fd6c2e367bd14d88cb09fa425e' }, this.emptyMessage))), items.length > 0 && this.virtual
             ? this.renderVirtual(items, selectedIds)
             : buildRows(items).map((row) => row.kind === 'header'
                 ? h("div", { class: "co-option-list__group", role: "presentation" }, row.label)
-                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: '606a674960e4d16198ef36de4686de91ad742dde', class: "co-option-list__loading-more" }, h("co-loader", { key: '933613b7b606399cd9eea3f877a4b2c77f269785', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '6a6220513b6db222b57155c54afa805519e4b1b8', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '4d952742c39335d9f19c2e45f58ae6be3306857d', name: "footer" })));
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: 'e0146742e08a49e0c297ab795e3eb283daedf281', class: "co-option-list__loading-more" }, h("co-loader", { key: '1bdd97a2c79d4fab0ea75be2bc4c7c4254de7638', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: 'cd336459aded62f27957888595c53475ba2d7664', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '767d9b82e7afbea41f196e110d7a6fd720637df9', name: "footer" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-color-area.entry.js

@@ -0,0 +1,167 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
+import { c as clamp, a as hsvToHex } from './hsv-COJdaKBU.js';
+
+const coColorAreaCss = () => `.co-color-thumb{position:absolute;box-sizing:border-box;width:var(--co-color-thumb-size, 16px);height:var(--co-color-thumb-size, 16px);border-radius:var(--co-border-radius-full);border:4px solid var(--co-color-base-blanco, #fff);background:var(--co-color-thumb-fill, transparent);box-shadow:0 0 0 1px var(--co-color-thumb-hairline, var(--co-semantic-border-hairline)),     var(--co-shadow-lg);transform:translate(-50%, -50%);pointer-events:none;transition:left var(--co-motion-duration-instant) var(--co-motion-ease-out),     top var(--co-motion-duration-instant) var(--co-motion-ease-out)}:host{display:block;width:100%;--co-color-area-radius:var(--co-border-radius-xs);}.co-color-area{position:relative;box-sizing:border-box;width:100%;aspect-ratio:236 / 200;border-radius:var(--co-color-area-radius);background:linear-gradient(to top, #000, transparent),     linear-gradient(to right, #fff, hsl(var(--co-color-area-hue, 0) 100% 50%));cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}.co-color-area--disabled{opacity:0.4;cursor:not-allowed}.co-color-area--dragging .co-color-area__thumb{transition:none}.co-color-area:focus-visible{outline:none;box-shadow:0 0 0 2px var(--co-semantic-border-focus)}`;
+
+const CoColorArea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coInput = createEvent(this, "coInput", 7);
+        this.coChange = createEvent(this, "coChange", 7);
+        /** Tono 0–360. Pinta el fondo; el área no lo modifica. */
+        this.hue = 0;
+        /** Saturación 0–100 (eje X). Mutable: el área se actualiza sola al arrastrar. */
+        this.saturation = 100;
+        /** Valor/brillo 0–100 (eje Y, 100 arriba). Mutable: el área se actualiza sola al arrastrar. */
+        this.value = 100;
+        /** Deshabilita puntero y teclado; no emite nada. */
+        this.disabled = false;
+        this.dragging = false;
+        /** ¿Algún coInput real durante el gesto? Sin cambio no hay coChange de cierre. */
+        this.changedInGesture = false;
+        // ── Puntero ────────────────────────────────────────────────────────────
+        this.handlePointerDown = (e) => {
+            var _a;
+            // Solo el botón primario; un segundo puntero (multi-touch) no roba el gesto en curso.
+            if (this.disabled || e.button !== 0 || this.dragging)
+                return;
+            // Evita selección de texto y el mousedown de compatibilidad; el foco se
+            // mueve a mano para que las flechas funcionen después del click.
+            e.preventDefault();
+            (_a = this.areaEl) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+            this.capturePointer(e);
+            this.dragging = true;
+            this.activePointerId = e.pointerId;
+            this.changedInGesture = false;
+            this.applyPointer(e);
+        };
+        this.handlePointerMove = (e) => {
+            if (!this.isActivePointer(e))
+                return;
+            this.applyPointer(e);
+        };
+        this.handlePointerEnd = (e) => {
+            if (!this.isActivePointer(e))
+                return;
+            this.dragging = false;
+            this.activePointerId = undefined;
+            this.releasePointer(e);
+            // Terminar el gesto DESARMA la bandera (hermano del `endGesture()` de
+            // co-slider). Hoy es defensa y no un fix: este componente no tiene
+            // `disconnectedCallback`, así que nadie vuelve a leerla después del gesto
+            // — en co-slider, que sí lo tiene, la bandera armada le hacía reemitir un
+            // `coChange` con el valor ya escrito en CADA desmontaje. Junto con el
+            // `if (this.dragging)` de `commitInput` (el teclado no la arma), fuera de
+            // un gesto la bandera está SIEMPRE apagada.
+            const huboCambio = this.changedInGesture;
+            this.changedInGesture = false;
+            // Un click sobre el valor actual (o en un extremo ya alcanzado) no cambia
+            // nada: sin coChange, igual que el teclado en el borde. Un commit vacío
+            // entraría al historial de deshacer del editor como paso sin efecto.
+            if (huboCambio)
+                this.coChange.emit(this.detail);
+        };
+        // ── Teclado ────────────────────────────────────────────────────────────
+        this.handleKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            const step = e.shiftKey ? 10 : 1;
+            let ds = 0;
+            let dv = 0;
+            switch (e.key) {
+                case 'ArrowRight':
+                    ds = step;
+                    break;
+                case 'ArrowLeft':
+                    ds = -step;
+                    break;
+                case 'ArrowUp':
+                    dv = step;
+                    break;
+                case 'ArrowDown':
+                    dv = -step;
+                    break;
+                default: return;
+            }
+            e.preventDefault();
+            const s = clamp(this.saturation + ds, 0, 100);
+            const v = clamp(this.value + dv, 0, 100);
+            // En el borde no hay cambio → sin eventos (un commit vacío ensuciaría el historial).
+            if (this.commitInput(s, v))
+                this.coChange.emit(this.detail);
+        };
+    }
+    get detail() {
+        return { saturation: this.saturation, value: this.value };
+    }
+    /** `==`: en jsdom los MouseEvent traen `pointerId` undefined y deben seguir pasando. */
+    isActivePointer(e) {
+        return this.dragging && e.pointerId == this.activePointerId;
+    }
+    /** `setPointerCapture` sigue el gesto fuera de la caja. jsdom no lo implementa
+     *  y un browser lanza NotFoundError con un pointerId sintético: guardado. */
+    capturePointer(e) {
+        const el = this.areaEl;
+        if (!el || typeof el.setPointerCapture !== 'function' || e.pointerId == null)
+            return;
+        try {
+            el.setPointerCapture(e.pointerId);
+        }
+        catch (_a) {
+            /* pointerId inactivo (evento sintético): sin captura, el gesto sigue dentro de la caja */
+        }
+    }
+    releasePointer(e) {
+        const el = this.areaEl;
+        if (!el || typeof el.releasePointerCapture !== 'function' || e.pointerId == null)
+            return;
+        try {
+            el.releasePointerCapture(e.pointerId);
+        }
+        catch (_a) {
+            /* ya liberado */
+        }
+    }
+    /** clientX/Y → saturación (X, 0 izquierda) y valor (Y, 100 arriba), acotados a la caja. */
+    applyPointer(e) {
+        var _a;
+        const rect = (_a = this.areaEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect || rect.width <= 0 || rect.height <= 0)
+            return;
+        const s = clamp((e.clientX - rect.left) / rect.width, 0, 1) * 100;
+        const v = (1 - clamp((e.clientY - rect.top) / rect.height, 0, 1)) * 100;
+        this.commitInput(s, v);
+    }
+    /** Aplica s/v y emite `coInput` solo si algo cambió (los moves repetidos no
+     *  disparan re-render ni trabajo en el host). */
+    commitInput(s, v) {
+        if (s === this.saturation && v === this.value)
+            return false;
+        this.saturation = s;
+        this.value = v;
+        // Solo un GESTO arma la bandera: el teclado también pasa por acá (y cierra
+        // él mismo con su `coChange`), y armarla fuera de un arrastre la dejaba
+        // prendida sin nadie que la apague.
+        if (this.dragging)
+            this.changedInGesture = true;
+        this.coInput.emit(this.detail);
+        return true;
+    }
+    render() {
+        var _a, _b, _c;
+        // `??`: el harness de spec no materializa defaults de class-field.
+        const hue = (_a = this.hue) !== null && _a !== void 0 ? _a : 0;
+        const s = clamp((_b = this.saturation) !== null && _b !== void 0 ? _b : 100, 0, 100);
+        const v = clamp((_c = this.value) !== null && _c !== void 0 ? _c : 100, 0, 100);
+        const fill = hsvToHex({ h: hue, s, v });
+        return (h("div", { key: 'e8915d2faeda1cdb28b509b5180b51ac43c5d9ca', class: {
+                'co-color-area': true,
+                'co-color-area--disabled': this.disabled,
+                'co-color-area--dragging': this.dragging,
+            }, style: { '--co-color-area-hue': String(hue) }, role: "slider", tabIndex: this.disabled ? -1 : 0, "aria-label": this.label || undefined, "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": String(Math.round(s)), "aria-valuetext": `S ${Math.round(s)}% V ${Math.round(v)}%`, "aria-disabled": this.disabled ? 'true' : undefined, ref: (el) => (this.areaEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerEnd, onPointerCancel: this.handlePointerEnd, onKeyDown: this.handleKeyDown }, h("div", { key: '9aa7ce683df8b57debdd13c70136d19a53cd4ca0', class: "co-color-thumb co-color-area__thumb", part: "thumb", style: { left: `${s}%`, top: `${100 - v}%`, '--co-color-thumb-fill': fill } })));
+    }
+    get el() { return getElement(this); }
+};
+CoColorArea.style = coColorAreaCss();
+
+export { CoColorArea as co_color_area };

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
-import { R as RequiredMark } from './requiredMark-BCJUuZvC.js';
-import { h as hsvToHex, a as isValidHex, p as parseCssColor, b as hexToHsv, i as isLightColor } from './color-BRbgGqLw.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
+import { R as RequiredMark } from './requiredMark-D5C5NzOE.js';
+import { h as hsvToHex, a as isValidHex, p as parseCssColor, b as hexToHsv, i as isLightColor } from './color-BVGGRfNG.js';
 import { l as langFromLocale, f as fillTemplate } from './fileI18n-gKnOhsd2.js';
 
 /**
@@ -1154,12 +1154,12 @@ const CoColorPicker = class {
     render() {
         const hasValue = !!this.value;
         const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
-        return (h("div", { key: '5e4239ff9ef0dc3f15004898d2d891f8d231e95d', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: '003a893c3c840cd03d87c4291795499ac80b8b73', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '4c14eaf668b0677b91b23a00f001ffaa4c21f5c5', required: this.required }))), h("co-popover", { key: 'f4a489f77c2d629ea1d9b69786cfad0f95d5422b', open: this.isOpen, placement: "bottom-start",
+        return (h("div", { key: 'bdc7487c5b694937aa2ffdb79fd558891a4b6931', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: '34d0e3a9df74d80defd62bee980fe9114cdcd2d4', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '37467a67f8a84fcd229073b214be33e7623dee94', required: this.required }))), h("co-popover", { key: 'f4e7e9364a8ffedfc2fddf7ff88f636e1bb22f68', open: this.isOpen, placement: "bottom-start",
             // Sin `matchWidth`: el panel tiene ancho INTRÍNSECO (grilla de 8
             // swatches fijos de 32px). Copiar el ancho del trigger achica los
             // tracks bajo 32px con un campo angosto (media columna de un modal) y
             // los swatches desbordan el card — guard: panel-width.spec.
-            offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '229e0095d6b6a723e77cf0d001d780cf51116851', slot: "trigger", class: "co-color-picker__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-controls": this.isOpen ? CoColorPicker.PANEL_ID : undefined, "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onKeyDown: this.handleTriggerKeyDown }, h("span", { key: '9267f104b7f0542653038ef381fb81a7f7f0188e', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '64efb900a60576022b3f487db56380973d2934c9', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '22abcb6c79531f41a6655fc48320e4c108a33049', class: "co-color-picker__panel", id: CoColorPicker.PANEL_ID, role: "dialog", "aria-label": this.label || this.placeholder }, this.renderArea(), this.renderHue(), this.renderSwatches(), this.renderHexRow()))), this.helperText && (h("div", { key: '901b7094f7da8c09ea25cad568eda8d5fcaf2d6e', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: 'fb341f791466f133f6a6c4bd04a8dd71c519c7c0', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '0ecfc7d46a07c741d42b59660979559fb78117df', class: "co-color-picker__helper-text" }, this.helperText)))));
+            offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'f25ef2310238bf18c34d0d7aa61f1916d479193e', slot: "trigger", class: "co-color-picker__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-controls": this.isOpen ? CoColorPicker.PANEL_ID : undefined, "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onKeyDown: this.handleTriggerKeyDown }, h("span", { key: '3d8bcd557976d56105790a7158147b5dff2a17e3', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '461087a2cba8edfa74504e332c1a81cb45046821', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: 'aecdd232d82fe98830ca6f5677a034f62783e48e', class: "co-color-picker__panel", id: CoColorPicker.PANEL_ID, role: "dialog", "aria-label": this.label || this.placeholder }, this.renderArea(), this.renderHue(), this.renderSwatches(), this.renderHexRow()))), this.helperText && (h("div", { key: '5aba7ada0642092c743e43321017d812f32316e3', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: '28ce648d02d2e672ce2936000c655b7ea5f6aa7d', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '7545d46b04f19b34c4865f55bd5e7d556514f00a', class: "co-color-picker__helper-text" }, this.helperText)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-color-slider.entry.js

@@ -0,0 +1,187 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
+import { c as clamp } from './hsv-COJdaKBU.js';
+
+const coColorSliderCss = () => `.co-color-thumb{position:absolute;box-sizing:border-box;width:var(--co-color-thumb-size, 16px);height:var(--co-color-thumb-size, 16px);border-radius:var(--co-border-radius-full);border:4px solid var(--co-color-base-blanco, #fff);background:var(--co-color-thumb-fill, transparent);box-shadow:0 0 0 1px var(--co-color-thumb-hairline, var(--co-semantic-border-hairline)),     var(--co-shadow-lg);transform:translate(-50%, -50%);pointer-events:none;transition:left var(--co-motion-duration-instant) var(--co-motion-ease-out),     top var(--co-motion-duration-instant) var(--co-motion-ease-out)}:host{display:block;width:100%}.co-color-slider{position:relative;width:100%}.co-color-slider__track{position:relative;box-sizing:border-box;width:100%;height:16px;border-radius:var(--co-border-radius-full);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}.co-color-slider__track--hue{background:linear-gradient(     to right,     hsl(0 100% 50%),     hsl(60 100% 50%),     hsl(120 100% 50%),     hsl(180 100% 50%),     hsl(240 100% 50%),     hsl(300 100% 50%),     hsl(360 100% 50%)   )}.co-color-slider__track--alpha{background:linear-gradient(to right, transparent, var(--co-color-slider-color, #000)),     repeating-conic-gradient(#ebebeb 0 25%, #fafafa 0 50%) 0 0 / 8px 8px}.co-color-slider__thumb{top:50%;left:calc(     var(--co-color-thumb-size, 16px) / 2 +       (100% - var(--co-color-thumb-size, 16px)) * var(--co-color-slider-ratio, 0)   )}.co-color-slider--disabled .co-color-slider__track{opacity:0.4;cursor:not-allowed}.co-color-slider--dragging .co-color-slider__thumb{transition:none}.co-color-slider__track:focus-visible{outline:none;box-shadow:0 0 0 2px var(--co-semantic-border-focus)}`;
+
+/** Damero de 4 px para el relleno del thumb de alpha (el del track es de 8 px). */
+const THUMB_CHECKER = 'repeating-conic-gradient(#ebebeb 0 25%, #fafafa 0 50%) 0 0 / 4px 4px';
+/** Tamaño del thumb por defecto (espejo de `--co-color-thumb-size` en colorThumb.css). */
+const THUMB_SIZE = 16;
+const CoColorSlider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coInput = createEvent(this, "coInput", 7);
+        this.coChange = createEvent(this, "coChange", 7);
+        /** Canal: `hue` (0–360, gradiente HSL uniforme) o `alpha` (0–100, damero). */
+        this.channel = 'hue';
+        /** Valor actual (tono 0–360 / alpha 0–100). Mutable: el slider se actualiza solo al arrastrar. */
+        this.value = 0;
+        /** Deshabilita puntero y teclado; no emite nada. */
+        this.disabled = false;
+        this.dragging = false;
+        /** ¿Algún coInput real durante el gesto? Sin cambio no hay coChange de cierre. */
+        this.changedInGesture = false;
+        // ── Puntero ────────────────────────────────────────────────────────────
+        this.handlePointerDown = (e) => {
+            var _a;
+            // Solo el botón primario; un segundo puntero (multi-touch) no roba el gesto en curso.
+            if (this.disabled || e.button !== 0 || this.dragging)
+                return;
+            e.preventDefault();
+            (_a = this.trackEl) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+            this.capturePointer(e);
+            this.dragging = true;
+            this.activePointerId = e.pointerId;
+            this.changedInGesture = false;
+            this.applyPointer(e);
+        };
+        this.handlePointerMove = (e) => {
+            if (!this.isActivePointer(e))
+                return;
+            this.applyPointer(e);
+        };
+        this.handlePointerEnd = (e) => {
+            if (!this.isActivePointer(e))
+                return;
+            this.dragging = false;
+            this.activePointerId = undefined;
+            this.releasePointer(e);
+            // Terminar el gesto DESARMA la bandera (hermano del `endGesture()` de
+            // co-slider). Hoy es defensa y no un fix: este componente no tiene
+            // `disconnectedCallback`, así que nadie vuelve a leerla después del gesto
+            // — en co-slider, que sí lo tiene, la bandera armada le hacía reemitir un
+            // `coChange` con el valor ya escrito en CADA desmontaje. Junto con el
+            // `if (this.dragging)` de `commitInput` (el teclado no la arma), fuera de
+            // un gesto la bandera está SIEMPRE apagada.
+            const huboCambio = this.changedInGesture;
+            this.changedInGesture = false;
+            // Un click sobre el valor actual (o en un extremo ya alcanzado) no cambia
+            // nada: sin coChange, igual que el teclado en el borde. Un commit vacío
+            // entraría al historial de deshacer del editor como paso sin efecto.
+            if (huboCambio)
+                this.coChange.emit(this.value);
+        };
+        // ── Teclado ────────────────────────────────────────────────────────────
+        this.handleKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            const step = e.shiftKey ? 10 : 1;
+            let next;
+            switch (e.key) {
+                case 'ArrowRight':
+                case 'ArrowUp':
+                    next = this.value + step;
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                    next = this.value - step;
+                    break;
+                case 'PageUp':
+                    next = this.value + 10;
+                    break;
+                case 'PageDown':
+                    next = this.value - 10;
+                    break;
+                case 'Home':
+                    next = 0;
+                    break;
+                case 'End':
+                    next = this.max;
+                    break;
+                default: return;
+            }
+            e.preventDefault();
+            // En el borde no hay cambio → sin eventos (un commit vacío ensuciaría el historial).
+            if (this.commitInput(clamp(next, 0, this.max)))
+                this.coChange.emit(this.value);
+        };
+    }
+    get max() {
+        return this.channel === 'alpha' ? 100 : 360;
+    }
+    /** `==`: en jsdom los MouseEvent traen `pointerId` undefined y deben seguir pasando. */
+    isActivePointer(e) {
+        return this.dragging && e.pointerId == this.activePointerId;
+    }
+    /** `setPointerCapture` sigue el gesto fuera del track. jsdom no lo implementa
+     *  y un browser lanza NotFoundError con un pointerId sintético: guardado. */
+    capturePointer(e) {
+        const el = this.trackEl;
+        if (!el || typeof el.setPointerCapture !== 'function' || e.pointerId == null)
+            return;
+        try {
+            el.setPointerCapture(e.pointerId);
+        }
+        catch (_a) {
+            /* pointerId inactivo (evento sintético): sin captura, el gesto sigue dentro del track */
+        }
+    }
+    releasePointer(e) {
+        const el = this.trackEl;
+        if (!el || typeof el.releasePointerCapture !== 'function' || e.pointerId == null)
+            return;
+        try {
+            el.releasePointerCapture(e.pointerId);
+        }
+        catch (_a) {
+            /* ya liberado */
+        }
+    }
+    /** clientX → valor, con el recorrido del thumb inset (centro en [size/2, ancho − size/2]). */
+    applyPointer(e) {
+        var _a, _b;
+        const rect = (_a = this.trackEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect || rect.width <= 0)
+            return;
+        const size = ((_b = this.thumbEl) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || THUMB_SIZE;
+        const travel = Math.max(1, rect.width - size);
+        const ratio = clamp((e.clientX - rect.left - size / 2) / travel, 0, 1);
+        this.commitInput(ratio * this.max);
+    }
+    /** Aplica el valor y emite `coInput` solo si cambió. */
+    commitInput(next) {
+        if (next === this.value)
+            return false;
+        this.value = next;
+        // Solo un GESTO arma la bandera: el teclado también pasa por acá (y cierra
+        // él mismo con su `coChange`), y armarla fuera de un arrastre la dejaba
+        // prendida sin nadie que la apague.
+        if (this.dragging)
+            this.changedInGesture = true;
+        this.coInput.emit(next);
+        return true;
+    }
+    /** Relleno del thumb: el tono puro, o el color base con la opacidad actual sobre damero. */
+    thumbFill(value, color) {
+        if (this.channel === 'alpha') {
+            const mixed = `color-mix(in srgb, ${color} ${value}%, transparent)`;
+            return `linear-gradient(${mixed}, ${mixed}), ${THUMB_CHECKER}`;
+        }
+        return `hsl(${value} 100% 50%)`;
+    }
+    render() {
+        var _a, _b;
+        // `??`: el harness de spec no materializa defaults de class-field.
+        const channel = (_a = this.channel) !== null && _a !== void 0 ? _a : 'hue';
+        const max = this.max;
+        const value = clamp((_b = this.value) !== null && _b !== void 0 ? _b : 0, 0, max);
+        const color = this.color || '#000';
+        const isAlpha = channel === 'alpha';
+        return (h("div", { key: 'd5754d3330b2cd2699ee55a00dfd3b464bde1e3b', class: {
+                'co-color-slider': true,
+                'co-color-slider--disabled': this.disabled,
+                'co-color-slider--dragging': this.dragging,
+            } }, h("div", { key: '65c3e870d834e5bc019f24372e937cb5ae87ca6c', class: {
+                'co-color-slider__track': true,
+                'co-color-slider__track--hue': !isAlpha,
+                'co-color-slider__track--alpha': isAlpha,
+            }, part: "track", style: isAlpha ? { '--co-color-slider-color': color } : undefined, role: "slider", tabIndex: this.disabled ? -1 : 0, "aria-label": this.label || undefined, "aria-valuemin": "0", "aria-valuemax": String(max), "aria-valuenow": String(Math.round(value)), "aria-disabled": this.disabled ? 'true' : undefined, ref: (el) => (this.trackEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerEnd, onPointerCancel: this.handlePointerEnd, onKeyDown: this.handleKeyDown }, h("div", { key: '8553027ec2658d42a0f9df1798223a267ee69681', class: "co-color-thumb co-color-slider__thumb", part: "thumb", ref: (el) => (this.thumbEl = el), style: {
+                '--co-color-slider-ratio': String(value / max),
+                '--co-color-thumb-fill': this.thumbFill(value, color),
+            } }))));
+    }
+    get el() { return getElement(this); }
+};
+CoColorSlider.style = coColorSliderCss();
+
+export { CoColorSlider as co_color_slider };