@prolibu-suite/cobalt-core 0.11.6 → 0.11.8

package/dist/esm/co-tab-group.entry.js

@@ -27,7 +27,39 @@ function tabEdgesInTrack(trackRect, tabRect, box) {
     };
 }
 
-const coTabGroupCss = () => `:host{display:flex;max-width:100%;min-width:0}.co-tab-group{display:flex;align-items:center;gap:var(--co-spacing-sm2);max-width:100%;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}.co-tab-group::-webkit-scrollbar{display:none}::slotted(co-tab){flex-shrink:0}:host([full-width]){width:100%}:host([full-width]) .co-tab-group{width:100%}:host([full-width]) ::slotted(co-tab){flex:1}.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))}.co-tab-group--segmented{display:inline-flex;gap:var(--co-spacing-xxs, 2px);padding:var(--co-spacing-sm, 6px);background:var(--co-color-gray-100, #f6f6f6);border-bottom:1px solid var(--co-color-opacity-negro-4, rgba(31, 28, 27, 0.04));border-radius:var(--co-border-radius-sm, 12px)}.co-tab-group--segmented.co-tab-group--size-s{padding:4px;border-radius:var(--co-border-radius-xs, 8px);border-bottom:none}`;
+/**
+ * Desplazamiento del track de pestañas cuando desborda: rueda del mouse y
+ * arrastre con el puntero. Puro (sin DOM) para testearlo; el componente aplica
+ * el resultado con `scrollTo({ behavior: 'instant' })`.
+ */
+/** px que el puntero tiene que moverse antes de que un press cuente como arrastre
+    (por debajo sigue siendo un click en la pestaña). */
+const DRAG_THRESHOLD = 5;
+const clamp = (value, max) => Math.max(0, Math.min(max, value));
+/**
+ * `scrollLeft` destino para un evento de rueda, o `null` si el componente NO
+ * debe intervenir:
+ * - gesto horizontal (trackpad, shift+rueda): el scroll nativo ya lo resuelve;
+ * - en el extremo hacia el que empuja: el scroll sigue a la página.
+ */
+function wheelScrollLeft(scrollLeft, max, deltaX, deltaY) {
+    if (max <= 0)
+        return null;
+    if (Math.abs(deltaX) >= Math.abs(deltaY))
+        return null;
+    const next = clamp(scrollLeft + deltaY, max);
+    return next === scrollLeft ? null : next;
+}
+/** `scrollLeft` mientras se arrastra: el contenido sigue al puntero. */
+function dragScrollLeft(startScrollLeft, startX, x, max) {
+    return clamp(startScrollLeft - (x - startX), max);
+}
+/** ¿El puntero ya se movió lo suficiente para que el press sea un arrastre? */
+function passedDragThreshold(startX, x) {
+    return Math.abs(x - startX) >= DRAG_THRESHOLD;
+}
+
+const coTabGroupCss = () => `:host{display:flex;max-width:100%;min-width:0}.co-tab-group{display:flex;align-items:center;gap:var(--co-spacing-sm2);max-width:100%;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}.co-tab-group--grabbing{cursor:grabbing;--co-tab-cursor:grabbing;user-select:none}.co-tab-group::-webkit-scrollbar{display:none}.co-tab-group--dragging{scroll-behavior:auto;cursor:grabbing;user-select:none}.co-tab-group--dragging ::slotted(co-tab){pointer-events:none}::slotted(co-tab){flex-shrink:0}:host([full-width]){width:100%}:host([full-width]) .co-tab-group{width:100%}:host([full-width]) ::slotted(co-tab){flex:1}.co-tab-group--underline{gap:var(--co-spacing-xs, 4px);border-bottom:1px solid var(--co-semantic-border-subtle)}.co-tab-group--segmented{display:inline-flex;gap:var(--co-spacing-xxs, 2px);padding:var(--co-spacing-sm, 6px);background:var(--co-semantic-surface-control);border-bottom:1px solid var(--co-semantic-border-hairline);border-radius:var(--co-border-radius-sm, 12px)}.co-tab-group--segmented.co-tab-group--size-s{padding:4px;border-radius:var(--co-border-radius-xs, 8px);border-bottom:none}`;
 
 const CoTabGroup = class {
     constructor(hostRef) {
@@ -55,19 +87,75 @@ const CoTabGroup = class {
             this.revealSelected();
         };
         /** Wheel → horizontal scroll cuando el track desborda (los tabs clipean con
-            `overflow-x`, ver CSS): la rueda vertical del mouse scrollea el strip.
-            Solo consume el evento si realmente puede desplazarse en esa dirección —
-            en los extremos deja pasar el scroll a la página. */
+            `overflow-x`, ver CSS): la rueda VERTICAL del mouse scrollea el strip. El
+            gesto horizontal (trackpad) lo resuelve el scroll nativo, y en los extremos
+            el evento sigue a la página. */
         this.onWheel = (e) => {
             const track = e.currentTarget;
-            const max = track.scrollWidth - track.clientWidth;
-            if (max <= 0)
+            const next = wheelScrollLeft(track.scrollLeft, track.scrollWidth - track.clientWidth, e.deltaX, e.deltaY);
+            if (next === null)
+                return;
+            this.scrollTrack(track, next);
+            e.preventDefault();
+        };
+        this.swallowClick = false;
+        this.onPointerDown = (e) => {
+            const track = e.currentTarget;
+            // Un arrastre anterior cuyo click nunca llegó no puede comerse este.
+            this.swallowClick = false;
+            if (e.pointerType !== 'mouse' || e.button !== 0)
                 return;
-            const delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX;
-            const next = Math.max(0, Math.min(max, track.scrollLeft + delta));
-            if (next === track.scrollLeft)
+            if (track.scrollWidth <= track.clientWidth)
                 return;
-            track.scrollLeft = next;
+            this.drag = { pointerId: e.pointerId, startX: e.clientX, startLeft: track.scrollLeft, moved: false };
+            // La manito de arrastre sale al PRESIONAR (no recién al moverse): se ve que el strip se agarra.
+            track.classList.add('co-tab-group--grabbing');
+        };
+        this.onPointerMove = (e) => {
+            var _a;
+            const drag = this.drag;
+            if (!drag || e.pointerId !== drag.pointerId)
+                return;
+            const track = e.currentTarget;
+            if (!drag.moved) {
+                if (!passedDragThreshold(drag.startX, e.clientX))
+                    return;
+                drag.moved = true;
+                // Captura para no perder el arrastre si el puntero sale del strip; si el navegador la
+                // rechaza (puntero ya liberado), el arrastre sigue igual.
+                try {
+                    (_a = track.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(track, e.pointerId);
+                }
+                catch ( /* sin captura */_b) { /* sin captura */ }
+                track.classList.add('co-tab-group--dragging');
+            }
+            this.scrollTrack(track, dragScrollLeft(drag.startLeft, drag.startX, e.clientX, track.scrollWidth - track.clientWidth));
+        };
+        this.onPointerEnd = (e) => {
+            var _a;
+            const drag = this.drag;
+            if (!drag || e.pointerId !== drag.pointerId)
+                return;
+            const track = e.currentTarget;
+            track.classList.remove('co-tab-group--grabbing');
+            if (drag.moved) {
+                this.swallowClick = true;
+                track.classList.remove('co-tab-group--dragging');
+                try {
+                    if ((_a = track.hasPointerCapture) === null || _a === void 0 ? void 0 : _a.call(track, e.pointerId))
+                        track.releasePointerCapture(e.pointerId);
+                }
+                catch ( /* no estaba capturado */_b) { /* no estaba capturado */ }
+            }
+            this.drag = undefined;
+        };
+        /** Captura: corre ANTES que el click de la pestaña (que vive más abajo en el
+            árbol). Solo se traga el click que cierra un arrastre. */
+        this.onClickCapture = (e) => {
+            if (!this.swallowClick)
+                return;
+            this.swallowClick = false;
+            e.stopPropagation();
             e.preventDefault();
         };
     }
@@ -155,12 +243,22 @@ const CoTabGroup = class {
             this.raisedFullWidth.delete(tab);
         }
     }
