@prolibu-suite/cobalt-core 0.7.0 → 0.9.0

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

@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: column;
   font-family: var(--co-font-family-primary);
-  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform var(--co-motion-duration-slow) var(--co-motion-ease-in-out);
   will-change: transform;
   z-index: 1;
   /* Elevation: a layered soft drop-shadow that follows the squircle silhouette
@@ -166,7 +166,7 @@
   cursor: pointer;
   color: var(--co-semantic-text-muted);
   border-radius: var(--co-border-radius-sm);
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
   flex-shrink: 0;
 }
 .co-drawer__close:hover  { background: var(--co-semantic-surface-hover); }
@@ -191,6 +191,52 @@
   position: relative;
 }
 
+/* Scrollbar del body: receta auto-hide canónica del app (thin, track
+   transparente, thumb invisible en reposo → aparece al hover del body, más
+   oscuro al interactuar) — misma conducta que el resto de scrolls de la suite.
+
+   ⚠️ Por qué props ESTÁNDAR explícitas y no solo ::-webkit: `scrollbar-color`
+   es HEREDADA — el global del app (`* { scrollbar-color: … }`, light DOM)
+   matchea el host <co-drawer> y hereda A TRAVÉS del shadow hasta este body.
+   Con una prop estándar activa, Chromium IGNORA todas las reglas ::-webkit,
+   así que la conducta real la deciden los valores estándar: se declaran acá
+   COMPLETOS (reposo + hover) para que el componente sea autocontenido y no
+   dependa de qué herede del host. Las reglas ::-webkit quedan para Safari
+   (no soporta las estándar). */
+.co-drawer__body {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.co-drawer__body:hover {
+  scrollbar-color: var(--co-color-opacity-negro-16) transparent;
+}
+
+.co-drawer__body::-webkit-scrollbar {
+  width: 6px;
+}
+
+.co-drawer__body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.co-drawer__body::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 9999px;
+}
+
+.co-drawer__body:hover::-webkit-scrollbar-thumb {
+  background: var(--co-color-opacity-negro-16);
+}
+
+.co-drawer__body:hover::-webkit-scrollbar-thumb:hover {
+  background: var(--co-color-opacity-negro-25);
+}
+
+.co-drawer__body:hover::-webkit-scrollbar-thumb:active {
+  background: var(--co-color-opacity-negro-50);
+}
+
 /* ─── Footer ──────────────────────────────────────────────── */
 .co-drawer__footer {
   display: flex;

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

@@ -93,7 +93,7 @@ export class CoDrawer {
                 'co-drawer--modeless': this.modeless,
                 [`co-drawer--${this.position}`]: true,
                 [`co-drawer--${this.size}`]: true,
-            }, popover: this.modeless ? 'manual' : undefined, ref: this.modeless ? this.promoteModeless : undefined, part: "drawer", role: "dialog", "aria-modal": this.modeless ? 'false' : 'true', "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { class: "co-drawer__card" }, h("header", { class: "co-drawer__header", part: "header" }, h("div", { class: "co-drawer__header-content" }, h("slot", { name: "header" }, h("div", { class: "co-drawer__heading-row" }, this.icon && h("co-icon", { name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { class: "co-drawer__description" }, this.description))), this.closable && (h("button", { class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { name: "x", size: 20 })))), h("div", { class: "co-drawer__tabs", part: "tabs" }, h("slot", { name: "tabs" })), h("div", { class: "co-drawer__body", part: "body" }, h("slot", null), h("co-loader", { overlay: true, visible: this.loading, part: "loader" })), h("footer", { class: "co-drawer__footer", part: "footer" }, h("slot", { name: "footer" })))));
+            }, popover: this.modeless ? 'manual' : undefined, ref: this.modeless ? this.promoteModeless : undefined, part: "drawer", role: "dialog", "aria-modal": this.modeless ? 'false' : 'true', "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { class: "co-drawer__card", part: "card" }, h("header", { class: "co-drawer__header", part: "header" }, h("div", { class: "co-drawer__header-content" }, h("slot", { name: "header" }, h("div", { class: "co-drawer__heading-row" }, this.icon && h("co-icon", { name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { class: "co-drawer__description" }, this.description))), this.closable && (h("button", { class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { name: "x", size: 20 })))), h("div", { class: "co-drawer__tabs", part: "tabs" }, h("slot", { name: "tabs" })), h("div", { class: "co-drawer__body", part: "body" }, h("slot", null), h("co-loader", { overlay: true, visible: this.loading, part: "loader" })), h("footer", { class: "co-drawer__footer", part: "footer" }, h("slot", { name: "footer" })))));
         if (this.modeless)
             return aside;
         return (h("co-overlay", { open: this.open, onCoClose: this.handleOverlayClose }, aside));

