@prolibu-suite/cobalt-core 0.1.1 → 0.2.0

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

@@ -0,0 +1,451 @@
+import { h } from "@stencil/core";
+import { getLightboxStrings } from "../../utils/lightboxI18n";
+const MIN_SCALE = 1;
+const MAX_SCALE = 8;
+const WHEEL_FACTOR = 1.15;
+const DBLCLICK_SCALE = 2.5;
+/**
+ * Fullscreen image viewer — dark scrim, zoom (wheel / buttons / double-click,
+ * anchored at the cursor), drag-to-pan while zoomed, and prev/next carousel
+ * when more than one image is provided. Keyboard: Escape closes, arrows
+ * navigate, +/- zoom, 0 resets.
+ *
+ * Controlled like co-modal: the host owns `open` and reacts to `coClose`.
+ *
+ * CAVEAT: the root is `position: fixed`, so an ancestor with `transform`,
+ * `filter` or `will-change: transform` (e.g. an OPEN co-drawer) becomes its
+ * containing block and traps the overlay. When opening from inside such a
+ * context, create the element imperatively on `document.body` instead of
+ * rendering it declaratively (this is what co-file-field does).
+ *
+ * @part overlay - Fullscreen scrim container
+ * @part toolbar - Top bar (caption + zoom controls + actions)
+ * @part image - The active image element
+ * @part prev - Previous-image arrow button
+ * @part next - Next-image arrow button
+ * @part counter - The "i / n" indicator
+ * @part close - The close button
+ */
+export class CoLightbox {
+    constructor() {
+        /** JSON array of {@link LightboxImage} (controlled by the host). */
+        this.images = '[]';
+        /** Index shown when the viewer opens. */
+        this.startIndex = 0;
+        /** Whether the viewer is visible. */
+        this.open = false;
+        this.index = 0;
+        this.scale = 1;
+        this.tx = 0;
+        this.ty = 0;
+        this.dragging = false;
+        this.lastImagesStr = '';
+        this.lastParsed = [];
+        this.dragStart = { x: 0, y: 0, tx: 0, ty: 0 };
+        /** Focus the close button on the render that follows opening. */
+        this.pendingFocus = false;
+        this.handleKey = (e) => {
+            if (!this.open)
+                return;
+            switch (e.key) {
+                case 'Escape':
+                    this.requestClose();
+                    break;
+                case 'ArrowLeft':
+                    this.goTo(-1);
+                    break;
+                case 'ArrowRight':
+                    this.goTo(1);
+                    break;
+                case '+':
+                case '=':
+                    this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0);
+                    break;
+                case '-':
+                    this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0);
+                    break;
+                case '0':
+                    this.resetView();
+                    break;
+                case 'Tab':
+                    this.trapTab(e);
+                    return;
+                default:
+                    return; // unhandled keys pass through untouched
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        this.requestClose = () => {
+            this.coClose.emit();
+        };
+        this.handleWheel = (e) => {
+            e.preventDefault();
+            const [px, py] = this.stagePoint(e);
+            const factor = e.deltaY < 0 ? WHEEL_FACTOR : 1 / WHEEL_FACTOR;
+            this.zoomAt(this.scale * factor, px, py);
+        };
+        this.handleDblClick = (e) => {
+            const [px, py] = this.stagePoint(e);
+            this.zoomAt(this.scale > MIN_SCALE ? MIN_SCALE : DBLCLICK_SCALE, px, py);
+        };
+        this.handlePointerDown = (e) => {
+            var _a;
+            if (this.scale <= MIN_SCALE)
+                return;
+            e.preventDefault();
+            this.dragging = true;
+            this.dragStart = { x: e.clientX, y: e.clientY, tx: this.tx, ty: this.ty };
+            (_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.setPointerCapture(e.pointerId);
+        };
+        this.handlePointerMove = (e) => {
+            if (!this.dragging)
+                return;
+            const tx = this.dragStart.tx + (e.clientX - this.dragStart.x);
+            const ty = this.dragStart.ty + (e.clientY - this.dragStart.y);
+            [this.tx, this.ty] = this.clampPan(tx, ty, this.scale);
+        };
+        this.handlePointerUp = (e) => {
+            var _a;
+            if (!this.dragging)
+                return;
+            this.dragging = false;
+            (_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.releasePointerCapture(e.pointerId);
+        };
+        this.openOriginal = () => {
+            const img = this.parsedImages[this.index];
+            if (img === null || img === void 0 ? void 0 : img.src)
+                window.open(img.src, '_blank', 'noopener');
+        };
+        this.stop = (e) => e.stopPropagation();
+    }
+    get parsedImages() {
+        const raw = this.images;
+        if (typeof raw !== 'string' || !raw.trim())
+            return [];
+        if (raw === this.lastImagesStr)
+            return this.lastParsed;
+        let parsed = [];
+        try {
+            const p = JSON.parse(raw);
+            if (Array.isArray(p))
+                parsed = p.filter((i) => i && i.src);
+        }
+        catch (_a) {
+            /* not JSON */
+        }
+        this.lastImagesStr = raw;
+        this.lastParsed = parsed;
+        return parsed;
+    }
+    componentWillLoad() {
+        this.index = this.clampIndex(this.startIndex);
+    }
+    connectedCallback() {
+        if (this.open)
+            this.attachKeyListener();
+    }
+    disconnectedCallback() {
+        this.detachKeyListener();
+    }
+    componentDidRender() {
+        var _a;
+        if (this.pendingFocus) {
+            this.pendingFocus = false;
+            (_a = this.closeBtnEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    onOpenChange(open) {
+        var _a, _b, _c;
+        if (open) {
+            this.index = this.clampIndex(this.startIndex);
+            this.resetView();
+            this.preloadNeighbors();
+            this.attachKeyListener();
+            // aria-modal dialog: move focus in on open, restore it on close.
+            this.previouslyFocused = (_a = document.activeElement) !== null && _a !== void 0 ? _a : undefined;
+            this.pendingFocus = true;
+        }
+        else {
+            this.detachKeyListener();
+            (_c = (_b = this.previouslyFocused) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+            this.previouslyFocused = undefined;
+        }
+    }
+    onStartIndexChange(v) {
+        if (this.open) {
+            this.index = this.clampIndex(v);
+            this.resetView();
+        }
+    }
+    onImagesChange() {
+        this.index = this.clampIndex(this.index);
+    }
+    // Manual capture-phase listener (not @Listen): while the viewer is open it
+    // must own the keyboard — an ancestor co-drawer/co-modal also listens for
+    // Escape on document, and without capture + stopPropagation one keypress
+    // would close both (losing unsaved drawer state). Capture runs first, and
+    // preventDefault keeps arrows/+/- from scrolling the page behind the scrim.
+    attachKeyListener() {
+        window.addEventListener('keydown', this.handleKey, { capture: true });
+    }
+    detachKeyListener() {
+        window.removeEventListener('keydown', this.handleKey, { capture: true });
+    }
+    /** Minimal focus trap: Tab cycles through the viewer's own buttons. */
+    trapTab(e) {
+        var _a, _b, _c;
+        const focusables = Array.from((_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button')) !== null && _b !== void 0 ? _b : []);
+        if (focusables.length === 0)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const active = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.activeElement;
+        const i = focusables.indexOf(active);
+        const delta = e.shiftKey ? -1 : 1;
+        const next = focusables[(i + delta + focusables.length) % focusables.length];
+        next.focus();
+    }
+    clampIndex(i) {
+        const n = this.parsedImages.length;
+        if (n === 0)
+            return 0;
+        return Math.min(Math.max(0, i), n - 1);
+    }
+    resetView() {
+        this.scale = 1;
+        this.tx = 0;
+        this.ty = 0;
+        this.dragging = false;
+    }
+    goTo(delta) {
+        const n = this.parsedImages.length;
+        if (n < 2)
+            return;
+        this.index = (this.index + delta + n) % n;
+        this.resetView();
+        this.coChange.emit(this.index);
+        this.preloadNeighbors();
+    }
+    preloadNeighbors() {
+        const imgs = this.parsedImages;
+        if (imgs.length < 2)
+            return;
+        for (const d of [1, -1]) {
+            const neighbor = imgs[(this.index + d + imgs.length) % imgs.length];
+            if (neighbor === null || neighbor === void 0 ? void 0 : neighbor.src)
+                new Image().src = neighbor.src;
+        }
+    }
+    // ── Zoom / pan ────────────────────────────────────────────────
+    /** Pan is clamped so the scaled image can't be dragged fully off-stage. */
+    clampPan(tx, ty, scale) {
+        const stage = this.stageEl;
+        const img = this.imgEl;
+        if (!stage || !img)
+            return [tx, ty];
+        const maxTx = Math.max(0, (img.offsetWidth * scale - stage.clientWidth) / 2);
+        const maxTy = Math.max(0, (img.offsetHeight * scale - stage.clientHeight) / 2);
+        return [Math.min(Math.max(tx, -maxTx), maxTx), Math.min(Math.max(ty, -maxTy), maxTy)];
+    }
+    /**
+     * Zoom keeping the stage point (px,py — relative to the stage center) fixed:
+     * t' = p − (p − t)·(s'/s), with transform-origin at the center.
+     */
+    zoomAt(nextScale, px, py) {
+        const s = this.scale;
+        const ns = Math.min(Math.max(nextScale, MIN_SCALE), MAX_SCALE);
+        if (ns === s)
+            return;
+        const ratio = ns / s;
+        let tx = px - (px - this.tx) * ratio;
+        let ty = py - (py - this.ty) * ratio;
+        if (ns === MIN_SCALE) {
+            tx = 0;
+            ty = 0;
+        }
+        else {
+            [tx, ty] = this.clampPan(tx, ty, ns);
+        }
+        this.scale = ns;
+        this.tx = tx;
+        this.ty = ty;
+    }
+    stagePoint(e) {
+        var _a;
+        const rect = (_a = this.stageEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect)
+            return [0, 0];
+        return [e.clientX - rect.left - rect.width / 2, e.clientY - rect.top - rect.height / 2];
+    }
+    render() {
+        const s = getLightboxStrings(this.locale);
+        const imgs = this.parsedImages;
+        const img = imgs[this.index];
+        const multi = imgs.length > 1;
+        const counter = s.counter
+            .replace('{i}', String(this.index + 1))
+            .replace('{n}', String(imgs.length));
+        return (h("div", { key: '7df4d99f46591697c48d3a069239811d997a4390', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, onClick: this.requestClose }, img && (h("div", { key: '2bb47942785b8273f7f3699ab74a67e101ac3eb1', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: 'e47844036d53ed71322c8e0cb3b4e926571f1031', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: 'c7cf53faeb4f303e79316587df60b31964daa549', class: "co-lightbox__zoom" }, h("button", { key: '77b34981937a114d22670414b75d041fdd3d074e', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '16ff12d54c8a3d1cd16342adb79c0baa3ada38a4', name: "minus", size: 16 })), h("button", { key: '66c850302c30966f4ab7d1b0ed1efc41651ebba8', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: 'd9441914db2193d661c3e5a6f1ba65fa70b6f1cf', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: 'ace38453321e1a8e0df4bb6ffccff15906e7b8e3', name: "plus", size: 16 }))), h("button", { key: 'bb81d23f14638c2b1a134573ab2a44a848f58abe', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: '42bf9277561388580d2b0797d7d732815629776f', name: "arrow-square-out", size: 16 })), h("button", { key: '500b2af225fd4692fbd472c5b6287a6d3d5f77e9', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: '7141d31ad2a3e09131dd8084b669c7c3fd13b9e2', name: "x", size: 16 })))), img && (h("div", { key: '47a092023486d0ac585cf0e35a1d0a374c69fd51', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: '3868a39927e3bfc01201e372c5c30b3dcde73562', class: {
+                'co-lightbox__img': true,
+                'co-lightbox__img--zoomed': this.scale > MIN_SCALE,
+                'co-lightbox__img--dragging': this.dragging,
+            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }))), img && multi && (h("button", { key: 'b3e3dcab9fd5caeb5a56e621febfde4d0da22147', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
+                e.stopPropagation();
+                this.goTo(-1);
+            } }, h("co-icon", { key: '6dcc8cd799b4acfd1bf048600c5d3e9b97dba746', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: 'a47298cf2436b35b95773cf9151e84192056caf5', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
+                e.stopPropagation();
+                this.goTo(1);
+            } }, h("co-icon", { key: '7efe343ba92c77e2f760bd7ea236caf325a50c1e', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '008f102eb44447b7f762c0cd4ba8c19e9fed2ee5', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+    }
+    static get is() { return "co-lightbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-lightbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-lightbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "images": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON array of {@link LightboxImage} (controlled by the host)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "images",
+                "defaultValue": "'[]'"
+            },
+            "startIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Index shown when the viewer opens."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-index",
+                "defaultValue": "0"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the viewer is visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "BCP-47 locale for the built-in aria strings (es/en/pt)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "index": {},
+            "scale": {},
+            "tx": {},
+            "ty": {},
+            "dragging": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coClose",
+                "name": "coClose",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the viewer requests to close (backdrop, X, Escape)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coChange",
+                "name": "coChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the active image changes (prev/next/keyboard)."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }, {
+                "propName": "startIndex",
+                "methodName": "onStartIndexChange"
+            }, {
+                "propName": "images",
+                "methodName": "onImagesChange"
+            }];
+    }
+}

package/dist/collection/components/co-list-item/co-list-item.css

@@ -30,6 +30,11 @@
   background: var(--co-semantic-surface-hover);
 }
 
+.co-list-item:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus);
+}
+
 .co-list-item--selected {
   background: var(--co-semantic-surface-muted);
 }

package/dist/collection/components/co-list-item/co-list-item.js

@@ -19,15 +19,25 @@ export class CoListItem {
                 return;
             this.coSelect.emit();
         };
+        // Keyboard operable like a native option/button: Enter or Space activates it
+        // (Space is prevented so the page doesn't scroll).
+        this.handleKeyDown = (event) => {
+            if (this.disabled)
+                return;
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+                event.preventDefault();
+                this.coSelect.emit();
+            }
+        };
     }
     render() {
-        return (h("div", { key: 'd33007d04b1c3d85465715cf0d8899f565db8a55', class: {
+        return (h("div", { key: 'c20c81d99d5377684e95422ef24edc7349b56d78', class: {
                 'co-list-item': true,
                 'co-list-item--selected': this.selected,
                 'co-list-item--disabled': this.disabled,
                 'co-list-item--dense': this.dense,
                 'co-list-item--has-description': !!this.description,
-            }, part: "item", role: "option", "aria-selected": this.selected ? 'true' : 'false', onClick: this.handleClick }, h("span", { key: '6c75c653a89cd7a32ec0b942e1960b71e5fa0d8f', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: 'bcfff961805fe5637a7ae21b9b81f90338a8903f', name: this.icon, size: 18 }), h("slot", { key: '271b3820399dc30e6401b679302e23b4fe02452a', name: "prefix" })), h("div", { key: '0fd1a2012e58309619586e2aaaca0020ed1acf6e', class: "co-list-item__content" }, this.label && h("span", { key: 'a0d4b2f9c0fbdbcd845839dac939bda59c3b100f', class: "co-list-item__label" }, this.label), this.description && h("span", { key: 'f674f27bf5ac21a8cb92843bf80045014d86cf2d', class: "co-list-item__description" }, this.description), h("slot", { key: 'ee35575016ff414f343255dd652d1a1cf5c01a5d' })), h("span", { key: '348369d7f90b489bf098520c5ddc5135dc6b3c37', class: "co-list-item__suffix" }, h("slot", { key: 'bed7564f82ac2198b04459d777019b7f722b22f3', name: "suffix" }))));
+            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '763f88155a5c3f29a44cfd4d49da29636c590bde', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: 'da92fc7a6b988eb204a5f3bfd267ebd79fcf1230', name: this.icon, size: 18 }), h("slot", { key: 'e00510cf206ce0f863f993bd0ad57bc6d8af2a0d', name: "prefix" })), h("div", { key: '3b5ad6d35640d57d9019e4a020effeef66b16c32', class: "co-list-item__content" }, this.label && h("span", { key: 'c745840c3b94ef786c8efd34567506eab39e969d', class: "co-list-item__label" }, this.label), this.description && h("span", { key: '0988768cf7fde689ed1e995efaefd4168ca17af0', class: "co-list-item__description" }, this.description), h("slot", { key: 'bf6c9f3d55980b433a4d858c58c799f7c3e2898e' })), h("span", { key: '6fb267f7ac2fae4b57efff3a3b6cd2b5f4161d79', class: "co-list-item__suffix" }, h("slot", { key: '9ed7454c37b83cde16a66ce990cad1cf3368e3d9', name: "suffix" }))));
     }
     static get is() { return "co-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -111,7 +111,7 @@ export class CoMenu {
         (_b = (_a = items[next]) === null || _a === void 0 ? void 0 : _a.focusItem) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     render() {
-        return (h("co-popover", { key: 'b3c7932fb6c4574e66ddb3ccbc139ebcd86cce41', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: 'aa6546808d38973f71d12575ac62106a4e4c2c1f', name: "trigger", slot: "trigger" }), h("div", { key: '376d8202add51e08dd9361fa4fd6d4840c1d61ce', class: "co-menu", role: "menu" }, h("slot", { key: '2e1df74c20f44e98dc51474b9009e8dc12f9b403' }))));
+        return (h("co-popover", { key: 'dcdcbba45a201fbd121c94fa10cfbfe9c5d3792b', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: '44d999a9fad8f6950ded890c97b047733aff4080', name: "trigger", slot: "trigger" }), h("div", { key: 'd4ea139be0a26e84e50207f332c2e4f00126d717', class: "co-menu", role: "menu" }, h("slot", { key: 'c00f197bae58f3e8e0fe56fda4489fe7878fd995' }))));
     }
     static get is() { return "co-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-menu-divider/co-menu-divider.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class CoMenuDivider {
     render() {
-        return h("hr", { key: '50dcc97db96c79c6ce7398d627e991750a0f05ac', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: '6e4378c89e42bfa38073213cb7a27dfb3401f663', class: "co-menu-divider", role: "separator" });
     }
     static get is() { return "co-menu-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@
 .co-modal {
   display: flex;
   flex-direction: column;
-  background: var(--co-semantic-surface-page);
+  background: var(--co-semantic-surface-secondary);
   border-radius: var(--co-border-radius-xl);
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
   max-width: 540px;
@@ -18,8 +18,11 @@
   transition: transform 0.2s ease, opacity 0.2s ease;
 }
 
+.co-modal--sm { max-width: 400px; }
+.co-modal--lg { max-width: 680px; }
+
 .co-modal--open {
-  transform: translateY(0);
+  transform: none;
   opacity: 1;
 }
 
@@ -74,11 +77,12 @@
 
 /* ─── Body ──────────────────────────────────────────────────── */
 .co-modal__body {
-  padding: var(--co-spacing-md) var(--co-spacing-xl);
+  padding: var(--co-spacing-lg) var(--co-spacing-xl);
   overflow-y: auto;
   font-size: var(--co-font-size-14);
   color: var(--co-semantic-text-secondary);
   line-height: 1.6;
+  border-top: 1px solid var(--co-semantic-border-default);
 }
 
 .co-modal__body:empty { display: none; }
@@ -89,6 +93,16 @@
   justify-content: flex-end;
   gap: var(--co-spacing-md);
   padding: var(--co-spacing-lg) var(--co-spacing-xl) var(--co-spacing-xl);
+  border-top: 1px solid var(--co-semantic-border-default);
+  /* Footer action buttons default to square corners (inherited by slotted
+     co-buttons via --co-button-radius). Override per button with shape or by
+     resetting --co-button-radius. */
+  --co-button-radius: var(--co-border-radius-xs);
 }
 
 .co-modal__footer:empty { display: none; }
+
+/* ─── No dividers variant ───────────────────────────────────── */
+.co-modal--no-dividers .co-modal__footer {
+  border-top: none;
+}

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

@@ -13,6 +13,10 @@ export class CoModal {
         this.closable = true;
         /** Close when clicking the overlay backdrop */
         this.closeOnOverlay = true;
+        /** Modal width: sm (400px), md (540px), lg (680px) */
+        this.size = 'md';
+        /** Hide body section and all border dividers (compact confirm dialogs) */
+        this.noDividers = false;
         this.handleOverlayClick = () => {
             if (this.closeOnOverlay)
                 this.coClose.emit();
@@ -25,7 +29,13 @@ export class CoModal {
         };
     }
     render() {
-        return (h("co-overlay", { key: '5f3801c0c05b279dc74757dd2d8f716a539d0fb9', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '86805a8d5d51363231a2376ea0a5d5ec303af9fa', class: { 'co-modal': true, 'co-modal--open': this.open }, part: "modal", role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation }, h("div", { key: '360a11aeb0681a2b8b5a58b0b1e4cbd0e1238d4b', class: "co-modal__header", part: "header" }, h("div", { key: 'a0f9d269b62015c03e24aca95be8897aa7694cf9', class: "co-modal__header-text" }, h("h2", { key: 'd33d895a09c3653200ac2cedb914360707438d12', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: '10ec973d66bd6d28c994eb98b444dded32cdddc2', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '9005317d5e6a0611b2e30455ad04450393015a0d', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: '13d2f893a2d34cec9fd7dd04d61c17230af88339', name: "x", size: 20 })))), h("div", { key: 'b482deada782191e1c1c156256f18427147f87dc', class: "co-modal__body", part: "body" }, h("slot", { key: '0e33f4340bbf6ab3334b7f5034eae1394ae07871' })), h("div", { key: 'a5ab52491c22c8a5c51e00fbcafb6286e0be2b12', class: "co-modal__footer", part: "footer" }, h("slot", { key: '5f3fa7189cea7a8ff246ecd2129a79f35adee6b9', name: "footer" })))));
+        return (h("co-overlay", { key: '8b8d87da7d6d0cc1f8758dc85d536901c1b8e559', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '21406763f2a69fbb8d6deca46d06e5d470aa3238', class: {
+                'co-modal': true,
+                'co-modal--open': this.open,
+                'co-modal--sm': this.size === 'sm',
+                'co-modal--lg': this.size === 'lg',
+                'co-modal--no-dividers': this.noDividers,
+            }, part: "modal", role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation }, h("div", { key: 'e0cbf1b770a791d94185500e98550de7428cf61d', class: "co-modal__header", part: "header" }, h("div", { key: '493aaaed168299eb167514dae238e218ce53b78e', class: "co-modal__header-text" }, h("h2", { key: 'de76fdc6f85420119170425b7166807c2c81df0f', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'c5c0ec7113a1715c4db372b6641fcac2989ff113', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '64bae9c3dcac4e036671d36863f419eb051a986c', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: '74fffda310bb8c09812239218f6ee0ca413be44a', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '448b9b55b2bf70b57d478938ab9bb3704d3bcf10', class: "co-modal__body", part: "body" }, h("slot", { key: '77ac168d42a68fac4dd240f2b8dfa5f2ff2ce2bc' }))), h("div", { key: 'd72a9dfdb6a8b1f5f182746eb2df3551bb27f884', class: "co-modal__footer", part: "footer" }, h("slot", { key: '97b3f2d7f2838388f80817d123a9970b159c9223', name: "footer" })))));
     }
     static get is() { return "co-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -139,6 +149,46 @@ export class CoModal {
                 "reflect": false,
                 "attribute": "close-on-overlay",
                 "defaultValue": "true"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Modal width: sm (400px), md (540px), lg (680px)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "noDividers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide body section and all border dividers (compact confirm dialogs)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "no-dividers",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -30,7 +30,7 @@
 }
 
 .co-navbar--dark {
-  --co-navbar-bg: var(--co-theme-navbar-bg, var(--co-color-opacity-negro-80, rgba(31,28,27,0.8)));
+  --co-navbar-bg: var(--co-theme-navbar-bg, var(--co-color-base-negro, #1F1C1B));
   --co-navbar-color: var(--co-theme-on-navbar, #fff);
   backdrop-filter: blur(40px);
   -webkit-backdrop-filter: blur(40px);