@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -9,6 +9,12 @@ import { Host, h } from "@stencil/core";
  *
  * Conventions mirror `co-menu-item`: the `current` crumb paints medium weight +
  * text-default ink; earlier crumbs are regular weight + muted (gray-500).
+ *
+ * Wrapper Vue: `CoBreadcrumbItem` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @slot - Contenido propio en lugar de `label`.
+ * @part breadcrumb-item - Contenedor de la miga (separador + contenido).
+ * @part content - Parte clickeable (ícono y texto).
  */
 export class CoBreadcrumbItem {
     constructor() {
@@ -29,10 +35,10 @@ export class CoBreadcrumbItem {
         };
     }
     render() {
-        return (h(Host, { key: '16deecfc675429362263d3afb7257025e9170b26', part: "breadcrumb-item", class: {
+        return (h(Host, { key: 'e751e769b86efb5c9f929f818c6a7a020beeace6', 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: '65c70c55e16037e97c35c3ad65548b8e15d1e07d', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: '8e70db08814fa611cacd2e78bb96ece6a2d5e9db', name: this.separator, size: 13 })), h("span", { key: 'acc0e0a8a5b6e18aac7af27f4b5971bb4f5ed054', 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: '4f22d7482c0a70b3973c2a66d1ba84db4c07445d', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: 'b16cbcbe67336c57230929f45985262ebb6ae093', name: this.icon, size: 16 }))), h("span", { key: '4dd03fea8de55ace99325fa57afdcb47c9b36e54', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: 'ec8a0a40d2e1ccbabde80b724eb5a473e123ac7d' })))));
     }
     static get is() { return "co-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,11 @@
+/**
+ * @prop --co-button-border-color: Color del borde, en todas las variantes (gana sobre `--co-button-border`).
+ * @prop --co-button-border: Borde de la variante `secondary` (knob anterior; `--co-button-border-color` le gana).
+ * @prop --co-button-bg: Superficie de la variante `secondary` (se mezcla al 55% con transparencia).
+ * @prop --co-button-color: Color de texto de la variante `secondary`.
+ * @prop --co-button-radius: Radio del botón con `shape="rounded"` (default pill).
+ * @prop --co-button-icon-color: Color de los íconos de `icon-left`/`icon-right` (default: el del texto).
+ */
 :host {
   display: inline-flex;
 }
@@ -39,7 +47,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: 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 +57,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 +78,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 +240,65 @@
   .co-button--secondary { background: var(--co-semantic-surface-secondary); }
   .co-button--stroke { background: transparent; }
 }
