@prolibu-suite/cobalt-core 0.3.0 → 0.5.0

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

@@ -15,7 +15,7 @@
   white-space: nowrap;
   border-radius: var(--co-border-radius-full);
   background: transparent;
-  color: var(--co-color-gris-500, #888);
+  color: var(--co-color-gray-500, #888);
   transition: background 0.15s ease, color 0.15s ease, font-weight 0.15s ease;
   box-sizing: border-box;
 }
@@ -33,20 +33,23 @@
   height: 40px;
 }
 
-/* ─── States ────────────────────────────────────────────────── */
-.co-tab:hover:not(:disabled) {
-  background: var(--co-color-gris-100, #f6f6f6);
+/* ─── 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-gray-100, #f6f6f6);
   color: var(--co-color-base-negro, #1f1c1b);
 }
 
 .co-tab--selected {
-  background: var(--co-color-gris-100, #f6f6f6);
+  background: var(--co-color-gray-100, #f6f6f6);
   color: var(--co-color-base-negro, #1f1c1b);
   font-weight: 500;
 }
 
-.co-tab--selected:hover:not(:disabled) {
-  background: var(--co-color-gris-100, #f6f6f6);
+.co-tab--pill.co-tab--selected:hover:not(:disabled) {
+  background: var(--co-color-gray-100, #f6f6f6);
   color: var(--co-color-base-negro, #1f1c1b);
 }
 
@@ -59,3 +62,86 @@
   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);
+}
+
+/* ─── Segmented variant ─────────────────────────────────────── */
+/* Lives inside a .co-tab-group--segmented track. Transparent chip by
+   default; the selected tab becomes a white bordered pill with the lg
+   shadow. The transparent border on the base state reserves the 1px so
+   selecting a tab never shifts layout. */
+.co-tab--segmented {
+  height: auto;
+  padding: var(--co-spacing-sm2, 8px) var(--co-spacing-md, 12px);
+  border: 1px solid transparent;
+  border-radius: var(--co-border-radius-xs, 8px);
+  font-size: var(--co-font-size-14);
+  font-weight: 400;
+  letter-spacing: -0.03em;
+  color: var(--co-color-gray-600, #585858);
+  background: transparent;
+}
+
+.co-tab--segmented:hover:not(:disabled) {
+  background: transparent;
+  color: var(--co-color-base-negro, #1f1c1b);
+}
+
+.co-tab--segmented.co-tab--selected {
+  background: var(--co-color-base-blanco, #fff);
+  border-color: var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));
+  box-shadow: var(--co-shadow-lg);
+  font-weight: 500;
+  color: var(--co-color-base-negro, #1f1c1b);
+}
+
+.co-tab--segmented.co-tab--selected:hover:not(:disabled) {
+  background: var(--co-color-base-blanco, #fff);
+  color: var(--co-color-base-negro, #1f1c1b);
+}

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), underline tab, or segmented-control pill */
+        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: '77fc8443dbdc5fe327ea28de6e926c4438e96cca', 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: '6d209028484dc6726f48cf1c5919cdeb59dac33a', name: this.iconLeft, size: iconSize })), h("span", { key: 'ee7cbdaaa22dde0b6ed599a1c9d20909f639d3db' }, this.label), this.badge && (h("span", { key: 'a1099b9d141f70d70e736853da2261fe3a125964', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '56a8917e4bbb27411f1bed6ef7b0a11e8c8b75b7', 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' | 'segmented'",
+                    "resolved": "\"pill\" | \"segmented\" | \"underline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant: filled pill (default), underline tab, or segmented-control pill"
+                },
+                "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,22 @@
   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));
+}
+
+/* ─── Segmented variant ─────────────────────────────────────── */
+/* Gray track + white active pill (Figma segmented control). The
+   track hugs its content; each co-tab styles its own pill. */
+.co-tab-group--segmented {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  background: var(--co-color-gray-100, #f6f6f6);
+  border-radius: var(--co-border-radius-sm, 12px);
+}

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

@@ -1,5 +1,15 @@
 import { h } from "@stencil/core";
 export class CoTabGroup {
+    constructor() {
+        /** Visual variant, propagated to slotted co-tab children */
+        this.variant = 'pill';
+        /** Slotted tabs can mount AFTER the group (async v-for data): re-propagate
+            variant/selection whenever the slot content changes, or late tabs render
+            with the default pill variant. */
+        this.onSlotChange = () => {
+            this.syncTabs();
+        };
+    }
     onTabSelect(e) {
         e.stopPropagation();
         this.value = e.detail;
@@ -9,6 +19,9 @@ export class CoTabGroup {
     watchValue() {
         this.syncTabs();
     }
+    watchVariant() {
+        this.syncTabs();
+    }
     componentDidLoad() {
         this.syncTabs();
     }
@@ -16,10 +29,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: 'b0e4e872934528c7dbce3bf1c0329b1efb0db887', class: {
+                'co-tab-group': true,
+                [`co-tab-group--${this.variant}`]: true,
+            }, role: "tablist", part: "tab-group" }, h("slot", { key: '407d99ce75badc9bfeecaf8506155ef346681489', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "co-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -53,6 +70,26 @@ export class CoTabGroup {
                 "setter": false,
                 "reflect": true,
                 "attribute": "value"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'pill' | 'underline' | 'segmented'",
+                    "resolved": "\"pill\" | \"segmented\" | \"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 +116,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: '45bafe056e1e22295fca85e4117688b3689f6531', 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: '74f22995661cc3617ec781c002e9dd0d14be1d08', class: "co-tags-field__labels" }, h("label", { key: '90d1e9356d0e2e308b74be32fc508dcfd0d1049c', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '0cdef38368b8770ccf6f202f947a9b8797a0de2d', required: this.required })))), h("div", { key: '9be586d54135a42590ccd1114aa0024fb0a4cb89', class: "co-tags-field__field-row" }, h("div", { key: '61024e618e9140aa6e8ca14dc9b0d26dcf0192ed', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: 'bcac0080c15699779e844632f52969ed3b97e669', 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: 'a72e551df5531ccbc08db60c9f2c87dfd4d4b554', 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: 'c18186dba9f0f07db60885885734fb924c8deeb5', 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: '6831ec45b34a29da992291838bcd21bec82f9bc3', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'ec43dc82ad02fe07a7dde183355c824275d64c7e', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: '8d1a219b0536746e0d57a31b9124f203872e9360', 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: 'ceb06b309d8614eefaa81fd92a028e6fb69c8302', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '96134b037eb376bc20aab31b627b8cf579f76f8f', 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: 'cb418f5b90a1a22cdd5661d923fec6b5111d4f2f', 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: '400c4187c7c6614e4e843216b466a45fdbb49d2b', class: "co-textarea__labels" }, this.label && (h("label", { key: 'a1e0e0fac2cd0c8645a89aba1367881e6f907005', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: '07870f276a4d35f35072dab6c8ee726079c34be5', required: this.required }))), this.secondaryLabel && (h("span", { key: 'ddcfffd9e502787acc434e4dd78abac7193b19cd', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '4a315f9667d81b1aed6be91ed08095666bc69c37', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'b0c69a6c064a04c7f487b8d48897f0882d15a8ad', 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: 'b832c62e32fe0bf0e2343c71cec9755ecb68537c', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'e0d6673bb0d29ddabb83ebff4bce9dcb1dce5408', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '2f30b4a7923e78ee4c60fd40bbf891607978e961', class: "co-textarea__footer" }, this.helperText && (h("div", { key: '7de370940c99f30fad34e6b40911f190b38eb9b5', 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: '57e658fc2c65c787f11eaf10a56ac25358467710', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '53f33d1e87ac75b87019843b8ffbd56e15fd998a', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: '80f731565f9fb3d99539ee06bc6bd6285736dbde', 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: '4727f0b593050826892f25a3da53fd42edfad744', class: "co-toast__content" }, h("span", { key: '8c1a29b562d9a8b6aed4a60bef8be39647fc8b7a', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'ccb7b545065311525ba40d7e066dd1dc12be995f', class: "co-toast__description" }, this.description))));
+        return (h("div", { key: '49d0d786f54a7d9e9fb648dd4aa0dd0e1122ecdc', class: rootClass, part: "toast", role: role }, resolvedIcon && (h("span", { key: 'f67cff3e6b14cbe9be11090c17cb33fb7dd944e9', class: "co-toast__icon" }, h("co-icon", { key: '6c45e2ad5d844228f4352f0593bb111b23b715b9', name: resolvedIcon, size: 20 }))), h("div", { key: '61942396846ec88cc1fb8ee04b4da6b5e9541b11', 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: '48cbdafb944ddac91c62154f59b08c7401e7ca9f', class: "co-toast__actions" }, h("slot", { key: '15d119f0724e3bf791ed65bba140bff394395396', name: "action" })))), !isStacked && (h("div", { key: '87cc2aa477b3ede5ec648047b920d6747360a712', class: "co-toast__actions" }, h("slot", { key: 'bdecde963be2ce12ef437b3524bab17ffd51a200', name: "action" }))), this.dismissible && (h("button", { key: '1da56cebd4714f72b3396ff7c00405341654c421', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: 'a0061ab640565171efc109a790a599adf4f90b86', 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;
+}

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: 'b8dd3d02b6494ae0984147116facf334bf6217b7', 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: '0016c8ec4c9f9e408c818e725b1d10159d53168c', 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: '76400887fc6373c1cce6aed8872f30562bd21e86', name: this.iconLeft, size: iconSize }), this.label && h("span", { key: 'c4658c1f800f20211b2eed6e5b44139362a7bf8d', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '153f4a2a3c24a1e95ecdfe5f77d257421b21aec3', name: this.iconRight, size: iconSize })));
+            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, this.iconLeft && h("co-icon", { key: 'b301e2330b92fbd0347b89d0d453b1fbfa4091aa', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: '8917418e796a53d8e269e1ebb69f293975a140c7', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '4fc74790fba1e7ec56f489fbda65d21b0048de26', name: this.iconRight, size: iconSize, weight: iconWeight })));
     }
     static get is() { return "co-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -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"
             }
         };
     }

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

@@ -77,3 +77,19 @@
   opacity: 0.4;
   pointer-events: none;
 }
+
+/* Track variant — a sunken gray track carrying detached rounded pills.
+   Placed after the base/connected rules so it overrides gap; the pills' own
+   chrome (radius, fill, shadow) lives in co-toggle-button[variant='track'].
+   We only neutralise the connected seam collapse (negative margins). */
+.co-toggle-button-group--track {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: var(--co-color-gray-100, #f6f6f6);
+}
+
+.co-toggle-button-group--track ::slotted(co-toggle-button) {
+  margin: 0 !important;
+}