@glatam/calendar-ui 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,132 @@
+# 📖 API Reference Guide: @glatam/calendar-ui
+
+This is the official technical documentation for the `@glatam/calendar-ui` package. Designed under modern, minimalist (Apple-style), and high-performance standards.
+
+---
+
+## ⚙️ 1. API Reference: `<glatam-calendar>`
+
+The primary calendar component displaying the full grid.
+
+### Properties and Attributes (Props)
+
+| JS Property | HTML Attribute | Type | Default | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `role` | `role` | `'provider' \| 'buyer'` | `'provider'` | `provider` allows editing availability; `buyer` disables blocked slots and enables client booking. |
+| `view` | `view` | `'month' \| 'week' \| 'day'` | `'month'` | Sets the active view. |
+| `locale` | `locale` | `string` | `'es'` | Locale code (IETF tag) for native header and date formatting. |
+| `startOfWeekDay` | `start-of-week-day` | `number` | `0` | First day of the week (`0` = Sunday, `1` = Monday). |
+| `rules` | — | `BlockingRule[]` | `[]` | Array of blocking rules (e.g., weekends, holidays). *JS only.* |
+| `slots` | — | `TimeSlot[]` | *(9am to 6pm)* | Array of daily operating hour slots. *JS only.* |
+| `minDate` | `min-date` | `string` | `''` | Minimum selectable date in `YYYY-MM-DD` format. |
+| `maxDate` | `max-date` | `string` | `''` | Maximum selectable date in `YYYY-MM-DD` format. |
+| `showNeighboringMonth`| `show-neighboring-month`| `boolean` | `true` | If `false`, hides neighboring month dates. |
+| `hostTimezone` | `host-timezone` | `string` | `'America/Bogota'` | Timezone of the host or experience venue. |
+| `activeTimezone` | `active-timezone` | `'host' \| 'local'` | `'local'` | `'local'` automatically shifts grid slots to the buyer's local time. |
+| `tileClassName` | — | `Function` | `null` | Callback `({ date, dateString }) => string` to add classes to monthly cells. |
+
+### Events
+
+| Event Name | Detail Payload (`event.detail`) | Description |
+| :--- | :--- | :--- |
+| **`booking-selected`** | `{ dateString, start, end, hostStart, hostEnd }` | Fired when a buyer clicks an available slot. Outputs client local and host reference times. |
+| **`rules-changed`** | `{ rules: BlockingRule[] }` | Fired when the provider saves a block or task. |
+| **`date-selected`** | `{ dateString: string }` | Fired when a month cell is clicked. |
+| **`range-selected`** | `{ dateString: string, start: string, end: string }` | Fired when dragging a slot range in week/day views. |
+
+---
+
+## ⚙️ 2. API Reference: `<glatam-calendar-mini>`
+
+The inline checkout popup calendar component.
+
+### Properties and Attributes (Props)
+
+| JS Property | HTML Attribute | Type | Default | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `role` | `role` | `'provider' \| 'buyer'` | `'buyer'` | Defaults to buyer mode for quick selection. |
+| `locale` | `locale` | `string` | `'es'` | Regional language code. |
+| `rules` | — | `BlockingRule[]` | `[]` | Availability rules loaded from your database. |
+| `slots` | — | `TimeSlot[]` | *(9am to 6pm)* | Daily operating hour slots. |
+| `minDate` | `min-date` | `string` | `''` | Minimum selectable date (`YYYY-MM-DD`). |
+| `maxDate` | `max-date` | `string` | `''` | Maximum selectable date (`YYYY-MM-DD`). |
+| `hostTimezone` | `host-timezone` | `string` | `'America/Bogota'` | Host timezone reference. |
+| `activeTimezone` | `active-timezone` | `'host' \| 'local'` | `'local'` | Converts slot times to client local time when set to `'local'`. |
+
+### Events
+
+| Event Name | Detail Payload (`event.detail`) | Description |
+| :--- | :--- | :--- |
+| **`booking-selected`** | `{ dateString, start, end, hostStart, hostEnd }` | Fired when a slot is booked. |
+
+---
+
+## 🎨 3. CSS Custom Properties and Shadow Parts
+
+### CSS Variables (Theming)
+Customize the calendar theme by declaring these variables in your global CSS stylesheet:
+
+```css
+glatam-calendar, glatam-calendar-mini {
+  --glatam-primary: #0071e3;            /* Apple Blue branding color */
+  --glatam-primary-hover: #0077ed;
+  --glatam-bg: #ffffff;                 /* Grid cell background */
+  --glatam-surface: #f5f5f7;            /* Header and button background */
+  --glatam-border: #e5e5ea;             /* Grid line color */
+  --glatam-text: #1d1d1f;               /* Primary text color */
+  --glatam-text-secondary: #86868b;     /* Subtexts and captions */
+  --glatam-grid-border-radius: 12px;
+}
+```
+
+### CSS Shadow Parts
+Target month cells from your global CSS using the `::part()` selector.
+
+Example to highlight Fridays with a green border:
+```css
+glatam-calendar::part(casual-friday), glatam-calendar-mini::part(casual-friday) {
+  border: 2px solid #34c759 !important;
+  background-color: rgba(52, 199, 89, 0.05);
+}
+```
+
+---
+
+## 💻 4. Integration Examples
+
+### A) HTML + Vanilla JS
+```html
+<glatam-calendar id="calendar" role="provider" min-date="2026-07-01"></glatam-calendar>
+
+<script type="module">
+  import '@glatam/calendar-ui';
+  const cal = document.getElementById('calendar');
+  cal.rules = [
+    { id: '1', type: 'weekly', daysOfWeek: [0, 6], description: 'Closed on Weekends' }
+  ];
+  cal.addEventListener('rules-changed', (e) => {
+    console.log('Saved availability rules:', e.detail.rules);
+  });
+</script>
+```
+
+### B) React 18 / Next.js
+*For Next.js App Router, add `"use client"` at the top of the file.*
+
+```tsx
+import { useEffect, useRef } from 'react';
+import '@glatam/calendar-ui';
+
+export default function ReactCalendar() {
+  const ref = useRef<any>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.rules = [{ id: 't1', type: 'date-range', startDate: '2026-07-25', description: 'Daily Scrum' }];
+      ref.current.tileClassName = ({ date }: { date: Date }) => date.getDay() === 5 ? 'casual-friday' : '';
+    }
+  }, []);
+
+  return <glatam-calendar ref={ref} role="buyer" locale="en" min-date="2026-07-18" />;
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glatam/calendar-ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Componente web UI para el calendario @glatam/calendar",
   "type": "module",
   "author": "Santiago Hernández Saldarriaga",
@@ -14,12 +14,29 @@
       "import": "./dist/glatam-calendar.js"
     }
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/santiagoshs/glatam-calendar.git"
+  },
+  "bugs": {
+    "url": "https://github.com/santiagoshs/glatam-calendar/issues"
+  },
+  "homepage": "https://github.com/santiagoshs/glatam-calendar#readme",
+  "keywords": [
+    "calendar",
+    "booking-system",
+    "lit-element",
+    "web-components",
+    "timezone-safety",
+    "availability-scheduler",
+    "ssr-compatible"
+  ],
   "scripts": {
     "build": "vite build",
     "dev": "vite"
   },
   "dependencies": {
-    "@glatam/calendar-core": "^1.0.0",
+    "@glatam/calendar-core": "^1.0.2",
     "lit": "^3.1.2"
   },
   "devDependencies": {

package/src/components/calendar-modal.ts

@@ -1,160 +1,11 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { BlockingRule } from '@glatam/calendar-core';
+import { modalStyles } from '../styles/calendar-modal.css.js';
 
 @customElement('glatam-calendar-modal')
 export class GlatamCalendarModal extends LitElement {
-  static styles = css`
-    .modal-overlay {
-      position: fixed;
-      top: 0; left: 0; right: 0; bottom: 0;
-      background: rgba(0, 0, 0, 0.35);
-      backdrop-filter: blur(10px);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 1000;
-      opacity: 0; pointer-events: none;
-      transition: opacity var(--glatam-transition-normal);
-    }
-    .modal-overlay.open {
-      opacity: 1; pointer-events: auto;
-    }
-    .modal-content {
-      background: var(--glatam-bg);
-      color: var(--glatam-text);
-      border-radius: 24px;
-      padding: 28px;
-      width: 90%;
-      max-width: 400px;
-      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
-      border: 1px solid var(--glatam-border);
-      transform: scale(0.92) translateY(10px);
-      transition: transform var(--glatam-transition-normal), background-color var(--glatam-transition-normal);
-      display: flex;
-      flex-direction: column;
-      gap: 18px;
-    }
-    .modal-overlay.open .modal-content {
-      transform: scale(1) translateY(0);
-    }
-    h3 { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
-    .form-group { display: flex; flex-direction: column; gap: 6px; }
-    label { font-size: 0.8rem; color: var(--glatam-text-secondary); font-weight: 600; }
-    input[type="text"] {
-      background: var(--glatam-surface);
-      border: 1px solid var(--glatam-border);
-      border-radius: 10px;
-      padding: 10px 14px;
-      color: var(--glatam-text);
-      font-family: inherit;
-      font-size: 0.9rem;
-      outline: none;
-      transition: border-color var(--glatam-transition-fast);
-    }
-    input[type="text"]:focus {
-      border-color: var(--glatam-primary);
-    }
-    .switch-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 4px 0;
-    }
-    
-    /* Apple Switch Style */
-    .switch {
-      position: relative;
-      display: inline-block;
-      width: 46px;
-      height: 26px;
-    }
-    .switch input { opacity: 0; width: 0; height: 0; }
-    .slider {
-      position: absolute;
-      cursor: pointer;
-      top: 0; left: 0; right: 0; bottom: 0;
-      background-color: var(--glatam-border);
-      transition: .25s cubic-bezier(0.16, 1, 0.3, 1);
-      border-radius: 26px;
-    }
-    .slider:before {
-      position: absolute;
-      content: "";
-      height: 20px;
-      width: 20px;
-      left: 3px;
-      bottom: 3px;
-      background-color: white;
-      transition: .25s cubic-bezier(0.16, 1, 0.3, 1);
-      border-radius: 50%;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-    }
-    input:checked + .slider {
-      background-color: var(--glatam-primary);
-    }
-    input:checked + .slider:before {
-      transform: translateX(20px);
-    }
-
-    .days-grid {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: 6px;
-      margin-top: 4px;
-    }
-    .day-btn {
-      width: 36px;
-      height: 36px;
-      margin: 0 auto;
-      border-radius: 50%;
-      border: 1px solid var(--glatam-border);
-      background: var(--glatam-bg);
-      color: var(--glatam-text);
-      font-size: 0.8rem;
-      font-weight: 600;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background-color var(--glatam-transition-fast), color var(--glatam-transition-fast), border-color var(--glatam-transition-fast);
-    }
-    .day-btn:hover {
-      background-color: var(--glatam-surface);
-    }
-    .day-btn.selected {
-      background: var(--glatam-primary);
-      color: var(--glatam-text-light);
-      border-color: var(--glatam-primary);
-    }
-    .btn-actions { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; }
-    .btn {
-      padding: 10px 18px;
-      border-radius: 20px;
-      font-size: 0.875rem;
-      font-weight: 600;
-      cursor: pointer;
-      border: none;
-      transition: opacity var(--glatam-transition-fast), transform var(--glatam-transition-fast);
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .btn:active { transform: scale(0.97); }
-    .btn-cancel { background: transparent; color: var(--glatam-text); border: 1px solid var(--glatam-border); }
-    .btn-cancel:hover { background-color: var(--glatam-surface); }
-    .btn-save { background: var(--glatam-primary); color: var(--glatam-text-light); }
-    .btn-save:hover { opacity: 0.95; }
-    .btn-danger {
-      background: rgba(255, 69, 58, 0.12);
-      color: #ff453a;
-      margin-right: auto;
-    }
-    .btn-danger:hover {
-      background: rgba(255, 69, 58, 0.18);
-    }
-  `;
+  static styles = modalStyles;
 
   @property({ type: Boolean }) open = false;
   @property({ type: String }) dateString = '';
@@ -184,13 +35,28 @@ export class GlatamCalendarModal extends LitElement {
     }
   }
 
+  updated(changedProperties: Map<string, any>) {
+    if (changedProperties.has('open')) {
+      const dialog = this.shadowRoot?.getElementById('booking-dialog') as HTMLDialogElement;
+      if (dialog) {
+        if (this.open) {
+          if (!dialog.open) dialog.showModal();
+        } else {
+          if (dialog.open) dialog.close();
+        }
+      }
+    }
+  }
+
+  private handleDialogClose() {
+    if (this.open) {
+      this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+    }
+  }
+
   private toggleDay(dayNum: number) {
     const idx = this.selectedDays.indexOf(dayNum);
-    if (idx > -1) {
-      this.selectedDays = this.selectedDays.filter(d => d !== dayNum);
-    } else {
-      this.selectedDays = [...this.selectedDays, dayNum];
-    }
+    this.selectedDays = idx > -1 ? this.selectedDays.filter(d => d !== dayNum) : [...this.selectedDays, dayNum];
   }
 
   private handleSave() {
@@ -223,7 +89,7 @@ export class GlatamCalendarModal extends LitElement {
       : this.dateString;
 
     return html`
-      <div class=${classMap({ 'modal-overlay': true, 'open': this.open })}>
+      <dialog id="booking-dialog" @close=${this.handleDialogClose}>
         <div class="modal-content">
           <h3>${this.existingRule ? 'Gestionar Bloqueo' : 'Crear Bloqueo'}</h3>
           
@@ -291,7 +157,7 @@ export class GlatamCalendarModal extends LitElement {
             <button class="btn btn-save" @click=${this.handleSave}>Guardar</button>
           </div>
         </div>
-      </div>
+      </dialog>
     `;
   }
 }

package/src/glatam-calendar.ts

@@ -22,29 +22,18 @@ const DEFAULT_SLOTS: TimeSlot[] = [
 export class GlatamCalendar extends LitElement {
   static styles = [variablesStyles, calendarStyles];
 
-  @property({ type: String }) role = 'provider';
-  @property({ type: String, reflect: true }) size = 'medium';
-  @property({ type: String }) view: 'month' | 'week' | 'day' = 'month';
-  @property({ type: String }) locale = 'es';
-  @property({ type: Number }) startOfWeekDay = 0;
-  @property({ type: Array }) rules: BlockingRule[] = [];
-  @property({ type: Array }) selectedDates: string[] = [];
-  @property({ type: Object }) selectedRange: { dateString: string; start: string; end: string } | null = null;
+  @property({ type: String }) role = 'provider'; @property({ type: String, reflect: true }) size = 'medium';
+  @property({ type: String }) view: 'month' | 'week' | 'day' = 'month'; @property({ type: String }) locale = 'es';
+  @property({ type: Number }) startOfWeekDay = 0; @property({ type: Array }) rules: BlockingRule[] = [];
+  @property({ type: Array }) selectedDates: string[] = []; @property({ type: Object }) selectedRange: { dateString: string; start: string; end: string } | null = null;
   @property({ type: String }) hostTimezone = 'America/Bogota'; @property({ type: String }) activeTimezone = 'local';
-  @property({ type: Array }) slots: TimeSlot[] = DEFAULT_SLOTS;
-  @property({ type: String }) minDate = ''; @property({ type: String }) maxDate = '';
-  @property({ type: Boolean }) showNeighboringMonth = true;
-  @property({ attribute: false }) tileClassName: ((data: { date: Date; dateString: string }) => string) | null = null;
-
-  @state() private activeDate = new Date();
-  @state() private localRules: BlockingRule[] = [];
-  @state() private darkMode = false;
-  @state() private modalOpen = false;
-  @state() private modalDateString = '';
-  @state() private modalStartTime = '';
-  @state() private modalEndTime = '';
-  @state() private modalIsRange = false;
-  @state() private modalExistingRule: BlockingRule | null = null;
+  @property({ type: Array }) slots: TimeSlot[] = DEFAULT_SLOTS; @property({ type: String }) minDate = ''; @property({ type: String }) maxDate = '';
+  @property({ type: Boolean }) showNeighboringMonth = true; @property({ attribute: false }) tileClassName: ((data: { date: Date; dateString: string }) => string) | null = null;
+
+  @state() private activeDate = new Date(); @state() private localRules: BlockingRule[] = [];
+  @state() private darkMode = false; @state() private modalOpen = false;
+  @state() private modalDateString = ''; @state() private modalStartTime = ''; @state() private modalEndTime = '';
+  @state() private modalIsRange = false; @state() private modalExistingRule: BlockingRule | null = null;
 
   firstUpdated() { this.darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; this.localRules = [...this.rules]; }
   willUpdate(changedProps: Map<string, any>) { if (changedProps.has('rules') && this.rules.length > 0 && this.localRules.length === 0) this.localRules = [...this.rules]; }
@@ -77,6 +66,10 @@ export class GlatamCalendar extends LitElement {
 
   private handleRangeSelect(e: CustomEvent<{ dateString: string; start: string; end: string }>) {
     const { dateString, start, end } = e.detail, offset = this.activeTimezone === 'local' ? getTimezoneOffsetDiff(this.activeDate, this.hostTimezone, 'local') : 0;
+    const todayStr = new Date().toISOString().split('T')[0];
+    const limitMinDate = this.minDate || (this.role === 'buyer' ? todayStr : '');
+    if (this.role === 'buyer' && limitMinDate && dateString < limitMinDate) return;
+
     const displaySlots = this.getDisplaySlots(offset), startIdx = displaySlots.findIndex(s => s.start === start), endIdx = displaySlots.findIndex(s => s.end === end);
     const hostStart = this.slots[startIdx]?.start || start, hostEnd = this.slots[endIdx]?.end || end;
     if (this.role === 'buyer') {
@@ -87,8 +80,12 @@ export class GlatamCalendar extends LitElement {
     this.openModal(dateString, hostStart, hostEnd, true, null);
   }
 
-  private handleSlotClick(e: CustomEvent<{ dateString: string; slot: TimeSlot }>) {
+  private handleSlotClick(e: CustomEvent<{ dateString: string; slot: TimeSlot & { isBlocked?: boolean } }>) {
     const { dateString, slot } = e.detail, date = new Date(dateString + 'T00:00:00'), offset = this.activeTimezone === 'local' ? getTimezoneOffsetDiff(this.activeDate, this.hostTimezone, 'local') : 0;
+    const todayStr = new Date().toISOString().split('T')[0];
+    const limitMinDate = this.minDate || (this.role === 'buyer' ? todayStr : '');
+    if (this.role === 'buyer' && (slot.isBlocked || (limitMinDate && dateString < limitMinDate))) return;
+
     const displaySlots = this.getDisplaySlots(offset), idx = displaySlots.findIndex(s => s.start === slot.start), hostSlot = this.slots[idx] || slot;
     if (this.role === 'buyer') {
       this.selectedRange = { dateString, start: slot.start, end: slot.end };
@@ -177,7 +174,7 @@ export class GlatamCalendar extends LitElement {
 
       <div class="calendar-body">
         ${this.view === 'month'
-          ? html`<glatam-calendar-month-view .days=${generateMonthDays(y, m, this.localRules, this.slots, this.startOfWeekDay)} .locale=${this.locale} .startOfWeekDay=${this.startOfWeekDay} .role=${this.role} .size=${this.size} .minDate=${this.minDate} .maxDate=${this.maxDate} .showNeighboringMonth=${this.showNeighboringMonth} .tileClassName=${this.tileClassName} @day-select=${this.handleDaySelect}></glatam-calendar-month-view>`
+          ? html`<glatam-calendar-month-view .days=${generateMonthDays(y, m, this.localRules, this.slots, this.startOfWeekDay)} .locale=${this.locale} .startOfWeekDay=${this.startOfWeekDay} .role=${this.role} .size=${this.size} .minDate=${this.minDate || (this.role === 'buyer' ? 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'
           ? html`<glatam-calendar-week-view .days=${mapDays(generateWeekDays(this.activeDate, this.localRules, this.slots, this.startOfWeekDay))} .slots=${displaySlots} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-week-view>`
           : html`<glatam-calendar-day-view .day=${mapDays(generateWeekDays(this.activeDate, this.localRules, this.slots, this.startOfWeekDay)).find(d => d.dateString === formatISODate(this.activeDate)) || null} .slots=${displaySlots} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-day-view>`}

package/src/styles/calendar-modal.css.ts

@@ -0,0 +1,158 @@
+import { css } from 'lit';
+
+export const modalStyles = css`
+  dialog {
+    background: transparent;
+    border: none;
+    padding: 0;
+    overflow: visible;
+    outline: none;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+  dialog::backdrop {
+    background: rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+  .modal-content {
+    background: var(--glatam-bg);
+    color: var(--glatam-text);
+    border-radius: 24px;
+    padding: 28px;
+    width: 90vw;
+    max-width: 400px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
+    border: 1px solid var(--glatam-border);
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    box-sizing: border-box;
+    animation: zoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+  @keyframes zoomIn {
+    from {
+      transform: scale(0.92) translateY(10px);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1) translateY(0);
+      opacity: 1;
+    }
+  }
+  h3 { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
+  .form-group { display: flex; flex-direction: column; gap: 6px; }
+  label { font-size: 0.8rem; color: var(--glatam-text-secondary); font-weight: 600; }
+  input[type="text"] {
+    background: var(--glatam-surface);
+    border: 1px solid var(--glatam-border);
+    border-radius: 10px;
+    padding: 10px 14px;
+    color: var(--glatam-text);
+    font-family: inherit;
+    font-size: 0.9rem;
+    outline: none;
+    transition: border-color var(--glatam-transition-fast);
+  }
+  input[type="text"]:focus {
+    border-color: var(--glatam-primary);
+  }
+  .switch-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 0;
+  }
+  
+  /* Apple Switch Style */
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 46px;
+    height: 26px;
+  }
+  .switch input { opacity: 0; width: 0; height: 0; }
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: var(--glatam-border);
+    transition: .25s cubic-bezier(0.16, 1, 0.3, 1);
+    border-radius: 26px;
+  }
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 20px;
+    width: 20px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: .25s cubic-bezier(0.16, 1, 0.3, 1);
+    border-radius: 50%;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  }
+  input:checked + .slider {
+    background-color: var(--glatam-primary);
+  }
+  input:checked + .slider:before {
+    transform: translateX(20px);
+  }
+
+  .days-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 6px;
+    margin-top: 4px;
+  }
+  .day-btn {
+    width: 36px;
+    height: 36px;
+    margin: 0 auto;
+    border-radius: 50%;
+    border: 1px solid var(--glatam-border);
+    background: var(--glatam-bg);
+    color: var(--glatam-text);
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color var(--glatam-transition-fast), color var(--glatam-transition-fast), border-color var(--glatam-transition-fast);
+  }
+  .day-btn:hover {
+    background-color: var(--glatam-surface);
+  }
+  .day-btn.selected {
+    background: var(--glatam-primary);
+    color: var(--glatam-text-light);
+    border-color: var(--glatam-primary);
+  }
+  .btn-actions { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; }
+  .btn {
+    padding: 10px 18px;
+    border-radius: 20px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    border: none;
+    transition: opacity var(--glatam-transition-fast), transform var(--glatam-transition-fast);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .btn:active { transform: scale(0.97); }
+  .btn-cancel { background: transparent; color: var(--glatam-text); border: 1px solid var(--glatam-border); }
+  .btn-cancel:hover { background-color: var(--glatam-surface); }
+  .btn-save { background: var(--glatam-primary); color: var(--glatam-text-light); }
+  .btn-save:hover { opacity: 0.95; }
+  .btn-danger {
+    background: rgba(255, 69, 58, 0.12);
+    color: #ff453a;
+    margin-right: auto;
+  }
+  .btn-danger:hover {
+    background: rgba(255, 69, 58, 0.18);
+  }
+`;

package/src/views/month-view.ts

@@ -62,7 +62,8 @@ export class GlatamCalendarMonthView extends LitElement {
   }
 
   private handleDayClick(day: CalendarDay) {
-    if (this.role === 'buyer' && day.isBlocked) return;
+    const isDisabled = (this.minDate && day.dateString < this.minDate) || (this.maxDate && day.dateString > this.maxDate);
+    if (this.role === 'buyer' && (day.isBlocked || isDisabled)) return;
     this.dispatchEvent(new CustomEvent('day-select', {
       detail: { dateString: day.dateString, isBlocked: day.isBlocked },
       bubbles: true, composed: true

package/dist/components/calendar-modal.d.ts

@@ -1,22 +0,0 @@
-import { LitElement } from 'lit';
-import { BlockingRule } from '@glatam/calendar-core';
-
-export declare class GlatamCalendarModal extends LitElement {
-    static styles: import('lit').CSSResult;
-    open: boolean;
-    dateString: string;
-    startTime: string;
-    endTime: string;
-    isRange: boolean;
-    existingRule: BlockingRule | null;
-    private description;
-    private blockAllDay;
-    private isRecurring;
-    private selectedDays;
-    willUpdate(changedProperties: Map<string, any>): void;
-    private toggleDay;
-    private handleSave;
-    private handleDelete;
-    render(): import('lit-html').TemplateResult<1>;
-}
-//# sourceMappingURL=calendar-modal.d.ts.map

package/dist/components/calendar-modal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"calendar-modal.d.ts","sourceRoot":"","sources":["../../src/components/calendar-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,qBACa,mBAAoB,SAAQ,UAAU;IACjD,MAAM,CAAC,MAAM,0BAqJX;IAE2B,IAAI,UAAS;IACd,UAAU,SAAM;IAChB,SAAS,SAAM;IACf,OAAO,SAAM;IACZ,OAAO,UAAS;IACjB,YAAY,EAAE,YAAY,GAAG,IAAI,CAAQ;IAE5D,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,WAAW,CAAQ;IAC3B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,YAAY,CAAgB;IAE7C,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAgB9C,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,YAAY;IAUpB,MAAM;CA8EP"}