@prolibu-suite/cobalt-core 0.9.3 → 0.9.5

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

@@ -23,7 +23,7 @@ const DEFAULT_PRESETS = [
     { name: 'Olive', value: '#AAB43C' },
 ];
 
-const coColorPickerCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-color-picker{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-color-picker--disabled{opacity:0.5;pointer-events:none}.co-color-picker__label{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);padding:0 var(--co-spacing-xs)}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-color-picker co-popover{display:block;width:100%}.co-color-picker__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-color-picker--s .co-color-picker__trigger{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-color-picker--sm .co-color-picker__trigger{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-color-picker--lg .co-color-picker__trigger{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-color-picker--s .co-color-picker__swatch,.co-color-picker--sm .co-color-picker__swatch{width:18px;height:18px}.co-color-picker__trigger:hover{border-color:var(--co-semantic-border-default)}.co-color-picker--open .co-color-picker__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent)}.co-color-picker--error .co-color-picker__trigger{border-color:var(--co-color-status-error)}.co-color-picker__swatch{width:22px;height:22px;box-sizing:border-box;border-radius:var(--co-border-radius-full);border:1px solid var(--co-semantic-border-subtle);flex-shrink:0}.co-color-picker__value{flex:1;font-size:inherit;font-family:inherit;color:var(--co-semantic-text-default);font-weight:500;text-transform:uppercase}.co-color-picker__value--empty{color:var(--co-semantic-text-muted);font-weight:400}.co-color-picker__panel{padding:var(--co-spacing-md);display:flex;flex-direction:column;gap:var(--co-spacing-md)}.co-color-picker__grid{display:grid;grid-template-columns:repeat(8, 1fr);gap:var(--co-spacing-sm2)}.co-color-picker__grid-item{width:32px;height:32px;border-radius:var(--co-border-radius-xxs);border:2px solid transparent;cursor:pointer;transition:transform var(--co-motion-duration-fast) var(--co-motion-ease-out), border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box}.co-color-picker__grid-item:hover{transform:scale(1.1)}.co-color-picker__grid-item--selected{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 25%, transparent)}.co-color-picker__hex-row{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-xs) var(--co-spacing-sm);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xxs)}.co-color-picker__hex-prefix{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:500}.co-color-picker__hex-value{flex:1;font-size:var(--co-font-size-14);font-family:var(--co-font-family-mono, monospace);color:var(--co-semantic-text-default);text-transform:uppercase;user-select:all}.co-color-picker__copy-btn{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-xxs);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-color-picker__copy-btn:hover{color:var(--co-semantic-text-default);background:var(--co-semantic-surface-hover)}.co-color-picker__copy-btn--copied{color:var(--co-color-status-success)}.co-color-picker__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);font-size:var(--co-font-size-14);color:var(--co-semantic-text-muted);padding:0 var(--co-spacing-xs)}.co-color-picker__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-color-picker--error .co-color-picker__helper{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-color-picker{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-color-picker__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-color-picker__label{white-space:normal}:host([layout='horizontal']) .co-color-picker>:not(.co-color-picker__label){grid-column:2;min-width:0}`;
+const coColorPickerCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-color-picker{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-color-picker--disabled{opacity:0.5;pointer-events:none}.co-color-picker__label{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);padding:0 var(--co-spacing-xs)}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-color-picker co-popover{display:block;width:100%}.co-color-picker__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-color-picker--s .co-color-picker__trigger{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-color-picker--sm .co-color-picker__trigger{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-color-picker--lg .co-color-picker__trigger{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-color-picker--s .co-color-picker__swatch,.co-color-picker--sm .co-color-picker__swatch{width:18px;height:18px}.co-color-picker__trigger:hover{border-color:var(--co-semantic-border-default)}.co-color-picker--open .co-color-picker__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent)}.co-color-picker__trigger:focus-visible{outline:none;border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent)}.co-color-picker--error .co-color-picker__trigger{border-color:var(--co-color-status-error)}.co-color-picker__swatch{width:22px;height:22px;box-sizing:border-box;border-radius:var(--co-border-radius-full);border:1px solid var(--co-semantic-border-subtle);flex-shrink:0}.co-color-picker__value{flex:1;font-size:inherit;font-family:inherit;color:var(--co-semantic-text-default);font-weight:500;text-transform:uppercase}.co-color-picker__value--empty{color:var(--co-semantic-text-muted);font-weight:400}.co-color-picker__panel{padding:var(--co-spacing-md);display:flex;flex-direction:column;gap:var(--co-spacing-md)}.co-color-picker__grid{display:grid;grid-template-columns:repeat(8, 1fr);gap:var(--co-spacing-sm2)}.co-color-picker__grid-item{width:32px;height:32px;border-radius:var(--co-border-radius-xxs);border:2px solid transparent;cursor:pointer;transition:transform var(--co-motion-duration-fast) var(--co-motion-ease-out), border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box}.co-color-picker__grid-item:hover{transform:scale(1.1)}.co-color-picker__grid-item--selected{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 25%, transparent)}.co-color-picker__hex-row{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-xs) var(--co-spacing-sm);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xxs)}.co-color-picker__hex-prefix{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:500}.co-color-picker__hex-value{flex:1;font-size:var(--co-font-size-14);font-family:var(--co-font-family-mono, monospace);color:var(--co-semantic-text-default);text-transform:uppercase;user-select:all}.co-color-picker__copy-btn{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-xxs);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-color-picker__copy-btn:hover{color:var(--co-semantic-text-default);background:var(--co-semantic-surface-hover)}.co-color-picker__copy-btn--copied{color:var(--co-color-status-success)}.co-color-picker__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);font-size:var(--co-font-size-14);color:var(--co-semantic-text-muted);padding:0 var(--co-spacing-xs)}.co-color-picker__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-color-picker--error .co-color-picker__helper{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-color-picker{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-color-picker__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-color-picker__label{white-space:normal}:host([layout='horizontal']) .co-color-picker>:not(.co-color-picker__label){grid-column:2;min-width:0}`;
 
 const CoColorPicker = class {
     constructor(hostRef) {
@@ -55,6 +55,19 @@ const CoColorPicker = class {
         };
         this.handlePopoverClose = () => {
             this.isOpen = false;
+            this.restoreTriggerFocus();
+        };
+        this.handleTriggerKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.isOpen = !this.isOpen;
+            }
+            else if (e.key === 'ArrowDown' && !this.isOpen) {
+                e.preventDefault();
+                this.isOpen = true;
+            }
         };
     }
     get parsedPresets() {
@@ -72,10 +85,21 @@ const CoColorPicker = class {
         }
         return DEFAULT_PRESETS;
     }
+    /** Devuelve el foco al trigger al cerrar el panel (Escape, selección),
+     *  salvo que el cierre venga de un click-outside que ya movió el foco a
+     *  otro elemento — en ese caso no robarlo. */
+    restoreTriggerFocus() {
+        var _a;
+        const active = document.activeElement;
+        if (active === this.el || this.el.contains(active)) {
+            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
     handleSwatchClick(hex) {
         this.value = hex;
         this.coChange.emit(hex);
         this.isOpen = false;
+        this.restoreTriggerFocus();
     }
     get statusIcon() {
         const map = {
@@ -99,13 +123,22 @@ const CoColorPicker = class {
         const presets = this.parsedPresets;
         const hasValue = !!this.value;
         const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
-        return (index.h("div", { key: '41a7a80f81aeaf71e1f8429e66aa5511437882fa', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (index.h("label", { key: '96404f15d058b7bc0b2d2c13b6744404cc11769a', class: "co-color-picker__label" }, this.label, index.h(requiredMark.RequiredMark, { key: '16af407f56b58ad6ea649a19aa8a3c96f2caae04', required: this.required }))), index.h("co-popover", { key: '8eb3b862b8618b32d76e862ce003e667801c3262', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("div", { key: '0314b0dbf7404fdb23a0b5cd837b07b5879f85a1', slot: "trigger", class: "co-color-picker__trigger" }, index.h("span", { key: '0d08254d17a15786834c5de548526b6b359a09be', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), index.h("span", { key: 'afbfa48cb5bd140767acdf2e1df35d7e8985948d', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (index.h("div", { key: '9e0d22b668546a175c6e6559c2af5dd0de2a1843', class: "co-color-picker__panel" }, index.h("div", { key: '018fec91282680d660be82b01f340b29f13c73f7', class: "co-color-picker__grid" }, presets.map((preset) => {
+        return (index.h("div", { key: '5b99c6a39399a6731d09115e7fd2ce2d64baffb2', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (index.h("label", { key: '816392c0b3cebcb2e84ea28ea7e6b7976503b6f9', class: "co-color-picker__label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'e0e1c97522f4516763fc663878203e2dafb783b3', required: this.required }))), index.h("co-popover", { key: 'd49ba1f9cd64d2498940247f3ba02897dcc9d2d7', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("div", { key: '1121b429c89fb9cc066cc66564ae547687bf8ed3', 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 }, index.h("span", { key: '2567db35022b5ffdd9921d8bec263c90103fd5f3', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), index.h("span", { key: '7fecc93b5ecc91acf2c874a26ed1f9d8770d9adf', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (index.h("div", { key: '44d904e4156fac15b302ffe86d68cef72bc7518e', class: "co-color-picker__panel", id: CoColorPicker.PANEL_ID, role: "dialog", "aria-label": this.label || this.placeholder }, index.h("div", { key: 'a566f189c87792f0af3e493c00eed7240dcd49c9', class: "co-color-picker__grid" }, presets.map((preset) => {
             var _a;
             return (index.h("button", { type: "button", key: preset.value, class: `co-color-picker__grid-item ${preset.value.toUpperCase() === ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toUpperCase()) ? 'co-color-picker__grid-item--selected' : ''}`, style: { background: preset.value }, title: preset.name, onClick: () => this.handleSwatchClick(preset.value) }));
-        })), hasValue && (index.h("div", { key: '83420abbf343f57fa57804c676fd22e91d2f6816', class: "co-color-picker__hex-row" }, index.h("span", { key: '1b9ce2cdb091734c9d34003c8ce48a165e8763a8', class: "co-color-picker__hex-prefix" }, "#"), index.h("span", { key: '5733ec9110227e3ffa45c15c294629cfe420c485', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), index.h("button", { key: '249b0f7eb80517c89ecaa11c09cf64ae70fd3d52', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, index.h("co-icon", { key: 'aed9a2fe68c39047e6027c76c185a1cfc5abb097', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (index.h("div", { key: '276d4f39ca9f5be6add8bd2ae423a02960f82581', class: "co-color-picker__helper" }, this.statusIcon && (index.h("co-icon", { key: '4f4323dc9f3d26581fb6ec1f5bd1e668e9a45011', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), index.h("span", { key: 'ee725d0ce3a30985a71bf2d34e5e64124f89891b', class: "co-color-picker__helper-text" }, this.helperText)))));
+        })), hasValue && (index.h("div", { key: 'bae8ffe387fe30710b654975379e70a4b3724ec9', class: "co-color-picker__hex-row" }, index.h("span", { key: '671a5a64abc2f824c8d1ef8c2404023d8d51c28d', class: "co-color-picker__hex-prefix" }, "#"), index.h("span", { key: '3a6742eb528c5a92fe16b2f2e5d8b2ebdf885450', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), index.h("button", { key: 'f53957b494dbed0648d32fcb743673a2ada063b4', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, index.h("co-icon", { key: 'c99e611beddc2108f3973ecee4f6012423cffd23', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (index.h("div", { key: '1d6a6e97eab1eafcb9265944693cb0d1121e04ee', class: "co-color-picker__helper" }, this.statusIcon && (index.h("co-icon", { key: 'bcf943836fddf264cede2f339844f35aa167002f', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), index.h("span", { key: 'a439c4d102d17d0d6c9e55757dcf43ec8b3ade8f', class: "co-color-picker__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
 };
+/**
+ * Id del panel de presets, target de `aria-controls` del trigger. Constante
+ * (no aleatoria): vive en el shadow root de ESTA instancia, donde los ids no
+ * colisionan con los de otras.
+ *
+ * El trigger solo emite `aria-controls` mientras `isOpen`: el panel se monta
+ * on-demand, así que cerrado el IDREF quedaría colgante.
+ */
+CoColorPicker.PANEL_ID = 'co-color-picker-panel';
 CoColorPicker.style = coColorPickerCss();
 
 exports.co_color_picker = CoColorPicker;

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

@@ -4,7 +4,7 @@ var index = require('./index-DK-2Lzmf.js');
 var requiredMark = require('./requiredMark-C1xcrzSZ.js');
 var normalizeText = require('./normalizeText-B-v-XPKf.js');
 
-const coComboboxCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-combobox{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-combobox__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-combobox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-combobox__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-combobox__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);overflow:hidden}.co-combobox--s .co-combobox__trigger{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-combobox--sm .co-combobox__trigger{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-combobox--lg .co-combobox__trigger{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-combobox--open .co-combobox__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-combobox--disabled .co-combobox__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-combobox__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__icon{color:var(--co-semantic-text-disabled)}.co-combobox__input-wrapper{flex:1;display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-width:0;min-height:22px;padding:0;overflow:hidden}.co-combobox__input-wrapper co-chip{--co-chip-max-width:120px;--co-chip-bg:var(--co-semantic-surface-muted);--co-chip-color:var(--co-semantic-text-default);--co-chip-border:1px solid var(--co-semantic-border-subtle);flex-shrink:0}.co-combobox__overflow-badge{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-status-info, #2d6cc5);color:var(--co-color-base-blanco, #fff);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-10);font-weight:600;line-height:1;white-space:nowrap}.co-combobox__text{color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-combobox__text--placeholder{color:var(--co-semantic-text-muted)}.co-combobox--disabled .co-combobox__text{color:var(--co-semantic-text-disabled)}.co-combobox__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-combobox__clear:hover{color:var(--co-semantic-text-default)}.co-combobox__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__caret{color:var(--co-semantic-text-disabled)}.co-combobox__dropdown{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-combobox__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-combobox__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-combobox__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-combobox__helper--error .co-combobox__helper-icon,.co-combobox__helper--error .co-combobox__helper-text{color:var(--co-semantic-status-error)}.co-combobox__helper--success .co-combobox__helper-icon,.co-combobox__helper--success .co-combobox__helper-text{color:var(--co-semantic-status-success)}.co-combobox__helper--warning .co-combobox__helper-icon,.co-combobox__helper--warning .co-combobox__helper-text{color:var(--co-color-status-review)}.co-combobox__helper--info .co-combobox__helper-icon,.co-combobox__helper--info .co-combobox__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-combobox{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-combobox__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-combobox__label{white-space:normal}:host([layout='horizontal']) .co-combobox>:not(.co-combobox__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}`;
+const coComboboxCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-combobox{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-combobox__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-combobox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-combobox__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-combobox__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);overflow:hidden}.co-combobox--s .co-combobox__trigger{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-combobox--sm .co-combobox__trigger{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-combobox--lg .co-combobox__trigger{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-combobox--open .co-combobox__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-combobox__trigger:focus-visible{outline:none;border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-combobox--disabled .co-combobox__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-combobox__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__icon{color:var(--co-semantic-text-disabled)}.co-combobox__input-wrapper{flex:1;display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-width:0;min-height:22px;padding:0;overflow:hidden}.co-combobox__input-wrapper co-chip{--co-chip-max-width:120px;--co-chip-bg:var(--co-semantic-surface-muted);--co-chip-color:var(--co-semantic-text-default);--co-chip-border:1px solid var(--co-semantic-border-subtle);flex-shrink:0}.co-combobox__overflow-badge{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-status-info, #2d6cc5);color:var(--co-color-base-blanco, #fff);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-10);font-weight:600;line-height:1;white-space:nowrap}.co-combobox__text{color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-combobox__text--placeholder{color:var(--co-semantic-text-muted)}.co-combobox--disabled .co-combobox__text{color:var(--co-semantic-text-disabled)}.co-combobox__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-combobox__clear:hover{color:var(--co-semantic-text-default)}.co-combobox__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__caret{color:var(--co-semantic-text-disabled)}.co-combobox__dropdown{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-combobox__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-combobox__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-combobox__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-combobox__helper--error .co-combobox__helper-icon,.co-combobox__helper--error .co-combobox__helper-text{color:var(--co-semantic-status-error)}.co-combobox__helper--success .co-combobox__helper-icon,.co-combobox__helper--success .co-combobox__helper-text{color:var(--co-semantic-status-success)}.co-combobox__helper--warning .co-combobox__helper-icon,.co-combobox__helper--warning .co-combobox__helper-text{color:var(--co-color-status-review)}.co-combobox__helper--info .co-combobox__helper-icon,.co-combobox__helper--info .co-combobox__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-combobox{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-combobox__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-combobox__label{white-space:normal}:host([layout='horizontal']) .co-combobox>:not(.co-combobox__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}`;
 
 const CoCombobox = class {
     constructor(hostRef) {
@@ -58,6 +58,24 @@ const CoCombobox = class {
             if (this.disabled)
                 e.stopPropagation();
         };
+        this.handleTriggerKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            // Solo las teclas del PROPIO trigger togglean el dropdown. Los botones
+            // internos (clear, "x" de los chips) llevan tabIndex={-1} pero quedan
+            // focuseados al clickearlos: su Enter/Space debe activarlos de forma
+            // nativa, no abrir/cerrar el panel bajo ellos.
+            if (e.target !== this.triggerEl)
+                return;
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.isOpen = !this.isOpen;
+            }
+            else if (e.key === 'ArrowDown' && !this.isOpen) {
+                e.preventDefault();
+                this.isOpen = true;
+            }
+        };
         this.handlePopoverOpen = () => {
             console.log('[co-combobox] handlePopoverOpen called');
             this.isOpen = true;
@@ -187,6 +205,7 @@ const CoCombobox = class {
         }
         else {
             this.coClose.emit();
+            this.restoreTriggerFocus();
         }
     }
     onValueChange() {
@@ -243,16 +262,26 @@ const CoCombobox = class {
             this.overflowCount = hiddenCount;
         }
     }
+    /** Devuelve el foco al trigger al cerrar el panel (Escape, selección),
+     *  salvo que el cierre venga de un click-outside que ya movió el foco a
+     *  otro elemento — en ese caso no robarlo. */
+    restoreTriggerFocus() {
+        var _a;
+        const active = document.activeElement;
+        if (active === this.el || this.el.contains(active)) {
+            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
     render() {
-        return (index.h("div", { key: '115947444bbca6363647eadfa82af752c5e9c59a', class: {
+        return (index.h("div", { key: '37a1a6c5d14a61e45a522024b1aecf9ef3421cb5', class: {
                 'co-combobox': true,
                 'co-combobox--open': this.isOpen,
                 'co-combobox--disabled': this.disabled,
                 [`co-combobox--${this.size}`]: true,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (index.h("div", { key: '775183563b76c909d4d566b0f829a3a7cf7927f2', class: "co-combobox__labels" }, this.label && index.h("label", { key: '38441f5d492f9c0976fb20f299d82ac6129b2ef6', class: "co-combobox__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: '921136617ac8082a7f54e21fd4954e2a8a25870f', required: this.required })), this.secondaryLabel && (index.h("span", { key: 'f93bc3b87b8d16736f2326a54cc63799612fd7b2', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), index.h("co-popover", { key: '295160e48bacd17ee7ec69b8f1c77da2436acbe5', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("div", { key: 'e0f2595637c0e2362d6b07e36302c8080b31064a', slot: "trigger", class: "co-combobox__trigger", part: "trigger", onClick: this.handleTriggerClick }, this.iconLeft && (index.h("co-icon", { key: '560b912264de5ebf0e05c1e67afcd85c7e890d5f', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), index.h("div", { key: '455830491a53919efc40396c7664576e583f19ab', class: "co-combobox__input-wrapper", ref: (el) => (this.chipContainerEl = el) }, this.multiple && this.hasValue ? (this.selectedOptions.map(opt => (index.h("co-chip", { size: "small", "icon-mode": "both", label: opt.label }, index.h("co-icon", { slot: "icon-left", name: opt.icon || 'circle', size: 10 }), index.h("co-icon", { slot: "icon-right", name: "x-circle", size: 10, weight: "fill", onClick: (e) => { e.stopPropagation(); this.handleListRemove(opt.value); } }))))) : (index.h("span", { class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (index.h("div", { key: '4db14a62bbdbd01088df7279939cce69eb30f9a3', class: "co-combobox__labels" }, this.label && index.h("label", { key: '294744758ea6e99f1c68c3b612269aa5fb38e838', class: "co-combobox__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: '17c9fd9fe7cac0abd1f6b8bee4f31a9e536758fb', required: this.required })), this.secondaryLabel && (index.h("span", { key: '457e35ca2dd250a7ecd5c36980ced045fb46f319', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), index.h("co-popover", { key: '54fdc55762dcf268d1522c345968d39f26fc768e', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("div", { key: '0bb104f5e51e7ea5b36d7325e178c7c7eadde05c', slot: "trigger", class: "co-combobox__trigger", part: "trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": this.isOpen ? CoCombobox.LIST_ID : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (index.h("co-icon", { key: 'ebdfa267be7257aaa2b187fc867cb5d334d91319', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), index.h("div", { key: '77671cfffe0d593242c776316292dec69af64ed6', class: "co-combobox__input-wrapper", ref: (el) => (this.chipContainerEl = el) }, this.multiple && this.hasValue ? (this.selectedOptions.map(opt => (index.h("co-chip", { size: "small", "icon-mode": "both", label: opt.label }, index.h("co-icon", { slot: "icon-left", name: opt.icon || 'circle', size: 10 }), index.h("co-icon", { slot: "icon-right", name: "x-circle", size: 10, weight: "fill", onClick: (e) => { e.stopPropagation(); this.handleListRemove(opt.value); } }))))) : (index.h("span", { class: {
                 'co-combobox__text': true,
                 'co-combobox__text--placeholder': !this.hasValue,
-            } }, this.hasValue ? this.displayText : this.placeholder))), this.multiple && this.overflowCount > 0 && (index.h("span", { key: 'cd033364eb722a95343b8fd1229d1bd4e86ac6eb', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (index.h("button", { key: '9734b00f8d48310ec7643ecad7c37dc67b8d10a5', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, index.h("co-icon", { key: 'b5b4441482bd896ca54e651dd491ea947a72a163', name: "x-circle", size: 16, weight: "fill" }))), index.h("co-icon", { key: '2c1e33a3a5e13d77d7c4a646be2f723021608ce1', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), index.h("div", { key: '2860fe141048ca0e6eb3fd4d0354fec49d1a9234', class: "co-combobox__dropdown", part: "dropdown" }, this.isOpen && (index.h("co-option-list", { key: '04a725a827b086bcd2942ca96b1e2739a459ac57', ref: (el) => (this.optionListEl = el), items: this.listItemsJson, value: this.multiple ? JSON.stringify(this.selectedValues) : (this.selectedValues[0] || ''), multiple: this.multiple, selectedAffordance: "check", removableItems: this.multiple, virtual: true, searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: 0, highlightMatches: true, emptyMessage: this.emptyMessage, onCoSearch: (e) => { this.searchQuery = e.detail; }, onCoChange: (e) => this.handleListChange(e.detail), onCoRemoveItem: (e) => this.handleListRemove(e.detail) }, this.showFooter && (index.h("co-list-footer", { key: '40f9a6ba691c5766bd5d9c0dcf8cb9c467139ba7', slot: "footer", secondaryLabel: this.footerSecondaryLabel, primaryLabel: this.footerPrimaryLabel, onCoSecondary: this.handleFooterSecondary, onCoPrimary: this.handleFooterPrimary })))))), this.helperText && (index.h("div", { key: 'e518fc76d1e94f2a9cf74e3ea6f934966b24f837', class: `co-combobox__helper co-combobox__helper--${this.status}`, part: "helper" }, this.statusIcon && index.h("co-icon", { key: '72e7890676a61ff832894bf92530a032c6c5c85d', name: this.statusIcon, size: 14, weight: "fill", class: "co-combobox__helper-icon" }), index.h("span", { key: 'c5bf6bf198c8380cd787214e68eb2eacadb88f44', class: "co-combobox__helper-text" }, this.helperText)))));
+            } }, this.hasValue ? this.displayText : this.placeholder))), this.multiple && this.overflowCount > 0 && (index.h("span", { key: 'c230748247efc705f21f299254c24b717d7f5af7', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (index.h("button", { key: 'b8acd2eeeb17ec672912886e7dfa67abd1026927', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, index.h("co-icon", { key: 'd21e7dec49db82e5514a1562b60596d51ee69094', name: "x-circle", size: 16, weight: "fill" }))), index.h("co-icon", { key: '51becab683f82d56d93599e701025a640822127c', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), index.h("div", { key: '8d21ea81c9c5ca9500359f7cedadf12328e4c5eb', class: "co-combobox__dropdown", part: "dropdown" }, this.isOpen && (index.h("co-option-list", { key: '066a18d85a356c238ff9ced3721c1d3280bce4c8', id: CoCombobox.LIST_ID, ref: (el) => (this.optionListEl = el), items: this.listItemsJson, value: this.multiple ? JSON.stringify(this.selectedValues) : (this.selectedValues[0] || ''), multiple: this.multiple, selectedAffordance: "check", removableItems: this.multiple, virtual: true, searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: 0, highlightMatches: true, emptyMessage: this.emptyMessage, onCoSearch: (e) => { this.searchQuery = e.detail; }, onCoChange: (e) => this.handleListChange(e.detail), onCoRemoveItem: (e) => this.handleListRemove(e.detail) }, this.showFooter && (index.h("co-list-footer", { key: '11d5f3fd067ac246e2068bc33a7ef938efef8829', slot: "footer", secondaryLabel: this.footerSecondaryLabel, primaryLabel: this.footerPrimaryLabel, onCoSecondary: this.handleFooterSecondary, onCoPrimary: this.handleFooterPrimary })))))), this.helperText && (index.h("div", { key: 'aea733779599bf85e1060062b9664821bcd1f003', class: `co-combobox__helper co-combobox__helper--${this.status}`, part: "helper" }, this.statusIcon && index.h("co-icon", { key: '629698daf7e0005c8849062777daf8b329fe969c', name: this.statusIcon, size: 14, weight: "fill", class: "co-combobox__helper-icon" }), index.h("span", { key: 'd91bd4fdadedb2eebbe4a2a3c5d033978cb8db76', class: "co-combobox__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -264,6 +293,17 @@ const CoCombobox = class {
             }]
     }; }
 };
+/**
+ * Id del <co-option-list> del dropdown, target de `aria-controls` del
+ * trigger. Constante (no aleatoria): vive en el shadow root de ESTA
+ * instancia, donde los ids no colisionan con los de otras. Se referencia el
+ * HOST de la primitiva — su listbox interno queda tras su propio shadow
+ * boundary y no es direccionable desde acá (limitación conocida y aceptada).
+ *
+ * El trigger solo emite `aria-controls` mientras `isOpen`: la lista se monta
+ * on-demand, así que cerrado el IDREF quedaría colgante.
+ */
+CoCombobox.LIST_ID = 'co-combobox-list';
 CoCombobox.style = coComboboxCss();
 
 exports.co_combobox = CoCombobox;

package/dist/cjs/co-event-popover.cjs.entry.js

@@ -91,7 +91,10 @@ const CoEventPopover = class {
         // Dialog-pattern focus: focus the panel itself (tabIndex=-1). Slotted actions
         // live in light DOM and co-icon-button is shadow — querySelector here can't
         // reach them; Tab from the panel lands on the first slotted action naturally.
-        this.panelEl.focus();
+        // preventScroll: an out-of-viewport panel (month view) would auto-scroll on
+        // focus, which the scroll-close listener below caught in the same frame —
+        // the popover opened and closed before paint (the "click does nothing" bug).
+        this.panelEl.focus({ preventScroll: true });
         window.addEventListener('resize', this.onScroll);
         window.addEventListener('scroll', this.onScroll, true);
         window.addEventListener('keydown', this.onKeydown, true);
@@ -115,7 +118,7 @@ const CoEventPopover = class {
         this.coClose.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '2bf728a720fb724085b945b4128a4bad5831b870' }, index.h("div", { key: '81bf88204d662d59a9b4d0b2148063e8244287c3', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, index.h("div", { key: '1dae9ef8ef905f269946cb0a842636d77af46e66', class: "pop__actions", part: "actions" }, index.h("slot", { key: 'ce5a5fa4ea60a6649d323953dbfa2cccd8840f7c', name: "actions" })), index.h("div", { key: '019f8e05e990563069e33dd1936655df664085ae', class: "pop__head" }, this.dot && index.h("span", { key: 'a1f11545250cbf9fb900840dfca4d6721cb98852', class: "pop__dot", style: this.color ? { background: this.color } : {} }), index.h("div", { key: 'e81876518297dde46ef6288538c4e471b5eab521', class: "pop__body", part: "body" }, index.h("slot", { key: '9818f107cee7d29278b58efd1af3109d345651b4' }))))));
+        return (index.h(index.Host, { key: '4a80f76492bda89a6082b4794f0c924ec929dc85' }, index.h("div", { key: 'e8ede438958439ae0e9f2689da9fcc88419b9837', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, index.h("div", { key: 'f09ced9c1d8e312df3218929b267e976c64207e8', class: "pop__actions", part: "actions" }, index.h("slot", { key: '6cfe39bfca0783530950a4e9c482b17f2104157d', name: "actions" })), index.h("div", { key: '1f3938226f5767fd39d1e80c28f01f2daf023540', class: "pop__head" }, this.dot && index.h("span", { key: '729486152ea2ab84a72270deeef917ae89ddcdba', class: "pop__dot", style: this.color ? { background: this.color } : {} }), index.h("div", { key: '2b9f20c48495de4327ae9e27cf1fd305a860dc39', class: "pop__body", part: "body" }, index.h("slot", { key: '675ce278c7de391af91e8c9235a35aa85964726d' }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/co-file-field.cjs.entry.js

@@ -21,6 +21,7 @@ const DICT = {
         uploadedTitle: 'Archivos subidos',
         removeFile: 'Eliminar archivo',
         copyUrl: 'Copiar enlace',
+        downloadFile: 'Descargar',
         copied: 'Copiado',
         dragToReorder: 'Arrastra para reordenar',
         openPreview: 'Abrir vista previa',
@@ -37,6 +38,7 @@ const DICT = {
         uploadedTitle: 'Uploaded files',
         removeFile: 'Remove file',
         copyUrl: 'Copy link',
+        downloadFile: 'Download',
         copied: 'Copied',
         dragToReorder: 'Drag to reorder',
         openPreview: 'Open preview',
@@ -53,6 +55,7 @@ const DICT = {
         uploadedTitle: 'Arquivos enviados',
         removeFile: 'Remover arquivo',
         copyUrl: 'Copiar link',
+        downloadFile: 'Baixar',
         copied: 'Copiado',
         dragToReorder: 'Arraste para reordenar',
         openPreview: 'Abrir pré-visualização',
@@ -128,7 +131,7 @@ function previewSrc(item) {
     return hasImageExtension(item) ? item.url || item.thumbnail : item.thumbnail || item.url;
 }
 
-const coFileFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-file-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-file-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-file-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-spacing-md);padding:var(--co-spacing-4xl) var(--co-spacing-2xl);background:color-mix(in srgb, var(--co-semantic-surface-hover) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px dashed var(--co-semantic-border-field);border-radius:var(--co-border-radius-sm);cursor:pointer;text-align:center;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__dropzone:hover{border-color:var(--co-semantic-border-focus)}.co-file-field__dropzone--drag{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__upload-btn{display:inline-flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-md) var(--co-spacing-xl);margin-bottom:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);border:none;border-radius:var(--co-border-radius-full);box-shadow:var(--co-shadow-lg);font-family:inherit;font-size:var(--co-font-size-16);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;cursor:pointer;transition:box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__upload-btn:hover{box-shadow:var(--co-shadow-xl, var(--co-shadow-lg));transform:translateY(-1px)}.co-file-field__upload-btn co-icon{display:inline-flex;flex-shrink:0}.co-file-field__dropzone-text{color:var(--co-semantic-text-default);font-size:var(--co-font-size-18);line-height:1.25}.co-file-field__dropzone-hint{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);line-height:1.25}.co-file-field__actions{display:contents}.co-file-field__input{display:none}.co-file-field__uploaded{display:flex;flex-direction:column;gap:var(--co-spacing-lg);margin-top:var(--co-spacing-sm2)}.co-file-field__uploaded-title{color:var(--co-semantic-text-default);font-size:var(--co-font-size-22);font-weight:500;letter-spacing:-0.03em;line-height:1.25}.co-file-field__previews{display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 180px));gap:var(--co-spacing-md)}.co-file-field__preview{padding:0;border:none;border-radius:var(--co-border-radius-sm);overflow:hidden;aspect-ratio:3 / 2;background:var(--co-semantic-surface-hover);cursor:pointer}.co-file-field__preview img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-file-field__preview:hover img{transform:scale(1.02)}.co-file-field__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__row{display:flex;align-items:center;gap:var(--co-spacing-lg);padding:var(--co-spacing-xl);background:var(--co-semantic-surface-hover);border:1px solid transparent;border-radius:var(--co-border-radius-sm)}.co-file-field__row--error{border-color:var(--co-semantic-status-error)}.co-file-field__row--dragging{opacity:0.5}.co-file-field__row--drop-target{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__drag-handle{flex-shrink:0;display:flex;align-items:center;color:var(--co-semantic-text-secondary);cursor:grab}.co-file-field__drag-handle:active{cursor:grabbing}.co-file-field__row-icon{flex-shrink:0;color:var(--co-semantic-text-secondary);display:flex;align-items:center}.co-file-field__row--error .co-file-field__row-icon{color:var(--co-semantic-status-error)}.co-file-field__row-icon--spin{animation:co-file-spin 0.8s linear infinite}@keyframes co-file-spin{to{transform:rotate(360deg)}}.co-file-field__row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--co-spacing-xs)}.co-file-field__row-name{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-file-field__row-error{color:var(--co-semantic-status-error);font-size:var(--co-font-size-12)}.co-file-field__row-size{flex-shrink:0;color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1;white-space:nowrap}.co-file-field__progress{position:relative;height:4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-hover);overflow:hidden}.co-file-field__progress-bar{position:absolute;inset:0;width:40%;border-radius:var(--co-border-radius-full);background:var(--co-semantic-status-info);transition:width var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-file-field__progress-bar:not([style]){animation:co-file-indeterminate 1.2s ease-in-out infinite}@keyframes co-file-indeterminate{0%{left:-40%}100%{left:100%}}.co-file-field__action{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-secondary);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__action:hover{color:var(--co-semantic-text-default)}.co-file-field__action--copied,.co-file-field__action--copied:hover{color:var(--co-color-primary-verde)}.co-file-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-file-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-file-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);line-height:1}.co-file-field--disabled{opacity:0.6;pointer-events:none}.co-file-field--invalid .co-file-field__dropzone,.co-file-field--error .co-file-field__dropzone{border-color:var(--co-semantic-status-error)}.co-file-field__helper--error .co-file-field__helper-icon,.co-file-field__helper--error .co-file-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-file-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-file-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-file-field__label{white-space:normal}:host([layout='horizontal']) .co-file-field>:not(.co-file-field__labels){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-file-field__dropzone{background:var(--co-semantic-surface-hover)}}`;
+const coFileFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-file-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-file-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-file-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-spacing-md);padding:var(--co-spacing-4xl) var(--co-spacing-2xl);background:color-mix(in srgb, var(--co-semantic-surface-hover) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px dashed var(--co-semantic-border-field);border-radius:var(--co-border-radius-sm);cursor:pointer;text-align:center;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__dropzone:hover{border-color:var(--co-semantic-border-focus)}.co-file-field__dropzone--drag{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__upload-btn{display:inline-flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-md) var(--co-spacing-xl);margin-bottom:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);border:none;border-radius:var(--co-border-radius-full);box-shadow:var(--co-shadow-lg);font-family:inherit;font-size:var(--co-font-size-16);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;cursor:pointer;transition:box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__upload-btn:hover{box-shadow:var(--co-shadow-xl, var(--co-shadow-lg));transform:translateY(-1px)}.co-file-field__upload-btn co-icon{display:inline-flex;flex-shrink:0}.co-file-field__dropzone-text{color:var(--co-semantic-text-default);font-size:var(--co-font-size-18);line-height:1.25}.co-file-field__dropzone-hint{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);line-height:1.25}.co-file-field__actions{display:contents}.co-file-field__input{display:none}.co-file-field__uploaded{display:flex;flex-direction:column;gap:var(--co-spacing-lg);margin-top:var(--co-spacing-sm2)}.co-file-field__uploaded-title{color:var(--co-semantic-text-default);font-size:var(--co-font-size-22);font-weight:500;letter-spacing:-0.03em;line-height:1.25}.co-file-field__previews{display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 180px));gap:var(--co-spacing-md)}.co-file-field__preview{padding:0;border:none;border-radius:var(--co-border-radius-sm);overflow:hidden;aspect-ratio:3 / 2;background:var(--co-semantic-surface-hover);cursor:pointer}.co-file-field__preview img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-file-field__preview:hover img{transform:scale(1.02)}.co-file-field__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__row{display:flex;align-items:center;gap:var(--co-spacing-lg);padding:var(--co-spacing-xl);background:var(--co-semantic-surface-hover);border:1px solid transparent;border-radius:var(--co-border-radius-sm)}.co-file-field__row--error{border-color:var(--co-semantic-status-error)}.co-file-field__row--dragging{opacity:0.5}.co-file-field__row--drop-target{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__drag-handle{flex-shrink:0;display:flex;align-items:center;color:var(--co-semantic-text-secondary);cursor:grab}.co-file-field__drag-handle:active{cursor:grabbing}.co-file-field__row-icon{flex-shrink:0;color:var(--co-semantic-text-secondary);display:flex;align-items:center}.co-file-field__row--error .co-file-field__row-icon{color:var(--co-semantic-status-error)}.co-file-field__row-icon--spin{animation:co-file-spin 0.8s linear infinite}@keyframes co-file-spin{to{transform:rotate(360deg)}}.co-file-field__row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--co-spacing-xs)}.co-file-field__row-name{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-file-field__row-error{color:var(--co-semantic-status-error);font-size:var(--co-font-size-12)}.co-file-field__row-size{flex-shrink:0;color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1;white-space:nowrap}.co-file-field__progress{position:relative;height:4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-hover);overflow:hidden}.co-file-field__progress-bar{position:absolute;inset:0;width:40%;border-radius:var(--co-border-radius-full);background:var(--co-semantic-status-info);transition:width var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-file-field__progress-bar:not([style]){animation:co-file-indeterminate 1.2s ease-in-out infinite}@keyframes co-file-indeterminate{0%{left:-40%}100%{left:100%}}.co-file-field__action{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;text-decoration:none;color:var(--co-semantic-text-secondary);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__action:hover{color:var(--co-semantic-text-default)}.co-file-field__action--copied,.co-file-field__action--copied:hover{color:var(--co-color-primary-verde)}.co-file-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-file-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-file-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);line-height:1}.co-file-field--disabled{opacity:0.6;pointer-events:none}.co-file-field--invalid .co-file-field__dropzone,.co-file-field--error .co-file-field__dropzone{border-color:var(--co-semantic-status-error)}.co-file-field__helper--error .co-file-field__helper-icon,.co-file-field__helper--error .co-file-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-file-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-file-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-file-field__label{white-space:normal}:host([layout='horizontal']) .co-file-field>:not(.co-file-field__labels){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-file-field__dropzone{background:var(--co-semantic-surface-hover)}}`;
 
 const CoFileField = class {
     constructor(hostRef) {
@@ -473,7 +476,10 @@ const CoFileField = class {
                     [`co-file-field__row--${item.status}`]: true,
                     'co-file-field__row--dragging': this.dragKey === key,
                     'co-file-field__row--drop-target': this.overKey === key,
-                }, part: "row", key: key, draggable: this.armedKey === key, onDragStart: (e) => this.handleRowDragStart(e, key), onDragOver: (e) => this.handleRowDragOver(e, key), onDrop: (e) => this.handleRowDrop(e, key), onDragEnd: this.handleRowDragEnd }, draggable ? (index.h("span", { class: "co-file-field__drag-handle", part: "drag-handle", title: s.dragToReorder, onMouseDown: () => (this.armedKey = key) }, index.h("co-icon", { name: "list", size: 18 }))) : (index.h("co-icon", { name: item.status === 'error'
+                }, part: "row", key: key, draggable: this.armedKey === key, onDragStart: (e) => this.handleRowDragStart(e, key), onDragOver: (e) => this.handleRowDragOver(e, key), onDrop: (e) => this.handleRowDrop(e, key), onDragEnd: this.handleRowDragEnd }, draggable ? (
+            // Regla del DS: control icon-only → co-tooltip, nunca `title`
+            // nativo (se pinta con el estilo del SO). Ver CLAUDE.md raíz.
+            index.h("co-tooltip", { content: s.dragToReorder }, index.h("span", { class: "co-file-field__drag-handle", part: "drag-handle", onMouseDown: () => (this.armedKey = key) }, index.h("co-icon", { name: "list", size: 18 })))) : (index.h("co-icon", { name: item.status === 'error'
                     ? 'warning-circle'
                     : item.status === 'uploading'
                         ? 'spinner-gap'
@@ -482,14 +488,14 @@ const CoFileField = class {
                     'co-file-field__row-icon--spin': item.status === 'uploading',
                 } })), index.h("div", { class: "co-file-field__row-body" }, index.h("span", { class: "co-file-field__row-name", title: item.name }, truncateLeft(item.name)), item.status === 'uploading' && (index.h("div", { class: "co-file-field__progress" }, index.h("div", { class: "co-file-field__progress-bar", style: typeof item.progress === 'number'
                     ? { width: `${item.progress}%` }
-                    : undefined }))), item.status === 'error' && item.error && (index.h("span", { class: "co-file-field__row-error" }, item.error))), item.size != null && (index.h("span", { class: "co-file-field__row-size" }, formatBytes(item.size))), item.status === 'done' && !!item.url && (index.h("button", { class: {
+                    : undefined }))), item.status === 'error' && item.error && (index.h("span", { class: "co-file-field__row-error" }, item.error))), item.size != null && (index.h("span", { class: "co-file-field__row-size" }, formatBytes(item.size))), item.status === 'done' && !!item.url && (index.h("co-tooltip", { content: s.downloadFile }, index.h("a", { class: "co-file-field__action", href: item.url, target: "_blank", rel: "noopener noreferrer", download: item.name, tabIndex: -1, "aria-label": s.downloadFile }, index.h("co-icon", { name: "download", size: 18 })))), item.status === 'done' && !!item.url && (index.h("co-tooltip", { content: this.copiedKey === key ? s.copied : s.copyUrl }, index.h("button", { class: {
                     'co-file-field__action': true,
                     'co-file-field__action--copied': this.copiedKey === key,
-                }, type: "button", tabIndex: -1, title: this.copiedKey === key ? s.copied : s.copyUrl, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, index.h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 }))), !this.disabled && !this.readonly && (index.h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, title: s.removeFile, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, index.h("co-icon", { name: "trash", size: 18 })))));
-        })))), helper && (index.h("div", { key: 'fce82b34f47fbf65872fbd5dea20a87b4c99ae12', class: {
+                }, type: "button", tabIndex: -1, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, index.h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 })))), !this.disabled && !this.readonly && (index.h("co-tooltip", { content: s.removeFile }, index.h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, index.h("co-icon", { name: "trash", size: 18 }))))));
+        })))), helper && (index.h("div", { key: 'd05514a8115362aa08a872baaf1293a55048ad79', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: '920361c5833f0252673779b716f872af151ae4b2', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), index.h("span", { key: '6711fa168985fb206fdb79533834e4d8548da3dd', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: '0e5f2c0feb7dff2da1d549b498ed1e7ae6051448', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), index.h("span", { key: '716ea5cc929a44f1da1984952da2bb5a9ce0a791', class: "co-file-field__helper-text" }, helper)))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/co-icon-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DK-2Lzmf.js');
 
-const coIconButtonCss = () => `:host{display:inline-flex}.co-icon-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;outline:none;padding:0;flex-shrink:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out),     background var(--co-motion-duration-fast) var(--co-motion-ease-out),     transform var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box;-webkit-font-smoothing:antialiased;-webkit-backdrop-filter:var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));backdrop-filter:var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)))}.co-icon-button--filled{background:color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);color:var(--co-semantic-on-primary);border-color:color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent)}.co-icon-button--outlined{background:color-mix(in srgb, var(--co-icon-button-bg, var(--co-semantic-surface-secondary)) 55%, transparent);color:var(--co-icon-button-color, var(--co-semantic-on-secondary));border:1px solid var(--co-icon-button-border, var(--co-semantic-border-subtle))}.co-icon-button--ghost{background:transparent;color:var(--co-icon-button-color, var(--co-semantic-text-default));border:none;-webkit-backdrop-filter:none;backdrop-filter:none}.co-icon-button--ghost:hover:not(:disabled){background:var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-icon-button--dark{color:var(--co-icon-button-color, var(--co-color-base-blanco, #fff))}.co-icon-button--dark.co-icon-button--ghost:hover:not(:disabled){background:var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16))}.co-icon-button--rounded.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-border-radius-full)}.co-icon-button--square.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-xl);}.co-icon-button--square.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-sm);}.co-icon-button--square.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-xs);}.co-icon-button--square.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-spacing-sm);}.co-icon-button--xl ::slotted(*){width:32px;height:32px}.co-icon-button--lg ::slotted(*){width:24px;height:24px}.co-icon-button--md ::slotted(*){width:20px;height:20px}.co-icon-button--sm ::slotted(*){width:18px;height:18px}.co-icon-button--xs ::slotted(*){width:16px;height:16px}.co-icon-button--xxs ::slotted(*){width:12px;height:12px}.co-icon-button--disabled,.co-icon-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-icon-button:hover:not(:disabled){opacity:0.88}.co-icon-button:focus-visible{outline:none;border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus)}.co-icon-button--dark:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--co-color-base-blanco, #fff) 45%, transparent)}.co-icon-button:active:not(:disabled){transform:scale(0.97);transition-duration:var(--co-motion-duration-instant)}@supports not (background: color-mix(in srgb, red, transparent)){.co-icon-button--filled{background:var(--co-semantic-surface-primary)}.co-icon-button--outlined{background:var(--co-icon-button-bg, var(--co-semantic-surface-secondary))}}`;
+const coIconButtonCss = () => `:host{display:inline-flex}:host([disabled]){pointer-events:none}.co-icon-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;outline:none;padding:0;flex-shrink:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out),     background var(--co-motion-duration-fast) var(--co-motion-ease-out),     transform var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box;-webkit-font-smoothing:antialiased;-webkit-backdrop-filter:var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));backdrop-filter:var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)))}.co-icon-button--filled{background:color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);color:var(--co-semantic-on-primary);border-color:color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent)}.co-icon-button--outlined{background:color-mix(in srgb, var(--co-icon-button-bg, var(--co-semantic-surface-secondary)) 55%, transparent);color:var(--co-icon-button-color, var(--co-semantic-on-secondary));border:1px solid var(--co-icon-button-border, var(--co-semantic-border-subtle))}.co-icon-button--ghost{background:transparent;color:var(--co-icon-button-color, var(--co-semantic-text-default));border:none;-webkit-backdrop-filter:none;backdrop-filter:none}.co-icon-button--ghost:hover:not(:disabled){background:var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-icon-button--dark{color:var(--co-icon-button-color, var(--co-color-base-blanco, #fff))}.co-icon-button--dark.co-icon-button--ghost:hover:not(:disabled){background:var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16))}.co-icon-button--rounded.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-border-radius-full)}.co-icon-button--square.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-xl);}.co-icon-button--square.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-sm);}.co-icon-button--square.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-xs);}.co-icon-button--square.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-spacing-sm);}.co-icon-button--xl ::slotted(*){width:32px;height:32px}.co-icon-button--lg ::slotted(*){width:24px;height:24px}.co-icon-button--md ::slotted(*){width:20px;height:20px}.co-icon-button--sm ::slotted(*){width:18px;height:18px}.co-icon-button--xs ::slotted(*){width:16px;height:16px}.co-icon-button--xxs ::slotted(*){width:12px;height:12px}.co-icon-button--disabled,.co-icon-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-icon-button:hover:not(:disabled){opacity:0.88}.co-icon-button:focus-visible{outline:none;border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus)}.co-icon-button--dark:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--co-color-base-blanco, #fff) 45%, transparent)}.co-icon-button:active:not(:disabled){transform:scale(0.97);transition-duration:var(--co-motion-duration-instant)}@supports not (background: color-mix(in srgb, red, transparent)){.co-icon-button--filled{background:var(--co-semantic-surface-primary)}.co-icon-button--outlined{background:var(--co-icon-button-bg, var(--co-semantic-surface-secondary))}}`;
 
 const CoIconButton = class {
     constructor(hostRef) {
@@ -26,6 +26,9 @@ const CoIconButton = class {
          */
         this.size = 'md';
         /** Disabled state */
+        /** Reflected so :host([disabled]) can kill pointer-events — the inner
+         *  button's pointer-events:none re-targets clicks to the host, where
+         *  consumers' click listeners live. */
         this.disabled = false;
         /** Accessible label */
         this.label = '';
@@ -47,7 +50,7 @@ const CoIconButton = class {
                     : 'var(--co-border-radius-full)',
             }
             : undefined;
-        return (index.h("button", { key: '870a3f745f22073b730bf78c57712aefcd1f0ae1', class: {
+        return (index.h("button", { key: 'f562372b80c9bc181be338a2a8572ea5ba7071a8', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,

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

@@ -32,7 +32,23 @@ function loadSvg(name, weight) {
     // priority:'low' → los iconos ceden ante JS/CSS/datos críticos del boot
     // (Fetch Priority API; ignorado sin daño donde no se soporta).
     const p = fetch(url, { priority: 'low' })
-        .then((res) => (res.ok ? res.text() : '')) // 404 → '' (queda cacheado, no reintenta)
+        .then(async (res) => {
+        if (!res.ok)
+            return ''; // 404 real → '' (queda cacheado, no reintenta)
+        const text = await res.text();
+        // Un 200 puede NO ser el SVG: el fallback SPA de un dev/static server
+        // responde index.html COMPLETO para archivos faltantes (p.ej. durante la
+        // ventana de un rebuild que regenera dist/). Inyectar eso al shadow del
+        // icono pinta un documento entero dentro del icono (splash fullscreen,
+        // estilos position:fixed) y el caché lo perpetuaba. Solo aceptar SVG
+        // real; cualquier otra cosa se trata como fallo transitorio: no cachear,
+        // permitir reintento.
+        if (!/^\s*(<\?xml|<svg)/i.test(text)) {
+            iconCache.delete(key);
+            return '';
+        }
+        return text;
+    })
         .catch(() => {
         // Error de red: no envenenar el caché — permitir reintento futuro.
         iconCache.delete(key);

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

@@ -3,7 +3,7 @@
 var index = require('./index-DK-2Lzmf.js');
 var requiredMark = require('./requiredMark-C1xcrzSZ.js');
 
-const coInputCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-input{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-input__label{white-space:normal}:host([layout='horizontal']) .co-input>:not(.co-input__labels){grid-column:2;min-width:0}.co-input__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-input__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-input__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-input__field-row{display:flex;align-items:stretch}.co-input__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);min-height:40px;box-sizing:border-box;overflow:hidden;flex:1;min-width:0}.co-input--flat .co-input__field{background:transparent;border-color:transparent}.co-input--s .co-input__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-input--sm .co-input__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-input--lg .co-input__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-input--has-action .co-input__field{border-radius:var(--co-border-radius-xs) 0 0 var(--co-border-radius-xs);border-right:none}.co-input__field ::slotted([slot="action"]){margin-left:auto;margin-right:calc(-1 * var(--co-spacing-md));margin-top:calc(-1 * var(--co-spacing-sm2));margin-bottom:calc(-1 * var(--co-spacing-sm2));border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;flex-shrink:0}.co-input__field ::slotted([slot="chips"]){display:flex;gap:var(--co-spacing-xxs);align-items:center;flex-wrap:wrap;min-width:0}.co-input__input-wrapper{flex:1;display:flex;align-items:center;min-width:0;min-height:22px;padding:0}.co-input__native{width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-input__native::placeholder{color:var(--co-semantic-text-muted)}.co-input__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-input__clear--hidden{visibility:hidden;pointer-events:none}.co-input__clear:hover{color:var(--co-semantic-text-default)}.co-input__action{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md) var(--co-spacing-sm2) var(--co-spacing-sm2);background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none;border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;cursor:pointer;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;flex-shrink:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box}.co-input__action:hover{opacity:0.85}.co-input__action:disabled{opacity:0.4;cursor:not-allowed}.co-input__action-icon{display:flex;align-items:center;flex-shrink:0}.co-input__action-label{display:flex;align-items:center}.co-input__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-input__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-input--focused .co-input__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-input--disabled .co-input__labels .co-input__label,.co-input--disabled .co-input__labels .co-input__secondary-label{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-input--disabled .co-input__native{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-input--disabled .co-input__native::placeholder{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__icon{color:var(--co-semantic-text-disabled)}.co-input__status-icon{flex-shrink:0;display:flex;align-items:center}.co-input--success .co-input__status-icon{color:var(--co-semantic-status-success)}.co-input--error .co-input__status-icon{color:var(--co-semantic-status-error)}.co-input--warning .co-input__status-icon{color:var(--co-color-status-review)}.co-input--info .co-input__status-icon{color:var(--co-semantic-status-info)}.co-input--error .co-input__field{border-color:var(--co-semantic-status-error)}.co-input--error.co-input--focused .co-input__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-input__helper--error .co-input__helper-icon,.co-input__helper--error .co-input__helper-text{color:var(--co-semantic-status-error)}.co-input--success .co-input__field{border-color:var(--co-semantic-status-success)}.co-input--success.co-input--focused .co-input__field{border-color:var(--co-semantic-status-success);box-shadow:0 0 0 2px rgba(10, 119, 36, 0.12)}.co-input__helper--success .co-input__helper-icon,.co-input__helper--success .co-input__helper-text{color:var(--co-semantic-status-success)}.co-input--warning .co-input__field{border-color:var(--co-color-status-review)}.co-input--warning.co-input--focused .co-input__field{border-color:var(--co-color-status-review);box-shadow:0 0 0 2px rgba(133, 87, 31, 0.12)}.co-input__helper--warning .co-input__helper-icon,.co-input__helper--warning .co-input__helper-text{color:var(--co-color-status-review)}.co-input--info .co-input__field{border-color:var(--co-semantic-status-info)}.co-input--info.co-input--focused .co-input__field{border-color:var(--co-semantic-status-info);box-shadow:0 0 0 2px rgba(45, 108, 197, 0.12)}.co-input__helper--info .co-input__helper-icon,.co-input__helper--info .co-input__helper-text{color:var(--co-semantic-status-info)}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}@supports not (background: color-mix(in srgb, red, transparent)){.co-input__field{background:var(--co-semantic-surface-secondary)}}.co-input--fill .co-input__field{background:var(--co-color-gray-100, #f6f6f6);border:none;box-shadow:none;border-radius:10px;padding:0 12px;gap:var(--co-spacing-sm2);min-height:46px;font-size:13.5px;-webkit-backdrop-filter:none;backdrop-filter:none}.co-input--fill.co-input--s .co-input__field{min-height:38px}.co-input--fill.co-input--sm .co-input__field{min-height:42px}.co-input--fill.co-input--lg .co-input__field{min-height:52px}.co-input--fill .co-input__native{font-size:13.5px;font-family:var(--co-font-family-primary);letter-spacing:var(--co-font-letter-spacing-body)}.co-input--fill .co-input__native::placeholder{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__icon{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__clear{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__clear:hover{color:var(--co-color-gray-600, #585858)}.co-input--fill.co-input--focused .co-input__field{border-color:transparent;box-shadow:none}`;
+const coInputCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-input{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-input__label{white-space:normal}:host([layout='horizontal']) .co-input>:not(.co-input__labels){grid-column:2;min-width:0}.co-input__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-input__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-input__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-input__field-row{display:flex;align-items:stretch}.co-input__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);min-height:40px;box-sizing:border-box;overflow:hidden;flex:1;min-width:0}.co-input--flat .co-input__field{background:transparent;border-color:transparent}.co-input--s .co-input__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-input--sm .co-input__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-input--lg .co-input__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-input--has-action .co-input__field{border-radius:var(--co-border-radius-xs) 0 0 var(--co-border-radius-xs);border-right:none}.co-input__field ::slotted([slot="action"]){margin-left:auto;margin-right:calc(-1 * var(--co-spacing-md));margin-top:calc(-1 * var(--co-spacing-sm2));margin-bottom:calc(-1 * var(--co-spacing-sm2));border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;flex-shrink:0}.co-input__field ::slotted([slot="chips"]){display:flex;gap:var(--co-spacing-xxs);align-items:center;flex-wrap:wrap;min-width:0}.co-input__input-wrapper{flex:1;display:flex;align-items:center;min-width:0;min-height:22px;padding:0}.co-input__native{width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-input__native::placeholder{color:var(--co-semantic-text-muted)}.co-input__native[type='number']::-webkit-inner-spin-button,.co-input__native[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.co-input__native[type='number']{-moz-appearance:textfield;appearance:textfield}.co-input__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-input__clear--hidden{visibility:hidden;pointer-events:none}.co-input__clear:hover{color:var(--co-semantic-text-default)}.co-input__action{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md) var(--co-spacing-sm2) var(--co-spacing-sm2);background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none;border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;cursor:pointer;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;flex-shrink:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box}.co-input__action:hover{opacity:0.85}.co-input__action:disabled{opacity:0.4;cursor:not-allowed}.co-input__action-icon{display:flex;align-items:center;flex-shrink:0}.co-input__action-label{display:flex;align-items:center}.co-input__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-input__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-input--focused .co-input__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-input--disabled .co-input__labels .co-input__label,.co-input--disabled .co-input__labels .co-input__secondary-label{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-input--disabled .co-input__native{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-input--disabled .co-input__native::placeholder{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__icon{color:var(--co-semantic-text-disabled)}.co-input__status-icon{flex-shrink:0;display:flex;align-items:center}.co-input--success .co-input__status-icon{color:var(--co-semantic-status-success)}.co-input--error .co-input__status-icon{color:var(--co-semantic-status-error)}.co-input--warning .co-input__status-icon{color:var(--co-color-status-review)}.co-input--info .co-input__status-icon{color:var(--co-semantic-status-info)}.co-input--error .co-input__field{border-color:var(--co-semantic-status-error)}.co-input--error.co-input--focused .co-input__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-input__helper--error .co-input__helper-icon,.co-input__helper--error .co-input__helper-text{color:var(--co-semantic-status-error)}.co-input--success .co-input__field{border-color:var(--co-semantic-status-success)}.co-input--success.co-input--focused .co-input__field{border-color:var(--co-semantic-status-success);box-shadow:0 0 0 2px rgba(10, 119, 36, 0.12)}.co-input__helper--success .co-input__helper-icon,.co-input__helper--success .co-input__helper-text{color:var(--co-semantic-status-success)}.co-input--warning .co-input__field{border-color:var(--co-color-status-review)}.co-input--warning.co-input--focused .co-input__field{border-color:var(--co-color-status-review);box-shadow:0 0 0 2px rgba(133, 87, 31, 0.12)}.co-input__helper--warning .co-input__helper-icon,.co-input__helper--warning .co-input__helper-text{color:var(--co-color-status-review)}.co-input--info .co-input__field{border-color:var(--co-semantic-status-info)}.co-input--info.co-input--focused .co-input__field{border-color:var(--co-semantic-status-info);box-shadow:0 0 0 2px rgba(45, 108, 197, 0.12)}.co-input__helper--info .co-input__helper-icon,.co-input__helper--info .co-input__helper-text{color:var(--co-semantic-status-info)}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}@supports not (background: color-mix(in srgb, red, transparent)){.co-input__field{background:var(--co-semantic-surface-secondary)}}.co-input--fill .co-input__field{background:var(--co-color-gray-100, #f6f6f6);border:none;box-shadow:none;border-radius:10px;padding:0 12px;gap:var(--co-spacing-sm2);min-height:46px;font-size:13.5px;-webkit-backdrop-filter:none;backdrop-filter:none}.co-input--fill.co-input--s .co-input__field{min-height:38px}.co-input--fill.co-input--sm .co-input__field{min-height:42px}.co-input--fill.co-input--lg .co-input__field{min-height:52px}.co-input--fill .co-input__native{font-size:13.5px;font-family:var(--co-font-family-primary);letter-spacing:var(--co-font-letter-spacing-body)}.co-input--fill .co-input__native::placeholder{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__icon{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__clear{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__clear:hover{color:var(--co-color-gray-600, #585858)}.co-input--fill.co-input--focused .co-input__field{border-color:transparent;box-shadow:none}`;
 
 const CoInput = class {
     constructor(hostRef) {
@@ -89,6 +89,21 @@ const CoInput = class {
             this.coAction.emit();
         };
     }
+    /**
+     * Refleja en el <input> los cambios de `value` que vienen de AFUERA (host que
+     * setea la prop programáticamente: cálculos, refresh, seed diferido). El
+     * <input> controlado de Stencil no repinta ante esos cambios bajo el lazy
+     * loader; escribir `inputEl.value` a mano lo sincroniza. Guard `hasFocus`:
+     * mientras el usuario tipea NO lo pisamos (movería el caret). Mismo patrón que
+     * co-number-field.onValueChange.
+     */
+    onValueChange(next) {
+        if (!this.inputEl || this.hasFocus)
+            return;
+        const v = next == null ? '' : String(next);
+        if (this.inputEl.value !== v)
+            this.inputEl.value = v;
+    }
     /** Programmatically focus the inner input (post-hydration safe). */
     async setFocus() {
         var _a;
@@ -162,6 +177,11 @@ const CoInput = class {
             }, type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear input", part: "clear" }, index.h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (index.h("co-icon", { name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (index.h("co-icon", { name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), index.h("slot", { name: "suffix" }), index.h("slot", null), index.h("slot", { name: "action" })), this.hasAction && (index.h("button", { class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (index.h("co-icon", { name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (index.h("span", { class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (index.h("div", { class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, this.helperIcon && (index.h("co-icon", { name: this.helperIcon, size: 14, class: "co-input__helper-icon" })), index.h("span", { class: "co-input__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
 };
 CoInput.style = coInputCss();
 

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-DK-2Lzmf.js');
 
-const coLoaderCss = () => `:host{display:contents;--co-loader-ball:15px;--co-loader-step:25px;--co-loader-text:var(--co-font-size-14);--co-loader-gap:10px}:host([size="sm"]){--co-loader-ball:8px;--co-loader-step:14px;--co-loader-text:var(--co-font-size-12);--co-loader-gap:6px}:host([size="lg"]){--co-loader-ball:20px;--co-loader-step:33px;--co-loader-gap:12px}.co-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-loader-gap)}.co-loader--overlay{position:absolute;inset:0;background:rgba(255, 255, 255, 0.72);z-index:10}.co-loader__balls{position:relative;width:calc(var(--co-loader-step) * 3);height:var(--co-loader-ball)}.co-loader__ball{position:absolute;width:var(--co-loader-ball);height:var(--co-loader-ball);border-radius:50%;animation:co-loader-bounce 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1)}.co-loader__ball--blue{background-color:#4285f4}.co-loader__ball--yellow{background-color:#fdbd00;animation-delay:0.4s}.co-loader__ball--red{background-color:#d4145a;animation-delay:0.8s}.co-loader__text{margin:0;font-family:var(--co-font-family-primary);font-size:var(--co-loader-text);color:var(--co-semantic-text-secondary);text-align:center;white-space:pre-line}@keyframes co-loader-bounce{0%,100%{transform:translateX(0) scale(1)}25%{transform:translateX(var(--co-loader-step)) scale(1.2)}50%{transform:translateX(calc(var(--co-loader-step) * 2)) scale(0.8)}75%{transform:translateX(var(--co-loader-step)) scale(1.2)}}@media (prefers-reduced-motion: reduce){.co-loader__ball{animation:none}.co-loader__ball--blue{transform:translateX(0)}.co-loader__ball--yellow{transform:translateX(var(--co-loader-step))}.co-loader__ball--red{transform:translateX(calc(var(--co-loader-step) * 2))}}`;
+const coLoaderCss = () => `:host{display:contents;--co-loader-ball:15px;--co-loader-step:25px;--co-loader-text:var(--co-font-size-14);--co-loader-gap:10px}:host([size="sm"]){--co-loader-ball:8px;--co-loader-step:14px;--co-loader-text:var(--co-font-size-12);--co-loader-gap:6px}:host([size="lg"]){--co-loader-ball:20px;--co-loader-step:33px;--co-loader-gap:12px}.co-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-loader-gap)}.co-loader--overlay{position:absolute;inset:0;background:rgba(255, 255, 255, 0.72);z-index:10}.co-loader__balls{position:relative;width:calc(var(--co-loader-step) * 3);height:var(--co-loader-ball)}.co-loader__ball{position:absolute;width:var(--co-loader-ball);height:var(--co-loader-ball);border-radius:50%;animation:co-loader-bounce 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1)}.co-loader__ball--blue{background-color:var(--co-color-primary-azul, #4285f4)}.co-loader__ball--yellow{background-color:var(--co-color-primary-amarillo, #fdbd00);animation-delay:0.4s}.co-loader__ball--red{background-color:var(--co-color-primary-rosado, #d4145a);animation-delay:0.8s}.co-loader__text{margin:0;font-family:var(--co-font-family-primary);font-size:var(--co-loader-text);color:var(--co-semantic-text-secondary);text-align:center;white-space:pre-line}@keyframes co-loader-bounce{0%,100%{transform:translateX(0) scale(1)}25%{transform:translateX(var(--co-loader-step)) scale(1.2)}50%{transform:translateX(calc(var(--co-loader-step) * 2)) scale(0.8)}75%{transform:translateX(var(--co-loader-step)) scale(1.2)}}@media (prefers-reduced-motion: reduce){.co-loader__ball{animation:none}.co-loader__ball--blue{transform:translateX(0)}.co-loader__ball--yellow{transform:translateX(var(--co-loader-step))}.co-loader__ball--red{transform:translateX(calc(var(--co-loader-step) * 2))}}`;
 
 const CoLoader = class {
     constructor(hostRef) {

package/dist/cjs/co-number-field.cjs.entry.js

@@ -78,6 +78,21 @@ const CoNumberField = class {
             }
         };
     }
+    /**
+     * Refleja en el <input> los cambios de `value` que vienen de AFUERA (host que
+     * setea la prop: refresh de tasas, seed al abrir un form, cálculos). El render
+     * de Stencil no repinta el input controlado ante esos cambios bajo el lazy
+     * loader (verificado en vivo 2026-08-20: prop=0.000326 y el input seguía en
+     * "0"). Escribir `inputEl.value` a mano lo sincroniza. Guard `focused`: mientras
+     * el usuario tipea, su propio input manda — no lo pisamos (movería el caret).
+     */
+    onValueChange() {
+        if (!this.inputEl || this.focused)
+            return;
+        const next = this.isEmpty ? '' : String(this.toDisplay(this.value));
+        if (this.inputEl.value !== next)
+            this.inputEl.value = next;
+    }
     /** True when there is no numeric value (cleared / empty). */
     get isEmpty() {
         return this.value === null || this.value === undefined || Number.isNaN(this.value);
@@ -132,15 +147,20 @@ const CoNumberField = class {
         this.coChange.emit(clamped);
     }
     render() {
-        return (index.h("div", { key: 'e21d2694b5fd0fd5b77f514d8455c71f455a894b', class: {
+        return (index.h("div", { key: '0c6bc83afe9b061ce2cb99b5ae7c1f6aed3f779a', class: {
                 'co-number-field': true,
                 'co-number-field--disabled': this.disabled,
                 'co-number-field--focused': this.focused,
                 [`co-number-field--${this.size}`]: true,
                 [`co-number-field--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (index.h("div", { key: '17efd9e4987c6ea49173cac684b0bff5a218c5c6', class: "co-number-field__labels" }, this.label && index.h("label", { key: '977f2f3606ccf1080028fa45bf039dc419e51501', class: "co-number-field__label" }, this.label, index.h(requiredMark.RequiredMark, { key: '79866d27266b934c2bbf0b2c9b7ff5234e3ee31c', required: this.required })), this.secondaryLabel && index.h("span", { key: '0f336f36b8c40655088cbe25e42c582df103b235', class: "co-number-field__secondary-label" }, this.secondaryLabel))), index.h("div", { key: 'a46ab7533a82a23c935e76dc44d1d6f6cf3c1cad', class: "co-number-field__row" }, index.h("button", { key: '8ade028bbfe79d177a95b3a72823ddf325fb39bf', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, index.h("co-icon", { key: '85f7ecc76fab9ac8776be5669fe1dc7f494b55a2', name: "minus", size: 16 })), index.h("input", { key: '0e3959431a17c29a6ee42c18f893be71d6ff156f', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: this.isEmpty ? '' : String(this.toDisplay(this.value)), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), this.scaled && !this.isEmpty && (index.h("span", { key: 'f5d2518f8bb4ae3aefdf7ee059ad92e6fee66e9c', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (index.h("button", { key: '5ee9748d2a17601638276af4ce5cc7eb57a75ac9', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, index.h("co-icon", { key: '05e5ebbbb8f8403b8fca2e53d2df4e915e53af21', name: "x-circle", size: 16, weight: "fill" }))), index.h("button", { key: 'f1d0473bec40293d4bd4cd558516118731069b4e', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, index.h("co-icon", { key: 'b8fca118622fab53168fb5123e20029fe5864ce9', name: "plus", size: 16 }))), this.helperText && (index.h("div", { key: '9feea41492ad64cb440c03ad69410ad49f4130c1', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '66217b4f1a8a44e111bc9b73abf6f8a44665bf12', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), index.h("span", { key: '201c84b2cb3a055e08e3eb004e50666513828038', class: "co-number-field__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (index.h("div", { key: '203720b71c1962ec93f5aefa8dd3cbd67a0294fc', class: "co-number-field__labels" }, this.label && index.h("label", { key: '114cc0e2a0aa9d351911cee4d1c9c1494259ce3a', class: "co-number-field__label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'bf4794dd4d5e21052c529ff7eb8e47a79ff9ddb4', required: this.required })), this.secondaryLabel && index.h("span", { key: '60519c76314068312514d47ef2284ccdd00b5c70', class: "co-number-field__secondary-label" }, this.secondaryLabel))), index.h("div", { key: 'c0584ba632adaa29f439f896cbab3f73663f2b0b', class: "co-number-field__row" }, index.h("button", { key: '21979d6ca5667f7f278b5c4674e6497cf1e3911d', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, index.h("co-icon", { key: 'a1173b08171bca43b50a6ca3dc8bb637cb0c43b3', name: "minus", size: 16 })), index.h("input", { key: 'c5584bbabde195e8178fff12eb98b4919b21e0c8', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: this.isEmpty ? '' : String(this.toDisplay(this.value)), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), this.scaled && !this.isEmpty && (index.h("span", { key: '86705658b5b1ec0feb9be58afbf7966f382aaa9b', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (index.h("button", { key: '5e030b36c3c95a2416544930e2e4f69b06decf61', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, index.h("co-icon", { key: '5492f06d71885eb432122984160e5f93153a226f', name: "x-circle", size: 16, weight: "fill" }))), index.h("button", { key: '8987e2c51aef9fcd54e3394066543607edcd764b', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, index.h("co-icon", { key: '2398e8b5e94071de8ffccbd3625976ddf93878d3', name: "plus", size: 16 }))), this.helperText && (index.h("div", { key: '16fc9f87db0ad43c6169eebb5be7ec57abd33e98', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '1d3006cb9ba6d6b0f30fb6d09aad6b28fdf764d8', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), index.h("span", { key: '6d727671c30c45655c84319b6a269e4997c3ef6b', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
 };
 CoNumberField.style = coNumberFieldCss();