@prolibu-suite/cobalt-core 0.11.6 → 0.11.8

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

@@ -76,7 +76,7 @@ export class CoTextarea {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
         const isOverLimit = this.maxLength != null && this.charCount > this.maxLength;
         const statusClass = this.status !== 'default' ? `co-textarea--${this.status}` : '';
-        return (h("div", { key: 'e5e01322a905a357de6f2d509b7aca83cea49047', class: {
+        return (h("div", { key: '83ba9b546aafdd51bcd45a9028cd344c72b2e34c', class: {
                 'co-textarea': true,
                 'co-textarea--disabled': this.disabled,
                 'co-textarea--focused': this.hasFocus,
@@ -85,13 +85,13 @@ export class CoTextarea {
                 [`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/collection/components/co-tile/co-tile.js

@@ -66,7 +66,7 @@ export class CoTile {
         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))));
     }
     static get is() { return "co-tile"; }
     static get encapsulation() { return "shadow"; }

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

@@ -318,7 +318,7 @@ export class CoTimeField {
     }
     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 })))));
     }
     static get is() { return "co-time-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -55,9 +55,10 @@
   padding-top: 2px;
 }
 
-/* Progress icon is always the azul upload accent */
+/* Progress icon is always the azul upload accent. Glifo → text-link (= primary-azul en claro;
+   en oscuro el azul legible sobre gray-800). */
 .co-toast--progress .co-toast__icon {
-  color: var(--co-color-primary-azul, #2563eb);
+  color: var(--co-semantic-text-link, var(--co-color-primary-azul, #2563eb));
 }
 
 .co-toast__body {
@@ -137,44 +138,51 @@
 /* ─── Semantic variants ──────────────────────────────────────────────
  * Per Figma: tinted surface + saturated text/icon + filled dismiss circle
  * in the variant color with white X.
- * Neutral keeps the base (clean white) design.                          */
+ * Neutral keeps the base (clean white) design.
+ *
+ * Superficie y tinta van por semánticos que giran con el tema (D4): en claro
+ * surface-{estado} = status-bg-* y text-{estado} = status-* (lo de siempre);
+ * en oscuro, tinte oscuro con tinta clara — el pastel fijo era una caja clara
+ * en la app oscura. El círculo del ✕ es RELLENO: queda en status-* con la X
+ * blanca fija en ambos temas. warning = familia review (text-warning en claro
+ * = status-review, surface-warning = status-bg-review).                 */
 
 .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-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-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-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-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-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-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-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);
 }
@@ -205,7 +213,8 @@
   font-weight: 400;
   line-height: 1.25;
   letter-spacing: var(--co-font-letter-spacing-body);
-  color: var(--co-color-gray-500, #888888);
+  /* text-muted: en claro gray-550 (cambio aprobado de contraste), en oscuro gray-500. */
+  color: var(--co-semantic-text-muted, var(--co-color-gray-500, #888888));
   font-variant-numeric: tabular-nums;
 }
 
@@ -214,7 +223,9 @@
   height: 6px;
   margin-top: 9px;
   border-radius: 9999px;
-  background: var(--co-color-gray-100, #f6f6f6);
+  /* surface-control = gray-100 en claro; en oscuro, gray-700 (el gris claro fijo era una
+     franja blanca sobre el toast oscuro). La barra de relleno sigue azul. */
+  background: var(--co-semantic-surface-control, var(--co-color-gray-100, #f6f6f6));
   overflow: hidden;
 }
 

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

@@ -189,7 +189,7 @@ export class CoToast {
                     "references": {
                         "CoToastActionsLayout": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-toast/co-toast.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-toast/co-toast.tsx",
                             "id": "src/components/co-toast/co-toast.tsx::CoToastActionsLayout"
                         }
                     }
@@ -215,7 +215,7 @@ export class CoToast {
                     "references": {
                         "CoToastVariant": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-toast/co-toast.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-toast/co-toast.tsx",
                             "id": "src/components/co-toast/co-toast.tsx::CoToastVariant"
                         }
                     }

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

@@ -261,3 +261,50 @@
 :host([variant='soft']) .co-toggle-button--selected:hover:not(:disabled) {
   background: var(--co-color-celeste-100);
 }
+
+/* Pill — chips de filtro del Figma (página Academy): pastillas sueltas de 40px,
+   la seleccionada en la superficie inversa. Todo semántico: gira en oscuro. */
+: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));
+}
+
+/* Oscuro: el par celeste-100/primary-azul era una pastilla CLARA dentro de la app oscura. Con
+   light-dark() la pastilla y la tinta giran juntas (claro = celeste-100 + azul primitivo, exactos;
+   oscuro = text-link al 18% sobre la página + text-link, 5,2:1). Todo dentro de @supports: sin
+   light-dark() (Safari <17.5) la declaración con var() quedaría inválida en valor computado
+   (fondo transparente) y una tinta que gira sobre el pastel fijo daría 2,7:1 — ahí se queda el
+   par de siempre. */
+@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)));
+  }
+}

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

@@ -40,6 +40,8 @@ export class CoToggleButton {
         /** 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 = () => {
@@ -87,7 +89,7 @@ export class CoToggleButton {
             ? 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
@@ -99,7 +101,7 @@ export class CoToggleButton {
                 [`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 })));
     }
     static get is() { return "co-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -256,15 +258,15 @@ export class CoToggleButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'connected' | 'track' | 'soft'",
-                    "resolved": "\"connected\" | \"soft\" | \"track\"",
+                    "original": "'connected' | 'track' | 'soft' | 'pill'",
+                    "resolved": "\"connected\" | \"pill\" | \"soft\" | \"track\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual variant. 'track' renders the button as a detached rounded pill for a\nsunken toggle-button-group track. 'soft' renders it as a separated gray-100\nchip whose selected state uses the celeste-100/primary-azul accent pair.\nNormally set by the parent group."
+                    "text": "Visual variant. 'track' renders the button as a detached rounded pill for a\nsunken toggle-button-group track. 'soft' renders it as a separated gray-100\nchip whose selected state uses the celeste-100/primary-azul accent pair.\n'pill' renders a standalone 40px pill on the control surface (Figma filter\nchips); the selected chip switches to the inverse surface (black in light).\nNormally set by the parent group."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -124,3 +124,15 @@
 .co-toggle-button-group--soft ::slotted(co-toggle-button) {
   margin: 0 !important;
 }
+
+/* Pill variant — chips de filtro sueltos (Figma, página Academy): sin costura
+   que achatar (cada pastilla es redonda por su cuenta) y con wrap para una
+   fila de filtros que no entra completa. */
+.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;
+}

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

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 /**
  * Grupo de `co-toggle-button` que coordina la selección: única (default) o
- * `multiple`. `variant` elige el estilo (`connected`, `track`, `soft`) y se
- * propaga a los botones. Wrapper Vue: `CoToggleButtonGroup` de
+ * `multiple`. `variant` elige el estilo (`connected`, `track`, `soft`, `pill`) y
+ * se propaga a los botones. Wrapper Vue: `CoToggleButtonGroup` de
  * `@prolibu-suite/cobalt-vue`.
  */
 export class CoToggleButtonGroup {
@@ -36,7 +36,9 @@ export class CoToggleButtonGroup {
          *  '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() {
@@ -92,7 +94,7 @@ export class CoToggleButtonGroup {
         });
     }
     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,
@@ -101,7 +103,7 @@ export class CoToggleButtonGroup {
                 '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' })));
     }
     static get is() { return "co-toggle-button-group"; }
     static get encapsulation() { return "shadow"; }
@@ -241,15 +243,15 @@ export class CoToggleButtonGroup {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'connected' | 'track' | 'soft'",
-                    "resolved": "\"connected\" | \"soft\" | \"track\"",
+                    "original": "'connected' | 'track' | 'soft' | 'pill'",
+                    "resolved": "\"connected\" | \"pill\" | \"soft\" | \"track\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "'connected' (default) keeps the seamless dark-fill segmented control.\n'track' turns the group into a sunken gray track carrying detached rounded\npills (white + shadow when selected) \u2014 e.g. an icon-only view toggle.\n'soft' separates each button into its own gray-100 chip (gap between them);\nthe selected chip gets the celeste-100/primary-azul accent pair."
+                    "text": "'connected' (default) keeps the seamless dark-fill segmented control.\n'track' turns the group into a sunken gray track carrying detached rounded\npills (white + shadow when selected) \u2014 e.g. an icon-only view toggle.\n'soft' separates each button into its own gray-100 chip (gap between them);\nthe selected chip gets the celeste-100/primary-azul accent pair.\n'pill' separa cada bot\u00F3n en una pastilla de 40px; la seleccionada va en la\nsuperficie inversa."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { computePosition, findScrollParents, getOffsetAncestor } from "../../utils/positioning";
+import { isPopoverOpen } from "../../utils/popoverApi";
 /**
  * Globo de ayuda que aparece al pasar el mouse o enfocar el control envuelto.
  * Es la forma de rotular un control de solo ícono (en lugar del `title`
@@ -144,7 +145,7 @@ export class CoTooltip {
             // top layer (Popover API), `position:fixed` resolves against the viewport
             // regardless of any transformed/filtered ancestor — so skip compensation
             // (it would double-shift). Only applies in the no-Popover-API fallback.
-            const promoted = this.panelEl.matches(':popover-open');
+            const promoted = isPopoverOpen(this.panelEl);
             if (!promoted) {
                 if (!this.offsetAncestorComputed) {
                     this.cachedOffsetAncestor = getOffsetAncestor(this.panelEl);
@@ -244,7 +245,7 @@ export class CoTooltip {
         if (!el || typeof el.showPopover !== 'function')
             return;
         try {
-            if (!el.matches(':popover-open'))
+            if (!isPopoverOpen(el))
                 el.showPopover();
         }
         catch (_a) {
@@ -279,7 +280,7 @@ export class CoTooltip {
     // ── Render ─────────────────────────────────────────────────
     render() {
         const side = this.actualPlacement.split('-')[0];
-        return (h("div", { key: '53c8dbd21619fd8caa4105b86b4b1765c2361252', class: "co-tooltip" }, h("div", { key: 'f9e5e3b352b37c69a67538c6db3d10f9fc945976', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onPointerDown: this.handlePointerDown, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: '067ac53e5b491c7990acfa7c236ae2090a6657fc' })), (this.visible || this.closing) && this.content && (h("div", { key: '42436edfbd802bfd8c23dea5b8cfdd290fa150c7', id: "tooltip-panel", class: {
+        return (h("div", { key: '2254aedec8e6f6f5d2a5eb8421474d367bf88618', class: "co-tooltip" }, h("div", { key: '8e165c1e70c2147924f125b48c893a92ec23e6c7', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onPointerDown: this.handlePointerDown, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: 'c5cf8e75b1be170ed3cd7193677779e426b2eb90' })), (this.visible || this.closing) && this.content && (h("div", { key: '181da8ed7444cbeefecf4282e267737593c8be0b', id: "tooltip-panel", class: {
                 'co-tooltip__panel': true,
                 [`co-tooltip__panel--${side}`]: true,
                 'co-tooltip__panel--closing': this.closing,
@@ -292,7 +293,7 @@ export class CoTooltip {
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: '7520aaa3245fea55a7fcac31f33c56247b1fb5d8', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: 'd3797d1c3a31c64cb30d4d8f448204e3a9f8c017', class: "co-tooltip__content" }, this.content), this.shortcut && h("co-kbd", { key: '01354b1fd110de3000d48ad9eaef0e3329a64e48', keys: this.shortcut, surface: "dark", size: "xs" })))));
+            }, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: '526fbe6d0317d185491a5e564739c5f2e793688a', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: '0a09d46f957d3231ee1584565acc815501ab1fbc', class: "co-tooltip__content" }, this.content), this.shortcut && h("co-kbd", { key: '15a382aa3e6d5547f8450389faa5360e2ee5ecac', keys: this.shortcut, surface: "dark", size: "xs" })))));
     }
     static get is() { return "co-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-transfer-list/co-transfer-list.css

@@ -750,9 +750,11 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   --os-padding-axis: 2px;
   --os-track-bg: transparent;
   --os-handle-border-radius: var(--co-border-radius-full);
-  --os-handle-bg: var(--co-color-opacity-negro-16);
-  --os-handle-bg-hover: var(--co-color-opacity-negro-25);
-  --os-handle-bg-active: var(--co-color-opacity-negro-50);
+  /* Asa por bordes semánticos (negro-16/25/50 en claro, idénticos): opacity-negro no gira y en
+     oscuro el asa era invisible. Mismo molde que el scroll del panel de co-select. */
+  --os-handle-bg: var(--co-semantic-border-default);
+  --os-handle-bg-hover: var(--co-semantic-border-field);
+  --os-handle-bg-active: var(--co-semantic-border-strong);
   --os-handle-min-size: 24px;
 }
 
@@ -869,17 +871,19 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   line-height: 1;
 }
 
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
 .co-transfer-list__helper--error .co-transfer-list__helper-icon,
-.co-transfer-list__helper--error .co-transfer-list__helper-text { color: var(--co-semantic-status-error); }
+.co-transfer-list__helper--error .co-transfer-list__helper-text { color: var(--co-semantic-text-error, var(--co-semantic-status-error)); }
 
 .co-transfer-list__helper--success .co-transfer-list__helper-icon,
-.co-transfer-list__helper--success .co-transfer-list__helper-text { color: var(--co-semantic-status-success); }
+.co-transfer-list__helper--success .co-transfer-list__helper-text { color: var(--co-semantic-text-success, var(--co-semantic-status-success)); }
 
 .co-transfer-list__helper--warning .co-transfer-list__helper-icon,
-.co-transfer-list__helper--warning .co-transfer-list__helper-text { color: var(--co-color-status-review); }
+.co-transfer-list__helper--warning .co-transfer-list__helper-text { color: var(--co-semantic-text-warning, var(--co-color-status-review)); }
 
 .co-transfer-list__helper--info .co-transfer-list__helper-icon,
-.co-transfer-list__helper--info .co-transfer-list__helper-text { color: var(--co-semantic-status-info); }
+.co-transfer-list__helper--info .co-transfer-list__helper-text { color: var(--co-semantic-text-info, var(--co-semantic-status-info)); }
 
 /* ── Disabled global ────────────────────────────────────────── */
 .co-transfer-list--disabled .co-transfer-list__panel {
@@ -892,7 +896,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 }
 
 /* ── Status borders ─────────────────────────────────────────── */
-.co-transfer-list--error .co-transfer-list__panel { border-color: var(--co-semantic-status-error); }
+/* Borde de error de CAMPO por --co-semantic-border-error: gira con el tema (status-error es
+   relleno fijo y como trazo en oscuro daba 2,94:1). En claro vale status-error (idéntico).
+   Fallback: la primitiva de hoy, hasta publicar tokens. */
+.co-transfer-list--error .co-transfer-list__panel { border-color: var(--co-semantic-border-error, var(--co-semantic-status-error)); }
 .co-transfer-list--success .co-transfer-list__panel { border-color: var(--co-semantic-status-success); }
 .co-transfer-list--warning .co-transfer-list__panel { border-color: var(--co-color-status-review); }
 .co-transfer-list--info .co-transfer-list__panel { border-color: var(--co-semantic-status-info); }

package/dist/collection/components/co-transfer-list/co-transfer-list.js

@@ -214,7 +214,7 @@ export class CoTransferList {
                     "references": {
                         "TransferOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-transfer-list/co-transfer-list.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-transfer-list/co-transfer-list.tsx",
                             "id": "src/components/co-transfer-list/co-transfer-list.tsx::TransferOption"
                         }
                     }

package/dist/collection/components/co-tree-item/co-tree-item.js

@@ -243,7 +243,7 @@ export class CoTreeItem {
                     "references": {
                         "TreeItemSelection": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-tree-item/co-tree-item.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-tree-item/co-tree-item.tsx",
                             "id": "src/components/co-tree-item/co-tree-item.tsx::TreeItemSelection"
                         }
                     }
@@ -269,7 +269,7 @@ export class CoTreeItem {
                     "references": {
                         "TreeItemSize": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-tree-item/co-tree-item.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-tree-item/co-tree-item.tsx",
                             "id": "src/components/co-tree-item/co-tree-item.tsx::TreeItemSize"
                         }
                     }

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

@@ -833,14 +833,14 @@ export class CoVideo {
     // ═══════════════════════════════════════════════════
     render() {
         const aspectClass = `co-video--${this.aspectRatio.replace(':', '-')}`;
-        return (h(Host, { key: 'd2f25697003337a41f2c6ac1f8b52b82c8341731' }, h("div", { key: 'b656b85d82072035f31358820db8c61a2db4cbbc', class: {
+        return (h(Host, { key: '427e45bb23b04ee57c9889ba9e465792cee33cb8' }, h("div", { key: 'b61ca55ad1fc9d0826d2f518f40e473fe26228ff', class: {
                 'co-video': true,
                 [aspectClass]: true,
                 [`co-video--rounded-${this.rounded}`]: true,
                 'co-video--disabled': this.disabled,
                 'co-video--fullscreen': this.isFullscreen,
                 'co-video--playing': this.isPlaying,
-            }, part: "container", ref: el => (this.containerEl = el), role: "region", "aria-label": this.t.player, tabindex: 0, onKeyDown: this.handleKeyDown, onMouseMove: this.handleContainerMouseMove, onMouseLeave: this.handleContainerMouseLeave, onTouchStart: this.handleContainerTouchStart }, h("video", { key: '960e58a18058da5840fdbbdaf32a01afd1db06f9', ref: el => (this.videoEl = el), class: "co-video__native", part: "video", src: this.src || undefined, poster: undefined, preload: this.preload, loop: this.loop, playsinline: true, tabindex: -1, controlsList: this.allowDownload ? undefined : 'nodownload' }), this.renderPoster(), this.renderLoader(), this.renderBigPlayButton(), this.renderError(), h("div", { key: '4a772011fe579f90d3befe3ad925026835cece73', class: "co-video__click-area", onClick: this.handleVideoAreaClick }), this.renderControls())));
+            }, part: "container", ref: el => (this.containerEl = el), role: "region", "aria-label": this.t.player, tabindex: 0, onKeyDown: this.handleKeyDown, onMouseMove: this.handleContainerMouseMove, onMouseLeave: this.handleContainerMouseLeave, onTouchStart: this.handleContainerTouchStart }, h("video", { key: 'ee0a3135f7e8cce1648226ba8541bc98a504edca', ref: el => (this.videoEl = el), class: "co-video__native", part: "video", src: this.src || undefined, poster: undefined, preload: this.preload, loop: this.loop, playsinline: true, tabindex: -1, controlsList: this.allowDownload ? undefined : 'nodownload' }), this.renderPoster(), this.renderLoader(), this.renderBigPlayButton(), this.renderError(), h("div", { key: 'd2101a72f2d3e9a4abf6009f5e470e2f474b7b5d', class: "co-video__click-area", onClick: this.handleVideoAreaClick }), this.renderControls())));
     }
     static get is() { return "co-video"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/amountText.js

@@ -17,8 +17,12 @@
  */
 const MAX_INTEGER_DIGITS = 15;
 const MAX_DECIMAL_DIGITS = 8;
+/**
+ * Además del tope, la parte entera pierde sus ceros a la izquierda (dejando UNO si es toda
+ * ceros): tipear sobre un campo en 0 daba «050,000». Vale para tipeo y pegado — ambos pasan acá.
+ */
 const capDigits = (integer, decimals) => ({
-    integer: integer.slice(0, MAX_INTEGER_DIGITS),
+    integer: integer.replace(/^0+(?=\d)/, '').slice(0, MAX_INTEGER_DIGITS),
     decimals: decimals.slice(0, MAX_DECIMAL_DIGITS),
 });
 /**

package/dist/collection/utils/color.js

@@ -132,7 +132,41 @@ export function luminance(hex) {
     const c = parseHex(hex);
     return c ? luminanceRgb(c) : 0;
 }
-/** Returns true when the color is perceptually light (needs dark foreground). */
+/**
+ * Luminancia de la tinta oscura que el DS pone sobre un color propio
+ * (`--co-color-base-negro` #1F1C1B: chips de relleno, eventos del calendario).
+ */
+const DARK_INK_LUMINANCE = luminance('#1F1C1B');
+/**
+ * Cruce WCAG de la tinta: la luminancia de fondo donde la tinta oscura del DS
+ * y la blanca contrastan IGUAL — `(L + 0,05) / (Ln + 0,05) = 1,05 / (L + 0,05)`
+ * → L ≈ 0,205 con base-negro (0,179 sería con #000 puro; con base-negro ese
+ * tramo, p.ej. el rojo #EB1E1E, quedaba PEOR con tinta oscura: 3,8 vs 4,4:1).
+ * Por encima, la tinta oscura contrasta más que la blanca.
+ */
+export const INK_CROSSOVER_LUMINANCE = Math.sqrt(1.05 * (DARK_INK_LUMINANCE + 0.05)) - 0.05;
+/**
+ * True cuando el color pide tinta OSCURA encima (avatar, chip de relleno,
+ * swatch). 2026-09-27: el umbral era L > 0,4 y los tonos medios (verde de
+ * marca, naranja, celeste) salían con tinta blanca a 2,8–3,3:1 cuando la negra
+ * daba 6–7:1. Ahora es el cruce WCAG (`INK_CROSSOVER_LUMINANCE`), el mismo
+ * criterio que `readableTextToken` usa en los chips del calendario.
+ */
 export function isLightColor(hex) {
-    return luminance(hex) > 0.4;
+    return luminance(hex) > INK_CROSSOVER_LUMINANCE;
+}
+/**
+ * Cruce WCAG con tinta NEGRA PURA opaca (#000, L = 0): `(L + 0,05) / 0,05 =
+ * 1,05 / (L + 0,05)` → L = √(1,05·0,05) − 0,05 ≈ 0,179. En el cruce ambas
+ * tintas dan 4,58:1, así que eligiendo la mejor nunca se baja de AA.
+ */
+export const INK_CROSSOVER_BLACK = Math.sqrt(1.05 * 0.05) - 0.05;
+/**
+ * True cuando, sobre este color, el #000 opaco contrasta más que el blanco.
+ * Para tintas que usan negro PURO (iniciales de co-avatar); las que usan
+ * base-negro siguen con `isLightColor`. Auditoría 2026-09-27 (L8): en la
+ * franja L 0,18-0,21 el avatar quedaba a 4,21-4,43:1.
+ */
+export function prefersBlackInk(hex) {
+    return luminance(hex) > INK_CROSSOVER_BLACK;
 }

package/dist/collection/utils/eventColor.js

@@ -5,6 +5,7 @@
  * hex — es la regla del design system. El cálculo de contraste necesita un color
  * REAL, así que el token se resuelve contra el host antes de medir luminancia.
  */
+import { INK_CROSSOVER_LUMINANCE, luminanceRgb } from "./color";
 /** Cache token→hex. La clave incluye el tema: light y dark pueden resolver
  *  distinto el MISMO token, y servir el valor viejo daría texto ilegible. */
 const RESOLVED = new Map();
@@ -31,7 +32,9 @@ export function resolveCssColor(host, value) {
     return resolved;
 }
 /**
- * Token de color de texto legible sobre `bg` (luminancia YIQ), o `''` cuando el
+ * Token de color de texto legible sobre `bg` (cruce WCAG, mismo criterio que
+ * `isLightColor`; antes YIQ ≥ 150, que dejaba el naranja y el verde de marca
+ * con tinta blanca a < 3,5:1), o `''` cuando el
  * color no se puede medir — en ese caso el llamador NO debe escribir la
  * variable: pisarla con un `var(--co-cal-event-text)` la vuelve
  * AUTORREFERENTE, la declaración se invalida y el texto termina heredando el
@@ -47,6 +50,7 @@ export function readableTextToken(host, bg) {
     const b = parseInt(full.slice(4, 6), 16);
     if ([r, g, b].some((n) => Number.isNaN(n)))
         return '';
-    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
-    return yiq >= 150 ? 'var(--co-cal-event-text-dark)' : 'var(--co-cal-event-text-light)';
+    return luminanceRgb({ r, g, b }) > INK_CROSSOVER_LUMINANCE
+        ? 'var(--co-cal-event-text-dark)'
+        : 'var(--co-cal-event-text-light)';
 }

package/dist/collection/utils/fieldChip.js

@@ -1,2 +1,2 @@
 import { h } from "@stencil/core";
-export const FieldChip = ({ baseClass, label, modifiers = {}, style, title, key, onRemove, onChipDblClick }, children) => (h("span", { class: Object.assign({ [baseClass]: true }, modifiers), style: style, title: title, key: key, onDblClick: onChipDblClick }, children, h("span", { class: `${baseClass}-label` }, label), onRemove && (h("button", { class: `${baseClass}-remove`, type: "button", tabIndex: -1, onClick: onRemove }, h("co-icon", { name: "x-circle", weight: "fill", size: 16 })))));
+export const FieldChip = ({ baseClass, label, modifiers = {}, style, title, key, onRemove, onChipDblClick, onEdit, editLabel }, children) => (h("span", { class: Object.assign({ [baseClass]: true }, modifiers), style: style, title: title, key: key, onDblClick: onChipDblClick }, onEdit && (h("button", { class: `${baseClass}-edit`, type: "button", tabIndex: -1, title: editLabel || undefined, "aria-label": editLabel || undefined, onClick: onEdit }, h("co-icon", { name: "pencil-simple", size: 14 }))), children, h("span", { class: `${baseClass}-label` }, label), onRemove && (h("button", { class: `${baseClass}-remove`, type: "button", tabIndex: -1, onClick: onRemove }, h("co-icon", { name: "x-circle", weight: "fill", size: 16 })))));