@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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: 'a0fef13e5a67b2d8c1ac96576d1f75f5187c70cb', 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: 'cac1c98fa890bae489af9b3efb4fb3ec0a06d1ca', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: '545dba15817d7375447a0adb1d472b2accf7b878', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: 'a54ecde8516125b1670716ebd8555d3ac6ca24be', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: '0e3174abeb9761a8a2abca7bbd9ebec0bd3e9dea', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: 'cf7a72c01e63140bc22bde8d87841cbb79bb4f4a', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: 'f2398a1b9bb41f1f2dc039303ec0a6b8c8ccfada', name: "icon-left" }))), h("span", { key: 'de70419bb5a522cd5425096f6da19752736d14b8', class: "co-chip__label" }, h("slot", { key: '6bf611ee5235e60514eb2b3f37040183f7e0032c' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: 'bc36276493cd3ff26ce131c85094125b27791028', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: '8d20d206a23ed7109c5cc40b2beb278fd0e89614', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '28cdb555b65fefcf3e3471aea46fe4ec0d2aad18', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: '009206c164ae5d378481e8512fe8e63c921bb57e', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: '8397bf2f3add45386d34b61964fe6ea5ecb05f70', name: "icon-right" }))), this.removable && (h("span", { key: 'bb95705bdb89959b8bc64a5d692d54dcc2387e0b', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: 'a616ebe4d69c08be3bb908e7da1dcdd15a4c257a', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: '3302ddb23482eaeff3a4ba2de38282f423768b2c', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: '34a716149f174722d7b7a5549821a80ee7cdad63', 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) {
@@ -271,6 +271,8 @@ const CoOptionList = class {
         this.value = '';
         /** Display-items de la selección (para selected-first con ids fuera de página). */
         this.selectedItems = '[]';
+        /** Selección múltiple: `value` es un JSON array de ids y `coChange` emite el
+         *  array completo; con `false` (default) la selección es un solo id. */
         this.multiple = false;
         /** Partición selected-first (snapshot al llamar snapshotOrder()). */
         this.selectedFirst = false;
@@ -288,17 +290,24 @@ const CoOptionList = class {
          *  Independiente de multiple/selectedFirst. No soportado con `virtual`. */
         this.listReorderable = false;
         // ── Search integrado (opcional) ────────────────────────────
+        /** Muestra el buscador integrado arriba de la lista (reflejado como atributo).
+         *  El filtrado lo hace el host al recibir `coSearch`. */
         this.searchable = false;
+        /** Placeholder del buscador integrado. */
         this.searchPlaceholder = 'Search…';
+        /** Espera en ms entre la última tecla y el `coSearch` (default 350). */
         this.searchDebounce = 350;
         /** Pre-seed del término (modo convert de las celdas). */
         this.initialTerm = '';
         // ── Estados ────────────────────────────────────────────────
+        /** Cargando: sin filas muestra un loader en lugar de la lista; con filas,
+         *  un loader al pie. Mientras está activo no se emite `coLoadMore`. */
         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;
+        /** Texto cuando no hay filas y no se está cargando. */
         this.emptyMessage = 'No results found';
         /** Si se setea y hay selección, fila "quitar selección" al tope. */
         this.clearOptionLabel = '';
@@ -309,6 +318,7 @@ const CoOptionList = class {
         this.highlightMatches = false;
         /** Término externo para highlight (input en el host, p.ej. ⌘K). */
         this.highlightTerm = '';
+        /** Forma del `co-avatar` de las filas que traen avatar: `circle` (default) o `square`. */
         this.avatarShape = 'circle';
         /** `end` pinta el suffix como columna a la derecha de la fila (precio/meta),
          *  sin el guion; `inline` = junto al label (default). */
@@ -557,7 +567,6 @@ const CoOptionList = class {
         this.activeIndex = activeId ? this.orderedItems.findIndex((i) => i._id === activeId) : -1;
     }
     // ── 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
@@ -577,6 +586,7 @@ const CoOptionList = class {
             this.takeSnapshot();
         this.coSearch.emit('');
     }
+    /** Re-toma el snapshot selected-first. El host la llama al abrir su panel. */
     async snapshotOrder() {
         this.takeSnapshot();
     }
@@ -957,6 +967,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;
@@ -1008,11 +1021,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: '93ec2aeb43a8f03e918eb068f683efdc93ca4db5', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '617640a5909cbb82f37168f19978be213b0de9e0', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '5e4c73aa4cb53d71e37b628936cb699eee656056', name: "magnifying-glass", size: 16 }), h("input", { key: 'f9497413b2b8d72899051ee0d02f34411936ae8c', 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: '06403a47d664e34d9fa0381affdb32b6d3b8eb56', 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: 'aa17f1da0c46d9df52a0e3f1257ebf385c1ba945', class: "co-option-list__inner" }, showClear && (h("button", { key: 'e88eb444c5b94ebb800e4385515aa13542b2682f', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: 'f1e332a87ba9d83fd2a22150939b135766731dc6', name: "x-circle", size: 14 }), h("span", { key: '26dca00c81dd651982955562fc3747aae88ba536' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '147ffc9fefed3524bfdd08ebfa36fb2e89ff4bb1', class: "co-option-list__loading" }, h("co-loader", { key: 'd4be765a87c8222b5747749fce7787788a4b0aca', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: 'f20612fb93140fff5463e2992e9beec1ccb1fda9', class: "co-option-list__empty" }, h("co-icon", { key: 'aa68b5891aae21c513a069e920ddae0378d0a736', name: "magnifying-glass", size: 20 }), h("span", { key: '2fa339d51962a1898493ba78febcd90d3dbf9310' }, this.emptyMessage))), items.length > 0 && this.virtual
+        return (h("div", { key: 'ca480a23b7127ff745ee57002a71dea707e32e95', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: 'de6a96f09450c05c9194933f3e5f732e158437c7', class: "co-option-list__search", part: "search" }, h("co-icon", { key: 'f99a19e0a194d6a0bcce6d40a736197593af8fdf', name: "magnifying-glass", size: 16 }), h("input", { key: '26fabd78b4660523e25b40bc8e92740df2677244', 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: '05dc7fb2d632ba58b3b960e9355b1e48a71df32c', name: "header" }), h("div", { key: 'b3edc8acf06c7f433da9584249be73d25c5f1fee', 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: '8abe9a20998f35332ee320512a433d8fb8196875', class: "co-option-list__inner" }, showClear && (h("button", { key: '9b420f4a08d94c7588657ec73102253dc3aace29', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '5e0d86b76f5b85ee41a4534284c4e05fec4f2df1', name: "x-circle", size: 14 }), h("span", { key: 'ff554cd331978bbe2e6aaef44b590a9de66c67d5' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '1db10de6bf8b6cda7b7ca13f5969400ab420a3e7', class: "co-option-list__loading" }, h("co-loader", { key: 'd724879c38f755067e544503c233c740f932f46e', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '95f42f0028e6f7a1641bc45f6a294fe2ded5a29f', class: "co-option-list__empty" }, h("co-icon", { key: '1bed6dbd8c0c4e0722f6c28c2867331bba4e3879', name: "magnifying-glass", size: 20 }), h("span", { key: '7f2d01d6eed6e91ab14ace418f52167713963976' }, 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: '147e9bd6f1456284cd223e067b08979efb2cfe2c', class: "co-option-list__loading-more" }, h("co-loader", { key: '6e5b5181d803579ba3370a63849f0462a0685165', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: 'b90b8fce9a427371e3a7de24feb6fce6765dafe1', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '33d6641dc16188f572c70528d54553313b4f4afb', name: "footer" })));
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: '9fb95c0193357bf50eabc21dae3f8ca0bb2b3a9f', class: "co-option-list__loading-more" }, h("co-loader", { key: 'dddf472d61b1c14f281212b02538bd576dce09d1', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '6d4f16d14d67b137fe37b67fe1590d209b51b800', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '9091482eaf2228e93b3eeb893e804d5fcd8c3d44', 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: '6611eb74820088bdd7fd23a915cc5f0fd4b29f17', 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: '480fedf78cd542849742c351c64f1a1f6ec91cbd', 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: '6746d83ad6d123c58a88dd3a236f3288758eb507', 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: 'd37d7b2e7b457cc366006e18f5188dd76171c3bb', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: 'dbb125918398dc5d55f9083e88f0f1948281d5b0', required: this.required }))), h("co-popover", { key: '91b03300c502c85e068e28e235feadf06fbbb76c', 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: 'fec8eb5f52f4a95c478cee49a1a05b8ca93a40b4', 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: '648331ab929d1874f09ebd59d722839312434bcd', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '07f235dfd673b4d31f9fb994eccc7e38d1f866ec', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: 'e6ad5d5190d9341afde82de0c8897249e173463e', 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: '057dabe6f2fd8853f6a1df6d0c1c8d6574393f45', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: '674e0cf71b0a2d1cc367c929196a7876c23c966c', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '001b3df1f014b0039bfe0cdd588aae91d92a78bd', 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: 'a4ab80a67e0bb20037f48b99cca835d17622a776', class: {
+                'co-color-slider': true,
+                'co-color-slider--disabled': this.disabled,
+                'co-color-slider--dragging': this.dragging,
+            } }, h("div", { key: 'd9dd4a75f7b74e73ddd0da15384566d038fd9eff', 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: '62866f901b8090289ab48a8d90ad4ee50fea5bb5', 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 };