@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/esm/tz-B6JZk8fL.js

@@ -0,0 +1,119 @@
+/**
+ * tz.ts — IANA timezone conversion for the Cobalt calendar engine.
+ *
+ * The calendar STORES instants as UTC ISO-8601 ("…Z") and RENDERS wall-clock
+ * time in a target IANA zone. Browsers expose exactly one tz-correct primitive:
+ * `Intl.DateTimeFormat` with a `timeZone` option. Everything here is built on
+ * it, with ZERO dependencies, so DST is resolved by the platform's tz database
+ * (kept current by the OS) rather than a bundled rule set.
+ *
+ * Vocabulary:
+ *   - an "instant" is a point in time: epoch milliseconds, a Date, or an ISO
+ *     string WITH an offset/Z designator (date-time strings parse unambiguously;
+ *     bare "YYYY-MM-DD" is NOT an instant — see {@link model.ts} all-day events).
+ *   - a "wall clock" is the calendar-and-clock reading a person standing in
+ *     `timeZone` would see at that instant.
+ *
+ * Why not `new Date(str)` everywhere: that is only safe for date-TIME strings
+ * carrying an offset (which is all this module accepts). Bare date-only strings
+ * parse as UTC midnight and shift the day in negative-offset zones — that hazard
+ * is owned by `@prolibu-suite/cobalt-date-utils`, never here.
+ */
+const pad2 = (n) => String(n).padStart(2, '0');
+const FMT_CACHE = new Map();
+/** Cached parts formatter for a zone (constructing Intl.DateTimeFormat is costly). */
+function partsFormatter(timeZone) {
+    let f = FMT_CACHE.get(timeZone);
+    if (!f) {
+        f = new Intl.DateTimeFormat('en-US', {
+            timeZone,
+            hourCycle: 'h23',
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+        });
+        FMT_CACHE.set(timeZone, f);
+    }
+    return f;
+}
+/** Normalize any {@link Instant} to epoch milliseconds. */
+function toEpoch(instant) {
+    if (typeof instant === 'number')
+        return instant;
+    if (instant instanceof Date)
+        return instant.getTime();
+    const t = Date.parse(instant);
+    if (Number.isNaN(t))
+        throw new RangeError(`tz: invalid instant "${instant}"`);
+    return t;
+}
+/** The browser's current IANA timezone (e.g. "America/Bogota"). */
+function getLocalTimeZone() {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+}
+/** The wall-clock reading at `instant`, observed in `timeZone`. */
+function getWallClock(instant, timeZone) {
+    const parts = partsFormatter(timeZone).formatToParts(new Date(toEpoch(instant)));
+    const read = (type) => {
+        const p = parts.find((x) => x.type === type);
+        return p ? Number(p.value) : 0;
+    };
+    let hour = read('hour');
+    // Defensive: some engines emit "24" for midnight under hour-cycle edge cases.
+    if (hour === 24)
+        hour = 0;
+    return {
+        year: read('year'),
+        month: read('month'),
+        day: read('day'),
+        hour,
+        minute: read('minute'),
+        second: read('second'),
+    };
+}
+/**
+ * Minutes EAST of UTC at `instant`, observed in `timeZone`.
+ * America/Bogota → -300 (UTC-5); America/New_York in summer → -240 (UTC-4).
+ */
+function getOffsetMinutes(instant, timeZone) {
+    const epoch = toEpoch(instant);
+    const wc = getWallClock(epoch, timeZone);
+    const asUTC = Date.UTC(wc.year, wc.month - 1, wc.day, wc.hour, wc.minute, wc.second);
+    return Math.round((asUTC - epoch) / 60000);
+}
+/**
+ * Convert a wall-clock reading INTERPRETED in `timeZone` to a UTC instant.
+ *
+ * Handles DST: the offset is sampled at a first guess, applied, then re-sampled
+ * because the offset that applies depends on the very instant we're computing.
+ * A single correction step resolves every regular DST transition. In a
+ * spring-forward gap (a wall time that never existed) this yields the consistent
+ * post-transition instant; in a fall-back overlap it yields the first (earlier)
+ * occurrence — both are deterministic, documented conventions.
+ */
+function wallClockToEpoch(wc, timeZone) {
+    const guess = Date.UTC(wc.year, wc.month - 1, wc.day, wc.hour ?? 0, wc.minute ?? 0, wc.second ?? 0);
+    const off1 = getOffsetMinutes(guess, timeZone);
+    const utc1 = guess - off1 * 60000;
+    const off2 = getOffsetMinutes(utc1, timeZone);
+    return off2 === off1 ? utc1 : guess - off2 * 60000;
+}
+/** Canonical UTC "…Z" string for any instant. */
+function toUtcISO(instant) {
+    return new Date(toEpoch(instant)).toISOString();
+}
+/** Wall-clock date key "YYYY-MM-DD" at `instant` in `timeZone` (for day bucketing). */
+function zonedDateKey(instant, timeZone) {
+    const wc = getWallClock(instant, timeZone);
+    return `${wc.year}-${pad2(wc.month)}-${pad2(wc.day)}`;
+}
+/** Minutes since local midnight at `instant` in `timeZone` (for time-grid layout). */
+function zonedMinutesOfDay(instant, timeZone) {
+    const wc = getWallClock(instant, timeZone);
+    return wc.hour * 60 + wc.minute;
+}
+
+export { toUtcISO as a, zonedMinutesOfDay as b, getWallClock as c, getLocalTimeZone as g, toEpoch as t, wallClockToEpoch as w, zonedDateKey as z };

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,18 @@ 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';
+    /** Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+    size: 's' | 'sm' | 'md' | 'lg';
     status: 'default' | 'error' | 'success' | 'warning' | 'info';
     /** Pre-loaded or server-returned options */
     options: AutocompleteOption[] | string[] | string;
