@prolibu-suite/cobalt-core 0.3.0 → 0.4.0

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

@@ -34,6 +34,10 @@ export declare class CoMenu {
     autoClose: boolean;
     /** Whether the menu panel is visible. Reflected to attribute. */
     open: boolean;
+    /** Fixes the panel to an exact width (e.g. `'210px'`). When unset, the panel
+     *  keeps its intrinsic auto width (min-width 200px). Also tune padding with the
+     *  `--co-menu-padding` CSS var (default 4px; design uses 6px). */
+    width?: string;
     coOpen: EventEmitter<void>;
     coClose: EventEmitter<void>;
     el: HTMLElement;

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

@@ -14,12 +14,21 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * Submenu nesting is unbounded — submenu items can themselves have submenus.
  */
 export declare class CoMenuItem {
-    /** Icon name (Phosphor) rendered before the label. */
+    /** Icon name (Phosphor) rendered before the label. Optional — rows may be
+     *  label-only. */
     icon?: string;
+    /** Overrides the leading icon size (px). Defaults to 16. */
+    iconSize?: number;
     /** Text shown in the row. */
     label?: string;
     /** Tighter row metrics (32px instead of 36px). */
     dense: boolean;
+    /** Marks the row as selected — paints an at-rest gray-100 background. Used by
+     *  single-select menus (sort/type). */
+    selected: boolean;
+    /** Renders a trailing check (size 15) after the label. Pair with `selected`
+     *  to mark the chosen option in a single-select menu. */
+    trailingCheck: boolean;
     /** Visually disabled — pointer events ignored, opacity reduced. */
     disabled: boolean;
     /** `danger` shifts text + icon to the destructive color. Use for Delete, etc. */

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

@@ -14,8 +14,25 @@ export declare class CoModal {
     closable: boolean;
     /** Close when clicking the overlay backdrop */
     closeOnOverlay: boolean;
-    /** Modal width: sm (400px), md (540px), lg (680px) */
-    size: 'sm' | 'md' | 'lg';
+    /**
+     * Opt-in: close when Escape is pressed. Default false → existing consumers
+     * are unchanged.
+     *
+     * Handled here rather than by forwarding co-overlay's own `closeOnEscape`:
+     * co-overlay emits the SAME `coClose` for a backdrop click and for Escape,
+     * and this component gates that event on `closeOnOverlay`. Forwarding would
+     * therefore swallow Escape whenever `closeOnOverlay` is false.
+     */
+    closeOnEscape: boolean;
+    /**
+     * Modal width: 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';
     /** Hide body section and all border dividers (compact confirm dialogs) */
     noDividers: boolean;
     /** Emitted when the modal requests to close */
@@ -28,6 +45,7 @@ export declare class CoModal {
     private handleOverlayClick;
     private handleCloseClick;
     private stopPropagation;
+    handleKeydown(e: KeyboardEvent): void;
     private handleTransitionEnd;
     render(): any;
 }

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

@@ -0,0 +1,101 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { OptionListItem } from './optionListLogic';
+/**
+ * Núcleo de lista de opciones — la única fuente del look & behavior de los
+ * dropdowns Cobalt (co-ref-field, co-combobox, co-autocomplete,
+ * co-command-search) y de los pickers de celda de suite-v2.
+ *
+ * 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 footer - Footer del panel (normalmente <co-list-footer>).
+ */
+export declare class CoOptionList {
+    el: HTMLElement;
+    /** JSON string o array de OptionListItem. */
+    items: string | OptionListItem[];
+    /** Selección actual: id single o JSON array de ids. */
+    value: string;
+    /** Display-items de la selección (para selected-first con ids fuera de página). */
+    selectedItems: string | OptionListItem[];
+    multiple: boolean;
+    /** Partición selected-first (snapshot al llamar snapshotOrder()). */
+    selectedFirst: boolean;
+    /** Afford. del seleccionado: check (combobox/autocomplete) o X deselect (ref-field). */
+    selectedAffordance: 'check' | 'deselect';
+    /** Botón remove por fila seleccionada en multiple (tags de combobox). */
+    removableItems: boolean;
+    searchable: boolean;
+    searchPlaceholder: string;
+    searchDebounce: number;
+    /** Pre-seed del término (modo convert de las celdas). */
+    initialTerm: string;
+    loading: boolean;
+    /** Total del server: deriva hasMore + hint "N more results". */
+    total: number;
+    /** Fallback cuando el host no conoce totales (⌘K). total>0 manda. */
+    hasMore: boolean;
+    emptyMessage: string;
+    /** Si se setea y hay selección, fila "quitar selección" al tope. */
+    clearOptionLabel: string;
+    /** Lista virtualizada (autocomplete/combobox). Ignora `group`. */
+    virtual: boolean;
+    /** Resalta el match del término en los labels. */
+    highlightMatches: boolean;
+    /** Término externo para highlight (input en el host, p.ej. ⌘K). */
+    highlightTerm: string;
+    avatarShape: 'circle' | 'square';
+    coSearch: EventEmitter<string>;
+    coChange: EventEmitter<{
+        value: string | string[];
+        item: OptionListItem;
+    }>;
+    coLoadMore: EventEmitter<void>;
+    coClearSelection: EventEmitter<void>;
+    coRemoveItem: EventEmitter<string>;
+    term: string;
+    activeIndex: number;
+    scrollTop: number;
+    private searchInputEl?;
+    private optionsEl?;
+    private osInstance?;
+    private debounceTimer?;
+    /** Snapshot selected-first (ver snapshotOrder). */
+    private sortSnapshot;
+    private displaySnapshot;
+    private get parsedItems();
+    private get selectedIds();
+    private get orderedItems();
+    private get effectiveHighlightTerm();
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    onItemsChange(): void;
+    /** Re-toma el snapshot selected-first. El host la llama al abrir su panel. */
+    snapshotOrder(): Promise<void>;
+    /**
+     * Enfoca el input de búsqueda esperando visibilidad real: el panel del host
+     * se vuelve visible frames después (showPopover/position en rAF) y focus()
+     * sobre subtree oculto es no-op silencioso. Reintenta ~20 frames.
+     */
+    focusSearch(): Promise<void>;
+    /** Navegación para hosts con input externo. true = tecla consumida (host hace preventDefault). */
+    handleKey(e: KeyboardEvent): Promise<boolean>;
+    private takeSnapshot;
+    private processKey;
+    /**
+     * Enter sobre un control real (footer, fila clear) activa ese control
+     * nativamente — nunca el highlight (regla heredada de CellRefPicker).
+     */
+    private onRootKeyDown;
+    private onSearchInput;
+    private pick;
+    private maybeLoadMore;
+    private onNativeScroll;
+    private scrollActiveIntoView;
+    private renderLeading;
+    private renderLabelText;
+    private renderRow;
+    private renderVirtual;
+    render(): any;
+}

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

@@ -0,0 +1,69 @@
+export interface OptionListItem {
+    _id: string;
+    label: string;
+    /** Colorea el label (categorías con color propio). */
+    labelColor?: string;
+    /** Subline muted (p.ej. email). */
+    description?: string;
+    /** Texto secundario junto al label, renderizado como "- suffix". */
+    suffix?: string;
+    /** Pill junto al label (generaliza el workspace badge de suite-v2). */
+    badge?: {
+        label: string;
+        color?: string;
+    };
+    /** Phosphor icon como leading visual (si no hay avatar/color). */
+    icon?: string;
+    /** Color del dot / ring del avatar. */
+    color?: string;
+    /** Iniciales del avatar. */
+    avatar?: string;
+    /** URL de imagen del avatar. */
+    image?: string;
+    /** Header de sección: se inserta uno al CAMBIAR de group (patrón ⌘K). */
+    group?: string;
+    disabled?: boolean;
+}
+export type OptionListRow = {
+    kind: 'header';
+    label: string;
+} | {
+    kind: 'item';
+    item: OptionListItem;
+    index: number;
+};
+export declare function parseItems(raw: string | OptionListItem[]): OptionListItem[];
+export declare function parseValue(raw: string): string[];
+/**
+ * Selected-first contra el snapshot tomado al abrir (patrón co-ref-field):
+ * idle → bloque seleccionado en orden de snapshot (sintetizando desde
+ * snapshotDisplay los que la página actual no contiene) + resto en orden de
+ * server; buscando → solo resultados reales, seleccionados primero.
+ *
+ * Invariante: todo id en `snapshotIds` DEBE tener una entrada correspondiente
+ * en `snapshotDisplay` (armado por el caller desde selectedItems ∪ items al
+ * tomar el snapshot). Un id sin display-item asociado se cae silenciosamente
+ * de la lista en modo idle (el `byId.get(d._id) ?? d` sintetiza desde el
+ * display-item mismo, pero no hay nada que sintetizar si el id nunca entró a
+ * snapshotDisplay en primer lugar).
+ */
+export declare function orderItems(items: OptionListItem[], snapshotIds: Set<string>, snapshotDisplay: OptionListItem[], searching: boolean): OptionListItem[];
+/** Aplana a filas de render insertando un header cuando `group` cambia
+ *  (groupItems de co-command-search). `index` cuenta solo items. */
+export declare function buildRows(items: OptionListItem[]): OptionListRow[];
+/** Siguiente highlight: wrap, salta disabled. -1 = sin items navegables. */
+export declare function nextActiveIndex(current: number, delta: 1 | -1, items: OptionListItem[]): number;
+/** `total > 0` tiene precedencia (deriva remaining); si no, vale `hasMoreProp`. */
+export declare function deriveMore(count: number, total: number, hasMoreProp: boolean): {
+    hasMore: boolean;
+    remaining: number;
+};
+export declare const VIRTUAL_ITEM_HEIGHT = 34;
+export declare const VIRTUAL_VIEWPORT_ITEMS = 8;
+export declare const VIRTUAL_OVERSCAN = 3;
+export declare function virtualSlice(scrollTop: number, count: number): {
+    totalHeight: number;
+    startIdx: number;
+    endIdx: number;
+    offsetY: number;
+};

package/dist/types/components/co-segmented-bar/co-segmented-bar.d.ts

@@ -0,0 +1,32 @@
+/** A single contiguous segment of the bar. */
+export interface CoSegment {
+    /** Portion of `total` this segment fills. */
+    value: number;
+    /** Any CSS color / token, e.g. `var(--co-color-primary-azul)`. */
+    color: string;
+    /** Optional label (used as the segment `title` tooltip). */
+    label?: string;
+}
+/**
+ * A stacked, multi-segment meter — a pill track split into N contiguous
+ * colored segments (e.g. a storage breakdown). Display-only; colors are
+ * supplied by the consumer. Provide an external legend via `slot="legend"`.
+ */
+export declare class CoSegmentedBar {
+    /** Track height in px. */
+    thickness: number;
+    /** Corner rounding of the track. `full` = pill. */
+    radius: 'full' | 'sm' | 'lg';
+    /** Background color of the empty track. */
+    trackColor: string;
+    /** The value the segments are measured against (100% = full track). */
+    total: number;
+    /**
+     * Segments to render — a JSON string OR an array of
+     * `{ value: number; color: string; label?: string }`.
+     */
+    segments: string | CoSegment[];
+    /** Normalize the `segments` prop (JSON string or array) to a clean array. */
+    private get parsedSegments();
+    render(): any;
+}

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

@@ -8,6 +8,10 @@ export declare class CoTab {
     selected: boolean;
     /** Size */
     size: 'large' | 'small';
+    /** Visual variant: filled pill (default) or underline tab */
+    variant: 'pill' | 'underline';
+    /** Optional count/badge pill rendered after the label */
+    badge?: string;
     /** Left icon (Phosphor name) */
     iconLeft?: string;
     /** Right icon (Phosphor name) */

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

@@ -3,10 +3,13 @@ export declare class CoTabGroup {
     el: HTMLElement;
     /** Currently selected tab value */
     value?: string;
+    /** Visual variant, propagated to slotted co-tab children */
+    variant: 'pill' | 'underline';
     /** Emitted when the active tab changes */
     coTabChange: EventEmitter<string>;
     onTabSelect(e: CustomEvent<string>): void;
     watchValue(): void;
+    watchVariant(): void;
     componentDidLoad(): void;
     private syncTabs;
     render(): any;

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

@@ -25,6 +25,13 @@ export declare class CoToast {
     actionsLayout: CoToastActionsLayout;
     /** Semantic variant — drives left accent color, icon tint, default icon, and announced ARIA role. */
     variant: CoToastVariant;
+    /**
+     * Determinate upload/loading progress (0–100). When set, a progress track is
+     * rendered below the message row (with a percentage label, and an
+     * `upload-simple` azul icon when no `icon` is provided). Leave undefined for
+     * a plain toast — behaviour is unchanged.
+     */
+    progress?: number;
     /** Emitted when dismiss is clicked */
     coDismiss: EventEmitter<void>;
     render(): any;

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

@@ -7,6 +7,12 @@ export declare class CoToggleButton {
     iconRight?: string;
     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';
+    /** 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';
     coToggle: EventEmitter<{
         value: string;
         selected: boolean;

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

@@ -8,10 +8,15 @@ export declare class CoToggleButtonGroup {
     direction: 'row' | 'column';
     /** Stretch the group to fill its container; each button shares the width equally. */
     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';
     el: HTMLElement;
     coChange: EventEmitter<string | string[]>;
     private get selectedValues();
     syncChildren(): void;
+    syncVariant(): void;
     componentDidLoad(): void;
     handleToggle(e: CustomEvent<{
         value: string;