@prolibu-suite/cobalt-core 0.7.0 → 0.9.0

package/dist/collection/components/co-provider-logo/co-provider-logo.js

@@ -0,0 +1,124 @@
+import { h } from "@stencil/core";
+/** Marcas oficiales, con sus colores. NO se tokenizan: un logo recoloreado
+ *  deja de ser el logo (misma excepción que aplica el host para brand icons). */
+const BRANDS = {
+    google: {
+        viewBox: '0 0 48 48',
+        paths: [
+            { fill: '#EA4335', d: 'M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z' },
+            { fill: '#4285F4', d: 'M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z' },
+            { fill: '#FBBC05', d: 'M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z' },
+            { fill: '#34A853', d: 'M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z' },
+        ],
+    },
+    microsoft: {
+        viewBox: '0 0 23 23',
+        paths: [
+            { fill: '#F25022', d: 'M1 1h10v10H1z' },
+            { fill: '#7FBA00', d: 'M12 1h10v10H12z' },
+            { fill: '#00A4EF', d: 'M1 12h10v10H1z' },
+            { fill: '#FFB900', d: 'M12 12h10v10H12z' },
+        ],
+    },
+};
+/**
+ * Logo de marca de un proveedor externo (Google, Microsoft), a color y
+ * self-contained (SVG inline — nunca una URL remota).
+ *
+ * `plated` lo monta sobre un disco blanco: es lo que hace legible una marca a
+ * color cuando va encima de una superficie teñida (el badge de un evento de
+ * calendario externo, que hereda el color del calendario).
+ */
+export class CoProviderLogo {
+    constructor() {
+        /** Lado del logo en px (los viewBox son cuadrados). */
+        this.size = 16;
+        /** Disco blanco de fondo para contraste sobre superficies de color. */
+        this.plated = false;
+    }
+    render() {
+        var _a;
+        const key = String((_a = this.provider) !== null && _a !== void 0 ? _a : '').toLowerCase();
+        const brand = BRANDS[key.includes('outlook') ? 'microsoft' : key];
+        if (!brand)
+            return null;
+        // El disco crece sobre el logo para que la marca respire dentro del plato.
+        const box = this.plated ? Math.round(this.size * 1.5) : this.size;
+        return (h("span", { class: { 'co-provider-logo': true, 'co-provider-logo--plated': this.plated }, style: { width: `${box}px`, height: `${box}px` }, part: "root" }, h("svg", { width: this.size, height: this.size, viewBox: brand.viewBox, "aria-hidden": "true", focusable: "false" }, brand.paths.map((p) => (h("path", { fill: p.fill, d: p.d }))))));
+    }
+    static get is() { return "co-provider-logo"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-provider-logo.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-provider-logo.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "provider": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Proveedor: `google` | `microsoft`. Uno desconocido no pinta nada."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "provider"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lado del logo en px (los viewBox son cuadrados)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "16"
+            },
+            "plated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disco blanco de fondo para contraste sobre superficies de color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "plated",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -48,7 +48,7 @@
   background: transparent;
   flex-shrink: 0;
   box-sizing: border-box;
-  transition: border-color 0.15s ease;
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   overflow: hidden;
 }
 

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

