@prolibu-suite/cobalt-core 0.11.6 → 0.11.7

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

@@ -78,8 +78,11 @@ co-rich-text-editor {
   box-shadow: 0 0 0 3px var(--co-semantic-border-focus-ring, rgba(37, 99, 235, 0.15));
 }
 
+/* Borde de error de CAMPO por --co-semantic-border-error: gira con el tema (status-error es
+   relleno fijo y como trazo en oscuro daba 2,94:1). En claro vale status-error (idéntico).
+   Fallback: la primitiva de hoy, hasta publicar tokens. */
 .co-rich-text-editor--error .co-rich-text-editor__frame {
-  border-color: var(--co-color-status-error);
+  border-color: var(--co-semantic-border-error, var(--co-color-status-error));
 }
 .co-rich-text-editor--success .co-rich-text-editor__frame {
   border-color: var(--co-color-status-success);
@@ -433,8 +436,10 @@ co-rich-text-editor {
   color: var(--co-semantic-text-secondary);
   font-size: var(--co-font-size-12, 12px);
 }
-.co-rich-text-editor__helper--error { color: var(--co-color-status-error); }
-.co-rich-text-editor__helper--success { color: var(--co-color-status-success); }
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
+.co-rich-text-editor__helper--error { color: var(--co-semantic-text-error, var(--co-color-status-error)); }
+.co-rich-text-editor__helper--success { color: var(--co-semantic-text-success, var(--co-color-status-success)); }
 
 .co-rich-text-editor__count {
   margin-left: auto;
@@ -1042,7 +1047,7 @@ co-rich-text-editor {
 }
 
 .co-rte-bubble__overflow-item--danger {
-  color: var(--co-color-status-error, #aa2e1b);
+  color: var(--co-semantic-text-error, var(--co-color-status-error, #aa2e1b));
 }
 .co-rte-bubble__overflow-item--danger:hover {
   background: rgba(170, 46, 27, 0.06);
@@ -1384,3 +1389,20 @@ co-rich-text-editor {
   outline: none !important;
 }
 
+
+/* Marca de requerido: la misma de todos los campos co-* (utils/requiredMark). */
+.co-field-required {
+  margin-left: 2px;
+  color: var(--co-semantic-text-error, var(--co-color-status-error));
+}
+
+.co-field-required__caption {
+  margin-left: 4px;
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-12);
+  font-weight: 400;
+}
+
+.co-field-required__caption::before {
+  content: var(--co-field-required-text, ' (required)');
+}

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import * as RichText from "@prolibu-suite/cobalt-rich-text";
 import { getRichTextStrings } from "../../utils/richTextI18n";
 import { applyExternalValue, buildOutput, EchoGuard, parseEditorValue, parseFeatures, syncImageLayouts, syncToolbarEditor } from "../../utils/rich-text-host";
+import { RequiredMark } from "../../utils/requiredMark";
 /**
  * Rich text editor backed by Tiptap v3.
  *
@@ -85,6 +86,16 @@ export class CoRichTextEditor {
         this.applyingExternal = false;
         this.rt = RichText;
         this.imgLayoutVisible = false;
+        /** `componentDidLoad` ya corrió: desde acá un `connectedCallback` es una RE-conexión. */
+        this.loaded = false;
+        this.onToolbarMousedown = () => {
+            this.closeBubbleDropdowns();
+        };
+        this.onToolbarPopoverChange = (e) => {
+            var _a;
+            const open = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.open;
+            this.suppressBubble(!!open);
+        };
         this.handleUpdate = (editor) => {
             this.refreshCharCount();
             if (this.applyingExternal)
@@ -119,20 +130,38 @@ export class CoRichTextEditor {
             }, 100);
         };
     }
+    connectedCallback() {
+        // El host volvió al documento DESPUÉS de un teardown (estuvo fuera más de un
+        // tick). `componentDidLoad` no vuelve a correr: sin esto el editor quedaba
+        // muerto y `getEditorInstance()` devolvía null.
+        if (this.loaded && !this.editor)
+            this.mountEditor();
+    }
     async componentDidLoad() {
+        this.mountEditor();
+        this.loaded = true;
+    }
+    /** Crea el editor Tiptap sobre `contentEl`. Corre en la carga y al reconectar. */
+    mountEditor() {
         var _a, _b;
         if (!this.contentEl)
             return;
+        const remount = this.loaded;
         // Create bubble element imperatively so Stencil VDOM cannot interfere
         // with BubbleMenu's DOM management (it calls element.remove/appendChild).
         const showToolbar = this.resolvedToolbar !== 'none' && !this.readonly && !this.disabled;
         if (showToolbar) {
             this.bubbleEl = this.createBubbleElement();
         }
+        // Al recrear, la instantánea del teardown (lo tipeado, que el padre puede no
+        // haber devuelto por `value`) gana; un `value` nuevo mientras tanto la borra.
+        const fromValue = this.detachedContent === undefined;
+        const content = fromValue ? parseEditorValue(this.value) : this.detachedContent;
+        this.detachedContent = undefined;
         this.editor = this.rt.createEditor({
             preset: this.preset,
             element: this.contentEl,
-            content: parseEditorValue(this.value),
+            content,
             editable: !this.disabled && !this.readonly,
             placeholder: this.placeholder,
             maxLength: this.maxLength,
@@ -172,32 +201,47 @@ export class CoRichTextEditor {
             this.updateImageLayoutBar();
         });
         // Clicking the toolbar closes bubble popups (link form, panels, etc.)
+        // Handlers con referencia estable: al recrear el editor, el mismo
+        // addEventListener sobre el mismo toolbar es un no-op (no se duplican).
         if (this.bubbleEl && this.toolbarEl) {
-            this.toolbarEl.addEventListener('mousedown', () => {
-                this.closeBubbleDropdowns();
-            });
+            this.toolbarEl.addEventListener('mousedown', this.onToolbarMousedown);
             // Hide the selection bubble while a toolbar dropdown/popover is open so
             // the two never overlap in the same space (the bubble lives inside the
             // content area, right where toolbar dropdowns expand into).
-            this.toolbarEl.addEventListener('coPopoverChange', (e) => {
-                var _a;
-                const open = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.open;
-                this.suppressBubble(!!open);
-            });
+            this.toolbarEl.addEventListener('coPopoverChange', this.onToolbarPopoverChange);
         }
-        this.echo.seed((_b = this.value) !== null && _b !== void 0 ? _b : null);
+        // Recreado desde la instantánea: el guard anti-eco conserva el último output
+        // emitido (re-sembrarlo con `value` haría que un eco tardío del padre
+        // re-aplicara el contenido). Desde `value` (carga o valor nuevo), se siembra.
+        if (fromValue)
+            this.echo.seed((_b = this.value) !== null && _b !== void 0 ? _b : null);
         this.ready = true;
         this.refreshCharCount();
         this.syncToolbar();
         this.coReady.emit();
-        if (this.autofocus)
+        if (this.autofocus && !remount)
             this.editor.commands.focus();
         // Tag every image container with its layout mode so the CSS rules apply.
         // Runs even without the layout toolbar (readonly/disabled viewers).
         requestAnimationFrame(() => this.syncImageLayouts());
     }
     disconnectedCallback() {
-        var _a, _b, _c, _d;
+        // Un MOVIMIENTO del host (quitar + insertar en el mismo tick: el drawer que
+        // pasa de plano a split mueve el scrollport) también dispara este callback.
+        // Destruir en el acto dejaba el editor muerto. El teardown se difiere un
+        // microtask y solo corre si el host sigue fuera del documento; si volvió
+        // más tarde, `connectedCallback` lo recrea.
+        queueMicrotask(() => {
+            // Sin `window` el realm ya se desmontó (fin del entorno de pruebas): no hay nada que
+            // liberar y el `destroy()` de Tiptap reventaría leyendo `window`.
+            if (typeof window === 'undefined')
+                return;
+            if (!this.el.isConnected)
+                this.teardownEditor();
+        });
+    }
+    teardownEditor() {
+        var _a, _b, _c;
         clearTimeout(this.blurTimeout);
         clearTimeout(this.bubbleLockTimer);
         (_a = this.bubbleStyleObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
@@ -207,10 +251,17 @@ export class CoRichTextEditor {
             document.removeEventListener('mouseup', this.bubbleDragEndHandler);
         if (this.bubbleOutsideClickHandler)
             document.removeEventListener('click', this.bubbleOutsideClickHandler, true);
-        (_b = this.editor) === null || _b === void 0 ? void 0 : _b.destroy();
+        if (this.editor) {
+            // Instantánea de lo tipeado para recrear igual si el host vuelve.
+            this.detachedContent = this.editor.isEmpty ? null : this.editor.getJSON();
+            this.editor.destroy();
+        }
         this.editor = undefined;
-        (_c = this.bubbleEl) === null || _c === void 0 ? void 0 : _c.remove();
-        (_d = this.imgLayoutEl) === null || _d === void 0 ? void 0 : _d.remove();
+        (_b = this.bubbleEl) === null || _b === void 0 ? void 0 : _b.remove();
+        this.bubbleEl = undefined;
+        (_c = this.imgLayoutEl) === null || _c === void 0 ? void 0 : _c.remove();
+        this.imgLayoutEl = undefined;
+        this.imgLayoutVisible = false;
     }
     componentDidRender() {
         this.syncToolbar();
@@ -224,7 +275,13 @@ export class CoRichTextEditor {
         }
     }
     onValueChange(next) {
-        if (!this.editor || this.applyingExternal)
+        // Sin editor tras un teardown: el valor nuevo gana sobre la instantánea al recrear.
+        if (!this.editor) {
+            if (this.loaded)
+                this.detachedContent = undefined;
+            return;
+        }
+        if (this.applyingExternal)
             return;
         const incoming = next !== null && next !== void 0 ? next : null;
         // El padre suele devolver nuestro propio output (JSON o HTML): re-aplicarlo
@@ -2007,11 +2064,11 @@ export class CoRichTextEditor {
         const showToolbar = this.resolvedToolbar !== 'none' && !this.readonly && !this.disabled;
         const showCount = this.showCharacterCount || this.maxLength != null;
         const bottom = this.toolbarPosition === 'bottom';
-        const toolbar = showToolbar && (h("co-rich-text-toolbar", { key: '6bcb6ab2d8023c96062ce4aa64ef6450357c22e7', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, position: this.toolbarPosition, disabled: this.disabled || this.readonly, locale: this.locale, attachmentsEnabled: this.attachmentsEnabled, attachmentAccept: this.attachmentAccept, onCoAttachmentsSelected: (e) => {
+        const toolbar = showToolbar && (h("co-rich-text-toolbar", { key: '7b2112db75bb679695e9bb58385d193e90d3678b', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, position: this.toolbarPosition, 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) }));
-        return (h("div", { key: 'acb670aca986206aa8cae2960a9ace5723d5b710', class: {
+        return (h("div", { key: '8b848da977b08aa7f3466fa14403155ddc1c1d66', class: {
                 'co-rich-text-editor': true,
                 'co-rich-text-editor--focused': this.hasFocus,
                 'co-rich-text-editor--disabled': this.disabled,
@@ -2020,7 +2077,7 @@ export class CoRichTextEditor {
                 [`co-rich-text-editor--${this.status}`]: this.status !== 'default',
                 'co-rich-text-editor--flat': this.variant === 'flat',
                 'co-rich-text-editor--toolbar-bottom': bottom,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '0bbda76dde378f9f9dc49593409036efa0306982', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: '328d770182eeba4010337e32359f6e1f96c32e54', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: 'd8b3ac25a32189686226b9fe6da311f6672ca331', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'ed9d88e6e62a3defe9f302d252eb7f8dd33d4a0a', class: "co-rich-text-editor__frame" }, !bottom && toolbar, h("div", { key: '96625d0fbbc619e7a7f7812c83d1e86df8086da4', class: "co-rich-text-editor__box" }, h("div", { key: '77ce10f2902b9e758c18dabd5e91c5544c0cdd54', 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("slot", { key: '6c2fbaa3625889c4bb6a493be037f4c64b60fece', name: "content-end" }), bottom && (h("div", { key: 'eda6a58e138c36dc412a84aa995dfcbfd6d7e93f', class: "co-rich-text-editor__toolbar-row", part: "toolbar-row" }, toolbar, h("slot", { key: 'f8b01d2d2b27851d474bb174e4e42b45efd96758', name: "toolbar-end" })))), h("div", { key: 'fdffcf44d4d181d30cc6f48e073e3a18c18f48ca', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '52ab70e42dad525b1fc1c4c27bdb98bedaf5cd90', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: 'c7e79a0292c51c9cf7927eb504401be5fd68b767', name: this.helperIcon, size: 14 }), h("span", { key: '4a09b04c257f3cd605f9b753d12c118312cb65fc' }, this.helperText))), showCount && (h("span", { key: '7c25580b095af4d0ef11e77d13b07cedbf3e61c4', class: "co-rich-text-editor__count", ref: (el) => (this.charCountEl = el) }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'f35d59f312dabcd2b384e958a45bb7ac4a33f7bb', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: 'e7b2d47de7356e4a89fabf925255dbf0d25fc8e9', class: "co-rich-text-editor__label", part: "label" }, this.label, h(RequiredMark, { key: 'f56500b0382d9d12c7f78b4448aab7cc748271be', required: this.required })), this.secondaryLabel && (h("span", { key: 'e305aecd4fee9963221210ac076791f456aad91c', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: '284ff5c06606efef9a06de80478acc57868229eb', class: "co-rich-text-editor__frame" }, !bottom && toolbar, h("div", { key: '145b244c505ae5374bd847855978da02baa878cc', class: "co-rich-text-editor__box" }, h("div", { key: 'c5f02991df3e712a3e6a0163415a75c5e91e4384', 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("slot", { key: '060e3e5bcda76b403357ada26950c9f50a71076e', name: "content-end" }), bottom && (h("div", { key: '2ec4329cfc09714a78caab5ca774f08af2984729', class: "co-rich-text-editor__toolbar-row", part: "toolbar-row" }, toolbar, h("slot", { key: '806f94a2d924df1b33d5fcf5d28279b093f69845', name: "toolbar-end" })))), h("div", { key: '8fcb92d7f3404c7458f95fc578fbb579ecb4b5e7', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: 'b1b664ceb090e940cadc3aa782eb074e6517146a', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: 'a8db33f94d1aec0bc62bd9ee709d4cff914fc51c', name: this.helperIcon, size: 14 }), h("span", { key: 'be99a15b919ea82668da83854735b80eaf03ebf7' }, this.helperText))), showCount && (h("span", { key: 'dfde31e7c4f62fc9cf9fc3654f5eb6a2377dcf9a', 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() {
@@ -2671,7 +2728,7 @@ export class CoRichTextEditor {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted once the editor is mounted and ready."
+                    "text": "Emitted once the editor is mounted and ready. Se RE-emite si el editor se\nrecrea al reconectar el host tras un teardown: quien guarde la instancia de\n`getEditorInstance()` debe volver a pedirla en cada `coReady`."
                 },
                 "complexType": {
                     "original": "void",

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

@@ -227,8 +227,10 @@
   color: #fff;
 }
 
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
 .co-rich-text-toolbar__popover-btn--danger {
-  color: var(--co-color-status-error, #aa2e1b);
+  color: var(--co-semantic-text-error, var(--co-color-status-error, #aa2e1b));
   border-color: var(--co-color-status-error, #aa2e1b);
 }
 

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

@@ -1,6 +1,15 @@
 import { h } from "@stencil/core";
 import { toolbarItems, COLOR_PALETTE, TABLE_CONTEXT_ITEMS } from "@prolibu-suite/cobalt-rich-text";
 import { getRichTextStrings } from "../../utils/richTextI18n";
+import { panelShiftX, visibleArea } from "./panelFit";
+/** Paneles que cuelgan de un botón (ver co-rich-text-toolbar.css): los que `fitOpenPanel` encaja. */
+const PANEL_SELECTOR = [
+    '.co-rich-text-toolbar__popover',
+    '.co-rich-text-toolbar__dropdown',
+    '.co-rich-text-toolbar__color-picker',
+    '.co-rich-text-toolbar__table-picker',
+    '.co-rich-text-toolbar__listpicker',
+].join(', ');
 /**
  * Formatting toolbar for co-rich-text-editor. Receives the Tiptap editor
  * instance via the `editor` JS property, runs commands, and reflects active
@@ -384,6 +393,37 @@ export class CoRichTextToolbar {
             return;
         this.coPopoverChange.emit({ open: !!next });
     }
+    componentDidRender() {
+        this.fitOpenPanel();
+    }
+    /**
+     * Corre el panel abierto hacia la izquierda si se sale del área VISIBLE
+     * (viewport ∩ ancestros que recortan, ver panelFit.ts). Los paneles anclan a
+     * `left:0` de su botón por CSS: en una columna angosta (inspector del
+     * cotizador) el de link/listas se cortaba y el contenedor ganaba scroll-x.
+     * Se mide tras cada render con el panel abierto (su contenido cambia: menú →
+     * URL de la imagen), reseteando antes el corrimiento anterior.
+     */
+    fitOpenPanel() {
+        var _a;
+        if (!this.openPopover || typeof window === 'undefined')
+            return;
+        const panels = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(PANEL_SELECTOR);
+        if (!(panels === null || panels === void 0 ? void 0 : panels.length))
+            return;
+        const viewport = document.documentElement.clientWidth || window.innerWidth; // sin la scrollbar de la página
+        const area = visibleArea(this.el, viewport, (node) => getComputedStyle(node).overflowX);
+        panels.forEach((panel) => {
+            panel.style.translate = '';
+            const box = panel.getBoundingClientRect();
+            if (!box.width)
+                return;
+            const scale = panel.offsetWidth ? box.width / panel.offsetWidth || 1 : 1;
+            const dx = panelShiftX(box, area);
+            if (dx)
+                panel.style.translate = `${dx / scale}px 0`;
+        });
+    }
     disconnectedCallback() {
         var _a;
         (_a = this.editor) === null || _a === void 0 ? void 0 : _a.off('transaction', this.onTransaction);

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

@@ -0,0 +1,63 @@
+/**
+ * Encaje horizontal de los paneles de la toolbar (link, listas, color, tabla,
+ * callouts). Cuelgan de su botón por CSS (`position:absolute; left:0`), así que
+ * en una columna angosta —el inspector del ítem del cotizador— se salían por la
+ * derecha: los recortaba el `overflow` del contenedor, que además ganaba scroll
+ * horizontal y corría el editor. Aquí se calcula cuánto correrlos para que
+ * queden dentro del área VISIBLE (viewport ∩ ancestros que recortan).
+ */
+/** Aire mínimo contra el borde del área visible. */
+export const PANEL_EDGE_GAP = 8;
+/**
+ * Desplazamiento en px de viewport (negativo = a la izquierda) para que `panel`
+ * entre en `area`. Si el panel es más ancho que el área, gana su borde
+ * IZQUIERDO (el comienzo del contenido: el input, la primera fila).
+ */
+export function panelShiftX(panel, area, gap = PANEL_EDGE_GAP) {
+    let dx = 0;
+    if (panel.right > area.right - gap)
+        dx = area.right - gap - panel.right;
+    if (panel.left + dx < area.left + gap)
+        dx = area.left + gap - panel.left;
+    return dx;
+}
+const CLIPS = /(auto|scroll|hidden|clip)/;
+/**
+ * Área visible para un nodo: el viewport recortado por cada ancestro con
+ * `overflow-x` que recorta, cruzando shadow roots (el toolbar vive dentro del
+ * shadow del editor, que vive en la página).
+ */
+export function visibleArea(node, viewportWidth, overflowX) {
+    const area = { left: 0, right: viewportWidth };
+    let current = parentAcrossShadow(node);
+    while (current) {
+        if (CLIPS.test(overflowX(current))) {
+            const inner = innerBox(current);
+            area.left = Math.max(area.left, inner.left);
+            area.right = Math.min(area.right, inner.right);
+        }
+        current = parentAcrossShadow(current);
+    }
+    return area;
+}
+/**
+ * Lo que de verdad se ve de un contenedor que recorta: SIN su borde ni su
+ * scrollbar vertical (el rect los incluye; con el rect, el panel quedaba 3 px
+ * debajo de la scrollbar y el contenedor seguía con scroll-x). En px de
+ * viewport: `client*` son px CSS, se escalan si un ancestro tiene transform.
+ */
+function innerBox(node) {
+    const box = node.getBoundingClientRect();
+    if (node.clientWidth === undefined)
+        return box;
+    const scale = node.offsetWidth && box.width ? box.width / node.offsetWidth : 1;
+    const left = box.left + (node.clientLeft || 0) * scale;
+    return { left, right: left + node.clientWidth * scale };
+}
+function parentAcrossShadow(node) {
+    var _a, _b;
+    if (node.parentElement)
+        return node.parentElement;
+    const root = (_a = node.getRootNode) === null || _a === void 0 ? void 0 : _a.call(node);
+    return (_b = root === null || root === void 0 ? void 0 : root.host) !== null && _b !== void 0 ? _b : null;
+}

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

@@ -53,7 +53,8 @@
 }
 
 .co-rich-text-viewer a {
-  color: var(--co-color-primary-azul);
+  /* Tinta de enlace/activo: text-link gira con el tema (azul primitivo = 3,8:1 sobre gray-800). */
+  color: var(--co-semantic-text-link, var(--co-color-primary-azul));
   text-decoration: underline;
 }
 

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

@@ -16,11 +16,11 @@ export class CoRow {
         this.size = 'sm';
     }
     render() {
-        return (h("div", { key: '077025b2a73f8440400c27923f1d3a7e38cfb346', class: {
+        return (h("div", { key: 'd052e6dba474ea6f1f136d677ebc538557685f07', class: {
                 'co-row': true,
                 [`co-row--${this.position}`]: true,
                 [`co-row--${this.size}`]: true,
-            }, part: "row" }, h("div", { key: '2ffc2d8e5c0ab4779a5599736c877097039fd47f', class: "co-row__prefix" }, h("slot", { key: 'b6cb185d5f1bb577f78d19b9f78fce1be52c5252', name: "prefix" })), h("div", { key: 'f2a34f5554a832d6ae5030bb1138488928025d43', class: "co-row__content" }, h("slot", { key: 'a8ad430becc2e285e4fec43b16a6e29ba9088f8a' })), h("div", { key: '7fef31caadd3fb43571286a2ee13cf42ebbf8d78', class: "co-row__suffix" }, h("slot", { key: '63465e56defc9a0c11bc5a1eba46ac7f150d67fb', name: "suffix" }))));
+            }, part: "row" }, h("div", { key: '539f84f2fa75b7f21e434c59e712e37ee9ec8c97', class: "co-row__prefix" }, h("slot", { key: '53c1587065532465adc5a57e53486e1f95f6d62c', name: "prefix" })), h("div", { key: '6ac141b5b74f94ebea99ba3be6c7ec01e7c0303c', class: "co-row__content" }, h("slot", { key: '8e9312d7dbe9c085880a686735ac45a600e98802' })), h("div", { key: '3b7ae09f7dc1db532c76c2439d5632e59d16f916', class: "co-row__suffix" }, h("slot", { key: 'd42cc77971fb7c8e435538ce77192217f58a6c1b', name: "suffix" }))));
     }
     static get is() { return "co-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -160,7 +160,7 @@ export class CoSegmentedBar {
                     "references": {
                         "CoSegment": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-segmented-bar/co-segmented-bar.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-segmented-bar/co-segmented-bar.tsx",
                             "id": "src/components/co-segmented-bar/co-segmented-bar.tsx::CoSegment"
                         }
                     }

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

@@ -804,7 +804,9 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   align-items: center;
   gap: var(--co-spacing-xs);
   padding: var(--co-spacing-xxs) var(--co-spacing-sm2);
-  background: var(--co-color-gray-100);
+  /* surface-control = gray-100 en claro y gira en oscuro: con la primitiva la etiqueta
+     (text-default, blanca en oscuro) quedaba blanco sobre blanco. */
+  background: var(--co-semantic-surface-control);
   border-radius: var(--co-border-radius-full);
   font-size: var(--co-font-size-14);
   line-height: 1;
@@ -826,7 +828,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   border: none;
   background: transparent;
   cursor: pointer;
-  color: var(--co-color-gray-500);
+  color: var(--co-semantic-text-muted);
   transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   flex-shrink: 0;
 }
@@ -873,7 +875,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   cursor: not-allowed;
 }
 
-.co-select--error .co-select__trigger { border-color: var(--co-semantic-status-error); }
+/* Borde de error de CAMPO por --co-semantic-border-error: gira con el tema (status-error es
+   relleno fijo y como trazo en oscuro daba 2,94:1). En claro vale status-error (idéntico).
+   Fallback: la primitiva de hoy, hasta publicar tokens. */
+.co-select--error .co-select__trigger { border-color: var(--co-semantic-border-error, var(--co-semantic-status-error)); }
 .co-select--success .co-select__trigger { border-color: var(--co-semantic-status-success); }
 .co-select--warning .co-select__trigger { border-color: var(--co-color-status-review); }
 .co-select--info .co-select__trigger { border-color: var(--co-semantic-status-info); }
@@ -1033,9 +1038,11 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   --os-padding-axis: 2px;
   --os-track-bg: transparent;
   --os-handle-border-radius: var(--co-border-radius-full);
-  --os-handle-bg: var(--co-color-opacity-negro-16);
-  --os-handle-bg-hover: var(--co-color-opacity-negro-25);
-  --os-handle-bg-active: var(--co-color-opacity-negro-50);
+  /* border-default/field/strong = negro 16/25/50 en claro; en oscuro giran a blanco (el asa
+     negra no se veía sobre el panel oscuro). */
+  --os-handle-bg: var(--co-semantic-border-default);
+  --os-handle-bg-hover: var(--co-semantic-border-field);
+  --os-handle-bg-active: var(--co-semantic-border-strong);
   --os-handle-min-size: 24px;
 }
 
@@ -1118,17 +1125,19 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   line-height: 1;
 }
 
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
 .co-select__helper--error .co-select__helper-icon,
-.co-select__helper--error .co-select__helper-text { color: var(--co-semantic-status-error); }
+.co-select__helper--error .co-select__helper-text { color: var(--co-semantic-text-error, var(--co-semantic-status-error)); }
 
 .co-select__helper--success .co-select__helper-icon,
-.co-select__helper--success .co-select__helper-text { color: var(--co-semantic-status-success); }
+.co-select__helper--success .co-select__helper-text { color: var(--co-semantic-text-success, var(--co-semantic-status-success)); }
 
 .co-select__helper--warning .co-select__helper-icon,
-.co-select__helper--warning .co-select__helper-text { color: var(--co-color-status-review); }
+.co-select__helper--warning .co-select__helper-text { color: var(--co-semantic-text-warning, var(--co-color-status-review)); }
 
 .co-select__helper--info .co-select__helper-icon,
-.co-select__helper--info .co-select__helper-text { color: var(--co-semantic-status-info); }
+.co-select__helper--info .co-select__helper-text { color: var(--co-semantic-text-info, var(--co-semantic-status-info)); }
 
 /* ── Horizontal layout: label left; control + helper stacked right ──
    Set --co-field-label-width on a container to align labels across fields. */
@@ -1156,9 +1165,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   min-width: 0;
 }
 
+/* Asterisco de requerido: tinta --co-semantic-text-error (gira con el tema). */
 .co-field-required {
   margin-left: 2px;
-  color: var(--co-color-status-error);
+  color: var(--co-semantic-text-error, var(--co-color-status-error));
 }
 
 .co-field-required__caption {
@@ -1242,7 +1252,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 /* Caret gray-600 en este layout puntual (Figma 6-#10), pisando el
    default text-default de arriba. */
 .co-select--inline-help .co-select__caret {
-  color: var(--co-color-gray-600);
+  color: var(--co-semantic-text-secondary); /* gray-600 en claro; gira en oscuro */
 }
 
 /* ── menu-surface="dark" ──────────────────────────────────────────

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

@@ -481,7 +481,9 @@ export class CoSelect {
         var _a;
         const active = document.activeElement;
         if (active === this.el || this.el.contains(active)) {
-            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+            // Sin scroll: si el panel se cerró porque el campo salió de la vista de su scroller
+            // (co-popover), devolverle el foco llevaba al usuario de vuelta arriba del formulario.
+            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
         }
     }
     // OverlayScrollbars: floating, auto-hide handle that overlays the content (no
@@ -547,7 +549,7 @@ export class CoSelect {
         const activeOptionId = this.isOpen && this.activeIndex >= 0 && this.activeIndex < options.length
             ? this.optionId(this.activeIndex)
             : undefined;
-        return (h("div", { key: '12cb506f80422c39f8f5a17b81afa6c01831f237', class: {
+        return (h("div", { key: 'd121ba9ec0b29e6e70702185d055f9f2590fcf60', class: {
                 'co-select': true,
                 'co-select--open': this.isOpen,
                 'co-select--disabled': this.disabled,
@@ -556,22 +558,22 @@ export class CoSelect {
                 'co-select--flat': this.variant === 'flat',
                 'co-select--soft': this.variant === 'soft',
                 'co-select--inline-help': this.labelStyle === 'inline-help',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'bbb454e9d0ab08fd3abf5462711654c6eb8fe253', class: "co-select__labels" }, this.label && h("label", { key: '2dbf39a9e4fca24b95777078ecb6fea060aa2e19', class: "co-select__label" }, this.label, h(RequiredMark, { key: 'f5a62c06aa12a5556fc78d93918d673982183dfa', required: this.required })), this.secondaryLabel && h("span", { key: '2082ba20405dee16a08d35ec1ff67b59294056a0', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '4f7e00909286922ff2b9d05f1ee4f42f8bc7aed9', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4,
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'b5ba06d1b361ba3f0488b3835e2ae9fbc723ee3f', class: "co-select__labels" }, this.label && h("label", { key: '8131f52d757b71d694ddbb5fe2e83e0762237627', class: "co-select__label" }, this.label, h(RequiredMark, { key: '31de4113e6cc17e7be6ecf82cf4d9108878cad67', required: this.required })), this.secondaryLabel && h("span", { key: 'd499ef261e4c8b375e6058eae2b18fa9e755008b', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '2cb6fc46ec1ecab4e1ccdae6a44d9394201fb339', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4,
             // menuSurface="dark": el panel oscuro pinta su propio chrome (fondo
             // negro, radio xs, sin borde ni sombra — Figma 4750:23242), así que
             // el co-popover va `bare` para no sumar el borde hairline ni la
             // sombra del panel claro (y cualquier --co-popover-shadow heredada
             // del contexto). En "light" (default) no cambia nada.
-            bare: this.menuSurface === 'dark', onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '8537fcefbd02707af785ad623bcb1f19b276d3c4', slot: "trigger", class: "co-select__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || this.ariaLabelText || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (h("co-icon", { key: '6714adb30bb2c24824cf80048b579a05825652b9', name: this.iconLeft, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16, class: "co-select__icon" })), ((_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.image) && (h("img", { key: '8c0c6cca536a5edba4e3caa50ecd196f9e70117c', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
+            bare: this.menuSurface === 'dark', onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '4e85e1c3256c40b93336fc282afaf5cb684f3af0', slot: "trigger", class: "co-select__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || this.ariaLabelText || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (h("co-icon", { key: 'b70cb41a5da6e4b0fb5c70d88658d9a15b8ff730', name: this.iconLeft, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16, class: "co-select__icon" })), ((_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.image) && (h("img", { key: 'e594304493fc463f48c35a8a7526488664d7300e', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
             const opt = this.parsedOptions.find((o) => o.value === v);
             return (h("span", { class: "co-select__chip", key: v }, h("span", { class: "co-select__chip-label" }, opt ? opt.label : v), h("button", { class: "co-select__chip-remove", type: "button", tabIndex: -1, "aria-label": "Remove", onClick: (e) => {
                     e.stopPropagation();
                     this.handleOptionClick(v);
                 } }, h("co-icon", { name: "x", size: 12 }))));
-        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '65f1295511998e7ec9685ee45433e01c14ae65df', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '23416924a88739bf6326095298bfaaeabbe980e1', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: 'd4c3c23b8ceb6ef0b918348e8b0f724051380681', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: 'd591730000ed4e58f6c2474b58949ae15cf65593', class: {
+        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '73a50ae2aa6c1a9f449a5abb9851fdef231e7ffc', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'ade7609dc136ec20a0412fd7e460a95e50d516e4', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '7b5bba8fb8fca31613879ab8743f884b1bd71802', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: '2e6bd8187439a7920fe6ad151886da76f79426fc', class: {
                 'co-select__dropdown': true,
                 'co-select__dropdown--dark': this.menuSurface === 'dark',
-            } }, this.isOpen && this.searchable && (h("div", { key: 'd663fdb315d997ed2325a5c385bbd5728bebdaa1', class: "co-select__search" }, h("co-icon", { key: '13d5e0bd54b6dfa6d926f7e9ec2057f814720e16', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: 'e7edfe009febe2c681c47fa92105b62c868b53d5', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, onInput: this.handleSearchInput, onKeyDown: this.handleNavKeyDown, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: 'bd0befdaba2cbead771171b609e2021c714ea247', class: "co-select__empty" }, this.emptyText)), h("div", { key: '0e395475bba6b693419986ff2cf582192a15a2e6', class: "co-select__options", id: CoSelect.LISTBOX_ID, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
+            } }, this.isOpen && this.searchable && (h("div", { key: '75b3f339a256945a1c5153453033ab3ad0b5902e', class: "co-select__search" }, h("co-icon", { key: '95f2a28646ffba6416fe7582a360b7c6b4ce58a9', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '8e539a698da9d3ff68e3cce544cac9da4c285afa', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, onInput: this.handleSearchInput, onKeyDown: this.handleNavKeyDown, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: 'b0ed2db9c7e397dae2f59cf3f11d9a2ccdf27ab8', class: "co-select__empty" }, this.emptyText)), h("div", { key: 'ec2381d0de5d9a928510d0e15b7ca78b449844b1', class: "co-select__options", id: CoSelect.LISTBOX_ID, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
             const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
             return (
             // Los wrappers del virtualizador van `presentation` para que las
@@ -587,7 +589,7 @@ export class CoSelect {
                         'co-select__option--active': index === this.activeIndex,
                     }, onClick: () => !isDisabled && this.handleOptionClick(opt.value), onPointerMove: (e) => this.handleOptionPointerMove(e, index) }, this.menuSurface === 'dark' && (h("span", { class: "co-select__option-check-slot" }, isSelected && (h("co-icon", { name: "check", size: 12, class: "co-select__option-check co-select__option-check--leading" })))), 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 && this.menuSurface !== 'dark' && (h("co-icon", { name: "check", size: 16, class: "co-select__option-check" }))));
             }))));
-        })()), this.isOpen && this.showFooter && (h("co-list-footer", { key: 'b5991f9a23e145990ba8d1a01f67c1744165aa36', class: "co-select__footer", primaryLabel: this.footerPrimaryLabel, primaryIcon: "check", onCoPrimary: this.handleFooterPrimary })))), this.helperText && (h("div", { key: '04d08f975108f5f86dcbf4078271cbb16c47f4c6', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '26ab3e89c81d4c64aef536f561921d5c3f08ea62', name: this.statusIcon, size: 14, class: "co-select__helper-icon" }), h("span", { key: '0743ba35903d666a3ab4598e4639e8c0f94a190b', class: "co-select__helper-text" }, this.helperText)))));
+        })()), this.isOpen && this.showFooter && (h("co-list-footer", { key: 'e46141c876fdd0e8f05a14318f969ed370c2e201', class: "co-select__footer", primaryLabel: this.footerPrimaryLabel, primaryIcon: "check", onCoPrimary: this.handleFooterPrimary })))), this.helperText && (h("div", { key: '13b7b84f7241bed5afdfd70c1867045ae4fcd820', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '0f4a854f367a34b7a314ba0a768d02a35b03df07', name: this.statusIcon, size: 14, class: "co-select__helper-icon" }), h("span", { key: '965b58e53ac2bfd55c4d416e07062067c9f686b7', class: "co-select__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-select"; }
     static get encapsulation() { return "shadow"; }
@@ -846,7 +848,7 @@ export class CoSelect {
                     "references": {
                         "SelectOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-select/co-select.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-select/co-select.tsx",
                             "id": "src/components/co-select/co-select.tsx::SelectOption"
                         }
                     }

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

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

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

@@ -18,10 +18,10 @@ export class CoSidebar {
         this.mode = 'full';
     }
     render() {
-        return (h("nav", { key: 'de782225d3dc1ef1def8af333a2a81809b50a84d', class: {
+        return (h("nav", { key: '757c703d5b48b3a0a9279efb72fcb4e75766cb70', class: {
                 'co-sidebar': true,
                 [`co-sidebar--${this.mode}`]: true,
-            }, part: "sidebar" }, h("div", { key: '7c4466bf0d14cba9ca008d0a1cf9c28972726301', class: "co-sidebar__header", part: "header" }, h("slot", { key: '1389f2fa757adcd7b97586534de4144f9b08d1a7', name: "header" })), h("div", { key: '298ea9f0183bb31b0a4b6d83053029b8f181fb7d', class: "co-sidebar__body", part: "body" }, h("slot", { key: 'f1c0c4b26b4be0441048f7f961529ce5371d4c6d' })), h("div", { key: '62666b4e1b9591c70196fccb73caf683925de906', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: '83566f1745b802296b7db7b90032a3ca13849126', name: "footer" }))));
+            }, part: "sidebar" }, h("div", { key: 'ca01fa4c56c52459b7be32e19111bd183b1c7824', class: "co-sidebar__header", part: "header" }, h("slot", { key: '7bb16f14df6569ae262b776813525ca5f827f485', name: "header" })), h("div", { key: 'd3a20aae579d1af533834d5ee98f4e597a879688', class: "co-sidebar__body", part: "body" }, h("slot", { key: 'eff38bf3159dcc554310924ba691631733f09a8e' })), h("div", { key: '79da90c337b0c566013db7c88bd34901862edb63', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: '6b183536a98528a1f01978ea9ed72538c3dcc99a', name: "footer" }))));
     }
     static get is() { return "co-sidebar"; }
     static get encapsulation() { return "shadow"; }