@prolibu-suite/cobalt-core 0.9.6 → 0.10.0

package/dist/collection/components/co-skeleton/co-skeleton.js

@@ -11,12 +11,50 @@ export class CoSkeleton {
         this.width = '100%';
         /** Alto CSS (default por variante en CSS) */
         this.height = '';
+        /** Handoff al contenido real: fade-out del shimmer; el host desmonta en coRevealEnd. */
+        this.revealed = false;
+        /** Guard de emisión única: transitionend y el fallback timer no deben
+         *  disparar coRevealEnd dos veces para el mismo reveal. */
+        this.revealEndEmitted = false;
+        this.handleTransitionEnd = (e) => {
+            if (this.revealed && e.propertyName === 'opacity')
+                this.emitRevealEnd();
+        };
+    }
+    onRevealedChange(isRevealed) {
+        clearTimeout(this.revealFallbackTimer);
+        if (isRevealed) {
+            this.revealEndEmitted = false;
+            // Fallback por si transitionend no dispara (tab oculta, display:none
+            // ancestro) — mismo patrón que co-popover/co-tooltip.
+            // ⚠️ Atado al token: debe superar --co-motion-duration-base (250ms) con
+            // margen — si el retune sube `base` por encima de ~350ms, revisar esta
+            // constante.
+            this.revealFallbackTimer = setTimeout(() => this.emitRevealEnd(), 400);
+        }
+        else {
+            this.revealEndEmitted = false;
+        }
+    }
+    disconnectedCallback() {
+        clearTimeout(this.revealFallbackTimer);
+    }
+    emitRevealEnd() {
+        clearTimeout(this.revealFallbackTimer);
+        if (this.revealEndEmitted)
+            return;
+        this.revealEndEmitted = true;
+        this.coRevealEnd.emit();
     }
     render() {
         const style = { width: this.width };
         if (this.height)
             style.height = this.height;
-        return (h("div", { key: '73b02d1b6b08093d3a6126cffe84c7174ceac5e1', class: { 'co-skeleton': true, [`co-skeleton--${this.variant}`]: true }, part: "skeleton", style: style, "aria-hidden": "true" }));
+        return (h("div", { key: '57fe9519532202bbd9b7bc29944acfd0c3b34b8d', class: {
+                'co-skeleton': true,
+                [`co-skeleton--${this.variant}`]: true,
+                'co-skeleton--revealed': this.revealed,
+            }, part: "skeleton", style: style, "aria-hidden": "true", onTransitionEnd: this.handleTransitionEnd }));
     }
     static get is() { return "co-skeleton"; }
     static get encapsulation() { return "shadow"; }
@@ -91,7 +129,51 @@ export class CoSkeleton {
                 "reflect": false,
                 "attribute": "height",
                 "defaultValue": "''"
+            },
+            "revealed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Handoff al contenido real: fade-out del shimmer; el host desmonta en coRevealEnd."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "revealed",
+                "defaultValue": "false"
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "coRevealEnd",
+                "name": "coRevealEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "El fade-out de reveal termin\u00F3 \u2014 el host puede desmontar el skeleton."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "revealed",
+                "methodName": "onRevealedChange"
+            }];
+    }
 }

package/dist/collection/components/co-slider/co-slider.js

