@prolibu-suite/cobalt-core 0.3.0 → 0.4.0

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

@@ -484,10 +484,10 @@ export class CoSidebarNav {
         // `flyout-open` (min mode only) lets the CSS drop the host edge-fade mask
         // while a flyout is shown — a host mask would otherwise clip AND
         // mis-position the fixed flyout (mask makes the host a containing block).
-        h(Host, { key: 'b24ca79d961f65bbe629e0289185de1751ab1fd1', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: 'e37ad68826bf9236c9a009a8b4355dfaca2d3a3d', class: {
+        h(Host, { key: '4cbc7c52e223889678c0b65bc2ccb1f27c1e6b1e', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '4ff3825c2ac7f47bf87b81bc09ac76d0317ea300', class: {
                 'co-sidebar-nav': true,
                 'co-sidebar-nav--min': this.mode === 'min',
-            } }, this.renderSearch(), h("div", { key: 'ccf9c947e0fa3f4494ebd9fa55e2c726836e8c59', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
+            } }, this.renderSearch(), h("div", { key: '69552a770759709fd7e36a3af383987391dd338b', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
     }
     static get is() { return "co-sidebar-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class CoSkeleton {
         const style = { width: this.width };
         if (this.height)
             style.height = this.height;
-        return (h("div", { key: '073c65d588917203f4f6a253a97535dc8a1a38f7', class: { 'co-skeleton': true, [`co-skeleton--${this.variant}`]: true }, part: "skeleton", style: style, "aria-hidden": "true" }));
+        return (h("div", { key: 'eddef7fdf65325e1110ec444a129e6015db28df3', class: { 'co-skeleton': true, [`co-skeleton--${this.variant}`]: true }, part: "skeleton", style: style, "aria-hidden": "true" }));
     }
     static get is() { return "co-skeleton"; }
     static get encapsulation() { return "shadow"; }

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: '719f3ecd1e92b234f2938b570747c4d1f174903b', class: {
+        return (h("div", { key: 'a9f92ca57336e9bae289723f39592a47671a4b15', 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: 'fb46d7ebad65bf172b4c816b733e08ca991e5cb8', class: "co-slider__labels" }, h("div", { key: '21718e63d1d63f802f939c10f962f0e9ec5b56e6', class: "co-slider__labels-left" }, this.label && h("label", { key: 'd408bc63492d3b778f7314d1e66864eb1ad6edce', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: '3e439468743dfcc0ff315bf388a074cdc4627f2d', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'a4e1faacfc462132454f6c5e3763d4fb19f68c64', class: "co-slider__value" }, this.value))), h("div", { key: 'eb56a12853ed3646a410a5514758d4fd518a8122', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'a1b207d80af7febbc40cd99bc9dac1dd67704b50', class: "co-slider__track" }, h("div", { key: '77df50269d88735f61d8f18e05261fa74f89095f', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'c162883c5bd5c162b42a4ab2d8ef305bec6e122f', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: 'c54273d0f17b2417603969d96c15218f450034b1', class: "co-slider__marks" }, h("span", { key: '8c79656db7ef7c5da77bfb4195e94f2b75cb17e6', class: "co-slider__mark" }, this.min), h("span", { key: 'f5b3a63ebd5ca13b4a5f3275f2084addb73a7f4e', class: "co-slider__mark" }, this.max))), h("input", { key: '415197b6ae17a3ca980171019d419939a5b3ae6c', 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: '935c2f02e24345bade1563782c3a252157eecd00', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '76f5ccf6375c362841726f24c4be222293bd14b3', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '909c3b06b4eecd507b595d31b78220c7c29fbf22', class: "co-slider__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '8eb64363bba56ffa4562338ba0d6d7136da14376', class: "co-slider__labels" }, h("div", { key: '4c3801ed323503bf8ade392fc36bff86d8b7110d', class: "co-slider__labels-left" }, this.label && h("label", { key: '597875203892c6a8a05a0320a68265fc5d1e3391', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'b625942a84e80fcdf41963496aa7638424c56d25', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'bda003630b130c2c06a1b69e4bbd152c247e9b13', class: "co-slider__value" }, this.value))), h("div", { key: '645b6872bdce75d9aba4dc3839a8dc69bd948397', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: '2ef7e7c4c323818611edf0adc84e785c0c588892', class: "co-slider__track" }, h("div", { key: '26abb3e3362f005068ecd55613641dadf4b9b634', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: '94275bcd27dee2b86fef7587f05651f5c32a43e0', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '7972dbf5887472c03ca7c585d393bad59e78479d', class: "co-slider__marks" }, h("span", { key: '3594c16276b5a41905f52132a3a4f93894cd71ea', class: "co-slider__mark" }, this.min), h("span", { key: 'ef4c8c98850d33cf00b0eeb05a913c203d740f3f', class: "co-slider__mark" }, this.max))), h("input", { key: 'd0a72d43d4a0c420038287a4e3fd357781a4ad25', 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: 'd9006a19d95d4bb99b336d755c5ed6e20c842bbf', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '2a646e6a2d7baf2230fb7e0472b8bc2a2d1b01cb', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '76fd161a9ee5415c7d36bcd91b2651970c123624', 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.js

@@ -29,16 +29,16 @@ export class CoSwitch {
     render() {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = !!this.helperText;
-        return (h("div", { key: '2a60b60256d74e480b243ddb3901e5e8e86c90dd', class: {
+        return (h("div", { key: '38cc6534a6d29b3453180409c4140b41e41c5970', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: '57826bc0de97ccb8358f544f11a25c2b7000bbb8', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '5ccd4d33fde509bd9139a5e453c93991dda1f558', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, h("div", { key: '5bec2bdbf3de9f5470840fac1c4abfad098e289a', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: 'd0039ee4818969f46c7014dbc1b29cb6fa3a021c', 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: 'f530dcbf59372906efe0b45048cd5d60b139e9bc', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '24693a23c390a4a5e892f61998fc60a29ce9367f', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: 'e1c8fc8d176e8f7af8e8cdab90671061e0e66ab7', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'bfc33a5e95f7e9fd0f9ca55ccd6c990515623e0e', required: this.required })), this.secondaryLabel && (h("span", { key: 'd4fe51103f9c13dee75e96b8ec8faa254fbedde3', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '1b2d6c1124e2d0f448b9aa0ed019e75b75426949', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'ae56e1f679f393f77bb3836dfd61dee093a8a461', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: 'd99621887a268b3b9b19361890c8582adbaa4482', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, disabled: this.disabled, part: "track" }, h("span", { key: 'b7bfcd10fb3e0eaa4083f1f08ba01ed4e7d05b48', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '46497aa93ae79b1d8beb0dcdbacf9ebd07a93fa9', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '0f0364713a3d6f29f1f496d91ad0d89b957e92fe', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'de427dfa828e8bb55d6b05ac6fa854fd6ce9d128', required: this.required })), this.secondaryLabel && (h("span", { key: 'b00e86fd005b72fcea23db91dbe4f3d39cf8026c', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '6ab547b5c56216132685647f026eae7a879b6338', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'e5eedf552bff62777946b448da584512a0a8c9b5', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: 'c2d3242dbb21c85cdba0d7eb48b263fa6b555b73', 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.css

@@ -33,8 +33,11 @@
   height: 40px;
 }
 
-/* ─── States ────────────────────────────────────────────────── */
-.co-tab:hover:not(:disabled) {
+/* ─── States (pill) ─────────────────────────────────────────── */
+/* Hover fill is scoped to the pill variant so the underline variant
+   has no hover rule. Every pill tab carries `.co-tab--pill`, so this
+   reproduces the previous `.co-tab:hover` behavior exactly. */
+.co-tab--pill:hover:not(:disabled) {
   background: var(--co-color-gris-100, #f6f6f6);
   color: var(--co-color-base-negro, #1f1c1b);
 }
@@ -45,7 +48,7 @@
   font-weight: 500;
 }
 
-.co-tab--selected:hover:not(:disabled) {
+.co-tab--pill.co-tab--selected:hover:not(:disabled) {
   background: var(--co-color-gris-100, #f6f6f6);
   color: var(--co-color-base-negro, #1f1c1b);
 }
@@ -59,3 +62,51 @@
   outline: 2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul, #2563eb));
   outline-offset: 2px;
 }
+
+/* ─── Underline variant ─────────────────────────────────────── */
+/* Transparent bg in ALL states; only the bottom-border colour, text
+   colour and weight change. No hover rule. Placed after the size
+   rules so its fixed height/padding win on a specificity tie. */
+.co-tab--underline {
+  height: var(--co-spacing-4xl, 40px);
+  padding: 0 var(--co-spacing-md, 12px);
+  gap: var(--co-spacing-sm2, 8px);
+  border-radius: 0;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  background: transparent;
+  color: var(--co-color-gray-500, #888888);
+  font-size: var(--co-font-size-14, 14px);
+  font-weight: 400;
+  letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
+  transition: color 0.12s ease;
+}
+
+.co-tab--underline.co-tab--selected {
+  background: transparent;
+  border-bottom-color: var(--co-color-base-negro, #1f1c1b);
+  color: var(--co-color-base-negro, #1f1c1b);
+  font-weight: 500;
+}
+
+/* ─── Badge pill ────────────────────────────────────────────── */
+.co-tab__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: var(--co-border-radius-full, 9999px);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  background: var(--co-color-gray-200, #e3e3e3);
+  color: var(--co-color-gray-600, #585858);
+}
+
+.co-tab--selected .co-tab__badge {
+  background: var(--co-color-base-negro, #1f1c1b);
+  color: var(--co-color-base-blanco, #fff);
+}

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

@@ -9,6 +9,8 @@ export class CoTab {
         this.selected = false;
         /** Size */
         this.size = 'small';
+        /** Visual variant: filled pill (default) or underline tab */
+        this.variant = 'pill';
         /** Disabled state */
         this.disabled = false;
         this.handleClick = () => {
@@ -18,13 +20,14 @@ export class CoTab {
         };
     }
     render() {
-        const iconSize = this.size === 'large' ? 18 : 14;
-        return (h("button", { key: 'f639c074e062b1d8f2cb0062cb617a53451ec78f', class: {
+        const iconSize = this.variant === 'underline' ? 16 : this.size === 'large' ? 18 : 14;
+        return (h("button", { key: '6f181c1c0f6de62256ba768f656d0671b3e1968f', 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: 'eaae38c6de14707c2b0a318f0afea16a3b5051f8', name: this.iconLeft, size: iconSize })), h("span", { key: '296bac2a9c7639b590065b6eba2730218fff3ba2', class: "co-tab__label" }, this.label), this.iconRight && (h("co-icon", { key: 'cf2c205989a2a172ab16482bfb510dbb0be86453', 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: '0fd0c49bf5e1836ed1250f98efcd68a7752a0c34', name: this.iconLeft, size: iconSize })), h("span", { key: '2b71c8f428d2c775675c6f96d7e2e2f9733081b5', class: "co-tab__label" }, this.label), this.badge && (h("span", { key: '168c7695c9694026442662632e57f41f907ca727', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '1d290f34920e4d5d451f5f0d145796244fb94884', name: this.iconRight, size: iconSize }))));
     }
     static get is() { return "co-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -120,6 +123,45 @@ export class CoTab {
                 "attribute": "size",
                 "defaultValue": "'small'"
             },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'pill' | 'underline'",
+                    "resolved": "\"pill\" | \"underline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant: filled pill (default) or underline tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'pill'"
+            },
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional count/badge pill rendered after the label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge"
+            },
             "iconLeft": {
                 "type": "string",
                 "mutable": false,

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

@@ -7,3 +7,11 @@
   align-items: center;
   gap: var(--co-spacing-sm2);
 }
+
+/* ─── Underline variant ─────────────────────────────────────── */
+/* Full-width hairline rail under the tabs; children overlap it with
+   their own `margin-bottom: -1px`. */
+.co-tab-group--underline {
+  gap: var(--co-spacing-xs, 4px);
+  border-bottom: 1px solid var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+}

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

@@ -1,5 +1,9 @@
 import { h } from "@stencil/core";
 export class CoTabGroup {
+    constructor() {
+        /** Visual variant, propagated to slotted co-tab children */
+        this.variant = 'pill';
+    }
     onTabSelect(e) {
         e.stopPropagation();
         this.value = e.detail;
@@ -9,6 +13,9 @@ export class CoTabGroup {
     watchValue() {
         this.syncTabs();
     }
+    watchVariant() {
+        this.syncTabs();
+    }
     componentDidLoad() {
         this.syncTabs();
     }
@@ -16,10 +23,14 @@ export class CoTabGroup {
         const tabs = this.el.querySelectorAll('co-tab');
         tabs.forEach((tab) => {
             tab.selected = (tab.value || tab.label) === this.value;
+            tab.variant = this.variant;
         });
     }
     render() {
-        return (h("div", { key: '458524e7f1469d90c43bf9a8f34ee68d511e9d36', class: "co-tab-group", role: "tablist", part: "tab-group" }, h("slot", { key: 'f11af2be459cb51e9cd426d0e20839fd6d1477f8' })));
+        return (h("div", { key: '3ff595c9a6437d18ea990ca2b798f2ad182f5974', class: {
+                'co-tab-group': true,
+                [`co-tab-group--${this.variant}`]: true,
+            }, role: "tablist", part: "tab-group" }, h("slot", { key: 'b968cc4febb7156bf7e00bed02a6ec50fda354b0' })));
     }
     static get is() { return "co-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -53,6 +64,26 @@ export class CoTabGroup {
                 "setter": false,
                 "reflect": true,
                 "attribute": "value"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'pill' | 'underline'",
+                    "resolved": "\"pill\" | \"underline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant, propagated to slotted co-tab children"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'pill'"
             }
         };
     }
@@ -79,6 +110,9 @@ export class CoTabGroup {
         return [{
                 "propName": "value",
                 "methodName": "watchValue"
+            }, {
+                "propName": "variant",
+                "methodName": "watchVariant"
             }];
     }
     static get listeners() {

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: '1cef49a116560d7dbb9bf8d188fdc96361a57eb2', class: {
+        return (h("div", { key: 'b06b0400bebca239be4b3510c790e649a0b09e55', 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: 'a4b799bdb15d8a64d86e9b3f367da4eb080a513a', class: "co-tags-field__labels" }, h("label", { key: '09b17b8888f9ab34ae6e52d6149f2234bab29cad', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '2e629eb73a4b76d7484f506edf26de88b13082b3', required: this.required })))), h("div", { key: 'd0f285b57c0d0dec34f5c62889c09eeb1b85d7f0', class: "co-tags-field__field-row" }, h("div", { key: '244270d7af8d9a615fa4e294d52986e470c71882', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '434c8fe594082e57a1bc84c83467041f9070cc8b', 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: '0476d5d5e3522e3de8703ffe48aaab76e892e7bd', class: "co-tags-field__labels" }, h("label", { key: '23c99c158c88d6fc508218b40d037176728700d0', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '0c88d8476cc6c316132a2888f51d3eb49736d205', required: this.required })))), h("div", { key: 'f261306b322b86b0ce6319b74c1dd5a604e354d1', class: "co-tags-field__field-row" }, h("div", { key: 'ee3d816cf0c5197676629840eef464f85fcf9559', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: 'a9c34371df22b4741d4c6ad1a3842df6f9a2f67d', 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: '2b425cbf2761cac6eb63bd9e6b27e5dcc082dc69', 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: 'a972a27e6b26d585e66a1d400e8af1da4571d12d', class: {
+                : undefined }))), showInput && (h("input", { key: 'e3619e500dce2c86bbc964e80ce1b47bac97b488', 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: 'd55a9de7143a4ec296b519d27d08528446c3eb7f', 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: '7d7286ed2c13129e40dd18e205626615d0b94022', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'd1538321cd3e330a54978424ec165fe8b9a533e4', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'e74d2fcbe0c8355cb66becbe526d974f524acdfa', 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: 'dfb1fb1b0e91013eaa6ce324089e04d9db16d5a5', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '1981743bf4ecdcca8ff44b92c234cd51cdeef536', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'de671e568b85b27e03636530a544adaf46334e77', class: {
                 'co-tags-field__helper': true,
                 'co-tags-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '17642154cb83071f07819f98dccd866066d0eae1', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '1cf60e4b7f9eed91aacdb0ab4044b20a2971d57d', class: "co-tags-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '057154aa6ccbe1598b6d3fa9c82febb929454288', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '2d79353740ced07fa8d8e9fa2541ddf9d6261522', 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

@@ -71,7 +71,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: 'bbc105515a08e5ddf757c3095aa220d9ff3c1643', class: {
+        return (h("div", { key: '3988a4a4fd675326284655953e77cace71ba661d', class: {
                 'co-textarea': true,
                 'co-textarea--disabled': this.disabled,
                 'co-textarea--focused': this.hasFocus,
@@ -79,13 +79,13 @@ export class CoTextarea {
                 'co-textarea--over-limit': isOverLimit,
                 [`co-textarea--${this.size}`]: true,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '54eeba06154d9ce2ec18e41046cdab973c7b30ab', class: "co-textarea__labels" }, this.label && (h("label", { key: 'b7f996ad516af104753219042d6fa3f0db32f462', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: '29801d7d5958919629d93c6ae70312f44196b907', required: this.required }))), this.secondaryLabel && (h("span", { key: 'fe3637ec4dc07d95ba73d372b93d4205bf9b836c', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'ca1f28e1b809c0e6071a98f654ec0b9d5f55d474', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'f5db20027591b83a255e746dcda548f6b308972f', ref: (el) => (this.textareaEl = el), class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'c2ba685f08ada1353acb384316980dcddd4b9874', class: "co-textarea__labels" }, this.label && (h("label", { key: '91de715c89f556954471a00a00874e80f20ad186', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: 'c1409b803c1a0c9b9581a56b9790d9a2b7b63967', required: this.required }))), this.secondaryLabel && (h("span", { key: '51010b5855f06a455456153d8cac39142473951d', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'e4e20df0ae7995636a328af6f65408b2388ea94e', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'd4e01012fcacf351d90047dc4f6c6e495025fb2a', 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: 'd795cedb2bc45a8fa15a364eabb54dba869672f5', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '72406240943ffe5644a83e5b00f028a246de792c', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: 'efeb161b6c9cf518d55446d7ed319d343afa736c', class: "co-textarea__footer" }, this.helperText && (h("div", { key: '0741e7389c3bd2ee683b16fe6a06705f81826bd7', 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: '6e83fc70c4f4ca97b08dcce9c11ab8d07f3fb0ce', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'c7a5be4eb9c1b225ed390af6c90eeb8cbc530996', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '3211a12b4ef280e2aced5d55cff670a096b99b4e', class: "co-textarea__footer" }, this.helperText && (h("div", { key: 'f98be39968e67ab8dc2b3962977def3997964e00', class: {
                 'co-textarea__helper': true,
                 'co-textarea__helper--error': this.status === 'error',
-            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '51bd6497349280c1e09bfe4fc8b066726318c08d', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '63d07623f709027a4a0f4eac8a25fb6b72b8043b', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: 'e9b6498ea76e13e69bf58cf8996cafa3561f4609', class: {
+            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '117908cada80bf151660808799a13ca04458611a', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '4e1410e04d7989554495b0727a750887208649e3', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: 'd5bcfc362cc82d2dcaa2fe2d4c72b08e368a3196', class: {
                 'co-textarea__counter': true,
                 'co-textarea__counter--over': isOverLimit,
             }, part: "counter" }, this.charCount, "/", this.maxLength))))));

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

@@ -28,7 +28,8 @@
 }
 
 .co-toast--multiline,
-.co-toast--stacked {
+.co-toast--stacked,
+.co-toast--progress {
   align-items: flex-start;
 }
 
@@ -38,10 +39,16 @@
   color: var(--co-toast-icon);
 }
 
-.co-toast--multiline .co-toast__icon {
+.co-toast--multiline .co-toast__icon,
+.co-toast--progress .co-toast__icon {
   padding-top: 2px;
 }
 
+/* Progress icon is always the azul upload accent */
+.co-toast--progress .co-toast__icon {
+  color: var(--co-color-primary-azul, #2563eb);
+}
+
 .co-toast__body {
   display: flex;
   flex-direction: column;
@@ -160,3 +167,50 @@
   --co-toast-dismiss-bg: var(--co-color-status-progress);
   --co-toast-dismiss-color: var(--co-color-base-blanco);
 }
+
+/* ─── Progress (upload/loading) ──────────────────────────────────────
+ * Additive: only rendered when the `progress` prop is a number. Message
+ * row + percentage label, with a determinate track underneath.          */
+
+.co-toast__progress {
+  min-width: 0;
+}
+
+.co-toast__progress-header {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-md);
+  min-width: 0;
+}
+
+.co-toast__progress-header .co-toast__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.co-toast__percent {
+  flex-shrink: 0;
+  font-size: var(--co-font-size-12, 12px);
+  font-weight: 400;
+  line-height: 1.25;
+  letter-spacing: var(--co-font-letter-spacing-body);
+  color: var(--co-color-gray-500, #888888);
+  font-variant-numeric: tabular-nums;
+}
+
+.co-toast__track {
+  width: 100%;
+  height: 6px;
+  margin-top: 9px;
+  border-radius: 9999px;
+  background: var(--co-color-gray-100, #f6f6f6);
+  overflow: hidden;
+}
+
+.co-toast__fill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--co-color-primary-azul, #2563eb);
+  transition: width 0.3s ease;
+}

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

@@ -33,15 +33,21 @@ export class CoToast {
         var _a;
         const hasDescription = !!this.description;
         const isStacked = this.actionsLayout === 'stacked';
-        const resolvedIcon = (_a = this.icon) !== null && _a !== void 0 ? _a : DEFAULT_ICON[this.variant];
+        const hasProgress = this.progress !== undefined && this.progress !== null;
+        const clampedProgress = hasProgress
+            ? Math.max(0, Math.min(100, this.progress))
+            : 0;
+        const resolvedIcon = (_a = this.icon) !== null && _a !== void 0 ? _a : (hasProgress ? 'upload-simple' : DEFAULT_ICON[this.variant]);
         const role = ALERT_VARIANTS.includes(this.variant) ? 'alert' : 'status';
         const rootClass = {
             'co-toast': true,
             [`co-toast--${this.variant}`]: true,
             'co-toast--multiline': hasDescription,
             'co-toast--stacked': isStacked,
+            'co-toast--progress': hasProgress,
         };
-        return (h("div", { key: '2113d3f769ae8575ff5031a558625fda2e1482cc', class: rootClass, part: "toast", role: role }, resolvedIcon && (h("span", { key: '7019ff2526714c5dfc79ed276f4905399752b3dd', class: "co-toast__icon" }, h("co-icon", { key: 'a99bd1cd1d7e47e618924ca13b44f461d42828c8', name: resolvedIcon, size: 20 }))), h("div", { key: '0ab3a6e6fb7cd6315f85a350c8813b6e9530911b', class: "co-toast__body" }, h("div", { key: '24e9d31de0a9d0b4eb128702ecde67b081166638', class: "co-toast__content" }, h("span", { key: '7dc886e4103b626c08208fb0e4504ba2c8654922', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'f98fb4331439a518192ea34174dae62ba4156c7c', class: "co-toast__description" }, this.description))), isStacked && (h("div", { key: '6298bc22d84a34057d918e39a29d94d62b9fd571', class: "co-toast__actions" }, h("slot", { key: '71d176dcc20b2fb91e134ede5e09e06166350856', name: "action" })))), !isStacked && (h("div", { key: '5cc30d3a60648e2d599a63989ffeb90e28ff6b72', class: "co-toast__actions" }, h("slot", { key: 'bb8a00f5ce4b7737b70960e95a986542278b90c6', name: "action" }))), this.dismissible && (h("button", { key: 'c9f5da7275c6cdd3c4bf512821b1d05309d74090', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: 'c9bf8eb4639d0e558739d3cf63fc169d4c7721eb', name: "x", size: 16 })))));
+        const content = (h("div", { key: 'bb0663300f9e7147fde81450bc1ea78b1900311b', class: "co-toast__content" }, h("span", { key: '1db1114d3dd4cb7ce4406354f9949f8e4f024501', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'd4367238b602556e39bc53f68c136b895296c5c8', class: "co-toast__description" }, this.description))));
+        return (h("div", { key: '3e76f3e5a188753d7829066998cc440f93975471', class: rootClass, part: "toast", role: role }, resolvedIcon && (h("span", { key: 'df94035e5a376b5a6acadc0492ef30122e79f796', class: "co-toast__icon" }, h("co-icon", { key: 'b1c61c6c53340a743f1a669b23f494709c802e5b', name: resolvedIcon, size: 20 }))), h("div", { key: 'fff08bbeff5b8c22bcde6db3f80d5a35253dd435', class: "co-toast__body" }, hasProgress ? (h("div", { class: "co-toast__progress" }, h("div", { class: "co-toast__progress-header" }, content, h("span", { class: "co-toast__percent" }, clampedProgress, "%")), h("div", { class: "co-toast__track", part: "track", role: "progressbar", "aria-valuenow": clampedProgress, "aria-valuemin": 0, "aria-valuemax": 100 }, h("span", { class: "co-toast__fill", part: "fill", style: { width: `${clampedProgress}%` } })))) : (content), isStacked && (h("div", { key: '9a0bce8712a96874af192ecfb57409509164e862', class: "co-toast__actions" }, h("slot", { key: 'de706ed811e39e1e15f01c40acf6102df5b58cae', name: "action" })))), !isStacked && (h("div", { key: 'f9cce3ecff6f07b2aac1a13011445b441af005d4', class: "co-toast__actions" }, h("slot", { key: 'ba1beb4a6a90165461c14f7906b224231a53966f', name: "action" }))), this.dismissible && (h("button", { key: '3c4bb3a2802729229451604c86370748a214a678', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: '5f3daffe362c16a591f105bd8596a8d929348d6d', name: "x", size: 16 })))));
     }
     static get is() { return "co-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -186,6 +192,25 @@ export class CoToast {
                 "reflect": false,
                 "attribute": "variant",
                 "defaultValue": "'neutral'"
+            },
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determinate upload/loading progress (0\u2013100). When set, a progress track is\nrendered below the message row (with a percentage label, and an\n`upload-simple` azul icon when no `icon` is provided). Leave undefined for\na plain toast \u2014 behaviour is unchanged."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress"
             }
         };
     }

package/dist/collection/components/co-toggle-button/co-toggle-button.css

@@ -81,3 +81,41 @@
 @supports not (background: color-mix(in srgb, red, transparent)) {
   .co-toggle-button { background: var(--co-semantic-surface-secondary); }
 }
+
+/* Track variant — detached rounded pills that sit on the group's sunken track.
+   The parent co-toggle-button-group[variant='track'] reflects variant='track'
+   onto each child, so all styling below is fully self-contained per pill.
+   Connected variant is untouched. */
+:host([variant='track']) .co-toggle-button {
+  height: 30px;
+  border-radius: 8px;
+  border-color: transparent;
+  background: transparent;
+  color: var(--co-color-gray-500, #888888);
+  box-shadow: none;
+  padding: 0 12px;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+:host([variant='track']) .co-toggle-button.co-toggle-button--icon-only {
+  width: 34px;
+  padding: 0;
+}
+
+:host([variant='track']) .co-toggle-button:hover:not(:disabled) {
+  background: transparent;
+  color: var(--co-color-base-negro, #1f1c1b);
+}
+
+:host([variant='track']) .co-toggle-button--selected {
+  background: var(--co-color-base-blanco, #fff);
+  color: var(--co-color-base-negro, #1f1c1b);
+  border-color: transparent;
+  box-shadow: var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04));
+}
+
+:host([variant='track']) .co-toggle-button--selected:hover:not(:disabled) {
+  background: var(--co-color-base-blanco, #fff);
+  border-color: transparent;
+}