@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

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

@@ -0,0 +1,136 @@
+:host {
+  display: contents;
+}
+
+/* Backdrop is owned by the sheet (NOT co-overlay): its opacity is driven
+   per-frame during drags, and co-overlay's own bubbling coClose + flex
+   centering don't fit a bottom-anchored panel.
+   No z-index tokens exist yet — 1000 matches co-overlay (see co-lightbox). */
+.co-bottom-sheet__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  /* same scrim + blur as co-overlay (modal backdrop) — there is no scrim token yet */
+  background: rgba(0, 0, 0, 0.4);
+  -webkit-backdrop-filter: blur(var(--co-overlay-blur, 2px));
+  backdrop-filter: blur(var(--co-overlay-blur, 2px));
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+}
+
+.co-bottom-sheet-root--open .co-bottom-sheet__backdrop {
+  opacity: 1;
+  pointer-events: auto;
+  transition: opacity 0.12s ease;
+}
+
+.co-bottom-sheet {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  max-height: var(--co-bottom-sheet-max-height, 85dvh);
+  background: var(--co-semantic-surface-page);
+  font-family: var(--co-font-family-primary);
+  border-radius: var(--co-border-radius-xl) var(--co-border-radius-xl) 0 0;
+  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
+  transform: translateY(100%);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.co-bottom-sheet--open {
+  transform: translateY(0);
+  visibility: visible;
+}
+
+/* keep the slide-out visible while it animates */
+.co-bottom-sheet:not(.co-bottom-sheet--open) {
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.25s;
+}
+
+/* while the finger drives the sheet, nothing animates */
+.co-bottom-sheet--dragging,
+.co-bottom-sheet-root:has(.co-bottom-sheet--dragging) .co-bottom-sheet__backdrop {
+  transition: none !important;
+}
+
+/* ─── grip zone: handle + header always drag the sheet ───────── */
+
+.co-bottom-sheet__grip {
+  flex-shrink: 0;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  cursor: grab;
+}
+
+.co-bottom-sheet--dragging .co-bottom-sheet__grip {
+  cursor: grabbing;
+}
+
+.co-bottom-sheet__handle {
+  width: 40px;
+  height: 4px;
+  margin: var(--co-spacing-sm) auto var(--co-spacing-xs);
+  border-radius: var(--co-border-radius-full);
+  background: var(--co-semantic-border-default);
+}
+
+.co-bottom-sheet__header {
+  padding: 0 var(--co-spacing-xl);
+}
+
+.co-bottom-sheet__header--show {
+  padding-bottom: var(--co-spacing-sm);
+}
+
+.co-bottom-sheet__heading {
+  margin: 0;
+  font-size: var(--co-font-size-16);
+  font-weight: 700;
+  color: var(--co-semantic-text-default);
+}
+
+/* ─── body: internal scroll, no chaining to the page ─────────── */
+
+.co-bottom-sheet__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  touch-action: pan-y;
+}
+
+/* ─── footer: pinned outside the scroll, safe-area aware ─────── */
+
+.co-bottom-sheet__footer {
+  flex-shrink: 0;
+  display: none;
+}
+
+/* `:empty` can't detect slotted content — JS slotchange drives this class */
+.co-bottom-sheet__footer--show {
+  display: block;
+  border-top: 1px solid var(--co-semantic-border-default);
+  padding: var(--co-spacing-md) var(--co-spacing-xl)
+    calc(var(--co-spacing-lg) + env(safe-area-inset-bottom, 0px));
+  background: var(--co-semantic-surface-page);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* near-zero (not zero) so transitionend still fires coAfterOpen/Close */
+  .co-bottom-sheet,
+  .co-bottom-sheet:not(.co-bottom-sheet--open),
+  .co-bottom-sheet__backdrop {
+    transition-duration: 0.01s !important;
+  }
+}

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: 'e97aa389e60d44d412094c26854b788576426be1', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '03f77f9cd1f73a30264b98f42ad14aff228f58e9', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: '794c4506fb1cdb0d8229c6ec28171843ab009f22', 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: 'a594d01c6c42a2829d81d8b4953bdb016b342cae', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: 'e7f768591e1a80b483b5312ea322184aacccbabf', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: '8bc0a823bef53438baabfa96465c762533d3c865', class: {
+                'co-bottom-sheet__header': true,
+                'co-bottom-sheet__header--show': this.hasHeaderSlot || !!this.heading,
+            }, part: "header" }, h("slot", { key: 'fff2367303fee3c26d3a73e48ca3b6655ce44414', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: '6d3947f80b56a798f2aaf454333c333a0d3b4106', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: 'c121e082e757c7ede9e79fabc704f7077652fbe2', 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: '895b3cda6d949853eff766133404c24039b4cb40' })), h("footer", { key: '24f5fa83ddada45deef4f49e55e3f330928b02f1', class: {
+                'co-bottom-sheet__footer': true,
+                'co-bottom-sheet__footer--show': this.hasFooter,
+            }, part: "footer" }, h("slot", { key: 'e4a74380717a71b454af249e9ed732d8bbc8eabb', 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-breadcrumb/co-breadcrumb.css

@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xs, 4px);
+  min-width: 0;
+}