@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -33,17 +33,31 @@ const caretAfterSignificant = (text, count) => {
     }
     return text.length;
 };
+/**
+ * Campo numérico con botones −/+, flechas del teclado para escalonar, límites
+ * `min`/`max` y formatos de tasa, porcentaje o monto. Wrapper Vue:
+ * `CoNumberField` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part row - Fila del campo: input y botones −/+.
+ * @part input - El `<input>` nativo.
+ */
 export class CoNumberField {
     constructor() {
         /** Whether the field is required (renders a required marker on the label). */
         this.required = false;
         /** Label layout: vertical (label above) or horizontal (label beside) */
         this.layout = 'vertical';
+        /** Estado de validación: pinta el borde y el `helperText` con el color del estado. */
         this.status = 'default';
+        /** Valor numérico (reflejado); `null` = vacío (solo alcanzable con `clearable`). El componente lo actualiza. */
         this.value = 0;
+        /** Paso de los botones −/+ y de las flechas (default 1). */
         this.step = 1;
+        /** Deshabilita el campo y los botones. */
         this.disabled = false;
+        /** Placeholder del campo vacío (default `'0'`). */
         this.placeholder = '0';
+        /** Alto del campo: `s` 28 · `sm` 32 · `md` 40 (default) · `lg` 48. */
         this.size = 'md';
         /** Show clear button when the field has a value */
         this.clearable = false;
@@ -323,18 +337,18 @@ export class CoNumberField {
         return this.scaled && !this.isEmpty ? '%' : null;
     }
     render() {
-        return (h("div", { key: 'de7f3ae049ac5afcdf7d8a711c566b947fa7e151', class: {
+        return (h("div", { key: 'cf4d63ce0278fd8f429aa4bf541497b7cf178ffe', class: {
                 'co-number-field': true,
                 'co-number-field--disabled': this.disabled,
                 'co-number-field--focused': this.focused,
                 [`co-number-field--${this.size}`]: true,
                 [`co-number-field--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '3a6c96b2987f0502334a23048f8693745589e965', class: "co-number-field__labels" }, this.label && h("label", { key: '7e0c9c08e93f10f6e18143d038ea8810a0f156b8', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '88b110f3d59908c27d182533100220ff8a65bb66', required: this.required })), this.secondaryLabel && h("span", { key: '5dd9219f995fc59ce557c8ba2b5dfea2d7cb56ef', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'e2079dd9e28daf904057106167cd368de906daba', class: "co-number-field__row", part: "row" }, !this.hideControls && (h("button", { key: '7ff22639f594e7a008f02962ed7782b84654b78e', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '61aafdc7c083ea39b9b65b87d267df63b91cb8d4', name: "minus", size: 16 }))), h("input", { key: 'e088482da6c9fe1e02abe5bcae2611f157be83ed', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal",
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'ecf9fd16f18a3ebbaef5b81b0c8ae41b80f04abf', class: "co-number-field__labels" }, this.label && h("label", { key: '7602d901e085e3380dff2a355d61ac1dc515428b', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '361743bf41c66ff28ceec00aba583328f2404713', required: this.required })), this.secondaryLabel && h("span", { key: 'ec9af4b27f3915704ef89ed6f51e7184eb5e1dd4', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: '30f1716aed06da03f924fa1da2b2ab29dbede0bb', class: "co-number-field__row", part: "row" }, !this.hideControls && (h("button", { key: '1dbee1178df2a86e54ae42572a20ecf30484b8bc', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '40f61bd3774fb03b6aaceaef006dd45f2df260d3', name: "minus", size: 16 }))), h("input", { key: '254a74cd61a2776a69953965f8b289267b25fbb2', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal",
             // Mismo guard `focused` que el @Watch: mientras el usuario edita, su
             // texto manda. Sin esto, el re-render que dispara emitValue repinta
             // el input desde el NÚMERO y se come el texto en construcción
             // ("34,640.00" pegado quedaba "34,640"; un "12." perdería el punto).
-            value: this.focused && this.inputEl ? this.inputEl.value : this.displayValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }), this.affixText && (h("span", { key: '2a7bc2f465844ccb9db7017c1b3782625e784c05', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '06e40ddc080297db49823f17eeeaba313f68fafd', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'f69d2f6bf5cb4cd6731d55f873fd03d21eb0f42e', name: "x-circle", size: 16, weight: "fill" }))), h("slot", { key: 'd16df6468bf0f514ce183e36d555b5e8f97ff969', name: "suffix" }), !this.hideControls && (h("button", { key: '523f5cbda86bbe3b69d08aedc9eb678d6b218cb7', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '7f546fa2885ebecc3f16129bdc815a1cea57f53f', name: "plus", size: 16 })))), this.helperText && (h("div", { key: 'e807bbe38823ee148e227baaac1feafd85f93c49', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'e8bc48908cb9e53952e0bffeb898d0a4b0d2fef3', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'c00dc9f3bd966988f6a2546a360ede337de383e4', class: "co-number-field__helper-text" }, this.helperText)))));
+            value: this.focused && this.inputEl ? this.inputEl.value : this.displayValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }), this.affixText && (h("span", { key: '836ea4e4cba0b21a36b1017d6fc0c4d621d69e56', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '5eefa937a055dea1855d1bc3bae675003d8382c8', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '096dec8d88b7b241cd83a04788bc4db05feec585', name: "x-circle", size: 16, weight: "fill" }))), h("slot", { key: '1ea7d1ff2c61d74b0884e7b8f1b7b54de4978876', name: "suffix" }), !this.hideControls && (h("button", { key: '9ae95697534b85dcd928c0d0e7f72a3b8c5402c7', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: 'af526ac4278865052f32ae7359a571aa485492af', name: "plus", size: 16 })))), this.helperText && (h("div", { key: '9bad3ffd8c70ce49205132f9f73294a83b6ebbc3', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '4987bc82011c4bb93e1bd00ef1ffd45d2e8681f4', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: '8eac5821653dc0110113f94833e13f27411188a7', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }
@@ -362,7 +376,7 @@ export class CoNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Etiqueta del campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -401,7 +415,7 @@ export class CoNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto secundario junto a la etiqueta."
                 },
                 "getter": false,
                 "setter": false,
@@ -420,7 +434,7 @@ export class CoNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto de ayuda o de error bajo el campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -459,7 +473,7 @@ export class CoNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Estado de validaci\u00F3n: pinta el borde y el `helperText` con el color del estado."
                 },
                 "getter": false,
                 "setter": false,
@@ -479,7 +493,7 @@ export class CoNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Valor num\u00E9rico (reflejado); `null` = vac\u00EDo (solo alcanzable con `clearable`). El componente lo actualiza."
                 },
                 "getter": false,
                 "setter": false,
@@ -499,7 +513,7 @@ export class CoNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "M\u00EDnimo: los valores se recortan a este l\u00EDmite."
                 },
                 "getter": false,
                 "setter": false,
@@ -518,7 +532,7 @@ export class CoNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "M\u00E1ximo: los valores se recortan a este l\u00EDmite."
                 },
                 "getter": false,
                 "setter": false,
@@ -537,7 +551,7 @@ export class CoNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Paso de los botones \u2212/+ y de las flechas (default 1)."
                 },
                 "getter": false,
                 "setter": false,
@@ -557,7 +571,7 @@ export class CoNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el campo y los botones."
                 },
                 "getter": false,
                 "setter": false,
@@ -577,7 +591,7 @@ export class CoNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder del campo vac\u00EDo (default `'0'`)."
                 },
                 "getter": false,
                 "setter": false,
@@ -597,7 +611,7 @@ export class CoNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alto del campo: `s` 28 \u00B7 `sm` 32 \u00B7 `md` 40 (default) \u00B7 `lg` 48."
                 },
                 "getter": false,
                 "setter": false,
@@ -699,7 +713,7 @@ export class CoNumberField {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Cambi\u00F3 el valor (ya recortado a `min`/`max`; `value` ya est\u00E1 actualizado): `detail` = n\u00FAmero, o `null` al vaciar con `clearable`."
                 },
                 "complexType": {
                     "original": "number | null",

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

@@ -669,6 +669,44 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   overflow: auto;
 }
 
+/**
+ * @prop --co-option-list-max-height: Alto máximo del área de filas antes de scrollear (default 280px).
+ * @prop --co-option-list-options-padding: Padding del área de filas.
+ * @prop --co-option-list-gap: Separación vertical entre filas.
+ * @prop --co-option-list-item-gap: Separación entre los elementos de una fila (ícono, textos, acciones).
+ * @prop --co-option-list-item-min-height: Alto mínimo de fila (default 32px); no cambia el paso fijo de la lista virtual.
+ * @prop --co-option-list-item-padding-y: Padding vertical de la fila.
+ * @prop --co-option-list-item-radius: Radio de la fila.
+ * @prop --co-option-list-item-bg: Fondo de la fila en reposo.
+ * @prop --co-option-list-item-ring: Sombra/anillo de la fila en reposo.
+ * @prop --co-option-list-item-font-size: Tamaño del texto de la fila (default 14px).
+ * @prop --co-option-list-active-bg: Fondo de la fila activa (hover o teclado).
+ * @prop --co-option-list-active-ring: Sombra/anillo de la fila activa.
+ * @prop --co-option-list-label-weight: Peso del label de la fila.
+ * @prop --co-option-list-text-gap: Separación entre el título y la descripción de la fila.
+ * @prop --co-option-list-icon-tile-size: Lado del recuadro del ícono (default 22px).
+ * @prop --co-option-list-icon-tile-radius: Radio del recuadro del ícono.
+ * @prop --co-option-list-icon-tile-mix: Porcentaje del tinte del ícono en el fondo del recuadro (default 12%).
+ * @prop --co-option-list-icon-tile-ring-mix: Porcentaje del tinte en el borde del recuadro (default 0%, sin borde).
+ * @prop --co-option-list-search-height: Alto del buscador (default 32px).
+ * @prop --co-option-list-search-margin: Margen del buscador.
+ * @prop --co-option-list-search-padding: Padding del buscador.
+ * @prop --co-option-list-search-border: Borde del buscador (shorthand).
+ * @prop --co-option-list-search-radius: Radio del buscador.
+ * @prop --co-option-list-search-bg: Fondo del buscador.
+ * @prop --co-option-list-search-border-focus: Color del borde del buscador con foco.
+ * @prop --co-option-list-search-bg-focus: Fondo del buscador con foco.
+ * @prop --co-option-list-search-caret: Color del cursor de texto del buscador.
+ * @prop --co-option-list-group-padding-top: Padding superior del encabezado de grupo.
+ * @prop --co-option-list-group-padding-bottom: Padding inferior del encabezado de grupo.
+ * @prop --co-option-list-group-font-family: Familia tipográfica del encabezado de grupo (default mono).
+ * @prop --co-option-list-group-font-size: Tamaño del encabezado de grupo.
+ * @prop --co-option-list-group-font-weight: Peso del encabezado de grupo.
+ * @prop --co-option-list-group-text-transform: Transformación del encabezado de grupo (default uppercase).
+ * @prop --co-option-list-group-letter-spacing: Espaciado de letras del encabezado de grupo.
+ * @prop --co-option-list-group-color: Color del encabezado de grupo.
+ */
+
 :host {
   display: block;
   font-family: var(--co-font-family-primary, 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
@@ -698,22 +736,30 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 
 /* ── Search ──────────────────────────────────────────────── */
 /* Caja 32px: icono lupa centrado en un box de 24px (16px + 4px por lado),
- * gap 6px al texto — offsets exactos del Figma (icono en x=8, texto en x=34). */
+ * gap 6px al texto — offsets exactos del Figma (icono en x=8, texto en x=34).
+ * Overridables por host (paletas con el buscador en la fila de cabecera, sin
+ * caja, o campo relleno suave): `--co-option-list-search-height` (32px),
+ * `-search-margin` (12px 12px 0), `-search-padding` (0 8px 0 4px),
+ * `-search-border` (1px solid border-subtle), `-search-border-focus`
+ * (border-focus), `-search-bg` (transparent), `-search-bg-focus` (= bg),
+ * `-search-radius` (radius-xs) y `-search-caret` (auto). Defaults = Figma. */
 .co-option-list__search {
   display: flex;
   align-items: center;
   gap: var(--co-spacing-sm, 6px);
-  height: 32px;
+  height: var(--co-option-list-search-height, 32px);
   box-sizing: border-box;
-  margin: var(--co-spacing-md, 12px) var(--co-spacing-md, 12px) 0;
-  padding: 0 var(--co-spacing-sm2, 8px) 0 var(--co-spacing-xs, 4px);
-  border: 1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));
-  border-radius: var(--co-border-radius-xs, 8px);
+  margin: var(--co-option-list-search-margin, var(--co-spacing-md, 12px) var(--co-spacing-md, 12px) 0);
+  padding: var(--co-option-list-search-padding, 0 var(--co-spacing-sm2, 8px) 0 var(--co-spacing-xs, 4px));
+  border: var(--co-option-list-search-border, 1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08)));
+  border-radius: var(--co-option-list-search-radius, var(--co-border-radius-xs, 8px));
+  background: var(--co-option-list-search-bg, transparent);
   color: var(--co-semantic-text-muted, #888888);
 }
 
 .co-option-list__search:focus-within {
-  border-color: var(--co-semantic-border-focus, rgba(31, 28, 27, 0.25));
+  border-color: var(--co-option-list-search-border-focus, var(--co-semantic-border-focus, rgba(31, 28, 27, 0.25)));
+  background: var(--co-option-list-search-bg-focus, var(--co-option-list-search-bg, transparent));
 }
 
 .co-option-list__search co-icon {
@@ -738,6 +784,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
   line-height: 1;
   color: var(--co-semantic-text-default, #1f1c1b);
+  caret-color: var(--co-option-list-search-caret, auto);
 }
 
 .co-option-list__search-input::placeholder {
@@ -752,13 +799,16 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   max-height: var(--co-option-list-max-height, 280px);
   overflow-y: auto;
   overflow-x: hidden;
-  padding: var(--co-spacing-md, 12px);
+  /* Overridable: `--co-option-list-options-padding` (default 12px) — paletas con cabecera propia que acercan la
+     primera sección al filtro de arriba. */
+  padding: var(--co-option-list-options-padding, var(--co-spacing-md, 12px));
 }
 
 .co-option-list__inner {
   display: flex;
   flex-direction: column;
-  gap: var(--co-spacing-xxs, 2px);
+  /* Overridable: `--co-option-list-gap` (default 2px) — paletas con filas-tarjeta separadas. */
+  gap: var(--co-option-list-gap, var(--co-spacing-xxs, 2px));
   min-width: 0;
 }
 
@@ -781,14 +831,22 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 .co-option-list__option {
   display: flex;
   align-items: center;
-  gap: var(--co-spacing-sm2, 8px);
+  /* Overridable: `--co-option-list-item-gap` (default 8px) — gap entre el leading (tile/icono/avatar) y el texto;
+     paletas con tile tintado lo acercan (Attio: ~5px del tile al rótulo). */
+  gap: var(--co-option-list-item-gap, var(--co-spacing-sm2, 8px));
   min-width: 0;
   min-height: var(--co-option-list-item-min-height, 32px);
   box-sizing: border-box;
   padding: var(--co-option-list-item-padding-y, var(--co-spacing-xs, 4px)) var(--co-spacing-sm2, 8px) var(--co-option-list-item-padding-y, var(--co-spacing-xs, 4px)) var(--co-spacing-xs, 4px);
-  border-radius: var(--co-border-radius-xs, 8px);
+  /* Overridables (paletas con filas-tarjeta, Attio): `--co-option-list-item-radius` (default 8px) y
+     `--co-option-list-item-font-size` (default 14px). */
+  border-radius: var(--co-option-list-item-radius, var(--co-border-radius-xs, 8px));
+  /* Reposo overridable (paletas con filas-tarjeta, Attio): `--co-option-list-item-bg` (default transparent) y
+     `--co-option-list-item-ring` (default none). La activa/seleccionada los pisa. */
+  background: var(--co-option-list-item-bg, transparent);
+  box-shadow: var(--co-option-list-item-ring, none);
   cursor: pointer;
-  font-size: var(--co-font-size-14, 14px);
+  font-size: var(--co-option-list-item-font-size, var(--co-font-size-14, 14px));
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
   color: var(--co-semantic-text-default, #1f1c1b);
   transition:
@@ -804,7 +862,8 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 }
 
 .co-option-list__option--active {
-  background: var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04));
+  background: var(--co-option-list-active-bg, var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04)));
+  box-shadow: var(--co-option-list-active-ring, none);
 }
 
 /* Seleccionado = mismo gris-100 del Figma; el affordance (X/check) distingue. */
@@ -828,6 +887,24 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   margin: 0 var(--co-spacing-xs, 4px);
 }
 
+/* Tile tintado (item.iconTint): 22px, mismo lenguaje que los tiles de categoría de los hosts.
+ * Overridables (paletas con tiles más presentes, Attio): `--co-option-list-icon-tile-size` (22px),
+ * `--co-option-list-icon-tile-radius` (4px), `--co-option-list-icon-tile-mix` (% del tinte en el fondo, 12%) y
+ * `--co-option-list-icon-tile-ring-mix` (% del tinte en el hairline interior, 0% = sin hairline). */
+.co-option-list__icon-tile {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--co-option-list-icon-tile-size, 22px);
+  height: var(--co-option-list-icon-tile-size, 22px);
+  margin: 0 var(--co-spacing-xxs, 2px);
+  border-radius: var(--co-option-list-icon-tile-radius, var(--co-border-radius-xxs, 4px));
+  background: color-mix(in srgb, var(--co-option-list-icon-tint) var(--co-option-list-icon-tile-mix, 12%), transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--co-option-list-icon-tint) var(--co-option-list-icon-tile-ring-mix, 0%), transparent);
+  color: var(--co-option-list-icon-tint);
+}
+
 .co-option-list__dot {
   flex-shrink: 0;
   width: 10px;
@@ -852,7 +929,8 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 }
 
 .co-option-list__label {
-  font-weight: 400;
+  /* Overridable: `--co-option-list-label-weight` (default 400) — paletas de título solo con rótulo medium. */
+  font-weight: var(--co-option-list-label-weight, 400);
   line-height: 1;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -984,14 +1062,17 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 /* ── Group headers ───────────────────────────────────────── */
 /* Figma: Geist Mono 10px uppercase, tracking 0.8px, color default. */
 .co-option-list__group {
-  padding: var(--co-spacing-sm2, 8px) var(--co-spacing-xs, 4px) var(--co-spacing-xs, 4px);
-  font-family: var(--co-font-family-mono, 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace);
-  font-size: var(--co-font-size-10, 10px);
-  font-weight: 400;
-  text-transform: uppercase;
-  letter-spacing: var(--co-font-letter-spacing-overline, 0.08em);
+  /* Overridables: `--co-option-list-group-padding-top` / `-bottom` (paletas con secciones aireadas: 16/6). */
+  padding: var(--co-option-list-group-padding-top, var(--co-spacing-sm2, 8px)) var(--co-spacing-xs, 4px) var(--co-option-list-group-padding-bottom, var(--co-spacing-xs, 4px));
+  /* Overridables de tipografía (paletas con rótulos en sentence case): `--co-option-list-group-font-family`,
+     `-font-size`, `-font-weight`, `-text-transform`, `-letter-spacing`, `-color`. Default = Figma. */
+  font-family: var(--co-option-list-group-font-family, var(--co-font-family-mono, 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace));
+  font-size: var(--co-option-list-group-font-size, var(--co-font-size-10, 10px));
+  font-weight: var(--co-option-list-group-font-weight, 400);
+  text-transform: var(--co-option-list-group-text-transform, uppercase);
+  letter-spacing: var(--co-option-list-group-letter-spacing, var(--co-font-letter-spacing-overline, 0.08em));
   line-height: 1.1;
-  color: var(--co-semantic-text-default, #1f1c1b);
+  color: var(--co-option-list-group-color, var(--co-semantic-text-default, #1f1c1b));
 }
 
 /* ── Clear row ───────────────────────────────────────────── */

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

@@ -9,8 +9,16 @@ import { buildRows, deriveMore, listReorderIds, liveSelectedOrder, nextActiveInd
  *
  * NO renderiza trigger ni chrome de panel (popover/dialog/ancho): eso es del
  * host. Es 100% controlada: no muta `value`; emite y el host decide.
+ * Wrapper Vue: `CoOptionList` de `@prolibu-suite/cobalt-vue`. Sus eventos NO
+ * burbujean ni cruzan el shadow DOM: se escuchan sobre el propio elemento.
  *
+ * @slot header - Entre el buscador y la lista (filtros por categoría de una paleta). UN elemento siempre montado.
  * @slot footer - Footer del panel (normalmente <co-list-footer>).
+ *
+ * @part search - Contenedor del buscador integrado (solo con `searchable`).
+ * @part options - Contenedor scrolleable de las filas.
+ * @part icon-tile - Recuadro tintado del ícono de una fila (`item.icon` + `item.iconTint`).
+ * @part drag-handle - Tirador de arrastre de una fila (con `reorderable` o `listReorderable`).
  */
 export class CoOptionList {
     constructor() {
@@ -21,6 +29,8 @@ export class CoOptionList {
         this.value = '';
         /** Display-items de la selección (para selected-first con ids fuera de página). */
         this.selectedItems = '[]';
+        /** Selección múltiple: `value` es un JSON array de ids y `coChange` emite el
+         *  array completo; con `false` (default) la selección es un solo id. */
         this.multiple = false;
         /** Partición selected-first (snapshot al llamar snapshotOrder()). */
         this.selectedFirst = false;
@@ -38,17 +48,24 @@ export class CoOptionList {
          *  Independiente de multiple/selectedFirst. No soportado con `virtual`. */
         this.listReorderable = false;
         // ── Search integrado (opcional) ────────────────────────────
+        /** Muestra el buscador integrado arriba de la lista (reflejado como atributo).
+         *  El filtrado lo hace el host al recibir `coSearch`. */
         this.searchable = false;
+        /** Placeholder del buscador integrado. */
         this.searchPlaceholder = 'Search…';
+        /** Espera en ms entre la última tecla y el `coSearch` (default 350). */
         this.searchDebounce = 350;
         /** Pre-seed del término (modo convert de las celdas). */
         this.initialTerm = '';
         // ── Estados ────────────────────────────────────────────────
+        /** Cargando: sin filas muestra un loader en lugar de la lista; con filas,
+         *  un loader al pie. Mientras está activo no se emite `coLoadMore`. */
         this.loading = false;
         /** Total del server: deriva hasMore + hint "N more results". */
         this.total = 0;
         /** Fallback cuando el host no conoce totales (⌘K). total>0 manda. */
         this.hasMore = false;
+        /** Texto cuando no hay filas y no se está cargando. */
         this.emptyMessage = 'No results found';
         /** Si se setea y hay selección, fila "quitar selección" al tope. */
         this.clearOptionLabel = '';
@@ -59,6 +76,7 @@ export class CoOptionList {
         this.highlightMatches = false;
         /** Término externo para highlight (input en el host, p.ej. ⌘K). */
         this.highlightTerm = '';
+        /** Forma del `co-avatar` de las filas que traen avatar: `circle` (default) o `square`. */
         this.avatarShape = 'circle';
         /** `end` pinta el suffix como columna a la derecha de la fila (precio/meta),
          *  sin el guion; `inline` = junto al label (default). */
@@ -307,7 +325,6 @@ export class CoOptionList {
         this.activeIndex = activeId ? this.orderedItems.findIndex((i) => i._id === activeId) : -1;
     }
     // ── Métodos públicos ───────────────────────────────────────
-    /** Re-toma el snapshot selected-first. El host la llama al abrir su panel. */
     /**
      * Vacía el buscador (texto, término y cualquier coSearch en vuelo) y emite
      * `coSearch('')`. Para hosts que reabren el panel (co-popover): el término
@@ -327,6 +344,7 @@ export class CoOptionList {
             this.takeSnapshot();
         this.coSearch.emit('');
     }
+    /** Re-toma el snapshot selected-first. El host la llama al abrir su panel. */
     async snapshotOrder() {
         this.takeSnapshot();
     }
@@ -709,6 +727,9 @@ export class CoOptionList {
         }
         if (item.color)
             return h("span", { class: "co-option-list__dot", style: { backgroundColor: item.color } });
+        if (item.icon && item.iconTint) {
+            return (h("span", { class: "co-option-list__icon-tile", part: "icon-tile", style: { '--co-option-list-icon-tint': item.iconTint } }, h("co-icon", { name: item.icon, size: 14 })));
+        }
         if (item.icon)
             return h("co-icon", { name: item.icon, size: 16, class: "co-option-list__icon" });
         return null;
@@ -760,11 +781,11 @@ export class CoOptionList {
         const selectedIds = this.selectedIds;
         const { hasMore, remaining } = deriveMore(this.parsedItems.length, this.total, this.hasMore);
         const showClear = !!this.clearOptionLabel && selectedIds.length > 0;
-        return (h("div", { key: '93ec2aeb43a8f03e918eb068f683efdc93ca4db5', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '617640a5909cbb82f37168f19978be213b0de9e0', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '5e4c73aa4cb53d71e37b628936cb699eee656056', name: "magnifying-glass", size: 16 }), h("input", { key: 'f9497413b2b8d72899051ee0d02f34411936ae8c', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), h("div", { key: '06403a47d664e34d9fa0381affdb32b6d3b8eb56', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: 'aa17f1da0c46d9df52a0e3f1257ebf385c1ba945', class: "co-option-list__inner" }, showClear && (h("button", { key: 'e88eb444c5b94ebb800e4385515aa13542b2682f', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: 'f1e332a87ba9d83fd2a22150939b135766731dc6', name: "x-circle", size: 14 }), h("span", { key: '26dca00c81dd651982955562fc3747aae88ba536' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '147ffc9fefed3524bfdd08ebfa36fb2e89ff4bb1', class: "co-option-list__loading" }, h("co-loader", { key: 'd4be765a87c8222b5747749fce7787788a4b0aca', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: 'f20612fb93140fff5463e2992e9beec1ccb1fda9', class: "co-option-list__empty" }, h("co-icon", { key: 'aa68b5891aae21c513a069e920ddae0378d0a736', name: "magnifying-glass", size: 20 }), h("span", { key: '2fa339d51962a1898493ba78febcd90d3dbf9310' }, this.emptyMessage))), items.length > 0 && this.virtual
+        return (h("div", { key: 'ca480a23b7127ff745ee57002a71dea707e32e95', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: 'de6a96f09450c05c9194933f3e5f732e158437c7', class: "co-option-list__search", part: "search" }, h("co-icon", { key: 'f99a19e0a194d6a0bcce6d40a736197593af8fdf', name: "magnifying-glass", size: 16 }), h("input", { key: '26fabd78b4660523e25b40bc8e92740df2677244', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), h("slot", { key: '05dc7fb2d632ba58b3b960e9355b1e48a71df32c', name: "header" }), h("div", { key: 'b3edc8acf06c7f433da9584249be73d25c5f1fee', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: '8abe9a20998f35332ee320512a433d8fb8196875', class: "co-option-list__inner" }, showClear && (h("button", { key: '9b420f4a08d94c7588657ec73102253dc3aace29', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '5e0d86b76f5b85ee41a4534284c4e05fec4f2df1', name: "x-circle", size: 14 }), h("span", { key: 'ff554cd331978bbe2e6aaef44b590a9de66c67d5' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '1db10de6bf8b6cda7b7ca13f5969400ab420a3e7', class: "co-option-list__loading" }, h("co-loader", { key: 'd724879c38f755067e544503c233c740f932f46e', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '95f42f0028e6f7a1641bc45f6a294fe2ded5a29f', class: "co-option-list__empty" }, h("co-icon", { key: '1bed6dbd8c0c4e0722f6c28c2867331bba4e3879', name: "magnifying-glass", size: 20 }), h("span", { key: '7f2d01d6eed6e91ab14ace418f52167713963976' }, this.emptyMessage))), items.length > 0 && this.virtual
             ? this.renderVirtual(items, selectedIds)
             : buildRows(items).map((row) => row.kind === 'header'
                 ? h("div", { class: "co-option-list__group", role: "presentation" }, row.label)
-                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: '147e9bd6f1456284cd223e067b08979efb2cfe2c', class: "co-option-list__loading-more" }, h("co-loader", { key: '6e5b5181d803579ba3370a63849f0462a0685165', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: 'b90b8fce9a427371e3a7de24feb6fce6765dafe1', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '33d6641dc16188f572c70528d54553313b4f4afb', name: "footer" })));
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: '9fb95c0193357bf50eabc21dae3f8ca0bb2b3a9f', class: "co-option-list__loading-more" }, h("co-loader", { key: 'dddf472d61b1c14f281212b02538bd576dce09d1', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '6d4f16d14d67b137fe37b67fe1590d209b51b800', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '9091482eaf2228e93b3eeb893e804d5fcd8c3d44', name: "footer" })));
     }
     static get is() { return "co-option-list"; }
     static get encapsulation() { return "shadow"; }
@@ -866,7 +887,7 @@ export class CoOptionList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Selecci\u00F3n m\u00FAltiple: `value` es un JSON array de ids y `coChange` emite el\narray completo; con `false` (default) la selecci\u00F3n es un solo id."
                 },
                 "getter": false,
                 "setter": false,
@@ -1006,7 +1027,7 @@ export class CoOptionList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Muestra el buscador integrado arriba de la lista (reflejado como atributo).\nEl filtrado lo hace el host al recibir `coSearch`."
                 },
                 "getter": false,
                 "setter": false,
@@ -1026,7 +1047,7 @@ export class CoOptionList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder del buscador integrado."
                 },
                 "getter": false,
                 "setter": false,
@@ -1046,7 +1067,7 @@ export class CoOptionList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Espera en ms entre la \u00FAltima tecla y el `coSearch` (default 350)."
                 },
                 "getter": false,
                 "setter": false,
@@ -1086,7 +1107,7 @@ export class CoOptionList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Cargando: sin filas muestra un loader en lugar de la lista; con filas,\nun loader al pie. Mientras est\u00E1 activo no se emite `coLoadMore`."
                 },
                 "getter": false,
                 "setter": false,
@@ -1146,7 +1167,7 @@ export class CoOptionList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto cuando no hay filas y no se est\u00E1 cargando."
                 },
                 "getter": false,
                 "setter": false,
@@ -1246,7 +1267,7 @@ export class CoOptionList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Forma del `co-avatar` de las filas que traen avatar: `circle` (default) o `square`."
                 },
                 "getter": false,
                 "setter": false,
@@ -1317,7 +1338,7 @@ export class CoOptionList {
                 "composed": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "T\u00E9rmino del buscador integrado, con debounce (`searchDebounce`); `''` al vaciarlo\no tras `clearSearch()`. No burbujea."
                 },
                 "complexType": {
                     "original": "string",
@@ -1332,7 +1353,7 @@ export class CoOptionList {
                 "composed": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Selecci\u00F3n pedida (el componente no muta `value`). `detail.value`: el id elegido,\nel array completo en `multiple`, o `null` al deseleccionar en single;\n`detail.item`: la fila involucrada. No burbujea."
                 },
                 "complexType": {
                     "original": "{ value: string | string[] | null; item: OptionListItem }",
@@ -1354,7 +1375,7 @@ export class CoOptionList {
                 "composed": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Pide la p\u00E1gina siguiente: al acercarse el scroll al final, o si las filas\ncargadas no llenan el panel. Solo con m\u00E1s resultados (`total`/`hasMore`) y\nsin `loading`. Sin `detail`. No burbujea."
                 },
                 "complexType": {
                     "original": "void",
@@ -1369,7 +1390,7 @@ export class CoOptionList {
                 "composed": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Click en la fila \u00ABquitar selecci\u00F3n\u00BB (`clearOptionLabel`). Sin `detail`. No burbujea."
                 },
                 "complexType": {
                     "original": "void",
@@ -1384,7 +1405,7 @@ export class CoOptionList {
                 "composed": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Click en la X de una fila seleccionada (`removableItems`); `detail` = id de la fila. No burbujea."
                 },
                 "complexType": {
                     "original": "string",
@@ -1491,7 +1512,7 @@ export class CoOptionList {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Re-toma el snapshot selected-first. El host la llama al abrir su panel.",
                     "tags": []
                 }
             },

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

@@ -1,3 +1,7 @@
+/**
+ * @prop --co-overlay-bg: Color del fondo (default negro al 40%).
+ * @prop --co-overlay-blur: Desenfoque del fondo (default 2px); queda fuera del interruptor `--co-glass-filter`.
+ */
 :host {
   display: contents;
 }