@prolibu-suite/cobalt-core 0.3.0 → 0.5.0

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

@@ -25,6 +25,12 @@ export class CoDrawer {
         this.closeOnOverlay = true;
         /** Close when pressing Escape */
         this.closeOnEscape = true;
+        /** Render without the modal overlay: no scrim, no body-scroll lock — the
+         *  page behind stays fully interactive. The panel promotes itself to the
+         *  browser top layer (Popover API) so ancestor filters/transforms can't
+         *  clip it. Close vectors: X button, Escape, or the consumer flipping
+         *  `open` — there is deliberately no click-outside in this mode. */
+        this.modeless = false;
         /** Show a loading overlay over the body */
         this.loading = false;
         this.handleOverlayClose = () => {
@@ -45,23 +51,52 @@ export class CoDrawer {
             else
                 this.coAfterClose.emit();
         };
+        /** Modeless only: keep the aside promoted to the top layer for its whole
+         *  lifetime (mirrors co-overlay's syncPopover; eviction on disconnect is
+         *  automatic). */
+        this.promoteModeless = (el) => {
+            if (el)
+                this.asideEl = el;
+            const aside = this.asideEl;
+            if (!this.modeless || !aside || typeof aside.showPopover !== 'function')
+                return;
+            try {
+                if (!aside.matches(':popover-open'))
+                    aside.showPopover();
+            }
+            catch (_a) {
+                /* not connected yet or already shown — safe to ignore */
+            }
+        };
     }
     onOpenChange(next, prev) {
         if (next && !prev)
             this.coOpen.emit();
     }
     handleKey(e) {
-        if (this.open && this.closeOnEscape && e.key === 'Escape') {
-            this.coClose.emit();
-        }
+        if (!this.open || !this.closeOnEscape || e.key !== 'Escape')
+            return;
+        // A modeless drawer yields Escape while a MODAL surface is open on top
+        // (record/filter drawers, modals) — one Esc must not close both layers.
+        // Hosts are light-DOM with reflected props, so a document query works.
+        if (this.modeless && document.querySelector('co-drawer[open]:not([modeless]), co-modal[open]'))
+            return;
+        this.coClose.emit();
+    }
+    componentDidLoad() {
+        this.promoteModeless();
     }
     render() {
-        return (h("co-overlay", { key: '7c69e70718bf2085643677d37053afd37d2b6352', open: this.open, onCoClose: this.handleOverlayClose }, h("aside", { key: '01ab0f984e661aea796b7df9c04997d2bd1980e4', class: {
+        const aside = (h("aside", { class: {
                 'co-drawer': true,
                 'co-drawer--open': this.open,
+                'co-drawer--modeless': this.modeless,
                 [`co-drawer--${this.position}`]: true,
                 [`co-drawer--${this.size}`]: true,
-            }, part: "drawer", role: "dialog", "aria-modal": "true", "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("header", { key: '5176fec875eeb18be424ff9c898280dd31d0e3a1', class: "co-drawer__header", part: "header" }, h("div", { key: '3b3476ccbffa5dabafcc810695993c4b0679730d', class: "co-drawer__header-content" }, h("slot", { key: '7b7b4432956e107e12ecc4c46347fb431b4fca4f', name: "header" }, h("div", { key: '786511c2d038f3ca408d094afee8966b310ee36f', class: "co-drawer__heading-row" }, this.icon && h("co-icon", { key: '1f3331f934a568d8564e968739629f01eb8b8460', name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { key: '19f2fe27e891efdd00d9a95e2e62c858c6688cac', class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { key: 'cc65c4946b4a8f3add2509c412e64bd8c8389fda', class: "co-drawer__description" }, this.description))), this.closable && (h("button", { key: '4026e85eefcf7fd221c9ee61f807b8757857de1b', class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'bf861e28ccf9a1ecc2189415943240f1e81bf69a', name: "x", size: 20 })))), h("div", { key: '57c591df50af7d19ce2926eb7dcba6c2ab3422d5', class: "co-drawer__tabs", part: "tabs" }, h("slot", { key: 'c9e3ab57d666cfb85802d5e07dd89769434c696d', name: "tabs" })), h("div", { key: 'd7f0adf9a58f92756b9f83987c326dc208b10441', class: "co-drawer__body", part: "body" }, h("slot", { key: '6f2ad9551a80c1e957b35d8c61f6bed314dfc567' }), h("co-loader", { key: '088d8c6623b2d56e45361c06de0cb199653c1f0d', overlay: true, visible: this.loading, part: "loader" })), h("footer", { key: 'cdb32ec0e7f2dcfe971fec5b33224ad812987bdc', class: "co-drawer__footer", part: "footer" }, h("slot", { key: 'c08df3969fb871d3b313b121dd077a72769d3019', 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" }, 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));
     }
     static get is() { return "co-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -257,6 +292,26 @@ export class CoDrawer {
                 "attribute": "close-on-escape",
                 "defaultValue": "true"
             },
+            "modeless": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render without the modal overlay: no scrim, no body-scroll lock \u2014 the\npage behind stays fully interactive. The panel promotes itself to the\nbrowser top layer (Popover API) so ancestor filters/transforms can't\nclip it. Close vectors: X button, Escape, or the consumer flipping\n`open` \u2014 there is deliberately no click-outside in this mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "modeless",
+                "defaultValue": "false"
+            },
             "loading": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -0,0 +1,285 @@
+:host {
+  display: block;
+}
+
+/* ─── Shared surface ─────────────────────────────────────────── */
+.co-drive-card {
+  --dc-accent: var(--co-color-primary-azul, #2563eb);
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 14px;
+  cursor: pointer;
+  outline: none;
+  font-family: var(--co-font-family-primary);
+  background: var(--co-color-base-blanco, #fff);
+  box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+}
+
+.co-drive-card:focus-visible {
+  box-shadow: inset 0 0 0 1.5px var(--dc-accent);
+}
+
+/* ─── FOLDER layout — flex row ───────────────────────────────── */
+.co-drive-card--folder {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  transition: box-shadow 0.14s ease, background 0.12s ease;
+}
+
+.co-drive-card--folder.co-drive-card--comfy {
+  padding: 14px;
+}
+
+.co-drive-card--folder.co-drive-card--compact {
+  padding: 10px 12px;
+}
+
+.co-drive-card--folder:hover:not(.co-drive-card--selected) {
+  box-shadow: var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),
+    inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+}
+
+.co-drive-card--folder.co-drive-card--selected {
+  background: color-mix(in srgb, var(--dc-accent) 7%, white);
+  box-shadow: inset 0 0 0 1.5px var(--dc-accent);
+}
+
+/* Icon tile */
+.co-drive-card__tile {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 11px;
+  background: color-mix(in srgb, var(--dc-accent) 12%, white);
+  color: var(--dc-accent);
+}
+
+.co-drive-card--comfy .co-drive-card__tile {
+  width: 44px;
+  height: 44px;
+}
+
+.co-drive-card--compact .co-drive-card__tile {
+  width: 38px;
+  height: 38px;
+}
+
+/* Name + meta text block */
+.co-drive-card__text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.co-drive-card__name {
+  font-family: var(--co-font-family-primary);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--co-color-base-negro, #1f1c1b);
+  letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.co-drive-card__meta {
+  font-family: var(--co-font-family-primary);
+  font-size: 12px;
+  color: var(--co-color-gray-500, #888888);
+  margin-top: 2px;
+  letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Trailing region (star + slot) */
+.co-drive-card__trailing {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.co-drive-card__star {
+  display: inline-flex;
+  color: var(--co-color-primary-amarillo, #fdbf00);
+}
+
+/* ─── FILE layout — column with thumb ────────────────────────── */
+.co-drive-card--file {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  transition: box-shadow 0.14s ease;
+}
+
+.co-drive-card--file.co-drive-card--comfy {
+  padding: 10px;
+}
+
+.co-drive-card--file.co-drive-card--compact {
+  padding: 8px;
+}
+
+.co-drive-card--file:hover:not(.co-drive-card--selected):not(.co-drive-card--active) {
+  box-shadow: var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),
+    inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+}
+
+.co-drive-card--file.co-drive-card--active:not(.co-drive-card--selected) {
+  box-shadow: inset 0 0 0 1.5px var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
+}
+
+.co-drive-card--file.co-drive-card--selected {
+  box-shadow: inset 0 0 0 1.5px var(--dc-accent);
+}
+
+/* Thumb region */
+.co-drive-card__thumb {
+  display: block;
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--co-color-gray-100, #f6f6f6);
+}
+
+.co-drive-card--comfy .co-drive-card__thumb {
+  height: 132px;
+}
+
+.co-drive-card--compact .co-drive-card__thumb {
+  height: 96px;
+}
+
+.co-drive-card__thumb ::slotted(*) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.co-drive-card__thumb ::slotted(img) {
+  object-fit: cover;
+}
+
+/* File name overrides folder size */
+.co-drive-card--file .co-drive-card__name {
+  font-size: 13px;
+}
+
+.co-drive-card__sub {
+  font-family: var(--co-font-family-primary);
+  font-size: 11.5px;
+  color: var(--co-color-gray-500, #888888);
+  margin-top: 1px;
+  letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Foot row */
+.co-drive-card__foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 2px 2px;
+}
+
+.co-drive-card__type {
+  flex-shrink: 0;
+  display: inline-flex;
+}
+
+.co-drive-card__foot-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Fading action affordance — stays in layout, no reflow */
+.co-drive-card__actions {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  color: var(--co-color-gray-400, #a0a0a0);
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+.co-drive-card:hover .co-drive-card__actions {
+  opacity: 1;
+}
+
+/* Star overlay (file) */
+.co-drive-card__star-overlay {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--co-color-base-blanco, #fff);
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+.co-drive-card:hover .co-drive-card__star-overlay,
+.co-drive-card--starred .co-drive-card__star-overlay {
+  opacity: 1;
+}
+
+.co-drive-card--starred .co-drive-card__star-overlay {
+  color: var(--co-color-primary-amarillo, #fdbf00);
+}
+
+/* ─── Corner select chip (both layouts) ──────────────────────── */
+.co-drive-card__select {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+  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));
+}
+
+.co-drive-card:hover .co-drive-card__select,
+.co-drive-card--selected .co-drive-card__select {
+  opacity: 1;
+}
+
+.co-drive-card--folder .co-drive-card__select {
+  top: 8px;
+  left: 8px;
+  width: 20px;
+  height: 20px;
+}
+
+.co-drive-card--file .co-drive-card__select {
+  top: 16px;
+  left: 16px;
+  width: 22px;
+  height: 22px;
+  background: rgba(255, 255, 255, 0.92);
+}
+
+/* Checked fill — placed after the variant rules so it wins on ties */
+.co-drive-card--selected .co-drive-card__select {
+  background: var(--dc-accent);
+  box-shadow: none;
+}
+
+.co-drive-card__check {
+  display: block;
+  pointer-events: none;
+}