@prolibu-suite/cobalt-core 0.6.0 → 0.8.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: '6655150e6dfb829ae937433983d93e0a16b4f544', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '3657a637ec0ac2705375805381be639bc3da4b82', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: 'f3cac714dbc2703506a51fd960c34b64b33731b1', 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: '063d6b43784022a2646614b0462c8c8dccce1320', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: '8e9611f02a9d59e9af91d77b476b7e8f93724aa4', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: 'f58de5177d9620ea61cffba530ef190936537194', class: {
+        return (h("div", { key: 'ba3db3d99801b70af3d5adc93c83868e2b2df3e2', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '1003cdf6554d5594a3cd6ce51850cf767e76f5e2', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: '8474a75c0b2bcf05e91f56274bbeef93e471b28f', 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: 'a0c45bd9389353b7c28a85cf02002e417e9295cd', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: '36251f7b8031cb20ac95b9b8f674d094a5240789', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: 'f6533a7ed9bf8985cf3712f6587fd129557aed75', class: {
                 'co-bottom-sheet__header': true,
                 'co-bottom-sheet__header--show': this.hasHeaderSlot || !!this.heading,
-            }, part: "header" }, h("slot", { key: '76fda370a9276e99d41782f08312e6e887dafd21', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: 'dcc7ba68ba7b306805ca49881a4808947217392a', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: '55fd08122d422bbfe0cef9d7a64297e481349172', 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: '3c86d67c93d8c64458e431ab959704f4e43b382b' })), h("footer", { key: '14a97f22eee74e514111d87414e23cf1580e1456', class: {
+            }, part: "header" }, h("slot", { key: 'b7061e6c4d48b1a221805962ab55153e06edecf7', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: '8180cb9cc8e1c234475cc02d7fdab3bc94fa7f31', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: 'e8094b7c7c0919b0cc724404b2c97c4c18b031c9', 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: '0b9271b2ad92c1a8f7bcfde66955ceb026b0fffd' })), h("footer", { key: '016e2c9974dc2a1c88aacfd0d5a7a6b6e10f1033', class: {
                 'co-bottom-sheet__footer': true,
                 'co-bottom-sheet__footer--show': this.hasFooter,
-            }, part: "footer" }, h("slot", { key: 'd2b6fbeca8233f3d6e33d6be7b05bd4a2fe5d59f', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
+            }, part: "footer" }, h("slot", { key: '5d571808b9b49eca346b7ce30525cab841b3ff4a', 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: '3306e9e038677813f1c16183e4fb3a146d723643', part: "breadcrumb", role: "navigation", "aria-label": "Breadcrumb" }, data
+        return (h(Host, { key: '8ab383589f78948c7f11d38d4e25fa5509a56dbc', 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: '984f754b9123ff35cf5f0239ad4fc103498e47b4', part: "breadcrumb-item", class: {
+        return (h(Host, { key: '16deecfc675429362263d3afb7257025e9170b26', part: "breadcrumb-item", class: {
                 'co-breadcrumb-item': true,
                 'co-breadcrumb-item--current': this.current,
-            } }, h("span", { key: '4eb611d93cd5bd980eec023e0295f5c6b8fd7901', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: '858d8393d7025b0f2c128c9fa21420f37f2e5fca', name: this.separator, size: 13 })), h("span", { key: '8ca11884ee1fa419593925bc704e16026f376bfc', 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: '6fbbaaa99958fd14f67f0ca8441333e5410f546d', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: 'a8b5c0170d2016e9a90a823341955a93d5ce8686', name: this.icon, size: 16 }))), h("span", { key: '77e9c2f8da437bc35bfb07e7d6caf3a959c96036', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: '10cb84e411006ff74528ae4ee9610e560929535f' })))));
+            } }, 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' })))));
     }
     static get is() { return "co-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -160,6 +160,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: '7ecb9c79b6d2f333ad50f71847953ef676692a81', class: {
+        return (h("button", { key: 'e765a1fcb3b4efcc7c43e155015b3c178a536d3c', 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: 'b7a325f24ec63c71121dfb74e82467e4b36fdd06' }, this.label), this.iconRight
+            : null, h("slot", { key: '8dd3e816276a67ba6072eeed1ad34a982b60389e' }, 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: '4a058e55c2e0ede15115f25ff2bb91ea5b7f88ca', class: {
+        return (h("div", { key: 'fe4b05941d1bf86586c7e4f2c93fe9644ea027d3', 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: '3d51651d39929c6989129c5dc9e8f5536598f1ac' })));
+            }, role: "group" }, h("slot", { key: 'c583ee5dd23aceea08c3178b93b6f1227101e96e' })));
     }
     static get is() { return "co-button-group"; }
     static get encapsulation() { return "shadow"; }

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: '0ac8e641a51319d8c46c2c22dfa5d059d208060f', class: "co-calendar", part: "root" }, h("div", { key: 'b97ce34ea675a7936d80b47daafa1c2ee3db4325', class: "co-calendar__header", part: "header" }, h("button", { key: 'c02f19300f44dcc31fa233290449af38146fdc05', 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: '73bbc58da5b724b48aba584233e591eb196b1cba', name: "caret-left", size: 16 })), h("button", { key: '19f1a44b9f74c529c81c76f677c9ec08143c1b2a', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: 'f78863f1ac71fb17b49c3a8bd19d709c4f9326e4', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '13ab9824881a7346422fe178ccdb02ea279e6070', 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: '66611f127b366f9f8132bfb3354badfd9e562b99', 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: '795529e38ec7b72934d786b9dcaa5046e73fbde8', class: "co-calendar", part: "root" }, h("div", { key: 'f409d1670f4f649d8e91f21915e0008d9ed330ac', class: "co-calendar__header", part: "header" }, h("button", { key: '23a4f12ec30cd86e49661daf755a6d2e23b209ad', 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: 'ce6b736011e3ed13781cac180fe4542ec38c75c3', name: "caret-left", size: 16 })), h("button", { key: 'b1fcbb3d09e33b0b462bc278b46e14a348f9f9a9', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: 'dbe1800ed74e234dc8f334183e504d19d8ab9d74', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: 'bdbda5999d20cb799aeabe48ebad6e8a4d7d89ff', 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: 'ec2e268c38d04d1f298cfb12d29647b530b03a94', 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);
@@ -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;