@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

@@ -0,0 +1,149 @@
+import { h } from "@stencil/core";
+/**
+ * Action footer for dropdown / list panels (co-popover, co-combobox, …).
+ * Renders one or two full-width action buttons in the standard footer design,
+ * separated from the content above by top padding. Use the props for the common
+ * primary/secondary actions, or the default slot for fully custom content.
+ *
+ * @slot - Custom footer content (rendered after the prop buttons).
+ */
+export class CoListFooter {
+    constructor() {
+        /** Primary action leading icon (Phosphor). Set to '' to hide the icon. */
+        this.primaryIcon = 'plus';
+        /** Secondary action leading icon (Phosphor). Set to '' to hide the icon. */
+        this.secondaryIcon = 'plus';
+        this.handlePrimary = () => this.coPrimary.emit();
+        this.handleSecondary = () => this.coSecondary.emit();
+    }
+    render() {
+        return (h("div", { key: '408e27a26e9d2d1802ba336690c84c745a79a22d', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '9a597df6466ebf5c5720b50d0d4d2993ba3af9ab', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: 'c743c1399b14d175c51ea553d508110e8bcaef05', name: this.secondaryIcon, size: 16 }), h("span", { key: '3c32ad1ea326da99debeb716980b38cf9777b168' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: 'ce57a3fe3456d4cd3959d556304de9de7558ec40', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: '584416793ecbf91a960b2b55f54e703ba1d0ca5c', name: this.primaryIcon, size: 16 }), h("span", { key: 'f227d58236ab0f4d31b398cfc9bf7419efd57d02' }, this.primaryLabel))), h("slot", { key: '601ef71ed5374dab62a79ad875da9b6f7a0fcfed' })));
+    }
+    static get is() { return "co-list-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-list-footer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-list-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "primaryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary (filled) action label. Omit to hide the primary button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-label"
+            },
+            "primaryIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary action leading icon (Phosphor). Set to '' to hide the icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-icon",
+                "defaultValue": "'plus'"
+            },
+            "secondaryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary (outlined) action label. Omit to hide the secondary button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-label"
+            },
+            "secondaryIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary action leading icon (Phosphor). Set to '' to hide the icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-icon",
+                "defaultValue": "'plus'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coPrimary",
+                "name": "coPrimary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the primary action is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coSecondary",
+                "name": "coSecondary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the secondary action is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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);
 }
@@ -60,7 +65,13 @@
   min-width: 0;
 }
 
