@prolibu-suite/cobalt-core 0.10.4 → 0.11.0

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

@@ -749,6 +749,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 +929,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 +998,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 +1030,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 +1075,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 +1160,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;
+}
+

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { RequiredMark } from "../../utils/requiredMark";
 import { OverlayScrollbars } from "overlayscrollbars";
 import { highlightSegments, rankByMatch } from "../../utils/normalizeText";
+import { LEGACY_ROW_METRICS, resolveRowMetrics, scrollTopToReveal, virtualSlice } from "./virtualRows";
 export class CoSelect {
     constructor() {
         /** Whether the field is required (renders a required marker on the label). */
@@ -18,9 +19,22 @@ export class CoSelect {
         this.size = 'md';
         /** Visual style. `flat` strips the trigger's border and background so it
          *  reads as plain content instead of a boxed control — padding, label,
-         *  focus ring, disabled and status states are unaffected. `default` (the
-         *  standard bordered box) renders identically to before this prop existed. */
+         *  focus ring, disabled and status states are unaffected. `soft` pinta un
+         *  fondo `gray-100` sólido con borde transparente (mismo grosor que el
+         *  default, no cambia el tamaño de la caja). `default` (the standard
+         *  bordered box) renders identically to before this prop existed. */
         this.variant = 'default';
+        /** Layout de la fila de etiqueta. `inline-help` la muestra en una sola fila
+         *  (`label` a la izquierda, `secondaryLabel` a la derecha, alineados a la
+         *  línea de base) y ajusta el borde/gap del trigger para ese contexto
+         *  (modal). `default` mantiene el layout actual (labels apiladas arriba,
+         *  centradas verticalmente entre sí). */
+        this.labelStyle = 'default';
+        /** Superficie del panel desplegable. `dark` = fondo `surface-primary` +
+         *  texto `text-inverse`, con el check de la opción seleccionada al
+         *  INICIO (hueco siempre reservado, como `co-menu-item leadingCheck`).
+         *  `light` (default) conserva el panel y el check al final tal cual hoy. */
+        this.menuSurface = 'light';
         /** Show a search box inside the dropdown to filter options client-side. */
         this.searchable = false;
         this.searchPlaceholder = 'Search…';
@@ -39,12 +53,41 @@ export class CoSelect {
          *  Patrón APG de combobox: el foco NUNCA baja a las opciones — queda en el
          *  trigger (o en el search input) y esto viaja por `aria-activedescendant`. */
         this.activeIndex = -1;
+        /** Alto y hueco de fila con los que virtualiza la lista. Se leen de los knobs
+         *  del menú (`--co-select-option-height`, `--co-select-menu-gap`) en cada
+         *  apertura; sin knobs, el paso histórico de 34 (ver `virtualRows.ts`). */
+        this.rowMetrics = LEGACY_ROW_METRICS;
         /** Scroll pendiente hacia la opción activa, resuelto en componentDidRender. */
         this.pendingActiveScroll = false;
         this.activeScrollFrames = 0;
         this.lastParsedOptions = [];
         this.lastRankSearch = '';
         this.lastRanked = [];
+        /** Valor en px de una custom property heredada por el host, o `null` si no
+         *  está seteada o no resuelve a px. El caso común (`12px`, o un token `--co-*`
+         *  en px, que ya llega sustituido) se lee directo; cualquier otra forma
+         *  (`calc()`, `rem`…) la resuelve el motor CSS sobre un nodo de prueba
+         *  `display: none` que vive solo durante la lectura. */
+        this.readCssLengthPx = (cssVar) => {
+            if (typeof getComputedStyle !== 'function')
+                return null;
+            const raw = getComputedStyle(this.el).getPropertyValue(cssVar).trim();
+            if (!raw)
+                return null;
+            const px = /^(-?\d*\.?\d+)px$/.exec(raw);
+            if (px)
+                return parseFloat(px[1]);
+            const root = this.el.shadowRoot;
+            if (!root)
+                return null;
+            const probe = document.createElement('div');
+            probe.style.display = 'none';
+            probe.style.setProperty('height', `var(${cssVar})`);
+            root.appendChild(probe);
+            const resolved = getComputedStyle(probe).height;
+            probe.remove();
+            return /px$/.test(resolved) ? parseFloat(resolved) : null;
+        };
         this.handleSearchInput = (e) => {
             this.searchText = e.target.value;
             this.scrollTop = 0;
@@ -128,6 +171,24 @@ export class CoSelect {
             e.preventDefault();
             return true;
         };
+        /** El puntero MUEVE la activa: hay un solo resaltado, el de `--active`, y el
+         *  CSS ya no pinta `:hover` en las filas. Con los dos canales se veían DOS
+         *  filas resaltadas a la vez (la activa por teclado y la de abajo del mouse).
+         *
+         *  `pointermove` y no `mouseenter`/`mouseover`: cuando el TECLADO scrollea la
+         *  lista bajo un mouse quieto, el navegador actualiza el hover y dispara esos
+         *  eventos de borde, pero no un `pointermove` — la activa del teclado no se la
+         *  roba una fila que pasó por debajo del cursor (medido en Chromium).
+         *
+         *  Sin `scrollActiveIntoView`: la fila ya está bajo el puntero, scrollear la
+         *  haría saltar. El toque no cuenta: arrastrar el dedo es scrollear. Una fila
+         *  deshabilitada no llega acá (`pointer-events: none`). */
+        this.handleOptionPointerMove = (e, index) => {
+            if (e.pointerType === 'touch')
+                return;
+            if (this.activeIndex !== index)
+                this.activeIndex = index;
+        };
         /** Alinea el scroll REAL con la ventana virtual ya renderizada.
          *
          *  Escribe `scrollTop` DIRECTO sobre el viewport de OverlayScrollbars: el
@@ -153,8 +214,9 @@ export class CoSelect {
                 if (Math.abs(viewport.scrollTop - target) <= 1) {
                     this.pendingActiveScroll = false;
                     this.activeScrollFrames = 0;
-                    // Afinado dentro del slice ya visible (las alturas reales de fila no son
-                    // exactamente ITEM_HEIGHT). jsdom no implementa scrollIntoView.
+                    // Afinado dentro del slice ya visible (sin `--co-select-option-height`
+                    // las filas miden 32 y el paso histórico es 34). jsdom no implementa
+                    // scrollIntoView.
                     (_e = (_d = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.getElementById(this.optionId(this.activeIndex))) === null || _d === void 0 ? void 0 : _d.scrollIntoView) === null || _e === void 0 ? void 0 : _e.call(_d, { block: 'nearest' });
                     return;
                 }
@@ -325,6 +387,8 @@ export class CoSelect {
     onOpenChange(open) {
         if (open) {
             this.scrollTop = 0;
+            // ANTES de la activa: su scroll inicial se calcula con el paso de fila.
+            this.rowMetrics = resolveRowMetrics(this.readCssLengthPx);
             this.resetActiveIndex();
             if (this.searchable)
                 this.focusSearchWhenVisible();
@@ -357,7 +421,6 @@ export class CoSelect {
     /** Deja la opción activa dentro de la ventana virtual (state) y agenda el
      *  scroll real para después del próximo render. */
     scrollActiveIntoView() {
-        const { ITEM_HEIGHT, VIEWPORT_ITEMS } = CoSelect;
         const index = this.activeIndex;
         if (!(index >= 0))
             return;
@@ -365,13 +428,10 @@ export class CoSelect {
         // (apertura con la selección abajo, Home/End, wrap) no tendría nodo — y el
         // `aria-activedescendant` quedaría colgado. Se empuja la posición virtual
         // para que el próximo slice lo incluya.
-        const top = index * ITEM_HEIGHT;
-        const viewportH = ITEM_HEIGHT * VIEWPORT_ITEMS;
         const from = this.scrollTop || 0;
-        if (top < from)
-            this.scrollTop = top;
-        else if (top + ITEM_HEIGHT > from + viewportH)
-            this.scrollTop = top + ITEM_HEIGHT - viewportH;
+        const next = scrollTopToReveal(index, from, this.metrics, CoSelect.VIEWPORT_ITEMS);
+        if (next !== from)
+            this.scrollTop = next;
         // El scroll REAL se resuelve en componentDidRender, no en un rAF suelto:
         // al abrir, el @Watch('isOpen') corre ANTES de que Stencil agende el
         // re-render, así que un rAF pedido acá se ejecutaría con el slice viejo
@@ -448,17 +508,17 @@ export class CoSelect {
             return label;
         return segs.map((s) => (s.match ? h("span", { class: "co-select__match" }, s.text) : s.text));
     }
+    /** `?? LEGACY`: el harness de specs no siembra inicializadores de campo en
+     *  todos los casos; en el build real `rowMetrics` siempre existe. */
+    get metrics() {
+        var _a;
+        return (_a = this.rowMetrics) !== null && _a !== void 0 ? _a : LEGACY_ROW_METRICS;
+    }
     getVirtualSlice(items) {
-        const { ITEM_HEIGHT, VIEWPORT_ITEMS, OVERSCAN } = CoSelect;
-        const total = items.length;
-        const totalHeight = total * ITEM_HEIGHT;
-        const startIdx = Math.max(0, Math.floor(this.scrollTop / ITEM_HEIGHT) - OVERSCAN);
-        const endIdx = Math.min(total, startIdx + VIEWPORT_ITEMS + OVERSCAN * 2);
-        const offsetY = startIdx * ITEM_HEIGHT;
-        return { totalHeight, startIdx, endIdx, offsetY };
+        return virtualSlice(items.length, this.scrollTop || 0, this.metrics, CoSelect.VIEWPORT_ITEMS, CoSelect.OVERSCAN);
     }
     render() {
-        var _a;
+        var _a, _b;
         const selected = this.selectedValues;
         const options = this.filteredOptions;
         // Se calcula UNA vez sobre `options` (no en un getter): el virtualizador
@@ -468,25 +528,36 @@ export class CoSelect {
         const activeOptionId = this.isOpen && this.activeIndex >= 0 && this.activeIndex < options.length
             ? this.optionId(this.activeIndex)
             : undefined;
-        return (h("div", { key: '902da0519e9fe96401f5339a3b46a66c94efd3de', class: {
+        return (h("div", { key: 'f81d018b6e9057cca5f558a40a66a67429efca39', class: {
                 'co-select': true,
                 'co-select--open': this.isOpen,
                 'co-select--disabled': this.disabled,
                 [`co-select--${this.size}`]: true,
                 [`co-select--${this.status}`]: this.status !== 'default',
                 'co-select--flat': this.variant === 'flat',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '3faf027e94d30728d7715ebca758eb0d9cb41bc9', class: "co-select__labels" }, this.label && h("label", { key: 'a7267986158eae66be547356482df079e3670d44', class: "co-select__label" }, this.label, h(RequiredMark, { key: '5eaca0cfade91041b33edd07e648b1e22cb875f3', required: this.required })), this.secondaryLabel && h("span", { key: '3561fb5297dde4c128e9c888cdd00546c5e1b4c3', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '63fc16eefafcb8ef870aba457be9e00f5dce6f32', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '6056ec2a5d85df9d8361f4b78f12eec6e2fe7749', 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: '8877e366eba45e073a3481e7b86408763e103f6c', name: this.iconLeft, size: 16, class: "co-select__icon" }), ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.image) && (h("img", { key: '4f964e48dafff76a9fe04ed381b1f11113e351d6', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
+                'co-select--soft': this.variant === 'soft',
+                'co-select--inline-help': this.labelStyle === 'inline-help',
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'b8875d28b27b28f35ea679451e05f384e247a590', class: "co-select__labels" }, this.label && h("label", { key: '8267dfe3118bc0abdfc7d7f69df3f4f508ec0f85', class: "co-select__label" }, this.label, h(RequiredMark, { key: '7171c44a6cc349fcc1015135f59b3cf00a41ed68', required: this.required })), this.secondaryLabel && h("span", { key: '64ac3ddf910b79290f1fae86ecfc302923fe5c38', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '06e574f6d59174e09c819b768c25220f0d07f80d', 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: '2e5530aabda382b68dca90c65cb3c908403d3ae1', 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: '7c1f995379b3d775905d586023248fa9a6c7673c', 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: '0b22e952aac603604d80d670ff142147852d9e6c', 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: '55a94e3d877ec0c50ae4ce544774c6e4330b5f5e', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'b452121827aa8b2f341396b3376e82728bee5276', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '0ebc5a451bcb3f2f95a63ab600157e27cb445a9b', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: '92b18226a02de73cbd245ab6827c3f5593aa08fc', class: "co-select__dropdown" }, this.isOpen && this.searchable && (h("div", { key: '68aec7a4ced328a00a1185078edbbfe4820d6582', class: "co-select__search" }, h("co-icon", { key: '1aa322cf22d4824bf6d2012b6dfc4e856360502a', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '62ec52d3369334f83709bc5219d5b3ca040c3ccb', 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: '86613208aa94d79b6aa503a6ed53c010cc1ba1f9', class: "co-select__empty" }, this.emptyText)), h("div", { key: 'a6b1f09abfbfb0171094079c3da7ac89764eb00f', class: "co-select__options", id: CoSelect.LISTBOX_ID, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
+        }))) : (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: '6373aacf7257463c045b5ca7f3df2436ca69e0a5', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'cb76f5e754e330553833c9c242b70323595bb16c', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: 'abadb4134656649cf72ffbdb3f4438058bdfca15', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: 'c83a9bd2367dfcbb75e42c2e5640c2ebf5cf6e5b', class: {
+                'co-select__dropdown': true,
+                'co-select__dropdown--dark': this.menuSurface === 'dark',
+            } }, this.isOpen && this.searchable && (h("div", { key: 'df705652347737ed23ec60d4f6c0bfd8d7debd5a', class: "co-select__search" }, h("co-icon", { key: '8a59fced83b93044ed59c804f17c056c262845f1', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '648f16cc6bdd726ae0c3e00be4957c9578dac035', 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: '2548a14f6a7a47c74467ad3f61c7950df242616d', class: "co-select__empty" }, this.emptyText)), h("div", { key: 'f09eaf5dbdfa2cf73ddb6e3e4560dd72e7cc26a4', 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
             // opciones sigan siendo hijas del listbox en el árbol de a11y.
-            h("div", { role: "presentation", class: "co-select__virtual-spacer", style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { role: "presentation", style: { position: 'absolute', top: `${offsetY}px`, left: '0', right: '0' } }, options.slice(startIdx, endIdx).map((opt, i) => {
+            h("div", { role: "presentation", class: "co-select__virtual-spacer", style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { role: "presentation", class: "co-select__virtual-window", style: { position: 'absolute', top: `${offsetY}px`, left: '0', right: '0' } }, options.slice(startIdx, endIdx).map((opt, i) => {
                 const index = startIdx + i;
                 const isSelected = selected.includes(opt.value);
                 const isDisabled = !!opt.disabled;
@@ -495,9 +566,9 @@ export class CoSelect {
                         'co-select__option--selected': isSelected,
                         'co-select__option--disabled': isDisabled,
                         'co-select__option--active': index === this.activeIndex,
-                    }, onClick: () => !isDisabled && this.handleOptionClick(opt.value) }, opt.image ? (h("img", { class: "co-select__option-flag", src: opt.image, alt: "", loading: "lazy" })) : opt.icon ? (h("co-icon", { name: opt.icon, size: 20, class: "co-select__option-icon" })) : null, h("span", { class: "co-select__option-label" }, this.renderLabel(opt.label)), isSelected && h("co-icon", { name: "check", size: 16, class: "co-select__option-check" })));
+                    }, 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: '5f5d60d846092aed435e292a4652ad7016cb6aee', class: "co-select__footer", primaryLabel: this.footerPrimaryLabel, primaryIcon: "check", onCoPrimary: this.handleFooterPrimary })))), this.helperText && (h("div", { key: '72ebb3366ee45eaccce69f534611804f8f1dbc1c', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '2f2ad274cf521c3bd9f21d66d0fa9b7c87f7ba71', name: this.statusIcon, size: 14, class: "co-select__helper-icon" }), h("span", { key: '3e1ef4abb47a61d173e1942f5798caff97c2347e', class: "co-select__helper-text" }, this.helperText)))));
+        })()), this.isOpen && this.showFooter && (h("co-list-footer", { key: 'a8ccc1cfac2642b880653a16f19fc768f45050b3', class: "co-select__footer", primaryLabel: this.footerPrimaryLabel, primaryIcon: "check", onCoPrimary: this.handleFooterPrimary })))), this.helperText && (h("div", { key: '2ba1d5f26b6c64b81257658b0f5774b1480e3a82', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'd5fb9bf114c88f281ca50026dc12b25fc64f2660', name: this.statusIcon, size: 14, class: "co-select__helper-icon" }), h("span", { key: '70ad047f17a30c7e5d06026ca8dfeda603be312e', class: "co-select__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-select"; }
     static get encapsulation() { return "shadow"; }
@@ -649,6 +720,25 @@ export class CoSelect {
                 "reflect": false,
                 "attribute": "icon-left"
             },
+            "iconSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o (px) del `co-icon` de `iconLeft`. Sin setear, conserva el actual (16)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size"
+            },
             "clearable": {
                 "type": "boolean",
                 "mutable": false,
@@ -737,7 +827,7 @@ export class CoSelect {
                     "references": {
                         "SelectOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-0.10.3/packages/core/src/components/co-select/co-select.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-select/co-select.tsx",
                             "id": "src/components/co-select/co-select.tsx::SelectOption"
                         }
                     }
@@ -798,8 +888,8 @@ export class CoSelect {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'s' | 'sm' | 'md' | 'lg'",
-                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "original": "'xs' | 's' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\" | \"xs\"",
                     "references": {}
                 },
                 "required": false,
@@ -818,15 +908,15 @@ export class CoSelect {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'flat'",
-                    "resolved": "\"default\" | \"flat\"",
+                    "original": "'default' | 'flat' | 'soft'",
+                    "resolved": "\"default\" | \"flat\" | \"soft\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual style. `flat` strips the trigger's border and background so it\nreads as plain content instead of a boxed control \u2014 padding, label,\nfocus ring, disabled and status states are unaffected. `default` (the\nstandard bordered box) renders identically to before this prop existed."
+                    "text": "Visual style. `flat` strips the trigger's border and background so it\nreads as plain content instead of a boxed control \u2014 padding, label,\nfocus ring, disabled and status states are unaffected. `soft` pinta un\nfondo `gray-100` s\u00F3lido con borde transparente (mismo grosor que el\ndefault, no cambia el tama\u00F1o de la caja). `default` (the standard\nbordered box) renders identically to before this prop existed."
                 },
                 "getter": false,
                 "setter": false,
@@ -834,6 +924,46 @@ export class CoSelect {
                 "attribute": "variant",
                 "defaultValue": "'default'"
             },
+            "labelStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'inline-help'",
+                    "resolved": "\"default\" | \"inline-help\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout de la fila de etiqueta. `inline-help` la muestra en una sola fila\n(`label` a la izquierda, `secondaryLabel` a la derecha, alineados a la\nl\u00EDnea de base) y ajusta el borde/gap del trigger para ese contexto\n(modal). `default` mantiene el layout actual (labels apiladas arriba,\ncentradas verticalmente entre s\u00ED)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label-style",
+                "defaultValue": "'default'"
+            },
+            "menuSurface": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Superficie del panel desplegable. `dark` = fondo `surface-primary` +\ntexto `text-inverse`, con el check de la opci\u00F3n seleccionada al\nINICIO (hueco siempre reservado, como `co-menu-item leadingCheck`).\n`light` (default) conserva el panel y el check al final tal cual hoy."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "menu-surface",
+                "defaultValue": "'light'"
+            },
             "searchable": {
                 "type": "boolean",
                 "mutable": false,
@@ -1001,7 +1131,8 @@ export class CoSelect {
             }];
     }
 }
-CoSelect.ITEM_HEIGHT = 34;
+/** Filas visibles sin scroll. Es el mismo 8 del `max-height` de
+ *  `.co-select__options` (8 altos + 7 huecos): si cambia uno, cambia el otro. */
 CoSelect.VIEWPORT_ITEMS = 8;
 CoSelect.OVERSCAN = 3;
 /** Ids del shadow root (únicos por instancia sin sufijos aleatorios).