@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-datepicker/sui-datepicker.js

@@ -0,0 +1,888 @@
+import { Host, h, } from "@stencil/core";
+import { DAY_LABELS_ES, DEFAULT_PRESETS, addMonths, buildCalendarGrid, formatDateInput, formatDateLong, formatDateShort, formatMonthYear, startOfMonth, subMonths, toCalendarRows, } from "./sui-datepicker.data";
+/**
+ * `<sui-datepicker>` — SUI Design System (SUI Design System 2.0). COMPUESTO + COMPLEJO.
+ *
+ * Portado 1:1 desde el SUI Angular
+ * (projects/sui-design-system/src/lib/sui-datepicker). Misma API
+ * pública (mode/calendars/inline/placeholder/showFooter/disabled/min/max/
+ * presets/markedDates/value), TODAS las variantes/states/comportamiento
+ * (overlay popover + outside-click + Escape, navegación de meses, range con
+ * banda continua, presets clampeados a min/max, lazy mount del panel, mobile
+ * 1-calendar + presets en fila scrollable) y mismos VALORES exactos (tokens del
+ * DS, no hex). El accent del DS es NARANJA brand (#fa7319), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set 446:7414 (Date & Range
+ * Picker [1.1]). Sub-piezas: Day Cell (437:175), Date Selector (442:192),
+ * Period Range chip (443:336), Day Labels (3118:24556).
+ *
+ * Composición (como el Angular): `<sui-date-selector>` (mes + flechas),
+ * `<sui-day-label>`, `<sui-day-cell>`, `<sui-period-range>` (rangos predefinidos)
+ * y `<sui-button>` (Cancelar / Aplicar). La banda de rango vive en la fila.
+ *
+ * a11y (04/09-10-2026): el panel es dialog modal con nombre («Elegir fecha» /
+ * «Elegir período»; inline = group), la fila de días de la semana va DENTRO del
+ * role=grid, cada día se anuncia con la fecha completa («martes 7 de octubre de
+ * 2026») y las flechas mueven el foco (← → un día, ↑ ↓ una semana, Inicio/Fin).
+ *
+ * Form integration: como custom element no implementa ControlValueAccessor (eso
+ * es Angular-only); el contrato equivalente es el prop `value` (Date | SuiDateRange
+ * | null) + el evento `valueChange`. El consumer hace el two-way binding.
+ *
+ * EXACT specs (Figma — VERIFIED via MCP, espejo del Angular):
+ *   Date Picker container (446:7413): 368×432, radius-20, border soft-200,
+ *     shadow-medium. Items wrapper: p-20, gap-8, border-b.
+ *   Range Picker container (446:7412): 936×432, radius-20. Sidebar Time Filter:
+ *     w-200, pt-20 px-16 pb-2, gap-8, border-r.
+ *   Day Cell: 40×40, py-10, radius-8. Default bg white-0 / Active primary-base.
+ *   Day Cell in-range: row con bg primary-alpha-10 (banda), cells text primary-base.
+ *   Day labels: 40×40, py-10, radius-10, text soft-400.
+ *   Footer single: gap-16 p-16, botones 50/50. Footer range: gap-16 pl-24 pr-16,
+ *     hint + Cancel/Apply w-108.
+ *
+ * `scoped: true` (light DOM, NO shadow): así `:host([data-sui-*])` reflejan el
+ * estado del host, el outside-click `@Listen('document:pointerdown')` puede
+ * comparar `contains(target)` contra el host real, y los `<sui-*>` internos
+ * heredan tokens del global sin pelear con shadow DOM.
+ *
+ * iOS WKWebView :active fix: el host escucha touchstart/touchend pasivos y suelta
+ * el foco del botón tocado (SuiToque del Angular).
+ */
+export class SuiDatepicker {
+    constructor() {
+        /** `date` (single) o `range` (start..end con presets). Default `date`. */
+        this.mode = 'date';
+        /**
+         * Cantidad de calendarios visibles en mode='range'.
+         *  - `2` (default): dos meses lado a lado — Figma 936×432
+         *  - `1`: un solo calendario; user navega prev/next
+         * En mobile (≤767px) se fuerza `1`. Para mode='date' siempre es 1.
+         */
+        this.calendars = 2;
+        /** Renderiza el calendar inline (sin trigger ni popover). Default `false`. */
+        this.inline = false;
+        /** Alto del campo: small 36 · medium 40 (default) · large 48 · xlarge 52 (días de 44). */
+        this.size = 'medium';
+        /** Placeholder del campo sin valor. Sin pasarlo: «Elige una fecha» (`date`) o
+         *  «Elige el período» (`range`), en imperativo con tuteo. */
+        this.placeholder = null;
+        /** Si true, muestra Cancel/Apply en el footer. Range siempre lo muestra. Default `true`. */
+        this.showFooter = true;
+        /** Deshabilitado: bloquea el trigger. Default `false`. */
+        this.disabled = false;
+        /** Mínima fecha permitida (property binding — Date). Default `null`. */
+        this.min = null;
+        /** Máxima fecha permitida (property binding — Date). Default `null`. */
+        this.max = null;
+        /**
+         * Lista de presets para mode=range (property binding). Default = los 8 estándar
+         * (Hoy / Últimos 7 días / … / Todo el tiempo).
+         */
+        this.presets = DEFAULT_PRESETS;
+        /**
+         * Fechas a marcar con un dot indicador (Figma 442:1473). Útil para fechas con
+         * eventos/pedidos/disponibilidad. Matching por mismo día (ignora time-of-day).
+         * Property binding — array de Date. Default `[]`.
+         */
+        this.markedDates = [];
+        /**
+         * Valor actual (property binding). Date para mode=date, SuiDateRange ({start,
+         * end}) para mode=range, o null. Default `null`. El consumer hace el two-way
+         * binding escuchando `valueChange`.
+         */
+        this.value = null;
+        /* ── Internal state ── */
+        /** Popover/sheet abierto. */
+        this.open = false;
+        /** Mes ancla del grid. Mode=range usa este como mes izquierdo (derecho = +1). */
+        this.anchorMonth = startOfMonth(new Date());
+        /** Selected date (mode=date) — staged hasta Apply. */
+        this.stagedDate = null;
+        /** Range staged (mode=range) — start al click 1, end al click 2. */
+        this.stagedRange = { start: null, end: null };
+        /** Preset activo (mode=range) — `null` = custom range. */
+        this.activePreset = null;
+        /** Mobile (≤767px) — fuerza 1 calendario aunque calendars=2. */
+        this.isMobile = false;
+        /** «Todo el tiempo» aplicado: su valor es { start: null, end: null }, igual que
+         *  nada elegido, así que se recuerda aparte para el texto del campo. */
+        this.todoElTiempoAplicado = false;
+        /** Fecha de hoy (capturada al load, para el today-dot). */
+        this.today = new Date();
+        this.mql = null;
+        this.mqlHandler = null;
+        /* ── Actions ── */
+        this.toggle = () => {
+            if (this.isDisabled)
+                return;
+            if (this.open) {
+                this.cancel();
+            }
+            else {
+                this.openPopover();
+            }
+        };
+        this.cancel = () => {
+            this.open = false;
+            this.activePreset = null;
+            this.closed.emit();
+        };
+        this.apply = () => {
+            if (this.mode === 'date') {
+                const d = this.stagedDate;
+                this.value = d;
+                this.valueChange.emit(d);
+            }
+            else {
+                const r = { start: this.stagedRange.start, end: this.stagedRange.end };
+                // Abrir y aplicar sin tocar nada conserva «Todo el tiempo».
+                this.todoElTiempoAplicado =
+                    this.activePreset === 'all-time' || (this.todoElTiempoAplicado && !r.start && !r.end);
+                this.value = r;
+                this.valueChange.emit(r);
+            }
+            this.open = false;
+            this.closed.emit();
+        };
+        this.prevMonth = () => {
+            this.anchorMonth = subMonths(this.anchorMonth, 1);
+        };
+        this.nextMonth = () => {
+            this.anchorMonth = addMonths(this.anchorMonth, 1);
+        };
+        /** a11y: flechas dentro de la grilla mueven el foco entre los días habilitados
+         *  (← → un día, ↑ ↓ una semana), Inicio/Fin a la punta de la semana. No cambia
+         *  de mes: la grilla ya trae los días vecinos que completan las semanas. */
+        this.onGridKeydown = (event) => {
+            const grid = event.currentTarget;
+            if (!grid)
+                return;
+            const celdas = Array.from(grid.querySelectorAll('.sui-day-cell__btn'));
+            const actual = celdas.indexOf(event.target);
+            if (actual < 0)
+                return;
+            const enSemana = actual % 7;
+            let destino;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    destino = actual - 1;
+                    break;
+                case 'ArrowRight':
+                    destino = actual + 1;
+                    break;
+                case 'ArrowUp':
+                    destino = actual - 7;
+                    break;
+                case 'ArrowDown':
+                    destino = actual + 7;
+                    break;
+                case 'Home':
+                    destino = actual - enSemana;
+                    break;
+                case 'End':
+                    destino = actual - enSemana + 6;
+                    break;
+                default: return;
+            }
+            event.preventDefault();
+            const paso = destino < actual ? -1 : 1;
+            // Salta los deshabilitados en la misma dirección (fuera de min/max).
+            while (destino >= 0 && destino < celdas.length && celdas[destino].disabled)
+                destino += paso;
+            if (destino < 0 || destino >= celdas.length)
+                return;
+            celdas[destino].focus();
+        };
+    }
+    /* ── Lifecycle ── */
+    componentWillLoad() {
+        this.today = new Date();
+        this.syncAnchorToValue();
+        if (this.inline)
+            this.stageFromValue(this.value);
+        if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+            this.mql = window.matchMedia('(max-width: 767px)');
+            this.isMobile = this.mql.matches;
+            this.mqlHandler = (ev) => (this.isMobile = ev.matches);
+            this.mql.addEventListener('change', this.mqlHandler);
+        }
+    }
+    disconnectedCallback() {
+        if (this.mql && this.mqlHandler) {
+            this.mql.removeEventListener('change', this.mqlHandler);
+        }
+    }
+    /** Al cambiar value desde afuera, re-ancla el calendar al mes del valor. */
+    onValueChange() {
+        this.syncAnchorToValue();
+        // En inline el calendario nunca se abre: lo que se pinta se copia de `value` acá.
+        if (this.inline)
+            this.stageFromValue(this.value);
+    }
+    /** Copia `value` a lo staged (lo que pinta el calendario). */
+    stageFromValue(v) {
+        if (this.mode === 'date') {
+            this.stagedDate = v instanceof Date ? v : null;
+        }
+        else if (v && !(v instanceof Date)) {
+            this.stagedRange = { start: v.start, end: v.end };
+        }
+        else {
+            this.stagedRange = { start: null, end: null };
+        }
+    }
+    syncAnchorToValue() {
+        const v = this.value;
+        if (!v)
+            return;
+        if (v instanceof Date) {
+            this.anchorMonth = startOfMonth(v);
+        }
+        else if (v.start) {
+            this.anchorMonth = startOfMonth(v.start);
+        }
+    }
+    /* ── Derived ── */
+    get isDisabled() {
+        return this.disabled;
+    }
+    /**
+     * Calendarios EFECTIVOS tras el mobile override.
+     *  - mode='date' → siempre 1
+     *  - mode='range' + mobile → 1
+     *  - mode='range' + desktop → respeta el prop
+     */
+    get effectiveCalendars() {
+        if (this.mode === 'date')
+            return 1;
+        if (this.isMobile)
+            return 1;
+        return this.calendars;
+    }
+    get leftMonthLabel() {
+        return formatMonthYear(this.anchorMonth);
+    }
+    get rightMonthLabel() {
+        return formatMonthYear(addMonths(this.anchorMonth, 1));
+    }
+    get leftCells() {
+        return buildCalendarGrid(this.anchorMonth, {
+            today: this.today,
+            selected: this.mode === 'date' ? this.stagedDate : null,
+            rangeStart: this.mode === 'range' ? this.stagedRange.start : null,
+            rangeEnd: this.mode === 'range' ? this.stagedRange.end : null,
+            min: this.min,
+            max: this.max,
+            marked: this.markedDates,
+        });
+    }
+    get rightCells() {
+        if (this.mode !== 'range')
+            return [];
+        if (this.effectiveCalendars === 1)
+            return [];
+        return buildCalendarGrid(addMonths(this.anchorMonth, 1), {
+            today: this.today,
+            selected: null,
+            rangeStart: this.stagedRange.start,
+            rangeEnd: this.stagedRange.end,
+            min: this.min,
+            max: this.max,
+            marked: this.markedDates,
+        });
+    }
+    get leftRows() {
+        return toCalendarRows(this.leftCells, this.mode === 'range');
+    }
+    get rightRows() {
+        return toCalendarRows(this.rightCells, this.mode === 'range');
+    }
+    /** El placeholder que se ve: el que se pasó o el de fábrica según `mode`. */
+    get resolvedPlaceholder() {
+        var _a;
+        return (_a = this.placeholder) !== null && _a !== void 0 ? _a : (this.mode === 'range' ? 'Elige el período' : 'Elige una fecha');
+    }
+    get triggerText() {
+        var _a, _b;
+        const v = this.value;
+        if (!v)
+            return this.resolvedPlaceholder;
+        if (v instanceof Date)
+            return formatDateInput(v);
+        if (v.start && v.end)
+            return `${formatDateShort(v.start)} – ${formatDateShort(v.end)}`;
+        if (v.start)
+            return formatDateShort(v.start);
+        // Con «Todo el tiempo» el campo dice eso, no el placeholder.
+        if (this.todoElTiempoAplicado) {
+            return (_b = (_a = this.presets.find((p) => p.id === 'all-time')) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : this.resolvedPlaceholder;
+        }
+        return this.resolvedPlaceholder;
+    }
+    /** Nombre del panel para el lector de pantalla (dialog / group). */
+    get panelAriaLabel() {
+        return this.mode === 'range' ? 'Elegir período' : 'Elegir fecha';
+    }
+    /** Cancelar / Aplicar: large (48) con el campo large/xlarge y siempre en mobile;
+     *  small (36, Figma) si no. */
+    get footerButtonSize() {
+        return this.size === 'large' || this.size === 'xlarge' || this.isMobile ? 'large' : 'small';
+    }
+    /** Piezas del panel (días, flechas, rangos): large (44) solo con el campo xlarge. */
+    get partSize() {
+        return this.size === 'xlarge' ? 'large' : 'medium';
+    }
+    get rangeHint() {
+        const r = this.stagedRange;
+        if (!r.start)
+            return null;
+        if (!r.end)
+            return `Rango: ${formatDateShort(r.start)} – …`;
+        return `Rango: ${formatDateShort(r.start)} – ${formatDateShort(r.end)}`;
+    }
+    get hasFooter() {
+        return this.showFooter || this.mode === 'range';
+    }
+    /**
+     * rangePosition de un cell para el styling de la day-cell.
+     *  - 'start' → extremo izquierdo · 'end' → extremo derecho
+     *  - 'in'    → entre extremos (no inclusive) · null → fuera de range o mode=date
+     */
+    cellRangePosition(cell) {
+        if (this.mode !== 'range')
+            return null;
+        if (cell.isRangeStart)
+            return 'start';
+        if (cell.isRangeEnd)
+            return 'end';
+        if (cell.inRange && !cell.selected)
+            return 'in';
+        return null;
+    }
+    isPresetActive(id) {
+        return this.activePreset === id;
+    }
+    openPopover() {
+        if (this.isDisabled)
+            return;
+        this.stageFromValue(this.value);
+        this.activePreset = null;
+        this.open = true;
+        this.opened.emit();
+    }
+    selectCell(cell) {
+        if (cell.disabled)
+            return;
+        if (this.mode === 'date') {
+            this.stagedDate = cell.date;
+            // Si !showFooter, apply inmediato (UX más rápido para single date).
+            if (!this.showFooter) {
+                this.value = cell.date;
+                this.valueChange.emit(cell.date);
+                this.open = false;
+                this.closed.emit();
+            }
+            return;
+        }
+        // Range mode.
+        const r = this.stagedRange;
+        if (!r.start || (r.start && r.end)) {
+            // Iniciar nuevo range.
+            this.stagedRange = { start: cell.date, end: null };
+            this.activePreset = null;
+        }
+        else {
+            // Cerrar range — ordenar si end < start.
+            const start = r.start;
+            const end = cell.date;
+            this.stagedRange = end < start ? { start: end, end: start } : { start, end };
+            this.activePreset = null;
+        }
+    }
+    selectPreset(p) {
+        const [start, end] = p.resolve(new Date());
+        // Clamp contra min/max — los presets deben respetar el rango permitido.
+        const min = this.min;
+        const max = this.max;
+        const clampedStart = start && min && start < min ? min : start;
+        const clampedEnd = end && max && end > max ? max : end;
+        this.stagedRange = { start: clampedStart, end: clampedEnd };
+        this.activePreset = p.id;
+        if (clampedStart)
+            this.anchorMonth = startOfMonth(clampedStart);
+    }
+    /* ── Outside click / Escape (cierran el popover) ── */
+    onDocPointerDown(ev) {
+        if (!this.open)
+            return;
+        const target = ev.target;
+        if (target && this.el.contains(target))
+            return;
+        this.cancel();
+    }
+    onDocKeydown(ev) {
+        if (this.open && ev.key === 'Escape')
+            this.cancel();
+    }
+    /* ── iOS :active fix (host) ── */
+    onTouchStart() {
+        /* presencia del binding = engage del touch pipeline iOS. no-op a propósito. */
+    }
+    onTouchEnd(event) {
+        const t = event.target;
+        const btn = t === null || t === void 0 ? void 0 : t.closest('button');
+        if (btn)
+            btn.blur();
+    }
+    /* ── Render helpers ── */
+    renderRangeBand(row) {
+        if (!row.hasBand)
+            return null;
+        const style = {
+            '--sui-band-start': String(row.bandStart),
+            '--sui-band-end': String(row.bandEnd),
+        };
+        return (h("span", { class: {
+                'sui-datepicker__range-band': true,
+                'sui-datepicker__range-band--round-left': row.bandRoundLeft,
+                'sui-datepicker__range-band--round-right': row.bandRoundRight,
+            }, style: style, "aria-hidden": "true" }));
+    }
+    renderDayCell(cell, allowSelected) {
+        return (h("sui-day-cell", { day: cell.day, size: this.partSize, type: this.mode === 'range' ? 'range' : 'basic', selected: allowSelected && this.mode === 'date' && cell.selected, rangePosition: this.cellRangePosition(cell), marked: cell.marked, today: cell.isToday, disabled: cell.disabled, outOfMonth: !cell.inCurrentMonth, ariaLabel: formatDateLong(cell.date), onClicked: () => this.selectCell(cell) }));
+    }
+    renderCalendar(rows, label, opts) {
+        return (h("div", { class: {
+                'sui-datepicker__calendar': true,
+                'sui-datepicker__calendar--right': !!opts.right,
+            } }, h("sui-date-selector", { size: this.partSize, label: label, leftIcon: opts.leftIcon, rightIcon: opts.rightIcon, onPrev: this.prevMonth, onNext: this.nextMonth }), h("div", { class: "sui-datepicker__grid", role: "grid", "aria-label": label, onKeyDown: this.onGridKeydown }, h("div", { class: "sui-datepicker__day-labels", role: "row" }, DAY_LABELS_ES.map((d) => (h("sui-day-label", { label: d })))), h("div", { class: "sui-datepicker__day-grid", role: "rowgroup" }, rows.map((row) => (h("div", { class: "sui-datepicker__day-row", role: "row" }, this.renderRangeBand(row), row.cells.map((cell) => this.renderDayCell(cell, opts.allowSelected)))))))));
+    }
+    render() {
+        const showPanel = this.inline || this.open;
+        // shortcut: sui-button gana `large` en homolog/H1; acá su tipo aún no lo trae.
+        const btnSize = this.footerButtonSize;
+        const hasDisplayValue = this.triggerText !== this.resolvedPlaceholder;
+        return (h(Host, { key: 'a261cef53152fe590b0664f13fe086a208dd7e3e', "data-sui-mode": this.mode, "data-sui-open": this.open ? '' : undefined, "data-sui-calendars": this.effectiveCalendars, "data-sui-size": this.size }, !this.inline && (h("button", { key: 'a4daf213bc9e2b3dc031f9dd03d50c07dea3d58c', type: "button", class: "sui-datepicker__trigger", disabled: this.isDisabled || undefined, "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "true", onClick: this.toggle }, h("sui-icon", { key: 'b529aec0c61d079555426eeeefbb372d1312ccca', class: "sui-datepicker__trigger-icon", name: "calendar-line", size: 20 }), h("span", { key: '0a83f0804566006eb08ee2283b875950bc7bd06c', class: {
+                'sui-datepicker__trigger-text': true,
+                'sui-datepicker__trigger-text--placeholder': !hasDisplayValue,
+            } }, this.triggerText), h("sui-icon", { key: '337b9ae4af19ad43039a440a991287b935c2468b', class: "sui-datepicker__trigger-chevron", name: "arrow-down-s-line", size: 20 }))), showPanel && (h("div", { key: '46ed2ccc35474ff4dade212d1fc47bdb06377495', class: {
+                'sui-datepicker__panel': true,
+                'sui-datepicker__panel--inline': this.inline,
+                'sui-datepicker__panel--range': this.mode === 'range',
+            }, role: this.inline ? 'group' : 'dialog', "aria-modal": this.inline ? undefined : 'true', "aria-label": this.panelAriaLabel }, this.mode === 'range' && (h("div", { key: '0ffd4488c72bd42b03d52f78135dbedf168a4e68', class: "sui-datepicker__presets", role: "group", "aria-label": "Rangos predefinidos" }, this.presets.map((p) => (h("sui-period-range", { label: p.label, active: this.isPresetActive(p.id), onClicked: () => this.selectPreset(p) }))))), h("div", { key: '2dd569279fa5fe472ef1ccb341df8cd5292e9137', class: "sui-datepicker__content" }, h("div", { key: '174b1f97bd6a6ae42cb97b59f838c521982481f5', class: "sui-datepicker__calendars" }, this.renderCalendar(this.leftRows, this.leftMonthLabel, {
+            leftIcon: true,
+            rightIcon: this.effectiveCalendars === 1,
+            allowSelected: true,
+        }), this.mode === 'range' &&
+            this.effectiveCalendars === 2 &&
+            this.renderCalendar(this.rightRows, this.rightMonthLabel, {
+                leftIcon: false,
+                rightIcon: true,
+                right: true,
+                allowSelected: false,
+            })), this.hasFooter && (h("div", { key: 'f3f80d4531a0423fdf4a5da70b11fd7110d776dd', class: "sui-datepicker__footer" }, this.mode === 'range' && this.rangeHint && (h("span", { key: 'd9c4ad2983b28d4882147f95661111f1932214a3', class: "sui-datepicker__range-hint" }, this.rangeHint)), h("div", { key: '62200e05b0c84d1d6691f4d127283bc758c89629', class: "sui-datepicker__footer-actions" }, h("sui-button", { key: 'eee0dcc49b5ca9e5df9990cbf2b4109c02e505d3', variant: "stroke", color: "neutral", size: btnSize, type: "button", onClick: this.cancel }, "Cancelar"), h("sui-button", { key: 'dce0ddb43ee262fcaec0415a79301eacfcc1730e', variant: "filled", color: "primary", size: btnSize, type: "button", onClick: this.apply }, "Aplicar")))))))));
+    }
+    static get is() { return "sui-datepicker"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-datepicker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-datepicker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiDatepickerMode",
+                    "resolved": "\"date\" | \"range\"",
+                    "references": {
+                        "SuiDatepickerMode": {
+                            "location": "import",
+                            "path": "./sui-datepicker.data",
+                            "id": "src/components/sui-datepicker/sui-datepicker.data.ts::SuiDatepickerMode",
+                            "referenceLocation": "SuiDatepickerMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`date` (single) o `range` (start..end con presets). Default `date`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mode",
+                "defaultValue": "'date'"
+            },
+            "calendars": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiDatepickerCalendars",
+                    "resolved": "1 | 2",
+                    "references": {
+                        "SuiDatepickerCalendars": {
+                            "location": "import",
+                            "path": "./sui-datepicker.data",
+                            "id": "src/components/sui-datepicker/sui-datepicker.data.ts::SuiDatepickerCalendars",
+                            "referenceLocation": "SuiDatepickerCalendars"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cantidad de calendarios visibles en mode='range'.\n - `2` (default): dos meses lado a lado \u2014 Figma 936\u00D7432\n - `1`: un solo calendario; user navega prev/next\nEn mobile (\u2264767px) se fuerza `1`. Para mode='date' siempre es 1."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "calendars",
+                "defaultValue": "2"
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renderiza el calendar inline (sin trigger ni popover). Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "inline",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiDatepickerSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\"",
+                    "references": {
+                        "SuiDatepickerSize": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-datepicker/sui-datepicker.tsx",
+                            "id": "src/components/sui-datepicker/sui-datepicker.tsx::SuiDatepickerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alto del campo: small 36 \u00B7 medium 40 (default) \u00B7 large 48 \u00B7 xlarge 52 (d\u00EDas de 44)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder del campo sin valor. Sin pasarlo: \u00ABElige una fecha\u00BB (`date`) o\n\u00ABElige el per\u00EDodo\u00BB (`range`), en imperativo con tuteo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "null"
+            },
+            "showFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Si true, muestra Cancel/Apply en el footer. Range siempre lo muestra. Default `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-footer",
+                "defaultValue": "true"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilitado: bloquea el trigger. Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "min": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | null",
+                    "resolved": "Date | null",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "M\u00EDnima fecha permitida (property binding \u2014 Date). Default `null`."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "max": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | null",
+                    "resolved": "Date | null",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "M\u00E1xima fecha permitida (property binding \u2014 Date). Default `null`."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "presets": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiDatepickerPreset[]",
+                    "resolved": "SuiDatepickerPreset[]",
+                    "references": {
+                        "SuiDatepickerPreset": {
+                            "location": "import",
+                            "path": "./sui-datepicker.data",
+                            "id": "src/components/sui-datepicker/sui-datepicker.data.ts::SuiDatepickerPreset",
+                            "referenceLocation": "SuiDatepickerPreset"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lista de presets para mode=range (property binding). Default = los 8 est\u00E1ndar\n(Hoy / \u00DAltimos 7 d\u00EDas / \u2026 / Todo el tiempo)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\n  { id: 'today',          label: 'Hoy',              resolve: (t) => [startOfDay(t), startOfDay(t)] },\n  { id: 'last-7',         label: '\u00DAltimos 7 d\u00EDas',   resolve: (t) => [startOfDay(subDays(t, 6)), startOfDay(t)] },\n  { id: 'last-30',        label: '\u00DAltimos 30 d\u00EDas',  resolve: (t) => [startOfDay(subDays(t, 29)), startOfDay(t)] },\n  { id: 'last-3-months',  label: '\u00DAltimos 3 meses',  resolve: (t) => [startOfDay(subMonths(t, 3)), startOfDay(t)] },\n  { id: 'last-12-months', label: '\u00DAltimos 12 meses', resolve: (t) => [startOfDay(subYears(t, 1)), startOfDay(t)] },\n  { id: 'month-to-date',  label: 'Mes en curso',     resolve: (t) => [startOfMonth(t), startOfDay(t)] },\n  { id: 'year-to-date',   label: 'A\u00F1o en curso',     resolve: (t) => [startOfYear(t), startOfDay(t)] },\n  { id: 'all-time',       label: 'Todo el tiempo',   resolve: () => [null, null] },\n]"
+            },
+            "markedDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "readonly Date[]",
+                    "resolved": "readonly Date[]",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fechas a marcar con un dot indicador (Figma 442:1473). \u00DAtil para fechas con\neventos/pedidos/disponibilidad. Matching por mismo d\u00EDa (ignora time-of-day).\nProperty binding \u2014 array de Date. Default `[]`."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date | SuiDateRange | null",
+                    "resolved": "Date | SuiDateRange | null",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        },
+                        "SuiDateRange": {
+                            "location": "import",
+                            "path": "./sui-datepicker.data",
+                            "id": "src/components/sui-datepicker/sui-datepicker.data.ts::SuiDateRange",
+                            "referenceLocation": "SuiDateRange"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor actual (property binding). Date para mode=date, SuiDateRange ({start,\nend}) para mode=range, o null. Default `null`. El consumer hace el two-way\nbinding escuchando `valueChange`."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "anchorMonth": {},
+            "stagedDate": {},
+            "stagedRange": {},
+            "activePreset": {},
+            "isMobile": {},
+            "todoElTiempoAplicado": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite el valor confirmado (al Apply, o al click en mode=date sin footer)."
+                },
+                "complexType": {
+                    "original": "SuiDateRange | Date | null",
+                    "resolved": "Date | SuiDateRange | null",
+                    "references": {
+                        "SuiDateRange": {
+                            "location": "import",
+                            "path": "./sui-datepicker.data",
+                            "id": "src/components/sui-datepicker/sui-datepicker.data.ts::SuiDateRange",
+                            "referenceLocation": "SuiDateRange"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }, {
+                "method": "opened",
+                "name": "opened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite cuando el popover se abre."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "closed",
+                "name": "closed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite cuando el popover se cierra (Cancel, outside-click, Escape, Apply)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "pointerdown",
+                "method": "onDocPointerDown",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "onDocKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "touchstart",
+                "method": "onTouchStart",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "onTouchEnd",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}