+.co-list-item__content > .co-list-item__tip {
+  min-width: 0;
+  max-width: 100%;
+}
+
 .co-list-item__label {
+  display: block;
   font-size: var(--co-font-size-14);
   font-weight: 400;
   color: var(--co-semantic-text-default);
@@ -71,6 +82,7 @@
 }
 
 .co-list-item__description {
+  display: block;
   font-size: var(--co-font-size-12);
   color: var(--co-semantic-text-muted);
   line-height: 1.3;

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

@@ -14,20 +14,77 @@ export class CoListItem {
         /** Compact variant — tighter padding + smaller radius for dropdowns / menus
          *  (the default size is tuned for sidebar nav rows). */
         this.dense = false;
+        /** Whether the label / description is currently ellipsis-truncated (drives the tooltip). */
+        this.labelTruncated = false;
+        this.descTruncated = false;
+        // Drives co-tooltip's `disabled`: show the full-text tooltip ONLY when the
+        // label / description is actually ellipsis-truncated. Guarded writes prevent
+        // a render loop; read synchronously, so it's correct before co-tooltip reads
+        // `disabled` on the trigger's mouseenter.
+        this.measureTruncation = () => {
+            const l = this.labelEl ? this.labelEl.scrollWidth > this.labelEl.clientWidth + 1 : false;
+            const d = this.descEl ? this.descEl.scrollWidth > this.descEl.clientWidth + 1 : false;
+            if (l !== this.labelTruncated)
+                this.labelTruncated = l;
+            if (d !== this.descTruncated)
+                this.descTruncated = d;
+        };
         this.handleClick = () => {
             if (this.disabled)
                 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();
+            }
+        };
+    }
+    componentDidLoad() {
+        // A ResizeObserver re-measures when the row gets its real width — e.g. a
+        // top-layer popover panel going from display:none to shown (where a one-shot
+        // load-time measure would read 0) — and on any later resize.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.ro = new ResizeObserver(() => this.measureTruncation());
+            if (this.labelEl)
+                this.ro.observe(this.labelEl);
+            if (this.descEl)
+                this.ro.observe(this.descEl);
+        }
+        this.measureTruncation();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.ro = undefined;
+    }
+    // A width-stable text swap (same column, new text) won't trip the
+    // ResizeObserver — re-measure on prop change; rAF so the DOM holds the new
+    // text first.
+    onTextChange() {
+        requestAnimationFrame(this.measureTruncation);
     }
     render() {
-        return (h("div", { key: 'd33007d04b1c3d85465715cf0d8899f565db8a55', class: {
+        return (h("div", { key: '984e2c7fcb5f4124c871dda103e450b858143c0f', 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: 'd1a3466d6ecc565435d3918a596bc7620cce2197', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '2374265eac83fb8d86ee26ab3317da2c2c9d2998', name: this.icon, size: 18 }), h("slot", { key: '6bb538d2212c2bd25d61c54a59120295ff55692b', name: "prefix" })), h("div", { key: '052ed53fb59580780a0d1c2b1dbdff7711fbb585', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '027cb3026c0ac2efdfb76f7eeb9600d21899e865', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '3b27db5590486bab2c4b8819548dbb13c332a13b', class: "co-list-item__label", ref: (el) => {
+                this.labelEl = el;
+                if (el && this.ro)
+                    this.ro.observe(el);
+            } }, this.label))), this.description && (h("co-tooltip", { key: '220243aafd77d681315f0847cb3db72110330b7e', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: 'fb8543457be7e67c7eca8461f207dad833503462', class: "co-list-item__description", ref: (el) => {
+                this.descEl = el;
+                if (el && this.ro)
+                    this.ro.observe(el);
+            } }, this.description))), h("slot", { key: 'ed7e997155bec808ef01c6300109f435a5e698b1' })), h("span", { key: '1601e81a0d25f685b69ebea30a13b1dac9337866', class: "co-list-item__suffix" }, h("slot", { key: 'f23ac07bc12c9a02810574bcb30b2a323b07b3ee', name: "suffix" }))));
     }
     static get is() { return "co-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -162,6 +219,12 @@ export class CoListItem {
             }
         };
     }
+    static get states() {
+        return {
+            "labelTruncated": {},
+            "descTruncated": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "coSelect",
@@ -180,4 +243,14 @@ export class CoListItem {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "onTextChange"
+            }, {
+                "propName": "description",
+                "methodName": "onTextChange"
+            }];
+    }
 }

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

@@ -69,3 +69,12 @@
   50%      { transform: translateX(calc(var(--co-loader-step) * 2)) scale(0.8); }
   75%      { transform: translateX(var(--co-loader-step)) scale(1.2); }
 }
+
+/* Reduced-motion: freeze the bounce; lay the three balls out as a static row
+   (without this they'd all collapse to x=0 and overlap). */
+@media (prefers-reduced-motion: reduce) {
+  .co-loader__ball { animation: none; }
+  .co-loader__ball--blue   { transform: translateX(0); }
+  .co-loader__ball--yellow { transform: translateX(var(--co-loader-step)); }
+  .co-loader__ball--red    { transform: translateX(calc(var(--co-loader-step) * 2)); }
+}

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: 'b6d6cd9511cc0ce9d2025ca162aaeb7d962b96a2', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: '91085adedc753afe8f6f9ba2b137ecde1af0155d', name: "trigger", slot: "trigger" }), h("div", { key: 'f7bf1839cc05d7d5ba5c8ea7f5fcb10d50f37ede', class: "co-menu", role: "menu" }, h("slot", { key: 'c11fa45f19630d6568fb66e4df38301b40f83031' }))));
     }
     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: '08549f09b4a76d1bc2cd572a8f09ed9289551175', class: "co-menu-divider", role: "separator" });
     }
     static get is() { return "co-menu-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -96,4 +96,22 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
+  /* Anchor for the hover-bridge pseudo-elements below. */
+  position: relative;
 }
