@prolibu-suite/cobalt-core 0.7.0 → 0.8.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.js

@@ -17,15 +17,15 @@ export class CoRadio {
         };
     }
     render() {
-        return (h("div", { key: '65bc1f5e350693d2ccbe1fb7e83af03bee729904', class: {
+        return (h("div", { key: '336f85ea727de12ef444126ba6f428957463663c', 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: '9f703411fc244639599918c9673e166ca6b820a6', 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: 'f7f027f702b41e9b52f281cb80ef05d57f0fae1b', 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: '0c7b3f29a8dd3604712402d76d97e7bd89d5009f', class: {
+        return (h("div", { key: '1f30917baf6de9922ebf76214c324b2669046f98', 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: 'f03d4bd39a49f4e16d5724478f4c0f15ac3a8c92', class: "co-rating__label" }, this.label), h("div", { key: '96301d47ba510e923f0abd3f5fff63b5f8437099', 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: '4e84ece3536c2e028057be76910eae6fa3ac6228', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'a24e3451108027dc941c96dbf03988e1cab92424', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: '734bc0b5515d95ac1d5545b20842d949e35a0d87', 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.js

@@ -99,6 +99,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 +320,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.handleOptionClick(e.detail.item), 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: '0ce5a3a17573be110e31d9b9a852c9d38920ebe7', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: 'd8e57aa53a86c4a7eea93f5eb5bf599172028c8b', class: "co-ref-field__labels" }, this.label && (h("label", { key: '85047359916520cb24dd41806bc55105d58546c0', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: '1a915ad0d00edde85e5a42c6aca46dd51d6934cd', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: '117e40254873f5736cf0adf41f8e075975e46c28', required: this.required }))), this.secondaryLabel && (h("span", { key: '054f1fe59359d4dafda008396867f1c9b70607cb', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '56dbfeb3560e771908e9e0c4d41c34b0a69c8db4', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '4fe5a05e993c561d5e721c778ed55e71a3e26260', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (h("div", { key: '9a49dcd557477db1c8460ee974682a13730b360e', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: 'a8868a9cf707dd1b202a86c03ccab43778857fe8', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: 'a11dbf26c8c975089d5e384316a154a2f03eab7b' }, 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

@@ -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 {

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: 'd600084f58be73fcade0b1a18111ccd1ab2a32ea', 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: 'f692d9fdadcf547da8fd0ba485d69fe882b14580', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: '77ef28fee83ee26782deca75f0310abea3cbf64d', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: 'f26ce7f7457414e3c1353e33aff2ae9e40522643', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: '20a121b30f139ec62b37a6248aa4309e71888771', class: "co-rich-text-editor__frame" }, showToolbar && (h("co-rich-text-toolbar", { key: '7391cf2bc71e6c9636222b055d614845201b4d05', 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: '22847c8d57d9e9a903a2e2c6ffb658ea61f9d0a7', class: "co-rich-text-editor__box" }, h("div", { key: '70bb598dd6435c913044c6e9ae8e743f63a7efc5', 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: 'c3875f25af1683b61eae18c3b0ddd7c07fe05970', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: 'd61a15129d7f5870126fb16ebd1bb9f069753000', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: '4e75dfa744e3ba2240a0461f60bc407a85aa974e', name: this.helperIcon, size: 14 }), h("span", { key: '9a081b10f32da576769c6d7b11775a5d51c92951' }, this.helperText))), showCount && (h("span", { key: '82673395155bf73ff766d71c352d895d49f35539', 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) ── */

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: '0a4400aebb95a4c221a9a084a7b4fdf6e2a22558', 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: 'a87e3439e72b8e620b23270c6748f02329980fa5', class: "co-row__prefix" }, h("slot", { key: '1ef9640ca87642e61c6f8d76a1ffc725b65ed8d4', name: "prefix" })), h("div", { key: '56236a111369b8b70b68b9b36211555f7161b7bc', class: "co-row__content" }, h("slot", { key: 'c8faefc9609037a804d3e6045732af338a6df276' })), h("div", { key: '11632f0b2c99357e03fb044f3f402ac240a5a543', class: "co-row__suffix" }, h("slot", { key: '9b0d002049447a1e49a8bbfd4da889ef3368def7', name: "suffix" }))));
     }
     static get is() { return "co-row"; }
     static get encapsulation() { return "shadow"; }

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: 'fa1b1c05d8d5dfb77619036555d1d8a13590f33a', class: {
                 'co-separator': true,
                 'co-separator--vertical': this.vertical,
                 'co-separator--dark': this.dark,

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

@@ -10,10 +10,10 @@ export class CoSidebar {
         this.mode = 'full';
     }
     render() {
-        return (h("nav", { key: '1bc3acd9fa28f05c9665d9fe0ab78b9bf701b56e', class: {
+        return (h("nav", { key: '3c0842a02ed5a1bf40b1c69263efceff221aa193', 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: '392937b5a15fe0c7f6abb78a717b34601c616bf4', class: "co-sidebar__header", part: "header" }, h("slot", { key: '28f3b073070f7dfa9e8b0a2260c911ef264e9c66', name: "header" })), h("div", { key: '622f3dd5167875811492a820e7fa9a12734a8247', class: "co-sidebar__body", part: "body" }, h("slot", { key: '10cec6e86c11203e167eed243aeb718ddeca4a98' })), h("div", { key: '55dc3013edc9c4e0c7531a52d15ddc7070722847', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: 'ec0bff733e378e23b6788b39b7cf18457b30c8a6', name: "footer" }))));
     }
     static get is() { return "co-sidebar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -144,6 +144,16 @@ const DEFAULT_ICON_MAP = {
     // Sales / Billing extras
     PaymentReceipts: 'hand-coins',
     Coupons: 'seal-percent',
+    // Events
+    EventManager: 'calendar-star',
+    EventProspects: 'users-four',
+    BusinessEvents: 'briefcase',
+    EventExpense: 'coins',
+    // Content
+    Content: 'folder-open',
+    Portals: 'app-window',
+    // Communication Center
+    CommunicationCenter: 'headset',
     // Integrations
     Integrations: 'plugs-connected',
     Mcp: 'plug',
@@ -486,10 +496,10 @@ export class CoSidebarNav {
         // `flyout-open` (min mode only) lets the CSS drop the host edge-fade mask
         // while a flyout is shown — a host mask would otherwise clip AND
         // mis-position the fixed flyout (mask makes the host a containing block).
-        h(Host, { key: '6bf3b6d16c6baef9af2b41ee38c0823961595132', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '0264a43d3b83859b114001917c45e312fb702afe', class: {
+        h(Host, { key: '637707894cb777ff149c0516aff13786054e5393', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '3d98909c4d5d0f17eb478fbd01603884d040f45f', class: {
                 'co-sidebar-nav': true,
                 'co-sidebar-nav--min': this.mode === 'min',
-            } }, this.renderSearch(), h("div", { key: '92437d9f022ec1a25adc04ea52b512dbb046bfc0', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
+            } }, this.renderSearch(), h("div", { key: 'd46c1e3b5e60ded1d232e7ccf8beb768d34ffe88', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
     }
     static get is() { return "co-sidebar-nav"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -72,12 +72,12 @@ export class CoSlider {
     }
     render() {
         const pct = this.percentage;
-        return (h("div", { key: '1f94a2bea59726bfe63dd0226e6c76aba6e5eed6', class: {
+        return (h("div", { key: '5b112a7975ab5dee865814fae75fe1d4ca8099ed', class: {
                 'co-slider': true,
                 'co-slider--disabled': this.disabled,
                 'co-slider--dragging': this.dragging,
                 [`co-slider--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '53731220f37468ad024ead0b930b7fa542ce3254', class: "co-slider__labels" }, h("div", { key: '39eccf3964f1463a7a84a8420f2963f0b79935ec', class: "co-slider__labels-left" }, this.label && h("label", { key: 'ab63ada93da100e8d613fcd392dad3b9c6fde6d4', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'a821f151830ef03296724a21241342348848006c', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: '1c0888c1ccb60544a5d1fb20c3d44a04d73fa3a0', class: "co-slider__value" }, this.value))), h("div", { key: 'a766dc086713341329a560bc332130245160eb02', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'a6aa57cafbf17efc2079627e822f4a909324fa35', class: "co-slider__track" }, h("div", { key: '07183ce09d776aea1249276d44383162f5634633', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'e139f1cec3ec5060667602ac04bdf7e0e6d9ef6d', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '5df827960aa6d8cb48305efd3a090ed8fe981c88', class: "co-slider__marks" }, h("span", { key: '8f3f20a7e2f5d15f1b8a10f548093b374b41eac0', class: "co-slider__mark" }, this.min), h("span", { key: '11196868d93fd21c9ab3e8f672aad51fcd1e2907', class: "co-slider__mark" }, this.max))), h("input", { key: '97bb0aa1e2ec72c5052c2c0018c5ba3d488aa704', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, "aria-label": this.label || 'Slider' }), this.helperText && (h("div", { key: 'c5e41ad16c3548703c544dd412f121c1933976db', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'f6d17f21068433ba9fea7fec7f7015fe7a03576d', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '8f85afae6cf7b6a1cbec2096a39312b9c691ac55', class: "co-slider__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '215199cccc16293c239ad543e19965de8016bc49', class: "co-slider__labels" }, h("div", { key: '0c72aed8099eb04a7be3fd978643ff1807b450b7', class: "co-slider__labels-left" }, this.label && h("label", { key: '19addd8933e918b73bb12e8c5e600d95f082f755', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'e7128961c9aea173ff13d81b03062ad2cfc38084', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'f82b30d226e562521a5564d4348a03ccc978715b', class: "co-slider__value" }, this.value))), h("div", { key: '0a42dc4519dd991b332bc62eb8ff59c44acbdd79', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'b85ba951d913ef68ee454c2f70a8e5517c4262bf', class: "co-slider__track" }, h("div", { key: 'f06c1d1d9b602c078fcd6cfb3ab1f486b9ae0c63', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'be52d64df84ef2620ebdc11b75793a804b3c7a4e', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: 'd0bf46d74c1d9cffc35db3af25bd39de8c041899', class: "co-slider__marks" }, h("span", { key: '779c25fb6669e0e3ce8c73d2a59686204a19b6fb', class: "co-slider__mark" }, this.min), h("span", { key: 'd61b61a373332bf22fc524d879c595047782c585', class: "co-slider__mark" }, this.max))), h("input", { key: '426f58b9210369dbd0c976555965ac62d20ce198', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, "aria-label": this.label || 'Slider' }), this.helperText && (h("div", { key: '72de59ff964142aa3e63f1c1da203d6ae5a015b4', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '07c8dacb49fcb50b57014ae16a4f0220757064c8', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '64464d85a972b1bc523d5f28f2f8ac82f194fb8a', class: "co-slider__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,16 +29,16 @@ export class CoSwitch {
     render() {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = !!this.helperText;
-        return (h("div", { key: '526145ecd1b1592cc650db93f0628ef07e5e1786', class: {
+        return (h("div", { key: '2d54e4a245ff8e7bac33f720c0bf22b16e2f2863', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: '4e72f02ad08d6f15f0bbc6a202db9965666dbd45', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '3ce3f2a7f89c4c5017127df470166267f619a739', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, h("div", { key: 'a8c0d9067596dc7ba2cde7db13936ac98f4a308f', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '920210333625a69b9aa505a50cfd147ad7f71357', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-switch': true,
                 'co-switch--on': this.checked,
                 'co-switch--off': !this.checked,
                 'co-switch--disabled': this.disabled,
-            }, disabled: this.disabled, part: "track" }, h("span", { key: 'c8189b585b70b08c269e04505a5edbbb3b3a064c', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '912328e5167f0db2704267713e988807cda0c318', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: 'd86b976d95ec01fb16529034f75fa0b874e1c4f0', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '89623a1a38326a443598a7e0598035e6067ef977', required: this.required })), this.secondaryLabel && (h("span", { key: 'df602d9aa8eba9805674cc921447e7621338d551', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '63198303a7ba9fd9a3b6c306018867802491b535', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '1f2790d86165562add0967856e1812ccce90d703', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '77ab535dc73ef130d360e4d31c0cc9b510a4b94c', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, disabled: this.disabled, part: "track" }, h("span", { key: 'b9bafc85e62aa24ed0243359d53210f31d984e13', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '38ca77e6f9bf4c2b9e911fd1f98588df0b273320', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: 'd25c10a12a6e3bd7dd49ee6e25d7a4e710622604', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'b6e434fe0dcae3ed7a23aa2a3c4686783debc736', required: this.required })), this.secondaryLabel && (h("span", { key: 'da01d07fc4a7519fad7e5c6d8d283e4dfd72763a', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '6d518eb23a4459ad5853159d4e33632d758f419e', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '96772daea7dc0b3c3304f4394f55856bd74b2fc6', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: 'de1d5474326eb79396cad519faf48a3595adf755', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-switch"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -1,11 +1,36 @@
 :host {
   display: flex;
+  /* El strip nunca fuerza el ancho del layout: clipea y scrollea adentro. */
+  max-width: 100%;
+  min-width: 0;
 }
 
 .co-tab-group {
   display: flex;
   align-items: center;
   gap: var(--co-spacing-sm2);
+  /* Overflow: el track clipea y el scroll vive DENTRO (trackpad nativo; la
+     rueda del mouse se traduce en el onWheel del componente). Scrollbar
+     oculta a propósito — acá `scrollbar-width: none` es correcto (queremos
+     CERO scrollbar, no estilarla). */
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+  /* Al clickear un tab parcialmente fuera de vista, el navegador lo mete en
+     vista (focus scroll). Con smooth ese reajuste es un deslizamiento suave en
+     vez de un salto brusco. NO afecta la rueda: el onWheel asigna scrollLeft
+     directo, que es instantáneo por spec (scroll-behavior solo aplica a las
+     scrolling APIs y al focus/navegación del user-agent). */
+  scroll-behavior: smooth;
+}
+
+.co-tab-group::-webkit-scrollbar {
+  display: none;
+}
+
+/* Los tabs no se comprimen: el desborde se resuelve scrolleando, no encogiendo. */
+::slotted(co-tab) {
+  flex-shrink: 0;
 }
 
 /* ─── Underline variant ─────────────────────────────────────── */

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

@@ -9,6 +9,22 @@ export class CoTabGroup {
         this.onSlotChange = () => {
             this.syncTabs();
         };
+        /** Wheel → horizontal scroll cuando el track desborda (los tabs clipean con
+            `overflow-x`, ver CSS): la rueda vertical del mouse scrollea el strip.
+            Solo consume el evento si realmente puede desplazarse en esa dirección —
+            en los extremos deja pasar el scroll a la página. */
+        this.onWheel = (e) => {
+            const track = e.currentTarget;
+            const max = track.scrollWidth - track.clientWidth;
+            if (max <= 0)
+                return;
+            const delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX;
+            const next = Math.max(0, Math.min(max, track.scrollLeft + delta));
+            if (next === track.scrollLeft)
+                return;
+            track.scrollLeft = next;
+            e.preventDefault();
+        };
     }
     onTabSelect(e) {
         e.stopPropagation();
@@ -33,10 +49,10 @@ export class CoTabGroup {
         });
     }
     render() {
-        return (h("div", { key: 'fa78f36e2c58a2dfa33280ecc58a8e22b55a0238', class: {
+        return (h("div", { key: 'cdc42835ffb5727ceb6de152ccf91064ebfc9cf9', class: {
                 'co-tab-group': true,
                 [`co-tab-group--${this.variant}`]: true,
-            }, role: "tablist", part: "tab-group" }, h("slot", { key: '0c27dbc561fa7aac4cb7697abb3b71187c9c53ff', onSlotchange: this.onSlotChange })));
+            }, role: "tablist", part: "tab-group", onWheel: this.onWheel }, h("slot", { key: '2815afe02e2e34378cd33f0d6a21e2fe658eac53', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "co-tab-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -186,14 +186,14 @@ export class CoTagsField {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
         const helper = this.isInvalid ? this.errorMessage : this.helperText;
         const showInput = !this.readonly && !this.atCapacity;
-        return (h("div", { key: '3b98e21db568fa88fc353e855330cf40fcec03f8', class: {
+        return (h("div", { key: '47f84ca4f1ca42b71bb652f557e5a8718ab5a463', class: {
                 'co-tags-field': true,
                 'co-tags-field--disabled': this.disabled,
                 'co-tags-field--focused': this.hasFocus,
                 'co-tags-field--filled': this.hasValue,
                 'co-tags-field--invalid': this.isInvalid,
                 [`co-tags-field--${this.size}`]: true,
-            }, part: "wrapper" }, this.label && (h("div", { key: '5a2e5da6096a2c5b660c3e884d2d4b0dbe9128bb', class: "co-tags-field__labels" }, h("label", { key: '51403414e956b9205bf88d6cf8a6c43ad4806de9', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '19ab6f22b8615a52b5487c8661f112a1861e6c09', required: this.required })))), h("div", { key: '67052a465dc337616565f0309d3de6f9dce5e82f', class: "co-tags-field__field-row" }, h("div", { key: 'cb350c84d48e7eeb2cc5620291466bab58e9cabe', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '6cd869c8b7da5280475016b3e89a0bcf42da3cc7', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
+            }, part: "wrapper" }, this.label && (h("div", { key: '718b221eab4b3e7ed2397bde6e13a3f5f8c5f703', class: "co-tags-field__labels" }, h("label", { key: 'e3479f790451e5d2e7d89977f88af29db2bd3269', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '5a544537e8a663a53bc44d3333788e1fa1270112', required: this.required })))), h("div", { key: '0174ad7bb299efa97d98450de80c4c8dd9378f35', class: "co-tags-field__field-row" }, h("div", { key: '25b80d7f435195f9c789f4eb8553d3c326984b31', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: 'b4eb779b42ffc118e584d36ff6896de6e39148bc', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
         // Shared field-chip (utils/fieldChip.tsx) per the Figma
         // "Tipo=Chips" spec — same look as co-ref-field's chips.
         h(FieldChip, { key: `chip-${index}-${tag}`, baseClass: "co-tags-field__chip", label: tag, title: tag, onChipDblClick: () => this.startEdit(index), onRemove: !this.disabled && !this.readonly
@@ -201,13 +201,13 @@ export class CoTagsField {
                     e.stopPropagation();
                     this.removeTag(index);
                 }
-                : undefined }))), showInput && (h("input", { key: '616f9c3e45ee685e4f05241a9d718c02b585f87f', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: '1846e3cb5e3f8d4bd532e598e69dbb5508589bc7', class: {
+                : undefined }))), showInput && (h("input", { key: '35e2946e38d6b3e69e1a1cdad49ade9999ad1c48', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: '1be954210a0d61e36cf987d12127594119b40095', class: {
                 'co-tags-field__clear': true,
                 'co-tags-field__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: '2c31acff9b897ef7394e087e24cb6ad1954a5b6a', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '5fb8c29516afc9e92bd29a9702a67028434d4e07', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: '8e71625ae0d1d1ac3de1b92c1520229669ba8fb6', class: {
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: 'c1a4975e339115a6a2fc933a2d73a3d5ff0b4653', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'bd3e4bf286efe97939e9933d3b4c3bda0909f54f', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'e32c923da1928cfa6bc1bf041e257e41809df047', class: {
                 'co-tags-field__helper': true,
                 'co-tags-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '865454377e41eca5fa36b8a7cb1bfe39b4e6afaa', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: 'd4d7f2f106bcccd3e11cdf1eb759a4b1d9de22f3', class: "co-tags-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '8ab523ee51f9f3525985d6f7ec5b0cede3dd1d61', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '24641df824075583a1ece04e202b6f419a99c54d', class: "co-tags-field__helper-text" }, helper)))));
     }
     static get is() { return "co-tags-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@ export class CoTextarea {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
         const isOverLimit = this.maxLength != null && this.charCount > this.maxLength;
         const statusClass = this.status !== 'default' ? `co-textarea--${this.status}` : '';
-        return (h("div", { key: 'fb292b8285b753e8164150fada241d766c065ea5', class: {
+        return (h("div", { key: '83cddaf39334bbd1ee8c3c2804bf879a1678be31', class: {
                 'co-textarea': true,
                 'co-textarea--disabled': this.disabled,
                 'co-textarea--focused': this.hasFocus,
@@ -85,13 +85,13 @@ export class CoTextarea {
                 [`co-textarea--${this.size}`]: true,
                 [statusClass]: !!statusClass,
                 'co-textarea--flat': this.variant === 'flat',
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '52ec29df68b495a8a290a449324bf0108eb0fc4e', class: "co-textarea__labels" }, this.label && (h("label", { key: '7573a521ef57b8128153e331a504b6b1e0162184', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: 'f7d1ad43c16b98f604f8c0d7620e59c3533347be', required: this.required }))), this.secondaryLabel && (h("span", { key: '1223a9000424080857b100585b5af3924a74fae1', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '297970dd56b64ec6bed080841fff838053fd120f', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'fcd8ec4a9db5e7c576c72029c1bc71a529bcf0af', ref: (el) => (this.textareaEl = el), class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '78e5e03b10e3d19e565fc5a617efa42f4a0102c3', class: "co-textarea__labels" }, this.label && (h("label", { key: '65bde2a35c48be79ae04aa0d2b040970cdad7b8c', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: 'd46b4a35d8daeff39cdaaed33c9d4b38071d0663', required: this.required }))), this.secondaryLabel && (h("span", { key: '526f358820bedf0184f9353d0cad8fe54afb1557', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'f9133145a9a50f963bafb10546e6f46fa3dbfedf', class: "co-textarea__field", part: "field" }, h("textarea", { key: '83e91e506c84939b4c4ff06da316c81e38540ea1', ref: (el) => (this.textareaEl = el), class: {
                 'co-textarea__native': true,
                 [`co-textarea__native--resize-${this.resize}`]: true,
-            }, rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.status === 'error' || isOverLimit ? 'true' : 'false', onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), showClear && (h("button", { key: 'ec698cec38f105ed0deb2ebf1ebb443bb3601924', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '44e5994116fd9c430181b84f4cee7a18fd63872c', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: 'd088f3c27f70a155a32078d7b63945491ca81664', class: "co-textarea__footer" }, this.helperText && (h("div", { key: '1baf81a8fd8a568e0508175b03e81e59588f254e', class: {
+            }, rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.status === 'error' || isOverLimit ? 'true' : 'false', onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), showClear && (h("button", { key: '5fd7d570f0fa628fd69739b1245892791073a04a', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'aa8d7ec05dae2ffc62caa62261d7a26fb0c74f72', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: 'bf78c1beb45928d0494699bd4fa108c9941d4011', class: "co-textarea__footer" }, this.helperText && (h("div", { key: '6a607e88c55a7c370e319a6972be00ca92beab53', class: {
                 'co-textarea__helper': true,
                 'co-textarea__helper--error': this.status === 'error',
-            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '3d807c485144679809cc3fa994692b4f21ece752', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '15b6c9458c38cb562276aae042cfd7bbb35ee9cc', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: '4e3e9750db0ede3b2381f3504e7a8975ebd5c272', class: {
+            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: 'd5b027fb53b600f7a527ffddb3a819463b360255', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '9e180c6e956efa75558dc1d3027f28760d3d39d4', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: 'cc32a43d1e804910dbb948e9dd004fe36d428a1e', class: {
                 'co-textarea__counter': true,
                 'co-textarea__counter--over': isOverLimit,
             }, part: "counter" }, this.charCount, "/", this.maxLength))))));