@prolibu-suite/cobalt-core 0.11.0 → 0.11.1

package/dist/collection/components/co-calendar-timegrid/co-calendar-timegrid.js

@@ -14,26 +14,43 @@ const DRAG_THRESHOLD_PX = 5;
  * `dates` = 7 day-keys (week) or 1 (day). Presentation + interaction only; the
  * host owns data (CONTROLLED). All instant math is delegated to the engine — the
  * only timezone boundary is the `timeZone` prop (wall-clock render).
+ *
+ * Es la vista Semana/Día que compone `co-event-calendar`; se usa directo solo
+ * para una grilla horaria propia. Sus eventos NO burbujean ni cruzan el shadow
+ * DOM: se escuchan sobre el propio elemento. Wrapper Vue: `CoCalendarTimegrid`
+ * de `@prolibu-suite/cobalt-vue`.
  */
 export class CoCalendarTimegrid {
     constructor() {
+        /** Eventos ya normalizados por el motor (`@prolibu-suite/cobalt-calendar-utils`); propiedad JS. */
         this.events = [];
         /** Visible day keys "YYYY-MM-DD" (7 = week, 1 = day). */
         this.dates = [];
+        /** Locale BCP-47 de las cabeceras de día y las etiquetas de hora. */
         this.locale = 'es-CO';
+        /** Permite mover y redimensionar eventos arrastrando (salvo los que traen `editable: false`); emite `coEventDrop`. */
         this.editable = true;
+        /** Permite seleccionar un rango en un área vacía para crear; emite `coRangeSelect`. */
         this.selectable = true;
+        /** Minutos por fila de la grilla (default 15); también el paso del teclado. */
         this.slotMinutes = 15;
+        /** Minutos a los que se ajustan arrastres y selecciones (default 15). */
         this.snapMinutes = 15;
+        /** Duración en minutos del rango creado con un click simple (default 60). */
         this.defaultDurationMinutes = 60;
+        /** Hora `HH:mm` a la que scrollea la grilla al montar (default 07:00). */
         this.scrollTime = '07:00';
+        /** Línea de «ahora» en la columna del día actual. */
         this.nowIndicator = true;
         /** Cargando: en vez de los eventos pinta bloques skeleton en las columnas.
          *  La grilla (eje de horas, líneas, cabecera de días, franja de todo-el-día)
          *  se mantiene: lo único que todavía no se sabe son los eventos. */
         this.loading = false;
+        /** Franja superior de eventos de todo el día. */
         this.allDaySlot = true;
+        /** Primera hora visible `HH:mm` (default 00:00). */
         this.minTime = '00:00';
+        /** Última hora visible `HH:mm` (default 24:00). */
         this.maxTime = '24:00';
         /** Minute of "now" for the indicator; refreshed on a 60s timer. */
         this.nowMinutes = 0;
@@ -704,11 +721,11 @@ export class CoCalendarTimegrid {
             '--co-cal-hour-h': `calc(${60 / this.slotM} * var(--co-cal-slot-h))`,
             '--co-cal-hour-offset': `calc(${((60 - (this.minM % 60)) % 60) / this.slotM} * var(--co-cal-slot-h))`,
         };
-        return (h("div", { key: '359362b29a9241b51f752889dc4021b5cd01e85a', class: "tg", tabIndex: 0, onKeyDown: this.handleKeyDown, ref: (el) => (this.rootEl = el) }, h("div", { key: '09c9b5330ccb8e43dda4e08f623ee6a17f842472', class: "tg__head" }, h("div", { key: 'f071542e19332046fb8c7142c85992ce54ba1884', class: "tg__head-spacer" }), h("div", { key: '843fbe8e97a99aea58e79b95b508fa80782a3bd9', class: "tg__head-days", style: { gridTemplateColumns: colsTemplate } }, dates.map((d) => {
+        return (h("div", { key: '55c583abdd12ac65d8188a8f9d4f0448e4fcf5b7', class: "tg", tabIndex: 0, onKeyDown: this.handleKeyDown, ref: (el) => (this.rootEl = el) }, h("div", { key: '33fa43418fdff096918441e6a2fdbf1d647980ec', class: "tg__head" }, h("div", { key: '2c4134daefc3cb99aa4965787c11318be9f27d40', class: "tg__head-spacer" }), h("div", { key: '0b6c10bbfb8b91723d62f05f1387d8c0513d7b09', class: "tg__head-days", style: { gridTemplateColumns: colsTemplate } }, dates.map((d) => {
             const ymd = parseISO(d);
             const dow = utcDayOfWeek(d);
             return (h("div", { class: { 'tg__head-day': true, 'tg__head-day--today': compareYMD(d, today) === 0 } }, h("span", { class: "tg__head-dow" }, short[dow]), h("span", { class: "tg__head-num" }, ymd.day)));
-        }))), this.allDaySlot && (h("div", { key: 'be9bb57aae5990d5e492c1188085946e92580989', class: "tg__allday" }, h("div", { key: '0875d60eede7447fa6895641c25148a8ca511713', class: "tg__allday-axis" }, gmtLabel(this.timeZone, dates[0])), h("div", { key: '2ae5911eb2d7f88cbfab6b540df2883e85d02278', class: "tg__allday-lane", style: { height: `${Math.max(1, allDay.laneCount) * ALLDAY_LANE_H + 4}px` } }, allDay.segments.map((seg) => this.renderAllDayBar(seg, dates.length, byId))))), h("div", { key: '65fef707d9de748f3d3b112bf1a0e49ca5165ae9', class: "tg__scroll", ref: (el) => (this.scrollEl = el) }, h("div", { key: 'cc7c058cec0dc047ff6f934ef47316d966b2f18f', class: "tg__body" }, h("div", { key: 'a5318ad33e9bf7ba4fc2c99a00cf81cd07bd5fbf', class: "tg__axis", style: { height: bodyHeight } }, this.hourList().map((m) => (h("span", { class: "tg__axis-hour", style: { top: `${minutesToFraction(m, this.minM, this.maxM) * 100}%` } }, hourLabel(m, this.locale))))), h("div", { key: '1338c80689f1c1567a652a88111687298170ceac', class: "tg__cols", style: Object.assign({ gridTemplateColumns: colsTemplate, height: bodyHeight }, hourVars) }, dates.map((d, i) => {
+        }))), this.allDaySlot && (h("div", { key: 'ac00b1d478138334f6b265e7e7861dc910ea778e', class: "tg__allday" }, h("div", { key: '52ea789daff3b284863e90fe2356b3f1f5ed8e75', class: "tg__allday-axis" }, gmtLabel(this.timeZone, dates[0])), h("div", { key: '24e0a67773437bad42a3fb183cf55f53f2e04d0f', class: "tg__allday-lane", style: { height: `${Math.max(1, allDay.laneCount) * ALLDAY_LANE_H + 4}px` } }, allDay.segments.map((seg) => this.renderAllDayBar(seg, dates.length, byId))))), h("div", { key: '19ee69ba01bcd63d015acebba5001390324b1c93', class: "tg__scroll", ref: (el) => (this.scrollEl = el) }, h("div", { key: '644e0cae08a22795bfdaa802227c176e733dd418', class: "tg__body" }, h("div", { key: '56a20d546083e0a0695c01a0910c80fdcaf56589', class: "tg__axis", style: { height: bodyHeight } }, this.hourList().map((m) => (h("span", { class: "tg__axis-hour", style: { top: `${minutesToFraction(m, this.minM, this.maxM) * 100}%` } }, hourLabel(m, this.locale))))), h("div", { key: '391004de33499561a0fdc75e3eabf401fb4e5561', class: "tg__cols", style: Object.assign({ gridTemplateColumns: colsTemplate, height: bodyHeight }, hourVars) }, dates.map((d, i) => {
             var _a;
             const isToday = compareYMD(d, today) === 0;
             return (h("div", { class: { tg__col: true, 'tg__col--today': isToday }, "data-col-date": d, onPointerDown: (e) => this.startSelection(e, d, e.currentTarget), onPointerMove: (e) => this.extendSelection(e, e.currentTarget) }, this.loading
@@ -752,7 +769,7 @@ export class CoCalendarTimegrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Eventos ya normalizados por el motor (`@prolibu-suite/cobalt-calendar-utils`); propiedad JS."
                 },
                 "getter": false,
                 "setter": false,
@@ -788,7 +805,7 @@ export class CoCalendarTimegrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Locale BCP-47 de las cabeceras de d\u00EDa y las etiquetas de hora."
                 },
                 "getter": false,
                 "setter": false,
@@ -808,7 +825,7 @@ export class CoCalendarTimegrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Zona IANA en la que se pinta el reloj (\u00FAnica frontera de zona horaria del componente)."
                 },
                 "getter": false,
                 "setter": false,
@@ -827,7 +844,7 @@ export class CoCalendarTimegrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Permite mover y redimensionar eventos arrastrando (salvo los que traen `editable: false`); emite `coEventDrop`."
                 },
                 "getter": false,
                 "setter": false,
@@ -847,7 +864,7 @@ export class CoCalendarTimegrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Permite seleccionar un rango en un \u00E1rea vac\u00EDa para crear; emite `coRangeSelect`."
                 },
                 "getter": false,
                 "setter": false,
@@ -867,7 +884,7 @@ export class CoCalendarTimegrid {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Primer d\u00EDa interactuable `YYYY-MM-DD`: antes no se puede seleccionar ni soltar."
                 },
                 "getter": false,
                 "setter": false,
@@ -886,7 +903,7 @@ export class CoCalendarTimegrid {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\u00DAltimo d\u00EDa interactuable `YYYY-MM-DD`."
                 },
                 "getter": false,
                 "setter": false,
@@ -905,7 +922,7 @@ export class CoCalendarTimegrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Minutos por fila de la grilla (default 15); tambi\u00E9n el paso del teclado."
                 },
                 "getter": false,
                 "setter": false,
@@ -925,7 +942,7 @@ export class CoCalendarTimegrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Minutos a los que se ajustan arrastres y selecciones (default 15)."
                 },
                 "getter": false,
                 "setter": false,
@@ -945,7 +962,7 @@ export class CoCalendarTimegrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Duraci\u00F3n en minutos del rango creado con un click simple (default 60)."
                 },
                 "getter": false,
                 "setter": false,
@@ -965,7 +982,7 @@ export class CoCalendarTimegrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Hora `HH:mm` a la que scrollea la grilla al montar (default 07:00)."
                 },
                 "getter": false,
                 "setter": false,
@@ -985,7 +1002,7 @@ export class CoCalendarTimegrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "L\u00EDnea de \u00ABahora\u00BB en la columna del d\u00EDa actual."
                 },
                 "getter": false,
                 "setter": false,
@@ -1025,7 +1042,7 @@ export class CoCalendarTimegrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Franja superior de eventos de todo el d\u00EDa."
                 },
                 "getter": false,
                 "setter": false,
@@ -1045,7 +1062,7 @@ export class CoCalendarTimegrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Primera hora visible `HH:mm` (default 00:00)."
                 },
                 "getter": false,
                 "setter": false,
@@ -1065,7 +1082,7 @@ export class CoCalendarTimegrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\u00DAltima hora visible `HH:mm` (default 24:00)."
                 },
                 "getter": false,
                 "setter": false,
@@ -1111,7 +1128,7 @@ export class CoCalendarTimegrid {
                 "composed": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Click en un evento: `{ id, rect }` (rect del chip, para anclar un popover). No burbujea."
                 },
                 "complexType": {
                     "original": "{ id: string; rect?: DOMRect }",
@@ -1131,7 +1148,7 @@ export class CoCalendarTimegrid {
                 "composed": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Se movi\u00F3 o redimension\u00F3 un evento: `{ id, start, end, oldStart, oldEnd, allDay }` (instantes ISO UTC).\nControlado: el host decide si aplica el cambio actualizando `events`. No burbujea."
                 },
                 "complexType": {
                     "original": "{\n    id: string; start: string; end: string; oldStart: string; oldEnd: string; allDay: boolean;\n  }",

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

@@ -1,5 +1,14 @@
 import { h } from "@stencil/core";
 /**
+ * Contenedor tipo tarjeta con header, cuerpo y footer, en variantes elevada,
+ * con borde o plana; opcionalmente clickeable. Wrapper Vue: `CoCard` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
+ * @part card - La tarjeta.
+ * @part header - Área del slot `header`.
+ * @part body - Cuerpo (slot por defecto).
+ * @part footer - Área del slot `footer`.
+ *
  * @slot header  - Card header area (image, title, actions)
  * @slot         - Default slot for card body/content
  * @slot footer  - Card footer area (meta, actions)
@@ -29,13 +38,13 @@ export class CoCard {
         return nodes.length > 0;
     }
     render() {
-        return (h("div", { key: 'e1ba367c02ad068e72d2daa1f90e2bbdcf262290', class: {
+        return (h("div", { key: '662e725ff539d1696eeaa99a42f8160df8ba13ae', class: {
                 'co-card': true,
                 [`co-card--${this.variant}`]: true,
                 [`co-card--pad-${this.padding}`]: true,
                 'co-card--clickable': this.clickable,
                 'co-card--stretch': this.stretch,
-            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: '265eae5ea9ca7765fa84c135d3141b21a1495212', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: 'c639a5613b94a6cd5afadee4a508de80744f61a5', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: 'ace57349938320967253d0a6a32600c9a8580a47', class: "co-card__body", part: "body" }, h("slot", { key: '85b3b510c8004fe9753bce5de6a1c39754d09b38' })), h("div", { key: '011b688e835090f81c85d5207fc80fc7794b48fe', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '565877135c3a16cbce2a8e15b0c9c4bc76dfbec1', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
+            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: '63b8d7696663831f6151d66ea17855ce85421045', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: 'b4318780fa0d1fb8c9475056d59b9dd3bf055594', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '20d5231348b8031688380b08a8222f4bd3f68575', class: "co-card__body", part: "body" }, h("slot", { key: '2946cc5d8d80cbc23f98e710b97cb77d542a019e' })), h("div", { key: '90dd12b60204cbd2e1ddb6752c8e6a413db7f860', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: 'de9d77a21962ed35d2862059d13910b1067d1573', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
     }
     static get is() { return "co-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,6 +2,16 @@
    co-carousel
    ═══════════════════════════════════════════════════ */
 
+/**
+ * Tienen su default en `:host`; se sobrescriben desde afuera sobre el elemento.
+ * @prop --co-carousel-arrow-size: Diámetro de las flechas (default 36px).
+ * @prop --co-carousel-arrow-bg: Fondo de las flechas.
+ * @prop --co-carousel-arrow-color: Color del ícono de las flechas.
+ * @prop --co-carousel-dot-size: Tamaño de los indicadores (default 6px).
+ * @prop --co-carousel-dot-color: Color de los indicadores inactivos.
+ * @prop --co-carousel-dot-active-color: Color del indicador activo.
+ * @prop --co-carousel-transition: Duración y curva del desplazamiento entre slides (default 320ms).
+ */
 :host {
   display: block;
   font-family: var(--co-font-family-primary);

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-docs-2026-09-24/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);

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-docs-2026-09-24/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-docs-2026-09-24/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"; }