@prolibu-suite/cobalt-core 0.10.3 → 0.11.0

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

@@ -418,7 +418,7 @@ export class CoAutocomplete {
                     "references": {
                         "AutocompleteOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-0.10.3/packages/core/src/components/co-autocomplete/co-autocomplete.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-autocomplete/co-autocomplete.tsx",
                             "id": "src/components/co-autocomplete/co-autocomplete.tsx::AutocompleteOption"
                         }
                     }

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

@@ -17,8 +17,11 @@
   font-family: var(--co-font-family-primary);
   /* Figma «Avatars» (Geist Medium, 500; p. ej. 4515:158897 / 1135:103818): las
      iniciales van en Medium, no SemiBold — a 10-12px el 600 empasta la panza de
-     la R y se lee «sucio» (2026-09-17). */
-  font-weight: 500;
+     la R y se lee «sucio» (2026-09-17).
+     Task C12: el var() es solo un hook para que un consumidor lo pise (mismo
+     patrón que --co-avatar-border-color/--co-avatar-size en este archivo); su
+     fallback ES el default publicado (500). */
+  font-weight: var(--co-avatar-font-weight, 500);
   line-height: 1;
   letter-spacing: var(--co-font-letter-spacing-body);
   overflow: hidden;
@@ -118,3 +121,9 @@ co-tooltip {
   align-items: center;
   line-height: 0;
 }
+
+/* Rounded = radio chico FIJO (Task C12), no la superelipse de --square: sin
+   máscara squircle, border-radius simple sobre la caja rectangular real. */
+.co-avatar--rounded {
+  border-radius: var(--co-border-radius-xs);
+}

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

