@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

@@ -0,0 +1,507 @@
+import { h } from "@stencil/core";
+import { createVelocityTracker, decideRelease, rubberBand, } from "../../utils/sheetGesture";
+/**
+ * Mobile bottom sheet with native drag physics: the sheet follows the finger
+ * 1:1 downward, a fast flick (or a slow release past ~45% of its height)
+ * dismisses it, upward overdrag rubber-bands, and the backdrop opacity is
+ * coupled to the drag. The body scrolls internally — dragging from the body
+ * only engages when its content is scrolled to the top.
+ *
+ * Height fits the content, capped by `maxHeight` (default 85dvh).
+ *
+ * @slot header - Custom header content (overrides `heading`). Dragging it moves the sheet.
+ * @slot        - Sheet body (scrollable).
+ * @slot footer - Pinned action area below the body (outside the scroll), with safe-area padding.
+ */
+export class CoBottomSheet {
+    constructor() {
+        /** Whether the sheet is visible */
+        this.open = false;
+        /** Sheet title (used when the `header` slot is empty) */
+        this.heading = '';
+        /** Maximum sheet height (any CSS length; content shorter than this hugs) */
+        this.maxHeight = '85dvh';
+        /** Allow closing with the drag gesture. When false, drags rubber-band back. */
+        this.dismissible = true;
+        /** Close when tapping the backdrop */
+        this.closeOnOverlay = true;
+        /** Close when pressing Escape */
+        this.closeOnEscape = true;
+        /** Show the grab handle */
+        this.showHandle = true;
+        /* `:empty` can't see across a <slot>, so slotted presence is tracked in JS */
+        this.hasFooter = false;
+        this.hasHeaderSlot = false;
+        this.tracker = createVelocityTracker();
+        // gesture state
+        this.armed = false;
+        this.engaged = false;
+        this.fromBody = false;
+        this.startY = 0;
+        this.startX = 0;
+        this.startScrollTop = 0;
+        this.sheetHeight = 0;
+        this.dismissPending = false;
+        // after-events fire only for real open/close settles, never restore springs
+        this.pendingAfter = null;
+        this.handleBackdropClick = () => {
+            if (this.closeOnOverlay)
+                this.coClose.emit();
+        };
+        this.handleFooterSlotChange = (e) => {
+            this.hasFooter = this.slotHasContent(e);
+        };
+        this.handleHeaderSlotChange = (e) => {
+            this.hasHeaderSlot = this.slotHasContent(e);
+        };
+        this.handleTransitionEnd = (e) => {
+            if (e.propertyName !== 'transform' || e.target !== this.sheetEl)
+                return;
+            if (this.pendingAfter === 'open' && this.open)
+                this.coAfterOpen.emit();
+            if (this.pendingAfter === 'close' && !this.open)
+                this.coAfterClose.emit();
+            this.pendingAfter = null;
+        };
+        // ─── drag gesture ──────────────────────────────────────────────
+        this.handleGripPointerDown = (e) => {
+            this.arm(e, false);
+        };
+        this.handleBodyPointerDown = (e) => {
+            this.arm(e, true);
+        };
+        this.handlePointerMove = (e) => {
+            if (!this.armed || !e.isPrimary)
+                return;
+            const dy = e.clientY - this.startY;
+            const dx = e.clientX - this.startX;
+            if (!this.engaged) {
+                const slop = this.fromBody ? 8 : 4;
+                if (Math.abs(dy) < slop)
+                    return;
+                if (this.fromBody) {
+                    const scrollable = this.bodyEl
+                        ? this.bodyEl.scrollHeight > this.bodyEl.clientHeight
+                        : false;
+                    // content scroll wins: not at top, mostly-horizontal, or scrolling up
+                    if (this.startScrollTop > 0 ||
+                        Math.abs(dy) <= Math.abs(dx) ||
+                        (dy < 0 && scrollable)) {
+                        this.disarm();
+                        return;
+                    }
+                }
+                // capture on the element that owns these listeners (grip or body) so
+                // retargeted move/up events keep flowing through them
+                this.engage(e, e.currentTarget);
+            }
+            // re-anchor so the sheet doesn't jump by the slop distance
+            const offsetRaw = e.clientY - this.startY;
+            let offset;
+            if (offsetRaw >= 0) {
+                offset = this.dismissible ? offsetRaw : rubberBand(offsetRaw);
+            }
+            else {
+                offset = -rubberBand(-offsetRaw);
+            }
+            if (this.sheetEl) {
+                this.sheetEl.style.transform = `translate3d(0, ${offset}px, 0)`;
+            }
+            if (this.backdropEl && this.sheetHeight > 0) {
+                const progress = Math.min(Math.max(offset / this.sheetHeight, 0), 1);
+                this.backdropEl.style.opacity = String(1 - progress);
+            }
+            this.tracker.add(e.timeStamp, e.clientY);
+        };
+        this.handlePointerUp = (e) => {
+            if (!this.armed)
+                return;
+            const wasEngaged = this.engaged;
+            const offset = wasEngaged ? Math.max(e.clientY - this.startY, 0) : 0;
+            const velocity = this.tracker.velocity();
+            this.disarm();
+            if (!wasEngaged)
+                return;
+            const action = decideRelease({
+                offset,
+                height: this.sheetHeight,
+                velocity,
+                dismissible: this.dismissible,
+            });
+            if (action === 'dismiss') {
+                this.dismissPending = true;
+                if (this.sheetEl) {
+                    this.sheetEl.style.transform = `translate3d(0, ${this.sheetHeight}px, 0)`;
+                }
+                if (this.backdropEl)
+                    this.backdropEl.style.opacity = '0';
+                this.coClose.emit();
+                // host refused to close (open never flipped): spring back to consistency
+                this.dismissFallback = setTimeout(() => {
+                    if (this.open && this.dismissPending) {
+                        this.dismissPending = false;
+                        this.clearInlineStyles();
+                    }
+                }, 500);
+            }
+            else {
+                this.clearInlineStyles();
+            }
+        };
+        this.handlePointerCancel = () => {
+            // native scroll (or the OS) claimed the gesture — always restore
+            if (!this.armed)
+                return;
+            this.disarm();
+            this.clearInlineStyles();
+        };
+        /**
+         * iOS: `touch-action` is frozen at gesture start and preventDefault on
+         * pointermove does not stop native scrolling — only a non-passive touchmove
+         * listener can claim the gesture from a scrollable body.
+         */
+        this.touchBlocker = (e) => {
+            if (this.engaged) {
+                e.preventDefault();
+                return;
+            }
+            if (this.armed && this.startScrollTop <= 0) {
+                const dy = e.touches[0].clientY - this.startY;
+                if (dy > 0)
+                    e.preventDefault();
+            }
+        };
+    }
+    onOpenChange(next, prev) {
+        if (next === prev)
+            return;
+        this.pendingAfter = next ? 'open' : 'close';
+        if (next) {
+            this.coOpen.emit();
+            this.clearInlineStyles();
+        }
+        else {
+            // dismiss gesture pinned the transform at the closed position; the
+            // class-driven closed transform is identical, so clearing on the next
+            // frame produces a single transition (or none if already there)
+            this.dismissPending = false;
+            if (this.dismissFallback)
+                clearTimeout(this.dismissFallback);
+            requestAnimationFrame(() => this.clearInlineStyles());
+        }
+    }
+    handleKey(e) {
+        if (this.open && this.closeOnEscape && e.key === 'Escape') {
+            this.coClose.emit();
+        }
+    }
+    disconnectedCallback() {
+        this.detachTouchBlocker();
+        if (this.dismissFallback)
+            clearTimeout(this.dismissFallback);
+    }
+    clearInlineStyles() {
+        if (this.sheetEl)
+            this.sheetEl.style.transform = '';
+        if (this.backdropEl)
+            this.backdropEl.style.opacity = '';
+    }
+    slotHasContent(e) {
+        return e.target
+            .assignedNodes({ flatten: true })
+            .some((node) => node.nodeType === Node.ELEMENT_NODE ||
+            (node.nodeType === Node.TEXT_NODE && (node.textContent || '').trim() !== ''));
+    }
+    arm(e, fromBody) {
+        if (!this.open || this.dismissPending || !e.isPrimary)
+            return;
+        this.armed = true;
+        this.engaged = false;
+        this.fromBody = fromBody;
+        this.startY = e.clientY;
+        this.startX = e.clientX;
+        this.startScrollTop = fromBody && this.bodyEl ? this.bodyEl.scrollTop : 0;
+        if (fromBody)
+            this.attachTouchBlocker();
+    }
+    engage(e, captureTarget) {
+        var _a, _b;
+        this.engaged = true;
+        this.startY = e.clientY; // re-anchor at the engage point
+        this.sheetHeight = ((_a = this.sheetEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
+        (_b = this.sheetEl) === null || _b === void 0 ? void 0 : _b.classList.add('co-bottom-sheet--dragging');
+        try {
+            captureTarget === null || captureTarget === void 0 ? void 0 : captureTarget.setPointerCapture(e.pointerId);
+        }
+        catch (_c) {
+            /* pointer already gone — release will still arrive as pointercancel */
+        }
+        this.tracker.reset();
+        this.tracker.add(e.timeStamp, e.clientY);
+    }
+    disarm() {
+        var _a;
+        this.armed = false;
+        this.engaged = false;
+        (_a = this.sheetEl) === null || _a === void 0 ? void 0 : _a.classList.remove('co-bottom-sheet--dragging');
+        this.detachTouchBlocker();
+    }
+    attachTouchBlocker() {
+        var _a;
+        (_a = this.bodyEl) === null || _a === void 0 ? void 0 : _a.addEventListener('touchmove', this.touchBlocker, { passive: false });
+    }
+    detachTouchBlocker() {
+        var _a;
+        (_a = this.bodyEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchmove', this.touchBlocker);
+    }
+    render() {
+        return (h("div", { key: '5a012ab0bd3939ed3266ba823d3d88949f6dbedc', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '4ce730ddf26b6d594b61d53553a3ebca14ed4c5e', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: '75adb4689ffab355a074661adee3dfebfda4d9b5', 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: 'a654a44b53c0f9647324c2c587e1e47277a1cd3d', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: '71918dcc9b8ca914fa020cf2428671a2e747103d', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: '57040104cd32072ef0b81dbdb22e3475b94cf64d', class: {
+                'co-bottom-sheet__header': true,
+                'co-bottom-sheet__header--show': this.hasHeaderSlot || !!this.heading,
+            }, part: "header" }, h("slot", { key: '1ebe3576caee4e503930b8f042ae4ef57063427c', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: '7b5a81b9a833d7a0d00a07b8de7830b7e263d688', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: 'a45ff0344563c24517cffed54bb4993bfa2a6f76', 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: 'b616b4a2fb6ea8634c4bb9889f9a3f1133bb863f' })), h("footer", { key: 'e4b192198526c78e2cd015bf116159c359a43292', class: {
+                'co-bottom-sheet__footer': true,
+                'co-bottom-sheet__footer--show': this.hasFooter,
+            }, part: "footer" }, h("slot", { key: 'f461a3a9b895581d849f490f9769f280eeb2ce2b', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
+    }
+    static get is() { return "co-bottom-sheet"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-bottom-sheet.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-bottom-sheet.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the sheet is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sheet title (used when the `header` slot is empty)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "heading",
+                "defaultValue": "''"
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum sheet height (any CSS length; content shorter than this hugs)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "max-height",
+                "defaultValue": "'85dvh'"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow closing with the drag gesture. When false, drags rubber-band back."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "true"
+            },
+            "closeOnOverlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close when tapping the backdrop"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-overlay",
+                "defaultValue": "true"
+            },
+            "closeOnEscape": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close when pressing Escape"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-escape",
+                "defaultValue": "true"
+            },
+            "showHandle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the grab handle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-handle",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFooter": {},
+            "hasHeaderSlot": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coClose",
+                "name": "coClose",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Requested to close (gesture, backdrop, Esc). Consumer should set `open=false`."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coOpen",
+                "name": "coOpen",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Transitioned to open=true."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coAfterOpen",
+                "name": "coAfterOpen",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Slide-in animation finished."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coAfterClose",
+                "name": "coAfterClose",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Slide-out animation finished."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKey",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -7,7 +7,7 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border: none;
+  border: 1px solid transparent;
   outline: none;
   font-family: var(--co-font-family-primary);
   font-weight: 400;
@@ -17,51 +17,72 @@
   -webkit-font-smoothing: antialiased;
   transition: opacity 0.15s ease, background 0.15s ease;
   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));
 }
 
 /* ─── VARIANTS ─────────────────────────────────────────────── */
 .co-button--primary {
-  background: var(--co-semantic-surface-primary);
+  background: color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);
   color: var(--co-semantic-on-primary);
+  border-color: color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent);
 }
 .co-button--secondary {
-  background: var(--co-semantic-surface-secondary);
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);
   color: var(--co-semantic-on-secondary);
+  border-color: var(--co-semantic-border-subtle);
 }
 .co-button--stroke {
-  background: transparent;
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 25%, transparent);
   color: var(--co-semantic-text-default);
