@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

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

@@ -1,17 +1,27 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * @slot header - Optional override for the header content (replaces `heading` prop).
- * @slot        - Body content. Hidden when `open=false`.
+ * @slot header     - Optional override for the heading content (replaces `heading` prop).
+ * @slot subheading - Optional secondary line under the heading (replaces `subheading` prop).
+ *                    Handy for a collapsed summary/preview.
+ * @slot            - Body content. Hidden when `open=false`.
  */
 export declare class CoAccordion {
+    el: HTMLElement;
     /** Whether the section is expanded. */
     open: boolean;
     /** Section heading text (used when the `header` slot is empty). */
     heading: string;
+    /** Secondary muted line under the heading (used when the `subheading` slot is
+     *  empty). Typically a collapsed summary/preview. */
+    subheading: string;
     /** Hide the chevron / disable the toggle interaction. */
     disabled: boolean;
     /** Emitted when the user toggles the section. */
     coToggle: EventEmitter<boolean>;
+    private hasSubheadingSlot;
+    componentWillLoad(): void;
+    componentWillRender(): void;
+    private get showSubheading();
     private handleToggle;
     render(): any;
 }

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

@@ -7,12 +7,16 @@ export interface AutocompleteOption {
 }
 export declare class CoAutocomplete {
     label?: string;
+    /** Whether the field is required (renders a required marker on the label). */
+    required: boolean;
     secondaryLabel?: string;
     placeholder: string;
     disabled: boolean;
     iconLeft?: string;
     clearable: boolean;
     helperText?: string;
+    /** Label layout: vertical (label above) or horizontal (label beside) */
+    layout: 'vertical' | 'horizontal';
     status: 'default' | 'error' | 'success' | 'warning' | 'info';
     /** Pre-loaded or server-returned options */
     options: AutocompleteOption[] | string[] | string;
@@ -30,6 +34,8 @@ export declare class CoAutocomplete {
     scrollTop: number;
     focused: boolean;
     el: HTMLElement;
+    private optionsEl?;
+    private osInstance?;
     /** Fired when the user types (after debounce). Host should fetch and set options. */
     coSearch: EventEmitter<string>;
     coChange: EventEmitter<string | string[]>;
@@ -43,7 +49,10 @@ export declare class CoAutocomplete {
     private get selectedValues();
     private get hasValue();
     private get statusIcon();
+    componentWillLoad(): void;
     onOptionsChange(): void;
+    onValueChange(): void;
+    private syncQueryFromValue;
     handleDocumentClick(e: MouseEvent): void;
     private handleInput;
     private handleFocus;
@@ -52,5 +61,7 @@ export declare class CoAutocomplete {
     private handleChipRemove;
     private handleOptionsScroll;
     private getVirtualSlice;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

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

@@ -1,10 +1,12 @@
 export declare class CoAvatar {
-    /** Display type: text shows initials, icon shows a Phosphor icon */
-    type: 'text' | 'icon';
+    /** Display type: text shows initials, icon shows a Phosphor icon, image shows a picture */
+    type: 'text' | 'icon' | 'image';
     /** Size of the avatar */
     size: 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
     /** Initials or short text (type="text") */
     text?: string;
+    /** Image URL (type="image") */
+    src?: string;
     /** Phosphor icon name (type="icon"), defaults to "user" */
     icon: string;
     /** Icon weight */
@@ -13,5 +15,7 @@ export declare class CoAvatar {
     shape: 'circle' | 'square';
     /** Custom background color (hex or CSS value) */
     color?: string;
+    imgFailed: boolean;
+    private handleImgError;
     render(): any;
 }

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

@@ -20,6 +20,10 @@ export declare class CoButton {
     iconWeight: 'regular' | 'thin' | 'light' | 'bold' | 'fill' | 'duotone';
     /** HTML button type — use "submit" inside forms */
     type: 'button' | 'submit' | 'reset';
+    /** Custom background color (CSS value or token, e.g. "var(--co-color-secondary-rojo-100)") */
+    color?: string;
+    /** Custom text/icon color (CSS value or token, e.g. "var(--co-color-base-blanco)") */
+    textColor?: string;
     el: HTMLElement;
     private handleClick;
     render(): any;

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

@@ -0,0 +1,108 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Accessible month calendar (single-date selection).
+ *
+ * Presentation + interaction only: it renders the month grid, handles month
+ * navigation and full keyboard support (WAI-ARIA grid pattern, roving
+ * tabindex), and distinguishes `today` from `selected`. It holds NO popover and
+ * NO text input — `co-date-picker` composes it with `co-date-field` + a popover.
+ *
+ * Value contract: date-only strings "YYYY-MM-DD". Emits `coSelect` with the
+ * chosen date. Today and selected are deliberately different visual states.
+ *
+ * @part root - The calendar container
+ * @part header - Month navigation header
+ * @part grid - The day grid
+ */
+export declare class CoCalendar {
+    el: HTMLElement;
+    /** Selection mode. */
+    mode: 'single' | 'range';
+    /** Currently selected date (single mode), "YYYY-MM-DD" or null/empty. */
+    value?: string | null;
+    /** Range start (range mode), "YYYY-MM-DD" or null. */
+    rangeStart?: string | null;
+    /** Range end (range mode), "YYYY-MM-DD" or null. */
+    rangeEnd?: string | null;
+    /** Earliest selectable date, "YYYY-MM-DD". */
+    min?: string;
+    /** Latest selectable date, "YYYY-MM-DD". */
+    max?: string;
+    /** Blocked dates. Accepts a string[] or a JSON/comma string for raw-HTML use. */
+    disabledDates?: string[] | string;
+    /** Blocked weekdays (0=Sun..6=Sat). Accepts number[] or a JSON/comma string. */
+    disabledDaysOfWeek?: number[] | string;
+    /** BCP-47 locale used for month/weekday labels. */
+    locale: string;
+    /** First day of the week: 0=Sunday .. 6=Saturday. Default 1 (Monday). */
+    firstDayOfWeek: number;
+    /** Override the "previous month" button aria-label (defaults from `locale`). */
+    prevMonthLabel?: string;
+    /** Override the "next month" button aria-label (defaults from `locale`). */
+    nextMonthLabel?: string;
+    /** Emitted when the user selects a day (single mode). Detail = "YYYY-MM-DD". */
+    coSelect: EventEmitter<string>;
+    /** Emitted on each range edit (range mode) with the draft endpoints. */
+    coRangeSelect: EventEmitter<{
+        start: string | null;
+        end: string | null;
+    }>;
+    /** Year currently shown in the grid. */
+    viewYear: number;
+    /** Month (1-12) currently shown in the grid. */
+    viewMonth: number;
+    /** Date holding roving focus (tabindex=0). */
+    focused: string;
+    /** Hovered day for range preview (range mode, pointer only). */
+    hoverDay: string | null;
+    /** Header view: day grid, month picker, or year picker. */
+    view: 'days' | 'months' | 'years';
+    /** When set, focus the matching day cell after the next render. */
+    private shouldFocusGrid;
+    componentWillLoad(): void;
+    onValueChange(): void;
+    /** Move keyboard focus into the grid (used by the picker when the popover opens). */
+    focusGrid(): Promise<void>;
+    private get selectedValue();
+    private get rangeStartV();
+    private get rangeEndV();
+    /** The date the grid should anchor on / focus first. */
+    private get anchorValue();
+    private get disabledOpts();
+    private isDayDisabled;
+    /** Best initial focus: selected/start → today → first enabled day of view → 1st. */
+    private initialFocus;
+    private selectDay;
+    /**
+     * Range click model (controlled by rangeStart/rangeEnd):
+     *   - no start, or both set → start = day, end = null
+     *   - start set, no end → second click sets end (swaps if before start)
+     */
+    private selectRangeDay;
+    private handleDayHover;
+    private moveFocus;
+    /** Header prev/next — steps by month (days), year (months) or decade (years). */
+    private handlePrev;
+    private handleNext;
+    private step;
+    /** Title click zooms out: days → months → years; years → back to days. */
+    private toggleView;
+    private selectMonth;
+    private selectYear;
+    private get decadeStart();
+    /** {year, month} of the active selection (single value or range start). */
+    private get selectedYM();
+    private isMonthDisabled;
+    private isYearDisabled;
+    private handleGridKeyDown;
+    componentDidRender(): void;
+    private focusFocusedCell;
+    /** Range endpoint/in-range flags for a cell, accounting for hover preview. */
+    private rangeFlags;
+    private dayClass;
+    private headerTitle;
+    private renderDays;
+    private renderMonths;
+    private renderYears;
+    render(): any;
+}

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

@@ -1,14 +1,22 @@
 /**
- * @slot header  - Card header area (title, actions)
+ * @slot header  - Card header area (image, title, actions)
  * @slot         - Default slot for card body/content
- * @slot footer  - Card footer area
+ * @slot footer  - Card footer area (meta, actions)
  */
 export declare class CoCard {
+    el: HTMLElement;
     /** Visual variant */
     variant: 'elevated' | 'outlined' | 'flat';
     /** Padding size */
     padding: 'none' | 'sm' | 'md' | 'lg';
     /** Make the card fully clickable */
     clickable: boolean;
+    /** Stretch the card to fill parent height */
+    stretch: boolean;
+    hasHeader: boolean;
+    hasFooter: boolean;
+    private checkSlot;
+    private handleHeaderSlotChange;
+    private handleFooterSlotChange;
     render(): any;
 }

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

@@ -11,6 +11,8 @@ export declare class CoCheckboxGroup {
     secondaryLabel?: string;
     /** Helper text displayed below the options */
     helperText?: string;
+    /** Label layout: vertical (label above) or horizontal (label beside) */
+    layout: 'vertical' | 'horizontal';
     /** Validation status */
     status: 'default' | 'error' | 'success' | 'warning' | 'info';
     /** Currently selected values (JSON string or string array) */

package/dist/types/components/co-color-picker/co-color-picker.d.ts

@@ -0,0 +1,48 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type ColorPreset } from './presets';
+/**
+ * Color picker with preset swatches. Shows a trigger with the current color
+ * swatch + hex value, and opens a popover panel with a grid of preset colors.
+ *
+ * The hex value is read-only (no manual editing) — a copy button lets the user
+ * copy the value to clipboard.
+ *
+ * @event coChange - Emits the selected hex string (e.g. "#0066FF").
+ */
+export declare class CoColorPicker {
+    el: HTMLElement;
+    /** Current color value as hex string (e.g. "#0066FF"). */
+    value: string;
+    /** Field label. */
+    label?: string;
+    /** Placeholder text when no color is selected. */
+    placeholder: string;
+    /** Disable the field. */
+    disabled: boolean;
+    /** Show required indicator. */
+    required: boolean;
+    /** Validation status. */
+    status: 'default' | 'error' | 'success' | 'warning';
+    /** Helper/error text below the field. */
+    helperText?: string;
+    /** Label layout: vertical (label above) or horizontal (label beside) */
+    layout: 'vertical' | 'horizontal';
+    /** Field name for form submission. */
+    name?: string;
+    /**
+     * Preset colors as a JSON stringified array of `{ name, value }` objects
+     * or plain hex strings. When set programmatically, accepts an actual array.
+     */
+    presets: string | ColorPreset[] | string[];
+    /** Emits the selected hex color on change. */
+    coChange: EventEmitter<string>;
+    private isOpen;
+    private copied;
+    private get parsedPresets();
+    private handlePopoverOpen;
+    private handlePopoverClose;
+    private handleSwatchClick;
+    private get statusIcon();
+    private handleCopy;
+    render(): any;
+}

package/dist/types/components/co-color-picker/presets.d.ts

@@ -0,0 +1,10 @@
+export interface ColorPreset {
+    name: string;
+    value: string;
+}
+/**
+ * Default color presets derived from Cobalt design tokens (base.json).
+ * Uses primary colors + secondary-100 (full saturation, best contrast).
+ * Names are English by default — consumers can override with translated presets.
+ */
+export declare const DEFAULT_PRESETS: ColorPreset[];

package/dist/types/components/co-column-picker/co-column-picker.d.ts

@@ -0,0 +1,60 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type ColumnOption, type ColumnSection } from './utils/column-picker-tree';
+export declare class CoColumnPicker {
+    label?: string;
+    secondaryLabel?: string;
+    options: ColumnOption[] | string[] | string;
+    value: string | string[];
+    multiple: boolean;
+    disabled: boolean;
+    showToolbar: boolean;
+    showSearch: boolean;
+    clearable: boolean;
+    placeholder: string;
+    maxHeight: number;
+    emptyText: string;
+    selectAllText: string;
+    clearText: string;
+    expandText: string;
+    collapseText: string;
+    selectedText: string;
+    sections: ColumnSection[] | string;
+    status: 'default' | 'error' | 'success' | 'warning' | 'info';
+    helperText?: string;
+    isOpen: boolean;
+    query: string;
+    expandedKeys: Set<string>;
+    focused: boolean;
+    el: HTMLElement;
+    coChange: EventEmitter<string[]>;
+    coClear: EventEmitter<void>;
+    coSearch: EventEmitter<string>;
+    private searchInputEl?;
+    private get parsedOptions();
+    private get parsedSections();
+    private get selectedValues();
+    private get optionLabelMap();
+    private get hasValue();
+    private get statusIcon();
+    private emitSelection;
+    onOptionsChange(): void;
+    handleDocumentClick(e: MouseEvent): void;
+    private handleFieldClick;
+    private handleSearchInput;
+    private handleSearchClear;
+    private handleClear;
+    private handleSelectAll;
+    private handleDeselectAll;
+    private handleExpandAll;
+    private handleCollapseAll;
+    private handleOptionClick;
+    private handleParentCheck;
+    private handleChipRemove;
+    private handleToggleExpand;
+    private getTree;
+    private getSectionedTree;
+    private renderField;
+    private renderTree;
+    private renderEmpty;
+    render(): any;
+}

package/dist/types/components/co-column-picker/column-picker-node.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Stencil FunctionalComponent for rendering a single tree node
+ * in the column-picker dropdown.
+ */
+import { FunctionalComponent } from '../../stencil-public-runtime';
+import { type TreeNode } from './utils/column-picker-tree';
+export interface ColumnPickerNodeProps {
+    node: TreeNode;
+    depth: number;
+    selected: string[];
+    expandedKeys: Set<string>;
+    disabled: boolean;
+    query: string;
+    onOptionClick: (path: string) => void;
+    onParentCheck: (node: TreeNode) => void;
+    onToggleExpand: (key: string, e: MouseEvent) => void;
+}
+export declare const ColumnPickerNode: FunctionalComponent<ColumnPickerNodeProps>;

package/dist/types/components/co-column-picker/utils/column-picker-tree.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Pure tree-building, filtering, and string utilities for co-column-picker.
+ * No Stencil dependency — fully unit-testable.
+ */
+import { normalizeText as normalize } from '../../../utils/normalizeText';
+export interface ColumnOption {
+    label: string;
+    value: string;
+    icon?: string;
+    disabled?: boolean;
+}
+export interface ColumnSection {
+    label: string;
+    prefix: string;
+}
+export interface TreeNode {
+    label: string;
+    key: string;
+    fullPath: string;
+    children: TreeNode[] | null;
+    isSelf?: boolean;
+}
+export declare function parsePaths(raw: ColumnOption[] | string[] | string): string[];
+export declare function parseSections(raw: ColumnSection[] | string): ColumnSection[];
+export declare function parseValues(raw: string | string[]): string[];
+export declare function buildLabelMap(raw: ColumnOption[] | string[] | string): Map<string, string>;
+export { normalize };
+export declare function formatLabel(str: string): string;
+export declare function escapeHtml(str: string): string;
+export declare function highlightLabel(text: string, search: string): string;
+export declare function buildTree(flatPaths: string[], labelMap?: Map<string, string>): TreeNode[];
+export declare function sortNodes(nodes: TreeNode[]): TreeNode[];
+export declare function filterTree(nodes: TreeNode[], q: string): TreeNode[];
+export declare function collectAllLeafPaths(nodes: TreeNode[]): string[];
+export declare function expandForSelected(tree: TreeNode[], selected: string[], current: Set<string>): Set<string>;
+export declare function expandForQuery(nodes: TreeNode[], q: string, current: Set<string>): Set<string>;
+export declare function collectAllExpandableKeys(nodes: TreeNode[]): Set<string>;

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

@@ -7,9 +7,12 @@ export interface ComboboxOption {
 export declare class CoCombobox {
     /** Label text displayed above the combobox */
     label?: string;
+    /** Whether the field is required (renders a required marker on the label). */
+    required: boolean;
     /** Secondary label displayed on the right side */
     secondaryLabel?: string;
-    /** Placeholder text */
+    /** Placeholder text. Empty by default — a literal "Placeholder" leaking into
+     *  product UIs when the consumer forgets the prop is worse than no hint. */
     placeholder: string;
     /** Disabled state */
     disabled: boolean;
@@ -33,8 +36,14 @@ export declare class CoCombobox {
     value: string[] | string;
     /** Whether multiple values can be selected */
     multiple: boolean;
+    /** Trigger size (mirrors co-input/co-select): s 28 / sm 32 / md 40 / lg 48 */
+    size: 's' | 'sm' | 'md' | 'lg';
     /** Helper text displayed below the combobox */
     helperText?: string;
+    /** Validation status */
+    status: 'default' | 'error' | 'success' | 'warning' | 'info';
+    /** Label layout: vertical (label above) or horizontal (label beside) */
+    layout: 'vertical' | 'horizontal';
     isOpen: boolean;
     searchQuery: string;
     overflowCount: number;
@@ -42,6 +51,7 @@ export declare class CoCombobox {
     el: HTMLElement;
     private chipContainerEl?;
     private optionsContainerEl?;
+    private osInstance?;
     private resizeObserver?;
     private static readonly ITEM_HEIGHT;
     private static readonly VIEWPORT_ITEMS;
@@ -62,9 +72,12 @@ export declare class CoCombobox {
     private get parsedOptions();
     private get selectedValues();
     private get filteredOptions();
+    /** Option label with the matched substring wrapped for highlighting. */
+    private renderLabel;
     private get displayText();
     private get selectedOptions();
     private get hasValue();
+    private get statusIcon();
     onOpenChange(open: boolean): void;
     onValueChange(): void;
     connectedCallback(): void;

package/dist/types/components/co-command-search/co-command-search.d.ts

@@ -28,6 +28,8 @@ export declare class CoCommandSearch {
     private inputEl?;
     private get parsedItems();
     private get filteredItems();
+    /** Item label with the matched substring wrapped for highlighting. */
+    private renderLabel;
     onOpenChange(newVal: boolean): void;
     private handleInput;
     private handleKeyDown;

package/dist/types/components/co-data-table/co-data-table.d.ts

@@ -79,6 +79,7 @@ export declare class CoDataTable {
     resizingColumn: string | null;
     resizeStartX: number;
     resizeStartWidth: number;
+    private suppressNextSort;
     parseColumns(): void;
     parseRows(): void;
     parseSelectedKeys(): void;

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

@@ -0,0 +1,96 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Text input for a single date with manual typing as a first-class input.
+ *
+ * The committed `value` is always a date-only string "YYYY-MM-DD" (or `null`
+ * when empty) — the visible text is formatted per `displayFormat` (default
+ * dd/MM/yyyy, es-CO). The component keeps a `draft` (raw text) separate from the
+ * committed `value`, so a controlled parent setting `value` never clobbers what
+ * the user is typing.
+ *
+ * It owns its own `<input>` (rather than embedding `co-input`) so it can control
+ * the Enter key — committing/validating the typed date instead of submitting the
+ * enclosing form on an unparsed value.
+ *
+ * Events: `coInput` (typing, raw), `coChange` (committed valid value or null),
+ * `coInvalid` (commit failed, value unchanged), `coClear`, `coFocus`, `coBlur`.
+ *
+ * @part wrapper - Root container
+ * @part label - The field label
+ * @part field - The bordered input row
+ * @part input - The native input element
+ * @part clear - The clear button
+ * @part helper - The helper/error text row
+ */
+export declare class CoDateField {
+    el: HTMLElement;
+    /** Committed value, "YYYY-MM-DD" or null. */
+    value: string | null;
+    /** Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+    size: 's' | 'sm' | 'md' | 'lg';
+    /** Earliest allowed date, "YYYY-MM-DD". */
+    min?: string;
+    /** Latest allowed date, "YYYY-MM-DD". */
+    max?: string;
+    /** Blocked dates (string[] or JSON/comma string). */
+    disabledDates?: string[] | string;
+    /** Blocked weekdays 0=Sun..6=Sat (number[] or JSON/comma string). */
+    disabledDaysOfWeek?: number[] | string;
+    /** BCP-47 locale. */
+    locale: string;
+    /** Display pattern (tokens yyyy/yy/MMMM/MMM/MM/M/dd/d). */
+    displayFormat: string;
+    label?: string;
+    placeholder?: string;
+    name?: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    clearable: boolean;
+    /** External invalid flag (e.g. from a form controller). OR'd with internal parse failure. */
+    invalid: boolean;
+    /** Message shown when invalid. */
+    errorMessage?: string;
+    /** Helper text shown when valid. */
+    helperText?: string;
+    /** Label layout: vertical (label above) or horizontal (label beside) */
+    layout: 'vertical' | 'horizontal';
+    /** Override the clear-button aria-label (defaults from `locale`). */
+    clearLabel?: string;
+    /** Emitted on every keystroke with the raw text. */
+    coInput: EventEmitter<string>;
+    /** Emitted when a valid value (or null) is committed. */
+    coChange: EventEmitter<string | null>;
+    /** Emitted when a committed parse fails. Detail carries the raw text. */
+    coInvalid: EventEmitter<{
+        raw: string;
+    }>;
+    /** Emitted when cleared. */
+    coClear: EventEmitter<void>;
+    coFocus: EventEmitter<void>;
+    coBlur: EventEmitter<void>;
+    /** Raw text in the box (display-formatted on commit). */
+    draft: string;
+    /** Internal parse-failure flag. */
+    internalInvalid: boolean;
+    hasFocus: boolean;
+    private inputEl?;
+    componentWillLoad(): void;
+    onValueChange(): void;
+    /** Focus the text input (used by co-date-picker to return focus on close). */
+    focusInput(): Promise<void>;
+    private get order();
+    private get isInvalid();
+    private get hasValue();
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    private handleKeyDown;
+    private handleClear;
+    /**
+     * Parse the draft and commit. Returns true when the field is in a valid,
+     * committed state (including empty → null), false when invalid.
+     */
+    private commit;
+    render(): any;
+}