@glatam/calendar-ui 1.0.3 → 1.0.5

package/dist/glatam-calendar.js

@@ -1,9 +1,9 @@
-import { css as E, LitElement as O, html as d } from "lit";
+import { css as M, LitElement as E, html as d } from "lit";
 import { property as s, customElement as T, state as u } from "lit/decorators.js";
-import { isTimeBlocked as I, formatISODate as _, generateMonthDays as A, generateWeekDays as j } from "@glatam/calendar-core";
+import { isTimeBlocked as C, formatISODate as _, generateMonthDays as P, generateWeekDays as j } from "@glatam/calendar-core";
 import { formatISODate as nt, isTimeBlocked as dt, parseISODate as ct } from "@glatam/calendar-core";
 import { classMap as N } from "lit/directives/class-map.js";
-const P = E`
+const A = M`
   :host {
     /* Fonts */
     --glatam-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -91,7 +91,7 @@ const P = E`
     --glatam-padding: 24px;
     font-size: 1.1rem;
   }
-`, W = E`
+`, W = M`
   :host {
     display: grid;
     min-width: 0;
@@ -348,8 +348,8 @@ const P = E`
     }
   }
 `;
-function C(e, t, a) {
-  if (t === a) return 0;
+function I(t, e, a) {
+  if (e === a) return 0;
   const i = (r, l) => {
     const o = {
       year: "numeric",
@@ -361,35 +361,35 @@ function C(e, t, a) {
       hour12: !1
     };
     l !== "local" && (o.timeZone = l);
-    const n = new Intl.DateTimeFormat("en-US", o).formatToParts(r), c = new Map(n.map(($) => [$.type, $.value])), m = Number(c.get("hour")), y = m === 24 ? 0 : m;
+    const n = new Intl.DateTimeFormat("en-US", o).formatToParts(r), c = new Map(n.map(($) => [$.type, $.value])), m = Number(c.get("hour")), v = m === 24 ? 0 : m;
     return new Date(
       Number(c.get("year")),
       Number(c.get("month")) - 1,
       Number(c.get("day")),
-      y,
+      v,
       Number(c.get("minute")),
       Number(c.get("second"))
     );
   };
   try {
-    const r = i(e, t);
-    return (i(e, a).getTime() - r.getTime()) / (60 * 1e3);
+    const r = i(t, e);
+    return (i(t, a).getTime() - r.getTime()) / (60 * 1e3);
   } catch {
     return 0;
   }
 }
-function U(e, t) {
-  if (t === 0)
-    return { start: e.start, end: e.end, dayShift: 0 };
+function U(t, e) {
+  if (e === 0)
+    return { start: t.start, end: t.end, dayShift: 0 };
   const a = (c) => {
-    const [m, y] = c.split(":").map(Number);
-    return m * 60 + y;
+    const [m, v] = c.split(":").map(Number);
+    return m * 60 + v;
   }, i = (c) => {
     let m = c % 1440;
     m < 0 && (m += 1440);
-    const y = String(Math.floor(m / 60)).padStart(2, "0"), $ = String(m % 60).padStart(2, "0");
-    return `${y}:${$}`;
-  }, r = a(e.start), l = a(e.end), o = r + t, h = l + t;
+    const v = String(Math.floor(m / 60)).padStart(2, "0"), $ = String(m % 60).padStart(2, "0");
+    return `${v}:${$}`;
+  }, r = a(t.start), l = a(t.end), o = r + e, h = l + e;
   let n = 0;
   return o < 0 ? n = -1 : o >= 1440 && (n = 1), {
     start: i(o),
@@ -397,57 +397,57 @@ function U(e, t) {
     dayShift: n
   };
 }
-var L = Object.defineProperty, F = Object.getOwnPropertyDescriptor, D = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? F(t, a) : t, l = e.length - 1, o; l >= 0; l--)
-    (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && L(t, a, r), r;
+var L = Object.defineProperty, F = Object.getOwnPropertyDescriptor, D = (t, e, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? F(e, a) : e, l = t.length - 1, o; l >= 0; l--)
+    (o = t[l]) && (r = (i ? o(e, a, r) : o(r)) || r);
+  return i && r && L(e, a, r), r;
 };
-let f = class extends O {
+let f = class extends E {
   constructor() {
     super(...arguments), this.days = [], this.locale = "es", this.startOfWeekDay = 0, this.selectedDates = [], this.role = "provider", this.size = "medium", this.minDate = "", this.maxDate = "", this.showNeighboringMonth = !0, this.tileClassName = null;
   }
   getWeekdayNames() {
-    const e = [], t = new Date(2026, 6, 12 + this.startOfWeekDay), a = new Intl.DateTimeFormat(this.locale, { weekday: "short" });
+    const t = [], e = new Date(2026, 6, 12 + this.startOfWeekDay), a = new Intl.DateTimeFormat(this.locale, { weekday: "short" });
     for (let i = 0; i < 7; i++)
-      e.push(a.format(t)), t.setDate(t.getDate() + 1);
-    return e;
+      t.push(a.format(e)), e.setDate(e.getDate() + 1);
+    return t;
   }
-  handleDayClick(e) {
-    const t = this.minDate && e.dateString < this.minDate || this.maxDate && e.dateString > this.maxDate;
-    this.role === "buyer" && (e.isBlocked || t) || this.dispatchEvent(new CustomEvent("day-select", {
-      detail: { dateString: e.dateString, isBlocked: e.isBlocked },
+  handleDayClick(t) {
+    const e = this.minDate && t.dateString < this.minDate || this.maxDate && t.dateString > this.maxDate;
+    this.role === "buyer" && (t.isBlocked || e) || this.dispatchEvent(new CustomEvent("day-select", {
+      detail: { dateString: t.dateString, isBlocked: t.isBlocked },
       bubbles: !0,
       composed: !0
     }));
   }
   render() {
-    const e = this.getWeekdayNames();
+    const t = this.getWeekdayNames();
     return d`
-      ${e.map((t) => d`<div class="weekday">${t}</div>`)}
+      ${t.map((e) => d`<div class="weekday">${e}</div>`)}
       
