@prolibu-suite/cobalt-core 0.6.0 → 0.7.0

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"; }

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

@@ -72,12 +72,12 @@ export class CoSlider {
     }
     render() {
         const pct = this.percentage;
-        return (h("div", { key: 'a445c6c490d0a86aabdd1863ffca7fb5b6a83dcb', class: {
+        return (h("div", { key: '1f94a2bea59726bfe63dd0226e6c76aba6e5eed6', class: {
                 'co-slider': true,
                 'co-slider--disabled': this.disabled,
                 'co-slider--dragging': this.dragging,
                 [`co-slider--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '604b51df33236b1401660a8b914035adbd339665', class: "co-slider__labels" }, h("div", { key: '3000bbc413d021ecdfbbb7efef5d8ec6d5924e6e', class: "co-slider__labels-left" }, this.label && h("label", { key: 'b9b02590dc634466834ac6229934cf3b78281fb6', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'c6acee956d73ae313b26196b87ee7ea1b8a2b134', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'aba76d883e5cf2631104cbaebb302002e1fe496a', class: "co-slider__value" }, this.value))), h("div", { key: '6535ee992fccc80988c77a33032846e8b5fe605f', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'c017699fc2fea78cb55cac01b4dce6c8c660d27a', class: "co-slider__track" }, h("div", { key: '7831a55b6e34544915e27fb2ed5dd84f92acb60e', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'e03368137b3e548e9a082f1f7f57b6e7a9b0df37', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '8f8be1af979de772be4f7ebc69e9d3b6a7c2f58d', class: "co-slider__marks" }, h("span", { key: '2037b37b88f6a5734bf8845e5a562ca17d823ef0', class: "co-slider__mark" }, this.min), h("span", { key: 'db35ba88af0d4b13b4f47370360d0f041fbeb4b7', class: "co-slider__mark" }, this.max))), h("input", { key: '6a98de808328d9a72f4b95f9a64ad01e4003082e', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, "aria-label": this.label || 'Slider' }), this.helperText && (h("div", { key: '2d5f0d9ccf9d4e052ddbedb5080718f9e71f0605', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'afa9618ff8a3dfab3a55163e1fe500c58f0a4406', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '6e0c46b8561beca6a3dadf03d117a8526d31a860', class: "co-slider__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '53731220f37468ad024ead0b930b7fa542ce3254', class: "co-slider__labels" }, h("div", { key: '39eccf3964f1463a7a84a8420f2963f0b79935ec', class: "co-slider__labels-left" }, this.label && h("label", { key: 'ab63ada93da100e8d613fcd392dad3b9c6fde6d4', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'a821f151830ef03296724a21241342348848006c', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: '1c0888c1ccb60544a5d1fb20c3d44a04d73fa3a0', class: "co-slider__value" }, this.value))), h("div", { key: 'a766dc086713341329a560bc332130245160eb02', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'a6aa57cafbf17efc2079627e822f4a909324fa35', class: "co-slider__track" }, h("div", { key: '07183ce09d776aea1249276d44383162f5634633', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'e139f1cec3ec5060667602ac04bdf7e0e6d9ef6d', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '5df827960aa6d8cb48305efd3a090ed8fe981c88', class: "co-slider__marks" }, h("span", { key: '8f3f20a7e2f5d15f1b8a10f548093b374b41eac0', class: "co-slider__mark" }, this.min), h("span", { key: '11196868d93fd21c9ab3e8f672aad51fcd1e2907', class: "co-slider__mark" }, this.max))), h("input", { key: '97bb0aa1e2ec72c5052c2c0018c5ba3d488aa704', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, "aria-label": this.label || 'Slider' }), this.helperText && (h("div", { key: 'c5e41ad16c3548703c544dd412f121c1933976db', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'f6d17f21068433ba9fea7fec7f7015fe7a03576d', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '8f85afae6cf7b6a1cbec2096a39312b9c691ac55', class: "co-slider__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,16 +29,16 @@ export class CoSwitch {
     render() {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = !!this.helperText;
-        return (h("div", { key: 'aa2690f72e8a64fcf835a58ed7b5a578e93dd6fa', class: {
+        return (h("div", { key: '526145ecd1b1592cc650db93f0628ef07e5e1786', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: 'fda38eadee3187b559ab343acd80de17d6f88da1', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '11c63216f459295d2858530f9d879913d205417d', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, h("div", { key: '4e72f02ad08d6f15f0bbc6a202db9965666dbd45', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '3ce3f2a7f89c4c5017127df470166267f619a739', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-switch': true,
                 'co-switch--on': this.checked,
                 'co-switch--off': !this.checked,
                 'co-switch--disabled': this.disabled,
-            }, disabled: this.disabled, part: "track" }, h("span", { key: '6e6060ee3128697653bb11335e7ebd82a37d2960', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '10084cce0ded48f6188fe5bbba1e2058f2d6962c', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '87665730e8cf05f481f4835594fd912f4499b9c7', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '0d121097ee0c5ca14f150a93a9f021ddf883667c', required: this.required })), this.secondaryLabel && (h("span", { key: '0bc01f629b4b62ba7c86e2ff229b127a3ac45537', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '7447890f8f651445917e1b59166e827e1a0a52ca', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '5759ca2e6b013743ce263a4b002214c03d8a202c', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '359a87a5865fde6d9db953e6e4554a7b5ae5cb5e', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, disabled: this.disabled, part: "track" }, h("span", { key: 'c8189b585b70b08c269e04505a5edbbb3b3a064c', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '912328e5167f0db2704267713e988807cda0c318', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: 'd86b976d95ec01fb16529034f75fa0b874e1c4f0', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '89623a1a38326a443598a7e0598035e6067ef977', required: this.required })), this.secondaryLabel && (h("span", { key: 'df602d9aa8eba9805674cc921447e7621338d551', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '63198303a7ba9fd9a3b6c306018867802491b535', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '1f2790d86165562add0967856e1812ccce90d703', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '77ab535dc73ef130d360e4d31c0cc9b510a4b94c', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,13 +21,13 @@ export class CoTab {
     }
     render() {
         const iconSize = this.variant === 'underline' ? 16 : this.size === 'large' ? 18 : 14;
-        return (h("button", { key: '77fc8443dbdc5fe327ea28de6e926c4438e96cca', class: {
+        return (h("button", { key: '7899f20cb7d2692331364a61cd2b9ef744f422ba', class: {
                 'co-tab': true,
                 [`co-tab--${this.size}`]: true,
                 [`co-tab--${this.variant}`]: true,
                 'co-tab--selected': this.selected,
                 'co-tab--disabled': this.disabled,
-            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: '6d209028484dc6726f48cf1c5919cdeb59dac33a', name: this.iconLeft, size: iconSize })), h("span", { key: 'ee7cbdaaa22dde0b6ed599a1c9d20909f639d3db' }, this.label), this.badge && (h("span", { key: 'a1099b9d141f70d70e736853da2261fe3a125964', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '56a8917e4bbb27411f1bed6ef7b0a11e8c8b75b7', name: this.iconRight, size: iconSize }))));
+            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: '535a9993eda5ee22c01bbbbed0bb3b357eac088b', name: this.iconLeft, size: iconSize })), h("span", { key: '46786bee82d9f0935fe23e09bea59aa50791e38c' }, this.label), this.badge && (h("span", { key: 'a9eaa06f970a70b6e55e9cb295709d340db3bdf4', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: 'bcf9ba9c5846592d47d81640e0e609cfa8dde5af', name: this.iconRight, size: iconSize }))));
     }
     static get is() { return "co-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-tab-group/co-tab-group.css

@@ -17,12 +17,15 @@
 }
 
 /* ─── Segmented variant ─────────────────────────────────────── */
-/* Gray track + white active pill (Figma segmented control). The
-   track hugs its content; each co-tab styles its own pill. */
+/* Gray track + white active pill (Figma segmented control, node
+   3500:93295). The track hugs its content; each co-tab styles its
+   own pill. The subtle bottom border is part of the track itself —
+   hosts must not add their own separator under it. */
 .co-tab-group--segmented {
   display: inline-flex;
-  gap: 2px;
-  padding: 3px;
+  gap: var(--co-spacing-xxs, 2px);
+  padding: var(--co-spacing-sm, 6px);
   background: var(--co-color-gray-100, #f6f6f6);
+  border-bottom: 1px solid var(--co-color-opacity-negro-4, rgba(31, 28, 27, 0.04));
   border-radius: var(--co-border-radius-sm, 12px);
 }

package/dist/collection/components/co-tab-group/co-tab-group.js

@@ -33,10 +33,10 @@ export class CoTabGroup {
         });
     }
     render() {
-        return (h("div", { key: 'b0e4e872934528c7dbce3bf1c0329b1efb0db887', class: {
+        return (h("div", { key: 'fa78f36e2c58a2dfa33280ecc58a8e22b55a0238', class: {
                 'co-tab-group': true,
                 [`co-tab-group--${this.variant}`]: true,
-            }, role: "tablist", part: "tab-group" }, h("slot", { key: '407d99ce75badc9bfeecaf8506155ef346681489', onSlotchange: this.onSlotChange })));
+            }, role: "tablist", part: "tab-group" }, h("slot", { key: '0c27dbc561fa7aac4cb7697abb3b71187c9c53ff', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "co-tab-group"; }
     static get encapsulation() { return "shadow"; }