@@ -17,15 +17,15 @@ export class CoRadio {
         };
     }
     render() {
-        return (h("div", { key: '65bc1f5e350693d2ccbe1fb7e83af03bee729904', class: {
+        return (h("div", { key: '58271c736f2b068e5453c904aac03fdb38b128f5', class: {
                 'co-radio-row': true,
                 'co-radio-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("button", { key: '16dfd7001260a09ef6c77b85b8d3b9b465a3fa98', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("button", { key: '9bf5caf7c7b0197caa624e0893acb26c42b446d7', 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: '87ae90a0b64ca95b0806599f16f7770e06329dfc', class: "co-radio__label", part: "label" }, this.label))));
+            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: '4f09ee5fe9807a7f2ebca3a1497edcfa482dbd99', class: "co-radio__label", part: "label" }, this.label))));
     }
     static get is() { return "co-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -100,7 +100,7 @@
   background: transparent;
   flex-shrink: 0;
   box-sizing: border-box;
-  transition: border-color 0.15s ease;
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   overflow: hidden;
 }
 

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

@@ -40,7 +40,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--co-semantic-border-subtle);
-  transition: color 0.1s ease, transform 0.1s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-rating__star:hover:not(:disabled) {

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: '0c7b3f29a8dd3604712402d76d97e7bd89d5009f', class: {
+        return (h("div", { key: 'e0c349a8291d8e6070491da043a7e25f6a1760c9', class: {
                 'co-rating': true,
                 'co-rating--disabled': this.disabled,
                 'co-rating--readonly': this.readOnly,
                 [`co-rating--${this.size}`]: true,
-            } }, 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: {
+            } }, this.label && h("label", { key: '9b94b9f984de01b62b4fa8d81b9306373ace35ea', class: "co-rating__label" }, this.label), h("div", { key: '314c6ad766a0166ec840ef09a4e25f7215e7b431', 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: '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)))));
+            }, 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: '5dc15f3ca66f0c187ee8cd285f8750dbae053d4a', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'ef84a476928b566635cff02144637800b1e72e6e', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: 'b4ddff2a4fee37645bb5352ab4bbfa7e222f51e4', 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

@@ -64,7 +64,7 @@
   min-height: 40px;
   box-sizing: border-box;
   cursor: pointer;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 /* ── Variant: flat (no border/background — reads as content) ──────────
@@ -172,7 +172,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--co-semantic-text-muted);
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-ref-field__clear:hover {
@@ -303,7 +303,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--co-color-gray-500);
-  transition: color 0.1s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   flex-shrink: 0;
 }
 
@@ -386,7 +386,7 @@
   letter-spacing: var(--co-font-letter-spacing-body);
   white-space: nowrap;
   cursor: pointer;
-  transition: opacity 0.15s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
   min-height: 32px;
 }

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

@@ -78,6 +78,18 @@ export class CoRefField {
             if (this.disabled)
                 e.stopPropagation();
         };
+        /** Change de la co-option-list: `value: null` = deselección explícita (la X
+         *  de la fila) → mismo camino que la X del trigger (clear + coClear). El
+         *  resto sigue por handleOptionClick con el ítem. */
+        this.handleListChange = (detail) => {
+            if (!this.multiple && detail.value === null) {
+                this.value = '';
+                this.coClear.emit();
+                this.isOpen = false;
+                return;
+            }
+            this.handleOptionClick(detail.item);
+        };
         this.handleOptionClick = (option) => {
             if (this.multiple) {
                 const current = this.parsedValue;
@@ -99,6 +111,10 @@ export class CoRefField {
                 this.isOpen = false;
             }
         };
+        this.handleReorder = (detail) => {
+            this.value = JSON.stringify(detail.value);
+            this.coChange.emit({ value: detail.value, item: detail.item });
+        };
         this.handleClear = (e) => {
             e.stopPropagation();
             this.value = this.multiple ? '[]' : '';
@@ -316,11 +332,11 @@ export class CoRefField {
                 'co-ref-field__panel': true,
                 'co-ref-field__panel--dark': this.panelTheme === 'dark',
                 'co-ref-field__panel--light': this.panelTheme === 'light',
-            } }, h("co-option-list", { ref: (el) => (this.optionListEl = el), items: typeof this.options === 'string' ? this.options : JSON.stringify(this.options), value: this.value, selectedItems: typeof this.selectedDisplay === 'string' ? this.selectedDisplay : JSON.stringify(this.selectedDisplay), multiple: this.multiple, selectedFirst: this.multiple, selectedAffordance: "deselect", searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: this.searchDebounce, loading: this.loading, total: this.total, emptyMessage: this.emptyMessage, avatarShape: this.avatarShape, onCoSearch: (e) => this.coSearch.emit(e.detail), onCoChange: (e) => this.handleOptionClick(e.detail.item), onCoLoadMore: () => this.coLoadMore.emit() }, this.showFooter && (h("div", { class: "co-ref-field__footer", slot: "footer" }, h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, h("co-icon", { name: "plus", size: 16 }), h("span", null, this.footerSecondaryLabel)), h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, h("co-icon", { name: "check", size: 16 }), h("span", null, this.footerPrimaryLabel)))))));
+            } }, h("co-option-list", { ref: (el) => (this.optionListEl = el), items: typeof this.options === 'string' ? this.options : JSON.stringify(this.options), value: this.value, selectedItems: typeof this.selectedDisplay === 'string' ? this.selectedDisplay : JSON.stringify(this.selectedDisplay), multiple: this.multiple, selectedFirst: this.multiple, reorderable: this.multiple, selectedAffordance: "deselect", searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: this.searchDebounce, loading: this.loading, total: this.total, emptyMessage: this.emptyMessage, avatarShape: this.avatarShape, onCoSearch: (e) => this.coSearch.emit(e.detail), onCoChange: (e) => this.handleListChange(e.detail), onCoReorder: (e) => this.handleReorder(e.detail), onCoLoadMore: () => this.coLoadMore.emit() }, this.showFooter && (h("div", { class: "co-ref-field__footer", slot: "footer" }, h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, h("co-icon", { name: "plus", size: 16 }), h("span", null, this.footerSecondaryLabel)), h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, h("co-icon", { name: "check", size: 16 }), h("span", null, this.footerPrimaryLabel)))))));
     }
     // ── Main render ────────────────────────────────────────────
     render() {
-        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)))));
+        return (h("div", { key: '8b4d5429c6c13f9dbea56dfe5673be2f2bf8e234', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: '6fb3fb006ed5c6bf089608205cbecc4399f8131f', class: "co-ref-field__labels" }, this.label && (h("label", { key: '045edee2c573f3b3a678377f7ac81baef16ca547', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: '8a3fe75b68f69f6bbc1eead72e3a71e4a02d9ff9', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: 'd0935348ad1aaca3ebeb302abfd212250ca01d2c', required: this.required }))), this.secondaryLabel && (h("span", { key: 'f1b2f5578de05162b97f64041250ec92c2d0601b', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '126310c2e579a9f8ac530d0471db742f5f087433', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '07b0c236d0fadd7fef4f719b4f6f190e57a7c488', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (h("div", { key: '31b252868ebfaca932adf5a47e3f61f4b03dc5a3', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: '123ec829c6a45a960212521cfc49e4a98d5e1785', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: '24e573b9fb884a0f006d32136b00d9c7406e3722' }, this.helperText)))));
     }
     static get is() { return "co-ref-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,7 +40,7 @@ co-rich-text-editor {
   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;
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);
   min-height: 0;
   flex: 1;
   position: relative;