-      ${this.days.map((t) => {
+      ${this.days.map((e) => {
       var h;
-      if (!t.isCurrentMonth && !this.showNeighboringMonth)
+      if (!e.isCurrentMonth && !this.showNeighboringMonth)
         return d`<div class="day-cell empty"></div>`;
-      const a = t.dateString === (/* @__PURE__ */ new Date()).toISOString().split("T")[0], i = this.selectedDates.includes(t.dateString), r = t.slots.filter((n) => n.isBlocked), l = this.minDate && t.dateString < this.minDate || this.maxDate && t.dateString > this.maxDate, o = this.tileClassName ? this.tileClassName({ date: t.date, dateString: t.dateString }) : "";
+      const a = e.dateString === (/* @__PURE__ */ new Date()).toISOString().split("T")[0], i = this.selectedDates.includes(e.dateString), r = e.slots.filter((n) => n.isBlocked), l = this.minDate && e.dateString < this.minDate || this.maxDate && e.dateString > this.maxDate, o = this.tileClassName ? this.tileClassName({ date: e.date, dateString: e.dateString }) : "";
       return d`
           <div 
             class=${N({
         "day-cell": !0,
-        padding: !t.isCurrentMonth,
-        blocked: t.isBlocked,
+        padding: !e.isCurrentMonth,
+        blocked: e.isBlocked,
         today: a,
         selected: i,
         disabled: !!l,
         [o]: !!o
       })}
             part="day-cell ${o}"
-            @click=${() => this.handleDayClick(t)}
+            @click=${() => this.handleDayClick(e)}
           >
-            <div class="day-number">${t.dayNumber}</div>
+            <div class="day-number">${e.dayNumber}</div>
             
             <div class="slot-indicator">
-              ${t.isBlocked ? d`<div class="badge blocked-day">${((h = t.rule) == null ? void 0 : h.description) || "Bloqueado"}</div>` : r.slice(0, 2).map((n) => {
+              ${e.isBlocked ? d`<div class="badge blocked-day">${((h = e.rule) == null ? void 0 : h.description) || "Bloqueado"}</div>` : r.slice(0, 2).map((n) => {
         var c, m;
         return d`
                     <div class="badge blocked-slot" title=${((c = n.rule) == null ? void 0 : c.description) || ""}>
@@ -455,7 +455,7 @@ let f = class extends O {
                     </div>
                   `;
       })}
-              ${!t.isBlocked && r.length > 2 ? d`<div style="text-align: center; font-size: 0.65rem; color: var(--glatam-text-secondary);">+${r.length - 2} tareas</div>` : ""}
+              ${!e.isBlocked && r.length > 2 ? d`<div style="text-align: center; font-size: 0.65rem; color: var(--glatam-text-secondary);">+${r.length - 2} tareas</div>` : ""}
             </div>
           </div>
         `;
@@ -463,7 +463,7 @@ let f = class extends O {
     `;
   }
 };
-f.styles = E`
+f.styles = M`
     :host { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: 100%; }
     .weekday { font-size: 0.75rem; font-weight: 600; color: var(--glatam-text-secondary); text-transform: uppercase; text-align: center; padding: 8px 0; letter-spacing: 0.05em; }
     .day-cell {
@@ -529,12 +529,12 @@ D([
 f = D([
   T("glatam-calendar-month-view")
 ], f);
-var H = Object.defineProperty, q = Object.getOwnPropertyDescriptor, R = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? q(t, a) : t, l = e.length - 1, o; l >= 0; l--)
-    (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && H(t, a, r), r;
+var Y = Object.defineProperty, H = Object.getOwnPropertyDescriptor, R = (t, e, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? H(e, a) : e, l = t.length - 1, o; l >= 0; l--)
+    (o = t[l]) && (r = (i ? o(e, a, r) : o(r)) || r);
+  return i && r && Y(e, a, r), r;
 };
-let w = class extends O {
+let w = class extends E {
   constructor() {
     super(...arguments), this.days = [], this.slots = [], this.locale = "es", this.selectedRange = null, this.role = "provider", this.isDragging = !1, this.dragDayIndex = null, this.dragStartSlotIndex = null, this.dragEndSlotIndex = null, this.handleMouseUp = () => {
       if (!this.isDragging || this.dragDayIndex === null || this.dragStartSlotIndex === null || this.dragEndSlotIndex === null) {
@@ -542,7 +542,7 @@ let w = class extends O {
         return;
       }
       this.isDragging = !1;
-      const e = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex), t = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex), a = this.days[this.dragDayIndex], i = a.slots.slice(e, t + 1);
+      const t = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex), e = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex), a = this.days[this.dragDayIndex], i = a.slots.slice(t, e + 1);
       i.some((r) => r.isBlocked) || this.dispatchEvent(new CustomEvent("range-select", {
         detail: { dateString: a.dateString, start: i[0].start, end: i[i.length - 1].end },
         bubbles: !0,
@@ -556,49 +556,49 @@ let w = class extends O {
   disconnectedCallback() {
     window.removeEventListener("mouseup", this.handleMouseUp), super.disconnectedCallback();
   }
-  handleMouseDown(e, t, a) {
+  handleMouseDown(t, e, a) {
     if (a) {
       if (this.role === "buyer") return;
       this.dispatchEvent(new CustomEvent("slot-click", {
-        detail: { dateString: this.days[e].dateString, slot: this.days[e].slots[t], isBlocked: !0 },
+        detail: { dateString: this.days[t].dateString, slot: this.days[t].slots[e], isBlocked: !0 },
         bubbles: !0,
         composed: !0
       }));
       return;
     }
-    this.isDragging = !0, this.dragDayIndex = e, this.dragStartSlotIndex = t, this.dragEndSlotIndex = t;
+    this.isDragging = !0, this.dragDayIndex = t, this.dragStartSlotIndex = e, this.dragEndSlotIndex = e;
   }
-  handleMouseEnter(e, t, a) {
-    this.isDragging && e === this.dragDayIndex && !a && (this.dragEndSlotIndex = t);
+  handleMouseEnter(t, e, a) {
+    this.isDragging && t === this.dragDayIndex && !a && (this.dragEndSlotIndex = e);
   }
-  isSlotSelected(e, t) {
-    return !this.selectedRange || this.selectedRange.dateString !== e ? !1 : t.start >= this.selectedRange.start && t.end <= this.selectedRange.end;
+  isSlotSelected(t, e) {
+    return !this.selectedRange || this.selectedRange.dateString !== t ? !1 : e.start >= this.selectedRange.start && e.end <= this.selectedRange.end;
   }
-  isSlotDragSelecting(e, t) {
-    if (!this.isDragging || e !== this.dragDayIndex) return !1;
+  isSlotDragSelecting(t, e) {
+    if (!this.isDragging || t !== this.dragDayIndex) return !1;
     const a = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex), i = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex);
-    return t >= a && t <= i;
+    return e >= a && e <= i;
   }
   render() {
-    const e = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+    const t = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
     return d`
       <div class="time-col">
         <div class="header-cell">Hora</div>
-        ${this.slots.map((t) => d`<div class="slot-cell time-slot-label">${t.start}</div>`)}
+        ${this.slots.map((e) => d`<div class="slot-cell time-slot-label">${e.start}</div>`)}
       </div>
 
-      ${this.days.map((t, a) => {
-      const i = t.dateString === e, r = new Intl.DateTimeFormat(this.locale, { weekday: "short" }).format(t.date);
+      ${this.days.map((e, a) => {
+      const i = e.dateString === t, r = new Intl.DateTimeFormat(this.locale, { weekday: "short" }).format(e.date);
       return d`
           <div class="day-col">
             <div class="header-cell ${i ? "today" : ""}">
               <div>${r}</div>
-              <div class="day-num">${t.dayNumber}</div>
+              <div class="day-num">${e.dayNumber}</div>
             </div>
             
-            ${t.slots.map((l, o) => {
-        var m, y;
-        const h = l.isBlocked, n = this.isSlotSelected(t.dateString, l), c = this.isSlotDragSelecting(a, o);
+            ${e.slots.map((l, o) => {
+        var m, v;
+        const h = l.isBlocked, n = this.isSlotSelected(e.dateString, l), c = this.isSlotDragSelecting(a, o);
         return d`
                 <div
                   class=${N({
@@ -612,7 +612,7 @@ let w = class extends O {
                   @mouseenter=${() => this.handleMouseEnter(a, o, h)}
                   title=${h && ((m = l.rule) != null && m.description) ? l.rule.description : ""}
                 >
-                  ${h ? ((y = l.rule) == null ? void 0 : y.description) || "Ocupado" : n ? "Reservado" : ""}
+                  ${h ? ((v = l.rule) == null ? void 0 : v.description) || "Ocupado" : n ? "Reservado" : ""}
                 </div>
               `;
       })}
@@ -622,7 +622,7 @@ let w = class extends O {
     `;
   }
 };
-w.styles = E`
+w.styles = M`
     :host {
       display: grid; grid-template-columns: var(--glatam-time-col-width) repeat(7, 1fr); gap: 2px;
       width: 100%; background-color: var(--glatam-border); border: 1px solid var(--glatam-border);
@@ -705,12 +705,12 @@ R([
 w = R([
   T("glatam-calendar-week-view")
 ], w);
-var G = Object.defineProperty, V = Object.getOwnPropertyDescriptor, z = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? V(t, a) : t, l = e.length - 1, o; l >= 0; l--)
-    (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && G(t, a, r), r;
+var q = Object.defineProperty, G = Object.getOwnPropertyDescriptor, z = (t, e, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? G(e, a) : e, l = t.length - 1, o; l >= 0; l--)
+    (o = t[l]) && (r = (i ? o(e, a, r) : o(r)) || r);
+  return i && r && q(e, a, r), r;
 };
-let S = class extends O {
+let S = class extends E {
   constructor() {
     super(...arguments), this.day = null, this.slots = [], this.locale = "es", this.selectedRange = null, this.role = "provider", this.isDragging = !1, this.dragStartSlotIndex = null, this.dragEndSlotIndex = null, this.handleMouseUp = () => {
       if (!this.isDragging || !this.day || this.dragStartSlotIndex === null || this.dragEndSlotIndex === null) {
@@ -718,7 +718,7 @@ let S = class extends O {
         return;
       }
       this.isDragging = !1;
-      const e = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex), t = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex), a = this.day.slots.slice(e, t + 1);
+      const t = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex), e = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex), a = this.day.slots.slice(t, e + 1);
       a.some((i) => i.isBlocked) || this.dispatchEvent(new CustomEvent("range-select", {
         detail: { dateString: this.day.dateString, start: a[0].start, end: a[a.length - 1].end },
         bubbles: !0,
@@ -732,32 +732,32 @@ let S = class extends O {
   disconnectedCallback() {
     window.removeEventListener("mouseup", this.handleMouseUp), super.disconnectedCallback();
   }
-  handleMouseDown(e, t) {
-    if (t && this.day) {
+  handleMouseDown(t, e) {
+    if (e && this.day) {
       if (this.role === "buyer") return;
       this.dispatchEvent(new CustomEvent("slot-click", {
-        detail: { dateString: this.day.dateString, slot: this.day.slots[e], isBlocked: !0 },
+        detail: { dateString: this.day.dateString, slot: this.day.slots[t], isBlocked: !0 },
         bubbles: !0,
         composed: !0
       }));
       return;
     }
-    this.isDragging = !0, this.dragStartSlotIndex = e, this.dragEndSlotIndex = e;
+    this.isDragging = !0, this.dragStartSlotIndex = t, this.dragEndSlotIndex = t;
   }
-  handleMouseEnter(e, t) {
-    this.isDragging && !t && (this.dragEndSlotIndex = e);
+  handleMouseEnter(t, e) {
+    this.isDragging && !e && (this.dragEndSlotIndex = t);
   }
-  isSlotSelected(e) {
-    return !this.day || !this.selectedRange || this.selectedRange.dateString !== this.day.dateString ? !1 : e.start >= this.selectedRange.start && e.end <= this.selectedRange.end;
+  isSlotSelected(t) {
+    return !this.day || !this.selectedRange || this.selectedRange.dateString !== this.day.dateString ? !1 : t.start >= this.selectedRange.start && t.end <= this.selectedRange.end;
   }
-  isSlotDragSelecting(e) {
+  isSlotDragSelecting(t) {
     if (!this.isDragging) return !1;
-    const t = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex), a = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex);
-    return e >= t && e <= a;
+    const e = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex), a = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex);
+    return t >= e && t <= a;
   }
   render() {
     if (!this.day) return d`<div>Cargando...</div>`;
-    const e = this.day.dateString === (/* @__PURE__ */ new Date()).toISOString().split("T")[0], t = new Intl.DateTimeFormat(this.locale, { weekday: "long", day: "numeric", month: "long" }).format(this.day.date);
+    const t = this.day.dateString === (/* @__PURE__ */ new Date()).toISOString().split("T")[0], e = new Intl.DateTimeFormat(this.locale, { weekday: "long", day: "numeric", month: "long" }).format(this.day.date);
     return d`
       <div class="time-col">
         <div class="header-cell">Hora</div>
@@ -765,8 +765,8 @@ let S = class extends O {
       </div>
 
       <div class="day-col">
-        <div class="header-cell ${e ? "today" : ""}">
-          <div style="text-transform: capitalize;">${t}</div>
+        <div class="header-cell ${t ? "today" : ""}">
+          <div style="text-transform: capitalize;">${e}</div>
         </div>
 
         ${this.day.slots.map((a, i) => {
@@ -793,7 +793,7 @@ let S = class extends O {
     `;
   }
 };
-S.styles = E`
+S.styles = M`
     :host {
       display: grid; grid-template-columns: var(--glatam-time-col-width) 1fr; gap: 2px;
       width: 100%; background-color: var(--glatam-border); border: 1px solid var(--glatam-border);
@@ -850,7 +850,7 @@ z([
 S = z([
   T("glatam-calendar-day-view")
 ], S);
-const Y = E`
+const V = M`
   dialog {
     background: transparent;
     border: none;
@@ -1006,34 +1006,34 @@ const Y = E`
     background: rgba(255, 69, 58, 0.18);
   }
 `;
-var Z = Object.defineProperty, J = Object.getOwnPropertyDescriptor, k = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? J(t, a) : t, l = e.length - 1, o; l >= 0; l--)
-    (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && Z(t, a, r), r;
+var X = Object.defineProperty, Z = Object.getOwnPropertyDescriptor, k = (t, e, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Z(e, a) : e, l = t.length - 1, o; l >= 0; l--)
+    (o = t[l]) && (r = (i ? o(e, a, r) : o(r)) || r);
+  return i && r && X(e, a, r), r;
 };
-let x = class extends O {
+let x = class extends E {
   constructor() {
     super(...arguments), this.open = !1, this.dateString = "", this.startTime = "", this.endTime = "", this.isRange = !1, this.existingRule = null, this.description = "", this.blockAllDay = !0, this.isRecurring = !1, this.selectedDays = [];
   }
-  willUpdate(e) {
-    e.has("open") && this.open && (this.existingRule ? (this.description = "Bloqueo", this.blockAllDay = !this.existingRule.slots || this.existingRule.slots.length === 0, this.isRecurring = this.existingRule.type === "weekly", this.selectedDays = this.existingRule.daysOfWeek || []) : (this.description = "", this.blockAllDay = !this.isRange, this.isRecurring = !1, this.selectedDays = [(/* @__PURE__ */ new Date(this.dateString + "T00:00:00")).getDay()]));
+  willUpdate(t) {
+    t.has("open") && this.open && (this.existingRule ? (this.description = "Bloqueo", this.blockAllDay = !this.existingRule.slots || this.existingRule.slots.length === 0, this.isRecurring = this.existingRule.type === "weekly", this.selectedDays = this.existingRule.daysOfWeek || []) : (this.description = "", this.blockAllDay = !this.isRange, this.isRecurring = !1, this.selectedDays = [(/* @__PURE__ */ new Date(this.dateString + "T00:00:00")).getDay()]));
   }
-  updated(e) {
-    var t;
-    if (e.has("open")) {
-      const a = (t = this.shadowRoot) == null ? void 0 : t.getElementById("booking-dialog");
+  updated(t) {
+    var e;
+    if (t.has("open")) {
+      const a = (e = this.shadowRoot) == null ? void 0 : e.getElementById("booking-dialog");
       a && (this.open ? a.open || a.showModal() : a.open && a.close());
     }
   }
   handleDialogClose() {
     this.open && this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }));
   }
-  toggleDay(e) {
-    const t = this.selectedDays.indexOf(e);
-    this.selectedDays = t > -1 ? this.selectedDays.filter((a) => a !== e) : [...this.selectedDays, e];
+  toggleDay(t) {
+    const e = this.selectedDays.indexOf(t);
+    this.selectedDays = e > -1 ? this.selectedDays.filter((a) => a !== t) : [...this.selectedDays, t];
   }
   handleSave() {
-    const e = {
+    const t = {
       title: this.description || "Bloqueo",
       blockAllDay: this.blockAllDay,
       isRecurring: this.isRecurring,
@@ -1042,7 +1042,7 @@ let x = class extends O {
       startTime: this.startTime,
       endTime: this.endTime
     };
-    this.dispatchEvent(new CustomEvent("save-rule", { detail: e, bubbles: !0, composed: !0 }));
+    this.dispatchEvent(new CustomEvent("save-rule", { detail: t, bubbles: !0, composed: !0 }));
   }
   handleDelete() {
     this.existingRule && this.dispatchEvent(new CustomEvent("delete-rule", {
@@ -1052,14 +1052,14 @@ let x = class extends O {
     }));
   }
   render() {
-    const e = ["D", "L", "M", "M", "J", "V", "S"], t = this.isRange ? `${this.dateString} (${this.startTime} - ${this.endTime})` : this.dateString;
+    const t = ["D", "L", "M", "M", "J", "V", "S"], e = this.isRange ? `${this.dateString} (${this.startTime} - ${this.endTime})` : this.dateString;
     return d`
       <dialog id="booking-dialog" @close=${this.handleDialogClose}>
         <div class="modal-content">
           <h3>${this.existingRule ? "Gestionar Bloqueo" : "Crear Bloqueo"}</h3>
           
           <div style="font-size: 0.85rem; color: var(--glatam-text-secondary);">
-            Selección: <strong>${t}</strong>
+            Selección: <strong>${e}</strong>
           </div>
 
           <div class="form-group">
@@ -1105,7 +1105,7 @@ let x = class extends O {
                         class="day-btn ${this.selectedDays.includes(a) ? "selected" : ""}"
                         @click=${() => this.toggleDay(a)}
                       >
-                        ${e[a]}
+                        ${t[a]}
                       </button>
                     `)}
                   </div>
@@ -1122,7 +1122,7 @@ let x = class extends O {
     `;
   }
 };
-x.styles = Y;
+x.styles = V;
 k([
   s({ type: Boolean })
 ], x.prototype, "open", 2);
@@ -1156,10 +1156,10 @@ k([
 x = k([
   T("glatam-calendar-modal")
 ], x);
-var X = Object.defineProperty, K = Object.getOwnPropertyDescriptor, p = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? K(t, a) : t, l = e.length - 1, o; l >= 0; l--)
-    (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && X(t, a, r), r;
+var J = Object.defineProperty, K = Object.getOwnPropertyDescriptor, p = (t, e, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? K(e, a) : e, l = t.length - 1, o; l >= 0; l--)
+    (o = t[l]) && (r = (i ? o(e, a, r) : o(r)) || r);
+  return i && r && J(e, a, r), r;
 };
 const Q = [
   { start: "09:00", end: "10:00" },
@@ -1172,90 +1172,90 @@ const Q = [
   { start: "16:00", end: "17:00" },
   { start: "17:00", end: "18:00" }
 ];
-let g = class extends O {
+let g = class extends E {
   constructor() {
     super(...arguments), this.role = "provider", this.size = "medium", this.view = "month", this.locale = "es", this.startOfWeekDay = 0, this.rules = [], this.selectedDates = [], this.selectedRange = null, this.hostTimezone = "America/Bogota", this.activeTimezone = "local", this.slots = Q, this.minDate = "", this.maxDate = "", this.showNeighboringMonth = !0, this.tileClassName = null, this.activeDate = /* @__PURE__ */ new Date(), this.localRules = [], this.darkMode = !1, this.modalOpen = !1, this.modalDateString = "", this.modalStartTime = "", this.modalEndTime = "", this.modalIsRange = !1, this.modalExistingRule = null;
   }
   firstUpdated() {
     this.darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches, this.localRules = [...this.rules];
   }
-  willUpdate(e) {
-    e.has("rules") && this.rules.length > 0 && this.localRules.length === 0 && (this.localRules = [...this.rules]);
+  willUpdate(t) {
+    t.has("rules") && (this.localRules = [...this.rules || []]);
   }
-  updated(e) {
-    e.has("darkMode") && this.classList.toggle("dark-mode", this.darkMode);
+  updated(t) {
+    t.has("darkMode") && this.classList.toggle("dark-mode", this.darkMode);
   }
   handlePrev() {
-    const e = new Date(this.activeDate);
-    this.view === "month" ? e.setMonth(e.getMonth() - 1) : this.view === "week" ? e.setDate(e.getDate() - 7) : e.setDate(e.getDate() - 1), this.activeDate = e;
+    const t = new Date(this.activeDate);
+    this.view === "month" ? t.setMonth(t.getMonth() - 1) : this.view === "week" ? t.setDate(t.getDate() - 7) : t.setDate(t.getDate() - 1), this.activeDate = t;
   }
   handleNext() {
-    const e = new Date(this.activeDate);
-    this.view === "month" ? e.setMonth(e.getMonth() + 1) : this.view === "week" ? e.setDate(e.getDate() + 7) : e.setDate(e.getDate() + 1), this.activeDate = e;
+    const t = new Date(this.activeDate);
+    this.view === "month" ? t.setMonth(t.getMonth() + 1) : this.view === "week" ? t.setDate(t.getDate() + 7) : t.setDate(t.getDate() + 1), this.activeDate = t;
   }
   getHeaderTitle() {
-    const e = this.view === "month" ? { month: "long", year: "numeric" } : this.view === "week" ? { month: "short", year: "numeric" } : { day: "numeric", month: "long", year: "numeric" };
-    return new Intl.DateTimeFormat(this.locale, e).format(this.activeDate);
-  }
-  handleDaySelect(e) {
-    const { dateString: t, isBlocked: a } = e.detail;
-    this.role === "buyer" && a || (this.activeDate = /* @__PURE__ */ new Date(t + "T00:00:00"), this.view = "day", this.dispatchEvent(new CustomEvent("date-selected", { detail: { dateString: t }, bubbles: !0, composed: !0 })));
-  }
-  handleRangeSelect(e) {
-    var $, M;
-    const { dateString: t, start: a, end: i } = e.detail, r = this.activeTimezone === "local" ? C(this.activeDate, this.hostTimezone, "local") : 0, l = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], o = this.minDate || (this.role === "buyer" ? l : "");
-    if (this.role === "buyer" && o && t < o) return;
-    const h = this.getDisplaySlots(r), n = h.findIndex((B) => B.start === a), c = h.findIndex((B) => B.end === i), m = (($ = this.slots[n]) == null ? void 0 : $.start) || a, y = ((M = this.slots[c]) == null ? void 0 : M.end) || i;
+    const t = this.view === "month" ? { month: "long", year: "numeric" } : this.view === "week" ? { month: "short", year: "numeric" } : { day: "numeric", month: "long", year: "numeric" };
+    return new Intl.DateTimeFormat(this.locale, t).format(this.activeDate);
+  }
+  handleDaySelect(t) {
+    const { dateString: e, isBlocked: a } = t.detail;
+    this.role === "buyer" && a || (this.activeDate = /* @__PURE__ */ new Date(e + "T00:00:00"), this.view = "day", this.dispatchEvent(new CustomEvent("date-selected", { detail: { dateString: e }, bubbles: !0, composed: !0 })));
+  }
+  handleRangeSelect(t) {
+    var $, O;
+    const { dateString: e, start: a, end: i } = t.detail, r = this.activeTimezone === "local" ? I(this.activeDate, this.hostTimezone, "local") : 0, l = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], o = this.minDate || (this.role === "buyer" ? l : "");
+    if (this.role === "buyer" && o && e < o) return;
+    const h = this.getDisplaySlots(r), n = h.findIndex((B) => B.start === a), c = h.findIndex((B) => B.end === i), m = (($ = this.slots[n]) == null ? void 0 : $.start) || a, v = ((O = this.slots[c]) == null ? void 0 : O.end) || i;
     if (this.role === "buyer") {
-      this.selectedRange = { dateString: t, start: a, end: i }, this.dispatchEvent(new CustomEvent("booking-selected", { detail: { dateString: t, start: a, end: i, hostStart: m, hostEnd: y }, bubbles: !0, composed: !0 }));
+      this.selectedRange = { dateString: e, start: a, end: i }, this.dispatchEvent(new CustomEvent("booking-selected", { detail: { dateString: e, start: a, end: i, hostStart: m, hostEnd: v }, bubbles: !0, composed: !0 }));
       return;
     }
-    this.openModal(t, m, y, !0, null);
+    this.openModal(e, m, v, !0, null);
   }
-  handleSlotClick(e) {
-    const { dateString: t, slot: a } = e.detail, i = /* @__PURE__ */ new Date(t + "T00:00:00"), r = this.activeTimezone === "local" ? C(this.activeDate, this.hostTimezone, "local") : 0, l = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], o = this.minDate || (this.role === "buyer" ? l : "");
-    if (this.role === "buyer" && (a.isBlocked || o && t < o)) return;
-    const h = this.getDisplaySlots(r), n = h.findIndex((y) => y.start === a.start), c = this.slots[n] || a;
+  handleSlotClick(t) {
+    const { dateString: e, slot: a } = t.detail, i = /* @__PURE__ */ new Date(e + "T00:00:00"), r = this.activeTimezone === "local" ? I(this.activeDate, this.hostTimezone, "local") : 0, l = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], o = this.minDate || (this.role === "buyer" ? l : "");
+    if (this.role === "buyer" && (a.isBlocked || o && e < o)) return;
+    const h = this.getDisplaySlots(r), n = h.findIndex((v) => v.start === a.start), c = this.slots[n] || a;
     if (this.role === "buyer") {
-      this.selectedRange = { dateString: t, start: a.start, end: a.end }, this.dispatchEvent(new CustomEvent("booking-selected", { detail: { dateString: t, start: a.start, end: a.end, hostStart: c.start, hostEnd: c.end }, bubbles: !0, composed: !0 }));
+      this.selectedRange = { dateString: e, start: a.start, end: a.end }, this.dispatchEvent(new CustomEvent("booking-selected", { detail: { dateString: e, start: a.start, end: a.end, hostStart: c.start, hostEnd: c.end }, bubbles: !0, composed: !0 }));
       return;
     }
-    const m = this.localRules.find((y) => I(i, c, [y]));
-    this.openModal(t, c.start, c.end, !0, m || null);
+    const m = this.localRules.find((v) => C(i, c, [v]));
+    this.openModal(e, c.start, c.end, !0, m || null);
   }
   handleBlockDayAction() {
-    const e = _(this.activeDate), t = this.localRules.find((a) => I(this.activeDate, void 0, [a]));
-    this.openModal(e, "", "", !1, t || null);
+    const t = _(this.activeDate), e = this.localRules.find((a) => C(this.activeDate, void 0, [a]));
+    this.openModal(t, "", "", !1, e || null);
   }
-  openModal(e, t, a, i, r) {
-    this.modalDateString = e, this.modalStartTime = t, this.modalEndTime = a, this.modalIsRange = i, this.modalExistingRule = r, this.modalOpen = !0;
+  openModal(t, e, a, i, r) {
+    this.modalDateString = t, this.modalStartTime = e, this.modalEndTime = a, this.modalIsRange = i, this.modalExistingRule = r, this.modalOpen = !0;
   }
-  handleSaveRule(e) {
-    const t = e.detail, a = this.modalExistingRule ? this.modalExistingRule.id : `rule-${Date.now()}`, i = {
+  handleSaveRule(t) {
+    const e = t.detail, a = this.modalExistingRule ? this.modalExistingRule.id : `rule-${Date.now()}`, i = {
       id: a,
-      type: t.isRecurring ? "weekly" : "date-range",
-      slots: t.blockAllDay ? void 0 : [{ start: t.startTime, end: t.endTime }],
-      daysOfWeek: t.isRecurring ? t.selectedDays : void 0,
-      startDate: t.isRecurring ? void 0 : t.dateString,
-      endDate: t.isRecurring ? void 0 : t.dateString,
-      description: t.title
+      type: e.isRecurring ? "weekly" : "date-range",
+      slots: e.blockAllDay ? void 0 : [{ start: e.startTime, end: e.endTime }],
+      daysOfWeek: e.isRecurring ? e.selectedDays : void 0,
+      startDate: e.isRecurring ? void 0 : e.dateString,
+      endDate: e.isRecurring ? void 0 : e.dateString,
+      description: e.title
     };
     this.localRules = this.modalExistingRule ? this.localRules.map((r) => r.id === a ? i : r) : [...this.localRules, i], this.modalOpen = !1, this.dispatchEvent(new CustomEvent("rules-changed", { detail: { rules: this.localRules }, bubbles: !0, composed: !0 }));
   }
-  handleDeleteRule(e) {
-    this.localRules = this.localRules.filter((t) => t.id !== e.detail.id), this.modalOpen = !1, this.dispatchEvent(new CustomEvent("rules-changed", { detail: { rules: this.localRules }, bubbles: !0, composed: !0 }));
+  handleDeleteRule(t) {
+    this.localRules = this.localRules.filter((e) => e.id !== t.detail.id), this.modalOpen = !1, this.dispatchEvent(new CustomEvent("rules-changed", { detail: { rules: this.localRules }, bubbles: !0, composed: !0 }));
   }
-  getDisplaySlots(e) {
-    return e === 0 ? this.slots : this.slots.map((t) => {
-      const a = U(t, e), i = a.dayShift > 0 ? " (+1d)" : a.dayShift < 0 ? " (-1d)" : "";
+  getDisplaySlots(t) {
+    return t === 0 ? this.slots : this.slots.map((e) => {
+      const a = U(e, t), i = a.dayShift > 0 ? " (+1d)" : a.dayShift < 0 ? " (-1d)" : "";
       return { start: a.start + i, end: a.end + i };
     });
   }
   render() {
     var h;
-    const e = this.activeDate.getFullYear(), t = this.activeDate.getMonth(), a = I(this.activeDate, void 0, this.localRules), i = this.activeTimezone === "local" ? C(this.activeDate, this.hostTimezone, "local") : 0, r = this.getDisplaySlots(i), l = (n) => n.map((c) => ({ ...c, slots: c.slots.map((m, y) => {
-      var $, M;
-      return { ...m, start: (($ = r[y]) == null ? void 0 : $.start) || m.start, end: ((M = r[y]) == null ? void 0 : M.end) || m.end };
+    const t = this.activeDate.getFullYear(), e = this.activeDate.getMonth(), a = C(this.activeDate, void 0, this.localRules), i = this.activeTimezone === "local" ? I(this.activeDate, this.hostTimezone, "local") : 0, r = this.getDisplaySlots(i), l = (n) => n.map((c) => ({ ...c, slots: c.slots.map((m, v) => {
+      var $, O;
+      return { ...m, start: (($ = r[v]) == null ? void 0 : $.start) || m.start, end: ((O = r[v]) == null ? void 0 : O.end) || m.end };
     }) })), o = ((h = this.hostTimezone.split("/").pop()) == null ? void 0 : h.replace("_", " ")) || "Anfitrión";
     return d`
       <div class="calendar-header">
@@ -1287,7 +1287,7 @@ let g = class extends O {
       </div>
 
       <div class="calendar-body">
-        ${this.view === "month" ? d`<glatam-calendar-month-view .days=${A(e, t, this.localRules, this.slots, this.startOfWeekDay)} .locale=${this.locale} .startOfWeekDay=${this.startOfWeekDay} .role=${this.role} .size=${this.size} .minDate=${this.minDate || (this.role === "buyer" ? (/* @__PURE__ */ new Date()).toISOString().split("T")[0] : "")} .maxDate=${this.maxDate} .showNeighboringMonth=${this.showNeighboringMonth} .tileClassName=${this.tileClassName} @day-select=${this.handleDaySelect}></glatam-calendar-month-view>` : this.view === "week" ? d`<glatam-calendar-week-view .days=${l(j(this.activeDate, this.localRules, this.slots, this.startOfWeekDay))} .slots=${r} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-week-view>` : d`<glatam-calendar-day-view .day=${l(j(this.activeDate, this.localRules, this.slots, this.startOfWeekDay)).find((n) => n.dateString === _(this.activeDate)) || null} .slots=${r} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-day-view>`}
+        ${this.view === "month" ? d`<glatam-calendar-month-view .days=${P(t, e, this.localRules, this.slots, this.startOfWeekDay)} .locale=${this.locale} .startOfWeekDay=${this.startOfWeekDay} .role=${this.role} .size=${this.size} .minDate=${this.minDate || (this.role === "buyer" ? (/* @__PURE__ */ new Date()).toISOString().split("T")[0] : "")} .maxDate=${this.maxDate} .showNeighboringMonth=${this.showNeighboringMonth} .tileClassName=${this.tileClassName} @day-select=${this.handleDaySelect}></glatam-calendar-month-view>` : this.view === "week" ? d`<glatam-calendar-week-view .days=${l(j(this.activeDate, this.localRules, this.slots, this.startOfWeekDay))} .slots=${r} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-week-view>` : d`<glatam-calendar-day-view .day=${l(j(this.activeDate, this.localRules, this.slots, this.startOfWeekDay)).find((n) => n.dateString === _(this.activeDate)) || null} .slots=${r} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-day-view>`}
       </div>
 
       <glatam-calendar-modal
@@ -1298,7 +1298,7 @@ let g = class extends O {
     `;
   }
 };
-g.styles = [P, W];
+g.styles = [A, W];
 p([
   s({ type: String })
 ], g.prototype, "role", 2);
@@ -1374,12 +1374,12 @@ p([
 g = p([
   T("glatam-calendar")
 ], g);
-var tt = Object.defineProperty, et = Object.getOwnPropertyDescriptor, v = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? et(t, a) : t, l = e.length - 1, o; l >= 0; l--)
-    (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && tt(t, a, r), r;
+var tt = Object.defineProperty, et = Object.getOwnPropertyDescriptor, y = (t, e, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? et(e, a) : e, l = t.length - 1, o; l >= 0; l--)
+    (o = t[l]) && (r = (i ? o(e, a, r) : o(r)) || r);
+  return i && r && tt(e, a, r), r;
 };
-let b = class extends O {
+let b = class extends E {
   constructor() {
     super(...arguments), this.role = "buyer", this.locale = "es", this.startOfWeekDay = 0, this.rules = [], this.selectedRange = null, this.size = "medium", this.hostTimezone = "America/Bogota", this.activeTimezone = "local", this.minDate = "", this.maxDate = "", this.showNeighboringMonth = !0, this.tileClassName = null, this.slots = [
       { start: "09:00", end: "10:00" },
@@ -1391,24 +1391,47 @@ let b = class extends O {
       { start: "15:00", end: "16:00" },
       { start: "16:00", end: "17:00" },
       { start: "17:00", end: "18:00" }
-    ], this.activeDate = /* @__PURE__ */ new Date(), this.dropdownOpen = !1, this.dropdownSelectedDateString = "";
+    ], this.activeDate = /* @__PURE__ */ new Date(), this.dropdownOpen = !1, this.dropdownSelectedDateString = "", this.touchStartX = 0, this.touchStartY = 0;
   }
-  handleDropdownDaySelect(e) {
-    this.dropdownSelectedDateString = e.detail.dateString;
+  handlePrevMonth(t) {
+    t.stopPropagation();
+    const e = new Date(this.activeDate);
+    e.setMonth(e.getMonth() - 1), this.activeDate = e;
   }
-  selectDropdownSlot(e) {
-    const t = {
+  handleNextMonth(t) {
+    t.stopPropagation();
+    const e = new Date(this.activeDate);
+    e.setMonth(e.getMonth() + 1), this.activeDate = e;
+  }
+  handleTouchStart(t) {
+    t.touches && t.touches.length > 0 && (this.touchStartX = t.touches[0].clientX, this.touchStartY = t.touches[0].clientY);
+  }
+  handleTouchEnd(t) {
+    if (t.changedTouches && t.changedTouches.length > 0) {
+      const e = t.changedTouches[0].clientX, a = t.changedTouches[0].clientY, i = this.touchStartX - e, r = this.touchStartY - a;
+      Math.abs(i) > 50 && Math.abs(i) > Math.abs(r) && (i > 0 ? this.handleNextMonth(t) : this.handlePrevMonth(t));
+    }
+  }
+  getFormattedMonthTitle() {
+    const t = this.activeDate.toLocaleDateString(this.locale || "es", { month: "long", year: "numeric" });
+    return t.charAt(0).toUpperCase() + t.slice(1);
+  }
+  handleDropdownDaySelect(t) {
+    this.dropdownSelectedDateString = t.detail.dateString;
+  }
+  selectDropdownSlot(t) {
+    const e = {
       dateString: this.dropdownSelectedDateString,
-      start: e.displayStart,
-      end: e.displayEnd,
-      hostStart: e.start,
-      hostEnd: e.end
+      start: t.displayStart,
+      end: t.displayEnd,
+      hostStart: t.start,
+      hostEnd: t.end
     };
-    this.selectedRange = { dateString: this.dropdownSelectedDateString, start: e.displayStart, end: e.displayEnd }, this.dispatchEvent(new CustomEvent("booking-selected", { detail: t, bubbles: !0, composed: !0 })), this.dropdownOpen = !1, this.dropdownSelectedDateString = "";
+    this.selectedRange = { dateString: this.dropdownSelectedDateString, start: t.displayStart, end: t.displayEnd }, this.dispatchEvent(new CustomEvent("booking-selected", { detail: e, bubbles: !0, composed: !0 })), this.dropdownOpen = !1, this.dropdownSelectedDateString = "";
   }
   render() {
-    const e = this.selectedRange ? `Reserva: ${this.selectedRange.dateString} (${this.selectedRange.start} - ${this.selectedRange.end})` : "Seleccionar Fecha y Hora", t = this.activeDate.getFullYear(), a = this.activeDate.getMonth(), i = this.dropdownSelectedDateString ? /* @__PURE__ */ new Date(this.dropdownSelectedDateString + "T00:00:00") : null, r = i && this.activeTimezone === "local" ? C(i, this.hostTimezone, "local") : 0, l = i ? this.slots.map((o) => {
-      const h = I(i, o, this.rules), n = U(o, r), c = n.dayShift > 0 ? " (+1d)" : n.dayShift < 0 ? " (-1d)" : "";
+    const t = this.selectedRange ? `Reserva: ${this.selectedRange.dateString} (${this.selectedRange.start} - ${this.selectedRange.end})` : "Seleccionar Fecha y Hora", e = this.activeDate.getFullYear(), a = this.activeDate.getMonth(), i = this.dropdownSelectedDateString ? /* @__PURE__ */ new Date(this.dropdownSelectedDateString + "T00:00:00") : null, r = i && this.activeTimezone === "local" ? I(i, this.hostTimezone, "local") : 0, l = i ? this.slots.map((o) => {
+      const h = C(i, o, this.rules), n = U(o, r), c = n.dayShift > 0 ? " (+1d)" : n.dayShift < 0 ? " (-1d)" : "";
       return {
         ...o,
         displayStart: n.start + c,
@@ -1419,7 +1442,7 @@ let b = class extends O {
     return d`
       <div class="dropdown-container">
         <button class="btn btn-primary dropdown-toggle" @click=${() => this.dropdownOpen = !this.dropdownOpen}>
-          <span>${e}</span> <span>${this.dropdownOpen ? "▲" : "▼"}</span>
+          <span>${t}</span> <span>${this.dropdownOpen ? "▲" : "▼"}</span>
         </button>
 
         ${this.dropdownOpen ? d`
@@ -1441,19 +1464,45 @@ let b = class extends O {
                         `)}
                       </div>
                     ` : d`
-                      <div style="font-weight:600; font-size:0.9rem; text-align:center; color: var(--glatam-text);">Selecciona un Día</div>
-                      <glatam-calendar-month-view
-                        .days=${A(t, a, this.rules, this.slots, this.startOfWeekDay)}
-                        .locale=${this.locale}
-                        .startOfWeekDay=${this.startOfWeekDay}
-                        .role=${this.role}
-                        size="small"
-                        .minDate=${this.minDate}
-                        .maxDate=${this.maxDate}
-                        .showNeighboringMonth=${this.showNeighboringMonth}
-                        .tileClassName=${this.tileClassName}
-                        @day-select=${this.handleDropdownDaySelect}
-                      ></glatam-calendar-month-view>
+                      <div class="mini-calendar-header">
+                        <button
+                          type="button"
+                          class="mini-nav-btn"
+                          aria-label="Mes anterior"
+                          @click=${this.handlePrevMonth}
+                        >
+                          &lt;
+                        </button>
+                        <span class="mini-month-title">
+                          ${this.getFormattedMonthTitle()}
+                        </span>
+                        <button
+                          type="button"
+                          class="mini-nav-btn"
+                          aria-label="Mes siguiente"
+                          @click=${this.handleNextMonth}
+                        >
+                          &gt;
+                        </button>
+                      </div>
+                      <div
+                        class="mini-calendar-touch-wrapper"
+                        @touchstart=${this.handleTouchStart}
+                        @touchend=${this.handleTouchEnd}
+                      >
+                        <glatam-calendar-month-view
+                          .days=${P(e, a, this.rules, this.slots, this.startOfWeekDay)}
+                          .locale=${this.locale}
+                          .startOfWeekDay=${this.startOfWeekDay}
+                          .role=${this.role}
+                          size="small"
+                          .minDate=${this.minDate}
+                          .maxDate=${this.maxDate}
+                          .showNeighboringMonth=${this.showNeighboringMonth}
+                          .tileClassName=${this.tileClassName}
+                          @day-select=${this.handleDropdownDaySelect}
+                        ></glatam-calendar-month-view>
+                      </div>
                     `}
               </div>
             ` : ""}
@@ -1462,9 +1511,9 @@ let b = class extends O {
   }
 };
 b.styles = [
-  P,
+  A,
   W,
-  E`
+  M`
       :host {
         display: inline-block;
         background: transparent;
@@ -1473,57 +1522,98 @@ b.styles = [
         box-shadow: none;
         width: 100%;
       }
+
+      .mini-calendar-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 4px 8px;
+        margin-bottom: 8px;
+        user-select: none;
+      }
+
+      .mini-month-title {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--glatam-text);
+        text-transform: capitalize;
+        letter-spacing: -0.01em;
+      }
+
+      .mini-nav-btn {
+        background: transparent;
+        border: 1px solid var(--glatam-border);
+        border-radius: 8px;
+        color: var(--glatam-text);
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        font-size: 0.75rem;
+        transition: background-color var(--glatam-transition-fast), border-color var(--glatam-transition-fast), transform var(--glatam-transition-fast);
+      }
+
+      .mini-nav-btn:hover:not(:disabled) {
+        background-color: var(--glatam-surface);
+        border-color: var(--glatam-text-secondary);
+      }
+
+      .mini-nav-btn:active:not(:disabled) {
+        transform: scale(0.95);
+      }
     `
 ];
-v([
+y([
   s({ type: String })
 ], b.prototype, "role", 2);
-v([
+y([
   s({ type: String })
 ], b.prototype, "locale", 2);
-v([
+y([
   s({ type: Number })
 ], b.prototype, "startOfWeekDay", 2);
-v([
+y([
   s({ type: Array })
 ], b.prototype, "rules", 2);
-v([
+y([
   s({ type: Object })
 ], b.prototype, "selectedRange", 2);
-v([
+y([
   s({ type: String, reflect: !0 })
 ], b.prototype, "size", 2);
-v([
+y([
   s({ type: String })
 ], b.prototype, "hostTimezone", 2);
-v([
+y([
   s({ type: String })
 ], b.prototype, "activeTimezone", 2);
-v([
+y([
   s({ type: String })
 ], b.prototype, "minDate", 2);
-v([
+y([
   s({ type: String })
 ], b.prototype, "maxDate", 2);
-v([
+y([
   s({ type: Boolean })
 ], b.prototype, "showNeighboringMonth", 2);
-v([
+y([
   s({ attribute: !1 })
 ], b.prototype, "tileClassName", 2);
-v([
+y([
   s({ type: Array })
 ], b.prototype, "slots", 2);
-v([
+y([
   u()
 ], b.prototype, "activeDate", 2);
-v([
+y([
   u()
 ], b.prototype, "dropdownOpen", 2);
-v([
+y([
   u()
 ], b.prototype, "dropdownSelectedDateString", 2);
-b = v([
+b = y([
   T("glatam-calendar-mini")
 ], b);
 export {
@@ -1537,5 +1627,5 @@ export {
   nt as formatISODate,
   dt as isTimeBlocked,
   ct as parseISODate,
-  P as variablesStyles
+  A as variablesStyles
 };