@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

package/dist/esm/co-calendar_3.entry.js

@@ -0,0 +1,688 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BKmfyPZK.js';
+import { g as getDateStrings } from './dateI18n-C1DCLOEl.js';
+import { b as addMonths, d as addDays, a as todayYMD, p as parseISO, i as isValidYMD, e as isDisabled, s as startOfMonth, c as compareYMD, g as getMonthLabel, h as getWeekdayLabels, j as getMonthMatrix, k as getFullDateLabel, f as formatDisplay, l as parseFlexible } from './dates-CyYF8IJE.js';
+import { R as RequiredMark } from './requiredMark-DFvtYtkE.js';
+
+const coCalendarCss = () => `:host{display:inline-block;font-family:var(--co-font-family-primary);--co-calendar-day-size:36px}:host([data-touch]){--co-calendar-day-size:44px}.co-calendar{display:flex;flex-direction:column;gap:var(--co-spacing-sm);width:max-content}.co-calendar__header{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-calendar__month{font-size:var(--co-font-size-14);font-weight:600;color:var(--co-semantic-text-default);text-transform:capitalize}.co-calendar__title{display:inline-flex;align-items:center;gap:var(--co-spacing-xxs);background:none;border:0;cursor:pointer;font-family:inherit;font-size:var(--co-font-size-14);font-weight:600;color:var(--co-semantic-text-default);text-transform:capitalize;padding:var(--co-spacing-xxs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs)}.co-calendar__title:hover{background:var(--co-semantic-surface-hover)}.co-calendar__title:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.co-calendar__title-caret{color:var(--co-semantic-text-muted)}.co-calendar__panel{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--co-spacing-xs);width:calc(var(--co-calendar-day-size) * 7 + 12px);padding-top:var(--co-spacing-xs)}.co-calendar__cell{height:calc(var(--co-calendar-day-size) + 8px);display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:var(--co-border-radius-xs);font-family:inherit;font-size:var(--co-font-size-14);color:var(--co-semantic-text-default);cursor:pointer;text-transform:capitalize;transition:background 0.1s ease, color 0.1s ease, border-color 0.1s ease}.co-calendar__cell:hover:not(.co-calendar__cell--disabled):not(.co-calendar__cell--selected){background:var(--co-semantic-surface-hover)}.co-calendar__cell:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.co-calendar__cell--muted{color:var(--co-semantic-text-muted)}.co-calendar__cell--today{border-color:var(--co-color-primary-azul);font-weight:600}.co-calendar__cell--selected{background:var(--co-color-primary-azul);border-color:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff);font-weight:600}.co-calendar__cell--disabled{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-calendar__nav{background:none;border:0;cursor:pointer;padding:var(--co-spacing-xs);border-radius:var(--co-border-radius-xxs);display:inline-flex;align-items:center;color:var(--co-semantic-text-default)}.co-calendar__nav:hover{background:var(--co-semantic-surface-hover)}.co-calendar__nav:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.co-calendar__grid{display:flex;flex-direction:column;gap:2px}.co-calendar__row{display:grid;grid-template-columns:repeat(7, var(--co-calendar-day-size));gap:2px}.co-calendar__row--dow{margin-bottom:2px}.co-calendar__dow{height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--co-font-size-10, 10px);font-weight:600;color:var(--co-semantic-text-muted);text-transform:uppercase;letter-spacing:0.04em}.co-calendar__day{width:var(--co-calendar-day-size);height:var(--co-calendar-day-size);display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:var(--co-border-radius-xs);font-size:var(--co-font-size-14);font-family:inherit;color:var(--co-semantic-text-default);cursor:pointer;transition:background 0.1s ease, color 0.1s ease, border-color 0.1s ease}.co-calendar__day:hover:not(.co-calendar__day--disabled):not(.co-calendar__day--selected){background:var(--co-semantic-surface-hover)}.co-calendar__day:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.co-calendar__day--outside{color:var(--co-semantic-text-muted)}.co-calendar__day--today{border-color:var(--co-color-primary-azul);font-weight:600}.co-calendar__day--selected{background:var(--co-color-primary-azul);border-color:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff);font-weight:600}.co-calendar__day--disabled{color:var(--co-semantic-text-disabled);cursor:not-allowed;pointer-events:none}.co-calendar__day--in-range{background:var(--co-semantic-surface-hover);border-radius:0;color:var(--co-semantic-text-default)}.co-calendar__day--range-start,.co-calendar__day--range-end{background:var(--co-color-primary-azul);border-color:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff);font-weight:600}.co-calendar__day--range-start:not(.co-calendar__day--range-end){border-top-right-radius:0;border-bottom-right-radius:0}.co-calendar__day--range-end:not(.co-calendar__day--range-start){border-top-left-radius:0;border-bottom-left-radius:0}`;
+
+const CoCalendar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coSelect = createEvent(this, "coSelect", 7);
+        this.coRangeSelect = createEvent(this, "coRangeSelect", 7);
+        /** Selection mode. */
+        this.mode = 'single';
+        /** BCP-47 locale used for month/weekday labels. */
+        this.locale = 'es-CO';
+        /** First day of the week: 0=Sunday .. 6=Saturday. Default 1 (Monday). */
+        this.firstDayOfWeek = 1;
+        /** Hovered day for range preview (range mode, pointer only). */
+        this.hoverDay = null;
+        /** Header view: day grid, month picker, or year picker. */
+        this.view = 'days';
+        /** When set, focus the matching day cell after the next render. */
+        this.shouldFocusGrid = false;
+        this.handleDayHover = (day) => {
+            if (this.mode === 'range')
+                this.hoverDay = day;
+        };
+        /** Header prev/next — steps by month (days), year (months) or decade (years). */
+        this.handlePrev = () => this.step(-1);
+        this.handleNext = () => this.step(1);
+        /** Title click zooms out: days → months → years; years → back to days. */
+        this.toggleView = () => {
+            this.view = this.view === 'days' ? 'months' : this.view === 'months' ? 'years' : 'days';
+        };
+        this.handleGridKeyDown = (e) => {
+            const cur = this.focused;
+            let handled = true;
+            switch (e.key) {
+                case 'ArrowLeft':
+                    this.moveFocus(addDays(cur, -1));
+                    break;
+                case 'ArrowRight':
+                    this.moveFocus(addDays(cur, 1));
+                    break;
+                case 'ArrowUp':
+                    this.moveFocus(addDays(cur, -7));
+                    break;
+                case 'ArrowDown':
+                    this.moveFocus(addDays(cur, 7));
+                    break;
+                case 'Home':
+                    this.moveFocus(startOfWeek(cur, this.firstDayOfWeek));
+                    break;
+                case 'End':
+                    this.moveFocus(addDays(startOfWeek(cur, this.firstDayOfWeek), 6));
+                    break;
+                case 'PageUp':
+                    this.moveFocus(addMonths(cur, e.shiftKey ? -12 : -1));
+                    break;
+                case 'PageDown':
+                    this.moveFocus(addMonths(cur, e.shiftKey ? 12 : 1));
+                    break;
+                case 'Enter':
+                case ' ':
+                    this.selectDay(cur);
+                    break;
+                default:
+                    handled = false;
+            }
+            if (handled) {
+                // Stop Enter/Space from reaching an enclosing <form> and submitting,
+                // and stop arrows from scrolling the page.
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+    }
+    componentWillLoad() {
+        var _a;
+        const anchor = (_a = this.anchorValue) !== null && _a !== void 0 ? _a : todayYMD();
+        const a = parseISO(anchor);
+        this.viewYear = a.year;
+        this.viewMonth = a.month;
+        this.focused = this.initialFocus();
+    }
+    onValueChange() {
+        if (!this.selectedValue)
+            return;
+        const a = parseISO(this.selectedValue);
+        this.viewYear = a.year;
+        this.viewMonth = a.month;
+        this.focused = this.selectedValue;
+    }
+    /** Move keyboard focus into the grid (used by the picker when the popover opens). */
+    async focusGrid() {
+        this.shouldFocusGrid = true;
+        this.focusFocusedCell();
+    }
+    get selectedValue() {
+        return isValidYMD(this.value) ? this.value : null;
+    }
+    get rangeStartV() {
+        return isValidYMD(this.rangeStart) ? this.rangeStart : null;
+    }
+    get rangeEndV() {
+        return isValidYMD(this.rangeEnd) ? this.rangeEnd : null;
+    }
+    /** The date the grid should anchor on / focus first. */
+    get anchorValue() {
+        return this.mode === 'range' ? this.rangeStartV : this.selectedValue;
+    }
+    get disabledOpts() {
+        return {
+            min: this.min,
+            max: this.max,
+            disabledDates: normalizeStringArray(this.disabledDates),
+            disabledDaysOfWeek: normalizeNumberArray(this.disabledDaysOfWeek),
+        };
+    }
+    isDayDisabled(value) {
+        return isDisabled(value, this.disabledOpts);
+    }
+    /** Best initial focus: selected/start → today → first enabled day of view → 1st. */
+    initialFocus() {
+        const anchor = this.anchorValue;
+        if (anchor && !this.isDayDisabled(anchor))
+            return anchor;
+        const today = todayYMD();
+        const t = parseISO(today);
+        if (t.year === this.viewYear && t.month === this.viewMonth && !this.isDayDisabled(today)) {
+            return today;
+        }
+        const first = `${String(this.viewYear).padStart(4, '0')}-${String(this.viewMonth).padStart(2, '0')}-01`;
+        let cur = first;
+        for (let i = 0; i < 31; i++) {
+            const d = parseISO(cur);
+            if (!d || d.month !== this.viewMonth)
+                break;
+            if (!this.isDayDisabled(cur))
+                return cur;
+            cur = addDays(cur, 1);
+        }
+        return first;
+    }
+    selectDay(value) {
+        if (this.isDayDisabled(value))
+            return;
+        this.focused = value;
+        if (this.mode === 'range') {
+            this.selectRangeDay(value);
+        }
+        else {
+            this.coSelect.emit(value);
+        }
+    }
+    /**
+     * 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)
+     */
+    selectRangeDay(day) {
+        const start = this.rangeStartV;
+        const end = this.rangeEndV;
+        let next;
+        if (!start || (start && end)) {
+            next = { start: day, end: null };
+        }
+        else if (compareYMD(day, start) < 0) {
+            next = { start: day, end: start };
+        }
+        else {
+            next = { start, end: day };
+        }
+        this.coRangeSelect.emit(next);
+    }
+    moveFocus(next) {
+        this.focused = next;
+        const n = parseISO(next);
+        if (n.year !== this.viewYear || n.month !== this.viewMonth) {
+            this.viewYear = n.year;
+            this.viewMonth = n.month;
+        }
+        this.shouldFocusGrid = true;
+    }
+    step(dir) {
+        if (this.view === 'days') {
+            const m = addMonths(`${this.viewYear}-${String(this.viewMonth).padStart(2, '0')}-01`, dir);
+            const p = parseISO(m);
+            this.viewYear = p.year;
+            this.viewMonth = p.month;
+        }
+        else if (this.view === 'months') {
+            this.viewYear += dir;
+        }
+        else {
+            this.viewYear += dir * 10;
+        }
+    }
+    selectMonth(month) {
+        this.viewMonth = month;
+        this.view = 'days';
+    }
+    selectYear(year) {
+        this.viewYear = year;
+        this.view = 'months';
+    }
+    get decadeStart() {
+        return Math.floor(this.viewYear / 10) * 10;
+    }
+    /** {year, month} of the active selection (single value or range start). */
+    get selectedYM() {
+        const v = this.mode === 'range' ? this.rangeStartV : this.selectedValue;
+        if (!v)
+            return null;
+        const ymd = parseISO(v);
+        return { year: ymd.year, month: ymd.month };
+    }
+    isMonthDisabled(year, month) {
+        const first = `${String(year).padStart(4, '0')}-${String(month).padStart(2, '0')}-01`;
+        const last = addDays(startOfMonth(addMonths(first, 1)), -1);
+        if (this.min && compareYMD(last, this.min) < 0)
+            return true;
+        if (this.max && compareYMD(first, this.max) > 0)
+            return true;
+        return false;
+    }
+    isYearDisabled(year) {
+        const first = `${String(year).padStart(4, '0')}-01-01`;
+        const last = `${String(year).padStart(4, '0')}-12-31`;
+        if (this.min && compareYMD(last, this.min) < 0)
+            return true;
+        if (this.max && compareYMD(first, this.max) > 0)
+            return true;
+        return false;
+    }
+    componentDidRender() {
+        if (this.shouldFocusGrid) {
+            this.shouldFocusGrid = false;
+            this.focusFocusedCell();
+        }
+    }
+    focusFocusedCell() {
+        var _a;
+        const cell = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-date="${this.focused}"]`);
+        cell === null || cell === void 0 ? void 0 : cell.focus();
+    }
+    /** Range endpoint/in-range flags for a cell, accounting for hover preview. */
+    rangeFlags(value) {
+        const start = this.rangeStartV;
+        const end = this.rangeEndV;
+        if (!start)
+            return { isStart: false, isEnd: false, inRange: false };
+        const previewTarget = end !== null && end !== void 0 ? end : (this.hoverDay && !end ? this.hoverDay : null);
+        if (!previewTarget) {
+            return { isStart: compareYMD(value, start) === 0, isEnd: false, inRange: false };
+        }
+        const lo = compareYMD(start, previewTarget) <= 0 ? start : previewTarget;
+        const hi = compareYMD(start, previewTarget) <= 0 ? previewTarget : start;
+        return {
+            isStart: compareYMD(value, lo) === 0,
+            isEnd: compareYMD(value, hi) === 0,
+            inRange: compareYMD(value, lo) > 0 && compareYMD(value, hi) < 0,
+        };
+    }
+    dayClass(value, inMonth, disabled) {
+        const isToday = compareYMD(value, todayYMD()) === 0;
+        if (this.mode === 'range') {
+            const { isStart, isEnd, inRange } = this.rangeFlags(value);
+            const isEndpoint = isStart || isEnd;
+            return {
+                'co-calendar__day': true,
+                'co-calendar__day--outside': !inMonth,
+                'co-calendar__day--today': isToday && !isEndpoint && !inRange,
+                'co-calendar__day--range-start': isStart,
+                'co-calendar__day--range-end': isEnd,
+                'co-calendar__day--in-range': inRange,
+                'co-calendar__day--disabled': disabled,
+            };
+        }
+        const selected = this.selectedValue;
+        const isSelected = !!selected && compareYMD(value, selected) === 0;
+        return {
+            'co-calendar__day': true,
+            'co-calendar__day--outside': !inMonth,
+            'co-calendar__day--today': isToday && !isSelected,
+            'co-calendar__day--selected': isSelected,
+            'co-calendar__day--disabled': disabled,
+        };
+    }
+    headerTitle() {
+        if (this.view === 'months')
+            return String(this.viewYear);
+        if (this.view === 'years')
+            return `${this.decadeStart}–${this.decadeStart + 9}`;
+        return getMonthLabel(this.viewYear, this.viewMonth, this.locale, 'long');
+    }
+    renderDays(t) {
+        const monthLabel = getMonthLabel(this.viewYear, this.viewMonth, this.locale, 'long');
+        const shortLabels = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'short');
+        const longLabels = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'long');
+        const matrix = getMonthMatrix(this.viewYear, this.viewMonth, this.firstDayOfWeek);
+        return (h("div", { class: "co-calendar__grid", part: "grid", role: "grid", "aria-label": monthLabel, onKeyDown: this.handleGridKeyDown }, h("div", { class: "co-calendar__row co-calendar__row--dow", role: "row" }, shortLabels.map((lbl, i) => (h("span", { class: "co-calendar__dow", role: "columnheader", "aria-label": longLabels[i] }, lbl)))), matrix.map((week) => (h("div", { class: "co-calendar__row", role: "row" }, week.map((cell) => {
+            const disabled = this.isDayDisabled(cell.value);
+            const isFocused = compareYMD(cell.value, this.focused) === 0;
+            const isToday = compareYMD(cell.value, todayYMD()) === 0;
+            let isSelectedAria;
+            if (this.mode === 'range') {
+                const { isStart, isEnd } = this.rangeFlags(cell.value);
+                isSelectedAria = isStart || isEnd;
+            }
+            else {
+                const selected = this.selectedValue;
+                isSelectedAria = !!selected && compareYMD(cell.value, selected) === 0;
+            }
+            const dayNum = parseISO(cell.value).day;
+            return (h("button", { type: "button", role: "gridcell", "data-date": cell.value, class: this.dayClass(cell.value, cell.inMonth, disabled), tabIndex: isFocused ? 0 : -1, "aria-selected": isSelectedAria ? 'true' : 'false', "aria-current": isToday ? 'date' : undefined, "aria-disabled": disabled ? 'true' : undefined, "aria-label": getFullDateLabel(cell.value, this.locale), onClick: () => this.selectDay(cell.value), onMouseEnter: () => this.handleDayHover(cell.value), onMouseLeave: () => this.handleDayHover(null) }, dayNum));
+        }))))));
+    }
+    renderMonths() {
+        const sel = this.selectedYM;
+        const now = new Date();
+        return (h("div", { class: "co-calendar__panel", part: "grid" }, Array.from({ length: 12 }, (_, i) => {
+            const month = i + 1;
+            const name = new Intl.DateTimeFormat(this.locale, { month: 'short' }).format(new Date(this.viewYear, i, 1));
+            const disabled = this.isMonthDisabled(this.viewYear, month);
+            const isSelected = !!sel && sel.year === this.viewYear && sel.month === month;
+            const isCurrent = now.getFullYear() === this.viewYear && now.getMonth() === i;
+            return (h("button", { type: "button", class: {
+                    'co-calendar__cell': true,
+                    'co-calendar__cell--selected': isSelected,
+                    'co-calendar__cell--today': isCurrent && !isSelected,
+                    'co-calendar__cell--disabled': disabled,
+                }, disabled: disabled, "aria-current": isCurrent ? 'date' : undefined, onClick: () => this.selectMonth(month) }, name));
+        })));
+    }
+    renderYears() {
+        const sel = this.selectedYM;
+        const nowYear = new Date().getFullYear();
+        const start = this.decadeStart - 1;
+        return (h("div", { class: "co-calendar__panel", part: "grid" }, Array.from({ length: 12 }, (_, i) => {
+            const year = start + i;
+            const disabled = this.isYearDisabled(year);
+            const isSelected = !!sel && sel.year === year;
+            const isCurrent = nowYear === year;
+            return (h("button", { type: "button", class: {
+                    'co-calendar__cell': true,
+                    'co-calendar__cell--muted': year < this.decadeStart || year > this.decadeStart + 9,
+                    'co-calendar__cell--selected': isSelected,
+                    'co-calendar__cell--today': isCurrent && !isSelected,
+                    'co-calendar__cell--disabled': disabled,
+                }, disabled: disabled, "aria-current": isCurrent ? 'date' : undefined, onClick: () => this.selectYear(year) }, year));
+        })));
+    }
+    render() {
+        var _a, _b;
+        const t = getDateStrings(this.locale);
+        return (h("div", { key: '38278f3489400b035c01cfcdb5e5afbcc5000b21', class: "co-calendar", part: "root" }, h("div", { key: '0bcd5c42678b1057fb327853cacad03a8b49cdd1', class: "co-calendar__header", part: "header" }, h("button", { key: '6e7210ea64062171c0f94f463251e6373c01c348', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: '053ff755d082dae52d5cce4b0338f795d56829b7', name: "caret-left", size: 16 })), h("button", { key: '70af310b739b910e850715ac626430c1a30e3479', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: 'b06bc1fb2aa4c8c31e53fa68eebade370d8026f9', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '0eee7bed8085c2d3fd495f8b4152b359c3e246ad', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: 'ffc4ff19f0ba3e69cb6b04a2888bc2a093f090be', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+/** Monday-first (or configurable) start-of-week for a date. */
+function startOfWeek(value, firstDayOfWeek) {
+    const ymd = parseISO(value);
+    if (!ymd)
+        return value;
+    const dow = new Date(ymd.year, ymd.month - 1, ymd.day).getDay();
+    const back = (dow - firstDayOfWeek + 7) % 7;
+    return addDays(value, -back);
+}
+function normalizeStringArray(v) {
+    if (Array.isArray(v))
+        return v;
+    if (typeof v === 'string' && v.trim()) {
+        const t = v.trim();
+        try {
+            const parsed = JSON.parse(t);
+            if (Array.isArray(parsed))
+                return parsed.map(String);
+        }
+        catch (_a) {
+            /* not JSON — fall back to comma-split */
+        }
+        return t.split(',').map((s) => s.trim()).filter(Boolean);
+    }
+    return [];
+}
+function normalizeNumberArray(v) {
+    if (Array.isArray(v))
+        return v;
+    if (typeof v === 'string' && v.trim()) {
+        const t = v.trim();
+        try {
+            const parsed = JSON.parse(t);
+            if (Array.isArray(parsed))
+                return parsed.map(Number).filter((n) => !Number.isNaN(n));
+        }
+        catch (_a) {
+            /* not JSON */
+        }
+        return t.split(',').map((s) => Number(s.trim())).filter((n) => !Number.isNaN(n));
+    }
+    return [];
+}
+CoCalendar.style = coCalendarCss();
+
+const coDateFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-date-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-date-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-date-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-date-field__field-row{display:flex;align-items:stretch}.co-date-field--s .co-date-field__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm)}.co-date-field--sm .co-date-field__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm)}.co-date-field--lg .co-date-field__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg)}.co-date-field--s .co-date-field__input-wrapper,.co-date-field--sm .co-date-field__input-wrapper{min-height:0;padding:0}.co-date-field__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;min-height:40px;box-sizing:border-box;overflow:hidden;flex:1;min-width:0}.co-date-field__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-date-field__input-wrapper{flex:1;display:flex;align-items:center;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0}.co-date-field__native{width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-date-field__native::placeholder{color:var(--co-semantic-text-muted)}.co-date-field__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-date-field__clear--hidden{visibility:hidden;pointer-events:none}.co-date-field__clear:hover{color:var(--co-semantic-text-default)}.co-date-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-date-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-date-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-date-field--focused .co-date-field__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-date-field--disabled .co-date-field__labels .co-date-field__label{color:var(--co-semantic-text-disabled)}.co-date-field--disabled .co-date-field__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-date-field--disabled .co-date-field__native{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-date-field--disabled .co-date-field__native::placeholder{color:var(--co-semantic-text-disabled)}.co-date-field--disabled .co-date-field__icon{color:var(--co-semantic-text-disabled)}.co-date-field--invalid .co-date-field__field{border-color:var(--co-semantic-status-error)}.co-date-field--invalid.co-date-field--focused .co-date-field__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-date-field__helper--error .co-date-field__helper-icon,.co-date-field__helper--error .co-date-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-date-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-date-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-date-field__label{white-space:normal}:host([layout='horizontal']) .co-date-field>:not(.co-date-field__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}`;
+
+const CoDateField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coInput = createEvent(this, "coInput", 7);
+        this.coChange = createEvent(this, "coChange", 7);
+        this.coInvalid = createEvent(this, "coInvalid", 7);
+        this.coClear = createEvent(this, "coClear", 7);
+        this.coFocus = createEvent(this, "coFocus", 7);
+        this.coBlur = createEvent(this, "coBlur", 7);
+        /** Committed value, "YYYY-MM-DD" or null. */
+        this.value = null;
+        /** Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+        this.size = 'md';
+        /** BCP-47 locale. */
+        this.locale = 'es-CO';
+        /** Display pattern (tokens yyyy/yy/MMMM/MMM/MM/M/dd/d). */
+        this.displayFormat = 'd MMM yyyy';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.clearable = true;
+        /** External invalid flag (e.g. from a form controller). OR'd with internal parse failure. */
+        this.invalid = false;
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Raw text in the box (display-formatted on commit). */
+        this.draft = '';
+        /** Internal parse-failure flag. */
+        this.internalInvalid = false;
+        this.hasFocus = false;
+        this.handleInput = (e) => {
+            this.draft = e.target.value;
+            this.internalInvalid = false;
+            this.coInput.emit(this.draft);
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.coFocus.emit();
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.commit();
+            this.coBlur.emit();
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter') {
+                const ok = this.commit();
+                if (!ok) {
+                    // Don't let an unparsed/invalid date submit the enclosing form.
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            }
+        };
+        this.handleClear = () => {
+            var _a;
+            this.draft = '';
+            this.internalInvalid = false;
+            if (this.value !== null) {
+                this.value = null;
+                this.coChange.emit(null);
+            }
+            this.coClear.emit();
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    componentWillLoad() {
+        this.draft = formatDisplay(this.value, this.displayFormat, this.locale);
+    }
+    onValueChange() {
+        // Only reformat from the controlled value while NOT focused, so we never
+        // clobber what the user is actively typing.
+        if (this.hasFocus)
+            return;
+        this.draft = formatDisplay(this.value, this.displayFormat, this.locale);
+        this.internalInvalid = false;
+    }
+    /** Focus the text input (used by co-date-picker to return focus on close). */
+    async focusInput() {
+        var _a;
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    get order() {
+        const f = this.displayFormat.toLowerCase();
+        if (f.startsWith('y'))
+            return 'ymd';
+        if (f.startsWith('m'))
+            return 'mdy';
+        return 'dmy';
+    }
+    get isInvalid() {
+        return this.invalid || this.internalInvalid;
+    }
+    get hasValue() {
+        return this.draft.trim() !== '';
+    }
+    /**
+     * Parse the draft and commit. Returns true when the field is in a valid,
+     * committed state (including empty → null), false when invalid.
+     */
+    commit() {
+        const result = parseFlexible(this.draft, { order: this.order, locale: this.locale });
+        if (result.status === 'empty') {
+            this.internalInvalid = false;
+            if (this.value !== null) {
+                this.value = null;
+                this.coChange.emit(null);
+            }
+            return true;
+        }
+        if (result.status === 'invalid' || result.value === null) {
+            this.internalInvalid = true;
+            this.coInvalid.emit({ raw: this.draft });
+            return false;
+        }
+        // Valid syntax — also enforce range / disabled rules.
+        const ymd = result.value;
+        const blocked = isDisabled(ymd, {
+            min: this.min,
+            max: this.max,
+            disabledDates: toStringArray(this.disabledDates),
+            disabledDaysOfWeek: toNumberArray(this.disabledDaysOfWeek),
+        });
+        if (blocked) {
+            this.internalInvalid = true;
+            this.coInvalid.emit({ raw: this.draft });
+            return false;
+        }
+        this.internalInvalid = false;
+        this.draft = formatDisplay(ymd, this.displayFormat, this.locale);
+        if (this.value !== ymd) {
+            this.value = ymd;
+            this.coChange.emit(ymd);
+        }
+        return true;
+    }
+    render() {
+        var _a, _b;
+        const t = getDateStrings(this.locale);
+        const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
+        // `||` (not `??`): consumers/forms commonly pass an empty string, which
+        // should still fall back to the localized default placeholder.
+        const placeholder = this.placeholder || t.setDate;
+        const helper = this.isInvalid ? this.errorMessage : this.helperText;
+        return (h("div", { key: 'bd42272c21a560d339158f2b82edd0cb61623e31', class: {
+                'co-date-field': true,
+                'co-date-field--disabled': this.disabled,
+                'co-date-field--focused': this.hasFocus,
+                'co-date-field--filled': this.hasValue,
+                'co-date-field--invalid': this.isInvalid,
+                [`co-date-field--${this.size}`]: true,
+            }, part: "wrapper" }, this.label && (h("div", { key: '210bac89442729649bf59f14eeecb4d3a1d53855', class: "co-date-field__labels" }, h("label", { key: '79a151b05d97b47cec8461c3bd32d0838d9e2d66', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: '75a513ad61d0801863d2c01a1f5a2da2023e78d1', required: this.required })))), h("div", { key: 'ebe1983e55ef1a33f17faa95609ee076f957fcdb', class: "co-date-field__field-row" }, h("div", { key: 'b420fa05fbe6a9ea89f02284c52a0e3686cdbaaa', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '19f698a0798c1a32497a1d427ecbf8462027d400', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '4aafe0476089a55f1defb4384101442bbc48fdf0', class: "co-date-field__input-wrapper" }, h("input", { key: '7170645098dfa8f08b7fad8f65d590cb22c098da', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: '53bd2c0e74a031f5d351617fb7f12d7ed21e8269', class: {
+                'co-date-field__clear': true,
+                'co-date-field__clear--hidden': !showClear,
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, h("co-icon", { key: '28dc6e38810c755d34fcbab2252f011999f0b4d3', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '58146749042da81c9a2e0f71edd082fbf478297f', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: 'b1d13979e2b54558950e15bc88f690888ca9345c', class: {
+                'co-date-field__helper': true,
+                'co-date-field__helper--error': this.isInvalid,
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'd4a8a63210d503600f5c268e4e8b920c81aca8d1', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '6fc66017a9f1bedcb0e0e554643d504683860fbe', class: "co-date-field__helper-text" }, helper)))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+function toStringArray(v) {
+    if (Array.isArray(v))
+        return v;
+    if (typeof v === 'string' && v.trim()) {
+        try {
+            const p = JSON.parse(v);
+            if (Array.isArray(p))
+                return p.map(String);
+        }
+        catch (_a) {
+            /* not JSON */
+        }
+        return v.split(',').map((s) => s.trim()).filter(Boolean);
+    }
+    return [];
+}
+function toNumberArray(v) {
+    if (Array.isArray(v))
+        return v;
+    if (typeof v === 'string' && v.trim()) {
+        try {
+            const p = JSON.parse(v);
+            if (Array.isArray(p))
+                return p.map(Number).filter((n) => !Number.isNaN(n));
+        }
+        catch (_a) {
+            /* not JSON */
+        }
+        return v.split(',').map((s) => Number(s.trim())).filter((n) => !Number.isNaN(n));
+    }
+    return [];
+}
+CoDateField.style = coDateFieldCss();
+
+const coDrawerCss = () => `:host{display:contents}.co-drawer{position:fixed;background:var(--co-semantic-surface-page);display:flex;flex-direction:column;font-family:var(--co-font-family-primary);transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;will-change:transform;z-index:1}.co-drawer--right{top:0;right:0;margin:6px;height:100vh;height:-webkit-fill-available;border-radius:24px;transform:translateX(calc(100% + 12px));box-shadow:0 4px 24px rgba(0, 0, 0, 0.12)}.co-drawer--right.co-drawer--open{transform:translateX(0)}.co-drawer--left{top:0;left:0;margin:6px;height:100vh;height:-webkit-fill-available;border-radius:24px;transform:translateX(calc(-100% - 12px));box-shadow:0 4px 24px rgba(0, 0, 0, 0.12)}.co-drawer--left.co-drawer--open{transform:translateX(0)}.co-drawer--bottom{bottom:0;left:0;right:0;margin:6px;width:auto;transform:translateY(calc(100% + 12px));box-shadow:0 -4px 24px rgba(0, 0, 0, 0.12);border-radius:24px}.co-drawer--bottom.co-drawer--open{transform:translateY(0)}.co-drawer--right.co-drawer--sm,.co-drawer--left.co-drawer--sm{width:400px;max-width:100vw}.co-drawer--right.co-drawer--md,.co-drawer--left.co-drawer--md{width:520px;max-width:100vw}.co-drawer--right.co-drawer--lg,.co-drawer--left.co-drawer--lg{width:720px;max-width:100vw}.co-drawer--right.co-drawer--xl,.co-drawer--left.co-drawer--xl{width:960px;max-width:100vw}.co-drawer--right.co-drawer--full,.co-drawer--left.co-drawer--full{width:100vw}.co-drawer--bottom.co-drawer--sm{height:40vh}.co-drawer--bottom.co-drawer--md{height:60vh}.co-drawer--bottom.co-drawer--lg{height:80vh}.co-drawer--bottom.co-drawer--xl{height:95vh}.co-drawer--bottom.co-drawer--full{height:100vh}.co-drawer__header{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl);border-bottom:1px solid var(--co-semantic-border-default);flex-shrink:0}.co-drawer__header-content{flex:1;min-width:0}.co-drawer__heading-row{display:flex;align-items:center;gap:var(--co-spacing-sm, 8px)}.co-drawer__icon{flex-shrink:0;color:var(--co-semantic-text-secondary)}.co-drawer__heading{margin:0;font-size:var(--co-font-size-18);font-weight:600;color:var(--co-semantic-text-default);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-drawer__description{margin:var(--co-spacing-xs) 0 0;font-size:var(--co-font-size-13);font-weight:400;color:var(--co-semantic-text-muted);line-height:1.4}.co-drawer__close{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-sm);transition:background 0.1s ease;flex-shrink:0}.co-drawer__close:hover{background:var(--co-semantic-surface-hover)}.co-drawer__close:focus-visible{outline:2px solid var(--co-color-primary-azul);outline-offset:2px}.co-drawer__tabs{flex-shrink:0;border-bottom:1px solid var(--co-semantic-border-default)}.co-drawer__tabs:empty{display:none}.co-drawer__body{flex:1;overflow-y:auto;padding:var(--co-spacing-xl);position:relative}.co-drawer__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl);border-top:1px solid var(--co-semantic-border-default);flex-shrink:0}.co-drawer__footer:empty{display:none}@media (max-width: 600px){.co-drawer--right,.co-drawer--left{width:100vw !important}}`;
+
+const CoDrawer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coClose = createEvent(this, "coClose", 7);
+        this.coOpen = createEvent(this, "coOpen", 7);
+        this.coAfterOpen = createEvent(this, "coAfterOpen", 7);
+        this.coAfterClose = createEvent(this, "coAfterClose", 7);
+        /** Whether the drawer is visible */
+        this.open = false;
+        /** Side from which the drawer slides in */
+        this.position = 'right';
+        /** Predefined sizes — sm 400 / md 520 / lg 720 / xl 960 / full 100% */
+        this.size = 'md';
+        /** Drawer title (used when `header` slot is empty) */
+        this.heading = '';
+        /** Optional description shown below the heading */
+        this.description = '';
+        /** Optional Phosphor icon name shown before the heading */
+        this.icon = '';
+        /** Show close (X) button in header */
+        this.closable = true;
+        /** Close when clicking the backdrop */
+        this.closeOnOverlay = true;
+        /** Close when pressing Escape */
+        this.closeOnEscape = true;
+        /** Show a loading overlay over the body */
+        this.loading = false;
+        this.handleOverlayClose = () => {
+            if (this.closeOnOverlay)
+                this.coClose.emit();
+        };
+        this.handleCloseClick = () => {
+            this.coClose.emit();
+        };
+        this.stopPropagation = (e) => {
+            e.stopPropagation();
+        };
+        this.handleTransitionEnd = (e) => {
+            if (e.propertyName !== 'transform')
+                return;
+            if (this.open)
+                this.coAfterOpen.emit();
+            else
+                this.coAfterClose.emit();
+        };
+    }
+    onOpenChange(next, prev) {
+        if (next && !prev)
+            this.coOpen.emit();
+    }
+    handleKey(e) {
+        if (this.open && this.closeOnEscape && e.key === 'Escape') {
+            this.coClose.emit();
+        }
+    }
+    render() {
+        return (h("co-overlay", { key: '5382858988db48dfb4e0cb8eef90b04177acdfe2', open: this.open, onCoClose: this.handleOverlayClose }, h("aside", { key: 'ec2258a955669f165587af08c8bf60bcf6a19c8a', class: {
+                'co-drawer': true,
+                'co-drawer--open': this.open,
+                [`co-drawer--${this.position}`]: true,
+                [`co-drawer--${this.size}`]: true,
+            }, part: "drawer", role: "dialog", "aria-modal": "true", "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("header", { key: '3569d4b2a581eedc42637a769ab0d1e46f818c66', class: "co-drawer__header", part: "header" }, h("div", { key: '0e811a18325188b4e3ef4105370a88126ad1d98b', class: "co-drawer__header-content" }, h("slot", { key: '00f0249a2683fefc712de952055a229abdff2247', name: "header" }, h("div", { key: '8e817ae4ef809410799c66892a22f99f5f2bb053', class: "co-drawer__heading-row" }, this.icon && h("co-icon", { key: '4a1b54a9686c173c28e039cb54ba5d40a9327754', name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { key: 'a09b2e8ffc080f8d73d8b480c32911bc1a36451f', class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { key: 'bf2c3b8fca185608120387bbccb007317b34d09a', class: "co-drawer__description" }, this.description))), this.closable && (h("button", { key: 'b1bb85ea967aac2c14e5d86324c222ce44d168ef', class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'dd95e54ae9b3152d001b864cceba60cd65561580', name: "x", size: 20 })))), h("div", { key: '5049854b50e2e1f42faca4fc8c2fca705e4731a5', class: "co-drawer__tabs", part: "tabs" }, h("slot", { key: '13f4acf903542f287d7f8047280dfe4c211de1d3', name: "tabs" })), h("div", { key: '208ff3f785ae347a385518ac217eb05927366836', class: "co-drawer__body", part: "body" }, h("slot", { key: '938e78913ef13925b67512512a35a79f3f1a87c4' }), h("co-loader", { key: '624228401019ad3b8d3b14907268702c46c996e8', overlay: true, visible: this.loading, part: "loader" })), h("footer", { key: '283d37c8784f59e77fc7009d98cf5dd83e71ed81', class: "co-drawer__footer", part: "footer" }, h("slot", { key: '85dfa2065ddca4b2ac6079aa50f85b0f61fdc8d0', name: "footer" })))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
+};
+CoDrawer.style = coDrawerCss();
+
+export { CoCalendar as co_calendar, CoDateField as co_date_field, CoDrawer as co_drawer };