@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

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: '92285c15311b1e2c6a4f9259354fff37f372c5b1', class: "co-tab-group", role: "tablist", part: "tab-group" }, h("slot", { key: 'f7100d6cb992deae37e832f2bde89046418fbbff' })));
+        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.css

@@ -63,7 +63,9 @@
   align-items: flex-start;
   gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-xs) var(--co-spacing-md);
-  background: var(--co-semantic-surface-secondary);
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
   border: 1px solid var(--co-semantic-border-subtle);
   border-radius: var(--co-border-radius-xs);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
@@ -85,6 +87,38 @@
   padding: var(--co-spacing-xxs) 0;
 }
 
+/* ── Size variants (mirror co-input: s 28 / sm 32 / md 40 / lg 48).
+   Chips keep their intrinsic size (same as co-ref-field's sm), so a chip-filled
+   field may grow past min-height on the compact sizes. ── */
+.co-tags-field--s .co-tags-field__field {
+  min-height: 28px;
+  padding: var(--co-spacing-xxs) var(--co-spacing-sm);
+  font-size: var(--co-font-size-12);
+}
+
+.co-tags-field--sm .co-tags-field__field {
+  min-height: 32px;
+  padding: var(--co-spacing-xs) var(--co-spacing-sm);
+  font-size: var(--co-font-size-14);
+}
+
+/* md is the default (40px) — no override needed */
+
+.co-tags-field--lg .co-tags-field__field {
+  min-height: 48px;
+  padding: var(--co-spacing-sm) var(--co-spacing-lg);
+  font-size: var(--co-font-size-16);
+}
+
+/* The inner wrapper's own min-height+padding (28px+4px) would otherwise
+   overshoot the field's min-height — flatten it for s/sm (same trick as
+   co-date-field). */
+.co-tags-field--s .co-tags-field__input-wrapper,
+.co-tags-field--sm .co-tags-field__input-wrapper {
+  min-height: 0;
+  padding: 0;
+}
+
 /* Figma "Tipo=Chips" (node 780:26592) — same chip spec as co-ref-field. */
 .co-tags-field__chip {
   display: inline-flex;
@@ -270,3 +304,7 @@
   grid-column: 2;
   min-width: 0;
 }
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-tags-field__field { background: var(--co-semantic-surface-secondary); }
+}

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { RequiredMark } from "../../utils/requiredMark";
+import { FieldChip } from "../../utils/fieldChip";
 /**
  * Free-text tags input — type a value and press Enter/Tab (or comma) to add it
  * as a chip. Backspace on an empty input removes the last chip; double-click a
@@ -36,6 +37,8 @@ export class CoTagsField {
         this.invalid = false;
         /** Label layout: vertical (label above) or horizontal (label beside) */
         this.layout = 'vertical';
+        /** Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+        this.size = 'md';
         /** Raw text in the inline input. */
         this.draft = '';
         /** Index of the chip being edited inline, or null. */