package/dist/collection/components/co-drive-card/co-drive-card.css

@@ -25,7 +25,7 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  transition: box-shadow 0.14s ease, background 0.12s ease;
+  transition: box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-drive-card--folder.co-drive-card--comfy {
@@ -116,7 +116,7 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
-  transition: box-shadow 0.14s ease;
+  transition: box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-drive-card--file.co-drive-card--comfy {
@@ -209,7 +209,7 @@
   align-items: center;
   color: var(--co-color-gray-400, #a0a0a0);
   opacity: 0;
-  transition: opacity 0.12s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-drive-card:hover .co-drive-card__actions {
@@ -227,7 +227,7 @@
   cursor: pointer;
   color: var(--co-color-base-blanco, #fff);
   opacity: 0;
-  transition: opacity 0.12s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-drive-card:hover .co-drive-card__star-overlay,
@@ -248,7 +248,7 @@
   border-radius: 6px;
   cursor: pointer;
   opacity: 0;
-  transition: opacity 0.12s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
   background: rgba(255, 255, 255, 0.9);
   box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-16, rgba(31, 28, 27, 0.16));
 }

package/dist/collection/components/co-drive-card/co-drive-card.js

@@ -74,7 +74,7 @@ export class CoDriveCard {
     }
     render() {
         const isFile = this.variant === 'file';
-        return (h("div", { key: '942d53fe6341ba7c24665b6f10762eeb8aaad3f7', class: {
+        return (h("div", { key: '62056a659681c95fb1bdd8dc471b8543581f1662', class: {
                 'co-drive-card': true,
                 [`co-drive-card--${this.variant}`]: true,
                 [`co-drive-card--${this.density}`]: true,

package/dist/collection/components/co-drop-zone/co-drop-zone.js

@@ -58,7 +58,7 @@ export class CoDropZone {
         this.coDragStateChange.emit(next);
     }
     render() {
-        return (h(Host, { key: '3358f8a880d1105209b5047fe14b49c5c2d67033', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: 'd1fb8f1e918d1ca7d26b40d60903e743855d70e7' }), this.active && (h("div", { key: '72a2df7b78205ffa6da676c850fec495ea6e3e68', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: 'a25910837ccb5d20b16870272780578d2e3229a2', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: '5066e11590b64c48d2397be0af1a85d1a353a952', name: this.icon, size: 34 })), h("span", { key: '53237cbb8ec4c607ac7c7846419d65e63a8cfef6', class: "co-drop-zone__label", part: "label" }, this.label)))));
+        return (h(Host, { key: 'a5bf9dd9d62d7d7d2ec1b0d277a267b721ea430d', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: '609343dd414c752617e50f73f36f55d4edfc773f' }), this.active && (h("div", { key: '03f38f63b2cf7d9a166d31541f1c21bb2953c80f', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: '7b8cd9daa821d224e40507646a166190ea5f917f', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: 'f5f201175801233c4d32772dab7f947c8886ca34', name: this.icon, size: 34 })), h("span", { key: '766d7defd61ab35ab07b6b51c3fe177eb3afee2e', class: "co-drop-zone__label", part: "label" }, this.label)))));
     }
     static get is() { return "co-drop-zone"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-empty-state/co-empty-state.js

@@ -13,11 +13,11 @@ export class CoEmptyState {
     render() {
         var _a;
         const iconWeight = (_a = this.iconWeight) !== null && _a !== void 0 ? _a : (this.variant === 'card' ? 'regular' : 'light');
-        return (h("div", { key: 'f43461cfe3b4336f099a164130201842eb4c9634', class: {
+        return (h("div", { key: 'fd0802c7ab379e2ff69d181a89e82f9af50c7eb7', class: {
                 'co-empty-state': true,
                 [`co-empty-state--${this.variant}`]: true,
                 [`co-empty-state--${this.size}`]: true,
-            }, part: "empty-state" }, this.icon && (h("div", { key: 'c8232663644d30471b3cf7bba67798baa0a0d75a', class: "co-empty-state__icon" }, h("co-icon", { key: '0bbd66e7d8b930fa33f52039e90714b4d0e436a8', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '17df7252b0cb40161798ce3b677efb7a2c1247f2', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '52226dbdab22fc0524f6b49b4628dc68daf6a7fc', class: "co-empty-state__description" }, this.description)), h("div", { key: '9a27fe8be272eb5b6c0f820bd8671842a7ae4487', class: "co-empty-state__actions" }, h("slot", { key: '0cd1c07318977ac5aa3b55602f31c51a71682ee4' }))));
+            }, part: "empty-state" }, this.icon && (h("div", { key: '0e37fbc4e087c5bc5ac69eee01cecd9fcde09f49', class: "co-empty-state__icon" }, h("co-icon", { key: '0e75bba07af87b883e7cb236800282af51c4b84f', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '69ea3039e73b48f77fa6e58d673802d34506c4ef', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '223d8321af110cbde025a59e3677338abee0cc33', class: "co-empty-state__description" }, this.description)), h("div", { key: 'bfba2044eacf53aae426fb99dc1f2d5314a0b8e6', class: "co-empty-state__actions" }, h("slot", { key: 'b22df42a753f9ca5797b373a611421e07881d3e1' }))));
     }
     static get is() { return "co-empty-state"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,18 +28,25 @@
   gap: var(--co-spacing-md);
 }
 
-.cal__nav-group {
-  display: inline-flex;
+/* Grupo central: ‹ Título › (flechas flanqueando el título, centrado en el toolbar). */
+.cal__title-group {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
   align-items: center;
+  justify-content: center;
   gap: var(--co-spacing-xs);
 }
 
 .cal__title {
-  flex: 1 1 auto;
   margin: 0;
-  text-align: center;
-  font-size: var(--co-font-size-16, 16px);
-  font-weight: 600;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: var(--co-font-size-20, 20px);
+  font-weight: 400;
+  letter-spacing: -0.01em;
   text-transform: capitalize;
   color: var(--co-semantic-text-default);
 }
@@ -55,12 +62,12 @@
   padding: 0 var(--co-spacing-md);
   background: none;
   border: 1px solid var(--co-semantic-border-default);
-  border-radius: var(--co-border-radius-xs);
+  border-radius: var(--co-border-radius-full);
   font-family: inherit;
   font-size: var(--co-font-size-14, 14px);
   color: var(--co-semantic-text-default);
   cursor: pointer;
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 .cal__btn:hover {
   background: var(--co-semantic-surface-hover);
@@ -81,7 +88,7 @@
   border-radius: var(--co-border-radius-xs);
   color: var(--co-semantic-text-default);
   cursor: pointer;
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 .cal__icon-btn:hover {
   background: var(--co-semantic-surface-hover);
@@ -129,10 +136,15 @@
   display: flex;
   flex-direction: column;
 }
+
 .cal__body co-calendar-month {
   flex: 1 1 auto;
   min-block-size: 0;
 }
+.cal__body co-calendar-timegrid {
+  flex: 1 1 auto;
+  min-block-size: 0;
+}
 
 .cal__placeholder {
   flex: 1 1 auto;