@prolibu-suite/cobalt-core 0.10.4 → 0.11.0

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-DH5lfRNj.js';
+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}.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)}`;
+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 CoTab = class {
     constructor(hostRef) {
@@ -12,12 +12,22 @@ const CoTab = class {
         this.value = '';
         /** Whether this tab is active/selected */
         this.selected = false;
-        /** Size */
+        /** Size. 'large'/'small' son los tamaños históricos (pill/underline). 's' (28px)
+            y 'xs' (26px, excepción D-19 a la escala unificada) solo tienen chrome propio
+            en `variant="segmented"` — ver co-tab.css. */
         this.size = 'small';
         /** Visual variant: filled pill (default), underline tab, or segmented-control pill */
         this.variant = 'pill';
         /** Disabled state */
         this.disabled = false;
+        /** Estira el botón interno (`part="tab"`) al 100% del host y centra su
+            contenido. Lo setea `co-tab-group` con `full-width` (se propaga a los
+            hijos igual que `size`, ver `syncTabs()`: el grupo sin `fullWidth` nunca
+            pisa uno puesto a mano acá): el grupo ya estiraba el host con
+            `::slotted(co-tab) { flex: 1 }`, pero el `.co-tab` de adentro seguía al
+            ancho del contenido. Reflejado para que `:host([full-width])` lo vea
+            desde el CSS. Sin él, nada cambia. */
+        this.fullWidth = false;
         this.handleClick = () => {
             if (this.disabled)
                 return;
@@ -26,13 +36,13 @@ const CoTab = class {
     }
     render() {
         const iconSize = this.variant === 'underline' ? 16 : this.size === 'large' ? 18 : 14;
-        return (h("button", { key: '0d7312af81807baec7f7b0899d9a92186175b8eb', class: {
+        return (h("button", { key: '61f50639e0a59faa103390bd34b478bbe947bb90', 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: '8bef8688e8ea0ce2befc12efcbe5683de02f808d', name: this.iconLeft, size: iconSize })), h("span", { key: '860469720e5396d353e0a548b9526fbf64a3ac2d' }, this.label), this.badge && (h("span", { key: 'eb9b9749b6f56a1cb98044ccd5817f016a7e9747', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '001337e6ec2235244be4acffb930003f02acaf47', 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: '6148d93a09063c8bcaf31969657aaef573818469', name: this.iconLeft, size: iconSize })), h("span", { key: 'f0103e87ab5978dc77b30ab161122565b11b8675' }, this.label), this.badge && (h("span", { key: '76ed839028bbf536ea0ae3dde81d959e3f2c9fa1', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: 'd2fa1dec20135e2466a3ad546590216e1f7eb4a1', name: this.iconRight, size: iconSize }))));
     }
 };
 CoTab.style = coTabCss();

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
-import { R as RequiredMark } from './requiredMark-BCJUuZvC.js';
-import { F as FieldChip } from './fieldChip-uyggU8VV.js';
+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';
 
 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}`;
 
