@prolibu-suite/cobalt-core 0.7.0 → 0.9.0

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

@@ -255,13 +255,13 @@ export class CoBottomSheet {
         (_a = this.bodyEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchmove', this.touchBlocker);
     }
     render() {
-        return (h("div", { key: 'ccd802fd80f14dfa7b2e3998d1ae1936db0a03b1', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '6838b998e719fc99ab35f87fa250986d1eeb60a1', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: 'd621eac2f34e19a6a2c0fc91e13b17ea832b5c83', class: { 'co-bottom-sheet': true, 'co-bottom-sheet--open': this.open }, part: "sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": 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: '2c304cb9f8ed0672327dcc6d638b2d849d6774c6', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: '0210a476819c8938bb8c075305a27744b87f0ef9', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: '6daf41852652d8edd478c22a24444d3b040e8799', class: {
+        return (h("div", { key: 'cbb30d66c27b5abd51309a1e55a920656a1a0c6a', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '0b6d164ff4a4520eb9f7cb54991540ba30a9d1e0', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: 'd0a06e9c2ef7389dee933edf6251e0578a78ca71', class: { 'co-bottom-sheet': true, 'co-bottom-sheet--open': this.open }, part: "sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": 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: '749d7123e579ab46b63f6ccd14df28af0890f2fd', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: '1c007545c0ab262abe4a2276fe10c18068c1d5c7', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: 'd1be5c0085c6dc30009ab792b91e86e97477861d', class: {
                 'co-bottom-sheet__header': true,
                 'co-bottom-sheet__header--show': this.hasHeaderSlot || !!this.heading,
-            }, part: "header" }, h("slot", { key: 'a94f197b04d719b5a7b1a542872f0dd2bed5dfea', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: '800ffa106c145984ff78871a74f92156df05976c', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: '36642b98971f32641b72066689f0f773854e2fcc', 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: '8a4977dc85e78cd9d27ff6a2ce40841267592341' })), h("footer", { key: '70217d27c09544adc56e751163033e25d5d72e69', class: {
+            }, part: "header" }, h("slot", { key: '2163362b13cf19b1221f9655ec5b4b09085a2b6c', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: 'c2f8f34cc167b14d62ac4a27396c8c72e05ab274', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: 'a89e7b39bd72311b5b0ccd5358c9f9e45618fa86', 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: '4424ce944ef083fc9c760774b30d66b48320fe8a' })), h("footer", { key: 'b3452533a6d25a0528c3f0456ce3413e9dcccef4', class: {
                 'co-bottom-sheet__footer': true,
                 'co-bottom-sheet__footer--show': this.hasFooter,
-            }, part: "footer" }, h("slot", { key: '6aa16a159e2161c491015ae0c88c542506f632a2', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
+            }, part: "footer" }, h("slot", { key: 'd697688035f2767aef0894f9cdf2b99bce9d2fb6', 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: 'a673dfd80990deed0263168a4dc9cac5029e4956', part: "breadcrumb", role: "navigation", "aria-label": "Breadcrumb" }, data
+        return (h(Host, { key: '25dce93deb73a903ac025ffeed54ca53ab1f22e3', 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: 'e7eea637e057de29afed6c742df7c2576781391d', part: "breadcrumb-item", class: {
+        return (h(Host, { key: '255696950cd3a032a2c5e81afe2b7e495bc974f4', part: "breadcrumb-item", class: {
                 'co-breadcrumb-item': true,
                 'co-breadcrumb-item--current': this.current,
-            } }, h("span", { key: '241fe723b758d9daabfd53f676998e0d2abceac8', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: 'a6e4c54dfecbb25f6e1b1377d3a9b10fb7abdd73', name: this.separator, size: 13 })), h("span", { key: 'a8c960f9e45681520f2e6ad9c80343701219211d', 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: '8f585b1d2c212c5820aad49deee512fcf11fb7f2', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: '8c3b5eae1e0459fe9184973e1fb097f849ebd2eb', name: this.icon, size: 16 }))), h("span", { key: '30892098c3b834213fbab6fa49ce2a87a24a0096', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: 'fa8d5d15b3773fcc085eeb932b6dcc154aed5829' })))));
+            } }, h("span", { key: '6a54693a183953f9eaeabf2b4d687f28c479eef6', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: '2bce60612e26554fd22a2bc03117e50e0d8efe36', name: this.separator, size: 13 })), h("span", { key: '889634ee730f05686916132456086e9f9a6f21db', 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: 'c90e7812924e4fab4b928c7d892a4cba2f9a59f5', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: '344ff71c4fa9832600ad62df6935dcc695f9a4d7', name: this.icon, size: 16 }))), h("span", { key: '488e831a5cf405f135b7ddd20d95fe823e21ae29', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: 'c5b05d33b49d273cfc3360df9395ce2417234eae' })))));
     }
     static get is() { return "co-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,10 @@
   letter-spacing: var(--co-font-letter-spacing-body);
   white-space: nowrap;
   -webkit-font-smoothing: antialiased;
-  transition: opacity 0.15s ease, background 0.15s ease;
+  transition:
+    opacity var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    background var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
   -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
   backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
@@ -137,6 +140,19 @@
   opacity: 0.88;
 }
 