@@ -183,25 +186,28 @@ 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: '6ddec5087eaf4b6cc662de1eebce5d936ec02964', 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,
-            }, part: "wrapper" }, this.label && (h("div", { key: '25cfd8aa738f620a86c3166d197bdee320427c18', class: "co-tags-field__labels" }, h("label", { key: '8aeeff373a2e565a20a6fa58e9f46214783b436a', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'b75ec517f2b6e0e7c16ec67a61764a0e3380a3ee', required: this.required })))), h("div", { key: '22ddf70f600f111ab5412a8fc132746a27068f9b', class: "co-tags-field__field-row" }, h("div", { key: 'd78e1d870904788dbe5fd9b2eb8e625f622c4b49', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '6dd2c44651d9202083eda49de6b14fdc1c40a2f8', 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() })) : (
-        // Field-chip per the Figma "Tipo=Chips" spec (14px label,
-        // x-circle remove) — same look as co-ref-field's chips.
-        h("span", { key: `chip-${index}-${tag}`, class: "co-tags-field__chip", title: tag, onDblClick: () => this.startEdit(index) }, h("span", { class: "co-tags-field__chip-label" }, tag), !this.disabled && !this.readonly && (h("button", { class: "co-tags-field__chip-remove", type: "button", tabIndex: -1, onClick: (e) => {
-                e.stopPropagation();
-                this.removeTag(index);
-            } }, h("co-icon", { name: "x-circle", weight: "fill", size: 16 })))))), showInput && (h("input", { key: '0385de15c170ab25efdb51265745a583e0f89f4e', 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: 'f3f6646342bbc87116dd381be8aab87e213ab53f', class: {
+                [`co-tags-field--${this.size}`]: true,
+            }, 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
+                ? (e) => {
+                    e.stopPropagation();
+                    this.removeTag(index);
+                }
+                : 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: 'fdd56eab3d6efe399ac074d363e24f34091b5eb0', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '15609d719a5db8cb05190b62e3600732b8a093b5', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'a41983aa2eea372fdd6bc7f3ea5578887f67e962', 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: 'e8fae5a5fb653015e7aed92ba22ea10f8bdd2b64', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '39beac5b7f7576ed3c6c83a417c3736ca086c9a5', 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"; }
@@ -491,6 +497,26 @@ export class CoTagsField {
                 "reflect": true,
                 "attribute": "layout",
                 "defaultValue": "'vertical'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
             }
         };
     }

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

@@ -66,7 +66,9 @@
 .co-textarea__field {
   position: relative;
   display: flex;
-  background: var(--co-semantic-surface-secondary);
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
   border: 1px solid var(--co-semantic-border-subtle);
   border-radius: var(--co-border-radius-xs);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
@@ -93,6 +95,25 @@
   color: var(--co-semantic-text-muted);
 }
 
+/* ── Size variants (mirror co-input paddings/font: s 12px / sm 14px /
+   md 14px default / lg 16px). Height comes from `rows`, not min-height. ── */
+.co-textarea--s .co-textarea__native {
+  padding: var(--co-spacing-xxs) var(--co-spacing-sm);
+  font-size: var(--co-font-size-12);
+}
+
+.co-textarea--sm .co-textarea__native {
+  padding: var(--co-spacing-xs) var(--co-spacing-sm);
+  font-size: var(--co-font-size-14);
+}
+
+/* md is the default — no override needed */
+
+.co-textarea--lg .co-textarea__native {
+  padding: var(--co-spacing-sm) var(--co-spacing-lg);
+  font-size: var(--co-font-size-16);
+}
+
 /* Resize variants */
 .co-textarea__native--resize-vertical {
   resize: vertical;
@@ -259,3 +280,7 @@
   grid-column: 2;
   min-width: 0;
 }
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-textarea__field { background: var(--co-semantic-surface-secondary); }
+}

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