@@ -72,12 +72,12 @@ export class CoSlider {
     }
     render() {
         const pct = this.percentage;
-        return (h("div", { key: 'f82f6a02b6aa537469b2cf09296e313bd2e3580a', class: {
+        return (h("div", { key: '9b0393d126f0951918b8579542019448949f8537', class: {
                 'co-slider': true,
                 'co-slider--disabled': this.disabled,
                 'co-slider--dragging': this.dragging,
                 [`co-slider--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '161e77eb5a416d015741a0ff2d5ff1f542d1d90b', class: "co-slider__labels" }, h("div", { key: '95c0753a65a5cd74c3d07cd671b43e5c2bb4bb9a', class: "co-slider__labels-left" }, this.label && h("label", { key: 'eb490ec9892724486017891173cbd67c601a31ea', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: '26c67f92cd5c9cfc1b241405758f4b8f22755027', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'af025c1f222f3107d63e303a432a42086889768f', class: "co-slider__value" }, this.value))), h("div", { key: 'f80d84c22398217d91a746a2acf87fe3017aafc1', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'c97e2b09211935a2e7a330e136ddb2ab4f2a6a99', class: "co-slider__track" }, h("div", { key: '6eae65d3c54756f9ec2415afa5247264b5b234bc', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'c7be4df591f311cc9563c0e83446d30c34861f7b', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: 'c6136669a27ea7ecd0f59b41e870a7ae97fa0e23', class: "co-slider__marks" }, h("span", { key: 'b66409d99e858e3d1b7bad094ed8cac1b3adc103', class: "co-slider__mark" }, this.min), h("span", { key: '3bd6b1b89600d3f32097b780cc5f2c4a34787e4a', class: "co-slider__mark" }, this.max))), h("input", { key: 'db4cb887608ace24b68df88a72749995548c61b5', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, "aria-label": this.label || 'Slider' }), this.helperText && (h("div", { key: '4e497982df811e9929a6a33ac6a442faa2f9bc77', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '8b07a87a0dcb8ce622884f0d26f8605442c4696f', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '3287eabd8005685c8247202c891cf0b3939178cc', class: "co-slider__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: 'e5a6e71de571099179da3fff7fad8a49f4007b58', class: "co-slider__labels" }, h("div", { key: 'e2e7b16b04ab4405efefe3c706f0b17e554e3403', class: "co-slider__labels-left" }, this.label && h("label", { key: '5bfdab322661e6a4ff23c3f51b98f92beb7f71d2', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'badb1274cb50e9fd5aa4ffe0ecd2fcdf7e356ac5', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: '100c039646a494ab2311fe665dcca69ac373412c', class: "co-slider__value" }, this.value))), h("div", { key: 'cccc6eec3cb96c59fde0dd61f243b99d4dd906a5', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'f2e4c77eaad6f282a8516cbecf658309d288e960', class: "co-slider__track" }, h("div", { key: 'a4b4e062c0f4fc63fe06c0f82635b7938d362872', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: '82aaafcee3e10dabda359e1633d3d43cb907efef', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: 'df196b5f77697d80ba347049252f06bd941210af', class: "co-slider__marks" }, h("span", { key: '842cf8078d2ce44015bfff1ef5c6af9e81226c65', class: "co-slider__mark" }, this.min), h("span", { key: 'e9016d28e3cccb5422ee69fc420ffe8573261bb5', class: "co-slider__mark" }, this.max))), h("input", { key: 'e39cf4e0e392b19bbc69a8824b5304923690a111', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, "aria-label": this.label || 'Slider' }), this.helperText && (h("div", { key: '8f63357fba596c559f7a8844588c7c95f85c7216', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'bd3cb81a4b8e934f97db8520566f41094b4054be', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '2840f87c55a9404b682b00be36f90807ba2e5cab', class: "co-slider__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-slider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-switch/co-switch.css

@@ -121,9 +121,9 @@
 /* ─── TRACK COLORS ──────────────────────────────────────────── */
 .co-switch--on  { background: var(--co-semantic-surface-primary); }
 .co-switch--off {
+  /* Sin backdrop-filter (D2): el track off vive sobre fondo uniforme
+     (CellActiveToggle en fila de datatable, forms) → blur inerte. */
   background: color-mix(in srgb, var(--co-semantic-surface-muted) 35%, 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));
 }
 
 /* ─── THUMB ─────────────────────────────────────────────────── */
@@ -136,7 +136,7 @@
   height: 20px;
   border-radius: var(--co-border-radius-full);
   background: var(--co-semantic-control-thumb);
-  transition: transform var(--co-motion-duration-base) var(--co-motion-ease-out);
+  transition: transform var(--co-motion-duration-base) var(--co-motion-ease-spring);
   box-shadow: 0 1px 3px var(--co-semantic-control-shadow);
 }
 

package/dist/collection/components/co-switch/co-switch.js

@@ -29,16 +29,16 @@ export class CoSwitch {
     render() {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = !!this.helperText;
-        return (h("div", { key: '41dd889ef58fd3d7a6b2317d8784791d8083e26a', class: {
+        return (h("div", { key: 'cf5f5cf9c86e531772cab2fc89ce7f671fac6b88', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: 'e3a421799c7112db888f9707fd6fc83c6eb04549', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: 'bb053dd1564d84af742676d37b385db37c7d6643', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, h("div", { key: '1b4a84420f7cbf55b797c900633278226e6bb876', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '84935bfd4332c5f75d9a55c302a215704255687e', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-switch': true,
                 'co-switch--on': this.checked,
                 'co-switch--off': !this.checked,
                 'co-switch--disabled': this.disabled,
-            }, disabled: this.disabled, part: "track" }, h("span", { key: '0432985aef597b86de60864b9b45595beece935c', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '1af63ce6265cc677c7a415fe8955bd68ec0b9fe6', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: 'f9813aaeb56fc6b754d76b7bebf1f2a0d9282b94', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '6039ff298e3d0c55064cd1ea7650b00411bd03b0', required: this.required })), this.secondaryLabel && (h("span", { key: '21a42e2ef46ee5d84c2558c40f8c536ede49212b', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: 'db03ce9ca2516535d9c04e8375a592df2971ffe0', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'ef34308ef4d0976c89a2ad6cc4ecb7615165d022', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '65e07eef8ee79d1fea4808a03f012b46959322a9', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, disabled: this.disabled, part: "track" }, h("span", { key: '5fd9ccdee226488b7bf40135310dfa8edc6f21ca', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '8c218d1e80fde949aaaeddb5beb82f0db903c5fd', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '8ac9fd5b3c508f1aa8d5dc68958b3503088c6573', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '6484f45dcf71fde79d7e9b2dcb1e05736222eb43', required: this.required })), this.secondaryLabel && (h("span", { key: 'cafa4abbf0b8bab98992a1fc8450828eddf5a84e', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '50b2fa3efe5f9231b334785a5fcc12976e100529', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'd43268eb4c94458681cd0d29c25e63c6f228e744', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: 'dca85627fe32f4991716e5bd0d74f52ee7825159', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-tab/co-tab.js

@@ -21,13 +21,13 @@ export class CoTab {
     }
     render() {
         const iconSize = this.variant === 'underline' ? 16 : this.size === 'large' ? 18 : 14;
-        return (h("button", { key: '50b55fc41a8edcb9647e47c5a3fa28eea836c420', class: {
+        return (h("button", { key: 'f569dd0913e8a6640fbbaecbf2b083e480f6f137', class: {
                 'co-tab': true,
                 [`co-tab--${this.size}`]: true,
                 [`co-tab--${this.variant}`]: true,
                 'co-tab--selected': this.selected,
                 'co-tab--disabled': this.disabled,
-            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: '4612c89b1ca388c0b155767d2756953df1c1ccaa', name: this.iconLeft, size: iconSize })), h("span", { key: '832a5daf1f7a40233c4d972dd28b7d8c5688a470' }, this.label), this.badge && (h("span", { key: 'ac9d188902b8c906117d50751c2d58da16f095ca', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: 'f2b32323ce754284d0a6468203e9c5c803a37761', name: this.iconRight, size: iconSize }))));
+            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: '8bd16fd9d62bcf85872743b4508b1d7e774564a7', name: this.iconLeft, size: iconSize })), h("span", { key: 'e2477eb4d568a14cbc2751478b193f72fe485827' }, this.label), this.badge && (h("span", { key: '8d66cc9036bb4a70ffc51b29edbd1a766e650c41', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: 'f7e31ab5fed7cc1c1df82655f16e52efd6459c04', name: this.iconRight, size: iconSize }))));
     }
     static get is() { return "co-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-tab-group/co-tab-group.js

@@ -49,10 +49,10 @@ export class CoTabGroup {
         });
     }
     render() {
-        return (h("div", { key: 'b358bcbc4623e89d4c8182fec57aa09431f5bf5b', class: {
+        return (h("div", { key: 'b4a12a70b2ea662d7560b44dee50ecdbbb9314bb', class: {
                 'co-tab-group': true,
                 [`co-tab-group--${this.variant}`]: true,
-            }, role: "tablist", part: "tab-group", onWheel: this.onWheel }, h("slot", { key: '19257745a3473078f4c8200eba3a1edf9ff37594', onSlotchange: this.onSlotChange })));
+            }, role: "tablist", part: "tab-group", onWheel: this.onWheel }, h("slot", { key: '4427ca133a60ae07f53f1c50ef6dd9ee39784aa6', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "co-tab-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-tags-field/co-tags-field.js

@@ -186,14 +186,14 @@ export class CoTagsField {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
         const helper = this.isInvalid ? this.errorMessage : this.helperText;
         const showInput = !this.readonly && !this.atCapacity;
-        return (h("div", { key: '2e0ef9e89f150a136193f4963463ad884a4b3eb7', class: {
+        return (h("div", { key: 'e7035dd352d920f06cf7ae067f4d5016fceff48b', class: {
                 'co-tags-field': true,
                 'co-tags-field--disabled': this.disabled,
                 'co-tags-field--focused': this.hasFocus,
                 'co-tags-field--filled': this.hasValue,
                 'co-tags-field--invalid': this.isInvalid,
                 [`co-tags-field--${this.size}`]: true,
-            }, part: "wrapper" }, this.label && (h("div", { key: '7026f6e9256dc97bde2dc5784437c2901b349b34', class: "co-tags-field__labels" }, h("label", { key: 'ee209adce424a052f92745178ceda6de8a9d24ff', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'b80ec58705dd3f8e2351e506104acffee7db4998', required: this.required })))), h("div", { key: 'b29f0fa6a8a795ed541a655bda54f55ada8ec7f8', class: "co-tags-field__field-row" }, h("div", { key: '1f932a0c350bd8e7bb1ae8d84396d7a84b4cde43', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: 'f066e81827d30d3293c6ef49c72b780d95eac4d0', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
+            }, part: "wrapper" }, this.label && (h("div", { key: '4ff2eb4ab1fb00a193679063a30069847d85c6be', class: "co-tags-field__labels" }, h("label", { key: '238e18f48cb6c482de2957cd0f466c9875c71c20', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '4a86dbeb54674e7b0f38052bb7f9c9a6b96e2380', required: this.required })))), h("div", { key: '2ce5b7b6c520aac7d10e0ae2aad06ca27d12b705', class: "co-tags-field__field-row" }, h("div", { key: 'aa2e01fbbeeaddc8a53ffcb62c4c871ba2fe57d6', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: 'bb6b037edb3036b029a664f7ef6d72b110e7b6a8', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
         // Shared field-chip (utils/fieldChip.tsx) per the Figma
         // "Tipo=Chips" spec — same look as co-ref-field's chips.
         h(FieldChip, { key: `chip-${index}-${tag}`, baseClass: "co-tags-field__chip", label: tag, title: tag, onChipDblClick: () => this.startEdit(index), onRemove: !this.disabled && !this.readonly
@@ -201,13 +201,13 @@ export class CoTagsField {
                     e.stopPropagation();
                     this.removeTag(index);
                 }
-                : undefined }))), showInput && (h("input", { key: '23d2b229eefdf70cac665b1f54c4706bdd4f7eae', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: '16e425b88e60e91b17df0552ca7d8e8fc8519ba5', class: {
+                : undefined }))), showInput && (h("input", { key: '419fa34260f36353b30c58b0883b8ebbaaca0176', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: '06372259382dfc3a6edeba8f7e6dd5b9617ae306', class: {
                 'co-tags-field__clear': true,
                 'co-tags-field__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: '92add95993cd8013019f754ff3207793128ca51e', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '029a5b91a03ca2ca8653378d87489996d5f492fe', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'fed6f3bd7df1414a0e5f97eb48ea7eb0f5e3953e', class: {
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: '1a2985e18467e778c56ae21c4de64ca7444cebcb', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '0a97d32c8efa0b29e0f050eceb4015cec8d55512', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: '7225ade1dad3a5a63ad3214ae80890c082e89e19', class: {
                 'co-tags-field__helper': true,
                 'co-tags-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'a952b7423a78bd2858b6b221ca1ceb4691e413cf', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: 'ee650cda04dab278333db5f01061cb5bb3589024', class: "co-tags-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '42225192d8d73f9e091ee069f7f5307ea42f5516', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '75eefd041a4d17ef9514ed24d7a3a417e89dc19c', class: "co-tags-field__helper-text" }, helper)))));
     }
     static get is() { return "co-tags-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-textarea/co-textarea.js

@@ -76,7 +76,7 @@ export class CoTextarea {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
         const isOverLimit = this.maxLength != null && this.charCount > this.maxLength;
         const statusClass = this.status !== 'default' ? `co-textarea--${this.status}` : '';
-        return (h("div", { key: 'f2ccc7aee2d49eb7d30a1b3126d8f43449d5a507', class: {
+        return (h("div", { key: '26a30e39d13d782711adb94e4c12c6c0db282095', class: {
                 'co-textarea': true,
                 'co-textarea--disabled': this.disabled,
                 'co-textarea--focused': this.hasFocus,
@@ -85,13 +85,13 @@ export class CoTextarea {
                 [`co-textarea--${this.size}`]: true,
                 [statusClass]: !!statusClass,
                 'co-textarea--flat': this.variant === 'flat',
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'afd5a0b21e688ebf95f66f80e8cdb115b1ef731d', class: "co-textarea__labels" }, this.label && (h("label", { key: 'bcc7f15e3e0eaaf98f3b19fa8d98fb6804d70f3e', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: 'bbb2aaae400435e7fa5b3ffc0813b4461dd06ef2', required: this.required }))), this.secondaryLabel && (h("span", { key: '260d96d2700e783b33e85934f815cc93483a5dc5', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '15e0df28e0dc7556f03fb250dd41219cfc91f990', class: "co-textarea__field", part: "field" }, h("textarea", { key: '1a768ee4e3238a7b5f766d7fd874268c37689efa', ref: (el) => (this.textareaEl = el), class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'b4f8df968cff2b5b175cfcbf1e68b31ca29d9afe', class: "co-textarea__labels" }, this.label && (h("label", { key: 'af366be59684f535c8fb87e9b974ce759cc18076', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: 'e8a27b76c9fde30eef0aef8fbbbc46e296edf537', required: this.required }))), this.secondaryLabel && (h("span", { key: '945182ab7091298aab4631167615df0b742250d2', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '23d1c1c7af5a03b0cd9196bfc18f24746f5e523d', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'def518b0c40dad1749d9c4271f6b0b4bb08abb64', ref: (el) => (this.textareaEl = el), class: {
                 'co-textarea__native': true,
                 [`co-textarea__native--resize-${this.resize}`]: true,
-            }, rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.status === 'error' || isOverLimit ? 'true' : 'false', onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), showClear && (h("button", { key: 'dca996eb57a14cc72e2c11e71f70a71e369b004d', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '34af750ee1b162b83a62579f69bffe01ee843220', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '5ee0bfd1a9a51b1e35ec0bf1103bea87e4585d49', class: "co-textarea__footer" }, this.helperText && (h("div", { key: 'c79cdcf441072b79a4adaf75f6dee59ae8f9d96c', class: {
+            }, rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.status === 'error' || isOverLimit ? 'true' : 'false', onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), showClear && (h("button", { key: '207bde67b9f3adcca674b93dbb135bb10d448f5e', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '927918569b359aebd7c1f2e0ae8c7be607453531', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '4374030bb6cbf6fa45c40f464481c2bf40cba6fc', class: "co-textarea__footer" }, this.helperText && (h("div", { key: 'b92692e4149b404999221cb6ef3de0d2adb73291', class: {
                 'co-textarea__helper': true,
                 'co-textarea__helper--error': this.status === 'error',
-            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '9bad2a6c50361bcd1451af88ba5ca1cc6d703ca7', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: 'f6857823bb264d208bde50dfba615b677027129e', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: 'cb68c0f5d640f01d9bf3aa2163daa84f55d97442', class: {
+            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '544c72f9baa84f61b76104e62373dc8ba4d445e0', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '531d0c60b322ce09760889cc1b979e3c48046847', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: '72eadc738677c3bbf50c9d0bdeb1cee713528507', class: {
                 'co-textarea__counter': true,
                 'co-textarea__counter--over': isOverLimit,
             }, part: "counter" }, this.charCount, "/", this.maxLength))))));

package/dist/collection/components/co-time-field/co-time-field.css

@@ -0,0 +1,111 @@
+/* co-time-field — caja con anatomía de campo (misma de co-input/co-date-field)
+   y un spinbutton por unidad. El segmento enfocado se pinta INVERSO (pill
+   negra), como la selección del calendario. */
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+  letter-spacing: var(--co-font-letter-spacing-body);
+}
+
+.co-time-field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--co-spacing-xs);
+  min-height: 32px;
+  padding: 3px var(--co-spacing-sm) 3px var(--co-spacing-sm2);
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-semantic-border-field);
+  border-radius: var(--co-border-radius-xs);
+  box-sizing: border-box;
+  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-time-field:focus-within {
+  border-color: var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+.co-time-field--disabled {
+  background: var(--co-semantic-surface-disabled);
+  border-color: transparent;
+  pointer-events: none;
+}
+
+.co-time-field__segs {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+}
+
+.co-time-field__seg {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 26px;
+  height: 24px;
+  padding: 0 3px;
+  border-radius: var(--co-border-radius-xxs);
+  font-size: var(--co-font-size-14);
+  font-variant-numeric: tabular-nums;
+  color: var(--co-semantic-text-default);
+  box-sizing: border-box;
+  cursor: default;
+  user-select: none;
+  /* El anillo del foco lo pinta la caja (:focus-within); el segmento enfocado
+     se marca con el fill inverso de abajo — outline propio sería doble. */
+  outline: none;
+}
+
+.co-time-field__seg:focus {
+  background: var(--co-semantic-surface-primary);
+  color: var(--co-semantic-on-primary);
+  font-weight: 600;
+}
+
+.co-time-field__seg--period {
+  margin-left: var(--co-spacing-xs);
+  font-size: var(--co-font-size-13);
+}
+
+.co-time-field__seg--empty {
+  color: var(--co-semantic-text-muted);
+}
+
+.co-time-field__sep {
+  color: var(--co-semantic-text-muted);
+}
+
+.co-time-field__steppers {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.co-time-field__steppers button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 12px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--co-semantic-text-muted);
+  cursor: pointer;
+}
+
+.co-time-field__steppers button:hover {
+  color: var(--co-semantic-text-default);
+}
+
+/* Touch (lo estampa el host, igual que co-calendar [data-touch]) */
+:host([data-touch]) .co-time-field {
+  min-height: 44px;
+  padding: var(--co-spacing-sm) var(--co-spacing-sm2);
+}
+
+:host([data-touch]) .co-time-field__seg {
+  min-width: 34px;
+  height: 32px;
+  font-size: var(--co-font-size-16);
+}