-  border: 1px solid var(--co-semantic-border-default);
+  border-color: var(--co-semantic-border-default);
 }
 .co-button--ghost {
   background: transparent;
   color: var(--co-semantic-text-default);
+  border-color: transparent;
+  /* Ghost: no chrome, no frost until hover */
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+.co-button--danger {
+  background: var(--co-semantic-status-error);
+  color: var(--co-color-base-blanco);
+  border-color: transparent;
+}
+.co-button--success {
+  background: var(--co-semantic-status-success);
+  color: var(--co-color-base-blanco);
+  border-color: transparent;
 }
 
-/* ─── 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 ────────────────────────────────────────── */
@@ -99,10 +120,18 @@
 }
 .co-button--primary:hover:not(:disabled) { opacity: 0.88; }
 .co-button--secondary:hover:not(:disabled),
-.co-button--stroke:hover:not(:disabled),
-.co-button--ghost:hover:not(:disabled) {
+.co-button--stroke:hover:not(:disabled) {
   background: var(--co-semantic-surface-hover);
 }
+.co-button--ghost:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--co-semantic-surface-hover) 60%, transparent);
+  -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));
+}
+.co-button--danger:hover:not(:disabled),
+.co-button--success:hover:not(:disabled) {
+  opacity: 0.88;
+}
 
 /* ─── ICON SLOTS ─────────────────────────────────────────────── */
 ::slotted([slot="icon-left"]),
@@ -110,3 +139,10 @@
   display: inline-flex;
   flex-shrink: 0;
 }
+
+/* ─── FALLBACK: no backdrop-filter → solid, legible surfaces ──── */
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-button--primary { background: var(--co-semantic-surface-primary); }
+  .co-button--secondary { background: var(--co-semantic-surface-secondary); }
+  .co-button--stroke { background: transparent; }
+}