+
+/* ═══ Tallas y variantes del editor — 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,24 @@
 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 };
 /**
+ * Botón de acción con texto e íconos opcionales. `variant` define el peso
+ * visual (`primary` para la acción principal), `size` la talla y `full-width`
+ * lo estira al ancho del contenedor. Wrapper Vue: `CoButton` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
  * @slot - Button label text
+ * @part button - El `<button>` nativo interno.
  */
 export class CoButton {
     constructor() {
-        /** Visual style */
+        /** Visual style. "soft": fondo sólido `--co-semantic-surface-control` (gray-100 en claro), sin backdrop-filter — pensado para toolbars y paneles del editor. */
         this.variant = 'primary';
         /** Shape: pill or straight corners */
         this.shape = 'rounded';
-        /** Size */
+        /** Size: `l`, `m` (default), `s`, `xs`; `sm` = 32px fijo, de la escala compacta del editor (xs=24/s=28/sm=32). Un valor fuera de la lista no da error: el botón queda sin estilos de talla (sin padding ni tamaño de fuente). */
         this.size = 'm';
+        /** Ocupa el 100% del ancho del contenedor. 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 +63,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: 'e77a3b67e23b2690a818e6ad9aa38b21b4c8f972', class: {
                 'co-button': true,
                 [`co-button--${this.variant}`]: true,
                 [`co-button--${this.shape}`]: true,
@@ -65,7 +73,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: 'ee52eb057c04ee3e1f5a5b2e87dc778a338d9887' }, this.label), this.iconRight
             ? h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }
@@ -87,15 +95,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\": fondo s\u00F3lido `--co-semantic-surface-control` (gray-100 en claro), sin backdrop-filter \u2014 pensado para toolbars y paneles del editor."
                 },
                 "getter": false,
                 "setter": false,
@@ -127,15 +135,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: `l`, `m` (default), `s`, `xs`; `sm` = 32px fijo, de la escala compacta del editor (xs=24/s=28/sm=32). Un valor fuera de la lista no da error: el bot\u00F3n queda sin estilos de talla (sin padding ni tama\u00F1o de fuente)."
                 },
                 "getter": false,
                 "setter": false,
@@ -143,6 +151,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. 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

@@ -1,4 +1,10 @@
 import { h } from "@stencil/core";
+/**
+ * Grupo de `co-button` unidos en una fila o columna, con variante y talla
+ * compartidas. Wrapper Vue: `CoButtonGroup` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @slot - Los `co-button` del grupo.
+ */
 export class CoButtonGroup {
     constructor() {
         /** Visual variant applied to the group container */
@@ -7,15 +13,16 @@ export class CoButtonGroup {
         this.size = 'm';
         /** Orientation */
         this.direction = 'row';
+        /** Deshabilita el grupo entero (atenuado y sin clicks). */
         this.disabled = false;
     }
     render() {
-        return (h("div", { key: 'fe4b05941d1bf86586c7e4f2c93fe9644ea027d3', class: {
+        return (h("div", { key: '2240bc00c44e532340b3ae288cc9df099b9e1846', 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: '0a719f1a5f21883f5923cd9f20a818f467339846' })));
     }
     static get is() { return "co-button-group"; }
     static get encapsulation() { return "shadow"; }
@@ -103,7 +110,7 @@ export class CoButtonGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el grupo entero (atenuado y sin clicks)."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,3 +1,11 @@
+/**
+ * @prop --co-calendar-day-size: Lado de cada celda de día (default 36px; 44px en táctil).
+ * @prop --co-calendar-width: Ancho del calendario (default: el de sus 7 celdas).
+ * @prop --co-calendar-col: Ancho de cada columna de la grilla (default: la celda).
+ * @prop --co-calendar-day-width: Ancho del botón de día (default: la celda).
+ * @prop --co-calendar-marked-bg: Fondo de los días de `markedDates` (default rosado de marca).
+ * @prop --co-calendar-marked-fg: Color del número en los días marcados (default blanco).
+ */
 :host {
   display: inline-block;
   font-family: var(--co-font-family-primary);
@@ -177,7 +185,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 +208,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).
  *
@@ -13,6 +14,8 @@ import { getDateStrings } from "../../utils/dateI18n";
  * chosen date. Today and selected are deliberately different visual states.
  *
  * @part root - The calendar container
+ * Wrapper Vue: `CoCalendar` de `@prolibu-suite/cobalt-vue`.
+ *
  * @part header - Month navigation header
  * @part grid - The day grid
  */
@@ -90,8 +93,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 +285,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 +301,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 +312,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 +331,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 +347,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 +388,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: '5ecdc23692eb69b8dc86b225857f51a3acf54838', class: "co-calendar", part: "root" }, h("div", { key: 'b66924b6b59f91d284210c6a0ed24294f211a5b7', class: "co-calendar__header", part: "header" }, h("button", { key: 'a4d52f3c02081b03f872a95955986c6351f9ca44', 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: '6eaf089247fc85477a1bd9095af2c1c557d01bb3', name: "caret-left", size: 16 })), h("button", { key: '473815fa6114c82f601bea27e919b5c4546648f2', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: '923647a98317c5e42ec7655ac21eed3e645224b6', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '1ccbdf76cc5574021894f8f1c6bd381b9b524cfa', 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: '4b06c0827034a9f6924f1e80a51fdef924a0f8d1', 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 +538,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 +760,9 @@ export class CoCalendar {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "month",
+                "methodName": "onMonthChange"
+            }, {
                 "propName": "value",
                 "methodName": "onValueChange"
             }];
@@ -696,23 +777,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;

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);