@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

package/dist/collection/components/co-media-thumb/co-media-thumb.js

@@ -0,0 +1,148 @@
+import { h } from "@stencil/core";
+/**
+ * An image / video preview region. Renders a cover image when `src` is set,
+ * an optional dark scrim + play button when `video` is true, and a default
+ * slot fallback (for a type-icon box) when there is no `src`.
+ *
+ * @slot - Fallback content shown when `src` is not set (e.g. a type-icon box).
+ */
+export class CoMediaThumb {
+    constructor() {
+        /** Show the video overlay (dark scrim + centered play button). */
+        this.video = false;
+        /** Height of the region. Accepts a CSS length or a bare number (→ px). */
+        this.height = '132px';
+        /** Corner radius in px. */
+        this.radius = 10;
+    }
+    toCss(value) {
+        if (typeof value === 'number')
+            return `${value}px`;
+        const v = String(value).trim();
+        return /^-?\d*\.?\d+$/.test(v) ? `${v}px` : v;
+    }
+    render() {
+        var _a;
+        return (h("div", { key: '003a31fad075f90eb6097f3a9c4844d7bb15285f', class: {
+                'co-media-thumb': true,
+                'co-media-thumb--video': this.video,
+            }, part: "thumb", style: {
+                height: this.toCss(this.height),
+                borderRadius: `${this.radius}px`,
+            } }, this.src ? (h("img", { class: "co-media-thumb__img", src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : '', part: "img" })) : (h("slot", null)), this.video && (h("div", { key: '11419e55099d3098081d33de77b372f545be8be2', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: 'bd9249783989b073dfb21ac973bedbfc43ea655c', class: "co-media-thumb__play", part: "play" }, h("svg", { key: '6610a414fd2ad05f11aa810dd0703e7fab30ec8d', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: 'b005c7540600ad137f159392f94c437eaf91c0d8', d: "M2 2l12 7-12 7z", fill: "var(--co-color-base-negro, #1f1c1b)" })))))));
+    }
+    static get is() { return "co-media-thumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-media-thumb.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-media-thumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image source URL. When set, a cover image is rendered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "video": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the video overlay (dark scrim + centered play button)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "video",
+                "defaultValue": "false"
+            },
+            "height": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the region. Accepts a CSS length or a bare number (\u2192 px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'132px'"
+            },
+            "radius": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Corner radius in px."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "radius",
+                "defaultValue": "10"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text for the image."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt"
+            }
+        };
+    }
+}

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

@@ -5,12 +5,14 @@
 .co-menu {
   /* surface-secondary = base-blanco. NOT surface-primary (that's base-negro). */
   background: var(--co-semantic-surface-secondary, #fff);
-  border: 1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));
   border-radius: var(--co-border-radius-sm, 12px);
+  /* shadow-lg drop shadow + a 1px inset hairline ring (replaces the old 1px
+     border so it never adds to the panel box). */
   box-shadow:
-    0 4px 12px rgba(0, 0, 0, 0.08),
-    0 1px 3px rgba(0, 0, 0, 0.04);
-  padding: var(--co-spacing-xs, 4px);
+    var(--co-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04)),
+    inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+  /* Tunable panel padding — default 4px; design (Header "Nuevo" menu) uses 6px. */
+  padding: var(--co-menu-padding, var(--co-spacing-xs, 4px));
   min-width: 200px;
   display: flex;
   flex-direction: column;

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: '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' }))));
+        return (h("co-popover", { key: '69e82f6a6eec310ca8ab45d1716eee124f4127f9', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: 'f03a749106eb2c3b566c5179fb7b43c88c6887ed', name: "trigger", slot: "trigger" }), h("div", { key: 'a133998147e906f1b96c79baccb345e6cc3aad57', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: 'bdc28c804d63632df5849b82904741074fc161ef' }))));
     }
     static get is() { return "co-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -213,6 +213,25 @@ export class CoMenu {
                 "reflect": true,
                 "attribute": "open",
                 "defaultValue": "false"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fixes the panel to an exact width (e.g. `'210px'`). When unset, the panel\nkeeps its intrinsic auto width (min-width 200px). Also tune padding with the\n`--co-menu-padding` CSS var (default 4px; design uses 6px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
             }
         };
     }

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: '6e4378c89e42bfa38073213cb7a27dfb3401f663', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: 'dd21fada7235dda4e64c2a3a003b26c4dd65501e', 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

@@ -10,8 +10,11 @@
   width: 100%;
   display: flex;
   align-items: center;
-  gap: var(--co-spacing-sm, 8px);
-  padding: var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);
+  /* Tunable metrics — defaults reproduce the original 8px gap / 8px 12px pad /
+     36px row. Header rows use gap 10 + pad "0 10" + height 38; sort/type rows
+     use pad "0 10" + height 36. */
+  gap: var(--co-menu-item-gap, var(--co-spacing-sm, 8px));
+  padding: var(--co-menu-item-padding, var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px));
   background: transparent;
   border: 0;
   border-radius: var(--co-border-radius-xs, 8px);
@@ -21,7 +24,7 @@
   text-align: left;
   cursor: pointer;
   transition: background 0.1s ease, color 0.1s ease;
-  min-height: 36px;
+  min-height: var(--co-menu-item-height, 36px);
   box-sizing: border-box;
 }
 
@@ -30,6 +33,11 @@
   min-height: 32px;
 }
 
+/* At-rest selected highlight. Declared before :hover so hover still wins. */
+.co-menu-item--selected {
+  background: var(--co-color-gray-100, #f6f6f6);
+}
+
 .co-menu-item:hover,
 .co-menu-item--submenu-open {
   background: var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04));
