@prolibu-suite/cobalt-core 0.6.0 → 0.7.0

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: '9e29bc7905c4b9d83846ea9e85021ae0f1e34fc3', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: 'e47780a9d8f80cf8a9b1b4585e71bb20b2bebf5d', class: "co-menu-divider", role: "separator" });
     }
     static get is() { return "co-menu-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,14 +62,14 @@ export class CoModal {
             this.coClose.emit();
     }
     render() {
-        return (h("co-overlay", { key: '3560ee34e7edb62cd0ae34572bac0afbb5b02a74', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: 'ba68e320e4e0a0881193f1d85f2d5a2ef287e324', class: "co-modal__frame" }, h("div", { key: '7d3748b4b0f8fc5a4715bd075d2d9f74e2ada0ed', class: {
+        return (h("co-overlay", { key: '05ef9c3f53b155899f4838db0c0fca818f542731', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '46dbcfb7b8073c2ca11114fe049d55842bd9cb94', class: "co-modal__frame" }, h("div", { key: '75a703ddeb451e3afc4392990c10040423f0f7c7', class: {
                 'co-modal': true,
                 'co-modal--open': this.open,
                 'co-modal--sm': this.size === 'sm',
                 'co-modal--lg': this.size === 'lg',
                 'co-modal--full': this.size === 'full',
                 'co-modal--no-dividers': this.noDividers,
-            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '48239c6af5968213349a4f3516a96ab66d7aa744', class: "co-modal__header", part: "header" }, h("div", { key: 'c807b66cb3d2a1a5b84ee70677f5d33ceaa83a7c', class: "co-modal__header-text" }, h("h2", { key: '7fa46d607d26d0904014ad20209838bd237492f2', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: '7e53e9b13ea2cc8eca07dc17cb240f19ce6eb1a1', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '3af5d2c54faa331a6017cd19b96aea1f97baef03', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'd8f58ed52f686df6663515d38fa98d30a45392ee', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: 'd69ffa8c7726633b744b014b3f7744822ffa6448', class: "co-modal__body", part: "body" }, h("slot", { key: '5d3faeee4f96f314a8045c0482f88da2f7f328c3' }))), h("div", { key: '5ff15a6387c186e2425ca08dc4b9085588f83f61', class: "co-modal__footer", part: "footer" }, h("slot", { key: '5742d36c7a46f3b4b535d9224f747bbca0d82305', name: "footer" }))))));
+            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '3ebedf6549d81d4515abef9cd406688d82d583dd', class: "co-modal__header", part: "header" }, h("div", { key: '8c08be60fe1cac72a2351acbd26f93c4aa2178f4', class: "co-modal__header-text" }, h("h2", { key: '8235568540f5c09941790d203ae43c94393f4c3c', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'bda3dc9a4eea2b60c9728e01b83771ea921dec57', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '10bf91d47ce12f40e3d7ede6adc788ac5952e928', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: '3eb98394355c5d60ca633c55f6c26111b046bfa7', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '1fa27604b8f29d2271b4c4291a52949a1a57dcba', class: "co-modal__body", part: "body" }, h("slot", { key: '1524ac17115286ee90e4ffd251e3407edb1ecb94' }))), h("div", { key: 'f65aae95cdbc156285e3837187b161a65d8772ef', class: "co-modal__footer", part: "footer" }, h("slot", { key: '936d4e2f0b52553abf4edec689ff13e8d0bc1940', name: "footer" }))))));
     }
     static get is() { return "co-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,12 +14,12 @@ export class CoNavbar {
         this.rounded = false;
     }
     render() {
-        return (h("div", { key: '0215148d2cd901a2b60f5ab14704891e97ff98dd', class: {
+        return (h("div", { key: '93279a4c80cd3c050fe5bd5bb10b0c56fa942bdc', class: {
                 'co-navbar': true,
                 [`co-navbar--${this.variant}`]: true,
                 [`co-navbar--${this.size}`]: true,
                 'co-navbar--rounded': this.rounded,
-            }, part: "navbar", role: "toolbar" }, h("slot", { key: '6985aaea372d26291422e5533313c6d6dad85b08' })));
+            }, part: "navbar", role: "toolbar" }, h("slot", { key: '643f397c092a3ad3961158c641bab0d4edb27e47' })));
     }
     static get is() { return "co-navbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-number-field/co-number-field.css

@@ -54,7 +54,7 @@
   /* 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;
   overflow: hidden;

package/dist/collection/components/co-number-field/co-number-field.js

@@ -124,13 +124,13 @@ export class CoNumberField {
         this.coChange.emit(clamped);
     }
     render() {
-        return (h("div", { key: '3c875500165c314b0080a19a7d33f8b1fc5f9724', class: {
+        return (h("div", { key: '81d578bdeaefc9f6176ab68ca38b5e831ad636cd', class: {
                 'co-number-field': true,
                 'co-number-field--disabled': this.disabled,
                 'co-number-field--focused': this.focused,
                 [`co-number-field--${this.size}`]: true,
                 [`co-number-field--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'fe4c1d6e76adcda77f4a78697a7ce04c4f7e6b5d', class: "co-number-field__labels" }, this.label && h("label", { key: '69b9c4dde23541cbb2b8afdff97b6154bba8ab3c', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '8238966acaffee1c909ad0adee140e75aa458a72', required: this.required })), this.secondaryLabel && h("span", { key: '1f5ed492a1028f79eddf207ba29f40211f3934e2', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: '95e65fe2e0634b4009cac07770b20b96431bceae', class: "co-number-field__row" }, h("button", { key: '45d3317ff00d91e1b259a69cd5a81d26ae4bb36e', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '457e2c19673b7a3ce73cf5f9c23bd69466065943', name: "minus", size: 16 })), h("input", { key: '03e01bd9bb518003d6895e6749ad80a5be3e7a86', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: this.isEmpty ? '' : String(this.toDisplay(this.value)), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), this.scaled && !this.isEmpty && (h("span", { key: 'd67834e59678f73ce4a9afb7074cfc248d34adb3', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: 'e26cb4d5f271c480380f8e912e8c760bafd02d27', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '908c2c60b3044d9032c4bdd5d41bcd25f406aa20', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: 'fe62938d48bc8df10bb364d5295f9ee192265f97', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '227ec402b4280f1062ea13a8772ec8cf36dd4508', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '87fd291f5db445c0ef2877cda10ed38d4af7a5d7', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '344cfac2028d8e1ea402a68df83ade83c52b1bab', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'b12282d57952bae2f528505c92c4a216723d26fd', class: "co-number-field__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '0010a5984faa5c26d3ed18a29c43679422158529', class: "co-number-field__labels" }, this.label && h("label", { key: '1744b37b776c36e6c105f6537e9bc0eff427f3c3', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '24b51fde19384d3de672b6c1aa1c54c408078b98', required: this.required })), this.secondaryLabel && h("span", { key: '752dca236f11f65a78ab0f2e35bae1a0dcb81ba8', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'a88c171a1349972ed78452b0c304cac207921a8f', class: "co-number-field__row" }, h("button", { key: '4a781c675e97937288f641d55e821fa30104a180', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '12f82a9f0f8c1b0c9f51264006084d4e80d81715', name: "minus", size: 16 })), h("input", { key: '6f440216843a93d124723b18e0f6f1e7ce98791c', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: this.isEmpty ? '' : String(this.toDisplay(this.value)), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), this.scaled && !this.isEmpty && (h("span", { key: '6672a63fc024e9d33661fee37deb04debe2aaa25', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: 'a0ad4682f949dab538db35348282a3cab52fcb75', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '2beb8574b79926c54665081e4ed06e191932bed6', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: 'd6e01ce20f596ff102899680f7234d35042e2d49', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '27e33390bc7f3baaf9caed056e8e3e6e64b291c9', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '9cc415d2a5f5be410a0677ed7067c7d9bb8368df', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '7cf249285dcd15680f6e21840adcfc81dfd16298', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: '6791bb8f9789af7b878d7c5aa27047d905238e48', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -278,11 +278,11 @@ export class CoOptionList {
         const selectedIds = this.selectedIds;
         const { hasMore, remaining } = deriveMore(this.parsedItems.length, this.total, this.hasMore);
         const showClear = !!this.clearOptionLabel && selectedIds.length > 0;
-        return (h("div", { key: 'f6262519bd90bb9a419daeb9a1386147396a79ff', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '081a2cfee9a8a903c6bd2a2f0bd06cbac635c021', class: "co-option-list__search", part: "search" }, h("co-icon", { key: 'a001c71f5de00288907cde1e123f8d393e052a9e', name: "magnifying-glass", size: 16 }), h("input", { key: '355520b7d77077e02666fcd5012f36c648eaeacf', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), h("div", { key: '833708f614d3f561ba45bf1656f4bcfa6701b8ce', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: '10da99a56133af0748f43c20af62e03e975aebcd', class: "co-option-list__inner" }, showClear && (h("button", { key: '208bc13eb8e89c88657022fbc174bb22ffe9e1c4', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '8c6d29e405a12e53bd3ab9f1662c7237bcae0617', name: "x-circle", size: 14 }), h("span", { key: 'd7e11cc7753c8dd63ae6a556bf5368c01ea1fc2a' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: 'dec374969fe6b401a95d60d101cc625c181f3e72', class: "co-option-list__loading" }, h("co-loader", { key: 'c1547fc0f49911f2f8ab8b85063bf15af6500314', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '1e0692572f89d4f9507f1e4b8c4ef90f9f8d307c', class: "co-option-list__empty" }, h("co-icon", { key: 'ff979119305afdd7b2180336c203ff33adc3c463', name: "magnifying-glass", size: 20 }), h("span", { key: '9d460743d6edf7734012d75cabb0f488b67d20cf' }, this.emptyMessage))), items.length > 0 && this.virtual
+        return (h("div", { key: '8e4a0e5e6b0831d1413fccc5d58f5548e756ca90', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '91658cdefff07570ae339a7e4c785493c200b690', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '28900e1543e8cd50d7e789de2f6d8815eafd1fb7', name: "magnifying-glass", size: 16 }), h("input", { key: '3455b4f3d4e54b81291b997bceb64d95ef1be105', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), h("div", { key: '32f315ed929802532c1a050d6e42aaa4150a2d11', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: '374a2383399a56d90afcb048f5e6343d4f9275d7', class: "co-option-list__inner" }, showClear && (h("button", { key: 'be34ee751a34147660e8bc7846b12d8ab1f937d4', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: 'c3c70f93b6d4ce7c0774b4c5ff1ebd7f2549dd93', name: "x-circle", size: 14 }), h("span", { key: 'a9970acd4f67dc84afd4d7f10317d4e35f0feebf' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '6b1bb04068d2832bd71f0d9b9b9205662a3184f2', class: "co-option-list__loading" }, h("co-loader", { key: '1de716e5fac313dbc10a9aeed2dd8f61e491f020', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '29f51655d034fcd1b5aac08df9537fb176090ce7', class: "co-option-list__empty" }, h("co-icon", { key: 'c7c51260cfe80d82ae75ae0a3510560f5258a3ad', name: "magnifying-glass", size: 20 }), h("span", { key: 'af1c571186f203f2a128b4a7f2d26e5171bf7951' }, this.emptyMessage))), items.length > 0 && this.virtual
             ? this.renderVirtual(items, selectedIds)
             : buildRows(items).map((row) => row.kind === 'header'
                 ? h("div", { class: "co-option-list__group", role: "presentation" }, row.label)
-                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: 'f9c506fddfba9d360a7dd4b2d4ed4142aaa179c5', class: "co-option-list__loading-more" }, h("co-loader", { key: '587d93ebd03eb3764e5637c748975c925d1bd59f', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: 'cef0c72b2aa1f246404001bae6c8ee4ea560ee07', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '646b6421fb03008d55e5361e14f12d05db08e299', name: "footer" })));
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: '0322e0c734d57f0fdc80ace2753276b2bc2a33ad', class: "co-option-list__loading-more" }, h("co-loader", { key: 'e305edb2317d433b27e581a97f35e99083306bff', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '31d25badb8cbefa515eaedd1a849b943274a2f9d', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '2df4d5c4c55db9647b378eb9d09c828a76e563f1', name: "footer" })));
     }
     static get is() { return "co-option-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -187,7 +187,7 @@ export class CoOverlay {
         focusables[nextIndex].focus();
     }
     render() {
-        return (h("div", { key: 'e70f495933546eca563a6d07ad1cea1fa9679945', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: 'f7bdd4bf7c20374c45beab4cebe4b98211ccd095' })));
+        return (h("div", { key: '41b0ea10b8078a2bf3c46f68fe35869bf2778130', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '35e1ec1b7921c1439a177b8f526f128351c5fdec' })));
     }
     static get is() { return "co-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-page-header/co-page-header.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class CoPageHeader {
     render() {
-        return (h("div", { key: '8cc8c7c22074b9d26f1188862281cfe529176caa', class: "co-page-header", part: "page-header" }, h("div", { key: '3b500f4d87dca9e030b73072aa91cffac152a77a', class: "co-page-header__left" }, this.icon && (h("span", { key: 'ae3a8660321c7e35df329e1cd81bf8ade4b7d423', class: "co-page-header__icon" }, h("co-icon", { key: '7571121b507d205beb602164db650858ef1ec7c6', name: this.icon, size: 24 }))), h("span", { key: '2b75edfe92074136c414fe4245500296f937aa84', class: "co-page-header__title" }, h("slot", { key: '7c90582ce3205119e2cfe2b30b3407ddfd88a8fb' }, this.heading))), h("div", { key: '22fd3ea46014f8a717379d5a779c51631722f136', class: "co-page-header__actions" }, h("slot", { key: '06ab6736b021352f673197234426122c0677aa8c', name: "actions" }))));
+        return (h("div", { key: '9170d832d0e51cc8e721a4a331f85abb8543b893', class: "co-page-header", part: "page-header" }, h("div", { key: 'ca13df04f2b81a2ce14ab0223a5f651aaa0c921d', class: "co-page-header__left" }, this.icon && (h("span", { key: 'efe024a0388ae60afc2c4e3ce0861b65e0fa9923', class: "co-page-header__icon" }, h("co-icon", { key: '3051bda0f31d1002142e53db09d0aabd7ecf13bf', name: this.icon, size: 24 }))), h("span", { key: '7b714ebec4e82dffaca71d9e8152330b7fe0a38f', class: "co-page-header__title" }, h("slot", { key: '021b7da34753a3946b94bb104f515b1c4781d837' }, this.heading))), h("div", { key: '52d2d1f3510b23c1684aecacb97d341e56fc7619', class: "co-page-header__actions" }, h("slot", { key: 'da455091aa0467df02674fdd38241fd7e70bab13', name: "actions" }))));
     }
     static get is() { return "co-page-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-phone-field/co-phone-field.css

@@ -51,7 +51,7 @@
   /* 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);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   min-height: 40px;
@@ -85,7 +85,7 @@
 
 .co-phone-field__container:focus-within {
   border-color: var(--co-semantic-border-focus);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
 }
 
 .co-phone-field__selector {

package/dist/collection/components/co-phone-field/co-phone-field.js

@@ -159,7 +159,7 @@ export class CoPhoneField {
     render() {
         const entry = this.selectedEntry;
         const statusClass = this.status !== 'default' ? `co-phone-field--${this.status}` : '';
-        return (h("div", { key: '0c1c765453fd4ec3c25ea586c24df13d563d0183', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: '7241ea86c1aa5ecdfaca9f916da0b8857c546f7f', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'a9b6361645cfbaf46a51eae6251a1e4896661b45', required: this.required }))), h("div", { key: '88f91585a55d38b3a9e1d0141a804633e8cda902', class: "co-phone-field__container" }, h("button", { key: '86b736933e4116fe035bf744b974f39d8f9282ad', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: '8417712d8a5da930057989996f830874a38e5320', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '8bf326a6846b9a3ed83a6cf2191e5df2d8cc859a', class: "co-phone-field__chevron" }, h("co-icon", { key: 'fb5d2975572898de1f82e295180f55306b326bbf', name: "caret-down", size: 14 }))), h("input", { key: '797a9cbea54cb59c40da94365eb8a1350e750cea', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (h("div", { key: '48cb464f8abb745ae4a15428b1fa339d0f51264d', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: 'a0deba5bd857051ff6917be7f87829291379c9ac', class: "co-phone-field__search" }, h("input", { key: '621d9b646763d44535e158f618113dfe5bfe807e', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: 'f704fb94729f3001faa17e0fdb631bda0cc03b02', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: 'acdb17617c05389dc188b5c02e301841302ddfc5', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: '966719a393cf04403fab56f839b383c2df02597e', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '3e91617e7159c113219acb3617c1a0db1fc736f3', class: "co-phone-field__helper-text" }, this.helperText)))));
+        return (h("div", { key: 'e1851152e30c4e1580dd533ba0880eeef8933c0c', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: 'd6adc2584613b7c2ebe72933275ff3058c9d6eef', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'e02252f85db26cc8ac82a791d86b096630026e9f', required: this.required }))), h("div", { key: 'a1433e7df570481200e39aa366e343d41e85441d', class: "co-phone-field__container" }, h("button", { key: 'da306e01f096755f7da014bbfaf21db41fb99c51', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: '920e1cfffbcae7266dcde4bd37e339e550adcae0', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '2dec0f362a9a75b718ea4aade2c981fba6777ecb', class: "co-phone-field__chevron" }, h("co-icon", { key: 'ad77c5446f2352cc8fa07230af125500dff3f4b6', name: "caret-down", size: 14 }))), h("input", { key: '926302b2660eb32b8d86a2e421700acebc1b8e11', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (h("div", { key: '4e86eb6353ad92839a68400ebfa9d8b5dff0111b', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: 'bdd3d82c8b1e46741f9fca118ffe35b2e8c0690f', class: "co-phone-field__search" }, h("input", { key: '699189bbdd5027436c2757569ddf5945f2c29e78', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: '8ec344b5aeb8a80fd0bb72ad1773ac3416a6d1e6', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: 'e248da6a7e2c62c9ed01d2ad0a204caea51f55a6', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'ab6fbf9894d8d71fde4e00e07eb81eece230eafb', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '0608d49c56d3a20c65cc966c733607440bf73900', class: "co-phone-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-phone-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-progress-bar/co-progress-bar.js

@@ -18,12 +18,12 @@ export class CoProgressBar {
     render() {
         const clamped = Math.max(0, Math.min(100, this.value));
         const indeterminate = this.indeterminate;
-        return (h("div", { key: '89d8f4d14642d426bdd7cefd047aa27eb301c217', class: {
+        return (h("div", { key: '77313f1edbd0a70e8b783155e71ba39ac6c2b905', class: {
                 'co-progress-bar': true,
                 [`co-progress-bar--${this.status}`]: true,
                 [`co-progress-bar--${this.variant}`]: true,
                 'co-progress-bar--indeterminate': indeterminate,
-            }, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: '1aa79096ed24c2f4cddeefe704ffbd312d5e95ce', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
+            }, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: '1c6e1942e8128d49f01bb2fedac113eee2f31ac6', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
     }
     static get is() { return "co-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-progress-circle/co-progress-circle.js

@@ -19,7 +19,7 @@ export class CoProgressCircle {
         const clamped = Math.max(0, Math.min(100, this.value));
         const angle = (clamped / 100) * 360;
         const safeStroke = Math.min(this.strokeWidth, this.size / 2);
-        return (h("div", { key: 'c97a2f586f1e4518d2a35be1d43f13ede60a25bc', class: {
+        return (h("div", { key: '879a0c95c7d4aa279eed21447b093bc1461afa4c', class: {
                 'co-progress-circle': true,
                 [`co-progress-circle--${this.status}`]: true,
             }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "circle", style: {
@@ -27,7 +27,7 @@ export class CoProgressCircle {
                 height: `${this.size}px`,
                 '--co-pc-angle': `${angle}deg`,
                 '--co-pc-stroke': `${safeStroke}px`,
-            } }, h("div", { key: '7418e16887ea4705d8e7d7228bc8c172058d5f5f', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '0af289d28bbf4f7e6c9be76c3c7e686960cd1ff0', class: "co-progress-circle__label" }, clamped, "%"))));
+            } }, h("div", { key: '7f2ece80cede1b6eda659706fe4a2b8cbfc6f47a', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '83cbbe79663dae93962da7d1d9ae1f27a6e46fa4', class: "co-progress-circle__label" }, clamped, "%"))));
     }
     static get is() { return "co-progress-circle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,15 +17,15 @@ export class CoRadio {
         };
     }
     render() {
-        return (h("div", { key: '81fa047c34b13cdd776886449a3f5c26cdcc4797', class: {
+        return (h("div", { key: '65bc1f5e350693d2ccbe1fb7e83af03bee729904', class: {
                 'co-radio-row': true,
                 'co-radio-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("button", { key: '1a666d5890bef0df1257780b70890fb161758ae9', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("button", { key: '16dfd7001260a09ef6c77b85b8d3b9b465a3fa98', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-radio': true,
                 [`co-radio--${this.size}`]: true,
                 'co-radio--checked': this.checked,
                 'co-radio--disabled': this.disabled,
-            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: '29a4f347d9af77512725da44b8fb3f884fd72910', class: "co-radio__label", part: "label" }, this.label))));
+            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: '87ae90a0b64ca95b0806599f16f7770e06329dfc', class: "co-radio__label", part: "label" }, this.label))));
     }
     static get is() { return "co-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,16 +36,16 @@ export class CoRating {
         const iconSize = this.size === 'large' ? 28 : 20;
         const active = this.hoverValue || this.value;
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        return (h("div", { key: '79a5d0a2893814ec7bd1a43178d6ae68e51921ef', class: {
+        return (h("div", { key: '0c7b3f29a8dd3604712402d76d97e7bd89d5009f', class: {
                 'co-rating': true,
                 'co-rating--disabled': this.disabled,
                 'co-rating--readonly': this.readOnly,
                 [`co-rating--${this.size}`]: true,
-            } }, this.label && h("label", { key: '50606dcbbf3783df6d55e78ad03c7d7b85cd9611', class: "co-rating__label" }, this.label), h("div", { key: '489d544d4857ba770719086d341b41162af557de', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
+            } }, this.label && h("label", { key: 'a371c03388a9854bbaaf7a9388159a7684a90c2f', class: "co-rating__label" }, this.label), h("div", { key: '0479a6b098fe059d800bc1c33b833a3c67f0f2c7', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
                 'co-rating__star': true,
                 'co-rating__star--active': star <= active,
                 'co-rating__star--hover': this.hoverValue > 0 && star <= this.hoverValue,
-            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (h("div", { key: 'af6db3a4a405300904ef3bac7634145614813bd4', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'af9a32a796abceb861bd0e838c058b8414fc1e9b', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: '77d7357560bd293f4adb5e9d85a82d6e9e8da056', class: "co-rating__helper-text" }, this.helperText)))));
+            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (h("div", { key: '18267dee4784ba5c2a49acb12374f7d1ae696cdd', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'be16cbf699c2e9360d90106546b8150b3329885b', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: 'c7f3f02d072ded7d59bd0a23ff4a6de9cb73cf72', class: "co-rating__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-rating"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-ref-field/co-ref-field.css

@@ -59,7 +59,7 @@
      (e.g. the dark-navbar workspace pill = Figma "Blanco 8%") without
      touching shared tokens. */
   background: var(--co-ref-field-trigger-bg, var(--co-semantic-surface-page));
-  border: 1px solid var(--co-ref-field-trigger-border-color, var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25)));
+  border: 1px solid var(--co-ref-field-trigger-border-color, var(--co-semantic-border-field));
   border-radius: var(--co-border-radius-xs);
   min-height: 40px;
   box-sizing: border-box;