@@ -30,6 +36,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 +51,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 +63,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,9 @@ export declare class CoAvatar {
     shape: 'circle' | 'square';
     /** Custom background color (hex or CSS value) */
     color?: string;
+    /** Optional 2px ring color (hex/CSS). Drives the inset ::after ring. */
+    ringColor?: string;
+    imgFailed: boolean;
+    private handleImgError;
     render(): any;
 }

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

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/** One avatar descriptor consumed by `co-avatar-group`. Mirrors `co-avatar`'s props. */
+export interface CoAvatarGroupItem {
+    type?: 'text' | 'icon' | 'image';
+    text?: string;
+    src?: string;
+    icon?: string;
+    color?: string;
+    shape?: 'circle' | 'square';
+    /** Full name — used to compose the group's accessible label. */
+    name?: string;
+    /** Optional ring color forwarded to the child `co-avatar`. */
+    ringColor?: string;
+}
+export declare class CoAvatarGroup {
+    /** Avatar descriptors rendered as an overlapping stack. */
+    items: CoAvatarGroupItem[];
+    /** Max avatars shown before the remainder collapses into a "+N" badge. `0` = show all. */
+    max: number;
+    /** Size forwarded to every avatar (and the overflow badge). */
+    size: 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
+    /** Shape forwarded to every avatar that doesn't set its own. */
+    shape: 'circle' | 'square';
+    /** Make the whole group a focusable button (role=button, keyboard, coClick). */
+    interactive: boolean;
+    /** Accessible label override; when absent it's composed from the items' names. */
+    label?: string;
+    /** Emitted on click / Enter / Space when `interactive`. Does NOT bubble. */
+    coClick: EventEmitter<void>;
+    private activate;
+    private accessibleLabel;
+    render(): any;
+}

package/dist/types/components/co-bottom-sheet/co-bottom-sheet.d.ts