@@ -57,7 +65,17 @@
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
-  color: currentColor;
+  /* Default follows text color; Header rows override to gray-600. */
+  color: var(--co-menu-item-icon-color, currentColor);
+}
+
+/* Trailing check (single-select menus). After the flex:1 label, so it sits at
+   the row's trailing edge. */
+.co-menu-item__check {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--co-semantic-text-default);
 }
 
 .co-menu-item__label {
@@ -86,14 +104,32 @@
 .co-menu-item__submenu {
   /* surface-secondary = base-blanco. NOT surface-primary (that's base-negro). */
   background: var(--co-semantic-surface-secondary, #fff);
-  border: 1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));
   border-radius: var(--co-border-radius-sm, 12px);
+  /* Match the co-menu panel: shadow-lg + 1px inset hairline ring. */
   box-shadow:
-    0 4px 12px rgba(0, 0, 0, 0.08),
-    0 1px 3px rgba(0, 0, 0, 0.04);
-  padding: var(--co-spacing-xs, 4px);
+    var(--co-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04)),
+    inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+  padding: var(--co-menu-padding, var(--co-spacing-xs, 4px));
   min-width: 180px;
   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

@@ -17,6 +17,12 @@ export class CoMenuItem {
     constructor() {
         /** Tighter row metrics (32px instead of 36px). */
         this.dense = false;
+        /** Marks the row as selected — paints an at-rest gray-100 background. Used by
+         *  single-select menus (sort/type). */
+        this.selected = false;
+        /** Renders a trailing check (size 15) after the label. Pair with `selected`
+         *  to mark the chosen option in a single-select menu. */
+        this.trailingCheck = false;
         /** Visually disabled — pointer events ignored, opacity reduced. */
         this.disabled = false;
         /** `danger` shifts text + icon to the destructive color. Use for Delete, etc. */
@@ -74,6 +80,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,30 +120,29 @@ 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() {
+        var _a;
         const row = (h("button", { ref: (el) => (this.rowEl = el), class: {
                 'co-menu-item': true,
                 'co-menu-item--dense': this.dense,
+                'co-menu-item--selected': this.selected,
                 'co-menu-item--disabled': this.disabled,
                 'co-menu-item--danger': this.variant === 'danger',
                 'co-menu-item--submenu': this.hasSubmenu,
                 'co-menu-item--submenu-open': this.hasSubmenu && this.submenuOpen,
-            }, type: "button", role: "menuitem", "aria-haspopup": this.hasSubmenu ? 'menu' : undefined, "aria-expanded": this.hasSubmenu ? (this.submenuOpen ? 'true' : 'false') : undefined, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeydown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.icon && (h("span", { class: "co-menu-item__icon" }, h("co-icon", { name: this.icon, size: 16 }))), h("span", { class: "co-menu-item__label" }, this.label, h("slot", { name: "label" })), h("span", { class: "co-menu-item__suffix" }, h("slot", { name: "suffix" }), this.hasSubmenu && h("co-icon", { name: "caret-right", size: 14 }))));
+            }, type: "button", role: "menuitem", "aria-haspopup": this.hasSubmenu ? 'menu' : undefined, "aria-expanded": this.hasSubmenu ? (this.submenuOpen ? 'true' : 'false') : undefined, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeydown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.icon && (h("span", { class: "co-menu-item__icon" }, h("co-icon", { name: this.icon, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16 }))), h("span", { class: "co-menu-item__label" }, this.label, h("slot", { name: "label" })), this.trailingCheck && (h("span", { class: "co-menu-item__check" }, h("co-icon", { name: "check", size: 15 }))), h("span", { class: "co-menu-item__suffix" }, h("slot", { name: "suffix" }), this.hasSubmenu && h("co-icon", { name: "caret-right", size: 14 }))));
         if (!this.hasSubmenu) {
             // Leaf — the default slot is unused for leaves; ignore it.
             return h("div", { class: "co-menu-item__wrap" }, row);
         }
         // 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"; }
@@ -155,13 +170,32 @@ export class CoMenuItem {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Icon name (Phosphor) rendered before the label."
+                    "text": "Icon name (Phosphor) rendered before the label. Optional \u2014 rows may be\nlabel-only."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "icon"
             },
+            "iconSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the leading icon size (px). Defaults to 16."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -201,6 +235,46 @@ export class CoMenuItem {
                 "attribute": "dense",
                 "defaultValue": "false"
             },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the row as selected \u2014 paints an at-rest gray-100 background. Used by\nsingle-select menus (sort/type)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "trailingCheck": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders a trailing check (size 15) after the label. Pair with `selected`\nto mark the chosen option in a single-select menu."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trailing-check",
+                "defaultValue": "false"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

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-secondary);
-  border-radius: var(--co-border-radius-xl);
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+  /* 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;
@@ -21,6 +60,23 @@
 .co-modal--sm { max-width: 400px; }
 .co-modal--lg { max-width: 680px; }
 
+/* Media/document viewer. `height` is set (not just max-height) so the body has
+   a definite box to grow into — a <video> or <iframe> would otherwise collapse
+   to its intrinsic height and leave the panel half empty. */
+.co-modal--full {
+  max-width: min(1400px, 95vw);
+  width: 95vw;
+  height: 92vh;
+  max-height: 92vh;
+}
+
+.co-modal--full .co-modal__body {
+  flex: 1;
+  min-height: 0; /* let the flex child shrink; without it the body overflows the panel */
+  padding: 0;    /* the viewer fills edge-to-edge */
+  overflow: hidden;
+}
+
 .co-modal--open {
   transform: none;
   opacity: 1;
@@ -79,6 +135,7 @@
 .co-modal__body {
   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;