@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -9,6 +9,8 @@ import { getRichTextStrings } from "../../utils/richTextI18n";
  *
  * @part toolbar - The toolbar container
  * @part button - A toolbar button
+ *
+ * Wrapper Vue: `CoRichTextToolbar` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoRichTextToolbar {
     constructor() {
@@ -17,12 +19,15 @@ export class CoRichTextToolbar {
         /** Placement inside co-rich-text-editor. `bottom` drops the toolbar's own bottom
          * border/background/rounding: the editor's toolbar row paints the separator. */
         this.position = 'top';
+        /** Deshabilita la barra: sus botones no ejecutan acciones sobre el editor. */
         this.disabled = false;
         /** BCP-47 locale for UI strings (e.g. 'en', 'es-CO', 'pt-BR'). Default English. */
         this.locale = 'en';
         /** Shows the attachment button (compact-assets variant). The editor never
          *  owns the attachment list — it only emits the picked files. */
         this.attachmentsEnabled = false;
+        /** Muestra «Encabezado» (variante document). co-document-editor lo apaga mientras se edita la banda. */
+        this.documentHeaderEnabled = false;
         this.items = [];
         /** Bumped on every editor transaction to refresh active state. */
         this.tick = 0;
@@ -176,10 +181,18 @@ export class CoRichTextToolbar {
                         chain.outdent().run();
                     }
                     break;
+                case 'signature':
+                    chain.insertSignatureSlot().run();
+                    break;
+                case 'documentHeader':
+                    // El editor de documento abre la banda: la barra solo avisa.
+                    this.coAction.emit({ action: 'documentHeader' });
+                    return;
                 case 'attachment':
                     this.triggerAttachmentFileUpload();
                     return; // no editor command — the host owns the files
                 case 'link':
+                case 'field':
                 case 'image':
                 case 'youtube':
                 case 'iframe':
@@ -226,6 +239,7 @@ export class CoRichTextToolbar {
             addRowBefore: s.addRowBefore, deleteRow: s.deleteRow,
             deleteTable: s.deleteTable, mergeCells: s.mergeCells,
             splitCell: s.splitCell, toggleHeaderRow: s.headerRow,
+            field: s.field, signature: s.signature, documentHeader: s.documentHeader,
         };
         return (_a = map[item.action]) !== null && _a !== void 0 ? _a : item.label;
     }
@@ -244,6 +258,8 @@ export class CoRichTextToolbar {
                 return s.subtitle;
             if (level === 3)
                 return s.heading3;
+            if (level === 4)
+                return s.heading4;
         }
         if (opt.action === 'bulletStyle') {
             const m = { disc: s.disc, circle: s.circle, square: s.square };
@@ -280,6 +296,9 @@ export class CoRichTextToolbar {
         document.addEventListener('click', this.handleDocumentClick, true);
     }
     componentWillLoad() {
+        // H3: el harness de specs no aplica los defaults de clase de @State; en
+        // producción es neutro (mismo valor inicial).
+        this.tableContextItems = [];
         this.items = this.resolveItems(this.variant);
         this.colorPalette = COLOR_PALETTE;
         this._tableContextItems = TABLE_CONTEXT_ITEMS;
@@ -290,6 +309,23 @@ export class CoRichTextToolbar {
     onAttachmentsEnabledChange() {
         this.items = this.resolveItems(this.variant);
     }
+    onDocumentHeaderEnabledChange() {
+        this.items = this.resolveItems(this.variant);
+    }
+    get parsedExtraItems() {
+        const raw = this.extraItems;
+        if (!raw)
+            return [];
+        if (typeof raw !== 'string')
+            return raw;
+        try {
+            const v = JSON.parse(raw);
+            return Array.isArray(v) ? v : [];
+        }
+        catch (_a) {
+            return [];
+        }
+    }
     onEditorChange(next, prev) {
         prev === null || prev === void 0 ? void 0 : prev.off('transaction', this.onTransaction);
         next === null || next === void 0 ? void 0 : next.on('transaction', this.onTransaction);
@@ -320,13 +356,16 @@ export class CoRichTextToolbar {
             }
         };
         const kept = base.filter((entry) => {
+            var _a;
             if (this.isSeparator(entry))
                 return true;
             const action = entry.action;
             // attachment has no editor command — visibility is host opt-in.
             if (action === 'attachment')
                 return this.attachmentsEnabled;
-            const cmd = CoRichTextToolbar.ITEM_COMMAND[action];
+            if (action === 'documentHeader')
+                return this.documentHeaderEnabled;
+            const cmd = (_a = CoRichTextToolbar.ITEM_COMMAND[action]) !== null && _a !== void 0 ? _a : (variant === 'document' ? CoRichTextToolbar.DOCUMENT_ITEM_COMMAND[action] : undefined);
             return cmd ? available(cmd) : true;
         });
         // Drop separators that ended up leading, trailing, or doubled-up.
@@ -451,6 +490,9 @@ export class CoRichTextToolbar {
             case 'link':
                 chain.setLink({ href: url }).run();
                 break;
+            case 'field':
+                chain.insertField(url).run();
+                break;
             case 'image':
                 chain.setImage({ src: url }).run();
                 break;
@@ -596,6 +638,7 @@ export class CoRichTextToolbar {
         }
     }
     getDropdownLabel(item) {
+        var _a, _b;
         if (!this.editor)
             return null;
         const s = this.s;
@@ -606,12 +649,15 @@ export class CoRichTextToolbar {
                 return s.subtitle;
             if (this.editor.isActive('heading', { level: 3 }))
                 return s.headingAbbr3;
+            if (this.editor.isActive('heading', { level: 4 }))
+                return s.headingAbbr4;
             return s.normal;
         }
         if (item.action === 'fontSize') {
-            const attrs = this.editor.getAttributes('textStyle');
-            const fs = attrs === null || attrs === void 0 ? void 0 : attrs.fontSize;
-            return fs ? fs.replace('px', '') : '16';
+            // Preset print: el tamaño es la marca `printFontSize` (forma de V1); el resto lo guarda en textStyle.
+            const printSize = (_a = this.editor.getAttributes('printFontSize')) === null || _a === void 0 ? void 0 : _a.size;
+            const fs = printSize !== null && printSize !== void 0 ? printSize : (_b = this.editor.getAttributes('textStyle')) === null || _b === void 0 ? void 0 : _b.fontSize;
+            return fs ? String(fs).replace('px', '') : '16';
         }
         if (item.action === 'fontFamily') {
             const attrs = this.editor.getAttributes('textStyle');
@@ -773,16 +819,19 @@ export class CoRichTextToolbar {
         const isLink = item.action === 'link';
         const isIframe = item.action === 'iframe';
         const hasExisting = (isLink && ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.isActive('link'))) || (isIframe && ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.isActive('iframe')));
-        const placeholder = item.action === 'iframe'
-            ? this.s.iframeUrlPlaceholder
-            : item.action === 'link'
-                ? 'https://...'
-                : this.s.youtubeUrlPlaceholder;
+        const isField = item.action === 'field';
+        const placeholder = isField
+            ? this.s.fieldNamePlaceholder
+            : item.action === 'iframe'
+                ? this.s.iframeUrlPlaceholder
+                : item.action === 'link'
+                    ? 'https://...'
+                    : this.s.youtubeUrlPlaceholder;
         return (h("div", { class: "co-rich-text-toolbar__popover", onMouseDown: (e) => {
                 if (e.target.tagName !== 'INPUT')
                     e.preventDefault();
                 e.stopPropagation();
-            } }, h("input", { type: "url", class: "co-rich-text-toolbar__popover-input", placeholder: placeholder, value: this.popoverInput, onInput: (e) => { this.popoverInput = e.target.value; }, onKeyDown: (e) => {
+            } }, h("input", { type: isField ? 'text' : 'url', class: "co-rich-text-toolbar__popover-input", placeholder: placeholder, "aria-label": placeholder, value: this.popoverInput, onInput: (e) => { this.popoverInput = e.target.value; }, onKeyDown: (e) => {
                 if (e.key === 'Enter')
                     this.submitPopover(item.action);
                 if (e.key === 'Escape') {
@@ -1097,12 +1146,9 @@ export class CoRichTextToolbar {
             return null;
         // reference tick so Stencil re-renders on selection changes
         void this.tick;
-        return (h("div", { class: "co-rich-text-toolbar", role: "toolbar", "aria-label": "Formatting", part: "toolbar" }, this.items.map((entry) => {
-            if (this.isSeparator(entry)) {
-                return h("span", { class: "co-rich-text-toolbar__sep" });
-            }
-            return this.renderButton(entry);
-        })));
+        const extras = this.parsedExtraItems;
+        const renderEntry = (entry) => this.isSeparator(entry) ? h("span", { class: "co-rich-text-toolbar__sep" }) : this.renderButton(entry);
+        return (h("div", { class: "co-rich-text-toolbar", role: "toolbar", "aria-label": "Formatting", part: "toolbar" }, this.items.map(renderEntry), this.variant === 'document' && this.tableContextItems.map(renderEntry), extras.length > 0 && h("span", { class: "co-rich-text-toolbar__sep" }), extras.map((x) => (h("button", { type: "button", key: `extra-${x.id}`, class: "co-rich-text-toolbar__btn co-rich-text-toolbar__btn--extra", part: "button", disabled: this.disabled, onMouseDown: (e) => e.preventDefault(), onClick: () => this.coAction.emit({ action: x.id, payload: { extra: true } }) }, x.icon && h("co-icon", { name: x.icon, size: 18 }), h("span", { class: "co-rich-text-toolbar__extra-label" }, x.label))))));
     }
     static get is() { return "co-rich-text-toolbar"; }
     static get encapsulation() { return "shadow"; }
@@ -1146,8 +1192,8 @@ export class CoRichTextToolbar {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'none' | 'compact' | 'compact-assets' | 'basic' | 'notes' | 'email' | 'full'",
-                    "resolved": "\"basic\" | \"compact\" | \"compact-assets\" | \"email\" | \"full\" | \"none\" | \"notes\"",
+                    "original": "'none' | 'compact' | 'compact-assets' | 'basic' | 'notes' | 'email' | 'full' | 'document'",
+                    "resolved": "\"basic\" | \"compact\" | \"compact-assets\" | \"document\" | \"email\" | \"full\" | \"none\" | \"notes\"",
                     "references": {}
                 },
                 "required": false,
@@ -1194,7 +1240,7 @@ export class CoRichTextToolbar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita la barra: sus botones no ejecutan acciones sobre el editor."
                 },
                 "getter": false,
                 "setter": false,
@@ -1286,6 +1332,52 @@ export class CoRichTextToolbar {
                 "setter": false,
                 "reflect": false,
                 "attribute": "attachment-accept"
+            },
+            "documentHeaderEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Muestra \u00ABEncabezado\u00BB (variante document). co-document-editor lo apaga mientras se edita la banda."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "document-header-enabled",
+                "defaultValue": "false"
+            },
+            "extraItems": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToolbarExtraItem[] | string",
+                    "resolved": "ToolbarExtraItem[] | string | undefined",
+                    "references": {
+                        "ToolbarExtraItem": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-rich-text",
+                            "id": "../rich-text/dist/index.d.ts::ToolbarExtraItem",
+                            "referenceLocation": "ToolbarExtraItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Botones del host al final de la barra (propiedad JS o JSON): `[{ id, label, icon? }]`.\nSu clic emite `coAction` con `{ action: id, payload: { extra: true } }` y no toca el editor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "extra-items"
             }
         };
     }
@@ -1369,6 +1461,9 @@ export class CoRichTextToolbar {
             }, {
                 "propName": "attachmentsEnabled",
                 "methodName": "onAttachmentsEnabledChange"
+            }, {
+                "propName": "documentHeaderEnabled",
+                "methodName": "onDocumentHeaderEnabledChange"
             }, {
                 "propName": "editor",
                 "methodName": "onEditorChange"
@@ -1404,3 +1499,16 @@ CoRichTextToolbar.ITEM_COMMAND = {
     bulletListMenu: 'toggleBulletList',
     orderedListMenu: 'toggleOrderedList',
 };
+/**
+ * Filtro por schema SOLO de la variante `document` (co-document-editor): el editor
+ * del encabezado (preset print-header) no tiene links, títulos, listas ni firmas.
+ * Las demás variantes resuelven exactamente como antes (spec: el RTE no cambia).
+ */
+CoRichTextToolbar.DOCUMENT_ITEM_COMMAND = {
+    link: 'setLink',
+    headingStyle: 'toggleHeading',
+    bulletList: 'toggleBulletList',
+    orderedList: 'toggleOrderedList',
+    field: 'insertField',
+    signature: 'insertSignatureSlot',
+};

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

@@ -20,9 +20,24 @@ const ALLOWED_TAGS = {
     email: ['p', 'br', 'strong', 'em', 'a', 'span', 'u', 's', 'code', 'ul', 'ol', 'li', 'blockquote', 'h2', 'h3', 'div', 'img'],
     document: ['p', 'br', 'strong', 'em', 'a', 'span', 'u', 's', 'code', 'ul', 'ol', 'li', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'hr', 'div', 'mark', 'img', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'iframe'],
     'block-email': ['p', 'br', 'strong', 'em', 'a', 'span', 'u', 's', 'code', 'ul', 'ol', 'li', 'blockquote', 'h2', 'h3', 'div', 'img'],
+    // Espejo de SANITIZE_CONFIGS.print / 'print-header' (rich-text/sanitizer.ts).
+    // Solo TAGS: la lista de atributos del viewer (sin class, containerstyle,
+    // wrapperstyle ni data-*) no se amplió, así que un HTML de impresión pintado
+    // acá pierde campos, firmas y modos de imagen. Nadie lo consume hoy (H14);
+    // para pintarlo fiel hay que completar también los atributos.
+    print: ['p', 'br', 'strong', 'em', 's', 'code', 'a', 'span', 'mark', 'h1', 'h2', 'h3', 'h4', 'ul', 'ol', 'li', 'blockquote', 'pre', 'hr', 'img', 'div', 'table', 'colgroup', 'col', 'thead', 'tbody', 'tr', 'th', 'td'],
+    'print-header': ['p', 'br', 'strong', 'em', 's', 'code', 'span', 'mark', 'img'],
 };
 /** iframes are permitted only with an https: source (blocks javascript:/data:/http:). */
 const SAFE_IFRAME_SRC_RE = /^https:\/\/[^\s"'<>]+$/i;
+/**
+ * Visor de solo lectura de contenido rich text (HTML o JSON de ProseMirror),
+ * sanitizado según el `preset`. En `format="html"` no carga Tiptap: solo
+ * DOMPurify. Wrapper Vue: `CoRichTextViewer` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part content - El contenido renderizado.
+ * @part empty - El texto de vacío (`emptyText`) cuando no hay contenido.
+ */
 export class CoRichTextViewer {
     constructor() {
         /** HTML string (default) or ProseMirror JSON string. */
@@ -198,7 +213,7 @@ export class CoRichTextViewer {
                 "mutable": false,
                 "complexType": {
                     "original": "RichTextPreset",
-                    "resolved": "\"block-email\" | \"comment\" | \"document\" | \"email\" | \"notes\" | \"task\"",
+                    "resolved": "\"block-email\" | \"comment\" | \"document\" | \"email\" | \"notes\" | \"print\" | \"print-header\" | \"task\"",
                     "references": {
                         "RichTextPreset": {
                             "location": "import",

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

@@ -4,6 +4,9 @@ import { h } from "@stencil/core";
  * @slot prefix  - Leading content (icon, checkbox)
  * @slot         - Main content
  * @slot suffix  - Trailing content (switch, badge, action)
+ *
+ * Wrapper Vue: `CoRow` de `@prolibu-suite/cobalt-vue`.
+ * @part row - La fila.
  */
 export class CoRow {
     constructor() {
@@ -13,11 +16,11 @@ export class CoRow {
         this.size = 'sm';
     }
     render() {
-        return (h("div", { key: '415d9d352b0129f2e05182f0a928843fdb6b6321', class: {
+        return (h("div", { key: '077025b2a73f8440400c27923f1d3a7e38cfb346', class: {
                 'co-row': true,
                 [`co-row--${this.position}`]: true,
                 [`co-row--${this.size}`]: true,
-            }, part: "row" }, h("div", { key: 'af23c875f523e15a4891a7897ae76853d358f692', class: "co-row__prefix" }, h("slot", { key: 'fd3a54d31942ecd10e889f2691c1f6e2d94d2cf3', name: "prefix" })), h("div", { key: '884cad8bde957327b7814b03084da51bfeedb1e4', class: "co-row__content" }, h("slot", { key: 'aedd965fd4ef93597b02e5714fec0b19837544c8' })), h("div", { key: '228cb0a116920be271cc8969591cbe0c1ca8f9b9', class: "co-row__suffix" }, h("slot", { key: 'dee6339445cfe8fdb7a1adf82d795c16e7a16be3', name: "suffix" }))));
+            }, 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" }))));
     }
     static get is() { return "co-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,6 +3,12 @@ import { h } from "@stencil/core";
  * A stacked, multi-segment meter — a pill track split into N contiguous
  * colored segments (e.g. a storage breakdown). Display-only; colors are
  * supplied by the consumer. Provide an external legend via `slot="legend"`.
+ * Wrapper Vue: `CoSegmentedBar` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @slot legend - Leyenda externa bajo la barra.
+ * @part segmented-bar - Contenedor del componente.
+ * @part track - La pista (pastilla) que contiene los segmentos.
+ * @part segment - Cada segmento de color.
  */
 export class CoSegmentedBar {
     constructor() {
@@ -43,13 +49,13 @@ export class CoSegmentedBar {
     render() {
         const segments = this.parsedSegments;
         const total = this.total > 0 ? this.total : 100;
-        return (h("div", { key: '3f4538a2c701799531b586e0b039fb952e5d11ba', class: "co-segmented-bar", part: "segmented-bar" }, h("div", { key: '45c3baf87d073835bc9954ba5ab9c847e5da7fa8', class: {
+        return (h("div", { key: '17f9d7dbccca7bf7dbcd3907094712da67b74f97', class: "co-segmented-bar", part: "segmented-bar" }, h("div", { key: '18747edfd30a3bf84e071570e8280b6d783c6c46', class: {
                 'co-segmented-bar__track': true,
                 [`co-segmented-bar__track--radius-${this.radius}`]: true,
             }, part: "track", style: { height: `${this.thickness}px`, background: this.trackColor } }, segments.map((seg, i) => (h("span", { key: i, class: "co-segmented-bar__segment", part: "segment", title: seg.label, style: {
                 width: `${(seg.value / total) * 100}%`,
                 background: seg.color,
-            } })))), h("slot", { key: 'a6e865f76ff83ff47eb459721c1958f0b431f02d', name: "legend" })));
+            } })))), h("slot", { key: 'd04d1e4ade89c3b1e8e20486aceadf994c310092', name: "legend" })));
     }
     static get is() { return "co-segmented-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -154,7 +160,7 @@ export class CoSegmentedBar {
                     "references": {
                         "CoSegment": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-0.10.3/packages/core/src/components/co-segmented-bar/co-segmented-bar.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-docs-2026-09-24/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

@@ -671,7 +671,19 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   overflow: auto;
 }
 
-/* co-select — simple dropdown select (no search) */
+/**
+ * @prop --co-select-menu-padding: Padding del panel desplegable (acepta shorthand; default 8px).
+ * @prop --co-select-menu-gap: Separación entre filas del panel (default 0). La lista virtual la lee al abrir.
+ * @prop --co-select-option-height: Alto fijo de fila (default: sin alto fijo, mínimo 32px). La lista virtual lo lee al abrir.
+ * @prop --co-select-option-padding: Padding de la fila (default 8px 12px).
+ * @prop --co-select-option-gap: Separación entre check/ícono y texto de la fila.
+ * @prop --co-select-option-font-size: Tamaño del texto de la opción (default 14px).
+ * @prop --co-select-option-font-weight: Peso del texto de la opción (default 400).
+ * @prop --co-select-caret-size: Tamaño del ícono de apertura del trigger (default 16px).
+ * @prop --co-select-caret-color: Color del ícono de apertura del trigger.
+ */
+
+/* co-select — dropdown select (búsqueda opcional con `searchable`) */
 
 :host {
   display: block;
@@ -749,6 +761,33 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   border-color: transparent;
 }
 
+/* ── Variant: soft (Task C5) — fondo --co-semantic-surface-control sólido, borde transparente.
+   Mismo motivo que `flat` arriba: va ANTES del bloque open/focus-visible/
+   status/disabled de más abajo para que, con la MISMA especificidad
+   (0,2,0), esos estados sigan ganando el empate por orden de fuente — si
+   no, un select `soft` con `status="error"`/disabled perdía el borde de
+   estado y, abierto o enfocado, no mostraba el anillo de foco (bug de
+   cascada detectado en review, mismo patrón que `co-input`). El ancho del
+   borde no cambia (1px, solo pasa a transparente), así que la caja
+   tampoco. */
+.co-select--soft .co-select__trigger {
+  background: var(--co-semantic-surface-control);
+  border-color: transparent;
+  color: var(--co-semantic-text-default);
+}
+
+/* ── label-style="inline-help" (Task C5) — borde/gap del trigger.
+   Mismo motivo que `soft` arriba: el override de `border-color` tiene que
+   perder contra open/focus-visible/status/disabled más abajo (misma
+   especificidad, 0,2,0), así que ese pedazo de la regla vive acá. El resto
+   de `inline-help` (tipografía de la fila de etiqueta, caret gray-600) no
+   compite con nada — sigue donde estaba, en la sección "Editor UI fase 2"
+   más abajo. */
+.co-select--inline-help .co-select__trigger {
+  border-color: var(--co-semantic-border-default);
+  gap: var(--co-spacing-sm);
+}
+
 /* ── Multiple: selected values as removable chips (mirror co-ref-field) ── */
 .co-select__chips {
   flex: 1;
@@ -902,8 +941,29 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 }
 
 /* ── Dropdown ───────────────────────────────────────────────── */
+/* Knobs del menú (aditivos). Cada fallback es el valor de 0.10.x, así que
+   sin setearlos el panel mide lo mismo que siempre (medido en Chromium):
+
+   - `--co-select-menu-padding`      padding del panel         (default 8px)
+   - `--co-select-menu-gap`          hueco ENTRE filas         (default 0)
+   - `--co-select-option-height`     alto de fila, explícito   (default: sin
+                                     alto fijo, `min-height: 32px` como hoy)
+   - `--co-select-option-padding`    padding de fila           (default 8px 12px)
+   - `--co-select-option-gap`        hueco check/ícono ↔ texto (default 8px)
+   - `--co-select-option-font-size`  texto de la opción        (default 14px)
+   - `--co-select-option-font-weight`                          (default 400)
+
+   Alto y hueco de fila son también la geometría del virtualizador: el
+   componente los lee al abrir y pagina/scrollea con paso = alto + hueco
+   (`virtualRows.ts`). Sin `--co-select-option-height` sigue el paso de 0.10.x
+   (34, dos más que la fila de 32). Con un alto chico, bajá también el
+   padding de fila: con `border-box` la fila nunca mide menos que su padding.
+
+   Los fallbacks siguen pasando por los tokens de siempre (`--co-spacing-sm2`,
+   `--co-spacing-md`, `--co-font-size-14`), así que redefinir esos tokens en el
+   host sigue alcanzando al menú igual que antes. */
 .co-select__dropdown {
-  padding: var(--co-spacing-sm2);
+  padding: var(--co-select-menu-padding, var(--co-spacing-sm2));
 }
 
 .co-select__search {
@@ -950,10 +1010,21 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 }
 
 .co-select__options {
-  max-height: calc(34px * 8);
+  /* 8 filas visibles = 8 altos + 7 huecos (VIEWPORT_ITEMS en el tsx). Sin
+     knobs: 8 × 34 = 272, el mismo `calc(34px * 8)` de 0.10.x. */
+  max-height: calc(var(--co-select-option-height, 34px) * 8 + var(--co-select-menu-gap, 0px) * 7);
   overflow-y: auto;
 }
 
+/* Ventana del virtualizador (las filas renderizadas). Columna flex solo para
+   poner el hueco ENTRE filas: con hueco 0 apila igual que el bloque de antes
+   (filas de ancho completo, sin márgenes). */
+.co-select__virtual-window {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-select-menu-gap, 0px);
+}
+
 /* OverlayScrollbars theme — floating handle, no reserved gutter.
  * Custom props pierce the shadow boundary, so --co-* tokens resolve here. */
 .os-scrollbar.os-theme-co {
@@ -971,18 +1042,23 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 .co-select__option {
   display: flex;
   align-items: center;
-  gap: var(--co-spacing-sm2);
-  padding: var(--co-spacing-sm2) var(--co-spacing-md);
+  gap: var(--co-select-option-gap, var(--co-spacing-sm2));
+  padding: var(--co-select-option-padding, var(--co-spacing-sm2) var(--co-spacing-md));
   border-radius: var(--co-border-radius-xs);
   cursor: pointer;
   transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
-  min-height: 32px;
+  /* Sin knob: alto automático con piso de 32, como siempre. Con knob: alto
+     EXPLÍCITO (`height` y `min-height` al mismo valor). */
+  height: var(--co-select-option-height, auto);
+  min-height: var(--co-select-option-height, 32px);
   box-sizing: border-box;
 }
 
-.co-select__option:hover {
-  background: var(--co-semantic-surface-hover);
-}
+/* Sin `:hover` en las filas, a propósito: el puntero mueve la opción ACTIVA
+   (`pointermove` en el tsx) y lo único que pinta el resaltado es
+   `--active`. Con `:hover` pintando por su cuenta había DOS filas resaltadas
+   a la vez — la activa por teclado y la de abajo del mouse. Lo fija
+   `co-select.css.test.ts`. */
 
 .co-select__option--selected {
   background: var(--co-semantic-surface-muted);
@@ -1011,8 +1087,8 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 .co-select__option-label {
   flex: 1;
   color: var(--co-semantic-text-default);
-  font-size: var(--co-font-size-14);
-  font-weight: 400;
+  font-size: var(--co-select-option-font-size, var(--co-font-size-14));
+  font-weight: var(--co-select-option-font-weight, 400);
   line-height: 1;
 }
 
@@ -1096,3 +1172,123 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   content: var(--co-field-required-text, ' (required)');
 }
 
+/* ══════════════════════════════════════════════════════════════
+   Editor UI fase 2 (Task C5) — aditivo: nada de lo de arriba cambia.
+   ══════════════════════════════════════════════════════════════ */
+
+/* ── size="xs" (24 px, escala unificada de campos) ─────────────── */
+.co-select--xs .co-select__trigger {
+  min-height: 24px;
+  padding: 0 var(--co-spacing-sm);
+  font-size: var(--co-font-size-12);
+  border-radius: var(--co-border-radius-xxs);
+}
+
+/* variant="soft": el override del trigger (background/border-color) vive
+   junto a `--flat`, más arriba (cascada — ver comentario ahí). */
+
+/* ── --co-select-caret-size / --co-select-caret-color ────────────
+   Hooks aditivos para ajustar el caret desde afuera sin nueva prop
+   (p.ej. el editor lo usa a 8px + text-default, con icon-left a 14px).
+   Ambos fallbacks son el valor ACTUAL — sin setear la variable el look
+   no cambia un pixel:
+   - Tamaño: default 16px, igual al `size` fijo que ya traía el
+     `co-icon`. El `!important` es necesario porque `co-icon` fija su
+     propio ancho/alto inline en el estilo de su Host — eso gana por
+     especificidad a cualquier regla externa salvo `!important`.
+   - Color: default `text-muted` (gray-500), igual a la regla original de
+     `.co-select__caret` más arriba en este archivo. La referencia Figma
+     4-#14 (negro / text-default) es el look que arma el EDITOR seteando
+     `--co-select-caret-color: var(--co-semantic-text-default)` desde su
+     propio CSS (ver story `Xs`/`Soft`) — cobalt-core no cambia su
+     default aunque el brief original lo pidiera así (aditivo > brief:
+     "jamás cambiar defaults" gana). El caso 6-#10 (gray-600) lo cubre el
+     override de `label-style="inline-help"` de más abajo, que sigue
+     aplicando sobre CUALQUIER valor de esta variable. */
+.co-select__caret {
+  width: var(--co-select-caret-size, 16px) !important;
+  height: var(--co-select-caret-size, 16px) !important;
+  color: var(--co-select-caret-color, var(--co-semantic-text-muted));
+}
+
+/* ── icon-size (icon-left) ────────────────────────────────────────
+   Sin CSS propio: `iconSize` pasa directo al `size` del `co-icon` en
+   el .tsx (default 16, igual a hoy). */
+
+/* ── label-style="inline-help" ────────────────────────────────────
+   Fila de etiqueta en una sola línea (label a la izquierda,
+   secondaryLabel a la derecha, alineados a la línea de base) pensada
+   para el modal de configuración; el trigger usa un borde más marcado
+   y un gap más chico para ese contexto. `.co-select__labels` ya es
+   flex + space-between por default — acá solo se ajustan alineación,
+   tipografía/color y el trigger. */
+.co-select--inline-help .co-select__labels {
+  align-items: baseline;
+}
+
+.co-select--inline-help .co-select__label {
+  color: var(--co-semantic-text-default);
+  font-size: var(--co-font-size-14);
+}
+
+.co-select--inline-help .co-select__secondary-label {
+  color: var(--co-semantic-text-secondary);
+  font-size: var(--co-font-size-12);
+}
+
+/* label-style="inline-help": el override de borde/gap del trigger vive
+   junto a `--flat`/`--soft`, más arriba (cascada — ver comentario ahí). */
+
+/* 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);
+}
+
+/* ── menu-surface="dark" ──────────────────────────────────────────
+   El panel pinta su propia lista (no delega en co-menu/co-option-list),
+   así que replica acá lo que pide C9 para co-menu-item: fondo
+   surface-primary, texto inverse, hover blanco-16 y el check de la
+   opción seleccionada al INICIO con el hueco siempre reservado
+   (leading-check). El layout "light" (default) no se toca. */
+.co-select__dropdown--dark {
+  background: var(--co-semantic-surface-primary);
+  color: var(--co-semantic-text-inverse);
+  /* El co-popover va `bare` en dark (ver tsx): el radio lo pone este panel.
+     Radio xs (8) como el menú Lineal/Radial del Figma (4750:23242); sin
+     borde ni sombra (el diseño no los lleva). */
+  border-radius: var(--co-border-radius-xs, 8px);
+}
+
+.co-select__dropdown--dark .co-select__option-label {
+  color: var(--co-semantic-text-inverse);
+}
+
+/* On-dark la opción seleccionada se indica solo con el check inicial,
+   sin fondo propio (mismo criterio que `co-menu-item` on-dark). Va ANTES
+   que la activa (misma especificidad, empate por orden de fuente) para
+   que, igual que en "light" (ver comentario de `.co-select__option--active`
+   más arriba), la activa por teclado siga ganándole a la seleccionada — si
+   no, un usuario de teclado sobre una opción ya elegida perdería el
+   resaltado y no vería dónde está parado. */
+.co-select__dropdown--dark .co-select__option--selected {
+  background: transparent;
+}
+
+/* Solo `--active`, sin `:hover`: el resaltado es uno (ver `.co-select__option`). */
+.co-select__dropdown--dark .co-select__option--active {
+  background: var(--co-color-opacity-blanco-16);
+}
+
+.co-select__option-check-slot {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+}
+
+.co-select__option-check--leading {
+  color: inherit;
+}
+