@@ -24,7 +24,9 @@ export class CoAvatar {
         this.icon = 'user';
         /** Icon weight */
         this.iconWeight = 'regular';
-        /** Shape of the avatar */
+        /** Shape of the avatar. `rounded` (Task C12) = radio chico
+         *  (`--co-border-radius-xs`), sin máscara squircle — esquinas de radio fijo,
+         *  no la superelipse de `square`. */
         this.shape = 'circle';
         this.imgFailed = false;
         this.handleImgError = () => {
@@ -51,6 +53,7 @@ export class CoAvatar {
                 [`co-avatar--${this.size}`]: true,
                 [`co-avatar--${this.type}`]: true,
                 'co-avatar--square': this.shape === 'square',
+                'co-avatar--rounded': this.shape === 'rounded',
                 'co-avatar--light': !!this.color && isLightColor(this.color),
             }, style: Object.assign(Object.assign({ width: `var(--co-avatar-size, ${dim}px)`, height: `var(--co-avatar-size, ${dim}px)`, fontSize }, (this.color ? { background: this.color } : {})), (this.ringColor
                 ? { '--co-avatar-border-color': this.ringColor, '--co-avatar-border-width': '2px' }
@@ -215,15 +218,15 @@ export class CoAvatar {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'circle' | 'square'",
-                    "resolved": "\"circle\" | \"square\"",
+                    "original": "'circle' | 'square' | 'rounded'",
+                    "resolved": "\"circle\" | \"rounded\" | \"square\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Shape of the avatar"
+                    "text": "Shape of the avatar. `rounded` (Task C12) = radio chico\n(`--co-border-radius-xs`), sin m\u00E1scara squircle \u2014 esquinas de radio fijo,\nno la superelipse de `square`."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -87,7 +87,7 @@ export class CoAvatarGroup {
                     "references": {
                         "CoAvatarGroupItem": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-0.10.3/packages/core/src/components/co-avatar-group/co-avatar-group.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-avatar-group/co-avatar-group.tsx",
                             "id": "src/components/co-avatar-group/co-avatar-group.tsx::CoAvatarGroupItem"
                         }
                     }

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

@@ -17,7 +17,7 @@ export class CoBadge {
         this.animated = false;
     }
     render() {
-        return (h("span", { key: '18cea751b9be9ae4712f931ab11e00f87adb353a', class: {
+        return (h("span", { key: 'be0a55884e7afcf9761712b0318ad46f54a82786', class: {
                 'co-badge': true,
                 [`co-badge--${this.size}`]: true,
                 [`co-badge--${this.color}`]: true,

package/dist/collection/components/co-bottom-sheet/co-bottom-sheet.js

@@ -250,17 +250,17 @@ export class CoBottomSheet {
         (_a = this.bodyEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchmove', this.touchBlocker);
     }
     render() {
-        return (h("div", { key: '9c7c9c9dc4f1d627be8801afdaf3cc5999ead3be', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '7de7991fdeb6338f3af4a31464f275cd4c9cd909', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: '81ef802c44978ca6db8d2322b0e98f0613d80ad9', class: { 'co-bottom-sheet': true, 'co-bottom-sheet--open': this.open }, part: "sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": this.hasHeaderSlot
+        return (h("div", { key: '9afac86d3b0bdab25d92b283b079304b2801fdcf', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: 'bc0152d32c577d2aafadcdcaae065aacb7442350', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: '457847247df72eb810149148e0a02a13152b86c1', class: { 'co-bottom-sheet': true, 'co-bottom-sheet--open': this.open }, part: "sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": this.hasHeaderSlot
                 ? 'co-bottom-sheet-header'
                 : this.heading
                     ? 'co-bottom-sheet-heading'
-                    : undefined, style: { '--co-bottom-sheet-max-height': this.maxHeight }, onTransitionEnd: this.handleTransitionEnd, ref: (el) => (this.sheetEl = el) }, h("div", { key: 'a66516cb09be2cf219ef1045802c476d9d9b938e', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: '214e9765f91449e6f0773c2b5ad6991cf0bb6be8', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: '3d63d502be3511b543463709e882db231df40c9b', class: {
+                    : undefined, style: { '--co-bottom-sheet-max-height': this.maxHeight }, onTransitionEnd: this.handleTransitionEnd, ref: (el) => (this.sheetEl = el) }, h("div", { key: 'b4acb6f614163fafe7c29c40664a646788cdb05b', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: 'f72127311b1e3bf8939eac0bc227b98f8418e6f7', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: 'ba1be5188eb0e6eb3a0add620be5da8a99e65978', class: {
                 'co-bottom-sheet__header': true,
                 'co-bottom-sheet__header--show': this.hasHeaderSlot || !!this.heading,
-            }, part: "header", id: "co-bottom-sheet-header" }, h("slot", { key: '652d26a569389c0a4829fae4330141603fd0f072', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: '6076038750176a915aad4acff2e0e6cc0f699d12', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: 'fb08ac38369623c07450a96409961086831be022', class: "co-bottom-sheet__body", part: "body", onPointerDown: this.handleBodyPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, ref: (el) => (this.bodyEl = el) }, h("slot", { key: '963205af45ba01d295afa648f8b37875e6f3adea' })), h("footer", { key: 'b72a488ea199acba8bc9d647a4b5d0eb3170a2c7', class: {
+            }, part: "header", id: "co-bottom-sheet-header" }, h("slot", { key: '53ab489d36588e8c7e604d16ae63b871a62cc833', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: '4519555ec9333f9c0af56e86cc67f7bad914e1b5', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: '141df16f223b8a82fc1f412466669f999cbdba8a', class: "co-bottom-sheet__body", part: "body", onPointerDown: this.handleBodyPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, ref: (el) => (this.bodyEl = el) }, h("slot", { key: '5299c10f8854ee5f32794608502777e08dc9cec7' })), h("footer", { key: 'b3ec3a0aa7779829783aea2d64fde9b2199ed73c', class: {
                 'co-bottom-sheet__footer': true,
                 'co-bottom-sheet__footer--show': this.hasFooter,
-            }, part: "footer" }, h("slot", { key: 'aeecf78508978fd5e5c068ac2b37bfaecb709e1e', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
+            }, part: "footer" }, h("slot", { key: 'd97f14b88decd35ccfbb4cc7e4f63446ef30a4b5', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
     }
     static get is() { return "co-bottom-sheet"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class CoBreadcrumb {
     }
     render() {
         const data = this.parseItems();
-        return (h(Host, { key: '8ab383589f78948c7f11d38d4e25fa5509a56dbc', part: "breadcrumb", role: "navigation", "aria-label": "Breadcrumb" }, data
+        return (h(Host, { key: 'c57f833d27edfc2848a8f72de1805968e9536b72', part: "breadcrumb", role: "navigation", "aria-label": "Breadcrumb" }, data
             ? data.map((it, i) => (h("co-breadcrumb-item", { key: i, label: it.label, value: it.value, icon: it.icon, separator: this.separator, current: i === data.length - 1 })))
             : h("slot", { onSlotchange: this.handleSlotChange })));
     }

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

@@ -29,10 +29,10 @@ export class CoBreadcrumbItem {
         };
     }
     render() {
-        return (h(Host, { key: '16deecfc675429362263d3afb7257025e9170b26', part: "breadcrumb-item", class: {
+        return (h(Host, { key: '6cb113e8326d6fa5fe9ee23dcd8083ab4664d343', part: "breadcrumb-item", class: {
                 'co-breadcrumb-item': true,
                 'co-breadcrumb-item--current': this.current,
-            } }, h("span", { key: '795723b3d89d48356ffe8f9a35df63d9d5dea836', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: 'a1bc3a756d0b2ead8a9f150f60688ae19f46cae0', name: this.separator, size: 13 })), h("span", { key: '6dada7bc4a556af7f3b9dc63d2b2d001c13e173e', class: "co-breadcrumb-item__content", part: "content", role: "link", tabindex: "0", "aria-current": this.current ? 'page' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, this.icon && (h("span", { key: '63424dc201114b2a589559ee10324ee4cc9cc305', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: 'be25f19369d9f6d0459acd255793782c1580256e', name: this.icon, size: 16 }))), h("span", { key: 'e8f0919b4ab1ba60ae632ccd21e3f353b04deac7', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: '0ac8d7d59e7828f939f637ef73ab7787a5c820d8' })))));
+            } }, h("span", { key: '9031f0d3558c5ce7dcf298d6e2b04059dd463a34', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: '143800da5211dd7bdb1e3b06de8c90fbb8f94acf', name: this.separator, size: 13 })), h("span", { key: '23b11ae5ed8315fcf84ed83609b7d98c0142f50b', class: "co-breadcrumb-item__content", part: "content", role: "link", tabindex: "0", "aria-current": this.current ? 'page' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, this.icon && (h("span", { key: 'e70f21819a4e9bc117282b062399960810256c1e', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: 'ed942c739f1c67cd0b27facc2eabd1d016391719', name: this.icon, size: 16 }))), h("span", { key: '0b2c28119d1123196d313015e3020a82618b932f', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: 'c83fcd1764b279aed0b9c4a1c791b47d011d711f' })))));
     }
     static get is() { return "co-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,7 +39,9 @@
      blurear y el 78% de negro colapsa a un gris lavado. */
   background: var(--co-semantic-surface-primary);
   color: var(--co-semantic-on-primary);
-  border-color: color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent);
+  /* --co-button-border-color (Task C2): override transversal; el fallback es
+     el valor propio de la variante, así el default no cambia sin la var. */
+  border-color: var(--co-button-border-color, color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent));
 }
 /* Knobs (heredan a través del shadow, mismo mecanismo y nombres que
    --co-icon-button-bg/-color/-border): un consumidor con spec propia cambia la
@@ -47,17 +49,20 @@
 .co-button--secondary {
   background: color-mix(in srgb, var(--co-button-bg, var(--co-semantic-surface-secondary)) 55%, transparent);
   color: var(--co-button-color, var(--co-semantic-on-secondary));
-  border-color: var(--co-button-border, var(--co-semantic-border-subtle));
+  /* --co-button-border-color (override transversal, todas las variantes) le
+     gana al knob propio de la variante (--co-button-border, 0.10.1); sin
+     ninguno de los dos, el borde del DS. */
+  border-color: var(--co-button-border-color, var(--co-button-border, var(--co-semantic-border-subtle)));
 }
 .co-button--stroke {
   background: color-mix(in srgb, var(--co-semantic-surface-secondary) 25%, transparent);
   color: var(--co-semantic-text-default);
-  border-color: var(--co-semantic-border-default);
+  border-color: var(--co-button-border-color, var(--co-semantic-border-default));
 }
 .co-button--ghost {
   background: transparent;
   color: var(--co-semantic-text-default);
-  border-color: transparent;
+  border-color: var(--co-button-border-color, transparent);
   /* Ghost: no chrome, no frost until hover */
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
@@ -65,12 +70,12 @@
 .co-button--danger {
   background: var(--co-semantic-status-error);
   color: var(--co-color-base-blanco);
-  border-color: transparent;
+  border-color: var(--co-button-border-color, transparent);
 }
 .co-button--success {
   background: var(--co-semantic-status-success);
   color: var(--co-color-base-blanco);
-  border-color: transparent;
+  border-color: var(--co-button-border-color, transparent);
 }
 
 /* ─── SIZES · ROUNDED (radius-full) ──────────────────────────
@@ -227,3 +232,65 @@
   .co-button--secondary { background: var(--co-semantic-surface-secondary); }
   .co-button--stroke { background: transparent; }
 }
+
+/* ═══ Task C2 (Fase 2 Cobalt) — size="sm", variant="soft", full-width,
+   --co-button-border-color / --co-button-icon-color. Todo lo de abajo es
+   aditivo: no reemplaza ni recalcula ninguna regla de arriba. ═══ */
+
+/* ─── VARIANT · SOFT ──────────────────────────────────────────
+   Fondo sólido `--co-semantic-surface-control` (gray-100 en claro / gray-700
+   en oscuro — para eso existe el token; sin backdrop-filter), borde
+   transparente del mismo grosor que el default para no alterar el tamaño. */
+.co-button--soft {
+  background: var(--co-semantic-surface-control);
+  color: var(--co-semantic-text-default);
+  border-color: var(--co-button-border-color, transparent);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+.co-button--soft:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--co-semantic-surface-control), var(--co-semantic-surface-hover));
+}
+
+/* ─── SIZE · SM (32px fijo) ────────────────────────────────────
+   Escala unificada de tallas nuevas del editor: xs=24 · s=28 · sm=32.
+   El radio en "rounded" conserva la fórmula de la talla "s" (radius-full
+   overrideable); en "square" usa border-radius-xs, igual que "square--s". */
+.co-button--rounded.co-button--sm {
+  height: 32px;
+  padding: var(--co-spacing-sm2) var(--co-spacing-md);
+  gap: var(--co-spacing-sm);
+  font-size: var(--co-font-size-12);
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: var(--co-font-letter-spacing-body);
+  border-radius: var(--co-button-radius, var(--co-border-radius-full));
+}
+.co-button--square.co-button--sm {
+  height: 32px;
+  padding: var(--co-spacing-sm2) var(--co-spacing-md);
+  gap: var(--co-spacing-sm);
+  font-size: var(--co-font-size-12);
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: var(--co-font-letter-spacing-body);
+  border-radius: var(--co-border-radius-xs);
+}
+
+/* ─── FULL WIDTH ──────────────────────────────────────────────
+   `full-width` (atributo reflejado de fullWidth): el host pasa de
+   inline-flex a block para poder ocupar el 100% del contenedor. */
+:host([full-width]) {
+  display: block;
+  width: 100%;
+}
+:host([full-width]) .co-button {
+  width: 100%;
+}
+
+/* ─── VARIABLE PÚBLICA · ICON COLOR ───────────────────────────
+   Los co-icon de iconLeft/iconRight se renderizan directo (no via slot),
+   así que este selector alcanza a los dos en cualquier variante/talla. */
+co-icon {
+  color: var(--co-button-icon-color, inherit);
+}

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

@@ -1,16 +1,18 @@
 import { h } from "@stencil/core";
-const ICON_SIZE = { l: 20, m: 18, s: 16, xs: 14 };
+const ICON_SIZE = { l: 20, m: 18, s: 16, xs: 14, sm: 16 };
 /**
  * @slot - Button label text
  */
 export class CoButton {
     constructor() {
-        /** Visual style */
+        /** Visual style. "soft" (Task C2, Fase 2 Cobalt): fondo gray-100 sólido, sin backdrop-filter — pensado para toolbars/paneles del editor. */
         this.variant = 'primary';
         /** Shape: pill or straight corners */
         this.shape = 'rounded';
-        /** Size */
+        /** Size. "sm" (Task C2, Fase 2 Cobalt): 32px fijo — escala unificada de tallas nuevas del editor (xs=24/s=28/sm=32). */
         this.size = 'm';
+        /** Ocupa el 100% del ancho del contenedor (Task C2, Fase 2 Cobalt). Reflejado como atributo `full-width`. */
+        this.fullWidth = false;
         /** Raised elevation — with variant="secondary" renders a white raised button (shadow-sm + inset hairline). */
         this.elevated = false;
         /**
@@ -55,7 +57,7 @@ export class CoButton {
             customStyle.background = this.color;
         if (this.textColor)
             customStyle.color = this.textColor;
-        return (h("button", { key: '651f8d079c09cf21d076aa20564a462a15ca8c4a', class: {
+        return (h("button", { key: 'a095e308b3bea917ecfb4da4f78e9a6c9e3dfba2', class: {
                 'co-button': true,
                 [`co-button--${this.variant}`]: true,
                 [`co-button--${this.shape}`]: true,
@@ -65,7 +67,7 @@ export class CoButton {
                 'co-button--disabled': this.disabled,
             }, style: Object.keys(customStyle).length ? customStyle : undefined, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabelText || undefined, onClick: this.handleClick, part: "button" }, this.iconLeft
             ? h("co-icon", { name: this.iconLeft, weight: this.iconWeight, size: iconSize })
-            : null, h("slot", { key: 'b8c5b230a473fe4a57aa087533186e410db64bed' }, this.label), this.iconRight
+            : null, h("slot", { key: '7a7dfff6e1dc249b423477263e9140183290bf18' }, this.label), this.iconRight
             ? h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }
@@ -87,15 +89,15 @@ export class CoButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'stroke' | 'ghost' | 'danger' | 'success'",
-                    "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\" | \"stroke\" | \"success\"",
+                    "original": "'primary' | 'secondary' | 'stroke' | 'ghost' | 'danger' | 'success' | 'soft'",
+                    "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\" | \"soft\" | \"stroke\" | \"success\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual style"
+                    "text": "Visual style. \"soft\" (Task C2, Fase 2 Cobalt): fondo gray-100 s\u00F3lido, sin backdrop-filter \u2014 pensado para toolbars/paneles del editor."
                 },
                 "getter": false,
                 "setter": false,
@@ -127,15 +129,15 @@ export class CoButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'l' | 'm' | 's' | 'xs'",
-                    "resolved": "\"l\" | \"m\" | \"s\" | \"xs\"",
+                    "original": "'l' | 'm' | 's' | 'xs' | 'sm'",
+                    "resolved": "\"l\" | \"m\" | \"s\" | \"sm\" | \"xs\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Size"
+                    "text": "Size. \"sm\" (Task C2, Fase 2 Cobalt): 32px fijo \u2014 escala unificada de tallas nuevas del editor (xs=24/s=28/sm=32)."
                 },
                 "getter": false,
                 "setter": false,
@@ -143,6 +145,26 @@ export class CoButton {
                 "attribute": "size",
                 "defaultValue": "'m'"
             },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ocupa el 100% del ancho del contenedor (Task C2, Fase 2 Cobalt). Reflejado como atributo `full-width`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
             "elevated": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -10,12 +10,12 @@ export class CoButtonGroup {
         this.disabled = false;
     }
     render() {
-        return (h("div", { key: 'fe4b05941d1bf86586c7e4f2c93fe9644ea027d3', class: {
+        return (h("div", { key: '5975d27cfd432bfd859212059c4bc79d2d8107d2', class: {
                 'co-button-group': true,
                 [`co-button-group--${this.direction}`]: true,
                 [`co-button-group--${this.variant}`]: true,
                 'co-button-group--disabled': this.disabled,
-            }, role: "group" }, h("slot", { key: 'c583ee5dd23aceea08c3178b93b6f1227101e96e' })));
+            }, role: "group" }, h("slot", { key: '90c9338e9d00c71ae09189ebd0e70d8fa11e3825' })));
     }
     static get is() { return "co-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,40 @@
+/**
+ * Fechas MARCADAS de co-calendar (feriados, hitos): se ven distintas pero siguen siendo
+ * seleccionables, a diferencia de `disabledDates`. Lógica pura para testear sin montar.
+ */
+const YMD = /^\d{4}-\d{2}-\d{2}$/;
+/** Array, JSON (`'["2026-12-25"]'`) o CSV (`'2026-12-25, 2027-01-01'`) → string[]. */
+export function normalizeStringArray(v) {
+    if (Array.isArray(v))
+        return v;
+    if (typeof v === 'string' && v.trim()) {
+        const t = v.trim();
+        try {
+            const parsed = JSON.parse(t);
+            if (Array.isArray(parsed))
+                return parsed.map(String);
+        }
+        catch (_a) {
+            /* not JSON — fall back to comma-split */
+        }
+        return t.split(',').map((s) => s.trim()).filter(Boolean);
+    }
+    return [];
+}
+/** Set de `YYYY-MM-DD` válidos para consultar por día en O(1). */
+export function normalizeMarkedDates(v) {
+    return new Set(normalizeStringArray(v).map((s) => s.trim()).filter((s) => YMD.test(s)));
+}
+/** El texto de marca lo da el anfitrión (i18n suya): «25 de diciembre de 2026, Feriado». */
+export function dayAriaLabel(base, marked, markedLabel) {
+    return marked && markedLabel ? `${base}, ${markedLabel}` : base;
+}
+/** `YYYY-MM` → { year, month } (mes 1–12) para anclar la vista; null si no es válido. */
+export function parseViewMonth(v) {
+    const m = /^(\d{4})-(\d{2})$/.exec(String(v !== null && v !== void 0 ? v : '').trim());
+    if (!m)
+        return null;
+    const year = Number(m[1]);
+    const month = Number(m[2]);
+    return month >= 1 && month <= 12 ? { year, month } : null;
+}

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

@@ -177,7 +177,7 @@
   transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out), border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
-.co-calendar__day:hover:not(.co-calendar__day--disabled):not(.co-calendar__day--selected) {
+.co-calendar__day:hover:not(.co-calendar__day--disabled):not(.co-calendar__day--selected):not(.co-calendar__day--marked) {
   background: var(--co-semantic-surface-hover);
 }
 
@@ -200,6 +200,16 @@
   font-weight: 600;
 }
 
+/* MARKED — fechas señaladas (feriados, hitos) que siguen siendo seleccionables.
+ * Va ANTES de selected/range: un día marcado Y elegido se lee como elegido.
+ * El color lo puede fijar el anfitrión con --co-calendar-marked-bg / -fg. */
+.co-calendar__day--marked {
+  background: var(--co-calendar-marked-bg, var(--co-color-primary-rosado));
+  border-color: var(--co-calendar-marked-bg, var(--co-color-primary-rosado));
+  color: var(--co-calendar-marked-fg, var(--co-color-base-blanco));
+  font-weight: 600;
+}
+
 /* SELECTED — solid fill + inverse text. */
 .co-calendar__day--selected {
   background: var(--co-semantic-surface-primary);

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { addDays, addMonths, compareYMD, getFullDateLabel, getMonthLabel, getMonthMatrix, getWeekdayLabels, isDisabled, isValidYMD, parseISO, startOfMonth, todayYMD, } from "@prolibu-suite/cobalt-date-utils";
 import { getDateStrings } from "../../utils/dateI18n";
+import { dayAriaLabel, normalizeMarkedDates, normalizeStringArray, parseViewMonth } from "./calendarMarks";
 /**
  * Accessible month calendar (single-date selection).
  *
@@ -90,8 +91,19 @@ export class CoCalendar {
         const a = parseISO(anchor);
         this.viewYear = a.year;
         this.viewMonth = a.month;
+        this.applyMonthProp();
         this.focused = this.initialFocus();
     }
+    onMonthChange() {
+        this.applyMonthProp();
+    }
+    applyMonthProp() {
+        const m = parseViewMonth(this.month);
+        if (!m)
+            return;
+        this.viewYear = m.year;
+        this.viewMonth = m.month;
+    }
     onValueChange() {
         if (!this.selectedValue)
             return;
@@ -271,7 +283,10 @@ export class CoCalendar {
             inRange: compareYMD(value, lo) > 0 && compareYMD(value, hi) < 0,
         };
     }
-    dayClass(value, inMonth, disabled) {
+    get markedSet() {
+        return normalizeMarkedDates(this.markedDates);
+    }
+    dayClass(value, inMonth, disabled, marked = false) {
         const isToday = compareYMD(value, todayYMD()) === 0;
         if (this.mode === 'range') {
             const { isStart, isEnd, inRange } = this.rangeFlags(value);
@@ -284,6 +299,7 @@ export class CoCalendar {
                 'co-calendar__day--range-end': isEnd,
                 'co-calendar__day--in-range': inRange,
                 'co-calendar__day--disabled': disabled,
+                'co-calendar__day--marked': marked,
             };
         }
         const selected = this.selectedValue;
@@ -294,6 +310,7 @@ export class CoCalendar {
             'co-calendar__day--today': isToday && !isSelected,
             'co-calendar__day--selected': isSelected,
             'co-calendar__day--disabled': disabled,
+            'co-calendar__day--marked': marked,
         };
     }
     headerTitle() {
@@ -312,8 +329,10 @@ export class CoCalendar {
         // leía como una franja en blanco al pie del panel (reporte 2026-09-16). El
         // teclado no la necesita: moveFocus ya cambia de mes al salir de él.
         const matrix = getMonthMatrix(this.viewYear, this.viewMonth, this.firstDayOfWeek).filter((week) => week.some((cell) => cell.inMonth));
+        const markedSet = this.markedSet;
         return (h("div", { class: "co-calendar__grid", part: "grid", role: "grid", "aria-label": monthLabel, onKeyDown: this.handleGridKeyDown }, h("div", { class: "co-calendar__row co-calendar__row--dow", role: "row" }, shortLabels.map((lbl, i) => (h("span", { class: "co-calendar__dow", role: "columnheader", "aria-label": longLabels[i] }, lbl)))), matrix.map((week) => (h("div", { class: "co-calendar__row", role: "row" }, week.map((cell) => {
             const disabled = this.isDayDisabled(cell.value);
+            const marked = markedSet.has(cell.value);
             const isFocused = compareYMD(cell.value, this.focused) === 0;
             const isToday = compareYMD(cell.value, todayYMD()) === 0;
             let isSelectedAria;
@@ -326,7 +345,7 @@ export class CoCalendar {
                 isSelectedAria = !!selected && compareYMD(cell.value, selected) === 0;
             }
             const dayNum = parseISO(cell.value).day;
-            return (h("button", { type: "button", role: "gridcell", "data-date": cell.value, class: this.dayClass(cell.value, cell.inMonth, disabled), tabIndex: isFocused ? 0 : -1, "aria-selected": isSelectedAria ? 'true' : 'false', "aria-current": isToday ? 'date' : undefined, "aria-disabled": disabled ? 'true' : undefined, "aria-label": getFullDateLabel(cell.value, this.locale), onClick: () => this.selectDay(cell.value), onMouseEnter: () => this.handleDayHover(cell.value), onMouseLeave: () => this.handleDayHover(null) }, dayNum));
+            return (h("button", { type: "button", role: "gridcell", "data-date": cell.value, class: this.dayClass(cell.value, cell.inMonth, disabled, marked), tabIndex: isFocused ? 0 : -1, "aria-selected": isSelectedAria ? 'true' : 'false', "aria-current": isToday ? 'date' : undefined, "aria-disabled": disabled ? 'true' : undefined, "aria-label": dayAriaLabel(getFullDateLabel(cell.value, this.locale), marked, this.markedLabel), onClick: () => this.selectDay(cell.value), onMouseEnter: () => this.handleDayHover(cell.value), onMouseLeave: () => this.handleDayHover(null) }, dayNum));
         }))))));
     }
     renderMonths() {
@@ -367,7 +386,7 @@ export class CoCalendar {
     render() {
         var _a, _b;
         const t = getDateStrings(this.locale);
-        return (h("div", { key: '3b9f57fa8513746cb3133d80d574a0fafbc8b31e', class: "co-calendar", part: "root" }, h("div", { key: '6b3b0f8d1c582abbbf04c8b936486bd1e3fedaec', class: "co-calendar__header", part: "header" }, h("button", { key: '57f854f84162a5b09119385339c9993ee25cef72', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: '772ec0dfb48dfee33d506549e68ab7598ec0cf00', name: "caret-left", size: 16 })), h("button", { key: 'b9f3851082fbbe2d5f696dd0a51c442410b15fa1', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: '3f660d39a851c97f299e6a6cc8c0ad8b5ed4ee7f', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '6ac9d1af5f3dc36a34e94e129ab2db313dee74d2', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: 'c8c962be3435e108f81968f6dde5f6f481c40733', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
+        return (h("div", { key: 'd093188dc77cea7856a4126828167ccd0e97a28a', class: "co-calendar", part: "root" }, h("div", { key: '9b133e1e7c2538df80ae86d463ac80bd2262364c', class: "co-calendar__header", part: "header" }, h("button", { key: 'c7b5f9407556ab1c68815c2896ee3ea6d87866ee', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: 'e76e3550772f7456d44fca6229a92146f4849ffc', name: "caret-left", size: 16 })), h("button", { key: '7e8d2620e5d73f8ab17a0e6f163e4fc7859db0b9', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: '0f113778ee2f22843627a0fb6f0550e7fd861774', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: 'e49b124dadf06b2a5bf7f25aab160a80f4d1a539', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: 'e1993eddaa8a0c33179e453dadd4996f2d5fd4fc', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
     }
     static get is() { return "co-calendar"; }
     static get encapsulation() { return "shadow"; }
@@ -517,6 +536,63 @@ export class CoCalendar {
                 "reflect": false,
                 "attribute": "disabled-dates"
             },
+            "markedDates": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fechas `YYYY-MM-DD` que se MARCAN (feriados, hitos) sin deshabilitarlas: se pueden\nseleccionar igual. Array, JSON o CSV, como `disabledDates`. Color por la custom\nproperty `--co-calendar-marked-bg` (default: token de Cobalt)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "marked-dates"
+            },
+            "markedLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto accesible que se suma al d\u00EDa marcado (\u00ABFeriado\u00BB). Lo traduce el anfitri\u00F3n."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "marked-label"
+            },
+            "month": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Mes que muestra la vista (`YYYY-MM`), por encima del ancla de la selecci\u00F3n. Para\nponer dos calendarios lado a lado (inicio y fin de un rango en meses distintos)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "month"
+            },
             "disabledDaysOfWeek": {
                 "type": "string",
                 "mutable": false,
@@ -682,6 +758,9 @@ export class CoCalendar {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "month",
+                "methodName": "onMonthChange"
+            }, {
                 "propName": "value",
                 "methodName": "onValueChange"
             }];
@@ -696,23 +775,6 @@ function startOfWeek(value, firstDayOfWeek) {
     const back = (dow - firstDayOfWeek + 7) % 7;
     return addDays(value, -back);
 }
-function normalizeStringArray(v) {
-    if (Array.isArray(v))
-        return v;
-    if (typeof v === 'string' && v.trim()) {
-        const t = v.trim();
-        try {
-            const parsed = JSON.parse(t);
-            if (Array.isArray(parsed))
-                return parsed.map(String);
-        }
-        catch (_a) {
-            /* not JSON — fall back to comma-split */
-        }
-        return t.split(',').map((s) => s.trim()).filter(Boolean);
-    }
-    return [];
-}
 function normalizeNumberArray(v) {
     if (Array.isArray(v))
         return v;