@@ -0,0 +1,81 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Mobile bottom sheet with native drag physics: the sheet follows the finger
+ * 1:1 downward, a fast flick (or a slow release past ~45% of its height)
+ * dismisses it, upward overdrag rubber-bands, and the backdrop opacity is
+ * coupled to the drag. The body scrolls internally — dragging from the body
+ * only engages when its content is scrolled to the top.
+ *
+ * Height fits the content, capped by `maxHeight` (default 85dvh).
+ *
+ * @slot header - Custom header content (overrides `heading`). Dragging it moves the sheet.
+ * @slot        - Sheet body (scrollable).
+ * @slot footer - Pinned action area below the body (outside the scroll), with safe-area padding.
+ */
+export declare class CoBottomSheet {
+    el: HTMLElement;
+    /** Whether the sheet is visible */
+    open: boolean;
+    /** Sheet title (used when the `header` slot is empty) */
+    heading: string;
+    /** Maximum sheet height (any CSS length; content shorter than this hugs) */
+    maxHeight: string;
+    /** Allow closing with the drag gesture. When false, drags rubber-band back. */
+    dismissible: boolean;
+    /** Close when tapping the backdrop */
+    closeOnOverlay: boolean;
+    /** Close when pressing Escape */
+    closeOnEscape: boolean;
+    /** Show the grab handle */
+    showHandle: boolean;
+    /** Requested to close (gesture, backdrop, Esc). Consumer should set `open=false`. */
+    coClose: EventEmitter<void>;
+    /** Transitioned to open=true. */
+    coOpen: EventEmitter<void>;
+    /** Slide-in animation finished. */
+    coAfterOpen: EventEmitter<void>;
+    /** Slide-out animation finished. */
+    coAfterClose: EventEmitter<void>;
+    hasFooter: boolean;
+    hasHeaderSlot: boolean;
+    private sheetEl?;
+    private backdropEl?;
+    private bodyEl?;
+    private tracker;
+    private armed;
+    private engaged;
+    private fromBody;
+    private startY;
+    private startX;
+    private startScrollTop;
+    private sheetHeight;
+    private dismissPending;
+    private dismissFallback?;
+    private pendingAfter;
+    onOpenChange(next: boolean, prev: boolean): void;
+    handleKey(e: KeyboardEvent): void;
+    disconnectedCallback(): void;
+    private clearInlineStyles;
+    private handleBackdropClick;
+    private slotHasContent;
+    private handleFooterSlotChange;
+    private handleHeaderSlotChange;
+    private handleTransitionEnd;
+    private handleGripPointerDown;
+    private handleBodyPointerDown;
+    private arm;
+    private handlePointerMove;
+    private engage;
+    private handlePointerUp;
+    private handlePointerCancel;
+    private disarm;
+    /**
+     * iOS: `touch-action` is frozen at gesture start and preventDefault on
+     * pointermove does not stop native scrolling — only a non-passive touchmove
+     * listener can claim the gesture from a scrollable body.
+     */
+    private touchBlocker;
+    private attachTouchBlocker;
+    private detachTouchBlocker;
+    render(): any;
+}

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

