@prolibu-suite/cobalt-core 0.10.4 → 0.11.0

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

@@ -326,7 +326,7 @@ export class CoCalendarMonth {
         const short = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'short');
         const long = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'long');
         const today = todayYMD();
-        return (h("div", { key: '7cb63a84f7005ee7b5552a5d9b88c598f579b7be', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown, ref: (el) => (this.rootEl = el) }, h("div", { key: '70281a5799b9b95957d152e15a374001a2ec8fa2', class: "cal-month__dow", role: "row" }, short.map((lbl, i) => (h("span", { class: "cal-month__dow-cell", role: "columnheader", "aria-label": long[i] }, lbl)))), matrix.map((week, wi) => {
+        return (h("div", { key: '0f8757ab9f44282d7f909c59d046b4d35d2453cd', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown, ref: (el) => (this.rootEl = el) }, h("div", { key: '3f79d24dac7f06064d877743a5ea8bd0c8a050b9', class: "cal-month__dow", role: "row" }, short.map((lbl, i) => (h("span", { class: "cal-month__dow-cell", role: "columnheader", "aria-label": long[i] }, lbl)))), matrix.map((week, wi) => {
             var _a;
             return (h("div", { class: "cal-month__week", role: "row" }, h("div", { class: "cal-month__days" }, week.map((date) => {
                 const ymd = parseISO(date);

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

@@ -704,11 +704,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: '6714fb717616dff758156f0fcf6d50370bcc52e0', class: "tg", tabIndex: 0, onKeyDown: this.handleKeyDown, ref: (el) => (this.rootEl = el) }, h("div", { key: '86aa3ebcc5c8c3e66fc200b25819b8806a8883fa', class: "tg__head" }, h("div", { key: '63353e0fb0765f90ecaf6942bad3323497638a17', class: "tg__head-spacer" }), h("div", { key: '842770c40be192de75e8e3d8635d2f78976ee492', class: "tg__head-days", style: { gridTemplateColumns: colsTemplate } }, dates.map((d) => {
+        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) => {
             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: 'f78e9159e84ecc4a0259c296e1120830b2a2513b', class: "tg__allday" }, h("div", { key: '255ad5c8e6a8c93377c2898acb8ecc06e0a0eb6d', class: "tg__allday-axis" }, gmtLabel(this.timeZone, dates[0])), h("div", { key: '5023271e34910ac5dead15f4b4a4bd4c588b6594', 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: '5d37824151562d8a53906ecb059d96afdee93d3e', class: "tg__scroll", ref: (el) => (this.scrollEl = el) }, h("div", { key: 'ebeac3733271bd3ebcaca2343a9f5f01285a7f05', class: "tg__body" }, h("div", { key: '9eed6c09dfe67a9613c0641dbc305ba594312166', 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: 'bc8f8c0e5bf00c8fc92bb6c823fa9ba6c321ad2c', class: "tg__cols", style: Object.assign({ gridTemplateColumns: colsTemplate, height: bodyHeight }, hourVars) }, dates.map((d, i) => {
+        }))), 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) => {
             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

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

@@ -29,13 +29,13 @@ export class CoCard {
         return nodes.length > 0;
     }
     render() {
-        return (h("div", { key: '52e3eb679a025b1b53854b38063b6fa951cf9f70', class: {
+        return (h("div", { key: 'e1ba367c02ad068e72d2daa1f90e2bbdcf262290', 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: '753b2277a6629673e8583774e126b2472709221d', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: 'f73192e7fa291c8a2d831a0f9db7ebe8a7ef8907', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '2916b424d3cb1feacf438678132d10217df51ad9', class: "co-card__body", part: "body" }, h("slot", { key: 'f957907056567d135c3de5d412251911c7cf8db0' })), h("div", { key: 'f1f183b7d3eacbd11787e0cc3d0ef438f8272480', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '2171a95906d5b862c7b39a756cafee17d86f7dbc', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
+            }, 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 }))));
     }
     static get is() { return "co-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -303,11 +303,11 @@ export class CoCarousel {
         };
         if (this.dragging)
             trackStyle.transition = 'none';
-        return (h(Host, { key: '2e2d00e6956b5de4af5950ad6725a77023420f11' }, h("div", { key: '40878a4740b4ad9bf70cf9816d7edc89b8bafeda', 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: '5c0ec11025ae5c6eb3a88b10595c243a9b910671', 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: '746d85f914bc24ca86ad88005fe95a214de7cd31', class: "co-carousel__track", part: "track", style: trackStyle, "aria-live": this.rotating ? 'off' : 'polite' }, h("slot", { key: 'b33c34a9cb6e03af50176094a89b1c79d363f13d', onSlotchange: this.handleSlotChange }))), this.arrows && multi && (h("button", { key: '4f30b56e84da8f7e15b6cea71a0238f5cd19f39e', 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: '09eaa1a665762f7e2b372eb264860e182e411d17', name: "caret-left", size: 18, weight: "bold" }))), this.arrows && multi && (h("button", { key: '7026bfe945ee42ef7b0f9194ecf6a04f0ef1ab1c', 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: '564f5bc3bef0b0ce23e8be91bed8e37540209a7b', name: "caret-right", size: 18, weight: "bold" }))), this.dots && multi && (
+        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 && (
         // 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: 'b19aed5296fa2f3547e85e6c439589703809bae3', 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: '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) }))))))));
     }
     static get is() { return "co-carousel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ import { Host, h } from "@stencil/core";
  */
 export class CoCarouselItem {
     render() {
-        return (h(Host, { key: 'ae04768a65db80be93705a0ff9d0852ae2e6d0cc', role: "group", "aria-roledescription": "slide" }, h("slot", { key: '7a9f94454ca5e2574b4161ed06d863728c88a814' })));
+        return (h(Host, { key: 'c35ea6afb9a70c602094a6b29d0fd8e80d945602', role: "group", "aria-roledescription": "slide" }, h("slot", { key: 'd2a344a92e6c5bb374ccb54eebc8eb3619566093' })));
     }
     static get is() { return "co-carousel-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -78,7 +78,14 @@
    tinte de la fila). Frost real solo en appearance="overlay", más abajo. */
 .co-checkbox:not(.co-checkbox--checked) {
   background: color-mix(in srgb, var(--co-semantic-surface-secondary) 35%, transparent);
-  border: 1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);
+  /* m-16: el borde va al token PLENO (negro-16 = 0,16), que es lo que pide el
+     diseño. El `color-mix(… 75%, transparent)` que había acá lo dejaba en 0,12
+     y, de paso, era el motivo por el que el puente de tema
+     `--co-semantic-border-field: var(--co-semantic-border-default)` nunca le
+     llegaba a la casilla: no leía `border-field` y encima diluía el otro.
+     Es el mismo borde que `labelSize="xs"` ya dibujaba pleno. El relleno
+     translúcido (35%) no se toca: el hallazgo es solo del borde. */
+  border: 1px solid var(--co-semantic-border-default);
 }
 
 /* ─── CHECKED ───────────────────────────────────────────────── */
@@ -250,3 +257,38 @@
   border-color: var(--co-semantic-border-focus);
   box-shadow: 0 0 0 2px var(--co-semantic-border-focus);
 }
+
+/* ─── LABEL SIZE "xs" (Task C6) ─────────────────────────────── */
+/* Aditivo: solo aplica con la clase --label-xs en la fila; el default
+   (sin la clase) queda byte-idéntico a lo de arriba. */
+.co-checkbox-row--label-xs {
+  gap: var(--co-spacing-sm); /* 6px, en vez del sm2 (8px) del default */
+}
+
+.co-checkbox-row--label-xs .co-checkbox__label {
+  color: var(--co-semantic-text-default);
+  font-size: var(--co-font-size-12);
+}
+
+/* Fix round 1: sin este bloque, disabled + label-xs perdía el dimming del
+   label. La regla de arriba (.co-checkbox-row--label-xs .co-checkbox__label,
+   especificidad 0,2,0) empata en especificidad con la de disabled
+   (.co-checkbox-row--disabled .co-checkbox__label, línea ~32-34, también
+   0,2,0) y, al declararse después en el archivo, ganaba siempre — incluso
+   con disabled activo. Este selector compuesto sube a 0,3,0 (dos clases en
+   la fila + el label) y gana pase lo que pase el orden de declaración. */
+.co-checkbox-row--disabled.co-checkbox-row--label-xs .co-checkbox__label {
+  color: var(--co-semantic-text-disabled);
+}
+
+/* Caja SIN MARCAR: fondo transparente + borde pleno (no color-mix), en vez
+   de la traslucidez 35%/75% del default. El estado marcado/indeterminado no
+   se toca — sigue siendo la regla de arriba (fondo sólido, sin borde). El
+   `:not(--indeterminate)` es necesario (fix I-3): la clase --checked solo va
+   con checked && !indeterminate (ver .tsx), así que un `:not(--checked)`
+   pelado también matcheaba el indeterminado → caja transparente con el
+   guion blanco encima, invisible. Misma forma que el chip overlay de arriba. */
+.co-checkbox-row--label-xs .co-checkbox:not(.co-checkbox--checked):not(.co-checkbox--indeterminate) {
+  background: transparent;
+  border: 1px solid var(--co-semantic-border-default);
+}

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

@@ -7,6 +7,13 @@ export class CoCheckbox {
         this.indeterminate = false;
         /** Size: small=16px, medium=20px, large=24px (overlay appearance: small=20px, medium/large=22px) */
         this.size = 'small';
+        /**
+         * Talla del label: 'default' (14px, sin cambios) o 'xs' (12px/400/text-default,
+         * gap 6). Con 'xs' la caja SIN MARCAR pasa a fondo transparente + borde
+         * `--co-semantic-border-default` pleno (hoy surface-secondary 35% + borde 75%);
+         * el estado marcado no cambia. Aditivo — el default sigue siendo idéntico.
+         */
+        this.labelSize = 'default';
         /** Disabled state */
         this.disabled = false;
         /** Value for checkbox group usage */
@@ -43,17 +50,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: 'cfcbd567066331d7751064f857407a8f9d56d386', class: {
+        return (h("div", { key: '9de8d31f441ffebc9b7aeafeb8ad3309b223c70a', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("span", { key: '21c39833a43324e47718cc83ba74253f00e67e82', 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-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: {
                 '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: '6e49dd81e78da092340b1cbdb5c45ee6e345fb3c', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'dbcadf848fb8cb64acea875fb03186258210c43f', class: "co-checkbox__check", d: "M3.5 8.5l3 3 6-6.5", pathLength: "1", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '0b58a11353c3d8b8249e5852933f290cd63f0705', class: "co-checkbox__dash", d: "M3 8h10", pathLength: "1", "stroke-linecap": "round" }))), this.label && (h("span", { key: 'e1a4beabf2b472aeff1fe5ecd5bcb458e949ee11', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, 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))));
     }
     static get is() { return "co-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -129,6 +137,26 @@ export class CoCheckbox {
                 "attribute": "size",
                 "defaultValue": "'small'"
             },
+            "labelSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'xs'",
+                    "resolved": "\"default\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Talla del label: 'default' (14px, sin cambios) o 'xs' (12px/400/text-default,\ngap 6). Con 'xs' la caja SIN MARCAR pasa a fondo transparente + borde\n`--co-semantic-border-default` pleno (hoy surface-secondary 35% + borde 75%);\nel estado marcado no cambia. Aditivo \u2014 el default sigue siendo id\u00E9ntico."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-size",
+                "defaultValue": "'default'"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -231,7 +231,7 @@ export class CoCheckboxGroup {
                     "references": {
                         "CheckboxOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-0.10.3/packages/core/src/components/co-checkbox-group/co-checkbox-group.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-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.js

@@ -70,7 +70,7 @@ export class CoChip {
         else
             effectiveIconMode = 'none';
         const Tag = this.clickable ? 'button' : 'div';
-        return (h(Tag, { key: '385173584372bbad8872565f1fc95e8ae8e14563', class: {
+        return (h(Tag, { key: '00d8eb125566907af12d288037c9b6129609857f', class: {
                 'co-chip': true,
                 [`co-chip--${this.shape}`]: true,
                 [`co-chip--${this.size}`]: true,
@@ -80,7 +80,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: 'a680c376ac13140b2c073e01fc901f2cfa54bde8', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: '73e58b8b90234eb883b6a1e49b5e37b267f03d1b', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: 'b944fbf0a0161846411d8fc2fe034c48c77d42ea', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: 'b24a5a3c64d0eda1b9d87c66ac93c0d4703973bc', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: '9f1e7fa47bd86e1d7e4812ec0fe5f61490ab0878', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: 'e52df105783ff84c932bc289f6e88304ccc4240a', name: "icon-left" }))), h("span", { key: '269f54eca09a4ff301d9ec4e673bf9c8d19ccd87', class: "co-chip__label" }, h("slot", { key: '31fba7c9c05b830562800cc46c48e667e7dc046c' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: 'a455314236c688f2bff9185135787899da52ea5f', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: '13e5862e03e2fcf7129230a4d68ce7e2b1b4f11e', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '66fc09efbdeea37f1dbce3b5ad4443a760618b66', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: '7acfa1a23e294cb92b17d5174ec0a78161877624', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: '9e8ded0f256a72ab81c587a82d2bb570930288f9', name: "icon-right" }))), this.removable && (h("span", { key: 'e30345ce825c823fbf7da1aaaec4141351e18a02', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: '3d9777c29b706cda71ee64b313961c97e215b900', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: 'd99af23fbbb7a8557b8cefd15a4cebdc7437ff43', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: 'aa99f2c0f6ec96f95656c607ca5846c282447e35', 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: '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 })))));
     }
     static get is() { return "co-chip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,83 @@
+/* Thumb compartido del picker de color (co-color-area + co-color-slider).
+   Se `@import`-a como PRIMER statement del CSS de cada componente (Stencil
+   inlinea los @import locales en build). El elemento que lo lleva es el
+   `part="thumb"` de ambos.
+
+   Receta (Task C15): 16 px = anillo blanco 4 px + color actual + --co-shadow-lg.
+   El hairline de 1 px (--co-semantic-border-hairline = negro-4) va ADEMÁS de la sombra: sin él el anillo
+   blanco se pierde por completo en la esquina blanca del área (S 0 / V 100) y en
+   el extremo transparente del slider de alpha — --co-shadow-lg es 5 % de alpha.
+   Es configurable por el host vía `--co-color-thumb-hairline` (un color); para
+   el look exacto del brief, sin hairline: `--co-color-thumb-hairline: transparent`.
+
+   El color entra por `--co-color-thumb-fill` (inline, desde el tsx): hex para el
+   área y el tono; para alpha es una pila color-mix + damero, así el thumb
+   muestra la opacidad real. `pointer-events: none`: el gesto lo captura el
+   contenedor (área/track), nunca el thumb. */
+
+.co-color-thumb {
+  position: absolute;
+  box-sizing: border-box;
+  width: var(--co-color-thumb-size, 16px);
+  height: var(--co-color-thumb-size, 16px);
+  border-radius: var(--co-border-radius-full);
+  border: 4px solid var(--co-color-base-blanco, #fff);
+  background: var(--co-color-thumb-fill, transparent);
+  box-shadow:
+    0 0 0 1px var(--co-color-thumb-hairline, var(--co-semantic-border-hairline)),
+    var(--co-shadow-lg);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  /* Solo saltos discretos (teclado) transicionan: el arrastre pone --dragging
+     en el contenedor y apaga la transición (ver cada componente). */
+  transition:
+    left var(--co-motion-duration-instant) var(--co-motion-ease-out),
+    top var(--co-motion-duration-instant) var(--co-motion-ease-out);
+}
+
+
+/* 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. */
+
+:host {
+  display: block;
+  width: 100%;
+  --co-color-area-radius: var(--co-border-radius-xs); /* 8 px */
+}
+
+.co-color-area {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  aspect-ratio: 236 / 200;
+  border-radius: var(--co-color-area-radius);
+  /* Eje X: blanco → tono puro; eje Y: transparente → negro (V 0 abajo).
+     Los literales son el modelo de color, no tema: no van a tokens. */
+  background:
+    linear-gradient(to top, #000, transparent),
+    linear-gradient(to right, #fff, hsl(var(--co-color-area-hue, 0) 100% 50%));
+  cursor: crosshair;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  outline: none;
+}
+
+.co-color-area--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Manipulación directa = sin transición del thumb (evita el desfase con el
+   puntero); los saltos de teclado sí transicionan (--co-motion-duration-instant). */
+.co-color-area--dragging .co-color-area__thumb {
+  transition: none;
+}
+
+/* Anillo de foco por teclado — solo :focus-visible, el click no lo enciende
+   (el foco se mueve a mano en pointerdown y el browser no lo marca visible). */
+.co-color-area:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus);
+}