@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

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

@@ -0,0 +1,97 @@
+import { h } from "@stencil/core";
+/**
+ * Placeholder de carga con shimmer (sweep). Componer apilando varios.
+ * Respeta prefers-reduced-motion (sin animación).
+ */
+export class CoSkeleton {
+    constructor() {
+        /** rect (default) | text (radio menor) | circle */
+        this.variant = 'rect';
+        /** Ancho CSS (default 100%) */
+        this.width = '100%';
+        /** Alto CSS (default por variante en CSS) */
+        this.height = '';
+    }
+    render() {
+        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" }));
+    }
+    static get is() { return "co-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-skeleton.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rect' | 'text' | 'circle'",
+                    "resolved": "\"circle\" | \"rect\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "rect (default) | text (radio menor) | circle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'rect'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ancho CSS (default 100%)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'100%'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alto CSS (default por variante en CSS)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "''"
+            }
+        };
+    }
+}

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: '9666bc3215652fef40b6750b1bcf653da999ce75', class: {
+        return (h("div", { key: '719f3ecd1e92b234f2938b570747c4d1f174903b', 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: 'a37b3269d2ef9b95225196a85b112750b4a3fcae', class: "co-slider__labels" }, h("div", { key: '18ca7e2f93ff343c278f0bede877078d90b24810', class: "co-slider__labels-left" }, this.label && h("label", { key: 'fe49fe8bac3897b39b4a887b9932f64711576621', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'aa0850998081f52521bacf8cdd478f0ea2eb7170', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: '9de291e2bac119a3d52d2e502eb7fe604e1f0cc9', class: "co-slider__value" }, this.value))), h("div", { key: 'b962b60c11b9089338b00af3e907bad60a088392', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: '0140d753b83767e2c2ca8b5d7113712aef268401', class: "co-slider__track" }, h("div", { key: '81f89f49edaf65b78a814c03e77273b86a0b88d0', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'c163d0dd0655d6052158f64919f6bb3487cc2fef', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '5398bacad904e3151be739ac96edea006e9ebc2b', class: "co-slider__marks" }, h("span", { key: '60940a59763a62b9138566f219447524f5b58f6d', class: "co-slider__mark" }, this.min), h("span", { key: 'eef1fbf170d58a7a0bc47da021e75483089ac873', class: "co-slider__mark" }, this.max))), h("input", { key: 'bba029e3b31ef5f7870152872298478cca82d377', 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: '21b325224fa58623e5a7b2148828dc125750c8d9', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '88e62cca21285bd21b4dd68c77e0c48bbdffecf8', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '7f10644c1b17a09d947d79471a7d848455fd97f3', class: "co-slider__helper-text" }, this.helperText)))));
+            } }, (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)))));
     }
     static get is() { return "co-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -118,7 +118,11 @@
 
 /* ─── TRACK COLORS ──────────────────────────────────────────── */
 .co-switch--on  { background: var(--co-semantic-surface-primary); }
-.co-switch--off { background: var(--co-semantic-surface-muted); }
+.co-switch--off {
+  background: color-mix(in srgb, var(--co-semantic-surface-muted) 35%, transparent);
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+}
 
 /* ─── THUMB ─────────────────────────────────────────────────── */
 .co-switch__thumb {
@@ -158,3 +162,7 @@
 .co-field-required__caption::before {
   content: var(--co-field-required-text, ' (required)');
 }
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-switch--off { background: var(--co-semantic-surface-muted); }
+}

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: '448bc546da840313740bc9c8d28bcbf50dd23842', class: {
+        return (h("div", { key: '2a60b60256d74e480b243ddb3901e5e8e86c90dd', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: '417c63e43360ffaa5e6fb3843a6516e6acc10712', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '19e326242f45489aa2545390643dd799658102f8', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, 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: {
                 '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: '17b3895afa9f12e5a6fd5d09936d8da2113e710f', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: 'd8c87eea56b43540a6ea6f033ac80f93cc151aa8', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '69f488c6a6ef62f1247f98b8c991b9cbea1bc06e', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'a3f0303b970a1d42a75dbd18bfe39d2fb4908376', required: this.required })), this.secondaryLabel && (h("span", { key: 'aa515120e86788c4301fe761d90f40005f419a26', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '89206dd59da64095fb242fdd2e24661f0573287b', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'b5c19c1e22867499990a6ba2f76bbb80d6808329', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '9e920d930bbd9adb287a206944930b07aeb2e512', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, 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)))));
     }
     static get is() { return "co-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,12 +19,12 @@ export class CoTab {
     }
     render() {
         const iconSize = this.size === 'large' ? 18 : 14;
-        return (h("button", { key: 'f9b9a7793f77d4132002185b8af9e1629952cf1a', class: {
+        return (h("button", { key: 'f639c074e062b1d8f2cb0062cb617a53451ec78f', class: {
                 'co-tab': true,
                 [`co-tab--${this.size}`]: 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: 'edd62b88e5ec18158e9e32fcba0397ef3f1ddb61', name: this.iconLeft, size: iconSize })), h("span", { key: '0ce6db369891e9df4137c4c9f4104392b015d661', class: "co-tab__label" }, this.label), this.iconRight && (h("co-icon", { key: '0e60714ab903460d67ba384bd57f619f3047861c', 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: '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 }))));
     }
     static get is() { return "co-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class CoTabGroup {
         });
     }
     render() {
-        return (h("div", { key: '92285c15311b1e2c6a4f9259354fff37f372c5b1', class: "co-tab-group", role: "tablist", part: "tab-group" }, h("slot", { key: 'f7100d6cb992deae37e832f2bde89046418fbbff' })));
+        return (h("div", { key: '458524e7f1469d90c43bf9a8f34ee68d511e9d36', class: "co-tab-group", role: "tablist", part: "tab-group" }, h("slot", { key: 'f11af2be459cb51e9cd426d0e20839fd6d1477f8' })));
     }
     static get is() { return "co-tab-group"; }
     static get encapsulation() { return "shadow"; }

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: '1cef49a116560d7dbb9bf8d188fdc96361a57eb2', 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: '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() })) : (
+        // 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: '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: {
                 '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: '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: {
                 '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: '17642154cb83071f07819f98dccd866066d0eae1', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '1cf60e4b7f9eed91aacdb0ab4044b20a2971d57d', 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: 'bbc105515a08e5ddf757c3095aa220d9ff3c1643', 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: '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: {
                 '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: '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: {
                 '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: '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: {
                 '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.js

@@ -41,7 +41,7 @@ export class CoToast {
             'co-toast--multiline': hasDescription,
             'co-toast--stacked': isStacked,
         };
-        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 })))));
+        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 })))));
     }
     static get is() { return "co-toast"; }
     static get encapsulation() { return "shadow"; }

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,7 @@
 .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); }