+
+/* Invisible hover bridge across the popover offset gap. One side always faces
+   the parent menu regardless of left/right flip, so moving the cursor from the
+   trigger row to the submenu never crosses a dead zone that would start the
+   close timer. The bridges live inside the panel, which has its own
+   mouseenter, so hovering them keeps the submenu open. */
+.co-menu-item__submenu::before,
+.co-menu-item__submenu::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 6px; /* >= co-popover offset (4px) */
+}
+.co-menu-item__submenu::before { left: -6px; }
+.co-menu-item__submenu::after { right: -6px; }

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

@@ -74,6 +74,16 @@ export class CoMenuItem {
                 return;
             this.scheduleClose();
         };
+        // Arrow function (not a plain method) so `this` stays bound when it is passed
+        // directly as a JSX event handler (`onMouseEnter={this.cancelClose}`). Stencil
+        // does NOT auto-bind plain methods used as listeners — as a listener `this`
+        // would be the DOM element, so the timer would never actually clear.
+        this.cancelClose = () => {
+            if (this.closeTimer) {
+                window.clearTimeout(this.closeTimer);
+                this.closeTimer = undefined;
+            }
+        };
     }
     /** Programmatic focus — used by `co-menu`'s keyboard navigation. Named
      *  `focusItem` (not `focus`) because Stencil reserves the latter (it shadows
@@ -104,13 +114,10 @@ export class CoMenuItem {
     openSubmenu() { this.submenuOpen = true; }
     scheduleClose() {
         this.cancelClose();
-        this.closeTimer = window.setTimeout(() => { this.submenuOpen = false; }, 200);
-    }
-    cancelClose() {
-        if (this.closeTimer) {
-            window.clearTimeout(this.closeTimer);
-            this.closeTimer = undefined;
-        }
+        // Delay tolerates the cursor travelling from the trigger row, across the
+        // offset gap, to the submenu panel (and slow diagonal paths toward a
+        // flipped submenu). The panel's own mouseenter cancels this on arrival.
+        this.closeTimer = window.setTimeout(() => { this.submenuOpen = false; }, 260);
     }
     render() {
         const row = (h("button", { ref: (el) => (this.rowEl = el), class: {
@@ -127,7 +134,7 @@ export class CoMenuItem {
         }
         // Submenu trigger — wrap the row in a co-popover anchored to the right.
         // The default slot (nested co-menu-items) is projected into the popover.
-        return (h("div", { class: "co-menu-item__wrap co-menu-item__wrap--submenu", onMouseEnter: this.cancelClose, onMouseLeave: this.handleMouseLeave }, h("co-popover", { placement: "right-start", offset: 4, open: this.submenuOpen, onCoOpen: () => { this.submenuOpen = true; }, onCoClose: () => { this.submenuOpen = false; } }, h("div", { slot: "trigger", class: "co-menu-item__trigger-wrap" }, row), h("div", { class: "co-menu-item__submenu", role: "menu" }, h("slot", null)))));
+        return (h("div", { class: "co-menu-item__wrap co-menu-item__wrap--submenu", onMouseEnter: this.cancelClose, onMouseLeave: this.handleMouseLeave }, h("co-popover", { placement: "right-start", offset: 4, open: this.submenuOpen, onCoOpen: () => { this.submenuOpen = true; }, onCoClose: () => { this.submenuOpen = false; } }, h("div", { slot: "trigger", class: "co-menu-item__trigger-wrap" }, row), h("div", { class: "co-menu-item__submenu", role: "menu", onMouseEnter: this.cancelClose, onMouseLeave: this.handleMouseLeave }, h("slot", null)))));
     }
     static get is() { return "co-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,13 +1,52 @@
 :host {
   display: contents;
+  /* Frosted-glass backdrop for modals — stronger blur than the overlay default
+     so the page behind reads as glass, while the panel itself stays solid. */
+  --co-overlay-blur: 8px;
+  --co-overlay-bg: rgba(31, 28, 27, 0.35);
+}
+
+/* Frame: carries the squircle-following soft drop-shadow. A box-shadow on the
+   masked panel would be clipped away by the mask, so the elevation lives here
+   (drop-shadow respects the child's mask silhouette). co-overlay centers it. */
+.co-modal__frame {
+  display: flex;
+  filter:
+    drop-shadow(0 1px 2px rgba(31, 28, 27, 0.06))
+    drop-shadow(0 14px 34px rgba(31, 28, 27, 0.16));
 }
 
 .co-modal {
   display: flex;
   flex-direction: column;
-  background: var(--co-semantic-surface-page);
-  border-radius: var(--co-border-radius-xl);
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+  background: var(--co-semantic-surface-secondary);
+  /* Squircle geometry — fixed-radius 4-corner mask (smooth continuous corners
+     that stay constant at any modal size). Radius knob: --co-modal-r.
+     The cross bars are `calc(... + 2px)` so they OVERLAP each corner ~1px: at
+     exact abutment the fractional-pixel rounding leaves a <1px transparent SEAM
+     at the bar↔corner edge that reads as a faint line flickering with zoom (same
+     fix as co-app-shell .main__card). The overlap is inside the corners' opaque
+     area, so the rounded shape is unchanged. */
+  --co-modal-r: var(--co-border-radius-xl);
+  --co-sq-tl: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 0L95 0L92.5 0L90 0L87.5 0.01L85 0.01L82.5 0.02L80 0.04L77.5 0.06L75 0.1L72.5 0.14L70 0.2L67.5 0.28L65 0.38L62.5 0.5L60 0.65L57.5 0.83L55 1.04L52.5 1.3L50 1.6L47.5 1.96L45 2.37L42.5 2.85L40 3.41L37.5 4.05L35 4.8L32.5 5.65L30 6.63L27.5 7.77L25 9.07L22.5 10.58L20 12.34L17.5 14.41L15 16.85L12.5 19.79L10 23.42L7.5 28.06L5 34.37L2.5 44.29L0 100L100 100Z%27 fill=%27%23fff%27/></svg>");
+  --co-sq-tr: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 0L5 0L7.5 0L10 0L12.5 0.01L15 0.01L17.5 0.02L20 0.04L22.5 0.06L25 0.1L27.5 0.14L30 0.2L32.5 0.28L35 0.38L37.5 0.5L40 0.65L42.5 0.83L45 1.04L47.5 1.3L50 1.6L52.5 1.96L55 2.37L57.5 2.85L60 3.41L62.5 4.05L65 4.8L67.5 5.65L70 6.63L72.5 7.77L75 9.07L77.5 10.58L80 12.34L82.5 14.41L85 16.85L87.5 19.79L90 23.42L92.5 28.06L95 34.37L97.5 44.29L100 100L0 100Z%27 fill=%27%23fff%27/></svg>");
+  --co-sq-bl: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 55.71L5 65.63L7.5 71.94L10 76.58L12.5 80.21L15 83.15L17.5 85.59L20 87.66L22.5 89.42L25 90.93L27.5 92.23L30 93.37L32.5 94.35L35 95.2L37.5 95.95L40 96.59L42.5 97.15L45 97.63L47.5 98.04L50 98.4L52.5 98.7L55 98.96L57.5 99.17L60 99.35L62.5 99.5L65 99.62L67.5 99.72L70 99.8L72.5 99.86L75 99.9L77.5 99.94L80 99.96L82.5 99.98L85 99.99L87.5 99.99L90 100L92.5 100L95 100L97.5 100L100 100L100 0Z%27 fill=%27%23fff%27/></svg>");
+  --co-sq-br: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 55.71L95 65.63L92.5 71.94L90 76.58L87.5 80.21L85 83.15L82.5 85.59L80 87.66L77.5 89.42L75 90.93L72.5 92.23L70 93.37L67.5 94.35L65 95.2L62.5 95.95L60 96.59L57.5 97.15L55 97.63L52.5 98.04L50 98.4L47.5 98.7L45 98.96L42.5 99.17L40 99.35L37.5 99.5L35 99.62L32.5 99.72L30 99.8L27.5 99.86L25 99.9L22.5 99.94L20 99.96L17.5 99.98L15 99.99L12.5 99.99L10 100L7.5 100L5 100L2.5 100L0 100L0 0Z%27 fill=%27%23fff%27/></svg>");
+  -webkit-mask:
+    var(--co-sq-tl) top left / var(--co-modal-r) var(--co-modal-r) no-repeat,
+    var(--co-sq-tr) top right / var(--co-modal-r) var(--co-modal-r) no-repeat,
+    var(--co-sq-bl) bottom left / var(--co-modal-r) var(--co-modal-r) no-repeat,
+    var(--co-sq-br) bottom right / var(--co-modal-r) var(--co-modal-r) no-repeat,
+    linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-modal-r) + 2px) no-repeat,
+    linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-modal-r) + 2px) 100% no-repeat;
+          mask:
+    var(--co-sq-tl) top left / var(--co-modal-r) var(--co-modal-r) no-repeat,
+    var(--co-sq-tr) top right / var(--co-modal-r) var(--co-modal-r) no-repeat,
+    var(--co-sq-bl) bottom left / var(--co-modal-r) var(--co-modal-r) no-repeat,
+    var(--co-sq-br) bottom right / var(--co-modal-r) var(--co-modal-r) no-repeat,
+    linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-modal-r) + 2px) no-repeat,
+    linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-modal-r) + 2px) 100% no-repeat;
+  border-radius: 0; /* the mask defines the (smooth) shape */
   max-width: 540px;
   width: 90vw;
   max-height: 80vh;
