@prolibu-suite/cobalt-core 0.10.3 → 0.11.0

package/dist/types/components/co-swatch-grid/co-swatch-grid.d.ts

@@ -0,0 +1,37 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Grilla de muestras de color ("Colores recientes" del popover de relleno).
+ * Listbox de una sola selección: click (o Enter/Espacio) emite `coSelect` con
+ * el color; las flechas solo mueven el foco (roving tabindex).
+ *
+ * Los colores claros (luminancia WCAG > 0,85) reciben un borde automático
+ * para no fundirse con el fondo del panel.
+ */
+export declare class CoSwatchGrid {
+    el: HTMLElement;
+    /** Colores a mostrar (hex/rgba), en orden de lectura. */
+    colors: string[];
+    /** Color seleccionado (anillo `accent`); se compara sin distinguir mayúsculas. */
+    value?: string;
+    /** Columnas de la grilla. */
+    columns: number;
+    /** Lado de cada swatch en px. */
+    swatchSize: number;
+    /** Separación entre swatches en px. */
+    gap: number;
+    /** Radio de cada swatch en px. */
+    radius: number;
+    /** aria-label del listbox. Vacío = el del `locale`. */
+    label?: string;
+    /** Locale de los strings integrados (es/en/pt). */
+    locale?: string;
+    /** Color elegido (el string tal cual vino en `colors`). */
+    coSelect: EventEmitter<string>;
+    private swatchEls;
+    private static normalize;
+    private get colorList();
+    private get columnCount();
+    private selectedIndex;
+    private handleKeyDown;
+    render(): any;
+}

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