@@ -30,6 +30,9 @@ export class CoTextarea {
         this.status = 'default';
         /** Label layout: vertical (label above) or horizontal (label beside) */
         this.layout = 'vertical';
+        /** Field size (mirrors co-input paddings/font: s / sm / md / lg).
+         *  Vertical extent still comes from `rows`. */
+        this.size = 'md';
         /** Show clear button when textarea has value */
         this.clearable = false;
         /** Resize behavior of the textarea */
@@ -68,20 +71,21 @@ 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: '0e160877b3fefe64f2da005eff7323c528e2f260', class: {
+        return (h("div", { key: '3988a4a4fd675326284655953e77cace71ba661d', class: {
                 'co-textarea': true,
                 'co-textarea--disabled': this.disabled,
                 'co-textarea--focused': this.hasFocus,
                 'co-textarea--filled': this.hasValue,
                 'co-textarea--over-limit': isOverLimit,
+                [`co-textarea--${this.size}`]: true,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '903688841736f2c70c3f44e4619285974beb80af', class: "co-textarea__labels" }, this.label && (h("label", { key: 'a74ffa8509cc809470d0c269dd2ba2edf9d4d184', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: '9589ea1bfdd871e1e0e5fdd43512efde94fb9933', required: this.required }))), this.secondaryLabel && (h("span", { key: '8b133899c6ad21233c6a10b0e09791f529064546', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '9d9bd3db4bc163a4429f3e1b5bb320b2cf261403', class: "co-textarea__field", part: "field" }, h("textarea", { key: '99fed67002ed7f2de3aa050085e9e3a90eda9652', 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: 'ad0d815278a6a8ab8bd4706b382f1f7aaaf087f3', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'b26e449735a78a4a44458e87de9df4969d95df67', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '958684f0a44b0a09ce9d7095c5c3a677a7c7f35a', class: "co-textarea__footer" }, this.helperText && (h("div", { key: '3abdc8f49e26d210a2eaff7838a372e87746c74c', 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: 'c874733960b31f7129e173728548a0ead315d72e', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '231e6acc23143094f59db60493861930bf77db50', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: '4978131a7caae184cb23c0e83d35c85f741fb1d6', 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))))));
@@ -355,6 +359,26 @@ export class CoTextarea {
                 "attribute": "layout",
                 "defaultValue": "'vertical'"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field size (mirrors co-input paddings/font: s / sm / md / lg).\nVertical extent still comes from `rows`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
             "clearable": {
                 "type": "boolean",
                 "mutable": false,

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: '764d958e40e198c3b02dc92d0fcb10f79c853547', class: rootClass, part: "toast", role: role }, resolvedIcon && (h("span", { key: '7064fdcf56694bc0b2f8a4a9338442db98560510', class: "co-toast__icon" }, h("co-icon", { key: 'cb3628ec9051d6d6ee42f432e8f9560bff276233', name: resolvedIcon, size: 20 }))), h("div", { key: 'aa15c35826277e7923bc7f8b0b0fcbd189706109', class: "co-toast__body" }, h("div", { key: '7a4992a6a984ff09cc8b6e0012a1c80309a0665b', class: "co-toast__content" }, h("span", { key: 'd6dd0e0f427395b311bbb9cee26d4a9be22900ce', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'f2167e0207c014933aef6bca2d9f5e2adc267abd', class: "co-toast__description" }, this.description))), isStacked && (h("div", { key: '448957a6f93ce912f231483d9469a38b23e72466', class: "co-toast__actions" }, h("slot", { key: '68834bc69baf4ba5ffa769a9edbd60f9441d7a44', name: "action" })))), !isStacked && (h("div", { key: 'ef11141a8d57484b75b3af5b974ec451c58a8f5a', class: "co-toast__actions" }, h("slot", { key: '417f06903a6b0d3fb4184175df675d28dfabca64', name: "action" }))), this.dismissible && (h("button", { key: 'cfbabfc9a35669c99c2a37ed1278e17d0dd77279', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: 'ef936e9c54768d46bf60335140f96dcd1c103d76', 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

@@ -2,7 +2,15 @@
 
 :host {
   display: inline-flex;
+  /* Squircle radius, size-aware — mirrors co-button shape="square".
+     Lives on :host so the group can read it (via reflected size) to
+     restore outer corners while flattening the inner seam. */
+  --co-toggle-button-radius: var(--co-border-radius-sm);
 }
+:host([size='l'])  { --co-toggle-button-radius: var(--co-border-radius-lg); }
+:host([size='m'])  { --co-toggle-button-radius: var(--co-border-radius-sm); }
+:host([size='s'])  { --co-toggle-button-radius: var(--co-border-radius-xs); }
+:host([size='xs']) { --co-toggle-button-radius: var(--co-border-radius-xs); }
 
 .co-toggle-button {
   display: inline-flex;
@@ -11,8 +19,15 @@
   justify-content: center;
   gap: var(--co-spacing-sm2);
   border: 1px solid var(--co-semantic-border-subtle);
-  border-radius: var(--co-border-radius-xs);
-  background: var(--co-semantic-surface-secondary);
+  /* Per-corner so the group can flatten just the seam corners (--co-tbr-*),
+     falling back to the squircle radius for standalone / outer corners. */
+  border-top-left-radius:     var(--co-tbr-tl, var(--co-toggle-button-radius));
+  border-top-right-radius:    var(--co-tbr-tr, var(--co-toggle-button-radius));
+  border-bottom-right-radius: var(--co-tbr-br, var(--co-toggle-button-radius));
+  border-bottom-left-radius:  var(--co-tbr-bl, var(--co-toggle-button-radius));
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 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));
   color: var(--co-semantic-text-default);
   font-family: var(--co-font-family-primary);
   font-weight: 500;
@@ -40,6 +55,9 @@
   background: var(--co-semantic-surface-hover);
 }
 
+/* Active tab: solid Cobalt black (matches co-button primary "Aplicar").
+   No translucency — over the drawer's white surface a frosted black just
+   reads as gray, which loses the strong active affordance. */
 .co-toggle-button--selected {
   background: var(--co-color-base-negro, #1f1c1b);
   color: var(--co-color-base-blanco, #fff);
@@ -47,8 +65,8 @@
 }
 
 .co-toggle-button--selected:hover:not(:disabled) {
-  background: var(--co-color-gray-700, #1f1c1b);
-  border-color: var(--co-color-gray-700, #1f1c1b);
+  background: var(--co-color-gray-800, #0a0a0a);
+  border-color: var(--co-color-gray-800, #0a0a0a);
 }
 
 .co-toggle-button--disabled {
@@ -59,3 +77,45 @@
 .co-toggle-button__label {
   line-height: 1;
 }
+
+@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;
+}

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

@@ -5,6 +5,9 @@ export class CoToggleButton {
         this.value = '';
         this.size = 'm';
         this.disabled = false;
+        /** Visual variant. 'track' renders the button as a detached rounded pill for a
+         *  sunken toggle-button-group track. Normally set by the parent group. */
+        this.variant = 'connected';
         this.handleClick = () => {
             if (this.disabled)
                 return;
@@ -13,14 +16,15 @@ export class CoToggleButton {
         };
     }
     render() {
-        const iconSize = this.size === 'l' ? 20 : this.size === 'xs' ? 14 : 16;
-        return (h("button", { key: '3e1a2d28437f608009c3a8dd7f8221773c42cf7d', class: {
+        const iconSize = this.variant === 'track' ? 18 : this.size === 'l' ? 20 : this.size === 'xs' ? 14 : 16;
+        const iconWeight = this.selected && this.selectedIconWeight ? this.selectedIconWeight : undefined;
+        return (h("button", { key: 'd45897e4ecc1fadd3f51d48f16e325460edc9d64', class: {
                 'co-toggle-button': true,
                 'co-toggle-button--selected': this.selected,
                 [`co-toggle-button--${this.size}`]: true,
                 'co-toggle-button--disabled': this.disabled,
                 'co-toggle-button--icon-only': !this.label && (!!this.iconLeft || !!this.iconRight),
-            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, this.iconLeft && h("co-icon", { key: 'b6ddaa41d5264433483d0a7f911505106d657186', name: this.iconLeft, size: iconSize }), this.label && h("span", { key: 'b908957caffbce488c5483fc83e46bf918abcded', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '462027b869fe5122fdd3c7e9f00d0662271875fa', name: this.iconRight, size: iconSize })));
+            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, this.iconLeft && h("co-icon", { key: '923f577d048c1444b057cfb6d5f02e552cdd82da', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: '81720f7d05511ac48f43bea8bd1c0b7fd1b9fa1e', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '8aa3946bb1434a02c182631f0d731a28e3ee3668', name: this.iconRight, size: iconSize, weight: iconWeight })));
     }
     static get is() { return "co-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -149,7 +153,7 @@ export class CoToggleButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "size",
                 "defaultValue": "'m'"
             },
@@ -172,6 +176,45 @@ export class CoToggleButton {
                 "reflect": false,
                 "attribute": "disabled",
                 "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'connected' | 'track'",
+                    "resolved": "\"connected\" | \"track\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant. 'track' renders the button as a detached rounded pill for a\nsunken toggle-button-group track. Normally set by the parent group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'connected'"
+            },
+            "selectedIconWeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'regular' | 'fill'",
+                    "resolved": "\"fill\" | \"regular\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When set, the leading/trailing icon renders at this weight while the button\nis selected (e.g. 'fill' for the active segment of a track toggle)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-icon-weight"
             }
         };
     }