@@ -18,8 +57,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 +116,13 @@
 
 /* ─── 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;
+  overscroll-behavior: contain;
   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 +133,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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { afterEventFor } from "../co-overlay/overlayAfterClose";
 /**
  * @slot        - Modal body content
  * @slot footer - Footer with action buttons
@@ -13,6 +14,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();
@@ -23,9 +28,24 @@ export class CoModal {
         this.stopPropagation = (e) => {
             e.stopPropagation();
         };
+        this.handleTransitionEnd = (e) => {
+            if (e.target !== this.modalEl)
+                return;
+            const ev = afterEventFor(e.propertyName, this.open, 'transform');
+            if (ev === 'after-open')
+                this.coAfterOpen.emit();
+            else if (ev === 'after-close')
+                this.coAfterClose.emit();
+        };
     }
     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: '2fee2b3d1249611a053b917e7d56cb9550e5f3b8', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '68cd9017ea7b89c2a3c3a5a6be81a4a1760588be', class: "co-modal__frame" }, h("div", { key: 'cb97ce8eb1bb4ca47b9f81dd8c72878eec383928', 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", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '85b3c3616ec370427f30832aaec9674fa3651205', class: "co-modal__header", part: "header" }, h("div", { key: '4bcab7c1022aeaa357feae91999120e5b4dc2d30', class: "co-modal__header-text" }, h("h2", { key: '40879cdb0533f481e4807d8510937eec0de46317', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'ba57a406a257ce0a969da6a508a287f28ffc64b4', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: 'e5eb0cbcf8cbe53b02991b41a2b2e4e75ae0d5b3', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'f11fd06c1a6b3cd41254324e44dcfb70b2058003', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '8e189a09c8418f1646650c57748855d805d9bd7e', class: "co-modal__body", part: "body" }, h("slot", { key: '8c8363b3405295c7823feb6196c4c72a1724a6d5' }))), h("div", { key: 'fdd675455b1391ea7d3456321a1fb03104f14b49', class: "co-modal__footer", part: "footer" }, h("slot", { key: 'a05ba1229c4fa147c582ad7d06fb4a27d4a42ef5', name: "footer" }))))));
     }
     static get is() { return "co-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -139,6 +159,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"
             }
         };
     }
@@ -158,6 +218,36 @@ export class CoModal {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "coAfterClose",
+                "name": "coAfterClose",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Close animation finished."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coAfterOpen",
+                "name": "coAfterOpen",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Open animation finished."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
 }

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);