@prolibu-suite/cobalt-core 0.10.3 → 0.11.0

package/dist/types/components/co-menu-item/co-menu-item.d.ts

@@ -33,6 +33,14 @@ export declare class CoMenuItem {
     /** Renders a trailing check (size 15) after the label. Pair with `selected`
      *  to mark the chosen option in a single-select menu. */
     trailingCheck: boolean;
+    /** Reserva un check de 12px AL INICIO de la fila (antes del ícono/label).
+     *  A diferencia de `trailingCheck` (que solo se monta si el prop está en
+     *  true), acá el HUECO (12px + el gap de la fila) se reserva SIEMPRE que
+     *  `leadingCheck` esté activo — el `co-icon` de adentro solo se monta si
+     *  además `selected` es true, así todas las filas de un menú de selección
+     *  única (formas, plantillas de página) quedan alineadas aunque solo una
+     *  esté marcada. Pensado para menús con `co-menu surface="dark"`. */
+    leadingCheck: boolean;
     /** Visually disabled — pointer events ignored, opacity reduced. */
     disabled: boolean;
     /** `danger` shifts text + icon to the destructive color. Use for Delete, etc. */
@@ -52,6 +60,15 @@ export declare class CoMenuItem {
     submenuPlacementValue: Placement;
     private closeTimer?;
     private rowEl?;
+    /** Publica el submenú abierto como atributo del HOST (`data-submenu-open`).
+     *  Prefijo `data-`: es un atributo que el componente escribe solo, no una
+     *  API que se setea desde afuera, y sin prefijo ensuciaba el espacio de
+     *  nombres de atributos estándar (review final 2).
+     *  `submenuOpen` es `@State` y vive en el shadow: sin esto, el `co-menu`
+     *  ancestro no tiene forma de saber qué panel está activo para dirigir las
+     *  flechas (ver `getMenuItems` en co-menu.tsx). Aditivo: un atributo de solo
+     *  lectura que nadie más consume; el resto del componente no cambia. */
+    onSubmenuOpenChange(isOpen: boolean): void;
     /** Programmatic focus — used by `co-menu`'s keyboard navigation. Named
      *  `focusItem` (not `focus`) because Stencil reserves the latter (it shadows
      *  HTMLElement.prototype.focus). */

package/dist/types/components/co-modal/co-modal.d.ts

@@ -32,19 +32,77 @@ export declare class CoModal {
      */
     closeOnEscape: boolean;
     /**
-     * Modal width: sm (400px), md (540px), lg (680px),
+     * Modal width: xs (369px, vía `--co-modal-width` — Task C12, paneles
+     * anclados como "Tipografía y color"), sm (400px), md (540px), lg (680px),
      * full (min(1400px, 95vw) × 92vh — media/document viewers).
      *
      * `full` also drops the body padding and lets the body grow, so a slotted
      * <video>/<iframe> fills the panel edge-to-edge instead of sitting in a
      * content-height box.
      */
-    size: 'sm' | 'md' | 'lg' | 'full';
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'full';
     /** Hide body section and all border dividers (compact confirm dialogs) */
     noDividers: boolean;
     /** Hairline between header and body. `false` lets the body run straight
      *  under the heading (Figma modals whose first row is a segmented control). */
     headerDivider: boolean;
+    /**
+     * Visual treatment (Task C12). `default` = superficie squircle actual
+     * (radio `--co-modal-r`, sombra que sigue la silueta). `panel` = superficie
+     * plana (radio 12, borde `--co-semantic-border-subtle`, `--co-shadow-lg`),
+     * SIN máscara squircle — look de panel anclado, no de diálogo centrado.
+     *
+     * `dialog` (Task M1) = la anatomía del componente "Modal" del design system
+     * (Figma Prolibu UI Suite, nodo `1179:37247`): superficie plana radio 16
+     * (`--co-border-radius-lg`) sin borde ni sombra propios, título 22/500 y
+     * cuerpo 16/1.5 `text-secondary` sin divisor entre ambos, padding 32
+     * (`--co-spacing-3xl`), footer 16/24 con hairline `border-subtle` y botones
+     * cuadrados de radio 12. Sin máscara squircle. El ✕ (si `closable`) es el
+     * redondo de 32 del modo `panel`.
+     */
+    appearance: 'default' | 'panel' | 'dialog';
+    /**
+     * Control del scrim (Task C12). `none` = sin fondo oscuro y sin cierre por
+     * clic afuera — independiente de `closeOnOverlay` (que solo aplica cuando
+     * SÍ hay scrim). `co-overlay` es quien posee el único `<div>` de scrim del
+     * árbol, así que `none` implica no montar `<co-overlay>` (ver `inline`).
+     */
+    backdrop: 'default' | 'none';
+    /**
+     * Renderiza en `position: fixed` con su propio `--co-modal-z-index` en vez
+     * de promoverse al TOP LAYER del browser (Task C12). `co-overlay` promueve
+     * su scrim al top layer vía Popover API (`showPopover()`); el top layer
+     * SIEMPRE pinta por encima de cualquier `z-index` normal, así que un
+     * portal propio del consumidor (selector de fuente/color del editor) con
+     * z-index alto quedaría igual TAPADO detrás del modal. `inline` evita eso.
+     *
+     * `co-overlay` es también quien posee la promoción a top layer — no hay
+     * forma de pedirle "no te promuevas" sin tocar ese componente (fuera de
+     * alcance de esta task), así que, igual que `backdrop="none"`, `inline`
+     * implica no montar `<co-overlay>`: el panel pasa a posicionarse y apilarse
+     * solo (`.co-modal__frame--standalone`, ver co-modal.css).
+     */
+    inline: boolean;
+    /**
+     * Opt-in: el modal se MUEVE arrastrando su header (Task D1). Default false →
+     * los consumidores actuales quedan byte-idénticos (ni DOM ni CSS cambian).
+     *
+     * Con `movable`, el `part="header"` entero es la zona de agarre (`cursor:
+     * grab`), salvo los controles que contenga (el ✕, y cualquier botón, enlace
+     * o campo: ver `isInteractiveDragTarget`). Soltar confirma la posición;
+     * `pointercancel` o perder el foco de la ventana la CANCELAN y dejan la
+     * anterior. La posición no se persiste: cerrar y reabrir devuelve el panel a
+     * su lugar por defecto.
+     *
+     * Se llama `movable` y no `draggable` a propósito: `draggable` es un atributo
+     * global de HTML (arrastre nativo HTML5) y una prop de React, y una prop del
+     * mismo nombre taparía `HTMLElement.draggable` con dos semánticas encimadas.
+     */
+    movable: boolean;
+    /** Verdadero cuando NO corresponde montar `<co-overlay>` — ver doc de
+     *  `backdrop` e `inline` arriba: ambas comparten el mismo mecanismo porque
+     *  co-overlay es la única superficie dueña del scrim Y del top layer. */
+    private get usesOverlay();
     /** Emitted when the modal requests to close */
     coClose: EventEmitter<void>;
     /** Close animation finished. */
@@ -56,8 +114,59 @@ export declare class CoModal {
     private handleFooterSlotChange;
     private handleOverlayClick;
     private handleCloseClick;
+    /** Freno del clic del panel: existe SOLO para que un clic adentro no llegue
+     *  al `<co-overlay>`, que cierra con cualquier clic sobre su div. Sin
+     *  overlay (`inline` / `backdrop="none"`) no hay nada que proteger, y el
+     *  freno se tragaba los `onClick` de React del contenido proyectado (React
+     *  delega en la raíz; el camino compuesto del evento cruza este div). Por
+     *  eso se monta condicionado a `usesOverlay` — ver `render()`. */
     private stopPropagation;
     handleKeydown(e: KeyboardEvent): void;
     private handleTransitionEnd;
+    /** Gesto en curso: pinta el cursor `grabbing` (única razón para re-render). */
+    dragging: boolean;
+    /** Desplazamiento YA confirmado. El gesto siguiente arranca desde acá. */
+    private committedOffset;
+    /** Desplazamiento en vivo (= el confirmado mientras no hay gesto). */
+    private liveOffset;
+    private dragPointerId?;
+    private dragStart?;
+    /** Caja del panel y viewport medidos UNA vez al empezar: nada de rects por `pointermove`. */
+    private dragRect?;
+    private dragViewport?;
+    private headerEl?;
+    /**
+     * La posición no se persiste: cada APERTURA arranca desde la posición por
+     * defecto. El reset va al abrir y no al cerrar a propósito — reseteando al
+     * cerrar, el panel se teletransportaba al centro mientras corría su
+     * animación de salida (un consumidor que lo deja montado y solo apaga
+     * `open` lo veía saltar).
+     */
+    resetPositionOnOpen(open: boolean): void;
+    private handleDragDown;
+    private handleDragMove;
+    /** Soltar CONFIRMA la posición alcanzada. */
+    private handleDragUp;
+    /** `pointercancel` CANCELA: el panel vuelve a la última posición confirmada. */
+    private handleDragCancel;
+    /** Perder el foco de la ventana (alt-tab, un iframe que se lo lleva) cancela igual que `pointercancel`. */
+    private handleWindowBlur;
+    disconnectedCallback(): void;
+    private endDrag;
+    /** `==`: en jsdom los MouseEvent traen `pointerId` undefined y deben seguir pasando. */
+    private isActiveDragPointer;
+    /** `setPointerCapture` sigue el gesto fuera del header (y garantiza el `pointercancel`). */
+    private capturePointer;
+    private releasePointer;
+    /**
+     * Escribe el desplazamiento como custom property en el panel; la regla que la
+     * consume vive en `.co-modal--movable` (co-modal.css).
+     *
+     * Va por el DOM y no por el `style` del vdom a propósito: el `transform` del
+     * panel es la animación de apertura (`scale`), así que el desplazamiento usa
+     * la propiedad independiente `translate` — se compone con ese transform, no
+     * dispara layout, y al no declararla el vdom ningún re-render la pisa.
+     */
+    private writeOffset;
     render(): any;
 }

package/dist/types/components/co-option-list/co-option-list.d.ts

@@ -8,6 +8,7 @@ import type { OptionListItem } from './optionListLogic';
  * 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.
  *
+ * @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>).
  */
 export declare class CoOptionList {
@@ -134,6 +135,13 @@ export declare class CoOptionList {
      */
     onValueChange(): void;
     /** 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
+     * vive ACÁ, así que sin esto la búsqueda anterior reaparecía con la lista del
+     * host ya sin filtrar.
+     */
+    clearSearch(): Promise<void>;
     snapshotOrder(): Promise<void>;
     /**
      * Enfoca el input de búsqueda esperando visibilidad real: el panel del host

package/dist/types/components/co-option-list/optionListLogic.d.ts

@@ -19,6 +19,9 @@ export interface OptionListItem {
     };
     /** Phosphor icon como leading visual (si no hay avatar/color). */
     icon?: string;
+    /** Tinte del icono (CSS color, p.ej. `var(--co-color-primary-azul)`): pinta el icono en un tile de 22px con el
+     *  tinte al 12 % de fondo (paletas por categoría). Sin él, el icono va pelado como siempre. */
+    iconTint?: string;
     /** Color del dot / ring del avatar. */
     color?: string;
     /** Iniciales del avatar. */

package/dist/types/components/co-popover/co-popover.d.ts

@@ -23,6 +23,32 @@ export declare class CoPopover {
     closeOnEscape: boolean;
     /** Flip placement when the panel would overflow the viewport. */
     flip: boolean;
+    /**
+     * El panel no pinta fondo/borde/sombra propios (Task C10, Fase 2 Cobalt):
+     * para alojar un `co-menu` (u otro contenido con su propio chrome) sin
+     * "doble chrome". Reflejado como atributo `bare`. Default `false` = panel
+     * con el fondo/borde/sombra de siempre (`--co-popover-border-color` /
+     * `--co-popover-shadow`), sin cambio.
+     */
+    bare: boolean;
+    /**
+     * Elemento (o selector resuelto contra `document`) al que se alinea el
+     * panel EN VEZ del trigger (Task C10, Fase 2 Cobalt) — p.ej. la píldora
+     * completa del zoom, no solo el botón "▾" que abre el menú. Un selector sin
+     * match cae al trigger (comportamiento actual). Sin `anchor`, cero cambio.
+     */
+    anchor?: HTMLElement | string;
+    /**
+     * Desplazamiento en px sobre el eje CRUZADO del `placement` (Task C10, Fase
+     * 2 Cobalt): con un placement vertical (`top*`/`bottom*`) mueve `left`; con
+     * uno horizontal (`left*`/`right*`) mueve `top`. Default 0 = sin cambio.
+     *
+     * ⚠️ Se aplica ANTES del clamp de 4px a los bordes del viewport (ver
+     * `computePosition` en `utils/positioning.ts`) — un `shift` grande cerca de
+     * un borde puede quedar clampeado igual que hoy, no lo evita. No hay forma
+     * de pedir un `shift` que se salga de pantalla a propósito.
+     */
+    shift: number;
     coOpen: EventEmitter<void>;
     coClose: EventEmitter<void>;
     /** El placement REAL con el que quedó el panel, ya pasado por el flip — que
@@ -43,6 +69,8 @@ export declare class CoPopover {
     private triggerEl?;
     private panelEl?;
     private rafId?;
+    /** El trigger se vio al menos una vez desde que abrió (ver `updatePosition`). */
+    private anchorSeenVisible;
     private scrollParents;
     private cachedOffsetAncestor;
     private offsetAncestorComputed;
@@ -57,9 +85,19 @@ export declare class CoPopover {
     toggle(): Promise<void>;
     show(): Promise<void>;
     hide(): Promise<void>;
+    private pressStartedInside;
+    private handleDocumentPointerDownManual;
     private handleDocumentClickManual;
     private handleDocumentKeydownManual;
     private updatePosition;
+    /**
+     * Resuelve la prop `anchor` a un elemento (Task C10, Fase 2 Cobalt):
+     *   - `HTMLElement` → se usa tal cual.
+     *   - `string` → selector resuelto contra `document`; sin match, `null`
+     *     (el llamador cae a `triggerRect`, el comportamiento de siempre).
+     *   - sin `anchor` → `null` (mismo fallback).
+     */
+    private resolveAnchor;
     /**
      * Promote the panel to the browser top layer (Popover API) so an ancestor's
      * filter / mask / overflow / transform can't clip it. Mirrors co-overlay.

package/dist/types/components/co-rich-text-editor/co-rich-text-editor.d.ts

@@ -145,10 +145,8 @@ export declare class CoRichTextEditor {
     private _loadedAccountFonts;
     private _fontLoaderCalled;
     private _fontLoaderLoading;
-    /** Last emitted JSON string — guards the value Watch against feedback loops. */
-    private lastEmittedJson;
-    /** Last emitted HTML string — parents often send HTML back via value prop. */
-    private lastEmittedHtml;
+    /** Guarda anti-eco compartida (utils/rich-text-host). */
+    private echo;
     /** True while applying an external value (suppresses emit). */
     private applyingExternal;
     private rt;
@@ -172,7 +170,6 @@ export declare class CoRichTextEditor {
     /** Whether the image node is enabled (mirrors presets.ts `wantImage` logic). */
     private get imagesEnabled();
     private get parsedFeatures();
-    private parseValue;
     private sanitizeHtml;
     private buildOutput;
     private handleUpdate;

package/dist/types/components/co-rich-text-toolbar/co-rich-text-toolbar.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { Editor, ToolbarEntry } from '@prolibu-suite/cobalt-rich-text';
+import type { Editor, ToolbarEntry, ToolbarExtraItem } from '@prolibu-suite/cobalt-rich-text';
 /**
  * Formatting toolbar for co-rich-text-editor. Receives the Tiptap editor
  * instance via the `editor` JS property, runs commands, and reflects active
@@ -14,7 +14,7 @@ export declare class CoRichTextToolbar {
     /** Editor instance (set as a property by the host editor). */
     editor?: Editor;
     /** Toolbar layout variant. */
-    variant: 'none' | 'compact' | 'compact-assets' | 'basic' | 'notes' | 'email' | 'full';
+    variant: 'none' | 'compact' | 'compact-assets' | 'basic' | 'notes' | 'email' | 'full' | 'document';
     /** Placement inside co-rich-text-editor. `bottom` drops the toolbar's own bottom
      * border/background/rounding: the editor's toolbar row paints the separator. */
     position: 'top' | 'bottom';
@@ -28,6 +28,13 @@ export declare class CoRichTextToolbar {
     attachmentsEnabled: boolean;
     /** `accept` attr for the attachment file picker (e.g. '.pdf,.png'). */
     attachmentAccept?: string;
+    /** Muestra «Encabezado» (variante document). co-document-editor lo apaga mientras se edita la banda. */
+    documentHeaderEnabled: boolean;
+    /**
+     * Botones del host al final de la barra (propiedad JS o JSON): `[{ id, label, icon? }]`.
+     * Su clic emite `coAction` con `{ action: id, payload: { extra: true } }` y no toca el editor.
+     */
+    extraItems?: ToolbarExtraItem[] | string;
     /** Emitted whenever a toolbar action runs (observability for hosts). */
     coAction: EventEmitter<{
         action: string;
@@ -81,6 +88,8 @@ export declare class CoRichTextToolbar {
     componentWillLoad(): void;
     onVariantChange(v: string): void;
     onAttachmentsEnabledChange(): void;
+    onDocumentHeaderEnabledChange(): void;
+    private get parsedExtraItems();
     onEditorChange(next?: Editor, prev?: Editor): void;
     /**
      * Command whose presence in the schema proves an item's extension is loaded.
@@ -88,6 +97,12 @@ export declare class CoRichTextToolbar {
      * link, paragraph/heading, undo/redo, text color) and are always shown.
      */
     private static readonly ITEM_COMMAND;
+    /**
+     * 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).
+     */
+    private static readonly DOCUMENT_ITEM_COMMAND;
     /**
      * Resolve a variant to the items actually usable in the current editor:
      * hide any control whose extension the active preset didn't load, then

package/dist/types/components/co-select/co-select.d.ts

@@ -21,6 +21,8 @@ export declare class CoSelect {
     placeholder: string;
     disabled: boolean;
     iconLeft?: string;
+    /** Tamaño (px) del `co-icon` de `iconLeft`. Sin setear, conserva el actual (16). */
+    iconSize?: number;
     clearable: boolean;
     helperText?: string;
     /** Label layout: vertical (label above) or horizontal (label beside) */
@@ -29,12 +31,25 @@ export declare class CoSelect {
     options: SelectOption[] | string[] | string;
     value: string | string[];
     multiple: boolean;
-    size: 's' | 'sm' | 'md' | 'lg';
+    size: 'xs' | 's' | 'sm' | 'md' | 'lg';
     /** 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. */
-    variant: 'default' | 'flat';
+     *  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. */
+    variant: 'default' | 'flat' | 'soft';
+    /** 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í). */
+    labelStyle: 'default' | 'inline-help';
+    /** 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. */
+    menuSurface: 'light' | 'dark';
     /** Show a search box inside the dropdown to filter options client-side. */
     searchable: boolean;
     searchPlaceholder: string;
@@ -56,10 +71,15 @@ export declare class CoSelect {
     private optionsContainerEl?;
     private osInstance?;
     private searchInputEl?;
+    /** 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`). */
+    private rowMetrics;
     /** Scroll pendiente hacia la opción activa, resuelto en componentDidRender. */
     private pendingActiveScroll;
     private activeScrollFrames;
-    private static readonly ITEM_HEIGHT;
+    /** 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. */
     private static readonly VIEWPORT_ITEMS;
     private static readonly OVERSCAN;
     /** Ids del shadow root (únicos por instancia sin sufijos aleatorios).
@@ -98,6 +118,12 @@ export declare class CoSelect {
     /** Al abrir, la activa arranca en la opción seleccionada (la primera de ellas
      *  en multiple) para que las flechas continúen desde donde el usuario está. */
     private resetActiveIndex;
+    /** 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. */
+    private readCssLengthPx;
     onOpenChange(open: boolean): void;
     private handleSearchInput;
     private handleTriggerClick;
@@ -115,6 +141,19 @@ export declare class CoSelect {
      *  intacto. */
     private handleNavKeyDown;
     private setActiveIndex;
+    /** 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`). */
+    private handleOptionPointerMove;
     /** Enter/Space sobre una opción deshabilitada no hace nada — igual que el
      *  click (la tecla igual se consume: el panel abierto no togglea). */
     private activateActiveOption;
@@ -153,6 +192,9 @@ export declare class CoSelect {
     disconnectedCallback(): void;
     /** Option label with the matched substring wrapped for highlighting. */
     private renderLabel;
+    /** `?? LEGACY`: el harness de specs no siembra inicializadores de campo en
+     *  todos los casos; en el build real `rowMetrics` siempre existe. */
+    private get metrics();
     private getVirtualSlice;
     render(): any;
 }

package/dist/types/components/co-select/virtualRows.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Geometría del virtualizador de filas de `co-select`, pura: recibe medidas y
+ * devuelve medidas, sin tocar el DOM (el componente es el que las lee del CSS).
+ *
+ * El paso de una fila es su ALTO más el HUECO hasta la siguiente. Los dos salen
+ * de los knobs del menú (`--co-select-option-height`, `--co-select-menu-gap`);
+ * sin ellos rige el paso de 0.10.x (ver `LEGACY_ROW_METRICS`).
+ */
+export interface RowMetrics {
+    /** Alto de una fila, en px. */
+    rowHeight: number;
+    /** Hueco entre dos filas consecutivas, en px (no hay hueco después de la última). */
+    gap: number;
+}
+/**
+ * Paso histórico, el de 0.10.x: 34 px por fila, sin hueco. Las filas por defecto
+ * miden 32 (`min-height`), así que el virtualizador reserva 2 px de más por fila
+ * — la lista corta muestra ese sobrante como aire al pie del panel. Se conserva
+ * TAL CUAL para que ningún consumidor actual vea cambiar el alto de su menú; el
+ * que setea `--co-select-option-height` obtiene el paso exacto de sus filas. Es
+ * el mismo 34 del fallback del `max-height` de `.co-select__options`.
+ */
+export declare const LEGACY_ROW_METRICS: Readonly<RowMetrics>;
+/** Alto de `count` filas apiladas: sin hueco colgando después de la última. */
+export declare function listHeight(count: number, m: RowMetrics): number;
+/** Ventana de filas a renderizar para un `scrollTop`, con `overscan` a cada lado. */
+export declare function virtualSlice(total: number, scrollTop: number, m: RowMetrics, viewportItems: number, overscan: number): {
+    totalHeight: number;
+    startIdx: number;
+    endIdx: number;
+    offsetY: number;
+};
+/**
+ * `scrollTop` que deja la fila `index` entera dentro de una ventana de
+ * `viewportItems` filas: si está arriba, la sube al borde superior; si está
+ * abajo, la pega al inferior; si ya se ve, no mueve nada.
+ */
+export declare function scrollTopToReveal(index: number, scrollTop: number, m: RowMetrics, viewportItems: number): number;
+/**
+ * Medidas a partir de los knobs. `readPx` devuelve el valor en px de una custom
+ * property, o `null` si no está seteada o no se puede resolver a px. Lo que
+ * falte o sea inválido (alto ≤ 0, hueco < 0, NaN) cae al valor histórico.
+ */
+export declare function resolveRowMetrics(readPx: (cssVar: string) => number | null): RowMetrics;

package/dist/types/components/co-slider/co-slider.d.ts

@@ -1,6 +1,26 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class CoSlider {
     label?: string;
+    /**
+     * Nombre accesible del control, SIN dibujar etiqueta. `label` hace las dos
+     * cosas a la vez (rotula y nombra), así que un slider sin etiqueta visible
+     * —los dos del panel de Multimedia del editor, y cualquier control con el
+     * rótulo afuera— se quedaba llamándose `"Slider"`: literal, en inglés y para
+     * todos los idiomas.
+     *
+     * Mismo nombre de prop que `co-fab`, `co-button` y `co-action-bar`, y la
+     * misma precedencia que `co-fab` y `co-action-bar` (`ariaLabelText || label`;
+     * `co-button` no tiene `label` que nombre: cae al texto de su contenido).
+     * El fallback final es propio de cada componente; acá, `"Slider"`. Aditiva —
+     * sin ella el markup y el `aria-label` son byte-idénticos a los de siempre.
+     *
+     * La resolución es por `||` sobre el valor RECIBIDO y no por un default de
+     * clase: un wrapper (`@lit/react`, el `defineContainer` de Vue) que pasa la
+     * prop sin valor manda `undefined` y pisa cualquier default sembrado por
+     * Stencil, así que `undefined` y `''` tienen que caer del lado de SIEMPRE —
+     * el mismo criterio que el `=== 'vertical'` de `isVertical`.
+     */
+    ariaLabelText?: string;
     secondaryLabel?: string;
     helperText?: string;
     status: 'default' | 'error' | 'success' | 'warning' | 'info';
@@ -13,17 +33,139 @@ export declare class CoSlider {
     showValue: boolean;
     /** Show min/max marks */
     showMarks: boolean;
+    /**
+     * Eje del control. `horizontal` (default) es el slider de siempre: mismo
+     * markup, mismo CSS, mismos eventos — la variante es ADITIVA y ningún
+     * consumidor actual (prolibu-front-v2) cambia de comportamiento.
+     *
+     * `vertical` INVIERTE el eje como manda la convención de un control de
+     * volumen: arriba es MÁS. El relleno crece desde abajo, el thumb se posiciona
+     * por `bottom`, y el largo del riel se ajusta con la variable
+     * `--co-slider-vertical-length` (default 120px).
+     *
+     * NO lleva `reflect`: reflejar una prop de string con default escribiría
+     * `orientation="horizontal"` en el host de TODOS los consumidores actuales, y
+     * eso ya sería cambiarles el markup. El estilo cuelga de la clase interna
+     * `.co-slider--vertical`, que es nuestra.
+     */
+    orientation: 'horizontal' | 'vertical';
     dragging: boolean;
     el: HTMLElement;
     coChange: EventEmitter<number>;
     coInput: EventEmitter<number>;
     private trackEl?;
+    /** Puntero dueño del gesto en curso: un segundo dedo no lo secuestra. */
+    private dragPointerId?;
+    /** ¿Algún `coInput` real durante el gesto? Sin cambio no hay `coChange` de cierre. */
+    private changedInGesture;
+    /**
+     * `=== 'vertical'` y no `!== 'horizontal'`: con `@stencil/vitest` las `@Prop`
+     * omitidas en `h()` llegan `undefined` (no se siembra el default), y un valor
+     * ausente tiene que caer del lado de SIEMPRE, que es el horizontal.
+     */
+    private get isVertical();
     private get percentage();
     private get statusIcon();
     private clamp;
     private snap;
-    private valueFromEvent;
+    /**
+     * Valor bajo el puntero. En horizontal el eje va de `left` a `right`; en
+     * vertical va de ABAJO hacia arriba (`bottom - clientY`), así que acercarse
+     * al borde superior sube el valor.
+     *
+     * El guard de tamaño evita el `NaN` que salía de dividir por un riel de 0px
+     * (track sin medir todavía, o dentro de un contenedor colapsado).
+     */
+    private valueFromPointer;
+    /**
+     * Aplica el valor y emite `coInput` SOLO si cambió — el contrato de la casa
+     * (gemelo de `commitInput` en co-color-slider / co-color-area).
+     *
+     * Que `coInput` sea condicional es lo que cierra el ciclo de vida del
+     * consumidor: en el editor `coInput` ABRE una foto de "antes" y `coChange` la
+     * LIBERA (`fill/gestureHistory.ts`). Con las dos condiciones atadas al mismo
+     * `changedInGesture`, vale la invariante **"todo gesto que emitió `coInput`
+     * termina con exactamente un `coChange`"**: si el valor nunca se movió no se
+     * abre ninguna foto, y si se movió —aunque vuelva al de partida— hay cierre.
+     * Emitir `coInput` en cada paso (como antes) y `coChange` solo si el valor
+     * FINAL difería dejaba fotos colgadas en la ida y vuelta 50→80→50.
+     */
+    private commitInput;
+    /** `==`: en jsdom un MouseEvent sintético trae `pointerId` undefined y debe seguir pasando. */
+    private isGesturePointer;
     private handlePointerDown;
+    private handleGesturePointerMove;
+    /**
+     * Fin del gesto — `pointerup` y también `pointercancel`, igual que el
+     * `handlePointerEnd` de co-color-slider / co-color-area: cancelar TERMINA el
+     * gesto y CONFIRMA lo alcanzado, no revierte.
+     *
+     * (Una versión anterior de esta rama revertía al valor previo con un `coInput`
+     * de rollback, copiando el arrastre de `co-modal movable`. Se descartó: el
+     * modal mueve una posición cosmética que no tiene canal de commit, mientras
+     * que acá el valor ES estado del host. Los dos sliders del propio design
+     * system confirman al cancelar, un `input type="range"` nativo también
+     * conserva el valor en `pointercancel`, y revertir obligaba al host a saber
+     * absorber un `coInput` de vuelta atrás — contrato de más, distinto al de los
+     * hermanos.)
+     */
+    private handleGestureEnd;
+    /** Perder el foco de la ventana (alt-tab, un iframe que se lo lleva) cierra
+     *  el gesto igual que un `pointercancel`: sin esto, un puntero que nunca
+     *  suelta su `pointerup` deja el arrastre vivo. */
+    private handleWindowBlur;
+    private bindGesture;
+    private unbindGesture;
+    /**
+     * Cierra el gesto y devuelve si hubo algún `coInput` — el ÚNICO lugar donde
+     * se apaga `changedInGesture`, para que todos los finales (pointerup,
+     * pointercancel, blur, desconexión) compartan la misma contabilidad.
+     *
+     * Que la bandera se desarme acá es lo que impide un `coChange` de más: antes
+     * solo se ponía en `false` al ARRANCAR el gesto siguiente, así que una vez
+     * movido el valor quedaba armada para siempre y `disconnectedCallback`
+     * —que cierra el gesto con su `coChange`— reemitía un commit con el valor ya
+     * escrito CADA vez que el elemento se desmontaba. En el editor eso marcaba el
+     * documento como "modificado" al cerrar el popover sin que hubiera edición;
+     * el evento de más le llega a cualquier consumidor.
+     */
+    private endGesture;
+    /**
+     * Desmontarse en pleno gesto tiene que dejar el componente como si nunca
+     * hubiera empezado: `endGesture()` y no solo `unbindGesture()`. Con `dragging`
+     * en `true`, una instancia que se desconecta y se vuelve a conectar (reorden
+     * de una lista keyed, un `Teleport`) quedaba sin listeners Y rechazando todo
+     * `pointerdown` por el guard de arriba: slider muerto al puntero para siempre.
+     *
+     * Y CIERRA el gesto con su `coChange`, como cualquier otro final: era el único
+     * camino donde la invariante ("todo gesto que emitió `coInput` termina con
+     * exactamente un `coChange`") no valía. Sin el cierre, un host que se recrea
+     * el subárbol con el thumb agarrado deja abierta la foto de "antes" del
+     * historial y la edición siguiente del mismo nodo se registra contra ella.
+     *
+     * El `dispatchEvent` sobre un nodo ya desconectado llega igual a los listeners
+     * puestos sobre el propio elemento, que es como enganchan `@lit/react` y el
+     * `defineContainer` de Vue.
+     */
+    disconnectedCallback(): void;
     private handleInputChange;
+    /**
+     * Flechas de la variante VERTICAL: las resuelve el componente en vez de
+     * delegarlas al range nativo, y solo ahí — en horizontal este handler NO se
+     * engancha (ver `render`), así que el camino de siempre no cambia en nada.
+     *
+     * Por qué: la orientación vertical del input se consigue con
+     * `writing-mode: vertical-rl` + `direction: rtl` (ver co-slider.css). Un motor
+     * que ignore `writing-mode` en form controls pero sí honre `direction`
+     * (Safari 17.0–17.3, Firefox < 129) deja ←/→ INVERTIDOS. Manejadas acá, las
+     * cuatro flechas siguen el eje en cualquier motor — arriba/derecha suben,
+     * abajo/izquierda bajan, de a `step` — y el contrato queda testeable (jsdom no
+     * implementa el teclado del range nativo).
+     *
+     * PageUp/PageDown/Home/End siguen siendo del nativo. Emite `coChange` y no
+     * `coInput`, exactamente como el paso de teclado del horizontal
+     * (`handleInputChange`): un paso discreto es un commit, no un preview.
+     */
+    private handleVerticalKeyDown;
     render(): any;
 }