@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

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

@@ -1,9 +1,15 @@
 import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
+import { initOverlayScroll } from "../../utils/overlayScroll";
 export class CoAutocomplete {
     constructor() {
+        /** Whether the field is required (renders a required marker on the label). */
+        this.required = false;
         this.placeholder = 'Search…';
         this.disabled = false;
         this.clearable = true;
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
         this.status = 'default';
         /** Pre-loaded or server-returned options */
         this.options = '[]';
@@ -112,10 +118,29 @@ export class CoAutocomplete {
         };
         return map[this.status] || null;
     }
+    componentWillLoad() {
+        this.syncQueryFromValue();
+    }
     onOptionsChange() {
         // Whenever host provides new options, open if query has enough chars
         if (this.query.length >= this.minChars)
             this.isOpen = true;
+        // Sync query only if not actively typing (handles async option loading)
+        if (!this.focused) {
+            this.syncQueryFromValue();
+        }
+    }
+    onValueChange() {
+        this.syncQueryFromValue();
+    }
+    syncQueryFromValue() {
+        if (!this.multiple && typeof this.value === 'string' && this.value) {
+            const opt = this.parsedOptions.find(o => o.value === this.value);
+            this.query = opt ? opt.label : this.value;
+        }
+        else if (!this.multiple && !this.value) {
+            this.query = '';
+        }
     }
     handleDocumentClick(e) {
         if (!this.el.contains(e.target)) {
@@ -132,19 +157,35 @@ export class CoAutocomplete {
         const offsetY = startIdx * ITEM_HEIGHT;
         return { totalHeight, startIdx, endIdx, offsetY };
     }
+    // OverlayScrollbars: init when the dropdown is open, tear down when it closes.
+    // Virtual scroll keeps working — scrollTop is read from the OS viewport.
+    componentDidRender() {
+        if (this.isOpen && this.optionsEl && !this.osInstance) {
+            this.osInstance = initOverlayScroll(this.optionsEl, (vp) => { this.scrollTop = vp.scrollTop; });
+        }
+        else if (!this.isOpen && this.osInstance) {
+            this.osInstance.destroy();
+            this.osInstance = undefined;
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.osInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.osInstance = undefined;
+    }
     render() {
         const options = this.parsedOptions;
         const selected = this.selectedValues;
-        return (h("div", { key: 'dbd82d4fea4be6c88ccb2d7ad1668930287f3bf4', class: {
+        return (h("div", { key: 'ce31954b886934fec694f6c08e8fd0ec358aa8e6', class: {
                 'co-autocomplete': true,
                 'co-autocomplete--open': this.isOpen,
                 'co-autocomplete--disabled': this.disabled,
                 'co-autocomplete--focused': this.focused,
                 [`co-autocomplete--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '619ff765f8c68972c4d853522c94dafbd413031f', class: "co-autocomplete__labels" }, this.label && h("label", { key: '236092f42ae1bc8ef6fff3531d1c02b1705377d0', class: "co-autocomplete__label" }, this.label), this.secondaryLabel && h("span", { key: 'df13b42541d364a4acba43167827a38b0b27a87c', class: "co-autocomplete__secondary-label" }, this.secondaryLabel))), h("div", { key: '598863a3ee42e0a01f6af5812b14f3407a0d73b6', class: "co-autocomplete__field" }, this.iconLeft && h("co-icon", { key: '0d3aebb200b280a8f2aadaeba74aa45da06c35d7', name: this.iconLeft, size: 16, class: "co-autocomplete__icon" }), this.multiple && selected.length > 0 && (h("div", { key: '5148b7f3a278fe9da74069f0da7d6a19dad2ee91', class: "co-autocomplete__chips" }, selected.map(val => {
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'b71d3070d2bcce5adf61e1e88d06909b416ee4be', class: "co-autocomplete__labels" }, this.label && h("label", { key: 'add95254b2680cbb8f97a9b5b396ad4d89e1068e', class: "co-autocomplete__label" }, this.label, h(RequiredMark, { key: 'e92fe73557be2f133615b1271d5c5607a568ce42', required: this.required })), this.secondaryLabel && h("span", { key: 'b1000110ba12d6ebd8e59de414053bb4181c2ae8', class: "co-autocomplete__secondary-label" }, this.secondaryLabel))), h("div", { key: 'd47ff0409a8b2f061fd4b1327c86a6eb7ab4d5a0', class: "co-autocomplete__field" }, this.iconLeft && h("co-icon", { key: '490f639278ac1d92f8e5da2526941ae1eca155d6', name: this.iconLeft, size: 16, class: "co-autocomplete__icon" }), this.multiple && selected.length > 0 && (h("div", { key: '72c1e36ff8f609803a04183b500b73fd66638b5e', class: "co-autocomplete__chips" }, selected.map(val => {
             const opt = this.parsedOptions.find(o => o.value === val);
             return (h("co-chip", { label: opt ? opt.label : val, size: "small", removable: true, onCoRemove: () => this.handleChipRemove(val) }));
-        }))), h("input", { key: 'd8f3fb968e2b8ff43d2491b1a7953932e911a9b6', ref: el => (this.inputEl = el), class: "co-autocomplete__input", type: "text", value: this.query, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus }), this.loading && h("div", { key: 'b4dfcbd7f46b446eb556db8c917856ba5e5f204a', class: "co-autocomplete__spinner" }), this.clearable && (this.hasValue || this.query) && !this.disabled && (h("button", { key: 'aeac31c30449143fe88be0b91631a630a18c6d55', class: "co-autocomplete__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '6709b702bb00bc1bb7da642f5b2c732a4779c668', name: "x-circle", size: 16, weight: "fill" })))), this.isOpen && (h("div", { key: '2839b0fa43c6a8680aa38b6a042460d1982a78ee', class: "co-autocomplete__dropdown" }, this.loading && options.length === 0 ? (h("div", { class: "co-autocomplete__loading" }, h("co-loader", { size: "sm" }))) : options.length === 0 ? (h("div", { class: "co-autocomplete__empty" }, this.emptyText)) : (h("div", { class: "co-autocomplete__options", onScroll: this.handleOptionsScroll }, (() => {
+        }))), h("input", { key: '88baf2b40c8507295f650798bc010d559ee3bd4c', ref: el => (this.inputEl = el), class: "co-autocomplete__input", type: "text", value: this.query, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus }), this.loading && h("div", { key: 'f8f1913882e0974fa5a1d10181ef74a1f64e4186', class: "co-autocomplete__spinner" }), this.clearable && (this.hasValue || this.query) && !this.disabled && (h("button", { key: '69bd3289badc18d1db76a883d7714403946ea754', class: "co-autocomplete__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'a5efa91bb9ce0e4d0eac8825a81dddc6ad91021e', name: "x-circle", size: 16, weight: "fill" })))), this.isOpen && (h("div", { key: 'b466e95c24e6ae654708998c3bc7d5f6fadcda46', class: "co-autocomplete__dropdown" }, this.loading && options.length === 0 ? (h("div", { class: "co-autocomplete__loading" }, h("co-loader", { size: "sm" }))) : options.length === 0 ? (h("div", { class: "co-autocomplete__empty" }, this.emptyText)) : (h("div", { class: "co-autocomplete__options", ref: el => (this.optionsEl = el), onScroll: this.handleOptionsScroll }, (() => {
             const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
             return (h("div", { class: "co-autocomplete__virtual-spacer", style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { style: { position: 'absolute', top: `${offsetY}px`, left: '0', right: '0' } }, options.slice(startIdx, endIdx).map(opt => {
                 const isSelected = selected.includes(opt.value);
@@ -155,7 +196,7 @@ export class CoAutocomplete {
                         'co-autocomplete__option--disabled': isDisabled,
                     }, onClick: () => !isDisabled && this.handleOptionClick(opt.value) }, opt.icon && h("co-icon", { name: opt.icon, size: 20, class: "co-autocomplete__option-icon" }), h("span", { class: "co-autocomplete__option-label" }, opt.label), isSelected && h("co-icon", { name: "check", size: 16, class: "co-autocomplete__option-check" })));
             }))));
-        })())))), this.helperText && (h("div", { key: '6963253e4d2a6032c12867223a0cb443ac20e9a9', class: `co-autocomplete__helper co-autocomplete__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '58ecb88fc2d2584dc425e66c6b90644369a3294f', name: this.statusIcon, size: 14, weight: "fill", class: "co-autocomplete__helper-icon" }), h("span", { key: '65d7364007679d734d0774558441bd4d473cd42b', class: "co-autocomplete__helper-text" }, this.helperText)))));
+        })())))), this.helperText && (h("div", { key: '5f6a00e92f6415c3ceaf04daf0cc9453b25c8090', class: `co-autocomplete__helper co-autocomplete__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '46ec66a06fd5d05b7aa715a23abe65586aacfdf3', name: this.statusIcon, size: 14, weight: "fill", class: "co-autocomplete__helper-icon" }), h("span", { key: 'fb8a087ea50ccb8a3adc4d1f2a117d185915b417', class: "co-autocomplete__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-autocomplete"; }
     static get encapsulation() { return "shadow"; }
@@ -190,6 +231,26 @@ export class CoAutocomplete {
                 "reflect": false,
                 "attribute": "label"
             },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required (renders a required marker on the label)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
             "secondaryLabel": {
                 "type": "string",
                 "mutable": false,
@@ -307,6 +368,26 @@ export class CoAutocomplete {
                 "reflect": false,
                 "attribute": "helper-text"
             },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            },
             "status": {
                 "type": "string",
                 "mutable": false,
@@ -536,6 +617,9 @@ export class CoAutocomplete {
         return [{
                 "propName": "options",
                 "methodName": "onOptionsChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
             }];
     }
     static get listeners() {

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

@@ -23,6 +23,13 @@
   text-transform: uppercase;
 }
 
+.co-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
 .co-avatar--square {
   border-radius: var(--co-border-radius-xs);
 }

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

@@ -16,7 +16,7 @@ const FONT_SIZE_MAP = {
 };
 export class CoAvatar {
     constructor() {
-        /** Display type: text shows initials, icon shows a Phosphor icon */
+        /** Display type: text shows initials, icon shows a Phosphor icon, image shows a picture */
         this.type = 'text';
         /** Size of the avatar */
         this.size = 'md';
@@ -26,19 +26,24 @@ export class CoAvatar {
         this.iconWeight = 'regular';
         /** Shape of the avatar */
         this.shape = 'circle';
+        this.imgFailed = false;
+        this.handleImgError = () => {
+            this.imgFailed = true;
+        };
     }
     render() {
         var _a, _b, _c;
         const dim = (_a = SIZE_MAP[this.size]) !== null && _a !== void 0 ? _a : 56;
         const iconSize = (_b = ICON_SIZE_MAP[this.size]) !== null && _b !== void 0 ? _b : 24;
         const fontSize = (_c = FONT_SIZE_MAP[this.size]) !== null && _c !== void 0 ? _c : 'var(--co-font-size-18)';
-        return (h("div", { key: '6065912f7c2f812a8313048c727c644f2066845e', class: {
+        const showImage = this.type === 'image' && this.src && !this.imgFailed;
+        return (h("div", { key: '8d537f60b1cefc91c98b0bfd5bdbfc9af8415868', class: {
                 'co-avatar': true,
                 [`co-avatar--${this.size}`]: true,
                 [`co-avatar--${this.type}`]: true,
                 'co-avatar--square': this.shape === 'square',
                 'co-avatar--light': !!this.color && isLightColor(this.color),
-            }, style: Object.assign({ width: `${dim}px`, height: `${dim}px`, fontSize }, (this.color ? { background: this.color } : {})), part: "avatar", role: "img", "aria-label": this.type === 'text' ? this.text : this.icon }, this.type === 'icon' ? (h("co-icon", { name: this.icon, weight: this.iconWeight, size: iconSize })) : (h("span", { class: "co-avatar__text" }, this.text))));
+            }, style: Object.assign({ width: `${dim}px`, height: `${dim}px`, fontSize }, (this.color ? { background: this.color } : {})), part: "avatar", role: "img", "aria-label": this.type === 'text' ? this.text : this.icon }, showImage ? (h("img", { class: "co-avatar__img", src: this.src, alt: this.text || '', onError: this.handleImgError })) : this.type === 'icon' ? (h("co-icon", { name: this.icon, weight: this.iconWeight, size: iconSize })) : (h("span", { class: "co-avatar__text" }, this.text))));
     }
     static get is() { return "co-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -58,15 +63,15 @@ export class CoAvatar {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'text' | 'icon'",
-                    "resolved": "\"icon\" | \"text\"",
+                    "original": "'text' | 'icon' | 'image'",
+                    "resolved": "\"icon\" | \"image\" | \"text\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Display type: text shows initials, icon shows a Phosphor icon"
+                    "text": "Display type: text shows initials, icon shows a Phosphor icon, image shows a picture"
                 },
                 "getter": false,
                 "setter": false,
@@ -113,6 +118,25 @@ export class CoAvatar {
                 "reflect": false,
                 "attribute": "text"
             },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image URL (type=\"image\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
             "icon": {
                 "type": "string",
                 "mutable": false,
@@ -194,4 +218,9 @@ export class CoAvatar {
             }
         };
     }
+    static get states() {
+        return {
+            "imgFailed": {}
+        };
+    }
 }

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

@@ -38,30 +38,33 @@
   color: var(--co-semantic-text-default);
 }
 
-/* ─── SIZES · ROUNDED (radius-full) ────────────────────────── */
+/* ─── SIZES · ROUNDED (radius-full) ──────────────────────────
+   Radius is overridable via --co-button-radius so a container can re-shape
+   default (rounded) buttons without setting shape="square" per button —
+   e.g. co-modal makes its footer buttons square. */
 .co-button--rounded.co-button--l {
   padding: var(--co-spacing-xl) var(--co-spacing-2xl);
   gap: var(--co-spacing-md);
   font-size: var(--co-font-size-18);
-  border-radius: var(--co-border-radius-full);
+  border-radius: var(--co-button-radius, var(--co-border-radius-full));
 }
 .co-button--rounded.co-button--m {
   padding: var(--co-spacing-lg) var(--co-spacing-xl);
   gap: var(--co-spacing-md);
   font-size: var(--co-font-size-16);
-  border-radius: var(--co-border-radius-full);
+  border-radius: var(--co-button-radius, var(--co-border-radius-full));
 }
 .co-button--rounded.co-button--s {
   padding: var(--co-spacing-md) var(--co-spacing-lg);
   gap: var(--co-spacing-sm2);
   font-size: var(--co-font-size-14);
-  border-radius: var(--co-border-radius-full);
+  border-radius: var(--co-button-radius, var(--co-border-radius-full));
 }
 .co-button--rounded.co-button--xs {
   padding: var(--co-spacing-md) var(--co-spacing-lg);
   gap: var(--co-spacing-sm2);
   font-size: var(--co-font-size-12);
-  border-radius: var(--co-border-radius-full);
+  border-radius: var(--co-button-radius, var(--co-border-radius-full));
 }
 
 /* ─── SIZES · SQUARE ────────────────────────────────────────── */

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

@@ -37,15 +37,20 @@ export class CoButton {
     render() {
         var _a;
         const iconSize = (_a = ICON_SIZE[this.size]) !== null && _a !== void 0 ? _a : 18;
-        return (h("button", { key: '6e8ec1767dafc2feecf773456ad2a1143bcc0fc0', class: {
+        const customStyle = {};
+        if (this.color)
+            customStyle.background = this.color;
+        if (this.textColor)
+            customStyle.color = this.textColor;
+        return (h("button", { key: 'e4851bcf865f7588c2732939375d66764fcf43fe', class: {
                 'co-button': true,
                 [`co-button--${this.variant}`]: true,
                 [`co-button--${this.shape}`]: true,
                 [`co-button--${this.size}`]: true,
                 'co-button--disabled': this.disabled,
-            }, type: this.type, disabled: this.disabled, onClick: this.handleClick, part: "button" }, this.iconLeft
+            }, style: Object.keys(customStyle).length ? customStyle : undefined, type: this.type, disabled: this.disabled, onClick: this.handleClick, part: "button" }, this.iconLeft
             ? h("co-icon", { name: this.iconLeft, weight: this.iconWeight, size: iconSize })
-            : null, h("slot", { key: 'f1bb85bd1ad4d934e529b40273c65107e92102aa' }, this.label), this.iconRight
+            : null, h("slot", { key: '83c41e8362c71147f909e1e82fd199233dcf8892' }, this.label), this.iconRight
             ? h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }
@@ -239,6 +244,44 @@ export class CoButton {
                 "reflect": false,
                 "attribute": "type",
                 "defaultValue": "'button'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom background color (CSS value or token, e.g. \"var(--co-color-secondary-rojo-100)\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "textColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text/icon color (CSS value or token, e.g. \"var(--co-color-base-blanco)\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-color"
             }
         };
     }

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

@@ -0,0 +1,236 @@
+:host {
+  display: inline-block;
+  font-family: var(--co-font-family-primary);
+  /* Day-cell size. Bumped to 44px on touch via [data-touch] (mobile, Fase 7). */
+  --co-calendar-day-size: 36px;
+}
+
+:host([data-touch]) {
+  --co-calendar-day-size: 44px;
+}
+
+.co-calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-sm);
+  width: max-content;
+}
+
+/* ── Header ──────────────────────────────────────────────── */
+.co-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--co-spacing-xs);
+}
+
+.co-calendar__month {
+  font-size: var(--co-font-size-14);
+  font-weight: 600;
+  color: var(--co-semantic-text-default);
+  text-transform: capitalize;
+}
+
+/* Clickable title (switches day → month → year views). */
+.co-calendar__title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--co-spacing-xxs);
+  background: none;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--co-font-size-14);
+  font-weight: 600;
+  color: var(--co-semantic-text-default);
+  text-transform: capitalize;
+  padding: var(--co-spacing-xxs) var(--co-spacing-sm);
+  border-radius: var(--co-border-radius-xs);
+}
+.co-calendar__title:hover {
+  background: var(--co-semantic-surface-hover);
+}
+.co-calendar__title:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+.co-calendar__title-caret {
+  color: var(--co-semantic-text-muted);
+}
+
+/* Month / year picker grid. */
+.co-calendar__panel {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--co-spacing-xs);
+  width: calc(var(--co-calendar-day-size) * 7 + 12px);
+  padding-top: var(--co-spacing-xs);
+}
+
+.co-calendar__cell {
+  height: calc(var(--co-calendar-day-size) + 8px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--co-border-radius-xs);
+  font-family: inherit;
+  font-size: var(--co-font-size-14);
+  color: var(--co-semantic-text-default);
+  cursor: pointer;
+  text-transform: capitalize;
+  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
+}
+.co-calendar__cell:hover:not(.co-calendar__cell--disabled):not(.co-calendar__cell--selected) {
+  background: var(--co-semantic-surface-hover);
+}
+.co-calendar__cell:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+.co-calendar__cell--muted {
+  color: var(--co-semantic-text-muted);
+}
+.co-calendar__cell--today {
+  border-color: var(--co-color-primary-azul);
+  font-weight: 600;
+}
+.co-calendar__cell--selected {
+  background: var(--co-color-primary-azul);
+  border-color: var(--co-color-primary-azul);
+  color: var(--co-color-base-blanco, #fff);
+  font-weight: 600;
+}
+.co-calendar__cell--disabled {
+  color: var(--co-semantic-text-disabled);
+  cursor: not-allowed;
+}
+
+.co-calendar__nav {
+  background: none;
+  border: 0;
+  cursor: pointer;
+  padding: var(--co-spacing-xs);
+  border-radius: var(--co-border-radius-xxs);
+  display: inline-flex;
+  align-items: center;
+  color: var(--co-semantic-text-default);
+}
+.co-calendar__nav:hover {
+  background: var(--co-semantic-surface-hover);
+}
+.co-calendar__nav:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+
+/* ── Grid ────────────────────────────────────────────────── */
+.co-calendar__grid {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.co-calendar__row {
+  display: grid;
+  grid-template-columns: repeat(7, var(--co-calendar-day-size));
+  gap: 2px;
+}
+
+.co-calendar__row--dow {
+  margin-bottom: 2px;
+}
+
+.co-calendar__dow {
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--co-font-size-10, 10px);
+  font-weight: 600;
+  color: var(--co-semantic-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* ── Day cell ────────────────────────────────────────────── */
+.co-calendar__day {
+  width: var(--co-calendar-day-size);
+  height: var(--co-calendar-day-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--co-border-radius-xs);
+  font-size: var(--co-font-size-14);
+  font-family: inherit;
+  color: var(--co-semantic-text-default);
+  cursor: pointer;
+  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
+}
+
+.co-calendar__day:hover:not(.co-calendar__day--disabled):not(.co-calendar__day--selected) {
+  background: var(--co-semantic-surface-hover);
+}
+
+.co-calendar__day:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+
+/* Outside-month days are muted but still navigable. */
+.co-calendar__day--outside {
+  color: var(--co-semantic-text-muted);
+}
+
+/*
+ * TODAY — a subtle ring only. Deliberately distinct from `selected` so the two
+ * never read the same (hard requirement).
+ */
+.co-calendar__day--today {
+  border-color: var(--co-color-primary-azul);
+  font-weight: 600;
+}
+
+/* SELECTED — solid fill + inverse text. */
+.co-calendar__day--selected {
+  background: var(--co-color-primary-azul);
+  border-color: var(--co-color-primary-azul);
+  color: var(--co-color-base-blanco, #fff);
+  font-weight: 600;
+}
+
+.co-calendar__day--disabled {
+  color: var(--co-semantic-text-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ── Range states ────────────────────────────────────────── */
+/* Middle of the range (incl. hover preview): soft tinted band. */
+.co-calendar__day--in-range {
+  background: var(--co-semantic-surface-hover);
+  border-radius: 0;
+  color: var(--co-semantic-text-default);
+}
+
+/* Endpoints: solid fill + inverse text (same language as `selected`). */
+.co-calendar__day--range-start,
+.co-calendar__day--range-end {
+  background: var(--co-color-primary-azul);
+  border-color: var(--co-color-primary-azul);
+  color: var(--co-color-base-blanco, #fff);
+  font-weight: 600;
+}
+
+/* Connect the endpoints visually to the band when a range spans both. */
+.co-calendar__day--range-start:not(.co-calendar__day--range-end) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.co-calendar__day--range-end:not(.co-calendar__day--range-start) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}