@@ -6,8 +6,10 @@ export declare class CoTab {
     value: string;
     /** Whether this tab is active/selected */
     selected: boolean;
-    /** Size */
-    size: 'large' | 'small';
+    /** Size. 'large'/'small' son los tamaños históricos (pill/underline). 's' (28px)
+        y 'xs' (26px, excepción D-19 a la escala unificada) solo tienen chrome propio
+        en `variant="segmented"` — ver co-tab.css. */
+    size: 'large' | 'small' | 's' | 'xs';
     /** Visual variant: filled pill (default), underline tab, or segmented-control pill */
     variant: 'pill' | 'underline' | 'segmented';
     /** Optional count/badge pill rendered after the label */
@@ -18,6 +20,14 @@ export declare class CoTab {
     iconRight?: string;
     /** Disabled state */
     disabled: boolean;
+    /** Estira el botón interno (`part="tab"`) al 100% del host y centra su
+        contenido. Lo setea `co-tab-group` con `full-width` (se propaga a los
+        hijos igual que `size`, ver `syncTabs()`: el grupo sin `fullWidth` nunca
+        pisa uno puesto a mano acá): el grupo ya estiraba el host con
+        `::slotted(co-tab) { flex: 1 }`, pero el `.co-tab` de adentro seguía al
+        ancho del contenido. Reflejado para que `:host([full-width])` lo vea
+        desde el CSS. Sin él, nada cambia. */
+    fullWidth: boolean;
     /** Emitted when tab is clicked */
     coTabSelect: EventEmitter<string>;
     private handleClick;

package/dist/types/components/co-tab-group/co-tab-group.d.ts

@@ -5,17 +5,54 @@ export declare class CoTabGroup {
     value?: string;
     /** Visual variant, propagated to slotted co-tab children */
     variant: 'pill' | 'underline' | 'segmented';
+    /** Track/tab size — solo tiene chrome propio en `variant="segmented"`
+        ('s' = 28px, 'xs' = 26px, ver co-tab-group.css / co-tab.css). Se propaga
+        a los `co-tab` hijos igual que `variant` (mismo mecanismo, `syncTabs()`),
+        pero solo cuando está seteado: un grupo sin `size` nunca pisa un `size`
+        puesto a mano en un `co-tab` hijo. */
+    size?: 's' | 'xs';
+    /** Estira el host y el track al 100% del contenedor; cada `co-tab` hijo
+        reparte el ancho por igual (`::slotted(co-tab) { flex: 1 }`) y, como se
+        propaga a los hijos igual que `size` (`syncTabs()`), cada `co-tab`
+        estira además su `part="tab"` al 100% del host (`:host([full-width])
+        .co-tab` en co-tab.css). Mismo contrato que `size`: un grupo sin
+        `fullWidth` nunca pisa un `fullWidth` puesto a mano en un hijo, y al
+        apagarlo baja solo a los hijos que él mismo subió. */
+    fullWidth: boolean;
+    /** Hijos a los que ESTE grupo les subió `fullWidth` — al apagar `fullWidth`
+        en el grupo se baja solo a estos, nunca a uno puesto a mano (M1). */
+    private raisedFullWidth;
     /** Emitted when the active tab changes */
     coTabChange: EventEmitter<string>;
     onTabSelect(e: CustomEvent<string>): void;
     watchValue(): void;
     watchVariant(): void;
+    watchSize(): void;
+    watchFullWidth(): void;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /** Las pestañas cambian de ancho DESPUÉS del primer ajuste (llega la fuente,
+        contadores "Notas (2)"): medido en la suite, la activa quedaba 8 px cortada.
+        Al cambiar el tamaño de alguna se vuelve a mostrar la activa. No reacciona
+        al scroll del usuario, sólo a cambios de tamaño. */
+    private tabsObserver?;
+    private observeTabSizes;
     /** Slotted tabs can mount AFTER the group (async v-for data): re-propagate
         variant/selection whenever the slot content changes, or late tabs render
         with the default pill variant. */
     private onSlotChange;
+    /** Lleva la pestaña activa a la vista dentro del track (sólo scroll horizontal
+        del track: la página no se mueve). Sin esto, abrir con una pestaña del final
+        activa (deep-link `?tab=`) la dejaba fuera de la tira. En rAF: al cargar y
+        con tabs async todavía no hay layout. */
+    private revealSelected;
     private syncTabs;
+    /** Propaga `fullWidth` con el contrato de `size`: con el grupo en true, sube
+        al hijo (y lo anota); con el grupo en false, baja SOLO a los que subió
+        este grupo — un `fullWidth` puesto a mano en el hijo queda intacto. Sin
+        `fullWidth` en el grupo y sin hijos anotados, no toca nada: el DOM del
+        hijo queda como siempre (aditivo). */
+    private syncFullWidth;
     /** Wheel → horizontal scroll cuando el track desborda (los tabs clipean con
         `overflow-x`, ver CSS): la rueda vertical del mouse scrollea el strip.
         Solo consume el evento si realmente puede desplazarse en esa dirección —

package/dist/types/components/co-tab-group/revealTab.d.ts

@@ -0,0 +1,29 @@
+interface Edges {
+    left: number;
+    right: number;
+}
+/**
+ * `scrollLeft` del track para que la pestaña quede ENTERA a la vista (con `pad`
+ * de aire). Rects en coordenadas de viewport (getBoundingClientRect). Si ya se
+ * ve, devuelve el mismo `scrollLeft`: no hay salto.
+ */
+export declare function revealScrollLeft(scrollLeft: number, track: Edges, tab: Edges, pad?: number): number;
+interface TrackBox {
+    offsetWidth: number;
+    clientWidth: number;
+    clientLeft: number;
+}
+/**
+ * Bordes de la pestaña y del área visible del track en px CSS relativos al
+ * borde interno del track (el mismo espacio que `scrollLeft`). Los rects de
+ * getBoundingClientRect salen ESCALADOS si un ancestro tiene transform (el
+ * drawer entra con escala): se dividen por la escala visual del track.
+ */
+export declare function tabEdgesInTrack(trackRect: {
+    left: number;
+    width: number;
+}, tabRect: Edges, box: TrackBox): {
+    track: Edges;
+    tab: Edges;
+};
+export {};

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

@@ -0,0 +1,40 @@
+/**
+ * co-tile — tarjeta de 96×80 con ícono + etiqueta, usada en la grilla de
+ * "Plantillas de página" del editor. El host (el propio elemento
+ * personalizado) es el nodo focuseable/arrastrable: no declara eventos
+ * propios (`click`/`dragstart`/`pointerdown`) porque el consumidor
+ * (dnd-kit) los escucha directamente sobre el host — el componente solo
+ * pone `role`/`tabindex`/`aria-disabled` para que ese nodo sea accesible
+ * por teclado, y traduce Enter/Space a un `click` nativo sobre el host
+ * (semántica de `<button>`: Enter en keydown; Space frena el scroll en
+ * keydown y activa en keyup) para que el mismo listener del consumidor
+ * sirva con teclado.
+ *
+ * @slot icon - Reemplaza el `co-icon` por defecto (renderizado a partir de
+ *              `icon`/`iconSize`) por contenido propio del consumidor.
+ */
+export declare class CoTile {
+    /** Etiqueta visible debajo del ícono. Soporta `\n` (se renderiza en dos líneas). */
+    label: string;
+    /** Nombre del ícono Phosphor (e.g. "file", "calculator"). */
+    icon?: string;
+    /** Tamaño del ícono por defecto, en px. */
+    iconSize: number;
+    /** Deshabilitada: pierde el `tabindex` y queda `aria-disabled`, pero conserva `role="button"`. */
+    disabled: boolean;
+    el: HTMLElement;
+    /** Space quedó presionada SOBRE esta tile (el keyup solo activa si el
+     *  keydown fue acá — un <button> nativo tampoco dispara por un keyup
+     *  suelto). */
+    private spaceArmed;
+    /** Solo eventos que nacen en el host (o en su shadow, retargeteados al
+     *  host): un control proyectado en el slot `icon` maneja sus propias
+     *  teclas y no debe activar la tile por rebote. */
+    private ownsKeyEvent;
+    private handleKeyDown;
+    private handleKeyUp;
+    /** Perder el foco entre el keydown y el keyup de Space desarma (un
+     *  <button> nativo tampoco dispara si el keyup cae en otro lado). */
+    private handleBlur;
+    render(): any;
+}

package/dist/types/components/co-toggle-button/co-toggle-button.d.ts

@@ -1,22 +1,57 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * co-toggle-button — pastilla de un `co-toggle-button-group`.
+ *
+ * @part button - El `<button>` interno. El hook para lo que el CSS deja
+ *                hardcodeado y no tiene prop, empezando por su
+ *                `justify-content: center`: `::part(button) { justify-content:
+ *                flex-start }` alinea el contenido a la izquierda sin tener que
+ *                mover el texto a un slot.
+ * @slot leading - Contenido propio antes del label (logos a color, banderas):
+ *                 lo espacia el mismo `gap` que a `iconLeft`.
+ */
 export declare class CoToggleButton {
     selected: boolean;
     value: string;
     label?: string;
     iconLeft?: string;
     iconRight?: string;
+    /** Talla del botón. Si no se indica (ni atributo ni propiedad) y el botón
+     *  está dentro de un `co-toggle-button-group` con `variant="soft"` (cualquier
+     *  talla) o `variant="track"` + `size="xs"`, adopta la talla del grupo al
+     *  montarse — la lee el propio botón en `componentWillLoad`, ver
+     *  `adoptGroupSize()`. Un `size` propio siempre manda. En cualquier otra
+     *  combinación (`connected`, `track` con `l|m|s`, o una talla fuera de
+     *  `l|m|s|xs`) el grupo no influye, exactamente como antes. La talla se
+     *  adopta UNA vez, al montar: cambiar después el `size` del grupo no
+     *  re-talla a los botones ya montados (el editor lo fija estáticamente). */
     size: 'l' | 'm' | 's' | 'xs';
     disabled: boolean;
     /** Visual variant. 'track' renders the button as a detached rounded pill for a
-     *  sunken toggle-button-group track. Normally set by the parent group. */
-    variant: 'connected' | 'track';
+     *  sunken toggle-button-group track. 'soft' renders it as a separated gray-100
+     *  chip whose selected state uses the celeste-100/primary-azul accent pair.
+     *  Normally set by the parent group. */
+    variant: 'connected' | 'track' | 'soft';
     /** When set, the leading/trailing icon renders at this weight while the button
      *  is selected (e.g. 'fill' for the active segment of a track toggle). */
     selectedIconWeight?: 'regular' | 'fill';
+    el: HTMLElement;
     coToggle: EventEmitter<{
         value: string;
         selected: boolean;
     }>;
+    componentWillLoad(): void;
+    /** Adopta la talla del grupo contenedor en las combinaciones nuevas de la
+     *  Fase 2 (`soft`, o `track` + `xs`) SOLO si este botón no trae `size`
+     *  propio. Vive en el hijo y corre ANTES del primer render a propósito:
+     *  `size` es `reflect: true`, así que en el primer render Stencil escribe el
+     *  default `m` como atributo del host — y ese render ocurre antes del
+     *  `componentDidLoad` del grupo. Propagar desde el grupo (versión anterior,
+     *  chequeaba `hasAttribute('size')` en el hijo) nunca actuaba en el browser:
+     *  a esa altura el atributo ya estaba y no se puede distinguir un `m`
+     *  explícito de uno reflejado. Los specs en jsdom no lo detectaban porque
+     *  `@stencil/vitest` no siembra el default de un class-field `@Prop`. */
+    private adoptGroupSize;
     private handleClick;
     render(): any;
 }

package/dist/types/components/co-toggle-button-group/co-toggle-button-group.d.ts

@@ -3,6 +3,20 @@ export declare class CoToggleButtonGroup {
     /** Current selected value(s). Single string or JSON array for multiple. */
     value: string | string[];
     multiple: boolean;
+    /** Talla del grupo. El grupo NO la empuja a sus hijos: cada `co-toggle-button`
+     *  sin `size` propio la LEE al montarse (`componentWillLoad`, antes de su
+     *  primer render) y la adopta SOLO en las combinaciones nuevas de la Fase 2
+     *  Cobalt — `variant="soft"` (cualquier talla) o `variant="track"` +
+     *  `size="xs"` — y nunca con un valor fuera de la unión del hijo (`l|m|s|xs`).
+     *  Fuera de eso los hijos la ignoran, como siempre: el host ya usa
+     *  `size="sm"` (fuera de la unión) y `size="s"` con la variante default, y
+     *  esos casos quedan intactos (aditivo). Por qué lo lee el hijo y no lo
+     *  empuja el grupo: `size` del hijo es `reflect: true` y su primer render —
+     *  que escribe el default `m` como atributo — ocurre ANTES del
+     *  `componentDidLoad` del grupo, así que el grupo ya no puede distinguir un
+     *  `m` explícito de uno reflejado. Consecuencia: se adopta una vez, al
+     *  montar; cambiar `size` del grupo después no re-talla a los hijos ya
+     *  montados (aquí solo actualiza la clase `--xs` de la pista). */
     size: 'l' | 'm' | 's' | 'xs';
     disabled: boolean;
     direction: 'row' | 'column';
@@ -10,8 +24,10 @@ export declare class CoToggleButtonGroup {
     fullWidth: boolean;
     /** 'connected' (default) keeps the seamless dark-fill segmented control.
      *  'track' turns the group into a sunken gray track carrying detached rounded
-     *  pills (white + shadow when selected) — e.g. an icon-only view toggle. */
-    variant: 'connected' | 'track';
+     *  pills (white + shadow when selected) — e.g. an icon-only view toggle.
+     *  'soft' separates each button into its own gray-100 chip (gap between them);
+     *  the selected chip gets the celeste-100/primary-azul accent pair. */
+    variant: 'connected' | 'track' | 'soft';
     el: HTMLElement;
     coChange: EventEmitter<string | string[]>;
     private get selectedValues();
@@ -22,6 +38,8 @@ export declare class CoToggleButtonGroup {
         value: string;
         selected: boolean;
     }>): void;
+    /** Sincroniza `selected` y `variant` en los hijos. `size` NO se toca acá a
+     *  propósito: lo adopta cada hijo al montarse (ver doc del @Prop `size`). */
     private updateChildStates;
     render(): any;
 }

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

@@ -22,6 +22,18 @@ export declare class CoTooltip {
      *  must fill its track — e.g. an ellipsised list/table cell — without the
      *  inline-block wrapper shrink-wrapping it. Drives the `:host([block])` CSS. */
     block: boolean;
+    /**
+     * Visual variant. `label` = compact pill for a labeled trigger with an
+     * optional keyboard shortcut (radius `--co-border-radius-xs`, tighter
+     * padding, medium (500) text, `line-height: 1`, no shadow, arrow hidden). The
+     * arrow hide is CSS-only — `arrow`'s own default/behavior is unchanged.
+     */
+    variant: 'default' | 'label';
+    /** Optional keyboard shortcut rendered as a `co-kbd` chip next to `content`
+     *  (dark surface, xs size) — e.g. content "Seleccionar" + shortcut "v". In
+     *  `variant="label"` the chip sits 4px from the pill's right edge
+     *  (`padding-right: 4px`); the default panel keeps its 10px. */
+    shortcut?: string;
     visible: boolean;
     actualPlacement: Placement;
     /** Fase de salida: mantiene el panel montado mientras corre la transición de cierre. */

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

@@ -0,0 +1,73 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type TreeItemSelection = 'none' | 'soft' | 'solid';
+export type TreeItemSize = 's' | 'xs';
+/**
+ * Fila de un árbol (paneles Páginas y Capas del editor). Pensada para
+ * renderizar cientos de filas: UN solo shadow root propio (los iconos son
+ * `co-icon`; las acciones van en light DOM por slot), sin estado interno de
+ * selección/expansión y sin capturar teclado.
+ *
+ * - **Selección**: la decide el consumidor escuchando el `click` NATIVO del
+ *   host (ahí lee `metaKey` / `shiftKey`). Este componente no emite un evento
+ *   propio de selección ni captura Enter/Espacio; el `tabindex` (roving) lo
+ *   pone el consumidor en el host.
+ * - **Expansión**: controlada. El chevron emite `coToggle` con el estado
+ *   pedido (`!expanded`) y detiene la propagación de su `click` para que
+ *   pulsar el chevron no seleccione la fila. `coToggle` burbujea: con filas
+ *   anidadas en el slot por defecto, un listener por fila debe comprobar
+ *   `event.target === event.currentTarget` (o delegar en la raíz del árbol).
+ * - **Solo se corta el `click`** del chevron. `pointerdown` / `mousedown` SÍ
+ *   llegan al host (el chevron solo hace `preventDefault` del mousedown para
+ *   no robar el foco). Un consumidor con dnd-kit debe usar una restricción de
+ *   activación (`activationConstraint: { distance }`) o descartar el gesto
+ *   cuando `event.composedPath()` incluya el `[part="caret"]`.
+ * - **Hijos**: las filas hijas van en el slot por defecto. Con
+ *   `expandable && expanded` y contenido en ese slot, la fila padre lleva
+ *   radio solo arriba y el bloque de hijos pinta `--co-tree-item-group-bg`.
+ * - **Alineación con hermanos sin chevron**: por defecto una fila no
+ *   expandable no reserva el hueco del chevron. En un árbol mixto (Capas) se
+ *   reserva con `--co-tree-item-caret-space: 12px` en el contenedor.
+ *
+ * @slot prefix - Contenido antes del icono (p. ej. tirador de arrastre).
+ * @slot label  - Reemplaza el texto del `label` (input de renombrar en light DOM).
+ * @slot suffix - Acciones a la derecha (candado, ojo…), gap 8.
+ * @slot        - Filas hijas (`co-tree-item` anidados), envueltas en `part="children"`.
+ *
+ * @part row      - La fila (padding por `depth`, fondo de hover/selección).
+ * @part caret    - Botón del chevron.
+ * @part icon     - Contenedor del icono de tipo.
+ * @part label    - Texto del label.
+ * @part suffix   - Contenedor de las acciones.
+ * @part children - Bloque de filas hijas (`role="group"`).
+ */
+export declare class CoTreeItem {
+    el: HTMLElement;
+    /** Texto de la fila (se reemplaza con el slot `label`). */
+    label: string;
+    /** Icono de tipo (nombre Phosphor), 12 px. */
+    icon?: string;
+    /** Profundidad en el árbol (0 = raíz). Sangría: `8px + depth × --co-tree-item-indent`. */
+    depth: number;
+    /** Muestra el chevron y expone `aria-expanded`. */
+    expandable: boolean;
+    /** Estado de expansión (controlado: el componente nunca lo muta). */
+    expanded: boolean;
+    /** `solid` = accent (fila seleccionada); `soft` = tinte (descendiente de una selección). */
+    selection: TreeItemSelection;
+    /** Alto de fila: `s` = 28 px (default), `xs` = 24 px. */
+    size: TreeItemSize;
+    /** Atenúa la fila y desactiva el chevron. El click del host sigue llegando al consumidor. */
+    disabled: boolean;
+    /** Idioma del aria-label del chevron (es/en/pt; acepta locales completos). */
+    locale: string;
+    /** Al pulsar el chevron, con el estado de expansión PEDIDO (`!expanded`). */
+    coToggle: EventEmitter<boolean>;
+    /** Hay contenido real en el slot por defecto (filas hijas). */
+    private hasChildren;
+    componentWillLoad(): void;
+    componentWillRender(): void;
+    private syncHasChildren;
+    private handleCaretClick;
+    private handleCaretMouseDown;
+    render(): any;
+}

package/dist/types/components/co-tree-item/treeItemI18n.d.ts

@@ -0,0 +1,6 @@
+export interface TreeItemStrings {
+    expand: string;
+    collapse: string;
+}
+/** Resuelve los strings integrados para un locale (`es`, `en-US`, `pt-BR`…). */
+export declare function getTreeItemStrings(locale?: string): TreeItemStrings;