@prolibu-suite/cobalt-core 0.5.0 → 0.7.0

package/dist/collection/components/co-rich-text-editor/co-rich-text-editor.js

@@ -22,6 +22,14 @@ export class CoRichTextEditor {
         this.preset = 'task';
         this.placeholder = '';
         this.status = 'default';
+        /** Visual style. `flat` strips the frame's border and background so it
+         *  reads as plain content instead of a boxed control — padding, label,
+         *  focus ring, disabled and status states are unaffected. The toolbar keeps
+         *  its own background + bottom border (a subtle, token-driven separator),
+         *  which is what keeps toolbar and editable area legible/separated once the
+         *  outer box is gone. `default` (the standard bordered box) renders
+         *  identically to before this prop existed. */
+        this.variant = 'default';
         this.disabled = false;
         this.readonly = false;
         this.required = false;
@@ -29,6 +37,8 @@ export class CoRichTextEditor {
         this.autofocus = false;
         /** Toolbar layout. `auto` uses the preset default. */
         this.toolbar = 'auto';
+        /** Passthrough: shows the toolbar attachment button (host owns the files). */
+        this.attachmentsEnabled = false;
         /** BCP-47 locale for UI strings (e.g. 'en', 'es-CO', 'pt-BR'). Default English. */
         this.locale = 'en';
         this.ready = false;
@@ -2021,14 +2031,18 @@ export class CoRichTextEditor {
     render() {
         const showToolbar = this.resolvedToolbar !== 'none' && !this.readonly && !this.disabled;
         const showCount = this.showCharacterCount || this.maxLength != null;
-        return (h("div", { key: 'a863f70f90bd46ee2306d175d55a519e7e659693', class: {
+        return (h("div", { key: '68960896d888331319dc82779e73988d66dc57de', class: {
                 'co-rich-text-editor': true,
                 'co-rich-text-editor--focused': this.hasFocus,
                 'co-rich-text-editor--disabled': this.disabled,
                 'co-rich-text-editor--readonly': this.readonly,
                 'co-rich-text-editor--loading': !this.ready,
                 [`co-rich-text-editor--${this.status}`]: this.status !== 'default',
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '7e17033f81cbb694f2010d709f82b5e9889a3c01', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: '9e2950cee1b79964f8628a6731bf5b779aaab325', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: 'e9fbd5143e20e61509691f86c53aabff6c3bc7a4', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'd8909018c066c1572c2fd28a8c1d5a658f342c02', class: "co-rich-text-editor__frame" }, showToolbar && (h("co-rich-text-toolbar", { key: '06907acfc9c6187864f79bed5364aae5cb0fb5d8', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, disabled: this.disabled || this.readonly, locale: this.locale, ref: (el) => (this.toolbarEl = el) })), h("div", { key: 'c173744e164a4c2591baf2a13076c253aeadab64', class: "co-rich-text-editor__box" }, h("div", { key: '62d96e73d679a9dda50dfba670ae42bf4a2cde96', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) }))), h("div", { key: 'c0175bc7b0259c5d583d64394bb217f7cdc9b412', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '909b30e6b36cfda26573d5b3c653158904d3c0c2', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: 'e6c5c07ca23c2aee967bad06ce91c442cdee4d9b', name: this.helperIcon, size: 14 }), h("span", { key: 'e4e74012dea722d0aa31d79e4a444d8c5b004c7c' }, this.helperText))), showCount && (h("span", { key: 'ce85002412ace110ea9cf0191d4e5e072a21af72', class: "co-rich-text-editor__count", ref: (el) => (this.charCountEl = el) }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
+                'co-rich-text-editor--flat': this.variant === 'flat',
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'b62f26479fb2483bdbbe91102890b34d17a2a0e2', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: '8f9938f7db575672bc7828a9631fbfd414e9f56b', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: '1011143f44b19a00c7eb5b4da92f876355fa512c', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: '4e9f178ac73859fc451d744af890611344f1356b', class: "co-rich-text-editor__frame" }, showToolbar && (h("co-rich-text-toolbar", { key: 'b26c97a093c7ec8f32a2103af0d932ee7a67c4c4', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, disabled: this.disabled || this.readonly, locale: this.locale, attachmentsEnabled: this.attachmentsEnabled, attachmentAccept: this.attachmentAccept, onCoAttachmentsSelected: (e) => {
+                e.stopPropagation();
+                this.coAttachmentsSelected.emit(e.detail);
+            }, ref: (el) => (this.toolbarEl = el) })), h("div", { key: 'afcea2bd72ff458960dc8392042a5b40be198c60', class: "co-rich-text-editor__box" }, h("div", { key: '63909643a4f31c88bf4a1f8dbf912f802c9b4445', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) }))), h("div", { key: '1ae75fba2960ca8b51b1b07fe1c7547d8519be06', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '4785f2a71c576901c0fb8fba7be0a7caaf744338', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: '8a8f5299c523630c7f83499f9e5a3322a5f977dd', name: this.helperIcon, size: 14 }), h("span", { key: '0d19604ce80786b32ab83b48ddf12948012b8e16' }, this.helperText))), showCount && (h("span", { key: 'a668807c60d0e00452dd88582c8bd1cb8f4fed20', class: "co-rich-text-editor__count", ref: (el) => (this.charCountEl = el) }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
     }
     static get is() { return "co-rich-text-editor"; }
     static get originalStyleUrls() {
@@ -2068,7 +2082,7 @@ export class CoRichTextEditor {
                 "mutable": false,
                 "complexType": {
                     "original": "RichTextPreset",
-                    "resolved": "\"comment\" | \"document\" | \"email\" | \"task\"",
+                    "resolved": "\"block-email\" | \"comment\" | \"document\" | \"email\" | \"task\"",
                     "references": {
                         "RichTextPreset": {
                             "location": "import",
@@ -2187,6 +2201,26 @@ export class CoRichTextEditor {
                 "attribute": "status",
                 "defaultValue": "'default'"
             },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'flat'",
+                    "resolved": "\"default\" | \"flat\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style. `flat` strips the frame's border and background so it\nreads as plain content instead of a boxed control \u2014 padding, label,\nfocus ring, disabled and status states are unaffected. The toolbar keeps\nits own background + bottom border (a subtle, token-driven separator),\nwhich is what keeps toolbar and editable area legible/separated once the\nouter box is gone. `default` (the standard bordered box) renders\nidentically to before this prop existed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -2311,7 +2345,7 @@ export class CoRichTextEditor {
                 "mutable": false,
                 "complexType": {
                     "original": "ToolbarVariant",
-                    "resolved": "\"auto\" | \"basic\" | \"compact\" | \"full\" | \"none\"",
+                    "resolved": "\"auto\" | \"basic\" | \"compact\" | \"compact-assets\" | \"full\" | \"none\"",
                     "references": {
                         "ToolbarVariant": {
                             "location": "import",
@@ -2395,6 +2429,45 @@ export class CoRichTextEditor {
                 "getter": false,
                 "setter": false
             },
+            "attachmentsEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passthrough: shows the toolbar attachment button (host owns the files)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "attachments-enabled",
+                "defaultValue": "false"
+            },
+            "attachmentAccept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passthrough: `accept` for the toolbar attachment picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "attachment-accept"
+            },
             "fontFamilies": {
                 "type": "string",
                 "mutable": false,
@@ -2637,6 +2710,26 @@ export class CoRichTextEditor {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "coAttachmentsSelected",
+                "name": "coAttachmentsSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emitted from the inner toolbar: files picked via the attach button.\nDeclared here so hosts can bind on the editor (the toolbar is internal)."
+                },
+                "complexType": {
+                    "original": "{ files: File[] }",
+                    "resolved": "{ files: File[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/co-rich-text-toolbar/co-rich-text-toolbar.js

@@ -17,6 +17,9 @@ export class CoRichTextToolbar {
         this.disabled = false;
         /** BCP-47 locale for UI strings (e.g. 'en', 'es-CO', 'pt-BR'). Default English. */
         this.locale = 'en';
+        /** Shows the attachment button (compact-assets variant). The editor never
+         *  owns the attachment list — it only emits the picked files. */
+        this.attachmentsEnabled = false;
         this.items = [];
         /** Bumped on every editor transaction to refresh active state. */
         this.tick = 0;
@@ -170,6 +173,9 @@ export class CoRichTextToolbar {
                         chain.outdent().run();
                     }
                     break;
+                case 'attachment':
+                    this.triggerAttachmentFileUpload();
+                    return; // no editor command — the host owns the files
                 case 'link':
                 case 'image':
                 case 'youtube':
@@ -206,6 +212,7 @@ export class CoRichTextToolbar {
             blockquote: s.quote, codeBlock: s.codeBlock,
             horizontalRule: s.horizontalRule,
             link: s.link, image: s.image, youtube: s.youtubeVideo, iframe: s.iframeEmbed,
+            attachment: s.attachFiles,
             table: s.table, textColor: s.textColor, highlight: s.highlight,
             alignment: s.alignment, lineSpacing: s.lineSpacing,
             letterSpacing: s.letterSpacing,
@@ -277,6 +284,9 @@ export class CoRichTextToolbar {
     onVariantChange(v) {
         this.items = this.resolveItems(v);
     }
+    onAttachmentsEnabledChange() {
+        this.items = this.resolveItems(this.variant);
+    }
     onEditorChange(next, prev) {
         prev === null || prev === void 0 ? void 0 : prev.off('transaction', this.onTransaction);
         next === null || next === void 0 ? void 0 : next.on('transaction', this.onTransaction);
@@ -309,7 +319,11 @@ export class CoRichTextToolbar {
         const kept = base.filter((entry) => {
             if (this.isSeparator(entry))
                 return true;
-            const cmd = CoRichTextToolbar.ITEM_COMMAND[entry.action];
+            const action = entry.action;
+            // attachment has no editor command — visibility is host opt-in.
+            if (action === 'attachment')
+                return this.attachmentsEnabled;
+            const cmd = CoRichTextToolbar.ITEM_COMMAND[action];
             return cmd ? available(cmd) : true;
         });
         // Drop separators that ended up leading, trailing, or doubled-up.
@@ -788,6 +802,20 @@ export class CoRichTextToolbar {
         }
         return (h("div", { class: "co-rich-text-toolbar__popover", onMouseDown: (e) => { e.preventDefault(); e.stopPropagation(); } }, h("button", { type: "button", class: "co-rich-text-toolbar__popover-option", onMouseDown: (e) => e.preventDefault(), onClick: () => this.triggerImageFileUpload() }, h("co-icon", { name: "upload-simple", size: 16 }), h("span", null, this.s.uploadFromComputer)), h("button", { type: "button", class: "co-rich-text-toolbar__popover-option", onMouseDown: (e) => e.preventDefault(), onClick: () => { this.imagePopoverMode = 'url'; } }, h("co-icon", { name: "link", size: 16 }), h("span", null, this.s.viaUrl))));
     }
+    triggerAttachmentFileUpload() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.multiple = true;
+        if (this.attachmentAccept)
+            input.accept = this.attachmentAccept;
+        input.onchange = () => {
+            var _a;
+            const files = Array.from((_a = input.files) !== null && _a !== void 0 ? _a : []);
+            if (files.length)
+                this.coAttachmentsSelected.emit({ files });
+        };
+        input.click();
+    }
     triggerImageFileUpload() {
         const input = document.createElement('input');
         input.type = 'file';
@@ -1111,8 +1139,8 @@ export class CoRichTextToolbar {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'none' | 'compact' | 'basic' | 'full'",
-                    "resolved": "\"basic\" | \"compact\" | \"full\" | \"none\"",
+                    "original": "'none' | 'compact' | 'compact-assets' | 'basic' | 'full'",
+                    "resolved": "\"basic\" | \"compact\" | \"compact-assets\" | \"full\" | \"none\"",
                     "references": {}
                 },
                 "required": false,
@@ -1192,6 +1220,45 @@ export class CoRichTextToolbar {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "attachmentsEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the attachment button (compact-assets variant). The editor never\nowns the attachment list \u2014 it only emits the picked files."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "attachments-enabled",
+                "defaultValue": "false"
+            },
+            "attachmentAccept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "`accept` attr for the attachment file picker (e.g. '.pdf,.png')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "attachment-accept"
             }
         };
     }
@@ -1245,6 +1312,26 @@ export class CoRichTextToolbar {
                     "resolved": "{ open: boolean; }",
                     "references": {}
                 }
+            }, {
+                "method": "coAttachmentsSelected",
+                "name": "coAttachmentsSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Files picked from the toolbar attachment button. The host owns them."
+                },
+                "complexType": {
+                    "original": "{ files: File[] }",
+                    "resolved": "{ files: File[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
             }];
     }
     static get elementRef() { return "el"; }
@@ -1252,6 +1339,9 @@ export class CoRichTextToolbar {
         return [{
                 "propName": "variant",
                 "methodName": "onVariantChange"
+            }, {
+                "propName": "attachmentsEnabled",
+                "methodName": "onAttachmentsEnabledChange"
             }, {
                 "propName": "editor",
                 "methodName": "onEditorChange"

package/dist/collection/components/co-rich-text-viewer/co-rich-text-viewer.css

@@ -137,6 +137,25 @@
   font-size: 0.9em;
 }
 
+/* Menciones: markup nuevo (data-mention-id) y V1 (quill: data-id +
+   data-denotation-char). Mismo chip que el editor (.co-rte-mention). */
+.co-rich-text-viewer [data-mention-id],
+.co-rich-text-viewer [data-denotation-char='@'][data-id] {
+  display: inline-block;
+  padding: 0.05em 0.4em;
+  border-radius: var(--co-border-radius-xxs);
+  /* Highlight pastel azul — mismo look que el chip del editor (.co-rte-mention). */
+  background: var(--co-color-azul-200);
+  color: var(--co-color-azul-800);
+  font-size: 0.9em;
+  white-space: nowrap;
+}
+
+/* El tracker oculto del contrato V1 jamás debe pintar en lectura. */
+.co-rich-text-viewer #userMentionsTracker {
+  display: none;
+}
+
 /* ============================================================
    Fluid content width (document / "site" preset)
 

package/dist/collection/components/co-rich-text-viewer/co-rich-text-viewer.js

@@ -16,6 +16,7 @@ const ALLOWED_TAGS = {
     task: ['p', 'br', 'strong', 'em', 'a', 'span', 'u', 's', 'code', 'ul', 'ol', 'li', 'blockquote'],
     email: ['p', 'br', 'strong', 'em', 'a', 'span', 'u', 's', 'code', 'ul', 'ol', 'li', 'blockquote', 'h2', 'h3', 'div', 'img'],
     document: ['p', 'br', 'strong', 'em', 'a', 'span', 'u', 's', 'code', 'ul', 'ol', 'li', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'hr', 'div', 'mark', 'img', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'iframe'],
+    'block-email': ['p', 'br', 'strong', 'em', 'a', 'span', 'u', 's', 'code', 'ul', 'ol', 'li', 'blockquote', 'h2', 'h3', 'div', 'img'],
 };
 /** iframes are permitted only with an https: source (blocks javascript:/data:/http:). */
 const SAFE_IFRAME_SRC_RE = /^https:\/\/[^\s"'<>]+$/i;
@@ -37,8 +38,22 @@ export class CoRichTextViewer {
     watchInputs() {
         return this.compute();
     }
+    /** Parse `features` (JSON string via HTML attr, or object via JS property). */
+    get parsedFeatures() {
+        if (!this.features)
+            return undefined;
+        if (typeof this.features === 'string') {
+            try {
+                return JSON.parse(this.features);
+            }
+            catch (_a) {
+                return undefined;
+            }
+        }
+        return this.features;
+    }
     sanitizeHtml(html) {
-        var _a;
+        var _a, _b;
         DOMPurify.addHook('uponSanitizeElement', (node, data) => {
             var _a, _b;
             // Only allow <input type="checkbox"> (task list checkboxes); strip others.
@@ -52,10 +67,22 @@ export class CoRichTextViewer {
                     (_b = node.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(node);
             }
         });
+        // Feature overrides only WIDEN the whitelist (mirrors the rich-text
+        // package's `configFor`). `mentions` re-admits the V1 quill markup attrs so
+        // the mention chip keeps its style hook in read mode — the new markup
+        // (data-mention-id/label) is always allowed. image/variables attrs are
+        // already in the base list below.
+        const allowedAttr = ['href', 'target', 'rel', 'data-variable', 'data-mention-id', 'data-mention-label', 'style', 'colspan', 'rowspan', 'src', 'alt', 'width', 'height', 'allowfullscreen', 'frameborder', 'allow', 'loading', 'data-youtube-video', 'data-iframe', 'data-image-layout', 'data-file-id', 'type', 'checked', 'disabled'];
+        if ((_a = this.parsedFeatures) === null || _a === void 0 ? void 0 : _a.mentions) {
+            for (const a of ['data-id', 'data-value', 'data-denotation-char', 'data-index']) {
+                if (!allowedAttr.includes(a))
+                    allowedAttr.push(a);
+            }
+        }
         try {
             const clean = DOMPurify.sanitize(html, {
-                ALLOWED_TAGS: (_a = ALLOWED_TAGS[this.preset]) !== null && _a !== void 0 ? _a : ALLOWED_TAGS.document,
-                ALLOWED_ATTR: ['href', 'target', 'rel', 'data-variable', 'data-mention-id', 'data-mention-label', 'style', 'colspan', 'rowspan', 'src', 'alt', 'width', 'height', 'allowfullscreen', 'frameborder', 'allow', 'loading', 'data-youtube-video', 'data-iframe', 'data-image-layout', 'data-file-id', 'type', 'checked', 'disabled'],
+                ALLOWED_TAGS: (_b = ALLOWED_TAGS[this.preset]) !== null && _b !== void 0 ? _b : ALLOWED_TAGS.document,
+                ALLOWED_ATTR: allowedAttr,
                 ALLOW_DATA_ATTR: false,
                 FORBID_TAGS: ['script', 'object', 'embed', 'form', 'textarea', 'style'],
                 ADD_ATTR: ['allowfullscreen', 'frameborder', 'allow', 'loading'],
@@ -154,7 +181,7 @@ export class CoRichTextViewer {
                 "mutable": false,
                 "complexType": {
                     "original": "RichTextPreset",
-                    "resolved": "\"comment\" | \"document\" | \"email\" | \"task\"",
+                    "resolved": "\"block-email\" | \"comment\" | \"document\" | \"email\" | \"task\"",
                     "references": {
                         "RichTextPreset": {
                             "location": "import",
@@ -214,6 +241,25 @@ export class CoRichTextViewer {
                 "reflect": false,
                 "attribute": "compact",
                 "defaultValue": "false"
+            },
+            "features": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | object",
+                    "resolved": "object | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Feature overrides (JSON string for HTML attr, or object via JS property) \u2014\nmirror the editor's `features`. They only WIDEN the whitelist: e.g.\n`mentions` keeps the V1 quill markup attrs (`data-id`,\n`data-denotation-char`, \u2026) so the mention chip keeps its style hook in\nread mode. Without it the preset profile strips them."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "features"
             }
         };
     }
@@ -232,6 +278,9 @@ export class CoRichTextViewer {
             }, {
                 "propName": "preset",
                 "methodName": "watchInputs"
+            }, {
+                "propName": "features",
+                "methodName": "watchInputs"
             }];
     }
 }

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

@@ -13,11 +13,11 @@ export class CoRow {
         this.size = 'sm';
     }
     render() {
-        return (h("div", { key: '3b77dcfd8a0d6fccdb5932e2dd316ab1166e13e9', class: {
+        return (h("div", { key: 'acd6c8b2a2c0331dcad0b0308f407a999e52f049', class: {
                 'co-row': true,
                 [`co-row--${this.position}`]: true,
                 [`co-row--${this.size}`]: true,
-            }, part: "row" }, h("div", { key: '0f0112ad8cf977587af1cc756ec822ca5d8c81fc', class: "co-row__prefix" }, h("slot", { key: 'd6ac18b41dca0597dba80f5d49554471832b6c4f', name: "prefix" })), h("div", { key: '8c1de305f4268cc8d10f6ba1203750bd96061dc3', class: "co-row__content" }, h("slot", { key: 'fe882bbb96faae81377c4613024a74762f84c113' })), h("div", { key: '0bb2646c6f0d4f52573021b76e3a950ddca11056', class: "co-row__suffix" }, h("slot", { key: '3518a826a39d3491a24067a9be3a5284e6a184d4', name: "suffix" }))));
+            }, part: "row" }, h("div", { key: '3680dafc73ecf8c394a7dcbbd77fb89d73862c76', class: "co-row__prefix" }, h("slot", { key: '9b6629d967b4a88264481a25cd042c3ab01fa173', name: "prefix" })), h("div", { key: '7796ddafded2b51672f9ff4bcea3432faa855427', class: "co-row__content" }, h("slot", { key: 'fa09c61de348af277be8c5538bc95eb4b30faf07' })), h("div", { key: '1881efe091915d3f45a5ef8035970cebeb27def0', class: "co-row__suffix" }, h("slot", { key: '580c7f8d19a886f5d0efed9c8fdfcbb60daa0630', name: "suffix" }))));
     }
     static get is() { return "co-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -730,7 +730,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   /* Figma Text Field parity (same box as co-input): solid page surface +
      Negro 25% border — tinted glass didn't read as editable on white. */
   background: var(--co-semantic-surface-page);
-  border: 1px solid var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
+  border: 1px solid var(--co-semantic-border-field);
   border-radius: var(--co-border-radius-xs);
   min-height: 40px;
   box-sizing: border-box;
@@ -738,6 +738,17 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
+/* ── Variant: flat (no border/background — reads as content) ──────────
+   Border-width/radius are left untouched (only the color goes transparent),
+   so padding/box size never shift between default and flat. Placed here
+   (before size variants and ahead of open/disabled/status below) so the
+   equal-specificity (0,2,0) state selectors win their cascade tie by
+   source order and keep showing through on top of flat, same as today. */
+.co-select--flat .co-select__trigger {
+  background: transparent;
+  border-color: transparent;
+}
+
 /* ── Multiple: selected values as removable chips (mirror co-ref-field) ── */
 .co-select__chips {
   flex: 1;

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

@@ -16,6 +16,11 @@ export class CoSelect {
         this.value = '';
         this.multiple = false;
         this.size = 'md';
+        /** Visual style. `flat` strips the trigger's border and background so it
+         *  reads as plain content instead of a boxed control — padding, label,
+         *  focus ring, disabled and status states are unaffected. `default` (the
+         *  standard bordered box) renders identically to before this prop existed. */
+        this.variant = 'default';
         /** Show a search box inside the dropdown to filter options client-side. */
         this.searchable = false;
         this.searchPlaceholder = 'Search…';
@@ -208,19 +213,20 @@ export class CoSelect {
         var _a;
         const selected = this.selectedValues;
         const options = this.filteredOptions;
-        return (h("div", { key: 'e52ada6dab00c28435576237271547db70c66b7a', class: {
+        return (h("div", { key: 'dda1b5f2f72939374a748224137586c8cc67cfcb', class: {
                 'co-select': true,
                 'co-select--open': this.isOpen,
                 'co-select--disabled': this.disabled,
                 [`co-select--${this.size}`]: true,
                 [`co-select--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '45c9c037da6523f7ffaea58f22363f239e1537d3', class: "co-select__labels" }, this.label && h("label", { key: '611dec09fd4637c09ca45e8fbb9a930bafaf8e15', class: "co-select__label" }, this.label, h(RequiredMark, { key: '75f302013790f9cf73da4db38a1c8635d8132a2e', required: this.required })), this.secondaryLabel && h("span", { key: '49404c2801028303e2bb825f1eb5e0d1854cf72a', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '2169518b1ed1944b4b483e19a72507865762764a', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '6d4984781b7b59ba09c77b24677e4911a3f0827b', slot: "trigger", class: "co-select__trigger", onClick: this.handleTriggerClick }, this.iconLeft && h("co-icon", { key: '8aa3d88126db4f7840b8080c46fe00a1e498dc7f', name: this.iconLeft, size: 16, class: "co-select__icon" }), ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.image) && (h("img", { key: '6cf713b9dbbd2923d6543a9903e998ee83185010', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
+                'co-select--flat': this.variant === 'flat',
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '5947cfc99c31904238dd3c86c4da4e42e7d94ba3', class: "co-select__labels" }, this.label && h("label", { key: 'fac1de54916c5b0701c10b3b618c41f8319c3a50', class: "co-select__label" }, this.label, h(RequiredMark, { key: '12f175c2dc67ef19c949fd517e38cd2c32b55084', required: this.required })), this.secondaryLabel && h("span", { key: 'a1a0fa82fc220952e4c8225e13fa8bbb2cbbe310', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '126cb2923ea3a5e3646697fd514050258c82bcaa', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '0b3dd75a9d0bb427bc8e5c8f17fe5c297855a899', slot: "trigger", class: "co-select__trigger", onClick: this.handleTriggerClick }, this.iconLeft && h("co-icon", { key: 'ad2fa6c5a6798314097d8e0715cddff8ce349586', name: this.iconLeft, size: 16, class: "co-select__icon" }), ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.image) && (h("img", { key: '36e7407bf782a1adb15cd41432bc4f36d5605094', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
             const opt = this.parsedOptions.find((o) => o.value === v);
             return (h("span", { class: "co-select__chip", key: v }, h("span", { class: "co-select__chip-label" }, opt ? opt.label : v), h("button", { class: "co-select__chip-remove", type: "button", tabIndex: -1, "aria-label": "Remove", onClick: (e) => {
                     e.stopPropagation();
                     this.handleOptionClick(v);
                 } }, h("co-icon", { name: "x", size: 12 }))));
-        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: 'b2e65bbec3c9f4eade2f250b8f446fc7719ac87f', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'ec6bef7248b519d032c831208a89d8fdabdd5e85', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '9e43c223117d1a30b3b24f1e64a4bf1ca2e003db', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: 'c622ad50ad8667ffa1094d9f53a467588963a720', class: "co-select__dropdown" }, this.isOpen && this.searchable && (h("div", { key: 'a20bb6f186b6c740da4f7f22392dd5369dd1cd15', class: "co-select__search" }, h("co-icon", { key: '02a8fbbcdc31b6924bc69255c692cb9c89210321', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '5323a3037c9deb9855d65ec1d3246ba80b0811e2', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, onInput: this.handleSearchInput, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: 'b9d8a5f12e278bf5b8ff813b22e43f7e8ffee0fb', class: "co-select__empty" }, this.emptyText)), h("div", { key: '7f84a589795e9333e18926854ead79dc0fa3c6e1', class: "co-select__options", ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
+        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '3e97e8239b922280a21cd0fa53d37cbb15f313ba', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'da2171535417fed8e6a3422120c13f4f860354e3', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: 'e262edfb38a2bcd9771082c78af22ae3816a4472', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: 'd557662d3722a7a60e7b499fea0c47a11bb86737', class: "co-select__dropdown" }, this.isOpen && this.searchable && (h("div", { key: '7248c5417c929016e43eba3754ef74cb68e21d76', class: "co-select__search" }, h("co-icon", { key: 'a88c9f7da98cb112d33a7bc6f970f503d7fbfcdc', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: 'ed90bd495b6d92941af5f585d24ad9a4986757d9', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, onInput: this.handleSearchInput, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: '0b9a0a98cb298dd25f2f869f7c6d01ced4c030a8', class: "co-select__empty" }, this.emptyText)), h("div", { key: '4c0aa1f9e0f0f3fcede94decb037217466c80ca5', class: "co-select__options", ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
             const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
             return (h("div", { class: "co-select__virtual-spacer", style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { style: { position: 'absolute', top: `${offsetY}px`, left: '0', right: '0' } }, options.slice(startIdx, endIdx).map(opt => {
                 const isSelected = selected.includes(opt.value);
@@ -231,7 +237,7 @@ export class CoSelect {
                         'co-select__option--disabled': isDisabled,
                     }, onClick: () => !isDisabled && this.handleOptionClick(opt.value) }, opt.image ? (h("img", { class: "co-select__option-flag", src: opt.image, alt: "", loading: "lazy" })) : opt.icon ? (h("co-icon", { name: opt.icon, size: 20, class: "co-select__option-icon" })) : null, h("span", { class: "co-select__option-label" }, this.renderLabel(opt.label)), isSelected && h("co-icon", { name: "check", size: 16, class: "co-select__option-check" })));
             }))));
-        })()))), this.helperText && (h("div", { key: '2d65962fc0025c8bf2b3950328e0187a15c92cf8', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'c64d2b35fb10dbe5e25a9db78c7155f9cfdde33c', name: this.statusIcon, size: 14, weight: "fill", class: "co-select__helper-icon" }), h("span", { key: 'e49697063342fd79a85e101a821f944e781c9ef5', class: "co-select__helper-text" }, this.helperText)))));
+        })()))), this.helperText && (h("div", { key: 'b7f14d7e02dd3fe15be6c0f82b13df14edc0db60', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '384f8ecbf6b20da23a7ff6e0b8e1745058e624ef', name: this.statusIcon, size: 14, weight: "fill", class: "co-select__helper-icon" }), h("span", { key: '26d47cad143f8d66819d497d4618893599665aff', class: "co-select__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-select"; }
     static get encapsulation() { return "shadow"; }
@@ -529,6 +535,26 @@ export class CoSelect {
                 "attribute": "size",
                 "defaultValue": "'md'"
             },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'flat'",
+                    "resolved": "\"default\" | \"flat\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style. `flat` strips the trigger's border and background so it\nreads as plain content instead of a boxed control \u2014 padding, label,\nfocus ring, disabled and status states are unaffected. `default` (the\nstandard bordered box) renders identically to before this prop existed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
             "searchable": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -57,7 +57,7 @@ export class CoSeparator {
                 style['--co-separator-inset-end'] = '0px';
             }
         }
-        return (h("hr", { key: '79a2dd5c7bc7d37d1b9d77b03e72b6014228532b', class: {
+        return (h("hr", { key: 'ef9b9d7c11ca50e1042ddb613ee3bbaaf7802972', class: {
                 'co-separator': true,
                 'co-separator--vertical': this.vertical,
                 'co-separator--dark': this.dark,

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

@@ -10,10 +10,10 @@ export class CoSidebar {
         this.mode = 'full';
     }
     render() {
-        return (h("nav", { key: 'ea33fc3e60a0b3e7f5d5ad37569524aa46b1cb76', class: {
+        return (h("nav", { key: '1bc3acd9fa28f05c9665d9fe0ab78b9bf701b56e', class: {
                 'co-sidebar': true,
                 [`co-sidebar--${this.mode}`]: true,
-            }, part: "sidebar" }, h("div", { key: '7feaf48ba91059cf5b046579b68adfbfb896850d', class: "co-sidebar__header", part: "header" }, h("slot", { key: '869fd6af70b09829ef05f15b2fdab554a978f1f8', name: "header" })), h("div", { key: '1bc044d4c70854b748e473041fea378ca1e3bd4f', class: "co-sidebar__body", part: "body" }, h("slot", { key: '0c0033d1af7a9dd902a61da6e97811e75214e9c5' })), h("div", { key: 'ef37cc7709b4d6afc420f1e3aaba13b6db2997e6', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: 'df1b6a08c313ed1818fcfd93a89f9c1cd709bccd', name: "footer" }))));
+            }, part: "sidebar" }, h("div", { key: 'a69b8746d524053a6caac9d8c5c8764f414cb599', class: "co-sidebar__header", part: "header" }, h("slot", { key: '6f4fe0997327537261663c3177c29bd59aba2f3f', name: "header" })), h("div", { key: 'f1c5d4fd6d11c5c872591706ab0c84d238bdf09b', class: "co-sidebar__body", part: "body" }, h("slot", { key: '06b3192da38333283cf1a2c7e2c4922bce2d4b56' })), h("div", { key: 'fb16f4a10d90cbbb82afbad3c531f5e807039cb8', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: '916b98484c92cb8c9e24f7b0e2facbd926bc8f68', name: "footer" }))));
     }
     static get is() { return "co-sidebar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class CoSkeleton {
         const style = { width: this.width };
         if (this.height)
             style.height = this.height;
-        return (h("div", { key: 'e62aec4781b1ef8b7b4fa2ba423cf9e94184646a', class: { 'co-skeleton': true, [`co-skeleton--${this.variant}`]: true }, part: "skeleton", style: style, "aria-hidden": "true" }));
+        return (h("div", { key: '62e14646999122acf4190e503bc89ba1a75a16a0', class: { 'co-skeleton': true, [`co-skeleton--${this.variant}`]: true }, part: "skeleton", style: style, "aria-hidden": "true" }));
     }
     static get is() { return "co-skeleton"; }
     static get encapsulation() { return "shadow"; }