@@ -113,6 +113,17 @@ co-rich-text-editor {
   /* Must sit above the selection bubble (z-index 50) so toolbar dropdowns,
      color pickers and panels render on top of it instead of being crossed. */
   z-index: 60;
+  /* The frame rounds its corners but keeps `overflow: visible` (toolbar
+     dropdowns/bubbles must escape the box). Without matching top radii, the
+     toolbar's OPAQUE `surface-secondary` background — square-cornered and
+     flush at the top — paints over the frame's rounded top-border corners,
+     making the top border look "missing". Round the toolbar host to the
+     frame's INNER radius (frame radius − 1px border) so its background nests
+     just inside the border and the rounded corners stay visible. The inner
+     shadow-DOM `.co-rich-text-toolbar` picks this up via `border-radius:
+     inherit`. */
+  border-top-left-radius: calc(var(--co-border-radius-xs) - 1px);
+  border-top-right-radius: calc(var(--co-border-radius-xs) - 1px);
 }
 
 .co-rte-content {
@@ -514,7 +525,7 @@ co-rich-text-editor {
   font-size: 11px;
   cursor: pointer;
   white-space: nowrap;
-  transition: background 0.12s, border-color 0.12s;
+  transition: background var(--co-motion-duration-fast), border-color var(--co-motion-duration-fast);
 }
 
 .co-rte-bubble__select-trigger:hover {
@@ -689,7 +700,7 @@ co-rich-text-editor {
   border: none;
   border-radius: 3px;
   cursor: pointer;
-  transition: transform 0.1s, box-shadow 0.1s;
+  transition: transform var(--co-motion-duration-fast), box-shadow var(--co-motion-duration-fast);
 }
 
 .co-rte-bubble__color-swatch:hover {
@@ -1214,7 +1225,7 @@ co-rich-text-editor {
   background: transparent;
   color: var(--co-semantic-text-default, #333);
   cursor: pointer;
-  transition: background 0.12s, border-color 0.12s;
+  transition: background var(--co-motion-duration-fast), border-color var(--co-motion-duration-fast);
 }
 
 .co-rte-img-layout__btn:hover {
@@ -1251,7 +1262,7 @@ co-rich-text-editor {
   border-radius: 4px;
   pointer-events: none;
   opacity: 0;
-  transition: opacity 0.12s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
   z-index: 100;
 }
 .co-rte-img-layout__btn[data-tooltip]:hover::after {

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

@@ -2031,7 +2031,7 @@ export class CoRichTextEditor {
     render() {
         const showToolbar = this.resolvedToolbar !== 'none' && !this.readonly && !this.disabled;
         const showCount = this.showCharacterCount || this.maxLength != null;
-        return (h("div", { key: '68960896d888331319dc82779e73988d66dc57de', class: {
+        return (h("div", { key: 'd06c3fe4d1a84c49a525a694986d2f096b11df79', class: {
                 'co-rich-text-editor': true,
                 'co-rich-text-editor--focused': this.hasFocus,
                 'co-rich-text-editor--disabled': this.disabled,
@@ -2039,10 +2039,10 @@ export class CoRichTextEditor {
                 'co-rich-text-editor--loading': !this.ready,
                 [`co-rich-text-editor--${this.status}`]: this.status !== 'default',
                 '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) => {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'd9bba1f9e070de2e1e0210adf8a292a2052297fd', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: '01f5ceb0e3e35da72480a422f434c16913e9aa7b', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: 'cf4ba75489c3e413a6dfcd1cac5ff964e3aa0290', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: '106915b5caa63689763b01ff7c2253d085ddf628', class: "co-rich-text-editor__frame" }, showToolbar && (h("co-rich-text-toolbar", { key: 'd9e9367a4b549e5c1c751b9098219a632d295d60', 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}` : '')))));
+            }, ref: (el) => (this.toolbarEl = el) })), h("div", { key: 'bccd38caf855288ad9582720dd39c77ddfeaf998', class: "co-rich-text-editor__box" }, h("div", { key: 'a6f75d24d978e52f1337ee408ddc61417099bf13', 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: 'dbdade68814a3d62c383ca3e545a6bf1912c3945', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '918e3b3c204e60aa5063828d82970857aca94e9a', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: 'dc1ee710ef02258eff5f42a9df736871bf9b27fa', name: this.helperIcon, size: 14 }), h("span", { key: '050d504bd35f4cfbb336e10bda956a686ae1844b' }, this.helperText))), showCount && (h("span", { key: 'b071610cf144259292a6f771038862f742ae09c8', 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() {

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

@@ -19,6 +19,14 @@
   padding: var(--co-spacing-xs) var(--co-spacing-sm);
   border-bottom: 1px solid var(--co-semantic-border-subtle);
   background: var(--co-semantic-surface-secondary);
+  /* Follow whatever top radius the host is given (e.g. the editor rounds the
+     toolbar's top corners to nest inside the frame's rounded border). This
+     opaque background is what would otherwise square off / cover those
+     corners. Standalone toolbars leave the host radius at 0, so `inherit`
+     is a no-op there. Only the TOP corners round — the bottom edge is the
+     separator between toolbar and content and must stay flush. */
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
 }
 
 /* ── Fast CSS tooltips (replaces slow native title) ── */
@@ -45,7 +53,7 @@
   border-radius: 4px;
   pointer-events: none;
   opacity: 0;
-  transition: opacity 0.15s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
   z-index: 9999;
 }
 [data-tooltip]:hover::after {
@@ -77,7 +85,7 @@
   background: transparent;
   color: var(--co-semantic-text-default, #333);
   cursor: pointer;
-  transition: background 0.12s ease, color 0.12s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-rich-text-toolbar__btn:hover:not(:disabled):not(.co-rich-text-toolbar__btn--active) {
@@ -120,7 +128,7 @@
   font-size: var(--co-font-size-12, 12px);
   cursor: pointer;
   white-space: nowrap;
-  transition: background 0.12s, border-color 0.12s;
+  transition: background var(--co-motion-duration-fast), border-color var(--co-motion-duration-fast);
 }
 
 .co-rich-text-toolbar__select-btn:hover:not(:disabled) {
@@ -201,7 +209,7 @@
   cursor: pointer;
   background: var(--co-semantic-surface-secondary, #fff);
   color: var(--co-semantic-text-default, #333);
-  transition: background 0.12s;
+  transition: background var(--co-motion-duration-fast);
 }
 
 .co-rich-text-toolbar__popover-btn:hover:not(.co-rich-text-toolbar__popover-btn--primary) {
@@ -238,7 +246,7 @@
   font-size: var(--co-font-size-14, 14px);
   cursor: pointer;
   text-align: left;
-  transition: background 0.1s;
+  transition: background var(--co-motion-duration-fast);
 }
 
 .co-rich-text-toolbar__popover-option:hover {
@@ -277,7 +285,7 @@
   font-size: var(--co-font-size-14, 14px);
   cursor: pointer;
   text-align: left;
-  transition: background 0.12s;
+  transition: background var(--co-motion-duration-fast);
 }
 
 .co-rich-text-toolbar__dropdown-item:hover {
@@ -352,7 +360,7 @@
   border: none;
   border-radius: 3px;
   cursor: pointer;
-  transition: transform 0.1s, box-shadow 0.1s;
+  transition: transform var(--co-motion-duration-fast), box-shadow var(--co-motion-duration-fast);
 }
 
 .co-rich-text-toolbar__color-swatch:hover {
@@ -451,7 +459,7 @@
   background: transparent;
   color: var(--co-semantic-text-secondary, #666);
   cursor: pointer;
-  transition: background 0.12s, color 0.12s;
+  transition: background var(--co-motion-duration-fast), color var(--co-motion-duration-fast);
 }
 
 .co-rich-text-toolbar__table-tab:hover {
@@ -483,7 +491,7 @@
   border-radius: 3px;
   background: transparent;
   cursor: pointer;
-  transition: background 0.08s, border-color 0.08s;
+  transition: background var(--co-motion-duration-instant), border-color var(--co-motion-duration-instant);
 }
 
 .co-rich-text-toolbar__grid-cell:hover,
@@ -585,7 +593,7 @@
   border: none;
   border-radius: var(--co-border-radius-xxs, 4px);
   cursor: pointer;
-  transition: opacity 0.12s;
+  transition: opacity var(--co-motion-duration-fast);
 }
 
 .co-rich-text-toolbar__table-btn--primary {
@@ -631,7 +639,7 @@
   background: transparent;
   color: var(--co-semantic-text-default, #333);
   cursor: pointer;
-  transition: background 0.12s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-rich-text-toolbar__split-caret:hover:not(:disabled),
@@ -672,7 +680,7 @@
   border-radius: 8px;
   background: var(--co-semantic-surface-secondary, #fff);
   cursor: pointer;
-  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
+  transition: border-color var(--co-motion-duration-fast), box-shadow var(--co-motion-duration-fast), background var(--co-motion-duration-fast);
 }
 
 .co-rich-text-toolbar__listpicker-item:hover {

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

@@ -13,11 +13,11 @@ export class CoRow {
         this.size = 'sm';
     }
     render() {
-        return (h("div", { key: 'acd6c8b2a2c0331dcad0b0308f407a999e52f049', class: {
+        return (h("div", { key: '7be514198a0f47409e33fc0feadadb2d8552253f', class: {
                 'co-row': true,
                 [`co-row--${this.position}`]: true,
                 [`co-row--${this.size}`]: true,
-            }, 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" }))));
+            }, part: "row" }, h("div", { key: '0ac40c40dd298e54265899610508d53f4fe38355', class: "co-row__prefix" }, h("slot", { key: '0853d494025ad3a628a9eb3a4e2289b4771bdd2b', name: "prefix" })), h("div", { key: '6c6601273fb708aa91d4df52340a54a0f528fdd6', class: "co-row__content" }, h("slot", { key: 'e2046193d773aa0982c5f7b71e7f4ace816cecd7' })), h("div", { key: 'd754723e7a464f8ef23eb0eb64e6d6c99cf11e13', class: "co-row__suffix" }, h("slot", { key: '8584a30c593bc4e1db33e0bdcc26b450c4269893', name: "suffix" }))));
     }
     static get is() { return "co-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -735,7 +735,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   min-height: 40px;
   box-sizing: border-box;
   cursor: pointer;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 /* ── Variant: flat (no border/background — reads as content) ──────────
@@ -788,7 +788,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   background: transparent;
   cursor: pointer;
   color: var(--co-color-gray-500);
-  transition: color 0.1s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   flex-shrink: 0;
 }
 
@@ -877,7 +877,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   background: transparent;
   cursor: pointer;
   color: var(--co-semantic-text-muted);
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-select__clear:hover {
@@ -965,7 +965,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   padding: var(--co-spacing-sm2) var(--co-spacing-md);
   border-radius: var(--co-border-radius-xs);
   cursor: pointer;
-  transition: background 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
   min-height: 32px;
   box-sizing: border-box;
 }

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

@@ -237,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: '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)))));
+        })()))), this.helperText && (h("div", { key: 'b7f14d7e02dd3fe15be6c0f82b13df14edc0db60', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '80dbcc3fe68bbe9e89256fa7a3dae7d846280d33', name: this.statusIcon, size: 14, class: "co-select__helper-icon" }), h("span", { key: 'd2162ba7ac4c287720185295643ef1c3e2187c84', class: "co-select__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-select"; }
     static get encapsulation() { return "shadow"; }

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: 'ef9b9d7c11ca50e1042ddb613ee3bbaaf7802972', class: {
+        return (h("hr", { key: 'e3dae08fe134e1d4e1769aa9e66c59b8b0eb62ae', class: {
                 'co-separator': true,
                 'co-separator--vertical': this.vertical,
                 'co-separator--dark': this.dark,

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

@@ -11,7 +11,7 @@
   font-family: var(--co-font-family-primary);
   box-sizing: border-box;
   overflow: hidden;
-  transition: width 0.2s ease;
+  transition: width var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
 /* ─── Modes ─────────────────────────────────────────────────── */

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

@@ -10,10 +10,10 @@ export class CoSidebar {
         this.mode = 'full';
     }
     render() {
-        return (h("nav", { key: '1bc3acd9fa28f05c9665d9fe0ab78b9bf701b56e', class: {
+        return (h("nav", { key: 'a854ad248b6f55fdcb1b08ed15272154a5044e55', class: {
                 'co-sidebar': true,
                 [`co-sidebar--${this.mode}`]: true,
-            }, 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" }))));
+            }, part: "sidebar" }, h("div", { key: '17a14f8625168e7f163c984d782df2b387c3684e', class: "co-sidebar__header", part: "header" }, h("slot", { key: 'e9152aa47751f8ced84384a4a5ced1d05f410cf3', name: "header" })), h("div", { key: 'df4ad1cd15d33678c60c47ee231ac765993a3d28', class: "co-sidebar__body", part: "body" }, h("slot", { key: 'be0e6031883c828b50bcf65f2052c4055370efba' })), h("div", { key: '6ab4f6793e2ce3c81f50e143cf0764b25a2b0048', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: '930905e30ea4ddf297bb313294d5d2eb4dafa721', name: "footer" }))));
     }
     static get is() { return "co-sidebar"; }
     static get encapsulation() { return "shadow"; }