@prolibu-suite/cobalt-core 0.11.0 → 0.11.2

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

@@ -6,8 +6,17 @@ import { getCarouselStrings } from "../../utils/carouselI18n";
  * inertness on each item and translates a flex track to the active index.
  *
  * No v-model in the Vue wrappers — consume with `:value` + `@coSlideChange`.
+ * Wrapper Vue: `CoCarousel` de `@prolibu-suite/cobalt-vue`.
  *
  * @slot - co-carousel-item elements
+ *
+ * @part container - Caja del carrusel (relación de aspecto).
+ * @part viewport - Ventana visible que recorta los slides.
+ * @part track - Tira de slides que se desplaza al activo.
+ * @part arrow-prev - Flecha «anterior».
+ * @part arrow-next - Flecha «siguiente».
+ * @part dots - Grupo de indicadores.
+ * @part dot - Cada indicador (botón que lleva a su slide).
  */
 export class CoCarousel {
     constructor() {
@@ -197,12 +206,15 @@ export class CoCarousel {
         this.restartAutoplay();
     }
     // ── Public methods ──────────────────────────────
+    /** Avanza al slide siguiente (con `loop`, del último vuelve al primero). */
     async next() {
         this.advance(1);
     }
+    /** Retrocede al slide anterior (con `loop`, del primero va al último). */
     async prev() {
         this.advance(-1);
     }
+    /** Va al slide `index` (base 0; se recorta al rango válido). Emite `coSlideChange`. */
     async goTo(index) {
         this.setActive(this.clampIndex(index));
     }
@@ -303,11 +315,11 @@ export class CoCarousel {
         };
         if (this.dragging)
             trackStyle.transition = 'none';
-        return (h(Host, { key: '0a6bcad3e638f000faa62e097ea7ca5ddd4befa2' }, h("div", { key: 'ba81a5bb37400232010808adadc81e5cfe6c269e', class: { 'co-carousel': true, [aspectClass]: true }, part: "container", role: "region", "aria-roledescription": "carousel", "aria-label": s.carouselLabel, tabindex: 0, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut }, h("div", { key: '6cd3d1580bfcbc6cc37f5a6595249d7fa99eec76', class: "co-carousel__viewport", part: "viewport", ref: el => (this.viewportEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, onClickCapture: this.handleClickCapture }, h("div", { key: 'ee2d7b97a3efbf4571544eb05c070df5b766578b', class: "co-carousel__track", part: "track", style: trackStyle, "aria-live": this.rotating ? 'off' : 'polite' }, h("slot", { key: 'bea154687ae5058c2faaab4e5dfbeb620e6cde20', onSlotchange: this.handleSlotChange }))), this.arrows && multi && (h("button", { key: '78a660846e64ba45bb20af846d9a96b6d16f349b', class: { 'co-carousel__arrow': true, 'co-carousel__arrow--prev': true, 'co-carousel__arrow--disabled': !canPrev }, part: "arrow-prev", type: "button", "aria-label": s.prevSlide, disabled: !canPrev, onClick: () => this.advance(-1) }, h("co-icon", { key: '8994f7c1f5ca4d2f980b713686a3646f9da4ac02', name: "caret-left", size: 18, weight: "bold" }))), this.arrows && multi && (h("button", { key: 'abcbe009342b5894fdb8ac21f5999e5acf7e5dbb', class: { 'co-carousel__arrow': true, 'co-carousel__arrow--next': true, 'co-carousel__arrow--disabled': !canNext }, part: "arrow-next", type: "button", "aria-label": s.nextSlide, disabled: !canNext, onClick: () => this.advance(1) }, h("co-icon", { key: 'ca6bb4aadcaa416f72e0b8073cdebc86d1c907a5', name: "caret-right", size: 18, weight: "bold" }))), this.dots && multi && (
+        return (h(Host, { key: '893a30dd314f5d04c78c1824317b80db6d4326d4' }, h("div", { key: '799a7edfbd023adf57ea1e3dfb90fdd8e864954c', class: { 'co-carousel': true, [aspectClass]: true }, part: "container", role: "region", "aria-roledescription": "carousel", "aria-label": s.carouselLabel, tabindex: 0, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut }, h("div", { key: 'd6227b5963125ff1e2f9433d63d6ffb632e2f50a', class: "co-carousel__viewport", part: "viewport", ref: el => (this.viewportEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, onClickCapture: this.handleClickCapture }, h("div", { key: '74b2910ef5d37bd94f054984eb80f090c6a4f878', class: "co-carousel__track", part: "track", style: trackStyle, "aria-live": this.rotating ? 'off' : 'polite' }, h("slot", { key: 'b590ed5dd8ee443cf5875f929280cf860284cf3d', onSlotchange: this.handleSlotChange }))), this.arrows && multi && (h("button", { key: '92d9002c893bd3d200bc290cadb0cdf87fb2a493', class: { 'co-carousel__arrow': true, 'co-carousel__arrow--prev': true, 'co-carousel__arrow--disabled': !canPrev }, part: "arrow-prev", type: "button", "aria-label": s.prevSlide, disabled: !canPrev, onClick: () => this.advance(-1) }, h("co-icon", { key: '8608c83fb246ec45c2f34eb221d1f25dac51c680', name: "caret-left", size: 18, weight: "bold" }))), this.arrows && multi && (h("button", { key: 'd1279fa7a3ebef36f2d590e5834a2b0484c2f6b3', class: { 'co-carousel__arrow': true, 'co-carousel__arrow--next': true, 'co-carousel__arrow--disabled': !canNext }, part: "arrow-next", type: "button", "aria-label": s.nextSlide, disabled: !canNext, onClick: () => this.advance(1) }, h("co-icon", { key: 'cfa98cc4aad1e658e63b7411638522687f6c3650', name: "caret-right", size: 18, weight: "bold" }))), this.dots && multi && (
         // APG grouped-carousel picker pattern: plain always-tabbable
         // buttons in a labelled group (tablist/tab would demand
         // aria-controls + roving tabindex we don't implement).
-        h("div", { key: '7f1d08a6845604507e010db822fbb4ce13ee4904', class: "co-carousel__dots", part: "dots", role: "group", "aria-label": s.pickSlide }, Array.from({ length: this.itemCount }, (_, i) => (h("button", { class: { 'co-carousel__dot': true, 'co-carousel__dot--active': i === this.value }, part: "dot", type: "button", "aria-current": i === this.value ? 'true' : undefined, "aria-label": s.goToSlide.replace('{i}', String(i + 1)), onClick: () => this.setActive(i) }))))))));
+        h("div", { key: '98fbe34ec71504ff2089f380cce0354b52753d08', class: "co-carousel__dots", part: "dots", role: "group", "aria-label": s.pickSlide }, Array.from({ length: this.itemCount }, (_, i) => (h("button", { class: { 'co-carousel__dot': true, 'co-carousel__dot--active': i === this.value }, part: "dot", type: "button", "aria-current": i === this.value ? 'true' : undefined, "aria-label": s.goToSlide.replace('{i}', String(i + 1)), onClick: () => this.setActive(i) }))))))));
     }
     static get is() { return "co-carousel"; }
     static get encapsulation() { return "shadow"; }
@@ -566,7 +578,7 @@ export class CoCarousel {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Avanza al slide siguiente (con `loop`, del \u00FAltimo vuelve al primero).",
                     "tags": []
                 }
             },
@@ -583,7 +595,7 @@ export class CoCarousel {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Retrocede al slide anterior (con `loop`, del primero va al \u00FAltimo).",
                     "tags": []
                 }
             },
@@ -604,7 +616,7 @@ export class CoCarousel {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Va al slide `index` (base 0; se recorta al rango v\u00E1lido). Emite `coSlideChange`.",
                     "tags": []
                 }
             }

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