+/* Feedback de presión: squish instantáneo; el release usa la transición base. */
+.co-button:active:not(:disabled) {
+  transform: scale(0.97);
+  transition-duration: var(--co-motion-duration-instant);
+}
+/* Primary rebota al soltar: el transform de la base viaja con spring suave. */
+.co-button--primary {
+  transition:
+    opacity var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    background var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    transform var(--co-motion-duration-slow) var(--co-motion-ease-spring);
+}
+
 /* ─── ELEVATED · secondary → white raised button ─────────────────
    Opt-in via elevated + variant="secondary": shadow-sm resting lift
    plus an inset hairline so it reads on a white surface. */
@@ -160,6 +176,25 @@
   backdrop-filter: none;
 }
 
+/* ─── ON-DARK SURFACE · danger ───────────────────────────────────
+   surface="dark" + variant="danger": Eliminar sobre una barra oscura
+   (selection bar). El fill sólido de status-error ya lee bien en dark;
+   lo que rompe es (a) el hover por defecto (opacity .88 deja sangrar la
+   barra negra y APAGA el rojo — acá se ACLARA el fondo en su lugar) y
+   (b) el foco invisible (outline:none base, dark-on-dark) — anillo
+   blanco translúcido. Espejo del bloque ghost/stroke de arriba: misma
+   jugada de especificidad (variant + surface) para ganarle a la regla
+   :hover compartida de danger/success.
+   Receta oficial de botones de barra: ghost|stroke surface="dark";
+   Eliminar = danger surface="dark". */
+.co-button--danger.co-button--surface-dark:hover:not(:disabled) {
+  opacity: 1;
+  background: color-mix(in srgb, var(--co-semantic-status-error) 84%, var(--co-color-base-blanco, #fff));
+}
+.co-button--danger.co-button--surface-dark:focus-visible {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-color-base-blanco, #fff) 45%, transparent);
+}
+
 /* ─── ICON SLOTS ─────────────────────────────────────────────── */
 ::slotted([slot="icon-left"]),
 ::slotted([slot="icon-right"]) {

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

@@ -13,7 +13,14 @@ export class CoButton {
         this.size = 'm';
         /** Raised elevation — with variant="secondary" renders a white raised button (shadow-sm + inset hairline). */
         this.elevated = false;
-        /** Surface the button sits on. On "dark", ghost/stroke variants switch to white ink + blanco-16 hover. */
+        /**
+         * Surface the button sits on. On "dark", ghost/stroke variants switch to
+         * white ink + blanco-16 hover; danger keeps its solid error fill but swaps
+         * the fade-hover for a lighten-hover + white focus ring (dark bars dim a
+         * faded red). Receta oficial de acciones de barra (co-action-bar):
+         * `variant="ghost"|"stroke" surface="dark"`; Eliminar =
+         * `variant="danger" surface="dark"`.
+         */
         this.surface = 'light';
         /** Disabled state */
         this.disabled = false;
@@ -46,7 +53,7 @@ export class CoButton {
             customStyle.background = this.color;
         if (this.textColor)
             customStyle.color = this.textColor;
-        return (h("button", { key: '97c11bee8f9bb11bb6585439c3c12698b0d95ecb', class: {
+        return (h("button", { key: '297591f38c986f90e08de4e93a0da6da1b619a04', class: {
                 'co-button': true,
                 [`co-button--${this.variant}`]: true,
                 [`co-button--${this.shape}`]: true,
@@ -54,9 +61,9 @@ export class CoButton {
                 [`co-button--surface-${this.surface}`]: true,
                 'co-button--elevated': this.elevated,
                 'co-button--disabled': this.disabled,
-            }, style: Object.keys(customStyle).length ? customStyle : undefined, 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, "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: '092f58acb6dfa810ce4f5bcdc19ab15dff69104a' }, this.label), this.iconRight
+            : null, h("slot", { key: 'cec4aa8696050277860cc6d569b89b725647b3a8' }, this.label), this.iconRight
             ? h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }
@@ -166,7 +173,7 @@ export class CoButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Surface the button sits on. On \"dark\", ghost/stroke variants switch to white ink + blanco-16 hover."
+                    "text": "Surface the button sits on. On \"dark\", ghost/stroke variants switch to\nwhite ink + blanco-16 hover; danger keeps its solid error fill but swaps\nthe fade-hover for a lighten-hover + white focus ring (dark bars dim a\nfaded red). Receta oficial de acciones de barra (co-action-bar):\n`variant=\"ghost\"|\"stroke\" surface=\"dark\"`; Eliminar =\n`variant=\"danger\" surface=\"dark\"`."
                 },
                 "getter": false,
                 "setter": false,
@@ -213,6 +220,25 @@ export class CoButton {
                 "reflect": false,
                 "attribute": "label"
             },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name override for icon-only buttons (no visible `label`/slot\ntext, e.g. an icon-only action inside `co-action-bar`) \u2014 the shadow\n`<button>` otherwise has no accessible name. Mirrors the exact\n`ariaLabelText` precedent of `co-fab`/`co-icon-button`. Only sets\n`aria-label` when THIS prop is passed \u2014 when a visible `label`/slot IS\npresent, its text content already gives the button an accessible name,\nso leaving `ariaLabelText` unset avoids a duplicate/overriding aria-label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text"
+            },
             "iconLeft": {
                 "type": "string",
                 "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: '420d7fa2d9322ef3ec77e87343367f05a0de3d17', class: {
+        return (h("div", { key: '3d04106570e94fdd1787e5a1336b84b523c22607', 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: 'ede5ab0f16e003619e2aa51945c748bbe7414523' })));
+            }, role: "group" }, h("slot", { key: '6121a73fbe3f565b251f4db3f9d2ab45450f0a3c' })));
     }
     static get is() { return "co-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -80,7 +80,7 @@
   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;
+  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__cell:hover:not(.co-calendar__cell--disabled):not(.co-calendar__cell--selected) {
   background: var(--co-semantic-surface-hover);
@@ -168,7 +168,7 @@
   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;
+  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) {

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

@@ -363,7 +363,7 @@ export class CoCalendar {
     render() {
         var _a, _b;
         const t = getDateStrings(this.locale);
-        return (h("div", { key: 'fa986ed0bf6bfa7627832868ed26a2f614d7105c', class: "co-calendar", part: "root" }, h("div", { key: '0c86b865fee2c71fb42bacf7a87ab28f2c1a06d1', class: "co-calendar__header", part: "header" }, h("button", { key: 'de9c951364750e616f03cf83ce06a74ee7b4ba36', 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: '44f0feeecf0ad89e39afb1c353bc40a8c1dabc96', name: "caret-left", size: 16 })), h("button", { key: '14350a7ca5aedf29d49ddfcecd6f0c098a3fbf5e', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: 'af1f42e2efac0338e4d1af9c29c2b233fd0a4fbf', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '0d34428c859f99d0689cf405a54effee4d9e91e7', 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: '52a7ccc6e7081221a9f81b25e8352e7e50ba864b', 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: '171842ca3d4b05a3bbc74266e4472914d3fdd075', class: "co-calendar", part: "root" }, h("div", { key: '4016b24331a9c6bf7da4b49ed37a21d0e4c8bbca', class: "co-calendar__header", part: "header" }, h("button", { key: 'a9483d553caeffd67a61a267e1de25b6ed8445f8', 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: 'a866dd1fb1803e2550abb0711b75400e89b83fec', name: "caret-left", size: 16 })), h("button", { key: 'efd4f17cebfce1dd1bdfdfd0bf8e1aa9ca7ecc5d', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: '9f137fb78bc788d5a9d482102dbcd3cb82d1369a', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '7cca94d77736780850cf33e11b84212fcc722d77', 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: '94e0659623a61aec52608280793c7a356fb329d0', 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"; }

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

@@ -24,6 +24,8 @@
   --co-cal-today-ring: var(--co-color-primary-azul);
 
   /* Event chips */
+  --co-cal-event-radius: 6px;
+  --co-cal-elevation-hover: var(--co-shadow-lg);
   --co-cal-event-bg: var(--co-color-primary-azul);
   --co-cal-event-border: transparent;
   --co-cal-event-text: var(--co-color-base-blanco, #fff);
@@ -34,7 +36,8 @@
 .cal-month {
   display: flex;
   flex-direction: column;
-  border: 1px solid var(--co-cal-border);
+  height: 100%;
+  /* Sin borde exterior (Google-style: la grilla flota en la página del host). */
   border-radius: var(--co-border-radius-xs);
   overflow: hidden;
   background: var(--co-cal-surface);
@@ -60,6 +63,8 @@
 .cal-month__week {
   position: relative;
   min-height: var(--co-cal-min-week-h);
+  /* Crecer para llenar el alto del contenedor (min-height queda como piso). */
+  flex: 1 0 auto;
 }
 .cal-month__week:not(:last-child) {
   border-bottom: 1px solid var(--co-cal-border);
@@ -77,7 +82,7 @@
   border-right: 1px solid var(--co-cal-border);
   padding: var(--co-spacing-xxs);
   cursor: pointer;
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 .cal-month__day:last-child {
   border-right: 0;
@@ -100,6 +105,10 @@
   background: color-mix(in srgb, var(--co-cal-today-ring) 14%, transparent);
   box-shadow: inset 0 0 0 2px var(--co-cal-today-ring);
 }
+/* Día seleccionado persistente (referencia mientras el form de crear está abierto). */
+.cal-month__day--selected {
+  background: color-mix(in srgb, var(--co-cal-today-ring) 10%, transparent);
+}
 
 .cal-month__daynum {
   display: inline-flex;
@@ -138,7 +147,7 @@
   margin: 0 3px;
   padding: 0 var(--co-spacing-xs);
   border: 1px solid var(--co-cal-event-border);
-  border-radius: var(--co-border-radius-xxs);
+  border-radius: var(--co-cal-event-radius);
   font-family: inherit;
   font-size: var(--co-font-size-12, 12px);
   line-height: 1;
@@ -151,9 +160,28 @@
 .cal-chip {
   background: var(--co-cal-event-bg);
   color: var(--co-cal-event-text);
+  /* Ver la nota del timegrid: sustituyen al preventDefault del pointerdown. */
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+}
+
+/* Chip de carga: ocupa el mismo carril y la misma caja que un chip real, pero
+   con su PROPIA regla — NO se cuelga de la lista `.cal-chip, .cal-month__more`
+   (sumarse ahí le robaba a los chips reales su borde/padding/tipografía). */
+.cal-month__chip-skeleton {
+  position: absolute;
+  height: calc(var(--co-cal-lane-h) - 3px);
+  box-sizing: border-box;
+  margin: 0 3px;
+  border-radius: var(--co-cal-event-radius);
+  overflow: hidden;
+  pointer-events: none;
 }
-.cal-chip:hover {
+.cal-month__chip-skeleton co-skeleton { display: block; block-size: 100%; }
+.cal-chip--all-day:hover {
   filter: brightness(0.95);
+  box-shadow: var(--co-cal-elevation-hover);
 }
 .cal-chip:focus-visible {
   outline: 2px solid var(--co-semantic-border-focus);
@@ -186,12 +214,17 @@
   color: var(--co-cal-text-muted);
   font-variant-numeric: tabular-nums;
 }
+/* Toma el espacio sobrante (con min-width:0 para poder truncar): así el badge
+   del provider queda pegado al FINAL del chip y no flotando pegado al texto. */
 .cal-chip__title {
+  flex: 1 1 auto;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .cal-chip__ext {
   flex: 0 0 auto;
+  margin-inline-start: auto; /* al final incluso si el título no crece */
   opacity: 0.8;
 }
 
@@ -207,6 +240,22 @@
 .cal-chip--dragging {
   opacity: 0.4;
 }
+/* Tanda 3 FIX D: durante el drag de una celda (dragId !== null) los chips no
+   deben responder a hover/hit-testing — el filter:brightness + box-shadow del
+   hover de las barras all-day (y su cálculo) se disparaban en cada celda
+   cruzada. El pointerenter de drag-over vive en `.cal-month__day`, no en el
+   chip, así que esto no rompe el drag-over. Clase puesta imperativamente
+   (classList sobre un ref), no @State: no dispara render. */
+.cal-month--interacting .cal-chip {
+  pointer-events: none;
+}
+/* Response-state treatments. Hatch only on filled (all-day) bars; timed chips
+   are dot+text so a hatch would paint on the light surface — skip. */
+.cal-chip--all-day.cal-chip--tentative {
+  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0 4px, transparent 4px 8px);
+}
+.cal-chip--cancelled { opacity: 0.6; }
+.cal-chip--cancelled .cal-chip__title { text-decoration: line-through; }
 .cal-chip--continues-before {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;