@prolibu-suite/cobalt-core 0.9.6 → 0.10.1

package/dist/collection/components/co-segmented-bar/co-segmented-bar.js

@@ -154,7 +154,7 @@ export class CoSegmentedBar {
                     "references": {
                         "CoSegment": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-rel-20260827-tooltip/packages/core/src/components/co-segmented-bar/co-segmented-bar.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release/packages/core/src/components/co-segmented-bar/co-segmented-bar.tsx",
                             "id": "src/components/co-segmented-bar/co-segmented-bar.tsx::CoSegment"
                         }
                     }

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

@@ -468,20 +468,20 @@ export class CoSelect {
         const activeOptionId = this.isOpen && this.activeIndex >= 0 && this.activeIndex < options.length
             ? this.optionId(this.activeIndex)
             : undefined;
-        return (h("div", { key: '0305b0465d53217480a9c8eb7a7f8eb9f1a6d01e', class: {
+        return (h("div", { key: 'd59a2a542e3a53efbff607faa01eb8eef899e8a1', class: {
                 'co-select': true,
                 'co-select--open': this.isOpen,
                 'co-select--disabled': this.disabled,
                 [`co-select--${this.size}`]: true,
                 [`co-select--${this.status}`]: this.status !== 'default',
                 'co-select--flat': this.variant === 'flat',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '7b13a836b8124f62b711481c35fe0efa7be01ee2', class: "co-select__labels" }, this.label && h("label", { key: 'a05933f160d3b48cf746fda1a01195e99fca94bc', class: "co-select__label" }, this.label, h(RequiredMark, { key: 'd71397f773f28a1f8a224587a5c4e67bd5f80d41', required: this.required })), this.secondaryLabel && h("span", { key: '26cb193f44b4e57395d305a54044d2e54f925963', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '7becd47bbac023383cfa3f0f2a5cef15d12d7510', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'e93a10d03648cb510b27d80b9cf665724827d9c0', slot: "trigger", class: "co-select__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": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && h("co-icon", { key: '837f075fcae3b2bd11c4f5199591fdb4e840518c', name: this.iconLeft, size: 16, class: "co-select__icon" }), ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.image) && (h("img", { key: 'b7d067c82372fb525132a1079332aac6fd7e77d5', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'd386f9b3ffcf323736615fe9abb2f2b5b059ef5d', class: "co-select__labels" }, this.label && h("label", { key: '4eb476e1413845a01da90e9d2d1a5d8c77f2dd27', class: "co-select__label" }, this.label, h(RequiredMark, { key: '448008d31b3870ba542003981fde4e59025c119f', required: this.required })), this.secondaryLabel && h("span", { key: 'da8d3dbe5290ed411cafe35ca8d11c9f3a13cf05', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: 'f83933aad455b009c909d067775a4458d9cf2b93', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'cc19e9fa6bb7448f39426fff39a4f000b957cc49', slot: "trigger", class: "co-select__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || this.ariaLabelText || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && h("co-icon", { key: '34b24e244f80e3229d6a9b27af293995fdaf1499', name: this.iconLeft, size: 16, class: "co-select__icon" }), ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.image) && (h("img", { key: '29d4e4aca6b8baeb14da68f7d848e7d92cf2300e', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
             const opt = this.parsedOptions.find((o) => o.value === v);
             return (h("span", { class: "co-select__chip", key: v }, h("span", { class: "co-select__chip-label" }, opt ? opt.label : v), h("button", { class: "co-select__chip-remove", type: "button", tabIndex: -1, "aria-label": "Remove", onClick: (e) => {
                     e.stopPropagation();
                     this.handleOptionClick(v);
                 } }, h("co-icon", { name: "x", size: 12 }))));
-        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: 'e9444409fcba6b16d6ff520b3c2632456d2604a2', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '34df04cf14b9e7c56f7244a00263c2182094b61c', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: 'f9c02e5d08b8ffb30cd8ef8d5ca6c30fa5d21280', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: 'cdd17b6eef07e54ce1d8cdd2b48d055f18c24d9e', class: "co-select__dropdown" }, this.isOpen && this.searchable && (h("div", { key: '743f19477657f1cfadbf1e8c9ddba9fa1dc439b8', class: "co-select__search" }, h("co-icon", { key: 'd7e2518a33ad48306041c8f85994c446960718e1', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '4e928b2bb41fac16e410c42217629ede0441e335', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, onInput: this.handleSearchInput, onKeyDown: this.handleNavKeyDown, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: '27a8c9cd56b398f6e8f9c0cc66dee5ee8df3b9ed', class: "co-select__empty" }, this.emptyText)), h("div", { key: 'b6275f538ac6b92d3ee3c7f40dfcdd8468ce6d98', class: "co-select__options", id: CoSelect.LISTBOX_ID, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
+        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '8283fa5c6e945370d297820e4bf7a0c5c7118d49', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'f9a7b5def3a2cc4e01f2a56e0c10743bc8e07e59', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: 'f8b679fffe85ffb822e5cc839e35811c462f9592', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: 'bda5777b9ebfd020189e29c1a1f6b17c7c86d978', class: "co-select__dropdown" }, this.isOpen && this.searchable && (h("div", { key: 'ad68d72ce251b1b85e8d3b459f435036ee3e755c', class: "co-select__search" }, h("co-icon", { key: '17fce190c24cc8d3a858b0d8eac91fa2f0bfcdc4', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '11b596b00d4ec1ca622fbf8f2a4fe1206dbbd175', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, onInput: this.handleSearchInput, onKeyDown: this.handleNavKeyDown, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: '248d24733e9a785582be376e9adf1bddd486db79', class: "co-select__empty" }, this.emptyText)), h("div", { key: 'd4a45905d6eeac9e7275df90e01fb7e2fb092fbd', class: "co-select__options", id: CoSelect.LISTBOX_ID, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
             const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
             return (
             // Los wrappers del virtualizador van `presentation` para que las
@@ -497,7 +497,7 @@ export class CoSelect {
                         'co-select__option--active': index === this.activeIndex,
                     }, onClick: () => !isDisabled && this.handleOptionClick(opt.value) }, opt.image ? (h("img", { class: "co-select__option-flag", src: opt.image, alt: "", loading: "lazy" })) : opt.icon ? (h("co-icon", { name: opt.icon, size: 20, class: "co-select__option-icon" })) : null, h("span", { class: "co-select__option-label" }, this.renderLabel(opt.label)), isSelected && h("co-icon", { name: "check", size: 16, class: "co-select__option-check" })));
             }))));
-        })()), this.isOpen && this.showFooter && (h("co-list-footer", { key: 'c149c3f4f7b530c29b01f793a47a07b1a1d0987e', class: "co-select__footer", primaryLabel: this.footerPrimaryLabel, primaryIcon: "check", onCoPrimary: this.handleFooterPrimary })))), this.helperText && (h("div", { key: '3b803c16df5f825c240b8c48a4d5377b85fa1b23', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '5e076fb55ded68c8d2febde25aa1f6ef6fc6e445', name: this.statusIcon, size: 14, class: "co-select__helper-icon" }), h("span", { key: 'eb5d5a290f80869bf4c0eecf1b2eaa6d48145721', class: "co-select__helper-text" }, this.helperText)))));
+        })()), this.isOpen && this.showFooter && (h("co-list-footer", { key: 'd4ec3a85eb066f11213ba0fa4614cc7439180121', class: "co-select__footer", primaryLabel: this.footerPrimaryLabel, primaryIcon: "check", onCoPrimary: this.handleFooterPrimary })))), this.helperText && (h("div", { key: '893289181663600d899a1dba74f2ac47cba72a28', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'a21b2833866b76dc197cbb1a50edd1e1ec9d3e16', name: this.statusIcon, size: 14, class: "co-select__helper-icon" }), h("span", { key: '5c887dd997d3f7046f74586a5c4258f9a02df416', class: "co-select__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-select"; }
     static get encapsulation() { return "shadow"; }
@@ -532,6 +532,25 @@ export class CoSelect {
                 "reflect": false,
                 "attribute": "label"
             },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the combobox when there is NO visible `label` (compact\nrows that drop the field label). Same `ariaLabelText` precedent as\nco-button / co-icon-button / co-fab. `label` still wins as the visible\nname; this only fills the gap \u2014 an `aria-label` on the host never crosses\nthe shadow boundary, so without it a label-less select is nameless."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text"
+            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -718,7 +737,7 @@ export class CoSelect {
                     "references": {
                         "SelectOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-rel-20260827-tooltip/packages/core/src/components/co-select/co-select.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release/packages/core/src/components/co-select/co-select.tsx",
                             "id": "src/components/co-select/co-select.tsx::SelectOption"
                         }
                     }

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

@@ -57,7 +57,7 @@ export class CoSeparator {
                 style['--co-separator-inset-end'] = '0px';
             }
         }
-        return (h("hr", { key: '0dc126dcca1c3c1a9b7c81f826ea6dc88e5fe8cf', class: {
+        return (h("hr", { key: '049f323b914f76e3ea6097e56fbbda92e827c58d', class: {
                 'co-separator': true,
                 'co-separator--vertical': this.vertical,
                 'co-separator--dark': this.dark,

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

@@ -10,10 +10,10 @@ export class CoSidebar {
         this.mode = 'full';
     }
     render() {
-        return (h("nav", { key: 'fca10c02609e09fc438ce161abd1d78c09c69069', class: {
+        return (h("nav", { key: '2b28eeec6d294b22c82de54918a5c9f5da2765b9', class: {
                 'co-sidebar': true,
                 [`co-sidebar--${this.mode}`]: true,
-            }, part: "sidebar" }, h("div", { key: '1544927cf558bb7531a0f7b4c0b8c65639221c20', class: "co-sidebar__header", part: "header" }, h("slot", { key: 'be023481e358dca947923cf2832326b4c9226d81', name: "header" })), h("div", { key: 'd949188bc503b24fd01324c70ff422ac0ec63515', class: "co-sidebar__body", part: "body" }, h("slot", { key: '49bfd3625171421229664033cdb18f7117938c7d' })), h("div", { key: '511cf30ca3a8102d50c6351c7d56a4ac5f05da9e', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: 'f299146e4692b337dbd3fe2dfbb1fe7d4bd52fb4', name: "footer" }))));
+            }, part: "sidebar" }, h("div", { key: 'a2f2c05634bb76c3e9a9fdab221835d94c25d9fc', class: "co-sidebar__header", part: "header" }, h("slot", { key: 'f32a89453858268fd4672330fdf1d263793ae578', name: "header" })), h("div", { key: 'ecfaf8385f5fed7f545268e29a5a67468aa5a87a', class: "co-sidebar__body", part: "body" }, h("slot", { key: '2466d2aefe5268f21fd515d282baae2662c17f6c' })), h("div", { key: 'b7e2738a2a6bef17f588d59fba0c4ab21aefa7f8', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: 'dcfcf1f58c99ca0acf359bbf9f73dfe51b0e7c76', name: "footer" }))));
     }
     static get is() { return "co-sidebar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.css

@@ -263,8 +263,8 @@
      defaults (mismos valores que co-button/co-icon-button). */
   --co-glass-blur: 12px;
   --co-glass-saturate: 1.3;
-  -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));
+  -webkit-backdrop-filter: var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));
+          backdrop-filter: var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));
 }
 
 /* Hover on the ACTIVE item: keep the workspace pill, just MORE opaque (solid

package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.js

@@ -702,7 +702,7 @@ export class CoSidebarNav {
                     "references": {
                         "NavigateDetail": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-rel-20260827-tooltip/packages/core/src/components/co-sidebar-nav/co-sidebar-nav.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release/packages/core/src/components/co-sidebar-nav/co-sidebar-nav.tsx",
                             "id": "src/components/co-sidebar-nav/co-sidebar-nav.tsx::NavigateDetail"
                         }
                     }

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

@@ -18,6 +18,24 @@
 .co-skeleton--text { border-radius: var(--co-border-radius-xxs); }
 .co-skeleton--circle { border-radius: var(--co-border-radius-full); }
 
+/* Handoff de reveal: el host marca `revealed` cuando el contenido real llegó;
+   el skeleton se desvanece y avisa con coRevealEnd para el desmonte.
+   ease-in-out (spec): es un crossfade de handoff, no una salida seca.
+   opacity-only (sin filter/blur): el skeleton puede ser full-height (p.ej.
+   DataTableGridView a 100%×100%) — blur en una superficie grande está
+   prohibido por la convención de motion. */
+.co-skeleton {
+  transition: opacity var(--co-motion-duration-base) var(--co-motion-ease-in-out);
+}
+
+.co-skeleton--revealed {
+  opacity: 0;
+  pointer-events: none;
+  /* Apaga el sweep infinito durante/después del reveal — sin esto sigue
+     repintando bajo opacity:0 (invisible pero no gratis). */
+  animation: none;
+}
+
 @keyframes co-skeleton-sweep {
   0% { background-position: 200% 0; }
   100% { background-position: -200% 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: '45da8e989feca14de295c7b83bfd8f5e196a9734', 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: 'f1b21cde4464675c8a27a30f04af6aeb0eb5c115', 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: '20377b1c1b2cb329dd52cc10dfe4f5abf03eaecb', class: "co-slider__labels" }, h("div", { key: 'a9507269b1938732642ce7e7a4371628912377e3', class: "co-slider__labels-left" }, this.label && h("label", { key: '01e1760ef4a59ddc26bb4322f4b97133ccd04992', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: '1b6c54039e18d9c8025941f76e1b92699855abae', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'c3fa230e31d052a9cb8a2efc8a3ed3b0b93e8041', class: "co-slider__value" }, this.value))), h("div", { key: 'c387ace9f1256cf4cf52e23add68242c147cd398', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'f454a70a71984f0b45bd68efc9a36ba74bb4a73b', class: "co-slider__track" }, h("div", { key: '28b1fd955b14cd9ec563ad0a0c8cb625cf87bf1e', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: '3f8e97722be5d5589931158b243f3e7084dae971', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '7b58ecbcdfa544a47e15a9be15cec4baab35c56e', class: "co-slider__marks" }, h("span", { key: 'e94e7641d59d54aa92b7896d4f9a85cff93ca162', class: "co-slider__mark" }, this.min), h("span", { key: 'f6b139482d3d18885461d9d44fac8c4960897c00', class: "co-slider__mark" }, this.max))), h("input", { key: '65ddf275339b86a5451e28905ed4086bdde3bb75', 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: '4b603fee85613d8221dfdca0687d7735c7bd7947', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'c75be242a86fafbe87edaf0b47458f6897ca642f', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: 'fa7e03cd30070441423b261de7704c39f24fbb9d', 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: '956a6fb6f379beec4aceda49fb0b6460a4e88e7e', 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: '320bc52265bbb759766bf2897fa46149fd29ea56', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '8f8ccbee5f6b8bf4c59af1363184dc8289c0fd4f', 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: '963515eb5e7a6c2d8904367cabe4afd92c4034bd', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '2560a81688f26bc0b3bddef3c5553a8f9754678b', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '9996ab6c675c43be962414e28ecef532738322bc', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '5505498fc3a27b5bf515935c46a3fdfdfe563cad', required: this.required })), this.secondaryLabel && (h("span", { key: '6886950f1e66077f46cceca4aabf2b0ae7a21f3c', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '536e0021e9e1a986eb76eacf9e1b9af37cf0e1f0', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'e98eb52b8f30b868b0b4df6f45b7594290c8ebd3', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: 'f77df5e62fedd3c28dd0e6b8dcc2ad9118c9f032', 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: '773b792dbc4250e0833629d95495b97140892ee3', 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: '764382b4d7a71307897e71b1937c0b22b5c873b0', name: this.iconLeft, size: iconSize })), h("span", { key: '0276e774f797a28a5a9d4a22726a8c5b40ee7c72' }, this.label), this.badge && (h("span", { key: '8d758122ee23232d7687b69f8dddf1820f647505', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '5c2fda105048d62b45a5f0a124110a4a5b919575', 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: '70c781dc6c053c0fbaecb294d08130df50f6895c', 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: '4337b016d1ce84d1d4bdda5d8f0f6b3f03e1fa27', 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: 'f3e43affdea1fbb7b4a146c7d47fc476064a4461', 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: 'd1ee2a4474f714b5677dbe30234c35ae5eafcbb8', class: "co-tags-field__labels" }, h("label", { key: '2992ec19d614d79e4d464c4d395d0928b4640796', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'dff39a47aeb7f61abeffd3da6d774feea1cbb690', required: this.required })))), h("div", { key: '634c966d0e00075e31a87e8c34d5d82e706d259b', class: "co-tags-field__field-row" }, h("div", { key: '770158cf92aebf36c7ef070af2dedc15527b0207', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: 'd92243180b3a674e7a8c49e5d693cec55e77b90d', 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: '9b60812333730a949d9bef63f63690086735d4ad', 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: '5e36f6cbe51abd905584791348bd00ff903d448a', 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: 'bf2295665df0b0f628ab68b33435b5864af74c7e', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'bb9359faedaec2cbcf175929b24f2d00ecf13e59', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: '7994108e5ab59ad4e85243b44b958a6ebfaf250f', 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: '0ec2df5f071939df6b84dc4c0a013d3c2355bfeb', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '82354fcd44fe07f40f906cf88c998554ac7b199a', 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: 'c5d9a8fc2c47e2ac4787441d2837b9bf600aceb8', 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: '4c71cdc7a1d8063b4fc88613cc6840ae4d8fffbd', class: "co-textarea__labels" }, this.label && (h("label", { key: '7a332a79ca80a5e7e6e0e18431871c83175cf6ad', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: 'f266eeff511590081664ff5677e85f91bb8cc6c6', required: this.required }))), this.secondaryLabel && (h("span", { key: '43d1d98374cd6cdb9e9ebbed9a0677d36ccf0242', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '31b9a71972fc8bf6db1e01f6ef421d1cd01c0c71', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'c6e42c9cb50919f8d28d52acc6ac67824d2ab9bc', 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: '37ade2676d789e93699b31c60ee1922287613c99', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '635e46dd3780dce114beeda02e05a8dc512f0e64', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: 'c845c82bba32624dbb23b518283f646fc573766e', class: "co-textarea__footer" }, this.helperText && (h("div", { key: '3cf30fdfbab68e06fc757b7a64b7d89cbefe53ac', 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: '16009fbd88a7f4769bb1ddf1cbadf8aaf3dce17b', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '3986eda7ec8df0da750a410bf6c361b864386d64', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: '7ed3ab0c254b0d69f90016dcdc419408410ea457', 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);
+}