@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/esm/sui-datepicker.entry.js

@@ -0,0 +1,676 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+/* ═══ SUI Datepicker — data, types & date utilities ════════════════════════
+ * Hermano del .tsx (los catálogos / helpers NO pueden vivir en el .tsx: un
+ * `export const`/`export function` rompe el build de Stencil entero). El .tsx
+ * solo exporta `class` + `type`/`interface`.
+ *
+ * Portado del Angular homologado
+ * (SUI Angular, projects/sui-design-system/src/lib/sui-datepicker/datepicker-utils.ts).
+ * El Angular usa date-fns 4.1 con locale 'es'; el repo Stencil NO tiene date-fns,
+ * así que las utilidades de fecha se reimplementan nativas (semana arranca LUNES,
+ * meses/labels en español, mismos resultados que el original).
+ * ══════════════════════════════════════════════════════════════════════════ */
+/* ── Etiquetas / nombres en español (locale 'es' del original) ───────────── */
+/** Header del grid — semana arranca LUNES (locale ES, weekStartsOn = 1). */
+const DAY_LABELS_ES = ['LU', 'MA', 'MI', 'JU', 'VI', 'SÁ', 'DO'];
+const MONTH_NAMES_ES = [
+    'enero',
+    'febrero',
+    'marzo',
+    'abril',
+    'mayo',
+    'junio',
+    'julio',
+    'agosto',
+    'septiembre',
+    'octubre',
+    'noviembre',
+    'diciembre',
+];
+const MONTH_ABBR_ES = [
+    'ene',
+    'feb',
+    'mar',
+    'abr',
+    'may',
+    'jun',
+    'jul',
+    'ago',
+    'sep',
+    'oct',
+    'nov',
+    'dic',
+];
+/* ── Aritmética de fechas (nativa, equivalente a date-fns startOfX) ───────── */
+function startOfDay(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+function startOfMonth(d) {
+    return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+function startOfYear(d) {
+    return new Date(d.getFullYear(), 0, 1);
+}
+function addMonths(d, n) {
+    // Conserva day-of-month con clamp (date-fns lo hace; aquí basta el 1 del mes
+    // porque siempre operamos sobre el ancla startOfMonth).
+    return new Date(d.getFullYear(), d.getMonth() + n, d.getDate());
+}
+function subMonths(d, n) {
+    return addMonths(d, -n);
+}
+function subDays(d, n) {
+    const r = new Date(d);
+    r.setDate(r.getDate() - n);
+    return r;
+}
+function subYears(d, n) {
+    return new Date(d.getFullYear() - n, d.getMonth(), d.getDate());
+}
+function isSameDay(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+function isSameMonth(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function isBefore(a, b) {
+    return a.getTime() < b.getTime();
+}
+function isAfter(a, b) {
+    return a.getTime() > b.getTime();
+}
+/** Lunes = 0, Domingo = 6 (equivalente a startOfWeek con weekStartsOn:1). */
+function mondayIndex(d) {
+    return (d.getDay() + 6) % 7;
+}
+/** Inicio de semana ES (lunes 00:00). */
+function startOfWeekMonday(d) {
+    const s = startOfDay(d);
+    s.setDate(s.getDate() - mondayIndex(s));
+    return s;
+}
+/* ── Presets por default (8 estándar, locale ES) ─────────────────────────── */
+const DEFAULT_PRESETS = [
+    { id: 'today', label: 'Hoy', resolve: (t) => [startOfDay(t), startOfDay(t)] },
+    { id: 'last-7', label: 'Últimos 7 días', resolve: (t) => [startOfDay(subDays(t, 6)), startOfDay(t)] },
+    { id: 'last-30', label: 'Últimos 30 días', resolve: (t) => [startOfDay(subDays(t, 29)), startOfDay(t)] },
+    { id: 'last-3-months', label: 'Últimos 3 meses', resolve: (t) => [startOfDay(subMonths(t, 3)), startOfDay(t)] },
+    { id: 'last-12-months', label: 'Últimos 12 meses', resolve: (t) => [startOfDay(subYears(t, 1)), startOfDay(t)] },
+    { id: 'month-to-date', label: 'Mes en curso', resolve: (t) => [startOfMonth(t), startOfDay(t)] },
+    { id: 'year-to-date', label: 'Año en curso', resolve: (t) => [startOfYear(t), startOfDay(t)] },
+    { id: 'all-time', label: 'Todo el tiempo', resolve: () => [null, null] },
+];
+/* ── Generación del grid 6×7 (42 cells) ──────────────────────────────────── */
+/**
+ * Genera el grid de 6 semanas × 7 días (42 celdas) para el mes ancla. Incluye
+ * días del mes anterior/siguiente para llenar la primera/última semana (estilo
+ * calendario tradicional). Locale ES → semana empieza LUNES.
+ *
+ * Genera SIEMPRE 42 cells (mantiene height constante entre meses; sin esto, un
+ * mes corto dejaría el right calendar más bajo que el left en mode=range).
+ */
+function buildCalendarGrid(monthAnchor, options) {
+    const { today, selected, rangeStart, rangeEnd, min, max, marked = [] } = options;
+    const firstOfMonth = startOfMonth(monthAnchor);
+    const gridStart = startOfWeekMonday(firstOfMonth);
+    const cells = [];
+    const cursor = new Date(gridStart);
+    for (let i = 0; i < 42; i++) {
+        const date = startOfDay(new Date(cursor));
+        const inCurrentMonth = isSameMonth(date, monthAnchor);
+        const isTodayCell = isSameDay(date, today);
+        const isOutOfBounds = (!!min && isBefore(date, startOfDay(min))) ||
+            (!!max && isAfter(date, startOfDay(max)));
+        /* Out-of-month cells quedan disabled y SIN highlight de range/selected
+           (sino aparecen los mismos días en 2 calendars y confunde). Quedan
+           visibles como ghost gris para preservar la grilla 6×7. */
+        const isDisabled = isOutOfBounds || !inCurrentMonth;
+        let isSelected = false;
+        let inRange = false;
+        let isRangeStart = false;
+        let isRangeEnd = false;
+        if (inCurrentMonth) {
+            if (selected) {
+                isSelected = isSameDay(date, selected);
+            }
+            if (rangeStart && rangeEnd) {
+                const a = isBefore(rangeStart, rangeEnd) ? rangeStart : rangeEnd;
+                const b = isBefore(rangeStart, rangeEnd) ? rangeEnd : rangeStart;
+                const sa = startOfDay(a);
+                const sb = startOfDay(b);
+                isRangeStart = isSameDay(date, sa);
+                isRangeEnd = isSameDay(date, sb);
+                inRange = date.getTime() >= sa.getTime() && date.getTime() <= sb.getTime();
+                isSelected = isRangeStart || isRangeEnd;
+            }
+            else if (rangeStart) {
+                isRangeStart = isSameDay(date, rangeStart);
+                isSelected = isRangeStart;
+            }
+        }
+        /* Marker dot: solo en celdas del mes actual (preserva limpieza visual). */
+        const isMarked = inCurrentMonth && marked.some((m) => isSameDay(date, m));
+        cells.push({
+            date,
+            day: date.getDate(),
+            inCurrentMonth,
+            isToday: isTodayCell,
+            disabled: isDisabled,
+            selected: isSelected,
+            inRange,
+            isRangeStart,
+            isRangeEnd,
+            marked: isMarked,
+        });
+        cursor.setDate(cursor.getDate() + 1);
+    }
+    return cells;
+}
+/**
+ * Agrupa las 42 celdas en 6 filas de 7 y deriva la banda de rango continua por
+ * fila (Figma 446:7412 — franja alpha-10 a nivel de fila). Solo aplica banda en
+ * mode=range; en mode=date las bandas quedan inertes (hasBand=false).
+ */
+function toCalendarRows(cells, isRange) {
+    const rows = [];
+    for (let i = 0; i < cells.length; i += 7) {
+        const slice = cells.slice(i, i + 7);
+        let bandStart = -1;
+        let bandEnd = -1;
+        if (isRange) {
+            for (let j = 0; j < slice.length; j++) {
+                if (slice[j].inRange) {
+                    if (bandStart === -1)
+                        bandStart = j;
+                    bandEnd = j;
+                }
+            }
+        }
+        const hasBand = bandStart !== -1;
+        rows.push({
+            cells: slice,
+            hasBand,
+            bandStart,
+            bandEnd,
+            bandRoundLeft: hasBand && slice[bandStart].isRangeStart,
+            bandRoundRight: hasBand && slice[bandEnd].isRangeEnd,
+        });
+    }
+    return rows;
+}
+/* ── Formateadores (equivalentes a los format() de date-fns del original) ── */
+/** "Enero 2025" — mes con mayúscula inicial + año (como el Angular). */
+function formatMonthYear(date) {
+    const mes = MONTH_NAMES_ES[date.getMonth()];
+    return `${mes.charAt(0).toUpperCase()}${mes.slice(1)} ${date.getFullYear()}`;
+}
+const WEEKDAY_NAMES_ES = ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'];
+/** "martes 7 de octubre de 2026" — nombre de cada día para el lector de pantalla
+ *  (date-fns "EEEE d 'de' MMMM 'de' yyyy", locale es). */
+function formatDateLong(date) {
+    return `${WEEKDAY_NAMES_ES[date.getDay()]} ${date.getDate()} de ${MONTH_NAMES_ES[date.getMonth()]} de ${date.getFullYear()}`;
+}
+/** "12 de may 2026" — date-fns "d 'de' MMM yyyy", locale es. */
+function formatDateShort(date) {
+    return `${date.getDate()} de ${MONTH_ABBR_ES[date.getMonth()]} ${date.getFullYear()}`;
+}
+/** "12/05/2026" — formato corto para el input (date-fns 'dd/MM/yyyy'). */
+function formatDateInput(date) {
+    const dd = String(date.getDate()).padStart(2, '0');
+    const mm = String(date.getMonth() + 1).padStart(2, '0');
+    return `${dd}/${mm}/${date.getFullYear()}`;
+}
+
+const suiDatepickerCss = () => `@charset "UTF-8";.sc-sui-datepicker-h{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}[data-sui-mode=range].sc-sui-datepicker-h{display:block}.sui-datepicker__trigger.sc-sui-datepicker{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), box-shadow var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out)}.sui-datepicker__trigger.sc-sui-datepicker:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-datepicker__trigger.sc-sui-datepicker:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff), 0 0 0 4px color-mix(in oklab, var(--sui-stroke-strong-950, #171717) 16%, transparent)}.sui-datepicker__trigger.sc-sui-datepicker:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}[data-sui-size=small].sc-sui-datepicker-h .sui-datepicker__trigger.sc-sui-datepicker{height:36px;border-radius:var(--sui-radius-8, 8px)}[data-sui-size=large].sc-sui-datepicker-h .sui-datepicker__trigger.sc-sui-datepicker{height:48px;padding:0 14px;gap:10px;border-radius:var(--sui-radius-12, 12px)}.sui-datepicker__trigger-icon.sc-sui-datepicker{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__trigger-text.sc-sui-datepicker{flex:1 1 auto;text-align:left;font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -0.006em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-datepicker__trigger-text--placeholder.sc-sui-datepicker{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}[data-sui-size=large].sc-sui-datepicker-h .sui-datepicker__trigger-text.sc-sui-datepicker{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -0.011em)}.sui-datepicker__trigger-chevron.sc-sui-datepicker{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__panel.sc-sui-datepicker{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, 0.1019607843));overflow:hidden;animation:sui-datepicker-enter 160ms cubic-bezier(0.23, 1, 0.32, 1)}.sui-datepicker__panel--inline.sc-sui-datepicker{position:static;animation:none}.sui-datepicker__panel--range.sc-sui-datepicker{width:936px;max-width:calc(100vw - 32px)}[data-sui-calendars="1"].sc-sui-datepicker-h .sui-datepicker__panel--range.sc-sui-datepicker{width:auto}@keyframes sui-datepicker-enter{from{opacity:0;transform:translateY(-4px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sui-datepicker__presets.sc-sui-datepicker{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0;padding:20px 16px 2px;border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-sizing:border-box}.sui-datepicker__content.sc-sui-datepicker{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.sui-datepicker__calendars.sc-sui-datepicker{display:flex;flex:1 1 auto}.sui-datepicker__calendar.sc-sui-datepicker{flex:1 1 0;max-width:368px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px}.sui-datepicker__calendar--right.sc-sui-datepicker{border-left:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-datepicker__calendar.sc-sui-datepicker sui-date-selector.sc-sui-datepicker{width:328px;max-width:328px}.sui-datepicker__grid.sc-sui-datepicker{display:contents}.sui-datepicker__day-labels.sc-sui-datepicker{display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px;max-width:328px}.sui-datepicker__day-grid.sc-sui-datepicker{display:flex;flex-direction:column;gap:8px;width:328px;max-width:328px}.sui-datepicker__day-row.sc-sui-datepicker{position:relative;display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px}.sui-datepicker__range-band.sc-sui-datepicker{position:absolute;top:0;bottom:0;left:0;right:0;background:var(--sui-primary-alpha-10, rgba(250, 115, 25, 0.1019607843));pointer-events:none;z-index:0}.sui-datepicker__range-band--round-left.sc-sui-datepicker{left:calc(var(--sui-band-start) * var(--sui-day-step, 48px));border-top-left-radius:var(--sui-radius-8, 8px);border-bottom-left-radius:var(--sui-radius-8, 8px)}.sui-datepicker__range-band--round-right.sc-sui-datepicker{right:calc((6 - var(--sui-band-end)) * var(--sui-day-step, 48px));border-top-right-radius:var(--sui-radius-8, 8px);border-bottom-right-radius:var(--sui-radius-8, 8px)}.sui-datepicker__day-row.sc-sui-datepicker sui-day-cell.sc-sui-datepicker{position:relative;z-index:1}.sui-datepicker__footer.sc-sui-datepicker{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}[data-sui-mode=range].sc-sui-datepicker-h .sui-datepicker__footer.sc-sui-datepicker{padding:16px 16px 16px 24px}.sui-datepicker__range-hint.sc-sui-datepicker{flex:1 0 0;min-width:0;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-0.006em;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-datepicker__footer-actions.sc-sui-datepicker{display:flex;gap:16px;align-items:center}.sc-sui-datepicker-h:not([data-sui-mode=range]) .sui-datepicker__footer-actions.sc-sui-datepicker{flex:1 0 0;min-width:0}.sc-sui-datepicker-h:not([data-sui-mode=range]) .sui-datepicker__footer-actions.sc-sui-datepicker sui-button.sc-sui-datepicker{flex:1 0 0;min-width:0}[data-sui-mode=range].sc-sui-datepicker-h .sui-datepicker__footer-actions.sc-sui-datepicker{flex-shrink:0;margin-left:auto}[data-sui-mode=range].sc-sui-datepicker-h .sui-datepicker__footer-actions.sc-sui-datepicker sui-button.sc-sui-datepicker{width:108px}@media (max-width: 767px){.sui-datepicker__panel--range.sc-sui-datepicker{width:calc(100vw - 32px);flex-direction:column}.sui-datepicker__presets.sc-sui-datepicker{flex-direction:row;overflow-x:auto;width:100%;border-right:none;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:12px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.sui-datepicker__presets.sc-sui-datepicker sui-period-range.sc-sui-datepicker{width:auto;flex-shrink:0;scroll-snap-align:start}.sui-datepicker__calendar.sc-sui-datepicker{padding-left:12px;padding-right:12px;max-width:none}.sui-datepicker__day-labels.sc-sui-datepicker,.sui-datepicker__day-grid.sc-sui-datepicker,.sui-datepicker__day-row.sc-sui-datepicker{--sui-day-step:44px;width:304px;max-width:304px;gap:4px}}@media (max-width: 767px){[data-sui-mode=range].sc-sui-datepicker-h .sui-datepicker__footer.sc-sui-datepicker{flex-wrap:wrap;gap:12px 16px;padding:16px}.sui-datepicker__range-hint.sc-sui-datepicker{flex:1 0 100%}.sui-datepicker__calendar.sc-sui-datepicker sui-date-selector.sc-sui-datepicker{width:304px;max-width:304px}[data-sui-mode=range].sc-sui-datepicker-h .sui-datepicker__footer-actions.sc-sui-datepicker{flex:1 0 100%;margin-left:0}[data-sui-mode=range].sc-sui-datepicker-h .sui-datepicker__footer-actions.sc-sui-datepicker sui-button.sc-sui-datepicker{width:auto;flex:1 0 0;min-width:0}}[data-sui-size=xlarge].sc-sui-datepicker-h .sui-datepicker__trigger.sc-sui-datepicker{height:52px;padding:0 16px;gap:10px;border-radius:var(--sui-radius-12, 12px)}[data-sui-size=xlarge].sc-sui-datepicker-h .sui-datepicker__trigger-text.sc-sui-datepicker{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -0.011em)}[data-sui-size=xlarge].sc-sui-datepicker-h .sui-datepicker__calendar.sc-sui-datepicker{padding-left:18px;padding-right:18px}[data-sui-size=xlarge].sc-sui-datepicker-h .sui-datepicker__day-labels.sc-sui-datepicker,[data-sui-size=xlarge].sc-sui-datepicker-h .sui-datepicker__day-grid.sc-sui-datepicker,[data-sui-size=xlarge].sc-sui-datepicker-h .sui-datepicker__day-row.sc-sui-datepicker{--sui-day-step:48px;width:332px;max-width:332px;gap:4px}[data-sui-size=xlarge].sc-sui-datepicker-h .sui-datepicker__day-labels.sc-sui-datepicker sui-day-label.sc-sui-datepicker{width:44px;max-width:44px}[data-sui-size=xlarge].sc-sui-datepicker-h .sui-datepicker__calendar.sc-sui-datepicker sui-date-selector.sc-sui-datepicker{width:332px;max-width:332px}@media (max-width: 767px){[data-sui-size=xlarge].sc-sui-datepicker-h .sui-datepicker__calendar.sc-sui-datepicker{padding-left:12px;padding-right:12px}}`;
+
+const SuiDatepicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange");
+        this.opened = createEvent(this, "opened");
+        this.closed = createEvent(this, "closed");
+        /** `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")))))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+SuiDatepicker.style = suiDatepickerCss();
+
+export { SuiDatepicker as sui_datepicker };