@@ -67,6 +67,22 @@
   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,1,0) single-class state selectors — open/disabled/
+   error/success/warning — win the cascade tie by source order and keep
+   showing through on top of flat. Unlike co-input/co-select (wrapper class +
+   separate `__field`/`__trigger` child), co-ref-field already keeps every
+   trigger modifier on this one div, so the tied selectors are single
+   classes here instead of two-class descendant chains — same trick,
+   adapted to this component's existing structure. */
+.co-ref-field--flat {
+  background: transparent;
+  border-color: transparent;
+}
+
 /* ── Size variants (mirror co-input heights: s 28 / sm 32 / md 40 / lg 48).
    md is the default trigger above — no override needed. sm keeps its legacy
    12px font (suite-v2 FieldRef/filters depend on this exact look). */

package/dist/collection/components/co-ref-field/co-ref-field.js

@@ -19,6 +19,11 @@ export class CoRefField {
          * compatibility with the old `'default' | 'sm'` scale — use `'md'` instead.
          */
         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';
         // ── Data props (controlled) ────────────────────────────────
         /** Selected value: single ID string or JSON array of IDs. */
         this.value = '';
@@ -263,6 +268,7 @@ export class CoRefField {
                 'co-ref-field--disabled': this.disabled,
                 [`co-ref-field--${this.normalizedSize}`]: true,
                 [`co-ref-field--${this.status}`]: this.status !== 'default',
+                'co-ref-field--flat': this.variant === 'flat',
             }, onClick: this.handleTriggerClick }, this.iconLeft && (h("span", { class: "co-ref-field__icon" }, h("co-icon", { name: this.iconLeft, size: 16 }))), h("div", { class: "co-ref-field__value" }, !hasValue && h("span", { class: "co-ref-field__placeholder", part: "trigger-placeholder" }, this.placeholder), hasValue && !this.multiple && this.renderSingleValue(selected[0]), hasValue && this.multiple && this.renderMultipleValue(selected)), hasValue && this.clearable && !this.disabled && (h("button", { class: "co-ref-field__clear", part: "trigger-clear", onClick: this.handleClear, type: "button" }, h("co-icon", { name: "x", size: 14 }))), h("span", { class: "co-ref-field__caret", part: "trigger-chevron" }, h("co-icon", { name: "caret-up-down", size: 16 }))));
     }
     /**
@@ -314,7 +320,7 @@ export class CoRefField {
     }
     // ── Main render ────────────────────────────────────────────
     render() {
-        return (h("div", { key: '0a0d45f7d4bd24ab9f0d7f5beeb5d444fae8d5af', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: 'da3a3f9d1a5d3abfede2d561793cb905b9764910', class: "co-ref-field__labels" }, this.label && (h("label", { key: '89add7a385fcb6ace824e1f5d3a83db86be49b61', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: '224b3ad35fb667b6ba6b7f29a6977f8c982dac54', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: '43dbec013e8110b6a80f6b79f92b93e9bfa5c475', required: this.required }))), this.secondaryLabel && (h("span", { key: '8c12c993b8743b4083e9eba68bd5cae1be6141fe', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '6dc3087da1ac993100c24232e753b9648e1a3503', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'bf97e3528bafe25727a352d9a59c7a2116824336', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (h("div", { key: 'e43a260c5acfe19f18956a029ad9dceecb05adf2', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: '7965e269ee23603880e1b215f12688071d26f138', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: '9f36e0298724cc9c5296528be84b08d2c17bb6fa' }, this.helperText)))));
+        return (h("div", { key: '19b3543f876fa1396cb08ac5d24f0cdfdfff06ad', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: '2ae2a6946b2fecc67551acd7b1e966bb8b4fc392', class: "co-ref-field__labels" }, this.label && (h("label", { key: '0552bc35602d1f03ff68bb8cee9ab79a43b39a14', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: 'b9731bccb2dcf66749e6240d83c25385c4bc312c', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: 'c49c5dd8d0bf8824363a1eba27386a6c87b64688', required: this.required }))), this.secondaryLabel && (h("span", { key: '2c23a1ab30fe332e7d80d02f162876f1d56d5817', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '91ac16f115e0d631a27bf6fae212dffba274cbcb', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '410a56a47f7092904d09d41cb2e269b8627b8151', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (h("div", { key: '044055f24a9cf11eacd22383d793c2133b555419', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: '96dd504f4900f394370ad938b458f044abd2aa9a', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: 'ac4bc95df2bb54dc7b60fc5fa098f8cf40c81153' }, this.helperText)))));
     }
     static get is() { return "co-ref-field"; }
     static get encapsulation() { return "shadow"; }
@@ -585,6 +591,26 @@ export class CoRefField {
                 "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'"
+            },
             "value": {
                 "type": "string",
                 "mutable": true,

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

@@ -37,8 +37,8 @@ co-rich-text-editor {
 .co-rich-text-editor__frame {
   display: flex;
   flex-direction: column;
-  background: var(--co-semantic-surface-secondary);
-  border: 1px solid var(--co-semantic-border-subtle);
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-semantic-border-field);
   border-radius: var(--co-border-radius-xs);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   min-height: 0;
@@ -58,6 +58,21 @@ co-rich-text-editor {
   overflow-x: hidden;
 }
 
+/* ---- 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 the focused/error/success/disabled/readonly rules 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 trick as co-input/
+   co-select. The toolbar (co-rich-text-toolbar) is its own shadow-DOM
+   component with its own background + `border-bottom` — that border-bottom
+   is exactly the "subtle separator" that keeps the toolbar legible/distinct
+   from the (now borderless) content area below, so it's left untouched. */
+.co-rich-text-editor--flat .co-rich-text-editor__frame {
+  background: transparent;
+  border-color: transparent;
+}
+
 .co-rich-text-editor--focused .co-rich-text-editor__frame {
   border-color: var(--co-semantic-border-focus, var(--co-color-base-negro, #1a1a1a));
   box-shadow: 0 0 0 3px var(--co-semantic-border-focus-ring, rgba(37, 99, 235, 0.15));
@@ -362,7 +377,10 @@ co-rich-text-editor {
   white-space: nowrap;
 }
 .co-rte-content .co-rte-mention {
-  background: var(--co-color-primary-verde);
+  /* Highlight pastel azul (tint azul-200 + texto azul-800) — patrón tint/accent
+     del design system (cf. co-file-type-tile). Legible y suave, no un pill sólido. */
+  background: var(--co-color-azul-200);
+  color: var(--co-color-azul-800);
 }
 
 /* ---- Footer (helper + count) ---- */

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() {