@@ -1,4 +1,12 @@
 import { h } from "@stencil/core";
+/**
+ * Casilla de verificación con etiqueta, estado indeterminado y variante de chip
+ * de selección (`appearance="overlay"`). Wrapper Vue: `CoCheckbox` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
+ * @part box - La casilla.
+ * @part label - La etiqueta.
+ */
 export class CoCheckbox {
     constructor() {
         /** Whether the checkbox is checked */
@@ -50,18 +58,18 @@ export class CoCheckbox {
         // Only override the fill when a custom color is provided AND the box is "on".
         // Leaving this undefined keeps the default appearance byte-identical to before.
         const boxStyle = this.checkedColor && isOn ? { background: this.checkedColor } : undefined;
-        return (h("div", { key: '9de8d31f441ffebc9b7aeafeb8ad3309b223c70a', class: {
+        return (h("div", { key: '9e2c38b7ae4421165cf8ebea81516a91478b99a1', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
                 'co-checkbox-row--label-xs': this.labelSize === 'xs',
-            }, onClick: this.handleClick }, h("span", { key: 'a8a05c66edf39223dc670f998a526e0fe48fad52', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || this.ariaLabelText || '', "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, class: {
+            }, onClick: this.handleClick }, h("span", { key: '6d7d00ff7624068dda50673b75844f7ac338c6e9', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || this.ariaLabelText || '', "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, class: {
                 'co-checkbox': true,
                 [`co-checkbox--${this.size}`]: true,
                 'co-checkbox--overlay': isOverlay,
                 'co-checkbox--checked': this.checked && !this.indeterminate,
                 'co-checkbox--indeterminate': this.indeterminate,
                 'co-checkbox--disabled': this.disabled,
-            }, style: boxStyle, part: "box" }, h("svg", { key: '45c59e90ec645d1a7585cc78acc932dc4779da05', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'e764cbd5543edab329bc41a55946d6d12d33985a', class: "co-checkbox__check", d: "M3.5 8.5l3 3 6-6.5", pathLength: "1", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'eb20f21d61965c7be426bac5e819e665f58d9549', class: "co-checkbox__dash", d: "M3 8h10", pathLength: "1", "stroke-linecap": "round" }))), this.label && (h("span", { key: '4b7b06bab99f6181ce5670c2bfb694a3ff7fd249', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, style: boxStyle, part: "box" }, h("svg", { key: '2c6377c45aa39658fe85d399d812fb7f32d0a51b', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '0f754ffa9b90acc943bcb9ec354a27596b4b3532', class: "co-checkbox__check", d: "M3.5 8.5l3 3 6-6.5", pathLength: "1", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'beca1dff6db4a2eae3c7c2c25dcd10061fae5f31', class: "co-checkbox__dash", d: "M3 8h10", pathLength: "1", "stroke-linecap": "round" }))), this.label && (h("span", { key: '28f0916e57c3377040ebeb2a901ba1dec491f580', class: "co-checkbox__label", part: "label" }, this.label))));
     }
     static get is() { return "co-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,9 @@
 import { h } from "@stencil/core";
+/**
+ * Grupo de casillas con etiqueta, ayuda y estado de validación: `options`
+ * define las casillas y `value` las marcadas (array). Emite `coChange` con el
+ * array completo. Wrapper Vue: `CoCheckboxGroup` de `@prolibu-suite/cobalt-vue`.
+ */
 export class CoCheckboxGroup {
     constructor() {
         /** Label layout: vertical (label above) or horizontal (label beside) */
@@ -70,11 +75,11 @@ export class CoCheckboxGroup {
         const hasLabels = this.label || this.secondaryLabel;
         const opts = this.parsedOptions;
         const selected = this.selectedValues;
-        return (h("div", { key: 'd3f34e7ee59ebcc1494ee6aabef1e4c476044dbd', class: {
+        return (h("div", { key: '9b4ee043c35d0be7da49ca2881671830d900dcb7', class: {
                 'co-checkbox-group': true,
                 'co-checkbox-group--disabled': this.disabled,
                 [`co-checkbox-group--${this.status}`]: this.status !== 'default',
-            }, role: "group", "aria-label": this.label || '' }, hasLabels && (h("div", { key: 'a47de05988ae37497154fc80e8cbf5f6f62bb1d4', class: "co-checkbox-group__labels" }, this.label && h("span", { key: 'fc39ff62eeea3136584a0667e71d816958a1ed57', class: "co-checkbox-group__label" }, this.label), this.secondaryLabel && (h("span", { key: '205c1cbdbfcba6d882c7f4c27bfd633e55acea0f', class: "co-checkbox-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: '33d6b03de2f2ba30afe1d1865a43ade7b8344f96', class: {
+            }, role: "group", "aria-label": this.label || '' }, hasLabels && (h("div", { key: 'fca5265d4bd96a5792840319443f48f4871f9e10', class: "co-checkbox-group__labels" }, this.label && h("span", { key: 'b53daed7cea22897e978dc83eee817d0b67e73d2', class: "co-checkbox-group__label" }, this.label), this.secondaryLabel && (h("span", { key: '88eb49c68465e27f53f91cdf73d9748effca7d8b', class: "co-checkbox-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'dae5337bf83e5dbc46e0afc6fd6eed5bb4aee6db', class: {
                 'co-checkbox-group__options': true,
                 [`co-checkbox-group__options--${this.direction}`]: true,
             } }, opts.map(opt => {
@@ -89,7 +94,7 @@ export class CoCheckboxGroup {
                     'co-checkbox-group__box--checked': isChecked,
                     'co-checkbox-group__box--disabled': isDisabled,
                 }, role: "checkbox", "aria-checked": String(isChecked), "aria-label": opt.label }), h("span", { class: "co-checkbox-group__option-label" }, opt.label)));
-        })), this.helperText && (h("div", { key: '7ac076bf100f66eb851d7e76e0b052d42fef69f8', class: `co-checkbox-group__helper co-checkbox-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '7a13362e9a77a13ebb1e127ee57c10e7f64110fb', name: this.statusIcon, size: 14, weight: "fill", class: "co-checkbox-group__helper-icon" })), h("span", { key: '44e9f68fd19c5a50affde1eb743c3fc8e5eef8e4', class: "co-checkbox-group__helper-text" }, this.helperText)))));
+        })), this.helperText && (h("div", { key: 'af541135d225b51ad80e39edd3d6947f2567dd75', class: `co-checkbox-group__helper co-checkbox-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '52297bb73168c15af67b65eedaf6349a7c5dd6f3', name: this.statusIcon, size: 14, weight: "fill", class: "co-checkbox-group__helper-icon" })), h("span", { key: '3ebd17867c2d36b0483d7620476bc5502c36fd73', class: "co-checkbox-group__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -231,7 +236,7 @@ export class CoCheckboxGroup {
                     "references": {
                         "CheckboxOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-checkbox-group/co-checkbox-group.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-checkbox-group/co-checkbox-group.tsx",
                             "id": "src/components/co-checkbox-group/co-checkbox-group.tsx::CheckboxOption"
                         }
                     }

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

@@ -1,5 +1,14 @@
 /* co-chip — all variants: filled/outlined, colors, removable, clickable, selected, disabled */
 
+/**
+ * @prop --co-chip-bg: Fondo de la variante `filled`.
+ * @prop --co-chip-color: Color de texto de la variante `filled`.
+ * @prop --co-chip-border: Color del borde de la variante `filled` (default transparente).
+ * @prop --co-chip-max-width: Ancho máximo del chip; el texto se trunca con elipsis (default sin tope).
+ * @prop --co-chip-value-color: Color del sufijo `valueLabel` (default gray-500).
+ * @prop --co-chip-trailing-color: Color del ícono final `trailingIcon` (default: el del texto).
+ */
+
 :host {
   display: inline-flex;
   max-width: var(--co-chip-max-width, none);
@@ -316,11 +325,15 @@ button.co-chip--disabled {
 
 /* ═══════════════════════════════════════════════════════════════
    VARIANT: FILTER — Cloud Drive filter-trigger pill.
-   White pill with an inset hairline ring, a tinted leading icon, a
-   two-tone muted value suffix and a trailing caret.
+   Page-surface pill with an inset hairline ring, a tinted leading icon,
+   a two-tone muted value suffix and a trailing caret.
    Fixed metrics: height 34, padding 0 12, gap 7, font-size 13.5.
    Declared with .co-chip.co-chip--filter so these override the
    size/icon-mode padding + gap rules (equal specificity, later in source).
+   Colours are SEMANTIC tokens (identical to the old primitives in light:
+   surface-page = base-blanco, text-default = base-negro, border-default =
+   opacity-negro-16, border-field = opacity-negro-25, surface-disabled =
+   gray-100) so the pill follows the dark theme instead of staying white.
    ═══════════════════════════════════════════════════════════════ */
 .co-chip.co-chip--filter {
   height: 34px;
@@ -328,31 +341,32 @@ button.co-chip--disabled {
   gap: 7px;
   font-size: 13.5px;
   border-radius: var(--co-border-radius-full);
-  background: var(--co-color-base-blanco, #fff);
-  color: var(--co-color-base-negro, #1f1c1b);
+  background: var(--co-semantic-surface-page, #fff);
+  color: var(--co-semantic-text-default, #1f1c1b);
   border-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-16, rgba(0, 0, 0, 0.16));
+  box-shadow: inset 0 0 0 1px var(--co-semantic-border-default, rgba(0, 0, 0, 0.16));
 }
 
-/* Leading icon (prop- or slot-based) tinted gray-500 in this mode. */
+/* Leading icon (prop- or slot-based) tinted muted in this mode. */
 .co-chip--filter .co-chip__icon-left {
-  color: var(--co-color-gray-500, #888888);
+  color: var(--co-semantic-text-muted, #888888);
 }
 
-/* Trailing caret is a subtle gray-400. */
+/* Trailing caret is a subtle mid gray (reads on both themes; no semantic
+   token sits at gray-400). */
 .co-chip--filter .co-chip__trailing {
   color: var(--co-color-gray-400, #a0a0a0);
 }
 
 .co-chip--filter.co-chip--clickable:hover:not(.co-chip--disabled) {
-  box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-25, rgba(0, 0, 0, 0.25));
+  box-shadow: inset 0 0 0 1px var(--co-semantic-border-field, rgba(0, 0, 0, 0.25));
 }
 
 .co-chip--filter.co-chip--clickable:active:not(.co-chip--disabled) {
-  background: var(--co-color-gray-100, #f6f6f6);
+  background: var(--co-semantic-surface-disabled, #f6f6f6);
 }
 
 /* Open/active trigger tint (consumer toggles `selected` while the menu is open). */
 .co-chip--filter.co-chip--selected {
-  background: var(--co-color-gray-100, #f6f6f6);
+  background: var(--co-semantic-surface-disabled, #f6f6f6);
 }

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

@@ -1,8 +1,21 @@
 import { h } from "@stencil/core";
 /**
+ * Etiqueta compacta para estados, tags, filtros o selecciones: con color
+ * semántico, íconos, punto de color, sufijo de valor («Ordenar: Reciente»),
+ * botón de quitar y modo clickeable/seleccionable. Wrapper Vue: `CoChip` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
  * @slot icon-left  - Icon before label (1nd Icon mode)
  * @slot icon-right - Icon after label (2nd Icon mode)
  * @slot            - Label text
+ *
+ * @part chip - Contenedor del chip.
+ * @part dot - Punto de color inicial (`dot`).
+ * @part icon-left - Ícono o slot de la izquierda.
+ * @part icon-right - Ícono o slot de la derecha.
+ * @part value - Sufijo de valor (`valueLabel`).
+ * @part trailing - Ícono final (`trailingIcon`).
+ * @part remove - Botón × (`removable`).
  */
 export class CoChip {
     constructor() {
@@ -70,7 +83,7 @@ export class CoChip {
         else
             effectiveIconMode = 'none';
         const Tag = this.clickable ? 'button' : 'div';
-        return (h(Tag, { key: '00d8eb125566907af12d288037c9b6129609857f', class: {
+        return (h(Tag, { key: 'a0fef13e5a67b2d8c1ac96576d1f75f5187c70cb', class: {
                 'co-chip': true,
                 [`co-chip--${this.shape}`]: true,
                 [`co-chip--${this.size}`]: true,
@@ -80,7 +93,7 @@ export class CoChip {
                 'co-chip--clickable': this.clickable,
                 'co-chip--disabled': this.disabled,
                 'co-chip--selected': this.selected,
-            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (h("span", { key: 'f9df52bcd104f452ae56aaff384c434eebab7bf8', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: 'f50c4eb609c7302eb7cda669d8b560a8193aa9a0', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: 'a068106737290e16d4ffb0d2b2fdb26562f64987', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: '4f1631db1c7348ae0732574e01b3d5690c5a37c2', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: '10d132f52ad0c32f09c02d3917f3f5af689ff453', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: '0194d3829fcbd9141672d0f63e5a60ee147d154b', name: "icon-left" }))), h("span", { key: 'ee278a1de261e142819f8d3d32b8de45435b41b1', class: "co-chip__label" }, h("slot", { key: 'e28bf7aa97b05669fef495f81373064a3e061736' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: '2436fe42a2373a8edce158b8930bcd9f990abb04', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: '84f726d0b004faff58f75a07efdc5162e0669b78', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '5468eda2f54efc471bd36b1b2544088092d3c97b', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: 'd5fcdba05a10556d915b60abbb5a8bc67a663860', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: 'e04de9508615a06bd232db11720d9f540ec35a0f', name: "icon-right" }))), this.removable && (h("span", { key: '37fe709e4d60790707c2dc88693d4b09523d6516', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: '1a9e734ebd80193f2a79a2f9a2339a17d77c7e49', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: 'd9c5f717252d664f5b352944ebadf7628ee161b5', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: '3f2eee2b995c9f27ea502cf586e204ea78a81cd6', name: this.trailingIcon, size: trailingIconSize, weight: this.iconWeight })))));
+            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (h("span", { key: 'cac1c98fa890bae489af9b3efb4fb3ec0a06d1ca', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: '545dba15817d7375447a0adb1d472b2accf7b878', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: 'a54ecde8516125b1670716ebd8555d3ac6ca24be', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: '0e3174abeb9761a8a2abca7bbd9ebec0bd3e9dea', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: 'cf7a72c01e63140bc22bde8d87841cbb79bb4f4a', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: 'f2398a1b9bb41f1f2dc039303ec0a6b8c8ccfada', name: "icon-left" }))), h("span", { key: 'de70419bb5a522cd5425096f6da19752736d14b8', class: "co-chip__label" }, h("slot", { key: '6bf611ee5235e60514eb2b3f37040183f7e0032c' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: 'bc36276493cd3ff26ce131c85094125b27791028', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: '8d20d206a23ed7109c5cc40b2beb278fd0e89614', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '28cdb555b65fefcf3e3471aea46fe4ec0d2aad18', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: '009206c164ae5d378481e8512fe8e63c921bb57e', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: '8397bf2f3add45386d34b61964fe6ea5ecb05f70', name: "icon-right" }))), this.removable && (h("span", { key: 'bb95705bdb89959b8bc64a5d692d54dcc2387e0b', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: 'a616ebe4d69c08be3bb908e7da1dcdd15a4c257a', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: '3302ddb23482eaeff3a4ba2de38282f423768b2c', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: '34a716149f174722d7b7a5549821a80ee7cdad63', name: this.trailingIcon, size: trailingIconSize, weight: this.iconWeight })))));
     }
     static get is() { return "co-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-color-area/co-color-area.css

@@ -36,6 +36,10 @@
 }
 
 
+/**
+ * @prop --co-color-area-radius: Radio del área (default 8px; default en `:host`, se sobrescribe sobre el elemento).
+ */
+
 /* co-color-area — área saturación/valor del picker de color.
    Caja 236×200 por defecto: ancho fluido y la proporción fija la altura; el
    host puede fijar el ancho y la caja escala. */

package/dist/collection/components/co-color-area/co-color-area.js

@@ -16,7 +16,8 @@ import { clamp, hsvToHex } from "../../utils/hsv";
  * píxel; redondear a enteros dejaría hex inalcanzables). El teclado suma ±1
  * (±10 con Shift) sobre el valor vigente. Quien muestre números redondea.
  *
- * @part thumb - El indicador circular (16 px, anillo blanco + color actual).
+ * @part thumb - El indicador circular (16 px, anillo blanco + color actual). *
+ * Wrapper Vue: `CoColorArea` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoColorArea {
     constructor() {
@@ -166,11 +167,11 @@ export class CoColorArea {
         const s = clamp((_b = this.saturation) !== null && _b !== void 0 ? _b : 100, 0, 100);
         const v = clamp((_c = this.value) !== null && _c !== void 0 ? _c : 100, 0, 100);
         const fill = hsvToHex({ h: hue, s, v });
-        return (h("div", { key: 'e8915d2faeda1cdb28b509b5180b51ac43c5d9ca', class: {
+        return (h("div", { key: '6611eb74820088bdd7fd23a915cc5f0fd4b29f17', class: {
                 'co-color-area': true,
                 'co-color-area--disabled': this.disabled,
                 'co-color-area--dragging': this.dragging,
-            }, style: { '--co-color-area-hue': String(hue) }, role: "slider", tabIndex: this.disabled ? -1 : 0, "aria-label": this.label || undefined, "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": String(Math.round(s)), "aria-valuetext": `S ${Math.round(s)}% V ${Math.round(v)}%`, "aria-disabled": this.disabled ? 'true' : undefined, ref: (el) => (this.areaEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerEnd, onPointerCancel: this.handlePointerEnd, onKeyDown: this.handleKeyDown }, h("div", { key: '9aa7ce683df8b57debdd13c70136d19a53cd4ca0', class: "co-color-thumb co-color-area__thumb", part: "thumb", style: { left: `${s}%`, top: `${100 - v}%`, '--co-color-thumb-fill': fill } })));
+            }, style: { '--co-color-area-hue': String(hue) }, role: "slider", tabIndex: this.disabled ? -1 : 0, "aria-label": this.label || undefined, "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": String(Math.round(s)), "aria-valuetext": `S ${Math.round(s)}% V ${Math.round(v)}%`, "aria-disabled": this.disabled ? 'true' : undefined, ref: (el) => (this.areaEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerEnd, onPointerCancel: this.handlePointerEnd, onKeyDown: this.handleKeyDown }, h("div", { key: '480fedf78cd542849742c351c64f1a1f6ec91cbd', class: "co-color-thumb co-color-area__thumb", part: "thumb", style: { left: `${s}%`, top: `${100 - v}%`, '--co-color-thumb-fill': fill } })));
     }
     static get is() { return "co-color-area"; }
     static get encapsulation() { return "shadow"; }
@@ -309,7 +310,7 @@ export class CoColorArea {
                     "references": {
                         "ColorAreaDetail": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-color-area/co-color-area.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-color-area/co-color-area.tsx",
                             "id": "src/components/co-color-area/co-color-area.tsx::ColorAreaDetail"
                         }
                     }
@@ -330,7 +331,7 @@ export class CoColorArea {
                     "references": {
                         "ColorAreaDetail": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-color-area/co-color-area.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-color-area/co-color-area.tsx",
                             "id": "src/components/co-color-area/co-color-area.tsx::ColorAreaDetail"
                         }
                     }

package/dist/collection/components/co-color-picker/co-color-picker.js

@@ -59,6 +59,8 @@ const flattenGroups = (groups) => groups.reduce((acc, g) => acc.concat(g.items),
  * @event coChange - Emits the committed hex string (e.g. "#0066FF"): pointer
  * release, arrow key, swatch click, paste, and the end of a hex-field edit
  * (blur, Enter or panel close).
+ *
+ * Wrapper Vue: `CoColorPicker` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoColorPicker {
     constructor() {
@@ -995,12 +997,12 @@ export class CoColorPicker {
     render() {
         const hasValue = !!this.value;
         const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
-        return (h("div", { key: 'bdc7487c5b694937aa2ffdb79fd558891a4b6931', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: '34d0e3a9df74d80defd62bee980fe9114cdcd2d4', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '37467a67f8a84fcd229073b214be33e7623dee94', required: this.required }))), h("co-popover", { key: 'f4e7e9364a8ffedfc2fddf7ff88f636e1bb22f68', open: this.isOpen, placement: "bottom-start",
+        return (h("div", { key: '6746d83ad6d123c58a88dd3a236f3288758eb507', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: 'd37d7b2e7b457cc366006e18f5188dd76171c3bb', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: 'dbb125918398dc5d55f9083e88f0f1948281d5b0', required: this.required }))), h("co-popover", { key: '91b03300c502c85e068e28e235feadf06fbbb76c', open: this.isOpen, placement: "bottom-start",
             // Sin `matchWidth`: el panel tiene ancho INTRÍNSECO (grilla de 8
             // swatches fijos de 32px). Copiar el ancho del trigger achica los
             // tracks bajo 32px con un campo angosto (media columna de un modal) y
             // los swatches desbordan el card — guard: panel-width.spec.
-            offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'f25ef2310238bf18c34d0d7aa61f1916d479193e', slot: "trigger", class: "co-color-picker__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-controls": this.isOpen ? CoColorPicker.PANEL_ID : undefined, "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onKeyDown: this.handleTriggerKeyDown }, h("span", { key: '3d8bcd557976d56105790a7158147b5dff2a17e3', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '461087a2cba8edfa74504e332c1a81cb45046821', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: 'aecdd232d82fe98830ca6f5677a034f62783e48e', class: "co-color-picker__panel", id: CoColorPicker.PANEL_ID, role: "dialog", "aria-label": this.label || this.placeholder }, this.renderArea(), this.renderHue(), this.renderSwatches(), this.renderHexRow()))), this.helperText && (h("div", { key: '5aba7ada0642092c743e43321017d812f32316e3', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: '28ce648d02d2e672ce2936000c655b7ea5f6aa7d', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '7545d46b04f19b34c4865f55bd5e7d556514f00a', class: "co-color-picker__helper-text" }, this.helperText)))));
+            offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'fec8eb5f52f4a95c478cee49a1a05b8ca93a40b4', slot: "trigger", class: "co-color-picker__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-controls": this.isOpen ? CoColorPicker.PANEL_ID : undefined, "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onKeyDown: this.handleTriggerKeyDown }, h("span", { key: '648331ab929d1874f09ebd59d722839312434bcd', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '07f235dfd673b4d31f9fb994eccc7e38d1f866ec', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: 'e6ad5d5190d9341afde82de0c8897249e173463e', class: "co-color-picker__panel", id: CoColorPicker.PANEL_ID, role: "dialog", "aria-label": this.label || this.placeholder }, this.renderArea(), this.renderHue(), this.renderSwatches(), this.renderHexRow()))), this.helperText && (h("div", { key: '057dabe6f2fd8853f6a1df6d0c1c8d6574393f45', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: '674e0cf71b0a2d1cc367c929196a7876c23c966c', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '001b3df1f014b0039bfe0cdd588aae91d92a78bd', class: "co-color-picker__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-color-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-color-slider/co-color-slider.js

@@ -19,7 +19,8 @@ const THUMB_SIZE = 16;
  * que el color bajo el thumb es exactamente el valor emitido.
  *
  * @part track - La pista (gradiente de tono o damero + transparente→color).
- * @part thumb - El indicador circular (16 px, anillo blanco + color actual).
+ * @part thumb - El indicador circular (16 px, anillo blanco + color actual). *
+ * Wrapper Vue: `CoColorSlider` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoColorSlider {
     constructor() {
@@ -178,15 +179,15 @@ export class CoColorSlider {
         const value = clamp((_b = this.value) !== null && _b !== void 0 ? _b : 0, 0, max);
         const color = this.color || '#000';
         const isAlpha = channel === 'alpha';
-        return (h("div", { key: 'd5754d3330b2cd2699ee55a00dfd3b464bde1e3b', class: {
+        return (h("div", { key: 'a4ab80a67e0bb20037f48b99cca835d17622a776', class: {
                 'co-color-slider': true,
                 'co-color-slider--disabled': this.disabled,
                 'co-color-slider--dragging': this.dragging,
-            } }, h("div", { key: '65c3e870d834e5bc019f24372e937cb5ae87ca6c', class: {
+            } }, h("div", { key: 'd9dd4a75f7b74e73ddd0da15384566d038fd9eff', class: {
                 'co-color-slider__track': true,
                 'co-color-slider__track--hue': !isAlpha,
                 'co-color-slider__track--alpha': isAlpha,
-            }, part: "track", style: isAlpha ? { '--co-color-slider-color': color } : undefined, role: "slider", tabIndex: this.disabled ? -1 : 0, "aria-label": this.label || undefined, "aria-valuemin": "0", "aria-valuemax": String(max), "aria-valuenow": String(Math.round(value)), "aria-disabled": this.disabled ? 'true' : undefined, ref: (el) => (this.trackEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerEnd, onPointerCancel: this.handlePointerEnd, onKeyDown: this.handleKeyDown }, h("div", { key: '8553027ec2658d42a0f9df1798223a267ee69681', class: "co-color-thumb co-color-slider__thumb", part: "thumb", ref: (el) => (this.thumbEl = el), style: {
+            }, part: "track", style: isAlpha ? { '--co-color-slider-color': color } : undefined, role: "slider", tabIndex: this.disabled ? -1 : 0, "aria-label": this.label || undefined, "aria-valuemin": "0", "aria-valuemax": String(max), "aria-valuenow": String(Math.round(value)), "aria-disabled": this.disabled ? 'true' : undefined, ref: (el) => (this.trackEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerEnd, onPointerCancel: this.handlePointerEnd, onKeyDown: this.handleKeyDown }, h("div", { key: '62866f901b8090289ab48a8d90ad4ee50fea5bb5', class: "co-color-thumb co-color-slider__thumb", part: "thumb", ref: (el) => (this.thumbEl = el), style: {
                 '--co-color-slider-ratio': String(value / max),
                 '--co-color-thumb-fill': this.thumbFill(value, color),
             } }))));
@@ -214,7 +215,7 @@ export class CoColorSlider {
                     "references": {
                         "ColorSliderChannel": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-color-slider/co-color-slider.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-color-slider/co-color-slider.tsx",
                             "id": "src/components/co-color-slider/co-color-slider.tsx::ColorSliderChannel"
                         }
                     }