@@ -3,7 +3,7 @@
  */
 export declare class CoButton {
     /** Visual style */
-    variant: 'primary' | 'secondary' | 'stroke' | 'ghost';
+    variant: 'primary' | 'secondary' | 'stroke' | 'ghost' | 'danger' | 'success';
     /** Shape: pill or straight corners */
     shape: 'rounded' | 'square';
     /** Size */
@@ -20,6 +20,12 @@ 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;
+    /** Override the size-derived glyph px (e.g. 24). Falls back to the size default. */
+    iconSize?: number;
     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-calendar-month/co-calendar-month.d.ts

@@ -0,0 +1,83 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type NormalizedEvent } from '@prolibu-suite/cobalt-calendar-utils';
+/**
+ * Month grid for the event calendar. Forks the day grid, roving-tabindex and
+ * keyboard model from `co-calendar`, then overlays multi-day event bars laid out
+ * by `layoutMonth` from the engine. Presentation + interaction only; the host
+ * (via `co-event-calendar`) owns data and persistence.
+ *
+ * Events are CONTROLLED through the `events` prop — drag emits a request, it does
+ * NOT mutate locally; the host re-renders with new data on success or leaves the
+ * old data on failure (that IS the revert).
+ *
+ * @part grid - The month grid container
+ */
+export declare class CoCalendarMonth {
+    el: HTMLElement;
+    /** Normalized events to render (from the engine's `normalizeEvents`). */
+    events: NormalizedEvent[];
+    /** Year shown. */
+    year: number;
+    /** Month shown (1-12). */
+    month: number;
+    /** BCP-47 locale for weekday labels. */
+    locale: string;
+    /** First day of week, 0=Sun..6=Sat. */
+    firstDayOfWeek: number;
+    /** IANA timezone used to place timed events on their wall-clock day. */
+    timeZone: string;
+    /** Earliest interactable day "YYYY-MM-DD" (gates select/drag — past-block). */
+    minDate?: string;
+    /** Latest interactable day "YYYY-MM-DD". */
+    maxDate?: string;
+    /** Master interaction gate. */
+    editable: boolean;
+    /** Allow empty-day click to request a create. */
+    selectable: boolean;
+    /** Max event lanes per day before "+N more". */
+    maxLanes: number;
+    /** Day holding roving focus. */
+    focused: string;
+    /** Day currently hovered while dragging an event. */
+    dragOverDate: string | null;
+    /** Id of the event being dragged. */
+    dragId: string | null;
+    /** Emitted when an empty day is selected (create request). Detail = "YYYY-MM-DD". */
+    coDaySelect: EventEmitter<{
+        date: string;
+    }>;
+    /** Emitted when an event chip is activated. */
+    coEventClick: EventEmitter<{
+        id: string;
+    }>;
+    /** Emitted on a completed drag-move (day granularity). */
+    coEventDrop: EventEmitter<{
+        id: string;
+        start: string;
+        end: string;
+        oldStart: string;
+        oldEnd: string;
+        allDay: boolean;
+    }>;
+    /** Emitted when the "+N more" affordance is activated. */
+    coMoreClick: EventEmitter<{
+        date: string;
+    }>;
+    private onPointerUp;
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private defaultFocus;
+    private get matrix();
+    private eventById;
+    private isDayInteractable;
+    private selectDay;
+    private activateEvent;
+    private moveFocus;
+    private focusCell;
+    private handleKeyDown;
+    private startDrag;
+    private finishDrag;
+    private renderChip;
+    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-chip/co-chip.d.ts

@@ -19,7 +19,7 @@ export declare class CoChip {
     /** Visual variant */
     variant: 'filled' | 'outlined';
     /** Semantic color */
-    color: 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info';
+    color: 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info' | 'pending' | 'progress' | 'review' | 'submitted';
     /** Text label (alternative to default slot) */
     label?: string;
     /** Icon name for the left icon (prop-based, uses co-icon — any Phosphor icon name) */
@@ -28,8 +28,13 @@ export declare class CoChip {
     iconRight?: string;
     /** Icon weight applied to prop-based iconLeft / iconRight. */
     iconWeight: 'regular' | 'thin' | 'light' | 'bold' | 'fill' | 'duotone';
-    /** Show dismiss/remove button and emit coRemove on click */
+    /** Show dismiss/remove button and emit coRemove on click. Reflected so it
+     *  survives lazy hydration when set via a framework wrapper. */
     removable: boolean;
+    /** Show a leading colour dot (status/value colour). Reflected for hydration. */
+    dot: boolean;
+    /** Colour of the leading dot (hex or any CSS colour). Reflected for hydration. */
+    dotColor?: string;
     /** Make the chip clickable (emits coClick) */
     clickable: boolean;
     /** Disabled state */

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

@@ -0,0 +1,50 @@
+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 size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+    size: 's' | 'sm' | 'md' | 'lg';
+    /** 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[];