@prolibu-suite/cobalt-core 0.11.5 → 0.11.7

package/dist/types/components/co-phone-field/co-phone-field.d.ts

@@ -30,6 +30,8 @@ export declare class CoPhoneField {
     size: 's' | 'sm' | 'md' | 'lg';
     /** Default country ISO2 code (e.g. "CO", "US"). Optional — if not set, starts empty. */
     defaultCountry: string;
+    /** BCP-47 locale for the built-in UI strings (es/en/pt). */
+    locale?: string;
     /** Emits the full phone string on change. */
     coChange: EventEmitter<string>;
     private selectedIso2;
@@ -44,6 +46,15 @@ export declare class CoPhoneField {
     onDefaultCountryChange(iso2: string): void;
     componentWillLoad(): void;
     private get hasCountry();
+    private get strings();
+    /**
+     * A flag that 404s (or that flagcdn throttles) used to render Chrome's torn-image
+     * icon in every row. The box is kept — hiding it instead of removing it stops the
+     * list from reflowing — and the country name and dial code carry the meaning, so
+     * nothing is lost. Mutating the node directly is deliberate: a `@State` set would
+     * re-render the whole 198-row list once per failed image.
+     */
+    private hideBrokenFlag;
     private get statusIcon();
     private findDialCodeInValue;
     private emitValue;

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

@@ -83,6 +83,11 @@ export declare class CoPopover {
     private rafId?;
     /** El trigger se vio al menos una vez desde que abrió (ver `updatePosition`). */
     private anchorSeenVisible;
+    private resizeObserver?;
+    private observedPanel?;
+    /** Placement resuelto en la última pasada; un re-cálculo por tamaño lo conserva si cabe. */
+    private lastPlacement?;
+    private keepSide;
     private scrollParents;
     private cachedOffsetAncestor;
     private offsetAncestorComputed;
@@ -122,6 +127,8 @@ export declare class CoPopover {
      * positioning + offset-ancestor compensation, see updatePosition).
      */
     private promotePanel;
+    private observePanel;
+    private handlePanelResize;
     private scheduleUpdate;
     private addScrollListeners;
     private cleanupListeners;

package/dist/types/components/co-ref-field/co-ref-field.d.ts

@@ -53,8 +53,8 @@ export declare class CoRefField {
     disabled: boolean;
     /** Muestra la × que vacía la selección cuando hay valor (default `true`); emite `coClear`. */
     clearable: boolean;
-    /** Shows a pencil button on the single-value trigger that emits
-     *  `coEditSelected` with the selected record id. The host owns policy
+    /** Shows a pencil button on the single-value trigger (and on each chip when
+     *  `multiple`) that emits `coEditSelected` with that record's id. The host owns policy
      *  (permissions, what opens) — the component only paints and emits. */
     editable: boolean;
     /** Accessible name / tooltip for the edit button. */
@@ -276,6 +276,7 @@ export declare class CoRefField {
     private handleReorder;
     private handleClear;
     private handleEditClick;
+    private handleEditChip;
     private handleRemoveChip;
     private handleFooterPrimary;
     private handleFooterSecondary;

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

@@ -125,7 +125,9 @@ export declare class CoRichTextEditor {
     coBlur: EventEmitter<void>;
     /** Se vació el contenido con `clear()`. */
     coClear: EventEmitter<void>;
-    /** Emitted once the editor is mounted and ready. */
+    /** Emitted once the editor is mounted and ready. Se RE-emite si el editor se
+     *  recrea al reconectar el host tras un teardown: quien guarde la instancia de
+     *  `getEditorInstance()` debe volver a pedirla en cada `coReady`. */
     coReady: EventEmitter<void>;
     /** Emitted when the font dropdown opens — host should load account fonts. */
     coFontPopupShow: EventEmitter<void>;
@@ -176,8 +178,19 @@ export declare class CoRichTextEditor {
     /** Image layout floating toolbar. */
     private imgLayoutEl?;
     private imgLayoutVisible;
+    /** `componentDidLoad` ya corrió: desde acá un `connectedCallback` es una RE-conexión. */
+    private loaded;
+    /** Contenido al hacer teardown, para recrear el editor con lo tipeado si el host
+     *  vuelve al documento. `undefined` = no hay instantánea (se usa `value`). */
+    private detachedContent?;
+    connectedCallback(): void;
     componentDidLoad(): Promise<void>;
+    /** Crea el editor Tiptap sobre `contentEl`. Corre en la carga y al reconectar. */
+    private mountEditor;
+    private onToolbarMousedown;
+    private onToolbarPopoverChange;
     disconnectedCallback(): void;
+    private teardownEditor;
     componentDidRender(): void;
     onAccountFontsChange(): void;
     onValueChange(next: string | null): void;

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

@@ -115,6 +115,16 @@ export declare class CoRichTextToolbar {
      */
     private resolveItems;
     onOpenPopoverChange(next: string | null, prev: string | null): void;
+    componentDidRender(): void;
+    /**
+     * Corre el panel abierto hacia la izquierda si se sale del área VISIBLE
+     * (viewport ∩ ancestros que recortan, ver panelFit.ts). Los paneles anclan a
+     * `left:0` de su botón por CSS: en una columna angosta (inspector del
+     * cotizador) el de link/listas se cortaba y el contenedor ganaba scroll-x.
+     * Se mide tras cada render con el panel abierto (su contenido cambia: menú →
+     * URL de la imagen), reseteando antes el corrimiento anterior.
+     */
+    private fitOpenPanel;
     disconnectedCallback(): void;
     private updateTableContext;
     private isSeparator;

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

@@ -0,0 +1,38 @@
+/**
+ * Encaje horizontal de los paneles de la toolbar (link, listas, color, tabla,
+ * callouts). Cuelgan de su botón por CSS (`position:absolute; left:0`), así que
+ * en una columna angosta —el inspector del ítem del cotizador— se salían por la
+ * derecha: los recortaba el `overflow` del contenedor, que además ganaba scroll
+ * horizontal y corría el editor. Aquí se calcula cuánto correrlos para que
+ * queden dentro del área VISIBLE (viewport ∩ ancestros que recortan).
+ */
+export interface HBox {
+    left: number;
+    right: number;
+}
+/** Aire mínimo contra el borde del área visible. */
+export declare const PANEL_EDGE_GAP = 8;
+/**
+ * Desplazamiento en px de viewport (negativo = a la izquierda) para que `panel`
+ * entre en `area`. Si el panel es más ancho que el área, gana su borde
+ * IZQUIERDO (el comienzo del contenido: el input, la primera fila).
+ */
+export declare function panelShiftX(panel: HBox, area: HBox, gap?: number): number;
+interface ClipNode {
+    parentElement: ClipNode | null;
+    getRootNode?(): unknown;
+    getBoundingClientRect(): HBox & {
+        width?: number;
+    };
+    /** Interior visible (sin borde ni scrollbar); opcionales para nodos de test. */
+    clientLeft?: number;
+    clientWidth?: number;
+    offsetWidth?: number;
+}
+/**
+ * Área visible para un nodo: el viewport recortado por cada ancestro con
+ * `overflow-x` que recorta, cruzando shadow roots (el toolbar vive dentro del
+ * shadow del editor, que vive en la página).
+ */
+export declare function visibleArea(node: ClipNode, viewportWidth: number, overflowX: (el: ClipNode) => string): HBox;
+export {};

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

@@ -62,10 +62,28 @@ export declare class CoTabGroup {
         `fullWidth` en el grupo y sin hijos anotados, no toca nada: el DOM del
         hijo queda como siempre (aditivo). */
     private syncFullWidth;
+    /** Mueve el track SIN animar. El CSS tiene `scroll-behavior: smooth` (para el
+        reajuste al enfocar un tab) y asignar `scrollLeft` TAMBIÉN lo respeta: cada
+        evento de rueda/arrastre reiniciaba la animación desde una posición que
+        todavía no había avanzado y el strip apenas se movía (se sentía roto). */
+    private scrollTrack;
     /** 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 —
-        en los extremos deja pasar el scroll a la página. */
+        `overflow-x`, ver CSS): la rueda VERTICAL del mouse scrollea el strip. El
+        gesto horizontal (trackpad) lo resuelve el scroll nativo, y en los extremos
+        el evento sigue a la página. */
     private onWheel;
+    /** Arrastre con el mouse para recorrer el strip (la scrollbar está oculta y sin
+        rueda no había forma de llegar a las pestañas cortadas). Touch no pasa por
+        acá: su pan nativo ya scrollea. Hasta `DRAG_THRESHOLD` px el press sigue
+        siendo un click en la pestaña; pasado el umbral, el click del final se
+        descarta para no cambiar de pestaña al soltar. */
+    private drag?;
+    private swallowClick;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerEnd;
+    /** Captura: corre ANTES que el click de la pestaña (que vive más abajo en el
+        árbol). Solo se traga el click que cierra un arrastre. */
+    private onClickCapture;
     render(): any;
 }

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

@@ -0,0 +1,19 @@
+/**
+ * Desplazamiento del track de pestañas cuando desborda: rueda del mouse y
+ * arrastre con el puntero. Puro (sin DOM) para testearlo; el componente aplica
+ * el resultado con `scrollTo({ behavior: 'instant' })`.
+ */
+/** px que el puntero tiene que moverse antes de que un press cuente como arrastre
+    (por debajo sigue siendo un click en la pestaña). */
+export declare const DRAG_THRESHOLD = 5;
+/**
+ * `scrollLeft` destino para un evento de rueda, o `null` si el componente NO
+ * debe intervenir:
+ * - gesto horizontal (trackpad, shift+rueda): el scroll nativo ya lo resuelve;
+ * - en el extremo hacia el que empuja: el scroll sigue a la página.
+ */
+export declare function wheelScrollLeft(scrollLeft: number, max: number, deltaX: number, deltaY: number): number | null;
+/** `scrollLeft` mientras se arrastra: el contenido sigue al puntero. */
+export declare function dragScrollLeft(startScrollLeft: number, startX: number, x: number, max: number): number;
+/** ¿El puntero ya se movió lo suficiente para que el press sea un arrastre? */
+export declare function passedDragThreshold(startX: number, x: number): boolean;

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

@@ -37,8 +37,10 @@ export declare class CoToggleButton {
     /** Visual variant. 'track' renders the button as a detached rounded pill for a
      *  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.
+     *  'pill' renders a standalone 40px pill on the control surface (Figma filter
+     *  chips); the selected chip switches to the inverse surface (black in light).
      *  Normally set by the parent group. */
-    variant: 'connected' | 'track' | 'soft';
+    variant: 'connected' | 'track' | 'soft' | 'pill';
     /** 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';

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

@@ -1,8 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * Grupo de `co-toggle-button` que coordina la selección: única (default) o
- * `multiple`. `variant` elige el estilo (`connected`, `track`, `soft`) y se
- * propaga a los botones. Wrapper Vue: `CoToggleButtonGroup` de
+ * `multiple`. `variant` elige el estilo (`connected`, `track`, `soft`, `pill`) y
+ * se propaga a los botones. Wrapper Vue: `CoToggleButtonGroup` de
  * `@prolibu-suite/cobalt-vue`.
  */
 export declare class CoToggleButtonGroup {
@@ -35,8 +35,10 @@ export declare class CoToggleButtonGroup {
      *  'track' turns the group into a sunken gray track carrying detached rounded
      *  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';
+     *  the selected chip gets the celeste-100/primary-azul accent pair.
+     *  'pill' separa cada botón en una pastilla de 40px; la seleccionada va en la
+     *  superficie inversa. */
+    variant: 'connected' | 'track' | 'soft' | 'pill';
     el: HTMLElement;
     /** Cambió la selección (`value` ya está actualizado): el valor elegido, o el array en `multiple`. */
     coChange: EventEmitter<string | string[]>;

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

@@ -39,6 +39,12 @@ export declare class CoTooltip {
      * arrow hide is CSS-only — `arrow`'s own default/behavior is unchanged.
      */
     variant: 'default' | 'label';
+    /**
+     * Color tone of the panel (and arrow). `error` = solid `--co-semantic-status-error`
+     * surface with white text, for a record/state warning (e.g. "Inactive").
+     * Independent of `variant`.
+     */
+    tone: 'default' | 'error';
     /** 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

package/dist/types/components.d.ts

@@ -552,10 +552,12 @@ export namespace Components {
           * @default 'regular'
          */
         "iconWeight": 'regular' | 'thin' | 'light' | 'bold' | 'fill' | 'duotone';
+        "label"?: string;
         /**
-          * Text label (alternative to default slot)
+          * Acción en curso: spinner EN el lugar del ícono izquierdo (mismo ancho, la fila no se mueve), botón deshabilitado y `aria-busy`. Sin ícono izquierdo el spinner va delante del texto. Reemplaza el patrón «CoLoader al lado del botón», que ensanchaba la fila.
+          * @default false
          */
-        "label"?: string;
+        "loading": boolean;
         /**
           * Shape: pill or straight corners
           * @default 'rounded'
@@ -1224,6 +1226,11 @@ export namespace Components {
           * Helper/error text below the field.
          */
         "helperText"?: string;
+        /**
+          * Muestra el panel (área, tono, muestras y hex) siempre a la vista, sin el campo que lo abre. Para un host que ya tiene su propio disparador —un punto de color que abre un popover—: sin esto el usuario abría el popover y después, adentro, el campo con la paleta. Elegir una muestra no cierra nada; el host decide cuándo cerrar lo suyo.
+          * @default false
+         */
+        "inline": boolean;
         /**
           * Field label.
          */
@@ -4149,6 +4156,10 @@ export namespace Components {
           * @default 'vertical'
          */
         "layout": 'vertical' | 'horizontal';
+        /**
+          * BCP-47 locale for the built-in UI strings (es/en/pt).
+         */
+        "locale"?: string;
         /**
           * Placeholder for the number input.
           * @default ''
@@ -4506,7 +4517,7 @@ export namespace Components {
          */
         "editLabel": string;
         /**
-          * Shows a pencil button on the single-value trigger that emits `coEditSelected` with the selected record id. The host owns policy (permissions, what opens) — the component only paints and emits.
+          * Shows a pencil button on the single-value trigger (and on each chip when `multiple`) that emits `coEditSelected` with that record's id. The host owns policy (permissions, what opens) — the component only paints and emits.
           * @default false
          */
         "editable": boolean;
@@ -5788,15 +5799,15 @@ export namespace Components {
          */
         "value": string;
         /**
-          * Visual variant. 'track' renders the button as a detached rounded pill for a 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.
+          * Visual variant. 'track' renders the button as a detached rounded pill for a 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. 'pill' renders a standalone 40px pill on the control surface (Figma filter chips); the selected chip switches to the inverse surface (black in light). Normally set by the parent group.
           * @default 'connected'
          */
-        "variant": 'connected' | 'track' | 'soft';
+        "variant": 'connected' | 'track' | 'soft' | 'pill';
     }
     /**
      * Grupo de `co-toggle-button` que coordina la selección: única (default) o
-     * `multiple`. `variant` elige el estilo (`connected`, `track`, `soft`) y se
-     * propaga a los botones. Wrapper Vue: `CoToggleButtonGroup` de
+     * `multiple`. `variant` elige el estilo (`connected`, `track`, `soft`, `pill`) y
+     * se propaga a los botones. Wrapper Vue: `CoToggleButtonGroup` de
      * `@prolibu-suite/cobalt-vue`.
      */
     interface CoToggleButtonGroup {
@@ -5831,10 +5842,10 @@ export namespace Components {
          */
         "value": string | string[];
         /**
-          * '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. 'soft' separates each button into its own gray-100 chip (gap between them); the selected chip gets the celeste-100/primary-azul accent pair.
+          * '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. 'soft' separates each button into its own gray-100 chip (gap between them); the selected chip gets the celeste-100/primary-azul accent pair. 'pill' separa cada botón en una pastilla de 40px; la seleccionada va en la superficie inversa.
           * @default 'connected'
          */
-        "variant": 'connected' | 'track' | 'soft';
+        "variant": 'connected' | 'track' | 'soft' | 'pill';
     }
     /**
      * Globo de ayuda que aparece al pasar el mouse o enfocar el control envuelto.
@@ -5898,6 +5909,11 @@ export namespace Components {
           * @default 80
          */
         "showDelay": number;
+        /**
+          * Color tone of the panel (and arrow). `error` = solid `--co-semantic-status-error` surface with white text, for a record/state warning (e.g. "Inactive"). Independent of `variant`.
+          * @default 'default'
+         */
+        "tone": 'default' | 'error';
         /**
           * 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.
           * @default 'default'
@@ -8807,8 +8823,8 @@ declare global {
     }
     /**
      * Grupo de `co-toggle-button` que coordina la selección: única (default) o
-     * `multiple`. `variant` elige el estilo (`connected`, `track`, `soft`) y se
-     * propaga a los botones. Wrapper Vue: `CoToggleButtonGroup` de
+     * `multiple`. `variant` elige el estilo (`connected`, `track`, `soft`, `pill`) y
+     * se propaga a los botones. Wrapper Vue: `CoToggleButtonGroup` de
      * `@prolibu-suite/cobalt-vue`.
      */
     interface HTMLCoToggleButtonGroupElement extends Components.CoToggleButtonGroup, HTMLStencilElement {
@@ -9594,10 +9610,12 @@ declare namespace LocalJSX {
           * @default 'regular'
          */
         "iconWeight"?: 'regular' | 'thin' | 'light' | 'bold' | 'fill' | 'duotone';
+        "label"?: string;
         /**
-          * Text label (alternative to default slot)
+          * Acción en curso: spinner EN el lugar del ícono izquierdo (mismo ancho, la fila no se mueve), botón deshabilitado y `aria-busy`. Sin ícono izquierdo el spinner va delante del texto. Reemplaza el patrón «CoLoader al lado del botón», que ensanchaba la fila.
+          * @default false
          */
-        "label"?: string;
+        "loading"?: boolean;
         /**
           * Shape: pill or straight corners
           * @default 'rounded'
@@ -10328,6 +10346,11 @@ declare namespace LocalJSX {
           * Helper/error text below the field.
          */
         "helperText"?: string;
+        /**
+          * Muestra el panel (área, tono, muestras y hex) siempre a la vista, sin el campo que lo abre. Para un host que ya tiene su propio disparador —un punto de color que abre un popover—: sin esto el usuario abría el popover y después, adentro, el campo con la paleta. Elegir una muestra no cierra nada; el host decide cuándo cerrar lo suyo.
+          * @default false
+         */
+        "inline"?: boolean;
         /**
           * Field label.
          */
@@ -13712,6 +13735,10 @@ declare namespace LocalJSX {
           * @default 'vertical'
          */
         "layout"?: 'vertical' | 'horizontal';
+        /**
+          * BCP-47 locale for the built-in UI strings (es/en/pt).
+         */
+        "locale"?: string;
         /**
           * Emits the full phone string on change.
          */
@@ -14081,7 +14108,7 @@ declare namespace LocalJSX {
          */
         "editLabel"?: string;
         /**
-          * Shows a pencil button on the single-value trigger that emits `coEditSelected` with the selected record id. The host owns policy (permissions, what opens) — the component only paints and emits.
+          * Shows a pencil button on the single-value trigger (and on each chip when `multiple`) that emits `coEditSelected` with that record's id. The host owns policy (permissions, what opens) — the component only paints and emits.
           * @default false
          */
         "editable"?: boolean;
@@ -14400,7 +14427,7 @@ declare namespace LocalJSX {
          */
         "onCoInput"?: (event: CoRichTextEditorCustomEvent<RichTextOutput>) => void;
         /**
-          * Emitted once the editor is mounted and ready.
+          * Emitted once the editor is mounted and ready. Se RE-emite si el editor se recrea al reconectar el host tras un teardown: quien guarde la instancia de `getEditorInstance()` debe volver a pedirla en cada `coReady`.
          */
         "onCoReady"?: (event: CoRichTextEditorCustomEvent<void>) => void;
         /**
@@ -15531,15 +15558,15 @@ declare namespace LocalJSX {
          */
         "value"?: string;
         /**
-          * Visual variant. 'track' renders the button as a detached rounded pill for a 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.
+          * Visual variant. 'track' renders the button as a detached rounded pill for a 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. 'pill' renders a standalone 40px pill on the control surface (Figma filter chips); the selected chip switches to the inverse surface (black in light). Normally set by the parent group.
           * @default 'connected'
          */
-        "variant"?: 'connected' | 'track' | 'soft';
+        "variant"?: 'connected' | 'track' | 'soft' | 'pill';
     }
     /**
      * Grupo de `co-toggle-button` que coordina la selección: única (default) o
-     * `multiple`. `variant` elige el estilo (`connected`, `track`, `soft`) y se
-     * propaga a los botones. Wrapper Vue: `CoToggleButtonGroup` de
+     * `multiple`. `variant` elige el estilo (`connected`, `track`, `soft`, `pill`) y
+     * se propaga a los botones. Wrapper Vue: `CoToggleButtonGroup` de
      * `@prolibu-suite/cobalt-vue`.
      */
     interface CoToggleButtonGroup {
@@ -15578,10 +15605,10 @@ declare namespace LocalJSX {
          */
         "value"?: string | string[];
         /**
-          * '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. 'soft' separates each button into its own gray-100 chip (gap between them); the selected chip gets the celeste-100/primary-azul accent pair.
+          * '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. 'soft' separates each button into its own gray-100 chip (gap between them); the selected chip gets the celeste-100/primary-azul accent pair. 'pill' separa cada botón en una pastilla de 40px; la seleccionada va en la superficie inversa.
           * @default 'connected'
          */
-        "variant"?: 'connected' | 'track' | 'soft';
+        "variant"?: 'connected' | 'track' | 'soft' | 'pill';
     }
     /**
      * Globo de ayuda que aparece al pasar el mouse o enfocar el control envuelto.
@@ -15645,6 +15672,11 @@ declare namespace LocalJSX {
           * @default 80
          */
         "showDelay"?: number;
+        /**
+          * Color tone of the panel (and arrow). `error` = solid `--co-semantic-status-error` surface with white text, for a record/state warning (e.g. "Inactive"). Independent of `variant`.
+          * @default 'default'
+         */
+        "tone"?: 'default' | 'error';
         /**
           * 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.
           * @default 'default'
@@ -16076,6 +16108,7 @@ declare namespace LocalJSX {
         "elevated": boolean;
         "surface": 'light' | 'dark';
         "disabled": boolean;
+        "loading": boolean;
         "label": string;
         "ariaLabelText": string;
         "iconLeft": string;
@@ -16209,6 +16242,7 @@ declare namespace LocalJSX {
         "label": string;
     }
     interface CoColorPickerAttributes {
+        "inline": boolean;
         "value": string;
         "label": string;
         "placeholder": string;
@@ -16797,6 +16831,7 @@ declare namespace LocalJSX {
         "layout": 'vertical' | 'horizontal';
         "size": 's' | 'sm' | 'md' | 'lg';
         "defaultCountry": string;
+        "locale": string;
     }
     interface CoPopoverAttributes {
         "open": boolean;
@@ -17126,7 +17161,7 @@ declare namespace LocalJSX {
         "iconRight": string;
         "size": 'l' | 'm' | 's' | 'xs';
         "disabled": boolean;
-        "variant": 'connected' | 'track' | 'soft';
+        "variant": 'connected' | 'track' | 'soft' | 'pill';
         "selectedIconWeight": 'regular' | 'fill';
     }
     interface CoToggleButtonGroupAttributes {
@@ -17136,7 +17171,7 @@ declare namespace LocalJSX {
         "disabled": boolean;
         "direction": 'row' | 'column';
         "fullWidth": boolean;
-        "variant": 'connected' | 'track' | 'soft';
+        "variant": 'connected' | 'track' | 'soft' | 'pill';
     }
     interface CoTooltipAttributes {
         "content": string;
@@ -17150,6 +17185,7 @@ declare namespace LocalJSX {
         "maxWidth": string;
         "block": boolean;
         "variant": 'default' | 'label';
+        "tone": 'default' | 'error';
         "shortcut": string;
     }
     interface CoTransferListAttributes {
@@ -18158,8 +18194,8 @@ declare module "@stencil/core" {
             "co-toggle-button": LocalJSX.IntrinsicElements["co-toggle-button"] & JSXBase.HTMLAttributes<HTMLCoToggleButtonElement>;
             /**
              * Grupo de `co-toggle-button` que coordina la selección: única (default) o
-             * `multiple`. `variant` elige el estilo (`connected`, `track`, `soft`) y se
-             * propaga a los botones. Wrapper Vue: `CoToggleButtonGroup` de
+             * `multiple`. `variant` elige el estilo (`connected`, `track`, `soft`, `pill`) y
+             * se propaga a los botones. Wrapper Vue: `CoToggleButtonGroup` de
              * `@prolibu-suite/cobalt-vue`.
              */
             "co-toggle-button-group": LocalJSX.IntrinsicElements["co-toggle-button-group"] & JSXBase.HTMLAttributes<HTMLCoToggleButtonGroupElement>;

package/dist/types/utils/color.d.ts

@@ -55,5 +55,32 @@ export declare function luminanceRgb({ r, g, b }: {
 /** WCAG sRGB relative luminance (0–1). Wrapper fino de `luminanceRgb` para
  *  un hex de 3/6 dígitos; lo que no es hex da 0 (comportamiento de siempre). */
 export declare function luminance(hex: string): number;
-/** Returns true when the color is perceptually light (needs dark foreground). */
+/**
+ * Cruce WCAG de la tinta: la luminancia de fondo donde la tinta oscura del DS
+ * y la blanca contrastan IGUAL — `(L + 0,05) / (Ln + 0,05) = 1,05 / (L + 0,05)`
+ * → L ≈ 0,205 con base-negro (0,179 sería con #000 puro; con base-negro ese
+ * tramo, p.ej. el rojo #EB1E1E, quedaba PEOR con tinta oscura: 3,8 vs 4,4:1).
+ * Por encima, la tinta oscura contrasta más que la blanca.
+ */
+export declare const INK_CROSSOVER_LUMINANCE: number;
+/**
+ * True cuando el color pide tinta OSCURA encima (avatar, chip de relleno,
+ * swatch). 2026-09-27: el umbral era L > 0,4 y los tonos medios (verde de
+ * marca, naranja, celeste) salían con tinta blanca a 2,8–3,3:1 cuando la negra
+ * daba 6–7:1. Ahora es el cruce WCAG (`INK_CROSSOVER_LUMINANCE`), el mismo
+ * criterio que `readableTextToken` usa en los chips del calendario.
+ */
 export declare function isLightColor(hex: string): boolean;
+/**
+ * Cruce WCAG con tinta NEGRA PURA opaca (#000, L = 0): `(L + 0,05) / 0,05 =
+ * 1,05 / (L + 0,05)` → L = √(1,05·0,05) − 0,05 ≈ 0,179. En el cruce ambas
+ * tintas dan 4,58:1, así que eligiendo la mejor nunca se baja de AA.
+ */
+export declare const INK_CROSSOVER_BLACK: number;
+/**
+ * True cuando, sobre este color, el #000 opaco contrasta más que el blanco.
+ * Para tintas que usan negro PURO (iniciales de co-avatar); las que usan
+ * base-negro siguen con `isLightColor`. Auditoría 2026-09-27 (L8): en la
+ * franja L 0,18-0,21 el avatar quedaba a 4,21-4,43:1.
+ */
+export declare function prefersBlackInk(hex: string): boolean;

package/dist/types/utils/eventColor.d.ts

@@ -11,7 +11,9 @@
  */
 export declare function resolveCssColor(host: HTMLElement | undefined, value: string): string;
 /**
- * Token de color de texto legible sobre `bg` (luminancia YIQ), o `''` cuando el
+ * Token de color de texto legible sobre `bg` (cruce WCAG, mismo criterio que
+ * `isLightColor`; antes YIQ ≥ 150, que dejaba el naranja y el verde de marca
+ * con tinta blanca a < 3,5:1), o `''` cuando el
  * color no se puede medir — en ese caso el llamador NO debe escribir la
  * variable: pisarla con un `var(--co-cal-event-text)` la vuelve
  * AUTORREFERENTE, la declaración se invalida y el texto termina heredando el

package/dist/types/utils/fieldChip.d.ts

@@ -13,6 +13,7 @@ import { FunctionalComponent } from '../stencil-public-runtime';
  * - co-ref-field: leading avatar / color-dot (passed as children) and the
  *   responsive "+N" overflow badge (`--avatar` / `--clipped` modifiers).
  * - co-tags-field: double-click inline editing (`onChipDblClick`).
+ * - co-ref-field `editable`: leading pencil per chip (`onEdit`), like V1's ref chips.
  */
 export interface FieldChipProps {
     /** BEM base class, e.g. `'co-ref-field__chip'`. Child elements use
@@ -38,5 +39,10 @@ export interface FieldChipProps {
     onRemove?: (e: MouseEvent) => void;
     /** Double-click on the pill (co-tags-field inline editing). */
     onChipDblClick?: (e: MouseEvent) => void;
+    /** When provided, renders a leading pencil button (`{baseClass}-edit`). Same
+     *  `stopPropagation()` duty as `onRemove`. */
+    onEdit?: (e: MouseEvent) => void;
+    /** Accessible name + tooltip of the pencil. */
+    editLabel?: string;
 }
 export declare const FieldChip: FunctionalComponent<FieldChipProps>;

package/dist/types/utils/phoneI18n.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Built-in UI string dictionary for co-phone-field.
+ *
+ * Same strategy as fileI18n/dateI18n: the component ships es/en/pt strings keyed
+ * by the `locale` prop. Until now the country search box said "Search country..."
+ * hardcoded in English, so a form rendered in Spanish or Portuguese leaked it.
+ */
+export interface PhoneStrings {
+    /** Placeholder of the country search box inside the dropdown. */
+    searchPlaceholder: string;
+    /** Accessible name of the country selector trigger. */
+    selectCountry: string;
+}
+export type PhoneLang = 'es' | 'en' | 'pt';
+/** Map any BCP-47 locale (e.g. "es-CO") to a supported language; fallback 'en'. */
+export declare function langFromLocale(locale: string | undefined): PhoneLang;
+/** Resolve the built-in UI strings for a locale. */
+export declare function getPhoneStrings(locale?: string): PhoneStrings;

package/dist/types/utils/richTextI18n.d.ts

@@ -138,6 +138,10 @@ export interface RichTextStrings {
     imageLayoutBreak: string;
     imageLayoutLabel: string;
     documentEditor: string;
+    signatureToolsLabel: string;
+    signatureDuplicate: string;
+    signaturePrevSigner: string;
+    signatureNextSigner: string;
 }
 export type RichTextLang = 'es' | 'en' | 'pt';
 /** Map any BCP-47 locale (e.g. "es-CO") to a supported language; fallback 'en'. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prolibu-suite/cobalt-core",
-  "version": "0.11.5",
+  "version": "0.11.7",
   "description": "Cobalt Design System — Framework-agnostic Web Components built with Stencil",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -50,9 +50,9 @@
     "@phosphor-icons/core": "^2.1.1",
     "dompurify": "^3.2.6",
     "overlayscrollbars": "^2.16.0",
+    "@prolibu-suite/cobalt-rich-text": "0.2.2",
+    "@prolibu-suite/cobalt-tokens": "0.6.1",
     "@prolibu-suite/cobalt-date-utils": "0.1.2",
-    "@prolibu-suite/cobalt-tokens": "0.6.0",
-    "@prolibu-suite/cobalt-rich-text": "0.2.1",
     "@prolibu-suite/cobalt-calendar-utils": "0.1.1"
   },
   "devDependencies": {