+}

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

@@ -14,13 +14,13 @@ export class CoToggleButton {
     }
     render() {
         const iconSize = this.size === 'l' ? 20 : this.size === 'xs' ? 14 : 16;
-        return (h("button", { key: '3e1a2d28437f608009c3a8dd7f8221773c42cf7d', class: {
+        return (h("button", { key: 'b8dd3d02b6494ae0984147116facf334bf6217b7', 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: '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 })));
     }
     static get is() { return "co-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -149,7 +149,7 @@ export class CoToggleButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "size",
                 "defaultValue": "'m'"
             },

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

@@ -33,31 +33,35 @@
   --co-toggle-button-width: 100%;
 }
 
-/* Remove inner radii for connected appearance */
+/* Connected appearance: flatten the seam corners and keep only the group's
+   outer corners squircle-rounded. border-radius on the slotted host is
+   invisible (the inner <button> carries the radius), so we drive it through
+   the shadow boundary with the inherited --co-tbr-* custom props — the same
+   mechanism --co-toggle-button-width already relies on. The kept corners fall
+   back to each button's size-aware --co-toggle-button-radius. */
 .co-toggle-button-group--row ::slotted(co-toggle-button) {
-  --co-btn-border-radius: 0;
-  border-radius: 0;
+  --co-tbr-tl: 0; --co-tbr-tr: 0; --co-tbr-br: 0; --co-tbr-bl: 0;
 }
-
 .co-toggle-button-group--row ::slotted(co-toggle-button:first-child) {
-  border-radius: var(--co-border-radius-xs) 0 0 var(--co-border-radius-xs);
+  --co-tbr-tl: var(--co-toggle-button-radius);
+  --co-tbr-bl: var(--co-toggle-button-radius);
 }
-
 .co-toggle-button-group--row ::slotted(co-toggle-button:last-child) {
-  border-radius: 0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;
+  --co-tbr-tr: var(--co-toggle-button-radius);
+  --co-tbr-br: var(--co-toggle-button-radius);
 }
 
 .co-toggle-button-group--column ::slotted(co-toggle-button) {
-  border-radius: 0;
+  --co-tbr-tl: 0; --co-tbr-tr: 0; --co-tbr-br: 0; --co-tbr-bl: 0;
   width: 100%;
 }
-
 .co-toggle-button-group--column ::slotted(co-toggle-button:first-child) {
-  border-radius: var(--co-border-radius-xs) var(--co-border-radius-xs) 0 0;
+  --co-tbr-tl: var(--co-toggle-button-radius);
+  --co-tbr-tr: var(--co-toggle-button-radius);
 }
-
 .co-toggle-button-group--column ::slotted(co-toggle-button:last-child) {
-  border-radius: 0 0 var(--co-border-radius-xs) var(--co-border-radius-xs);
+  --co-tbr-bl: var(--co-toggle-button-radius);
+  --co-tbr-br: var(--co-toggle-button-radius);
 }
 
 /* Collapse borders */