@@ -174,14 +174,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: '338b791cca6cbf885ef92bedd7cd349c120a611a', class: {
+        return (h("div", { key: '1ef89376f12003afa4250411b6dee524412ff880', 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: '1dc6616c53f7d3dd88d64b660746542c2742b3c3', class: "co-tags-field__labels" }, h("label", { key: 'c74138b4f45a22e5a59208694625042621098270', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'de34b1cb65244eb272720323dedab06079869238', required: this.required })))), h("div", { key: '670ec7a0f79a4300da5ca016ae1c8cb0a0fdc67e', class: "co-tags-field__field-row" }, h("div", { key: '03e8bd9d9380c80ca3f551df5482afe7d1b64ad5', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '00cd8a5cd078d1a4c20fa0a8f39aba8849b832a8', 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: '31156258ceeee2b6086c53a27cdeb7fce2658e76', class: "co-tags-field__labels" }, h("label", { key: '0263770cef191ed7517011d12e5c8508be6e4ebd', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '358289e81e6cdafb0e1eca09de82ca7d46280f8f', required: this.required })))), h("div", { key: '72997e42dd6596f716df5a7c19dbe8e897244b00', class: "co-tags-field__field-row" }, h("div", { key: '1a2357d85e58cf87fb7aa24014e6fd25c69666db', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '58e7f2d2ead8c6624e03b8bf3a5dbdcbd171671c', 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
@@ -189,13 +189,13 @@ const CoTagsField = class {
                     e.stopPropagation();
                     this.removeTag(index);
                 }
-                : undefined }))), showInput && (h("input", { key: '4e420fa07aed79feb6d36ebce6ac739ad6f5fee1', 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: 'e80b49d80a9a2655cdda8acd3035ee88bec2e976', class: {
+                : undefined }))), showInput && (h("input", { key: '4528c6c129e2a398e1e711aa292643b29bf636c3', 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: '3279bfa9651cc45c702567f0c1323562b338775d', 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: '15035d33ff47ad095f4cb4189cc694aaf4e0e901', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'e15557c8531957998d5afabf98e4da1dd7d32811', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: '4f16febfdc7d8543267e07fa140a2c81b7e15a25', 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: '69a902c55a325c4b559ebf050d8d7de03e0b2074', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'eaec02e8a0af3cb98020a621d7ceae38107c9cdf', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: '602738e23f55dea8388fa73760e5b612be24dc21', class: {
                 'co-tags-field__helper': true,
                 'co-tags-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '201a84c536b5404c43d7abbbbb6a96562348dcdd', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: 'a5a305ee228753d5693902df2739064f0e548aa2', class: "co-tags-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '4950c001e2604cd0dc35d4f4def640d89e18129e', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '5b2456911fe3aa83cca47781817a4a38258749d7', class: "co-tags-field__helper-text" }, helper)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
-import { R as RequiredMark } from './requiredMark-BCJUuZvC.js';
+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}`;
 
@@ -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: '669fe8eb16769774e3f9501eb8c6c533463cd8db', class: {
+        return (h("div", { key: 'e5e01322a905a357de6f2d509b7aca83cea49047', 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: '89109724e8325d67c42a26f2997d752e9a3f6152', class: "co-textarea__labels" }, this.label && (h("label", { key: '38f2d2fd52e02eb43b7381e2d257bd3d09ccd702', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: '70e789e90f6b77676649c4ba3388e8f4293daf1f', required: this.required }))), this.secondaryLabel && (h("span", { key: 'dc9ba43690ff46be7e4db91f9ceca95c9c54d7f1', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '2f92be15a4199500dbf241246ceea5d3dcab041f', class: "co-textarea__field", part: "field" }, h("textarea", { key: '597a77679c34d1b5c9dbb818f7df316fee47c31a', ref: (el) => (this.textareaEl = el), class: {
+            }, 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: {
                 '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: 'fe9c62fc4f101aaccb152e4d7b005499c711477d', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '48eb2ab762af82f70548655fcc5ed809c462cc77', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: 'bdc8b371a0b870f4947fdaecbe2dfc032adf6539', class: "co-textarea__footer" }, this.helperText && (h("div", { key: 'd6674a0bf0672c2718b924bee4609b30afe95780', 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: '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: {
                 'co-textarea__helper': true,
                 'co-textarea__helper--error': this.status === 'error',
-            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '9b16efe568db1f6ec93d76908fdac7b5800ee59d', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '233601dfb3cf443a56f228deabfac87cca54d4c2', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: 'f587b4d8a744c0c0fd26ff45ee54982b90994dde', class: {
+            }, 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: {
                 'co-textarea__counter': true,
                 'co-textarea__counter--over': isOverLimit,
             }, part: "counter" }, this.charCount, "/", this.maxLength))))));

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

@@ -0,0 +1,59 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-DJkaRtbb.js';
+
+const coTileCss = () => `:host{display:block;width:100%;outline:none}:host([disabled]){pointer-events:none}:host(:focus-visible) .co-tile{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-tile{box-sizing:border-box;width:100%;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-spacing-sm2, 8px);padding-inline:var(--co-spacing-md, 12px);background:transparent;border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-sm);cursor:pointer;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}:host(:not([disabled])) .co-tile:hover{background:var(--co-semantic-surface-hover)}:host([disabled]) .co-tile{cursor:not-allowed;opacity:0.4}.co-tile__label{font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);font-weight:var(--co-font-weight-regular, 400);line-height:1.3;color:var(--co-semantic-text-default);text-align:center;white-space:pre-line}`;
+
+const CoTile = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Etiqueta visible debajo del ícono. Soporta `\n` (se renderiza en dos líneas). */
+        this.label = '';
+        /** Tamaño del ícono por defecto, en px. */
+        this.iconSize = 32;
+        /** Deshabilitada: pierde el `tabindex` y queda `aria-disabled`, pero conserva `role="button"`. */
+        this.disabled = false;
+        /** Space quedó presionada SOBRE esta tile (el keyup solo activa si el
+         *  keydown fue acá — un <button> nativo tampoco dispara por un keyup
+         *  suelto). */
+        this.spaceArmed = false;
+        this.handleKeyDown = (e) => {
+            if (!this.ownsKeyEvent(e))
+                return;
+            if (e.key === 'Enter') {
+                this.el.click();
+            }
+            else if (e.key === ' ') {
+                // Sin esto la página scrollea con Space; el click va en keyup.
+                e.preventDefault();
+                this.spaceArmed = true;
+            }
+        };
+        this.handleKeyUp = (e) => {
+            if (e.key !== ' ')
+                return;
+            const armed = this.spaceArmed;
+            this.spaceArmed = false;
+            if (!armed || !this.ownsKeyEvent(e))
+                return;
+            e.preventDefault();
+            this.el.click();
+        };
+        /** Perder el foco entre el keydown y el keyup de Space desarma (un
+         *  <button> nativo tampoco dispara si el keyup cae en otro lado). */
+        this.handleBlur = () => {
+            this.spaceArmed = false;
+        };
+    }
+    /** Solo eventos que nacen en el host (o en su shadow, retargeteados al
+     *  host): un control proyectado en el slot `icon` maneja sus propias
+     *  teclas y no debe activar la tile por rebote. */
+    ownsKeyEvent(e) {
+        return !this.disabled && e.target === this.el;
+    }
+    render() {
+        return (h(Host, { key: '7b6d2066f36837c836bcac75c98c7472451a3b0a', 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: '275cc5dd82f17bc1380b52ee88780844d7937692', class: "co-tile", part: "tile" }, h("slot", { key: '9418db0eba2a388829f3245bf51392583e60eec1', name: "icon" }, this.icon ? h("co-icon", { name: this.icon, size: this.iconSize }) : null), h("span", { key: 'c235396aca36babd67c68c3e1363931f21c285cb', class: "co-tile__label", part: "label" }, this.label))));
+    }
+    get el() { return getElement(this); }
+};
+CoTile.style = coTileCss();
+
+export { CoTile as co_tile };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
 import { g as getDateStrings } from './dateI18n-jYd9gu_c.js';
 
 const coTimeFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);letter-spacing:var(--co-font-letter-spacing-body)}.co-time-field{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-xs);min-height:32px;padding:3px var(--co-spacing-sm) 3px var(--co-spacing-sm2);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);box-sizing:border-box;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)}.co-time-field:focus-within{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-time-field--disabled{background:var(--co-semantic-surface-disabled);border-color:transparent;pointer-events:none}.co-time-field__segs{display:inline-flex;align-items:center;gap:1px}.co-time-field__seg{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:24px;padding:0 3px;border-radius:var(--co-border-radius-xxs);font-size:var(--co-font-size-14);font-variant-numeric:tabular-nums;color:var(--co-semantic-text-default);box-sizing:border-box;cursor:default;user-select:none;outline:none}.co-time-field__seg:focus{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);font-weight:600}.co-time-field__seg--period{margin-left:var(--co-spacing-xs);font-size:var(--co-font-size-13)}.co-time-field__seg--empty{color:var(--co-semantic-text-muted)}.co-time-field__sep{color:var(--co-semantic-text-muted)}.co-time-field__steppers{display:inline-flex;flex-direction:column}.co-time-field__steppers button{display:inline-flex;align-items:center;justify-content:center;width:20px;height:12px;padding:0;border:0;background:transparent;color:var(--co-semantic-text-muted);cursor:pointer}.co-time-field__steppers button:hover{color:var(--co-semantic-text-default)}:host([data-touch]) .co-time-field{min-height:44px;padding:var(--co-spacing-sm) var(--co-spacing-sm2)}:host([data-touch]) .co-time-field__seg{min-width:34px;height:32px;font-size:var(--co-font-size-16)}`;
@@ -309,7 +309,7 @@ const CoTimeField = class {
     }
     render() {
         const t = getDateStrings(this.locale);
-        return (h("div", { key: '782a8fbbbd967cb652ef4ea7d8aea0e2cc273a4b', class: { 'co-time-field': true, 'co-time-field--disabled': this.disabled }, role: "group", "aria-label": this.fieldLabel || t.timeFieldLabel }, h("span", { key: '1f46be0e62e2515d70e079193c1107cfcff35d11', class: "co-time-field__segs" }, this.renderSeg('hour', t), h("span", { key: '9eb83d59c644c113dab23b4af0521a719e43a497', class: "co-time-field__sep", "aria-hidden": "true" }, ":"), this.renderSeg('minute', t), this.hour12 && this.renderSeg('period', t)), h("span", { key: 'e18183e6e92530649a24d0f05bd8f7acb4403a47', class: "co-time-field__steppers" }, h("button", { key: '9a78bb64915a9e83bcbe2b9bf024c239fdefc44c', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(1) }, h("co-icon", { key: 'bbc82c66044327c5c631d9dd601b5232cebb8d75', name: "caret-up", size: 10 })), h("button", { key: 'a20091c8d3aeb118111014f9dc20d6fd517d276c', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(-1) }, h("co-icon", { key: 'cefec7ee6a579373324c4fc20552bf09a9764aa4', name: "caret-down", size: 10 })))));
+        return (h("div", { key: '375a0cd95c1ee8a3b2851f5b327c2d30be9220e7', class: { 'co-time-field': true, 'co-time-field--disabled': this.disabled }, role: "group", "aria-label": this.fieldLabel || t.timeFieldLabel }, h("span", { key: 'c87319645a6394877a35061abdfcef3d15931443', class: "co-time-field__segs" }, this.renderSeg('hour', t), h("span", { key: '15ae5505e3cbff685ae53bf0d8b4a87e9e3c15af', class: "co-time-field__sep", "aria-hidden": "true" }, ":"), this.renderSeg('minute', t), this.hour12 && this.renderSeg('period', t)), h("span", { key: '0ab99ad2423f8ee2330074679019ec0b76e59de0', class: "co-time-field__steppers" }, h("button", { key: 'ae2e8581f575b5d734bfd81c8f2f3d12da5751a0', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(1) }, h("co-icon", { key: '5186d550bd67c6d13d0c60b3a301a58e85effbbf', name: "caret-up", size: 10 })), h("button", { key: 'c8fbf199ab71e6bbd10a1ed570470befbe652f1e', type: "button", tabIndex: -1, "aria-hidden": "true", onMouseDown: (e) => e.preventDefault(), onClick: this.onStepperClick(-1) }, h("co-icon", { key: '19515539265a74798904e01e7692366574a8ca6b', name: "caret-down", size: 10 })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DH5lfRNj.js';
+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)}`;
 
@@ -70,8 +70,8 @@ const CoToast = class {
             'co-toast--progress': hasProgress,
             'co-toast--in': this.entered,
         };
-        const content = (h("div", { key: '5479799fdc6e1290192530a8cbda7308a610821e', class: "co-toast__content" }, h("span", { key: '7d3b310377e78b8e5551cc80f2941aa621ea9bcb', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'f3d0a88cc99ba0884875217454192bf285480b65', class: "co-toast__description" }, this.description))));
-        return (h("div", { key: '1194ce0b8e6b279dcf747467df23903c9f79770d', class: rootClass, part: "toast", role: role }, (drawsCheck || resolvedIcon) && (h("span", { key: '46c9ed361690be9f2ad60235efbefbd9ab30bb0d', class: "co-toast__icon" }, resolvedIcon ? (h("co-icon", { name: resolvedIcon, size: 20 })) : (h("svg", { class: "co-toast__check", viewBox: "0 0 16 16", width: "20", height: "20", "aria-hidden": "true" }, h("path", { d: "M3.5 8.5l3 3 6-6.5", pathLength: "1", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: 'e277b37fccc9c3770e3c102cb0039cd97f83223a', class: "co-toast__body" }, hasProgress ? (h("div", { class: "co-toast__progress" }, h("div", { class: "co-toast__progress-header" }, content, h("span", { class: "co-toast__percent" }, clampedProgress, "%")), h("div", { class: "co-toast__track", part: "track", role: "progressbar", "aria-valuenow": clampedProgress, "aria-valuemin": 0, "aria-valuemax": 100 }, h("span", { class: "co-toast__fill", part: "fill", style: { width: `${clampedProgress}%` } })))) : (content), isStacked && (h("div", { key: '029587321c2cd209fa838c24a435027b7a029a90', class: "co-toast__actions" }, h("slot", { key: 'c937442479f63185efc37428b9c25680ed72248d', name: "action" })))), !isStacked && (h("div", { key: 'b4f2be5646b30478315256d04cf86e4eb939fcb9', class: "co-toast__actions" }, h("slot", { key: '689ef19ee688a4f4abc38b4c8ec7918aed4338bf', name: "action" }))), this.dismissible && (h("button", { key: '7424c7bacc165e5e6828fa28233c3e8151c769f3', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: '64149b651baa0cdd39a4ed17a865d5624872d4a9', name: "x", size: 16 })))));
+        const content = (h("div", { key: '5b3b8dadd6bd941ddf25040eb57312a70e145e70', class: "co-toast__content" }, h("span", { key: '76f47b49b5e901085a5fdcd924070f6c25b0a7bf', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'f229757cd675ae71df88adcab2cec65edbcb0411', class: "co-toast__description" }, this.description))));
+        return (h("div", { key: '1beb456e9e1ddc4be05de95757cd161bd3df913c', class: rootClass, part: "toast", role: role }, (drawsCheck || resolvedIcon) && (h("span", { key: '40a22c4eef4c1c1f0238fb2a37eb1e837a40a571', class: "co-toast__icon" }, resolvedIcon ? (h("co-icon", { name: resolvedIcon, size: 20 })) : (h("svg", { class: "co-toast__check", viewBox: "0 0 16 16", width: "20", height: "20", "aria-hidden": "true" }, h("path", { d: "M3.5 8.5l3 3 6-6.5", pathLength: "1", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '8f540383dea5dc817808be67047b5ea0f41c9516', class: "co-toast__body" }, hasProgress ? (h("div", { class: "co-toast__progress" }, h("div", { class: "co-toast__progress-header" }, content, h("span", { class: "co-toast__percent" }, clampedProgress, "%")), h("div", { class: "co-toast__track", part: "track", role: "progressbar", "aria-valuenow": clampedProgress, "aria-valuemin": 0, "aria-valuemax": 100 }, h("span", { class: "co-toast__fill", part: "fill", style: { width: `${clampedProgress}%` } })))) : (content), isStacked && (h("div", { key: '5c48be7ff509be0656e204b195bc0420b6cc1d13', class: "co-toast__actions" }, h("slot", { key: 'fbc1a01ad868662991dd078873231ea2ee4cdd18', name: "action" })))), !isStacked && (h("div", { key: 'ba679ff96baf4e45c9c662c5b58a0eada104733d', class: "co-toast__actions" }, h("slot", { key: '33cf02247d346fcee55b5eb277d4230452017ee0', name: "action" }))), this.dismissible && (h("button", { key: 'ab7c8d00ea6763a1d7c9a12ae24b3a0c29dbc65f', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: 'b865eb66ffaffe8e1930cbc07a240e47ff276aef', name: "x", size: 16 })))));
     }
 };
 CoToast.style = coToastCss();

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-DH5lfRNj.js';
+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}`;
+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 CoToggleButtonGroup = class {
     constructor(hostRef) {
@@ -9,6 +9,20 @@ const CoToggleButtonGroup = class {
         /** Current selected value(s). Single string or JSON array for multiple. */
         this.value = '';
         this.multiple = false;
+        /** Talla del grupo. El grupo NO la empuja a sus hijos: cada `co-toggle-button`
+         *  sin `size` propio la LEE al montarse (`componentWillLoad`, antes de su
+         *  primer render) y la adopta SOLO en las combinaciones nuevas de la Fase 2
+         *  Cobalt — `variant="soft"` (cualquier talla) o `variant="track"` +
+         *  `size="xs"` — y nunca con un valor fuera de la unión del hijo (`l|m|s|xs`).
+         *  Fuera de eso los hijos la ignoran, como siempre: el host ya usa
+         *  `size="sm"` (fuera de la unión) y `size="s"` con la variante default, y
+         *  esos casos quedan intactos (aditivo). Por qué lo lee el hijo y no lo
+         *  empuja el grupo: `size` del hijo es `reflect: true` y su primer render —
+         *  que escribe el default `m` como atributo — ocurre ANTES del
+         *  `componentDidLoad` del grupo, así que el grupo ya no puede distinguir un
+         *  `m` explícito de uno reflejado. Consecuencia: se adopta una vez, al
+         *  montar; cambiar `size` del grupo después no re-talla a los hijos ya
+         *  montados (aquí solo actualiza la clase `--xs` de la pista). */
         this.size = 'm';
         this.disabled = false;
         this.direction = 'row';
@@ -16,7 +30,9 @@ const CoToggleButtonGroup = class {
         this.fullWidth = false;
         /** 'connected' (default) keeps the seamless dark-fill segmented control.
          *  'track' turns the group into a sunken gray track carrying detached rounded
-         *  pills (white + shadow when selected) — e.g. an icon-only view toggle. */
+         *  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. */
         this.variant = 'connected';
     }
     get selectedValues() {
@@ -61,6 +77,8 @@ const CoToggleButtonGroup = class {
         }
         this.updateChildStates();
     }
+    /** Sincroniza `selected` y `variant` en los hijos. `size` NO se toca acá a
+     *  propósito: lo adopta cada hijo al montarse (ver doc del @Prop `size`). */
     updateChildStates() {
         const sel = this.selectedValues;
         const children = this.el.querySelectorAll('co-toggle-button');
@@ -70,13 +88,16 @@ const CoToggleButtonGroup = class {
         });
     }
     render() {
-        return (h("div", { key: 'ecad72f14ff7abb4ea6d1d13bf99bd112cd50e37', class: {
+        return (h("div", { key: '7e878199a5ac13867f51c16995403b0c57c7a6cb', class: {
                 'co-toggle-button-group': true,
                 [`co-toggle-button-group--${this.direction}`]: true,
                 [`co-toggle-button-group--${this.variant}`]: true,
+                /* Solo 'xs' recibe clase propia por ahora (Task C7: track+xs más
+                   compacto); l/m/s no cambian el default. */
+                '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: '2d6bcc71774fada54426a6fcf0e3eef016f27ea2' })));
+            }, role: "group" }, h("slot", { key: '396df51b811c8841c2e1786be107fcdc1abd4b69' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,17 +1,36 @@
-import { r as registerInstance, c as createEvent, h } from './index-DH5lfRNj.js';
+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-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-font-size-16)}.co-toggle-button--m{height:40px;padding:0 var(--co-spacing-md);font-size:var(--co-font-size-14)}.co-toggle-button--s{height:32px;padding:0 var(--co-spacing-sm2);font-size:var(--co-font-size-14)}.co-toggle-button--xs{height:24px;padding:0 var(--co-spacing-sm);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-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__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-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-semantic-text-default)}:host([variant='track']) .co-toggle-button--selected{background:var(--co-semantic-surface-page);color: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);border-color:var(--co-toggle-pill-border, var(--co-semantic-border-default))}`;
+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-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-font-size-16)}.co-toggle-button--m{height:40px;padding:0 var(--co-spacing-md);font-size:var(--co-font-size-14)}.co-toggle-button--s{height:32px;padding:0 var(--co-spacing-sm2);font-size:var(--co-font-size-14)}.co-toggle-button--xs{height:24px;padding:0 var(--co-spacing-sm);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-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-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-semantic-text-default)}:host([variant='track']) .co-toggle-button--selected{background:var(--co-semantic-surface-page);color: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);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-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-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-color-primary-azul);border-color:transparent}:host([variant='soft']) .co-toggle-button--selected:hover:not(:disabled){background:var(--co-color-celeste-100)}`;
 
+/** 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. */
+const SIZES = new Set(['l', 'm', 's', 'xs']);
+/** true SOLO para `variant="soft"` (cualquier talla) o `variant="track"` +
+ *  `size="xs"` — las combinaciones nuevas de la Fase 2 Cobalt — y con una talla
+ *  dentro de la unión. Fuera de eso el botón ignora la talla del grupo, como
+ *  siempre lo hizo (aditivo: los usos actuales del host quedan intactos). */
+const groupSizeApplies = (variant, size) => SIZES.has(size !== null && size !== void 0 ? size : '') && (variant === 'soft' || (variant === 'track' && size === 'xs'));
 const CoToggleButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.coToggle = createEvent(this, "coToggle", 7);
         this.selected = false;
         this.value = '';
+        /** Talla del botón. Si no se indica (ni atributo ni propiedad) y el botón
+         *  está dentro de un `co-toggle-button-group` con `variant="soft"` (cualquier
+         *  talla) o `variant="track"` + `size="xs"`, adopta la talla del grupo al
+         *  montarse — la lee el propio botón en `componentWillLoad`, ver
+         *  `adoptGroupSize()`. Un `size` propio siempre manda. En cualquier otra
+         *  combinación (`connected`, `track` con `l|m|s`, o una talla fuera de
+         *  `l|m|s|xs`) el grupo no influye, exactamente como antes. La talla se
+         *  adopta UNA vez, al montar: cambiar después el `size` del grupo no
+         *  re-talla a los botones ya montados (el editor lo fija estáticamente). */
         this.size = 'm';
         this.disabled = false;
         /** Visual variant. 'track' renders the button as a detached rounded pill for a
-         *  sunken toggle-button-group track. Normally set by the parent group. */
+         *  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.
+         *  Normally set by the parent group. */
         this.variant = 'connected';
         this.handleClick = () => {
             if (this.disabled)
@@ -20,17 +39,59 @@ const CoToggleButton = class {
             this.coToggle.emit({ value: this.value, selected: this.selected });
         };
     }
+    componentWillLoad() {
+        this.adoptGroupSize();
+    }
+    /** Adopta la talla del grupo contenedor en las combinaciones nuevas de la
+     *  Fase 2 (`soft`, o `track` + `xs`) SOLO si este botón no trae `size`
+     *  propio. Vive en el hijo y corre ANTES del primer render a propósito:
+     *  `size` es `reflect: true`, así que en el primer render Stencil escribe el
+     *  default `m` como atributo del host — y ese render ocurre antes del
+     *  `componentDidLoad` del grupo. Propagar desde el grupo (versión anterior,
+     *  chequeaba `hasAttribute('size')` en el hijo) nunca actuaba en el browser:
+     *  a esa altura el atributo ya estaba y no se puede distinguir un `m`
+     *  explícito de uno reflejado. Los specs en jsdom no lo detectaban porque
+     *  `@stencil/vitest` no siembra el default de un class-field `@Prop`. */
+    adoptGroupSize() {
+        var _a, _b;
+        // Un `size` propio manda: como atributo (el default todavía no se reflejó)
+        // o como propiedad distinta del default (`undefined` cuenta como ausente).
+        const explicitSize = this.el.hasAttribute('size') || (this.size != null && this.size !== 'm');
+        if (explicitSize)
+            return;
+        const grupo = this.el.closest('co-toggle-button-group');
+        if (!grupo)
+            return;
+        // Si el grupo ya está upgradeado responden sus @Prop (el `size` del grupo no
+        // se refleja, así que la propiedad es la única fuente cuando lo setea un
+        // framework); si todavía no, quedan los atributos del markup.
+        const variant = (_a = grupo.variant) !== null && _a !== void 0 ? _a : grupo.getAttribute('variant');
+        const size = (_b = grupo.size) !== null && _b !== void 0 ? _b : grupo.getAttribute('size');
+        if (groupSizeApplies(variant, size))
+            this.size = size;
+    }
     render() {
-        const iconSize = this.variant === 'track' ? 18 : this.size === 'l' ? 20 : this.size === 'xs' ? 14 : 16;
+        // 'track' ignoraba el size y siempre usaba 18 — xs ahora tiene su propia
+        // pastilla compacta (Task C7), el resto de tamaños de track no cambia.
+        const iconSize = this.variant === 'track'
+            ? 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: '11a4789dc751aac946ac5b1ddadfeb18d4da8087', class: {
+        return (h("button", { key: '3828e83bec19f945ca1ee06eb1c9ba5a6744c6c9',
+            /* 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
+               solo para alinearlo a la izquierda). `::part(button)` es el hook.
+               Aditivo: ni el render ni el CSS cambian. */
+            part: "button", class: {
                 'co-toggle-button': true,
                 'co-toggle-button--selected': this.selected,
                 [`co-toggle-button--${this.size}`]: true,
                 'co-toggle-button--disabled': this.disabled,
                 'co-toggle-button--icon-only': !this.label && (!!this.iconLeft || !!this.iconRight),
-            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, h("slot", { key: '8a1b00c785043b986e73c36c152c5e7aa83b6c4d', name: "leading" }), this.iconLeft && h("co-icon", { key: '3e0d9d2491e09abe72acfc8668e57cbf126f92c7', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: '7f17ae9159cf0db65aa2b2b0b5b1c6cc7b3196c6', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '78ea47dc026144ea6be486998be2679c345ab4c6', name: this.iconRight, size: iconSize, weight: iconWeight })));
+            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, h("slot", { key: 'd3406d430fedc50ee415434a5a66f58322f4005d', name: "leading" }), this.iconLeft && h("co-icon", { key: '127a0993ae5ede97325fa357920f6681e2188b22', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: '5219aec0d041d9d1b71496aeb0e608eeca08c4b3', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: 'f90dc967120e060e9de331239e8b531fee859164', name: this.iconRight, size: iconSize, weight: iconWeight })));
     }
+    get el() { return getElement(this); }
 };
 CoToggleButton.style = coToggleButtonCss();
 

package/dist/esm/co-transfer-list.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
 import { i as initOverlayScroll } from './overlayScroll-Bpv882_z.js';
 import './overlayscrollbars-ox7HzCZn.js';
 
@@ -123,11 +123,11 @@ const CoTransferList = class {
         this.osInstances = [];
     }
     render() {
-        return (h("div", { key: 'a66d26c3f7d91cc1ad33a1c347637d6c03e13a2e', class: {
+        return (h("div", { key: '10f7ff92e36b92f0a92fa2a286242f651d7da22c', class: {
                 'co-transfer-list': true,
                 'co-transfer-list--disabled': this.disabled,
                 [`co-transfer-list--${this.status}`]: this.status !== 'default',
-            } }, this.label && h("label", { key: '08cf6b7951890739f73e79edf2dd76a4de5131c3', class: "co-transfer-list__label" }, this.label), h("div", { key: 'e83826673d6ba30e6700bd4401c122820a5db9be', class: "co-transfer-list__body" }, this.renderList(this.leftItems, this.leftChecked, this.toggleLeftCheck, this.leftTitle), h("div", { key: '7e65ed93739f9eed3160d4ff26ff3c3bf8f7f48e', class: "co-transfer-list__actions" }, h("button", { key: 'cc4a2b991dc65f2660e589e7f11122359a465aec', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllRight, "aria-label": "Move all right" }, h("co-icon", { key: 'def57d75c3ed67224f023e6de630de2fa0cb3043', name: "caret-double-right", size: 16 })), h("button", { key: 'd072365087785e09a0a34a3e3f9f2b9f5e56e1df', class: "co-transfer-list__btn", disabled: this.disabled || this.leftChecked.size === 0, onClick: this.moveRight, "aria-label": "Move selected right" }, h("co-icon", { key: 'd298964acff41d2dc6c4d6eb39ae9bcc916973dc', name: "caret-right", size: 16 })), h("button", { key: '5c3cc98de6ee806d35f6369623cbbc7ffdf906b7', class: "co-transfer-list__btn", disabled: this.disabled || this.rightChecked.size === 0, onClick: this.moveLeft, "aria-label": "Move selected left" }, h("co-icon", { key: '04084366aa7437612e8dee522f94266db6bea4cd', name: "caret-left", size: 16 })), h("button", { key: '3fa6e88f7ec9ea49b34d5f18cbccf21124509bff', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllLeft, "aria-label": "Move all left" }, h("co-icon", { key: 'fd0a35d20f5d7a8c1b4fb2010bb82e19cbc07225', name: "caret-double-left", size: 16 }))), this.renderList(this.rightItems, this.rightChecked, this.toggleRightCheck, this.rightTitle)), this.helperText && (h("div", { key: 'd4cca5feb1972a4a43039bf68780e1ef43bba802', class: `co-transfer-list__helper co-transfer-list__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '065ecb392fb716cc2df70eb01993e89f3fa14ad6', name: this.statusIcon, size: 14, weight: "fill", class: "co-transfer-list__helper-icon" }), h("span", { key: '293fd383071786d53318b2f2c2713fed39400a21', class: "co-transfer-list__helper-text" }, this.helperText)))));
+            } }, this.label && h("label", { key: 'da07e59288cfb85b4d95e62aa7f61d65a0ac5931', class: "co-transfer-list__label" }, this.label), h("div", { key: '8d4a921850b838f9096402ba947af8b164eb541e', class: "co-transfer-list__body" }, this.renderList(this.leftItems, this.leftChecked, this.toggleLeftCheck, this.leftTitle), h("div", { key: 'a258db503eb7477c16186ba58755b8696610ffdb', class: "co-transfer-list__actions" }, h("button", { key: '11d8275f690eb58f07b69044fcadb501d520a34b', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllRight, "aria-label": "Move all right" }, h("co-icon", { key: '3a637822c740096295bb4129e9f8366b61fc906c', name: "caret-double-right", size: 16 })), h("button", { key: '2fea7b08d006352a5c5b0e2f46e558bea4448019', class: "co-transfer-list__btn", disabled: this.disabled || this.leftChecked.size === 0, onClick: this.moveRight, "aria-label": "Move selected right" }, h("co-icon", { key: '4f016d94cf4fe7a621decdd630c16d63cd82944d', name: "caret-right", size: 16 })), h("button", { key: 'acf8b07e343c527d231c65dd31ff27b765da2e89', class: "co-transfer-list__btn", disabled: this.disabled || this.rightChecked.size === 0, onClick: this.moveLeft, "aria-label": "Move selected left" }, h("co-icon", { key: '4e2cd858347069f84e2adef89ed8519f70f42b62', name: "caret-left", size: 16 })), h("button", { key: '59c8b06cfcfe5804f73d2c402052e86baae5e2c9', class: "co-transfer-list__btn", disabled: this.disabled, onClick: this.moveAllLeft, "aria-label": "Move all left" }, h("co-icon", { key: '7d00c3cd0866d92ef0d456b419f9b3fe0c25c71e', name: "caret-double-left", size: 16 }))), this.renderList(this.rightItems, this.rightChecked, this.toggleRightCheck, this.rightTitle)), this.helperText && (h("div", { key: '4d54c76de7e18a5a5b5ea40f9b5dea4a5551440e', class: `co-transfer-list__helper co-transfer-list__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '2e1017e680c759d1b67d8b1b03ffbebbfa6d1068', name: this.statusIcon, size: 14, weight: "fill", class: "co-transfer-list__helper-icon" }), h("span", { key: '9533af921d596314d489656706aeecfe004182b1', class: "co-transfer-list__helper-text" }, this.helperText)))));
     }
     get el() { return getElement(this); }
 };