+    /** Mueve el track SIN animar. El CSS tiene `scroll-behavior: smooth` (para el
+        reajuste al enfocar un tab) y asignar `scrollLeft` TAMBIÉN lo respeta: cada
+        evento de rueda/arrastre reiniciaba la animación desde una posición que
+        todavía no había avanzado y el strip apenas se movía (se sentía roto). */
+    scrollTrack(track, left) {
+        if (typeof track.scrollTo === 'function')
+            track.scrollTo({ left, behavior: 'instant' });
+        else
+            track.scrollLeft = left;
+    }
     render() {
-        return (h("div", { key: 'e226f6ba6da4566f95011d121a176697218ffaba', class: {
+        return (h("div", { key: '6bec54850c1e0180a8513770b99b3b4dba865962', class: {
                 'co-tab-group': true,
                 [`co-tab-group--${this.variant}`]: true,
                 [`co-tab-group--size-${this.size}`]: !!this.size,
-            }, role: "tablist", part: "tab-group", onWheel: this.onWheel }, h("slot", { key: '93689e301da64a7ca850571cb623c339294c2122', onSlotchange: this.onSlotChange })));
+            }, role: "tablist", part: "tab-group", onWheel: this.onWheel, onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerEnd, onPointerCancel: this.onPointerEnd, onClickCapture: this.onClickCapture }, h("slot", { key: '08d10802582e1255cc8a7cef14bf0fe84dd6f3b6', onSlotchange: this.onSlotChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-tab.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-DJkaRtbb.js';
 
-const coTabCss = () => `:host{display:inline-flex}.co-tab{display:inline-flex;align-items:center;gap:var(--co-spacing-sm2);border:none;outline:none;cursor:pointer;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;white-space:nowrap;border-radius:var(--co-border-radius-full);background:transparent;color:var(--co-color-gray-500, #888);transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box}:host([full-width]) .co-tab{width:100%;justify-content:center}.co-tab--small{padding:0 var(--co-spacing-sm2);font-size:var(--co-font-size-14);height:32px}.co-tab--large{padding:0 var(--co-spacing-lg);font-size:var(--co-font-size-16);height:40px}.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-gray-100, #f6f6f6);color:var(--co-color-base-negro, #1f1c1b);font-weight:500}.co-tab--pill.co-tab--selected:hover:not(:disabled){background:var(--co-color-gray-100, #f6f6f6);color:var(--co-color-base-negro, #1f1c1b)}.co-tab--disabled{opacity:0.4;cursor:not-allowed}.co-tab:focus-visible{outline:2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul, #2563eb));outline-offset:2px}.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 var(--co-motion-duration-fast) var(--co-motion-ease-out)}.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}.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)}.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)}.co-tab--segmented.co-tab--s{height:28px;padding:0 var(--co-spacing-md, 12px);line-height:1;border-radius:var(--co-spacing-sm, 6px);font-size:var(--co-font-size-12, 12px);font-weight:500;color:var(--co-color-gray-600, #585858);background:transparent}.co-tab--segmented.co-tab--s.co-tab--selected{background:var(--co-color-base-blanco, #fff);border-color:var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));box-shadow:var(--co-shadow-lg);color:var(--co-color-base-negro, #1f1c1b);font-weight:500}.co-tab--segmented.co-tab--xs{height:26px;padding:0 var(--co-spacing-md, 12px);line-height:1;border-radius:var(--co-spacing-sm, 6px);font-size:var(--co-font-size-10, 10px);font-weight:500;color:var(--co-color-gray-600, #585858);background:transparent}.co-tab--segmented.co-tab--xs.co-tab--selected{background:var(--co-color-base-blanco, #fff);border-color:var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));box-shadow:var(--co-shadow-lg);color:var(--co-color-base-negro, #1f1c1b);font-weight:500}`;
+const coTabCss = () => `:host{display:inline-flex}.co-tab{display:inline-flex;align-items:center;gap:var(--co-spacing-sm2);border:none;outline:none;cursor:var(--co-tab-cursor, pointer);font-family:var(--co-font-family-primary);font-weight:400;line-height:1;white-space:nowrap;border-radius:var(--co-border-radius-full);background:transparent;color:var(--co-semantic-text-muted);transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box}:host([full-width]) .co-tab{width:100%;justify-content:center}.co-tab--small{padding:0 var(--co-spacing-sm2);font-size:var(--co-font-size-14);height:32px}.co-tab--large{padding:0 var(--co-spacing-lg);font-size:var(--co-font-size-16);height:40px}.co-tab--pill:hover:not(:disabled){background:var(--co-semantic-surface-control);color:var(--co-semantic-text-default)}.co-tab--selected{background:var(--co-semantic-surface-control);color:var(--co-semantic-text-default);font-weight:500}.co-tab--pill.co-tab--selected:hover:not(:disabled){background:var(--co-semantic-surface-control);color:var(--co-semantic-text-default)}.co-tab--disabled{opacity:0.4;cursor:not-allowed}.co-tab:focus-visible{outline:2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul, #2563eb));outline-offset:2px}.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-semantic-text-muted);font-size:var(--co-font-size-14, 14px);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body, -0.03em);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-tab--underline.co-tab--selected{background:transparent;border-bottom-color:var(--co-semantic-text-default);color:var(--co-semantic-text-default);font-weight:500}.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-semantic-surface-muted);color:var(--co-semantic-text-secondary)}.co-tab--selected .co-tab__badge{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary)}.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-semantic-text-secondary);background:transparent}.co-tab--segmented:hover:not(:disabled){background:transparent;color:var(--co-semantic-text-default)}.co-tab--segmented.co-tab--selected{background:var(--co-semantic-surface-page);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-semantic-text-default)}.co-tab--segmented.co-tab--selected:hover:not(:disabled){background:var(--co-semantic-surface-page);color:var(--co-semantic-text-default)}.co-tab--segmented.co-tab--s{height:28px;padding:0 var(--co-spacing-md, 12px);line-height:1;border-radius:var(--co-spacing-sm, 6px);font-size:var(--co-font-size-12, 12px);font-weight:500;color:var(--co-semantic-text-secondary);background:transparent}.co-tab--segmented.co-tab--s.co-tab--selected{background:var(--co-semantic-surface-page);border-color:var(--co-semantic-border-subtle);box-shadow:var(--co-shadow-lg);color:var(--co-semantic-text-default);font-weight:500}.co-tab--segmented.co-tab--xs{height:26px;padding:0 var(--co-spacing-md, 12px);line-height:1;border-radius:var(--co-spacing-sm, 6px);font-size:var(--co-font-size-10, 10px);font-weight:500;color:var(--co-semantic-text-secondary);background:transparent}.co-tab--segmented.co-tab--xs.co-tab--selected{background:var(--co-semantic-surface-page);border-color:var(--co-semantic-border-subtle);box-shadow:var(--co-shadow-lg);color:var(--co-semantic-text-default);font-weight:500}`;
 
 const CoTab = class {
     constructor(hostRef) {
@@ -36,13 +36,13 @@ const CoTab = class {
     }
     render() {
         const iconSize = this.variant === 'underline' ? 16 : this.size === 'large' ? 18 : 14;
-        return (h("button", { key: '7b388ddd5338499064d43f30c0fa854d0be6773c', class: {
+        return (h("button", { key: 'f969b1dbfaa65dd1a82f0850074c028cba683b4e', 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: 'ae4c8bd29005e3d51a882eb1104b5e63a6ef69e5', name: this.iconLeft, size: iconSize })), h("span", { key: '6617a4e1af257a3b9d847a77915f202560940733' }, this.label), this.badge && (h("span", { key: 'a2b327941ab6e7578113b5ef05a2e3725132fcb0', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '8a41a7df2c8f37c281c97bf4ab3c81f8ea476a45', 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: '22119752dd8e2606ece1ed07abc8c8174b7aa2c2', name: this.iconLeft, size: iconSize })), h("span", { key: '35646e95c0b2e1b05ad3f6ad51fd8399e3c31f1b' }, this.label), this.badge && (h("span", { key: 'd44bcd2989aca1694d3755d60f9eba9f4c6e1422', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: 'c4065c2011bd20a614e0b93cd92b26e3ada849cb', name: this.iconRight, size: iconSize }))));
     }
 };
 CoTab.style = coTabCss();

package/dist/esm/co-tags-field.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
 import { R as RequiredMark } from './requiredMark-D5C5NzOE.js';
-import { F as FieldChip } from './fieldChip-B2ctp2m6.js';
+import { F as FieldChip } from './fieldChip-B0N8z5W-.js';
 
-const coTagsFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-tags-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-tags-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-tags-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-tags-field__field-row{display:flex;align-items:stretch}.co-tags-field__field{display:flex;align-items:flex-start;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);min-height:40px;box-sizing:border-box;flex:1;min-width:0;cursor:text}.co-tags-field__input-wrapper{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--co-spacing-sm);min-width:0;min-height:22px;padding:0}.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)}.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)}.co-tags-field__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm) var(--co-spacing-sm2);background:var(--co-semantic-surface-hover);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-14);line-height:1;max-width:240px;cursor:pointer;user-select:none}.co-tags-field__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-tags-field__chip-remove{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out);flex-shrink:0}.co-tags-field__chip-remove:hover{color:var(--co-semantic-text-default)}.co-tags-field__native{flex:1;min-width:80px;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-tags-field__native::placeholder{color:var(--co-semantic-text-muted)}.co-tags-field__edit{border:1px solid var(--co-semantic-border-focus);border-radius:var(--co-border-radius-xxs);outline:none;background:var(--co-semantic-surface-page);font-family:inherit;font-size:var(--co-font-size-12);line-height:1;color:var(--co-semantic-text-default);padding:var(--co-spacing-xxs) var(--co-spacing-xs);margin:0;min-width:60px}.co-tags-field__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:var(--co-spacing-xxs) 0 0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-tags-field__clear--hidden{visibility:hidden;pointer-events:none}.co-tags-field__clear:hover{color:var(--co-semantic-text-default)}.co-tags-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-tags-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-tags-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-tags-field--focused .co-tags-field__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-tags-field--disabled{opacity:0.6;pointer-events:none}.co-tags-field--disabled .co-tags-field__labels .co-tags-field__label{color:var(--co-semantic-text-disabled)}.co-tags-field--disabled .co-tags-field__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-tags-field--invalid .co-tags-field__field{border-color:var(--co-semantic-status-error)}.co-tags-field--invalid.co-tags-field--focused .co-tags-field__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-tags-field__helper--error .co-tags-field__helper-icon,.co-tags-field__helper--error .co-tags-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-tags-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-tags-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-tags-field__label{white-space:normal}:host([layout='horizontal']) .co-tags-field>:not(.co-tags-field__labels){grid-column:2;min-width:0}`;
+const coTagsFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-tags-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-tags-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-tags-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-field-required{margin-left:2px;color:var(--co-semantic-text-error, var(--co-color-status-error))}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-tags-field__field-row{display:flex;align-items:stretch}.co-tags-field__field{display:flex;align-items:flex-start;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);min-height:40px;box-sizing:border-box;flex:1;min-width:0;cursor:text}.co-tags-field__input-wrapper{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--co-spacing-sm);min-width:0;min-height:22px;padding:0}.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)}.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)}.co-tags-field__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm) var(--co-spacing-sm2);background:var(--co-semantic-surface-hover);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-14);line-height:1;max-width:240px;cursor:pointer;user-select:none}.co-tags-field__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-tags-field__chip-remove{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out);flex-shrink:0}.co-tags-field__chip-remove:hover{color:var(--co-semantic-text-default)}.co-tags-field__native{flex:1;min-width:80px;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-tags-field__native::placeholder{color:var(--co-semantic-text-muted)}.co-tags-field__edit{border:1px solid var(--co-semantic-border-focus);border-radius:var(--co-border-radius-xxs);outline:none;background:var(--co-semantic-surface-page);font-family:inherit;font-size:var(--co-font-size-12);line-height:1;color:var(--co-semantic-text-default);padding:var(--co-spacing-xxs) var(--co-spacing-xs);margin:0;min-width:60px}.co-tags-field__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:var(--co-spacing-xxs) 0 0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-tags-field__clear--hidden{visibility:hidden;pointer-events:none}.co-tags-field__clear:hover{color:var(--co-semantic-text-default)}.co-tags-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-tags-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-tags-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-tags-field--focused .co-tags-field__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-tags-field--disabled{opacity:0.6;pointer-events:none}.co-tags-field--disabled .co-tags-field__labels .co-tags-field__label{color:var(--co-semantic-text-disabled)}.co-tags-field--disabled .co-tags-field__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-tags-field--invalid .co-tags-field__field{border-color:var(--co-semantic-border-error, var(--co-semantic-status-error))}.co-tags-field--invalid.co-tags-field--focused .co-tags-field__field{border-color:var(--co-semantic-border-error, var(--co-semantic-status-error));box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-error, var(--co-semantic-status-error)) 12%, transparent)}.co-tags-field__helper--error .co-tags-field__helper-icon,.co-tags-field__helper--error .co-tags-field__helper-text{color:var(--co-semantic-text-error, var(--co-semantic-status-error))}:host([layout='horizontal']) .co-tags-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-tags-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-tags-field__label{white-space:normal}:host([layout='horizontal']) .co-tags-field>:not(.co-tags-field__labels){grid-column:2;min-width:0}`;
 
 const CoTagsField = class {
     constructor(hostRef) {
@@ -179,14 +179,14 @@ const CoTagsField = class {
         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: '81725f6d5bd9c22fa799825abf44d1e71a34b33a', class: {
+        return (h("div", { key: 'fd91a99e457cbf54c88d423be8af54c566f3066c', 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: 'c5c913633aa37306acccbd0ca15abb3e265a60cd', class: "co-tags-field__labels" }, h("label", { key: '5898720b85700f9d6f3567c1399806bfa3e28d2d', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'c95129fbedfa41a2d735bc4f912f4a98b83c796f', required: this.required })))), h("div", { key: '940a2cd420b5b2e1cb981c21ff2df0957b7c39d6', class: "co-tags-field__field-row" }, h("div", { key: 'a100b3644ac42d71034d99be426d594b37275e71', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '3eac2458a1cf8e4bdbad67c57f323cfa4d7a5c85', 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: '49bfcb174303ee8660e5acc4f98217aaf66f40ac', class: "co-tags-field__labels" }, h("label", { key: '79762edec0be8829ccaca058eba30a3bde927254', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'c70bec9252eb1921c481ecd61d8b6fe63a3d6c10', required: this.required })))), h("div", { key: '32a0647964bd4acc982a2a790647c93a40801c36', class: "co-tags-field__field-row" }, h("div", { key: '4e8368806c1f672c72eb02331f113669db4cf8d1', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '4ad6a373fd8c05ee5aac5bff758ce2fbe4312dc8', 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
@@ -194,13 +194,13 @@ const CoTagsField = class {
                     e.stopPropagation();
                     this.removeTag(index);
                 }
-                : undefined }))), showInput && (h("input", { key: '4bda12b201fd72a40a3b6edd900373890d2d84be', 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: '1dedc650b5688bdd820e5253bad57c5a6c5a1725', class: {
+                : undefined }))), showInput && (h("input", { key: 'f225a29c660941323b3e83344cf4b5524bbd72a2', 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: '37317b91ff4f58ca30ae13d7d639fcc79efaeb3b', 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: '21dcfc3fe3e72ba8d1557fcd9a9c3d4c774e942e', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '7f829d899b73f76f8a66ce5766e0906756ebb5fa', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'c5a053f84171586ca0902815996430359647aadf', 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: 'f29e8727db13e9ce6b6fc72e38786aeb619a51b1', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '592bcd5ecd3f552ac6c8adb87fbd9dab04ec0e40', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: '7402a33a90484fdce495df229b7325d6e6527991', class: {
                 'co-tags-field__helper': true,
                 'co-tags-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'fcdb85825b3b54b126ed055832bd1e509901ca87', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '8f6845e58e30c2f5a62f715b7e9b4b12566c4402', class: "co-tags-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '8b9116529e02f275ef957e23ad98adb8d726b375', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '5f952c6feb9b82b46552bb8e8faeb5aaeb4abc29', class: "co-tags-field__helper-text" }, helper)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-textarea.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
 import { R as RequiredMark } from './requiredMark-D5C5NzOE.js';
 
-const coTextareaCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-textarea{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-textarea__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-textarea__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-textarea__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-textarea__field{position:relative;display:flex;background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box;overflow:hidden}.co-textarea--flat .co-textarea__field{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:transparent}.co-textarea__native{width:100%;border:none;outline:none;background:transparent;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:400;line-height:1.5;color:var(--co-semantic-text-default);padding:var(--co-spacing-sm2) var(--co-spacing-md);margin:0;box-sizing:border-box}.co-textarea__native::placeholder{color:var(--co-semantic-text-muted)}.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)}.co-textarea--lg .co-textarea__native{padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-textarea__native--resize-vertical{resize:vertical}.co-textarea__native--resize-none{resize:none}.co-textarea__native--resize-both{resize:both}.co-textarea__clear{position:absolute;top:var(--co-spacing-sm2);right:var(--co-spacing-sm2);display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;border-radius:var(--co-border-radius-xxs);background:transparent;color:var(--co-semantic-text-muted);cursor:pointer;padding:0;transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-textarea__clear:hover{color:var(--co-semantic-text-default);background:var(--co-semantic-surface-hover)}.co-textarea__footer{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-md)}.co-textarea__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);flex:1;min-width:0}.co-textarea__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-textarea__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-textarea__counter{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12, 12px);font-weight:400;line-height:1;white-space:nowrap;flex-shrink:0}.co-textarea__counter--over{color:var(--co-color-status-error);font-weight:500}.co-textarea--focused .co-textarea__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-textarea--disabled{opacity:0.6;pointer-events:none}.co-textarea--disabled .co-textarea__field{background:var(--co-semantic-surface-disabled);border-color:transparent}.co-textarea--error .co-textarea__field{border-color:var(--co-semantic-status-error)}.co-textarea--error.co-textarea--focused .co-textarea__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-textarea--error .co-textarea__helper-icon,.co-textarea--error .co-textarea__helper-text{color:var(--co-semantic-status-error)}.co-textarea--success .co-textarea__field{border-color:var(--co-semantic-status-success)}.co-textarea--success.co-textarea--focused .co-textarea__field{border-color:var(--co-semantic-status-success);box-shadow:0 0 0 2px rgba(10, 119, 36, 0.12)}.co-textarea--warning .co-textarea__field{border-color:var(--co-semantic-status-warning)}.co-textarea--warning.co-textarea--focused .co-textarea__field{border-color:var(--co-semantic-status-warning);box-shadow:0 0 0 2px rgba(253, 191, 0, 0.12)}.co-textarea--over-limit .co-textarea__field{border-color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-textarea{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-textarea__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-textarea__label{white-space:normal}:host([layout='horizontal']) .co-textarea>:not(.co-textarea__labels){grid-column:2;min-width:0}`;
+const coTextareaCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-textarea{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-textarea__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-textarea__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-textarea__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-field-required{margin-left:2px;color:var(--co-semantic-text-error, var(--co-color-status-error))}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-textarea__field{position:relative;display:flex;background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box;overflow:hidden}.co-textarea--flat .co-textarea__field{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:transparent}.co-textarea__native{width:100%;border:none;outline:none;background:transparent;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:400;line-height:1.5;color:var(--co-semantic-text-default);padding:var(--co-spacing-sm2) var(--co-spacing-md);margin:0;box-sizing:border-box}.co-textarea__native::placeholder{color:var(--co-semantic-text-muted)}.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)}.co-textarea--lg .co-textarea__native{padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-textarea__native--resize-vertical{resize:vertical}.co-textarea__native--resize-none{resize:none}.co-textarea__native--resize-both{resize:both}.co-textarea__clear{position:absolute;top:var(--co-spacing-sm2);right:var(--co-spacing-sm2);display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;border-radius:var(--co-border-radius-xxs);background:transparent;color:var(--co-semantic-text-muted);cursor:pointer;padding:0;transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-textarea__clear:hover{color:var(--co-semantic-text-default);background:var(--co-semantic-surface-hover)}.co-textarea__footer{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-md)}.co-textarea__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);flex:1;min-width:0}.co-textarea__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-textarea__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-textarea__counter{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12, 12px);font-weight:400;line-height:1;white-space:nowrap;flex-shrink:0}.co-textarea__counter--over{color:var(--co-semantic-text-error, var(--co-color-status-error));font-weight:500}.co-textarea--focused .co-textarea__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-textarea--disabled{opacity:0.6;pointer-events:none}.co-textarea--disabled .co-textarea__field{background:var(--co-semantic-surface-disabled);border-color:transparent}.co-textarea--error .co-textarea__field{border-color:var(--co-semantic-border-error, var(--co-semantic-status-error))}.co-textarea--error.co-textarea--focused .co-textarea__field{border-color:var(--co-semantic-border-error, var(--co-semantic-status-error));box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-error, var(--co-semantic-status-error)) 12%, transparent)}.co-textarea--error .co-textarea__helper-icon,.co-textarea--error .co-textarea__helper-text{color:var(--co-semantic-text-error, var(--co-semantic-status-error))}.co-textarea--success .co-textarea__field{border-color:var(--co-semantic-status-success)}.co-textarea--success.co-textarea--focused .co-textarea__field{border-color:var(--co-semantic-status-success);box-shadow:0 0 0 2px rgba(10, 119, 36, 0.12)}.co-textarea--warning .co-textarea__field{border-color:var(--co-semantic-status-warning)}.co-textarea--warning.co-textarea--focused .co-textarea__field{border-color:var(--co-semantic-status-warning);box-shadow:0 0 0 2px rgba(253, 191, 0, 0.12)}.co-textarea--over-limit .co-textarea__field{border-color:var(--co-semantic-border-error, var(--co-semantic-status-error))}:host([layout='horizontal']) .co-textarea{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-textarea__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-textarea__label{white-space:normal}:host([layout='horizontal']) .co-textarea>:not(.co-textarea__labels){grid-column:2;min-width:0}`;
 
 const CoTextarea = class {
     constructor(hostRef) {
@@ -73,7 +73,7 @@ const CoTextarea = class {
         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: 'e5e01322a905a357de6f2d509b7aca83cea49047', class: {
+        return (h("div", { key: '83ba9b546aafdd51bcd45a9028cd344c72b2e34c', class: {
                 'co-textarea': true,
                 'co-textarea--disabled': this.disabled,
                 'co-textarea--focused': this.hasFocus,
@@ -82,13 +82,13 @@ const CoTextarea = class {
                 [`co-textarea--${this.size}`]: true,
                 [statusClass]: !!statusClass,
                 'co-textarea--flat': this.variant === 'flat',
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '62466350843dafc15c75c6e4c29b13faec7b5639', class: "co-textarea__labels" }, this.label && (h("label", { key: '06059b9f859cc62b7f7673c354577d504a2c2b45', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: '2a48d38ac6b87dfd158eb0d7d9b1b3b2b1f95b5d', required: this.required }))), this.secondaryLabel && (h("span", { key: 'b24adbb11cf6ec84250ff3ce7552a9a519d53c3e', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '115cbef3d79afead80004feffde7b2ad7cc48f2d', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'a77b4842c08dc16e36cdb900aa35ddecb4663b57', ref: (el) => (this.textareaEl = el), class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '12527c009c32f5937c6036c726db5ef813acd14c', class: "co-textarea__labels" }, this.label && (h("label", { key: '1db33924205a7f36ed9b6ef3cf6c65b9370e5b2c', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: '28ee5a526fd254194b59a024159a6131e3778957', required: this.required }))), this.secondaryLabel && (h("span", { key: '72eabbd1a11d81d704515cd6954936a04c971f10', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'a35c69ff044866ba72fbe3f167196b9226801daa', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'f72b550b747592bbed8e5348f1ba7fbfb6cde153', 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: 'bcd4b99d6be969a6a8e9d8b8be5ab9f5f70ad872', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '1c5feae936fb38feb4476074f0b440f44f7baad8', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '6bdef97075337ced6529246ca7aa367c4e79e031', class: "co-textarea__footer" }, this.helperText && (h("div", { key: 'b72d17d0ceede08590afe947b0b99c789c91305e', 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: '75c339ff7f805a0982e4662d4584a9d8c187d47f', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '1df2b361fa5e5b7436cb1f5f08c89571663cc2b1', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '9e386d088cef6678ed80eb0d693eea4c9d6f93cc', class: "co-textarea__footer" }, this.helperText && (h("div", { key: '5701602f224670cf59ae0bd410e44ed462030615', class: {
                 'co-textarea__helper': true,
                 'co-textarea__helper--error': this.status === 'error',
-            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '446fc7cd38b8bd6f65c4695c3b600b5a9ae9919e', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '52035f4b099e808c0318205060492749a161a426', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: '176b97555fad8ce83a38ee2af66b68edf0b26319', class: {
+            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '7e5d0173f5c9f82272b5e57b220715fc178edc2c', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: 'ef184483745654568a57ab5aa56c457205eff33c', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: 'f5fa0e53edd03a7dffe065c22857b858b726ae58', class: {
                 'co-textarea__counter': true,
                 'co-textarea__counter--over': isOverLimit,
             }, part: "counter" }, this.charCount, "/", this.maxLength))))));

package/dist/esm/co-tile.entry.js

@@ -50,7 +50,7 @@ const CoTile = class {
         return !this.disabled && e.target === this.el;
     }
     render() {
-        return (h(Host, { key: '407cbb0c7c2f76d206f17233450ad4f7148d4860', role: "button", tabindex: this.disabled ? undefined : 0, "aria-disabled": this.disabled ? 'true' : undefined, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur }, h("div", { key: '73b397c1f2a4bd4f5a964b223ced9809f9c5f19c', class: "co-tile", part: "tile" }, h("slot", { key: 'e4b5b8a6855e838d51efd2d503cb893d68d6c2d3', name: "icon" }, this.icon ? h("co-icon", { name: this.icon, size: this.iconSize }) : null), h("span", { key: '3b356385347ea64b2a80289b592fa4f1244e60af', class: "co-tile__label", part: "label" }, this.label))));
+        return (h(Host, { key: '261a2e475fc44a1f003f85807a46d4a0365f272a', role: "button", tabindex: this.disabled ? undefined : 0, "aria-disabled": this.disabled ? 'true' : undefined, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur }, h("div", { key: 'd85fd1aae282a41a4555a5e580694a2b4a8c6ab8', class: "co-tile", part: "tile" }, h("slot", { key: '65c674f0ae7cb098d89df7bb9b9c214084e0bf6d', name: "icon" }, this.icon ? h("co-icon", { name: this.icon, size: this.iconSize }) : null), h("span", { key: '6fb4ad0eeb044422ef9bfae0917daf237f07468c', class: "co-tile__label", part: "label" }, this.label))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/co-time-field.entry.js

@@ -312,7 +312,7 @@ const CoTimeField = class {
     }
     render() {
         const t = getDateStrings(this.locale);
-        return (h("div", { key: 'b35cb03c86b6073d7af850316ef15754bedc059c', class: { 'co-time-field': true, 'co-time-field--disabled': this.disabled }, role: "group", "aria-label": this.fieldLabel || t.timeFieldLabel }, h("span", { key: 'dd3325ea0193f0819f4e8c2341eab0c0671cf421', class: "co-time-field__segs" }, this.renderSeg('hour', t), h("span", { key: '4bfae37879f6cb2fa00d26bdabdbdc04eb7701ad', class: "co-time-field__sep", "aria-hidden": "true" }, ":"), this.renderSeg('minute', t), this.hour12 && this.renderSeg('period', t)), h("span", { key: '196fcdc84979ee4631cefd208ef78b8d7a46d0c8', class: "co-time-field__steppers" }, h("button", { key: '1e2dbe2b2746048f6a1de6bdff3304180028bb90', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(1) }, h("co-icon", { key: '7b3a75bfb9b8038667dc709b65b1b1ea8ebecc0e', name: "caret-up", size: 10 })), h("button", { key: '948ae31bfe775c72269ff2bbdea8839c15d2f076', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(-1) }, h("co-icon", { key: '357072a670ee75c74569bd59e6ea4bcdebf216ac', name: "caret-down", size: 10 })))));
+        return (h("div", { key: '1eb2bed23d36204e93e5118dfd90977120bab249', class: { 'co-time-field': true, 'co-time-field--disabled': this.disabled }, role: "group", "aria-label": this.fieldLabel || t.timeFieldLabel }, h("span", { key: 'f9ae6d5353b49e51a03e449e0daec153a1947b13', class: "co-time-field__segs" }, this.renderSeg('hour', t), h("span", { key: 'bb25e1e804e37d3740b2d67b4d9301bedf3319b2', class: "co-time-field__sep", "aria-hidden": "true" }, ":"), this.renderSeg('minute', t), this.hour12 && this.renderSeg('period', t)), h("span", { key: 'a0c601d45ed167bf6ba8b445ee7a242a7a92d169', class: "co-time-field__steppers" }, h("button", { key: 'fc10a1e000e7b7bed8512217b6fad8c304817326', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(1) }, h("co-icon", { key: 'c293e1cbc842867401c01cd1a482900e127a0223', name: "caret-up", size: 10 })), h("button", { key: 'c60eb3694573641425204e59ed4ac882c8c39402', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(-1) }, h("co-icon", { key: 'c2b7ce55d167c8501ac3a3c66b419db04db00f29', name: "caret-down", size: 10 })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-toast.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-DJkaRtbb.js';
 
-const coToastCss = () => `:host{display:block;--co-toast-bg:var(--co-semantic-surface-page);--co-toast-border:var(--co-semantic-border-subtle);--co-toast-text:var(--co-semantic-text-default);--co-toast-text-secondary:var(--co-semantic-text-secondary);--co-toast-icon:var(--co-semantic-text-default);--co-toast-dismiss-bg:var(--co-semantic-surface-disabled);--co-toast-dismiss-color:var(--co-semantic-text-default)}.co-toast{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-lg);background:var(--co-toast-bg);border:1px solid var(--co-toast-border);border-radius:var(--co-border-radius-sm);font-family:var(--co-font-family-primary);box-sizing:border-box;width:100%;min-width:320px;max-width:458px}.co-toast--multiline,.co-toast--stacked,.co-toast--progress{align-items:flex-start}.co-toast__icon{display:inline-flex;flex-shrink:0;color:var(--co-toast-icon)}.co-toast--multiline .co-toast__icon,.co-toast--progress .co-toast__icon{padding-top:2px}.co-toast--progress .co-toast__icon{color:var(--co-color-primary-azul, #2563eb)}.co-toast__body{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--co-spacing-md)}.co-toast__content{display:flex;flex-direction:column;gap:var(--co-spacing-xs);min-width:0}.co-toast__message{font-size:var(--co-font-size-14);font-weight:400;line-height:1.25;letter-spacing:var(--co-font-letter-spacing-body);color:var(--co-toast-text)}.co-toast__description{font-size:var(--co-font-size-12);font-weight:400;line-height:1.4;letter-spacing:var(--co-font-letter-spacing-body);color:var(--co-toast-text-secondary)}.co-toast__actions{display:flex;align-items:center;gap:var(--co-spacing-sm2);flex-shrink:0}.co-toast__actions:empty{display:none}.co-toast--stacked .co-toast__actions{justify-content:flex-end;width:100%}.co-toast__dismiss{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:0;border:none;border-radius:var(--co-border-radius-full);background:var(--co-toast-dismiss-bg);color:var(--co-toast-dismiss-color);cursor:pointer;flex-shrink:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);-webkit-font-smoothing:antialiased}.co-toast__dismiss:hover{opacity:0.88}.co-toast__dismiss:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-toast--success{--co-toast-bg:var(--co-color-status-bg-success);--co-toast-border:var(--co-color-status-bg-success);--co-toast-text:var(--co-color-status-success);--co-toast-text-secondary:var(--co-color-status-success);--co-toast-icon:var(--co-color-status-success);--co-toast-dismiss-bg:var(--co-color-status-success);--co-toast-dismiss-color:var(--co-color-base-blanco)}.co-toast--error{--co-toast-bg:var(--co-color-status-bg-error);--co-toast-border:var(--co-color-status-bg-error);--co-toast-text:var(--co-color-status-error);--co-toast-text-secondary:var(--co-color-status-error);--co-toast-icon:var(--co-color-status-error);--co-toast-dismiss-bg:var(--co-color-status-error);--co-toast-dismiss-color:var(--co-color-base-blanco)}.co-toast--warning{--co-toast-bg:var(--co-color-status-bg-review);--co-toast-border:var(--co-color-status-bg-review);--co-toast-text:var(--co-color-status-review);--co-toast-text-secondary:var(--co-color-status-review);--co-toast-icon:var(--co-color-status-review);--co-toast-dismiss-bg:var(--co-color-status-review);--co-toast-dismiss-color:var(--co-color-base-blanco)}.co-toast--info{--co-toast-bg:var(--co-color-status-bg-progress);--co-toast-border:var(--co-color-status-bg-progress);--co-toast-text:var(--co-color-status-progress);--co-toast-text-secondary:var(--co-color-status-progress);--co-toast-icon:var(--co-color-status-progress);--co-toast-dismiss-bg:var(--co-color-status-progress);--co-toast-dismiss-color:var(--co-color-base-blanco)}.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}.co-toast{opacity:0;transform:translateY(16px) scale(0.97);filter:blur(var(--co-motion-blur-sm))}.co-toast--in{opacity:1;transform:none;filter:none;transition:opacity var(--co-motion-duration-slow) var(--co-motion-ease-out),     transform var(--co-motion-duration-slow) var(--co-motion-ease-out),     filter var(--co-motion-duration-slow) var(--co-motion-ease-out)}.co-toast--in.co-toast--success{transition:opacity var(--co-motion-duration-slow) var(--co-motion-ease-out),     filter var(--co-motion-duration-slow) var(--co-motion-ease-out),     transform var(--co-motion-duration-slow) var(--co-motion-ease-spring)}.co-toast__check path{stroke-dasharray:1;stroke-dashoffset:1}.co-toast--in .co-toast__check path{stroke-dashoffset:0;transition:stroke-dashoffset var(--co-motion-duration-slow)     var(--co-motion-ease-out) var(--co-motion-duration-fast)}`;
+const coToastCss = () => `:host{display:block;--co-toast-bg:var(--co-semantic-surface-page);--co-toast-border:var(--co-semantic-border-subtle);--co-toast-text:var(--co-semantic-text-default);--co-toast-text-secondary:var(--co-semantic-text-secondary);--co-toast-icon:var(--co-semantic-text-default);--co-toast-dismiss-bg:var(--co-semantic-surface-disabled);--co-toast-dismiss-color:var(--co-semantic-text-default)}.co-toast{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-lg);background:var(--co-toast-bg);border:1px solid var(--co-toast-border);border-radius:var(--co-border-radius-sm);font-family:var(--co-font-family-primary);box-sizing:border-box;width:100%;min-width:320px;max-width:458px}.co-toast--multiline,.co-toast--stacked,.co-toast--progress{align-items:flex-start}.co-toast__icon{display:inline-flex;flex-shrink:0;color:var(--co-toast-icon)}.co-toast--multiline .co-toast__icon,.co-toast--progress .co-toast__icon{padding-top:2px}.co-toast--progress .co-toast__icon{color:var(--co-semantic-text-link, var(--co-color-primary-azul, #2563eb))}.co-toast__body{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--co-spacing-md)}.co-toast__content{display:flex;flex-direction:column;gap:var(--co-spacing-xs);min-width:0}.co-toast__message{font-size:var(--co-font-size-14);font-weight:400;line-height:1.25;letter-spacing:var(--co-font-letter-spacing-body);color:var(--co-toast-text)}.co-toast__description{font-size:var(--co-font-size-12);font-weight:400;line-height:1.4;letter-spacing:var(--co-font-letter-spacing-body);color:var(--co-toast-text-secondary)}.co-toast__actions{display:flex;align-items:center;gap:var(--co-spacing-sm2);flex-shrink:0}.co-toast__actions:empty{display:none}.co-toast--stacked .co-toast__actions{justify-content:flex-end;width:100%}.co-toast__dismiss{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:0;border:none;border-radius:var(--co-border-radius-full);background:var(--co-toast-dismiss-bg);color:var(--co-toast-dismiss-color);cursor:pointer;flex-shrink:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);-webkit-font-smoothing:antialiased}.co-toast__dismiss:hover{opacity:0.88}.co-toast__dismiss:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-toast--success{--co-toast-bg:var(--co-semantic-surface-success, var(--co-color-status-bg-success));--co-toast-border:var(--co-semantic-surface-success, var(--co-color-status-bg-success));--co-toast-text:var(--co-semantic-text-success, var(--co-color-status-success));--co-toast-text-secondary:var(--co-semantic-text-success, var(--co-color-status-success));--co-toast-icon:var(--co-semantic-text-success, var(--co-color-status-success));--co-toast-dismiss-bg:var(--co-color-status-success);--co-toast-dismiss-color:var(--co-color-base-blanco)}.co-toast--error{--co-toast-bg:var(--co-semantic-surface-error, var(--co-color-status-bg-error));--co-toast-border:var(--co-semantic-surface-error, var(--co-color-status-bg-error));--co-toast-text:var(--co-semantic-text-error, var(--co-color-status-error));--co-toast-text-secondary:var(--co-semantic-text-error, var(--co-color-status-error));--co-toast-icon:var(--co-semantic-text-error, var(--co-color-status-error));--co-toast-dismiss-bg:var(--co-color-status-error);--co-toast-dismiss-color:var(--co-color-base-blanco)}.co-toast--warning{--co-toast-bg:var(--co-semantic-surface-warning, var(--co-color-status-bg-review));--co-toast-border:var(--co-semantic-surface-warning, var(--co-color-status-bg-review));--co-toast-text:var(--co-semantic-text-warning, var(--co-color-status-review));--co-toast-text-secondary:var(--co-semantic-text-warning, var(--co-color-status-review));--co-toast-icon:var(--co-semantic-text-warning, var(--co-color-status-review));--co-toast-dismiss-bg:var(--co-color-status-review);--co-toast-dismiss-color:var(--co-color-base-blanco)}.co-toast--info{--co-toast-bg:var(--co-semantic-surface-info, var(--co-color-status-bg-progress));--co-toast-border:var(--co-semantic-surface-info, var(--co-color-status-bg-progress));--co-toast-text:var(--co-semantic-text-info, var(--co-color-status-progress));--co-toast-text-secondary:var(--co-semantic-text-info, var(--co-color-status-progress));--co-toast-icon:var(--co-semantic-text-info, var(--co-color-status-progress));--co-toast-dismiss-bg:var(--co-color-status-progress);--co-toast-dismiss-color:var(--co-color-base-blanco)}.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-semantic-text-muted, 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-semantic-surface-control, 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}.co-toast{opacity:0;transform:translateY(16px) scale(0.97);filter:blur(var(--co-motion-blur-sm))}.co-toast--in{opacity:1;transform:none;filter:none;transition:opacity var(--co-motion-duration-slow) var(--co-motion-ease-out),     transform var(--co-motion-duration-slow) var(--co-motion-ease-out),     filter var(--co-motion-duration-slow) var(--co-motion-ease-out)}.co-toast--in.co-toast--success{transition:opacity var(--co-motion-duration-slow) var(--co-motion-ease-out),     filter var(--co-motion-duration-slow) var(--co-motion-ease-out),     transform var(--co-motion-duration-slow) var(--co-motion-ease-spring)}.co-toast__check path{stroke-dasharray:1;stroke-dashoffset:1}.co-toast--in .co-toast__check path{stroke-dashoffset:0;transition:stroke-dashoffset var(--co-motion-duration-slow)     var(--co-motion-ease-out) var(--co-motion-duration-fast)}`;
 
 const DEFAULT_ICON = {
     success: 'info',

package/dist/esm/co-toggle-button-group.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
 
-const coToggleButtonGroupCss = () => `:host{display:inline-flex}.co-toggle-button-group{display:inline-flex;gap:0}.co-toggle-button-group--row{flex-direction:row}.co-toggle-button-group--column{flex-direction:column}:host([full-width]){display:flex;width:100%}.co-toggle-button-group--full{display:flex;width:100%}.co-toggle-button-group--full.co-toggle-button-group--row ::slotted(co-toggle-button){flex:1 1 0;--co-toggle-button-width:100%}.co-toggle-button-group--row ::slotted(co-toggle-button){--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){--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){--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){--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){--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){--co-tbr-bl:var(--co-toggle-button-radius);--co-tbr-br:var(--co-toggle-button-radius)}.co-toggle-button-group--row ::slotted(co-toggle-button:not(:first-child)){margin-left:-1px}.co-toggle-button-group--column ::slotted(co-toggle-button:not(:first-child)){margin-top:-1px}.co-toggle-button-group--disabled{opacity:0.4;pointer-events:none}.co-toggle-button-group--track{display:inline-flex;gap:var(--co-toggle-track-gap, 2px);padding:var(--co-toggle-track-padding, 3px);box-sizing:border-box;border-radius:var(--co-toggle-track-radius, 10px);background:var(--co-toggle-track-bg, var(--co-semantic-surface-muted));box-shadow:var(--co-toggle-track-ring, inset 0 0 0 1px var(--co-semantic-border-subtle))}.co-toggle-button-group--track ::slotted(co-toggle-button){margin:0 !important}.co-toggle-button-group--track.co-toggle-button-group--xs{gap:var(--co-toggle-track-gap, var(--co-spacing-xxs));padding:var(--co-toggle-track-padding, var(--co-spacing-xxs));border-radius:var(--co-toggle-track-radius, var(--co-border-radius-xxs))}.co-toggle-button-group--soft{gap:var(--co-spacing-sm2)}.co-toggle-button-group--soft ::slotted(co-toggle-button){margin:0 !important}`;
+const coToggleButtonGroupCss = () => `:host{display:inline-flex}.co-toggle-button-group{display:inline-flex;gap:0}.co-toggle-button-group--row{flex-direction:row}.co-toggle-button-group--column{flex-direction:column}:host([full-width]){display:flex;width:100%}.co-toggle-button-group--full{display:flex;width:100%}.co-toggle-button-group--full.co-toggle-button-group--row ::slotted(co-toggle-button){flex:1 1 0;--co-toggle-button-width:100%}.co-toggle-button-group--row ::slotted(co-toggle-button){--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){--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){--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){--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){--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){--co-tbr-bl:var(--co-toggle-button-radius);--co-tbr-br:var(--co-toggle-button-radius)}.co-toggle-button-group--row ::slotted(co-toggle-button:not(:first-child)){margin-left:-1px}.co-toggle-button-group--column ::slotted(co-toggle-button:not(:first-child)){margin-top:-1px}.co-toggle-button-group--disabled{opacity:0.4;pointer-events:none}.co-toggle-button-group--track{display:inline-flex;gap:var(--co-toggle-track-gap, 2px);padding:var(--co-toggle-track-padding, 3px);box-sizing:border-box;border-radius:var(--co-toggle-track-radius, 10px);background:var(--co-toggle-track-bg, var(--co-semantic-surface-muted));box-shadow:var(--co-toggle-track-ring, inset 0 0 0 1px var(--co-semantic-border-subtle))}.co-toggle-button-group--track ::slotted(co-toggle-button){margin:0 !important}.co-toggle-button-group--track.co-toggle-button-group--xs{gap:var(--co-toggle-track-gap, var(--co-spacing-xxs));padding:var(--co-toggle-track-padding, var(--co-spacing-xxs));border-radius:var(--co-toggle-track-radius, var(--co-border-radius-xxs))}.co-toggle-button-group--soft{gap:var(--co-spacing-sm2)}.co-toggle-button-group--soft ::slotted(co-toggle-button){margin:0 !important}.co-toggle-button-group--pill{gap:var(--co-spacing-md);flex-wrap:wrap}.co-toggle-button-group--pill ::slotted(co-toggle-button){margin:0 !important}`;
 
 const CoToggleButtonGroup = class {
     constructor(hostRef) {
@@ -35,7 +35,9 @@ const CoToggleButtonGroup = class {
          *  'track' turns the group into a sunken gray track carrying detached rounded
          *  pills (white + shadow when selected) — e.g. an icon-only view toggle.
          *  'soft' separates each button into its own gray-100 chip (gap between them);
-         *  the selected chip gets the celeste-100/primary-azul accent pair. */
+         *  the selected chip gets the celeste-100/primary-azul accent pair.
+         *  'pill' separa cada botón en una pastilla de 40px; la seleccionada va en la
+         *  superficie inversa. */
         this.variant = 'connected';
     }
     get selectedValues() {
@@ -91,7 +93,7 @@ const CoToggleButtonGroup = class {
         });
     }
     render() {
-        return (h("div", { key: '876d581e3c53b790f1e89ba3917325ccc7b5e8ba', class: {
+        return (h("div", { key: '5603238d8329580cec8916147854b8316e118882', class: {
                 'co-toggle-button-group': true,
                 [`co-toggle-button-group--${this.direction}`]: true,
                 [`co-toggle-button-group--${this.variant}`]: true,
@@ -100,7 +102,7 @@ const CoToggleButtonGroup = class {
                 'co-toggle-button-group--xs': this.size === 'xs',
                 'co-toggle-button-group--disabled': this.disabled,
                 'co-toggle-button-group--full': this.fullWidth,
-            }, role: "group" }, h("slot", { key: '9e791ede02a818a5fbe0bf571cc185cc3ea609a6' })));
+            }, role: "group" }, h("slot", { key: 'd9cf50452f22dff3f076d9b1cb3126a2924030e1' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-toggle-button.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
 
-const coToggleButtonCss = () => `:host{display:inline-flex;--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;width:var(--co-toggle-button-width, auto);align-items:center;justify-content:center;gap:var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);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:var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));backdrop-filter:var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));color:var(--co-toggle-button-color, var(--co-semantic-text-default));font-family:var(--co-font-family-primary);font-weight:500;cursor:pointer;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out), border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);white-space:nowrap;box-sizing:border-box;line-height:1}.co-toggle-button--l{height:48px;padding:0 var(--co-spacing-lg);font-size:var(--co-toggle-button-font-size, var(--co-font-size-16))}.co-toggle-button--m{height:40px;padding:0 var(--co-spacing-md);font-size:var(--co-toggle-button-font-size, var(--co-font-size-14))}.co-toggle-button--s{height:32px;padding:0 var(--co-spacing-sm2);font-size:var(--co-toggle-button-font-size, var(--co-font-size-14))}.co-toggle-button--xs{height:24px;padding:0 var(--co-spacing-sm);font-size:var(--co-toggle-button-font-size, var(--co-font-size-12))}.co-toggle-button--icon-only.co-toggle-button--l{width:48px;padding:0}.co-toggle-button--icon-only.co-toggle-button--m{width:40px;padding:0}.co-toggle-button--icon-only.co-toggle-button--s{width:32px;padding:0}.co-toggle-button--icon-only.co-toggle-button--xs{width:24px;padding:0}.co-toggle-button:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-toggle-button--selected{background:var(--co-color-base-negro, #1f1c1b);color:var(--co-toggle-button-color-selected, var(--co-color-base-blanco, #fff));border-color:var(--co-color-base-negro, #1f1c1b)}.co-toggle-button--selected:hover:not(:disabled){background:var(--co-color-gray-800, #0a0a0a);border-color:var(--co-color-gray-800, #0a0a0a)}.co-toggle-button--disabled{opacity:0.4;cursor:not-allowed}.co-toggle-button:focus-visible{outline:2px solid var(--co-semantic-text-default);outline-offset:-3px}.co-toggle-button--selected:focus-visible{outline-color:currentColor}.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)}}:host([variant='track']) .co-toggle-button{height:var(--co-toggle-pill-height, 30px);border-radius:var(--co-toggle-pill-radius, 8px);border-color:transparent;background:transparent;color:var(--co-toggle-button-color, var(--co-semantic-text-secondary));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:var(--co-semantic-surface-hover);color:var(--co-toggle-button-color-hover, var(--co-semantic-text-default))}:host([variant='track']) .co-toggle-button--selected{background:var(--co-semantic-surface-page);color:var(--co-toggle-button-color-selected, var(--co-semantic-text-default));border-color:var(--co-toggle-pill-border, var(--co-semantic-border-default));box-shadow:var(--co-toggle-pill-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-semantic-surface-page);color:var(--co-toggle-button-color-selected, var(--co-semantic-text-default));border-color:var(--co-toggle-pill-border, var(--co-semantic-border-default))}:host([variant='track'][size='xs']) .co-toggle-button{height:var(--co-toggle-pill-height, 20px);border-radius:var(--co-toggle-pill-radius, var(--co-border-radius-xxs))}:host([variant='track'][size='xs']) .co-toggle-button:not(.co-toggle-button--selected){color:var(--co-toggle-button-color, var(--co-semantic-text-default))}:host([variant='track'][size='xs']) .co-toggle-button:not(.co-toggle-button--selected):hover:not(:disabled){color:var(--co-toggle-button-color-hover, var(--co-semantic-text-default))}:host([variant='track'][size='xs']) .co-toggle-button.co-toggle-button--icon-only{width:20px}:host([variant='track'][size='xs']) .co-toggle-button--selected{box-shadow:var(--co-toggle-pill-shadow, none)}:host([variant='soft']) .co-toggle-button{height:24px;border-radius:var(--co-border-radius-xxs);border-color:transparent;background:var(--co-semantic-surface-control, #f6f6f6);color:var(--co-toggle-button-color, var(--co-semantic-text-default));font-size:var(--co-font-size-12);font-weight:var(--co-font-weight-regular);padding:0 calc(var(--co-spacing-sm2) - 1px);gap:var(--co-spacing-sm2);-webkit-backdrop-filter:none;backdrop-filter:none}:host([variant='soft']) .co-toggle-button:hover:not(:disabled){background:var(--co-semantic-surface-control, #f6f6f6)}:host([variant='soft']) .co-toggle-button--selected{background:var(--co-color-celeste-100);color:var(--co-toggle-button-color-selected, var(--co-color-primary-azul));border-color:transparent}:host([variant='soft']) .co-toggle-button--selected:hover:not(:disabled){background:var(--co-color-celeste-100)}`;
+const coToggleButtonCss = () => `:host{display:inline-flex;--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;width:var(--co-toggle-button-width, auto);align-items:center;justify-content:center;gap:var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);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:var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));backdrop-filter:var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));color:var(--co-toggle-button-color, var(--co-semantic-text-default));font-family:var(--co-font-family-primary);font-weight:500;cursor:pointer;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out), border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);white-space:nowrap;box-sizing:border-box;line-height:1}.co-toggle-button--l{height:48px;padding:0 var(--co-spacing-lg);font-size:var(--co-toggle-button-font-size, var(--co-font-size-16))}.co-toggle-button--m{height:40px;padding:0 var(--co-spacing-md);font-size:var(--co-toggle-button-font-size, var(--co-font-size-14))}.co-toggle-button--s{height:32px;padding:0 var(--co-spacing-sm2);font-size:var(--co-toggle-button-font-size, var(--co-font-size-14))}.co-toggle-button--xs{height:24px;padding:0 var(--co-spacing-sm);font-size:var(--co-toggle-button-font-size, var(--co-font-size-12))}.co-toggle-button--icon-only.co-toggle-button--l{width:48px;padding:0}.co-toggle-button--icon-only.co-toggle-button--m{width:40px;padding:0}.co-toggle-button--icon-only.co-toggle-button--s{width:32px;padding:0}.co-toggle-button--icon-only.co-toggle-button--xs{width:24px;padding:0}.co-toggle-button:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-toggle-button--selected{background:var(--co-color-base-negro, #1f1c1b);color:var(--co-toggle-button-color-selected, var(--co-color-base-blanco, #fff));border-color:var(--co-color-base-negro, #1f1c1b)}.co-toggle-button--selected:hover:not(:disabled){background:var(--co-color-gray-800, #0a0a0a);border-color:var(--co-color-gray-800, #0a0a0a)}.co-toggle-button--disabled{opacity:0.4;cursor:not-allowed}.co-toggle-button:focus-visible{outline:2px solid var(--co-semantic-text-default);outline-offset:-3px}.co-toggle-button--selected:focus-visible{outline-color:currentColor}.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)}}:host([variant='track']) .co-toggle-button{height:var(--co-toggle-pill-height, 30px);border-radius:var(--co-toggle-pill-radius, 8px);border-color:transparent;background:transparent;color:var(--co-toggle-button-color, var(--co-semantic-text-secondary));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:var(--co-semantic-surface-hover);color:var(--co-toggle-button-color-hover, var(--co-semantic-text-default))}:host([variant='track']) .co-toggle-button--selected{background:var(--co-semantic-surface-page);color:var(--co-toggle-button-color-selected, var(--co-semantic-text-default));border-color:var(--co-toggle-pill-border, var(--co-semantic-border-default));box-shadow:var(--co-toggle-pill-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-semantic-surface-page);color:var(--co-toggle-button-color-selected, var(--co-semantic-text-default));border-color:var(--co-toggle-pill-border, var(--co-semantic-border-default))}:host([variant='track'][size='xs']) .co-toggle-button{height:var(--co-toggle-pill-height, 20px);border-radius:var(--co-toggle-pill-radius, var(--co-border-radius-xxs))}:host([variant='track'][size='xs']) .co-toggle-button:not(.co-toggle-button--selected){color:var(--co-toggle-button-color, var(--co-semantic-text-default))}:host([variant='track'][size='xs']) .co-toggle-button:not(.co-toggle-button--selected):hover:not(:disabled){color:var(--co-toggle-button-color-hover, var(--co-semantic-text-default))}:host([variant='track'][size='xs']) .co-toggle-button.co-toggle-button--icon-only{width:20px}:host([variant='track'][size='xs']) .co-toggle-button--selected{box-shadow:var(--co-toggle-pill-shadow, none)}:host([variant='soft']) .co-toggle-button{height:24px;border-radius:var(--co-border-radius-xxs);border-color:transparent;background:var(--co-semantic-surface-control, #f6f6f6);color:var(--co-toggle-button-color, var(--co-semantic-text-default));font-size:var(--co-font-size-12);font-weight:var(--co-font-weight-regular);padding:0 calc(var(--co-spacing-sm2) - 1px);gap:var(--co-spacing-sm2);-webkit-backdrop-filter:none;backdrop-filter:none}:host([variant='soft']) .co-toggle-button:hover:not(:disabled){background:var(--co-semantic-surface-control, #f6f6f6)}:host([variant='soft']) .co-toggle-button--selected{background:var(--co-color-celeste-100);color:var(--co-toggle-button-color-selected, var(--co-color-primary-azul));border-color:transparent}:host([variant='soft']) .co-toggle-button--selected:hover:not(:disabled){background:var(--co-color-celeste-100)}:host([variant='pill']) .co-toggle-button{height:40px;padding:0 var(--co-spacing-lg);border-radius:var(--co-border-radius-full);border-color:transparent;background:var(--co-semantic-surface-control);color:var(--co-toggle-button-color, var(--co-semantic-text-default));font-size:var(--co-toggle-button-font-size, var(--co-font-size-14));font-weight:var(--co-font-weight-regular);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}:host([variant='pill']) .co-toggle-button:hover:not(:disabled){background:var(--co-semantic-surface-hover)}:host([variant='pill']) .co-toggle-button--selected{background:var(--co-semantic-surface-primary);color:var(--co-toggle-button-color-selected, var(--co-semantic-on-primary))}:host([variant='pill']) .co-toggle-button--selected:hover:not(:disabled){background:var(--co-semantic-surface-primary);color:var(--co-toggle-button-color-selected, var(--co-semantic-on-primary))}@supports (color: light-dark(white, black)){:host([variant='soft']) .co-toggle-button--selected{color:var(--co-toggle-button-color-selected, var(--co-semantic-text-link, var(--co-color-primary-azul)))}:host([variant='soft']) .co-toggle-button--selected,:host([variant='soft']) .co-toggle-button--selected:hover:not(:disabled){background:light-dark(var(--co-color-celeste-100), color-mix(in srgb, var(--co-semantic-text-link, var(--co-color-primary-azul)) 18%, var(--co-semantic-surface-page)))}}`;
 
 /** Tallas que entiende este botón. El grupo puede traer una fuera de esta
  *  lista (el host usa `<co-toggle-button-group size="sm">`): nunca se adopta. */
@@ -33,6 +33,8 @@ const CoToggleButton = class {
         /** Visual variant. 'track' renders the button as a detached rounded pill for a
          *  sunken toggle-button-group track. 'soft' renders it as a separated gray-100
          *  chip whose selected state uses the celeste-100/primary-azul accent pair.
+         *  'pill' renders a standalone 40px pill on the control surface (Figma filter
+         *  chips); the selected chip switches to the inverse surface (black in light).
          *  Normally set by the parent group. */
         this.variant = 'connected';
         this.handleClick = () => {
@@ -80,7 +82,7 @@ const CoToggleButton = class {
             ? this.size === 'xs' ? 14 : 18
             : this.size === 'l' ? 20 : this.size === 'xs' ? 14 : 16;
         const iconWeight = this.selected && this.selectedIconWeight ? this.selectedIconWeight : undefined;
-        return (h("button", { key: 'a0b0aa7d128e4ee66a91a223851b126684d8e997',
+        return (h("button", { key: '8294ac8c49a0c36c9b88192db084bacbce1b7a15',
             /* El `<button>` vive en shadow DOM: sin `part` el consumidor no podía
                tocarlo desde afuera — ni su `justify-content: center`, que está
                hardcodeado en el CSS (el editor terminó moviendo el texto a un slot
@@ -92,7 +94,7 @@ const CoToggleButton = class {
                 [`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 }, h("slot", { key: 'd683a91a68fb3820a01b8bd91dc3b81b8d8994f0', name: "leading" }), this.iconLeft && h("co-icon", { key: '6894633951caa68a614824af931a33dc46a552ab', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: '96d902f0f28a8ea8a810425cf775ff6a9437be4d', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '4e5db3f34af24fffce2ec95e4a7767c82768db39', name: this.iconRight, size: iconSize, weight: iconWeight })));
+            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, h("slot", { key: '9430df624ac0477d9942f321676360e5fd0cf697', name: "leading" }), this.iconLeft && h("co-icon", { key: '78c8f2c1abcbbcae86e13712eeb8da7587ce7dd3', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: '8d2c2281ff3afe0b7a998c128718f3b9b3d700fe', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '9219240493081a502ccaca2f8b3f252f652872ef', name: this.iconRight, size: iconSize, weight: iconWeight })));
     }
     get el() { return getElement(this); }
 };