@vmz/ui 0.2.3 → 0.2.4

package/src/components/DatePicker.vmz

@@ -1,101 +1,78 @@
 <template>
-  <div
-      :class="'vmz-ui-date-picker' + (open ? ' is-opened' : '')"
-      data-vmz-ui="date-picker"
-      :data-mode="mode"
-      :data-invalid="invalidAttr"
-    >
-      <label v-if="label" class="vmz-ui-date-picker__label" :for="controlId">{{ label }}</label>
-      <button
-        type="button"
-        :id="controlId"
-        class="vmz-ui-date-picker__control"
-        :disabled="disabled"
-        aria-haspopup="dialog"
-        :aria-expanded="open ? 'true' : 'false'"
-        :aria-controls="panelId"
-        :aria-invalid="error ? 'true' : 'false'"
-        :aria-describedby="describedBy"
-        @click="toggle"
-        :onKeyDown="onTriggerKeyDown"
-      >
-        <span class="vmz-ui-date-picker__value" data-vmz-date="value">{{ displayLabel }}</span>
-        <span class="vmz-ui-date-picker__chev" aria-hidden="true"></span>
-      </button>
-      <div
-        v-if="open"
-        :id="panelId"
-        class="vmz-ui-date-picker__panel"
-        role="dialog"
-        aria-modal="false"
-        :aria-label="panelLabel"
-        tabindex="-1"
-        data-vmz-overlay="date-picker"
-        data-vmz-overlay-owner="date-picker"
-        data-vmz-focus="enter"
-        data-vmz-date="panel"
-        :onKeyDown="onPanelKeyDown"
-      >
-        <div class="vmz-ui-date-picker__monthbar">
-          <button
-            type="button"
-            class="vmz-ui-date-picker__nav"
-            data-vmz-date="prev"
-            aria-label="Previous month"
-            @click="prevMonth"
-          >‹</button>
-          <p class="vmz-ui-date-picker__month" data-vmz-date="month">{{ monthLabel }}</p>
-          <button
-            type="button"
-            class="vmz-ui-date-picker__nav"
-            data-vmz-date="next"
-            aria-label="Next month"
-            @click="nextMonth"
-          >›</button>
+    <div data-vmz-ui="date-picker" :data-mode="mode" :data-invalid="invalidAttr" :class='"vmz-ui-date-picker" + (open ? " is-opened" : "")'>
+        <label v-if="label" :for="controlId" class="vmz-ui-date-picker__label">
+            {{ label }}
+        </label>
+        <button type="button" :id="controlId" :disabled="disabled" aria-haspopup="dialog" :aria-expanded='open ? "true" : "false"' :aria-controls="panelId" :aria-invalid='error ? "true" : "false"' :aria-describedby="describedBy" @click="toggle" :onKeyDown="onTriggerKeyDown" class="vmz-ui-date-picker__control">
+            <span data-vmz-date="value" class="vmz-ui-date-picker__value">
+                {{ displayLabel }}
+            </span>
+            <span aria-hidden="true" class="vmz-ui-date-picker__chev" />
+        </button>
+        <div v-if="open" :id="panelId" role="dialog" aria-modal="false" :aria-label="panelLabel" tabindex="-1" data-vmz-overlay="date-picker" data-vmz-overlay-owner="date-picker" data-vmz-focus="enter" data-vmz-date="panel" :onKeyDown="onPanelKeyDown" class="vmz-ui-date-picker__panel">
+            <div class="vmz-ui-date-picker__monthbar">
+                <button type="button" data-vmz-date="prev" aria-label="Previous month" @click="prevMonth" class="vmz-ui-date-picker__nav">
+                    ‹
+                </button>
+                <p data-vmz-date="month" class="vmz-ui-date-picker__month">
+                    {{ monthLabel }}
+                </p>
+                <button type="button" data-vmz-date="next" aria-label="Next month" @click="nextMonth" class="vmz-ui-date-picker__nav">
+                    ›
+                </button>
+            </div>
+            <div aria-hidden="true" class="vmz-ui-date-picker__weekdays">
+                <span>
+                    Mo
+                </span>
+                <span>
+                    Tu
+                </span>
+                <span>
+                    We
+                </span>
+                <span>
+                    Th
+                </span>
+                <span>
+                    Fr
+                </span>
+                <span>
+                    Sa
+                </span>
+                <span>
+                    Su
+                </span>
+            </div>
+            <div role="grid" :aria-labelledby="panelId" class="vmz-ui-date-picker__grid">
+                <button v-for="day in days" :key="day.key" type="button" role="gridcell" :data-vmz-date-iso="day.iso" :aria-selected='day.selected ? "true" : "false"' :aria-disabled='day.disabled ? "true" : "false"' :disabled="day.disabled" @click="onDayClick" :class='"vmz-ui-date-picker__day" + (day.inMonth ? "" : " is-outside") + (day.selected ? " is-on" : "") + (day.inRange ? " is-in-range" : "") + (day.rangeEdge ? " is-range-edge" : "") + (day.disabled ? " is-disabled" : "")'>
+                    {{ day.label }}
+                </button>
+            </div>
         </div>
-        <div class="vmz-ui-date-picker__weekdays" aria-hidden="true">
-          <span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span><span>Su</span>
-        </div>
-        <div class="vmz-ui-date-picker__grid" role="grid" :aria-labelledby="panelId">
-          <button
-            v-for="day in days"
-            :key="day.key"
-            type="button"
-            role="gridcell"
-            :class="'vmz-ui-date-picker__day' +
-              (day.inMonth ? '' : ' is-outside') +
-              (day.selected ? ' is-on' : '') +
-              (day.inRange ? ' is-in-range' : '') +
-              (day.rangeEdge ? ' is-range-edge' : '') +
-              (day.disabled ? ' is-disabled' : '')"
-            :data-vmz-date-iso="day.iso"
-            :aria-selected="day.selected ? 'true' : 'false'"
-            :aria-disabled="day.disabled ? 'true' : 'false'"
-            :disabled="day.disabled"
-            @click="onDayClick"
-          >{{ day.label }}</button>
-        </div>
-      </div>
-      <p v-if="description" :id="descriptionId" class="vmz-ui-date-picker__description">{{ description }}</p>
-      <p v-if="error" :id="errorId" class="vmz-ui-date-picker__error" role="alert">{{ error }}</p>
+        <p v-if="description" :id="descriptionId" class="vmz-ui-date-picker__description">
+            {{ description }}
+        </p>
+        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-date-picker__error">
+            {{ error }}
+        </p>
     </div>
 </template>
-
 <style>
-  .vmz-ui-date-picker {
+.vmz-ui-date-picker {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
     max-width: 28rem;
-  }
+}
 
-  .vmz-ui-date-picker__label {
+.vmz-ui-date-picker__label {
     font: inherit;
     font-weight: 600;
-  }
+}
 
-  .vmz-ui-date-picker__control {
+.vmz-ui-date-picker__control {
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
@@ -111,31 +88,31 @@
     color: inherit;
     outline: none;
     cursor: pointer;
-  }
+}
 
-  .vmz-ui-date-picker[data-invalid='true'] .vmz-ui-date-picker__control {
+.vmz-ui-date-picker[data-invalid="true"] .vmz-ui-date-picker__control {
     border-color: var(--vmz-status-danger-accent);
-  }
+}
 
-  .vmz-ui-date-picker__control:focus-visible,
-  .vmz-ui-date-picker.is-opened .vmz-ui-date-picker__control {
+.vmz-ui-date-picker__control:focus-visible,
+.vmz-ui-date-picker.is-opened .vmz-ui-date-picker__control {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-date-picker__control:disabled {
+.vmz-ui-date-picker__control:disabled {
     opacity: 0.55;
     cursor: not-allowed;
-  }
+}
 
-  .vmz-ui-date-picker__value {
+.vmz-ui-date-picker__value {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  }
+}
 
-  .vmz-ui-date-picker__chev {
+.vmz-ui-date-picker__chev {
     flex: 0 0 auto;
     width: 0.45rem;
     height: 0.45rem;
@@ -143,13 +120,13 @@
     border-bottom: 1.5px solid currentColor;
     transform: rotate(45deg) translate(-1px, -2px);
     opacity: 0.7;
-  }
+}
 
-  .vmz-ui-date-picker.is-opened .vmz-ui-date-picker__chev {
+.vmz-ui-date-picker.is-opened .vmz-ui-date-picker__chev {
     transform: rotate(225deg) translate(-1px, -1px);
-  }
+}
 
-  .vmz-ui-date-picker__panel {
+.vmz-ui-date-picker__panel {
     position: absolute;
     z-index: 40;
     top: calc(100% + 0.25rem);
@@ -163,25 +140,25 @@
     color: inherit;
     box-shadow: 0 10px 24px color-mix(in srgb, #000 16%, transparent);
     outline: none;
-  }
+}
 
-  .vmz-ui-date-picker__monthbar {
+.vmz-ui-date-picker__monthbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.5rem;
     margin-bottom: 0.55rem;
-  }
+}
 
-  .vmz-ui-date-picker__month {
+.vmz-ui-date-picker__month {
     margin: 0;
     font: inherit;
     font-weight: 600;
     text-align: center;
     flex: 1 1 auto;
-  }
+}
 
-  .vmz-ui-date-picker__nav {
+.vmz-ui-date-picker__nav {
     flex: 0 0 auto;
     width: 2rem;
     height: 2rem;
@@ -194,15 +171,15 @@
     color: inherit;
     cursor: pointer;
     outline: none;
-  }
+}
 
-  .vmz-ui-date-picker__nav:hover,
-  .vmz-ui-date-picker__nav:focus-visible {
+.vmz-ui-date-picker__nav:hover,
+.vmz-ui-date-picker__nav:focus-visible {
     border-color: var(--vmz-action-primary-background);
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-date-picker__weekdays {
+.vmz-ui-date-picker__weekdays {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 0.15rem;
@@ -210,15 +187,15 @@
     font-size: 0.75rem;
     opacity: 0.7;
     text-align: center;
-  }
+}
 
-  .vmz-ui-date-picker__grid {
+.vmz-ui-date-picker__grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 0.15rem;
-  }
+}
 
-  .vmz-ui-date-picker__day {
+.vmz-ui-date-picker__day {
     aspect-ratio: 1;
     min-height: 2rem;
     font: inherit;
@@ -229,441 +206,469 @@
     color: inherit;
     cursor: pointer;
     outline: none;
-  }
+}
 
-  .vmz-ui-date-picker__day:hover,
-  .vmz-ui-date-picker__day:focus-visible {
+.vmz-ui-date-picker__day:hover,
+.vmz-ui-date-picker__day:focus-visible {
     background: color-mix(in srgb, var(--vmz-action-primary-background) 18%, transparent);
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-date-picker__day.is-outside {
+.vmz-ui-date-picker__day.is-outside {
     opacity: 0.4;
-  }
+}
 
-  .vmz-ui-date-picker__day.is-on {
+.vmz-ui-date-picker__day.is-on {
     background: color-mix(in srgb, var(--vmz-action-primary-background) 28%, transparent);
     font-weight: 600;
-  }
+}
 
-  .vmz-ui-date-picker__day.is-in-range {
+.vmz-ui-date-picker__day.is-in-range {
     background: color-mix(in srgb, var(--vmz-action-primary-background) 14%, transparent);
-  }
+}
 
-  .vmz-ui-date-picker__day.is-range-edge {
+.vmz-ui-date-picker__day.is-range-edge {
     background: color-mix(in srgb, var(--vmz-action-primary-background) 36%, transparent);
     font-weight: 600;
-  }
+}
 
-  .vmz-ui-date-picker__day.is-disabled,
-  .vmz-ui-date-picker__day:disabled {
+.vmz-ui-date-picker__day.is-disabled,
+.vmz-ui-date-picker__day:disabled {
     opacity: 0.35;
     cursor: not-allowed;
     box-shadow: none;
-  }
+}
 
-  .vmz-ui-date-picker__description {
+.vmz-ui-date-picker__description {
     margin: 0;
     opacity: 0.75;
     font-size: 0.9em;
-  }
+}
 
-  .vmz-ui-date-picker__error {
+.vmz-ui-date-picker__error {
     margin: 0;
     color: var(--vmz-status-danger-foreground);
     font-size: 0.9em;
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — DatePicker.
-* Owned calendar overlay (trigger + dialog grid). Never native <input type="date"> popup.
-* Parent owns ISO value (YYYY-MM-DD) via onChange Event-like { target: { value } }.
-* mode=range: parent owns rangeStart + rangeEnd; onChange { target: { value, start, end } }.
-* Not @vmz/ui-scheduler — month grid only; no time / recurrence / resource layout.
-*/
+ * VMZ UI — DatePicker.
+ * Owned calendar overlay (trigger + dialog grid). Never native <input type="date"> popup.
+ * Parent owns ISO value (YYYY-MM-DD) via onChange Event-like { target: { value } }.
+ * mode=range: parent owns rangeStart + rangeEnd; onChange { target: { value, start, end } }.
+ * Not @vmz/ui-scheduler — month grid only; no time / recurrence / resource layout.
+ */
 export default class DatePicker {
-	public label: string = "";
-	public description: string = "";
-	public error: string = "";
-	public value: string = "";
-	/** "date" | "range" */
-	public mode: string = "date";
-	public rangeStart: string = "";
-	public rangeEnd: string = "";
-	public min: string = "";
-	public max: string = "";
-	public disabled: boolean = false;
-	public invalidAttr: string = "false";
-	public controlId: string = "vmz-date";
-	public descriptionId: string = "vmz-date-desc";
-	public errorId: string = "vmz-date-err";
-	public describedBy: string = "";
-	public onInput: ((e: {
-		target: {
-			value: string;
-			start: string;
-			end: string;
-		};
-	}) => void) | null = null;
-	public onChange: ((e: {
-		target: {
-			value: string;
-			start: string;
-			end: string;
-		};
-	}) => void) | null = null;
-	open = false;
-	displayLabel = "—";
-	panelId = "vmz-date-panel";
-	panelLabel = "Choose date";
-	monthLabel = "";
-	viewYear = 0;
-	viewMonth = 0;
-	/** Internal first click while completing a range. */
-	draftStart = "";
-	days: Array<{
-		key: string;
-		iso: string;
-		label: string;
-		inMonth: boolean;
-		selected: boolean;
-		inRange: boolean;
-		rangeEdge: boolean;
-		disabled: boolean;
-	}> = [];
-	_docKeyHandler = null;
-	_docPointerHandler = null;
-	_observer = null;
-	onMount() {
-		this.panelId = `${this.controlId}-panel`;
-		this.syncFromValue(true);
-		if (typeof document === "undefined" || typeof MutationObserver === "undefined") return;
-		const root = this.__vmzDomRoot;
-		if (!root || typeof root.querySelector !== "function") return;
-		this._observer = new MutationObserver(() => this._syncOverlay());
-		this._observer.observe(root, {
-			childList: true,
-			subtree: true
-		});
-	}
-	onDestroy() {
-		if (this._observer) {
-			this._observer.disconnect();
-			this._observer = null;
-		}
-		this._teardownDoc();
-	}
-	syncFromValue(resetView: boolean) {
-		const isRange = String(this.mode) === "range";
-		const parsed = this._parseIso(isRange ? this.rangeStart || this.rangeEnd || this.value : this.value);
-		this._syncDisplay();
-		if (resetView) {
-			const base = parsed || this._todayParts();
-			this.viewYear = base.y;
-			this.viewMonth = base.m;
-		}
-		this._rebuildDays();
-	}
-	_syncDisplay() {
-		if (String(this.mode) === "range") {
-			const a = this._parseIso(this.rangeStart) ? this.rangeStart : "";
-			const b = this._parseIso(this.rangeEnd) ? this.rangeEnd : "";
-			if (a && b) this.displayLabel = `${a} → ${b}`;
-			else if (a) this.displayLabel = `${a} → …`;
-			else this.displayLabel = "—";
-			return;
-		}
-		this.displayLabel = this._parseIso(this.value) ? this.value : "—";
-	}
-	openPanel() {
-		this.draftStart = "";
-		this.syncFromValue(true);
-		this.open = true;
-	}
-	toggle() {
-		if (this.disabled) return;
-		if (this.open) this.close();
-		else this.openPanel();
-	}
-	close() {
-		this.open = false;
-		this.draftStart = "";
-	}
-	prevMonth() {
-		if (this.viewMonth <= 1) {
-			this.viewYear -= 1;
-			this.viewMonth = 12;
-		} else {
-			this.viewMonth -= 1;
-		}
-		this._rebuildDays();
-	}
-	nextMonth() {
-		if (this.viewMonth >= 12) {
-			this.viewYear += 1;
-			this.viewMonth = 1;
-		} else {
-			this.viewMonth += 1;
-		}
-		this._rebuildDays();
-	}
-	choose(iso: string) {
-		if (!iso || this._isOutOfRange(iso)) return;
-		if (String(this.mode) === "range") {
-			if (!this.draftStart) {
-				this.draftStart = iso;
-				this._rebuildDays();
-				return;
-			}
-			let start = this.draftStart;
-			let end = iso;
-			if (end < start) {
-				const t = start;
-				start = end;
-				end = t;
-			}
-			this.draftStart = "";
-			this.close();
-			const ev = { target: {
-				value: `${start}/${end}`,
-				start,
-				end
-			} };
-			this.emit("change", ev);
-			this.emit("input", ev);
-			if (typeof this.onChange === "function") this.onChange(ev);
-			if (typeof this.onInput === "function") this.onInput(ev);
-			return;
-		}
-		this.close();
-		if (iso === this.value) return;
-		const ev = { target: {
-			value: iso,
-			start: iso,
-			end: iso
-		} };
-		this.emit("change", ev);
-		this.emit("input", ev);
-		if (typeof this.onChange === "function") this.onChange(ev);
-		if (typeof this.onInput === "function") this.onInput(ev);
-	}
-	onDayClick(ev: Event) {
-		const t = ev?.target as HTMLElement | null;
-		const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-date-iso]") as HTMLElement | null : ev?.currentTarget as HTMLElement | null ?? null;
-		const iso = el && typeof el.getAttribute === "function" ? el.getAttribute("data-vmz-date-iso") : null;
-		if (iso) this.choose(iso);
-	}
-	onTriggerKeyDown(ev: KeyboardEvent) {
-		if (!ev || this.disabled) return;
-		if ((ev.key === "ArrowDown" || ev.key === "Enter" || ev.key === " ") && !this.open) {
-			ev.preventDefault();
-			this.openPanel();
-		} else if (ev.key === "Escape" && this.open) {
-			ev.preventDefault();
-			this.close();
-		}
-	}
-	onPanelKeyDown(ev: KeyboardEvent) {
-		if (!ev) return;
-		if (ev.key === "Escape") {
-			ev.preventDefault();
-			this.close();
-			return;
-		}
-		const root = this.__vmzDomRoot;
-		const panel = root && typeof root.querySelector === "function" ? root.querySelector("[data-vmz-overlay=\"date-picker\"]") : null;
-		if (!panel) return;
-		const nodes = [...panel.querySelectorAll("[data-vmz-date-iso]")].filter((n) => n instanceof HTMLElement && !(n as HTMLButtonElement).disabled);
-		if (!nodes.length) return;
-		const idx = nodes.indexOf(document.activeElement as Element);
-		if (ev.key === "ArrowRight") {
-			ev.preventDefault();
-			(nodes[(idx + 1 + nodes.length) % nodes.length] as HTMLElement).focus();
-		} else if (ev.key === "ArrowLeft") {
-			ev.preventDefault();
-			(nodes[(idx - 1 + nodes.length) % nodes.length] as HTMLElement).focus();
-		} else if (ev.key === "ArrowDown") {
-			ev.preventDefault();
-			(nodes[Math.min(idx + 7, nodes.length - 1)] as HTMLElement).focus();
-		} else if (ev.key === "ArrowUp") {
-			ev.preventDefault();
-			(nodes[Math.max(idx - 7, 0)] as HTMLElement).focus();
-		} else if (ev.key === "Home") {
-			ev.preventDefault();
-			(nodes[0] as HTMLElement).focus();
-		} else if (ev.key === "End") {
-			ev.preventDefault();
-			(nodes[nodes.length - 1] as HTMLElement).focus();
-		} else if (ev.key === "Enter" || ev.key === " ") {
-			const active = document.activeElement as HTMLElement | null;
-			const iso = active?.getAttribute?.("data-vmz-date-iso");
-			if (iso) {
-				ev.preventDefault();
-				this.choose(iso);
-			}
-		}
-	}
-	_rebuildDays() {
-		const y = this.viewYear || this._todayParts().y;
-		const m = this.viewMonth || this._todayParts().m;
-		this.viewYear = y;
-		this.viewMonth = m;
-		this.monthLabel = `${this._monthName(m)} ${y}`;
-		this.panelLabel = String(this.mode) === "range" ? `Choose date range — ${this.monthLabel}` : `Choose date — ${this.monthLabel}`;
-		const firstDow = (new Date(y, m - 1, 1).getDay() + 6) % 7;
-		const dim = new Date(y, m, 0).getDate();
-		const prevDim = new Date(y, m - 1, 0).getDate();
-		const cells: typeof this.days = [];
-		const isRange = String(this.mode) === "range";
-		let start = "";
-		let end = "";
-		if (isRange) {
-			if (this.draftStart) {
-				start = this.draftStart;
-				end = this.draftStart;
-			} else {
-				start = this._parseIso(this.rangeStart) ? this.rangeStart : "";
-				end = this._parseIso(this.rangeEnd) ? this.rangeEnd : "";
-			}
-		}
-		for (let i = 0; i < 42; i++) {
-			let cy = y;
-			let cm = m;
-			let cd = 0;
-			let inMonth = true;
-			if (i < firstDow) {
-				inMonth = false;
-				cd = prevDim - firstDow + i + 1;
-				cm = m === 1 ? 12 : m - 1;
-				cy = m === 1 ? y - 1 : y;
-			} else if (i >= firstDow + dim) {
-				inMonth = false;
-				cd = i - firstDow - dim + 1;
-				cm = m === 12 ? 1 : m + 1;
-				cy = m === 12 ? y + 1 : y;
-			} else {
-				cd = i - firstDow + 1;
-			}
-			const iso = this._toIso(cy, cm, cd);
-			let selected = iso === this.value;
-			let inRange = false;
-			let rangeEdge = false;
-			if (isRange) {
-				selected = false;
-				if (start && end) {
-					rangeEdge = iso === start || iso === end;
-					inRange = iso >= start && iso <= end;
-					selected = rangeEdge;
-				} else if (start) {
-					rangeEdge = iso === start;
-					selected = rangeEdge;
-				}
-			}
-			cells.push({
-				key: iso,
-				iso,
-				label: String(cd),
-				inMonth,
-				selected,
-				inRange: inRange && !rangeEdge,
-				rangeEdge,
-				disabled: this._isOutOfRange(iso)
-			});
-		}
-		this.days = cells;
-		this._syncDisplay();
-	}
-	_parseIso(iso: string) {
-		const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(iso || ""));
-		if (!m) return null;
-		const y = Number(m[1]);
-		const mo = Number(m[2]);
-		const d = Number(m[3]);
-		if (mo < 1 || mo > 12 || d < 1 || d > 31) return null;
-		return {
-			y,
-			m: mo,
-			d
-		};
-	}
-	_toIso(y: number, m: number, d: number) {
-		return `${y}-${String(m).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
-	}
-	_todayParts() {
-		const now = new Date();
-		return {
-			y: now.getFullYear(),
-			m: now.getMonth() + 1,
-			d: now.getDate()
-		};
-	}
-	_monthName(m: number) {
-		const names = [
-			"January",
-			"February",
-			"March",
-			"April",
-			"May",
-			"June",
-			"July",
-			"August",
-			"September",
-			"October",
-			"November",
-			"December"
-		];
-		return names[m - 1] || String(m);
-	}
-	_isOutOfRange(iso: string) {
-		if (this.min && iso < this.min) return true;
-		if (this.max && iso > this.max) return true;
-		return false;
-	}
-	_syncOverlay() {
-		const root = this.__vmzDomRoot;
-		const panel = root && typeof root.querySelector === "function" ? root.querySelector("[data-vmz-overlay=\"date-picker\"][data-vmz-focus=\"enter\"]") : null;
-		if (panel && this.open) this._bindDoc(panel as HTMLElement);
-		else if (!panel) this._teardownDoc();
-		this._syncDisplay();
-	}
-	_bindDoc(panel: HTMLElement) {
-		if (typeof document === "undefined") return;
-		if (!this._docKeyHandler) {
-			this._docKeyHandler = (ev: KeyboardEvent) => {
-				if (ev.key === "Escape") {
-					ev.preventDefault();
-					this.close();
-				}
-			};
-			document.addEventListener("keydown", this._docKeyHandler);
-		}
-		if (!this._docPointerHandler) {
-			const root = this.__vmzDomRoot;
-			this._docPointerHandler = (ev: Event) => {
-				const t = ev.target;
-				if (!(t instanceof Node)) return;
-				if (root && typeof root.contains === "function" && root.contains(t)) return;
-				this.close();
-			};
-			document.addEventListener("pointerdown", this._docPointerHandler, true);
-		}
-		const selected = panel.querySelector("[data-vmz-date-iso][aria-selected=\"true\"]:not([disabled])");
-		const first = panel.querySelector("[data-vmz-date-iso]:not([disabled])");
-		const focusTarget = (selected || first) as HTMLElement | null;
-		if (focusTarget) focusTarget.focus();
-		else panel.focus();
-	}
-	_teardownDoc() {
-		if (typeof document !== "undefined") {
-			if (this._docKeyHandler) document.removeEventListener("keydown", this._docKeyHandler);
-			if (this._docPointerHandler) {
-				document.removeEventListener("pointerdown", this._docPointerHandler, true);
-			}
-		}
-		this._docKeyHandler = null;
-		this._docPointerHandler = null;
-	}
+    public label: string = "";
+    public description: string = "";
+    public error: string = "";
+    public value: string = "";
+    /** "date" | "range" */
+    public mode: string = "date";
+    public rangeStart: string = "";
+    public rangeEnd: string = "";
+    public min: string = "";
+    public max: string = "";
+    public disabled: boolean = false;
+    public invalidAttr: string = "false";
+    public controlId: string = "vmz-date";
+    public descriptionId: string = "vmz-date-desc";
+    public errorId: string = "vmz-date-err";
+    public describedBy: string = "";
+    public onInput:
+        | ((e: {
+              target: {
+                  value: string;
+                  start: string;
+                  end: string;
+              };
+          }) => void)
+        | null = null;
+    public onChange:
+        | ((e: {
+              target: {
+                  value: string;
+                  start: string;
+                  end: string;
+              };
+          }) => void)
+        | null = null;
+    open = false;
+    displayLabel = "—";
+    panelId = "vmz-date-panel";
+    panelLabel = "Choose date";
+    monthLabel = "";
+    viewYear = 0;
+    viewMonth = 0;
+    /** Internal first click while completing a range. */
+    draftStart = "";
+    days: Array<{
+        key: string;
+        iso: string;
+        label: string;
+        inMonth: boolean;
+        selected: boolean;
+        inRange: boolean;
+        rangeEdge: boolean;
+        disabled: boolean;
+    }> = [];
+    _docKeyHandler = null;
+    _docPointerHandler = null;
+    _observer = null;
+    onMount() {
+        this.panelId = `${this.controlId}-panel`;
+        this.syncFromValue(true);
+        if (typeof document === "undefined" || typeof MutationObserver === "undefined") return;
+        const root = this.__vmzDomRoot;
+        if (!root || typeof root.querySelector !== "function") return;
+        this._observer = new MutationObserver(() => this._syncOverlay());
+        this._observer.observe(root, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    onDestroy() {
+        if (this._observer) {
+            this._observer.disconnect();
+            this._observer = null;
+        }
+        this._teardownDoc();
+    }
+    syncFromValue(resetView: boolean) {
+        const isRange = String(this.mode) === "range";
+        const parsed = this._parseIso(
+            isRange ? this.rangeStart || this.rangeEnd || this.value : this.value,
+        );
+        this._syncDisplay();
+        if (resetView) {
+            const base = parsed || this._todayParts();
+            this.viewYear = base.y;
+            this.viewMonth = base.m;
+        }
+        this._rebuildDays();
+    }
+    _syncDisplay() {
+        if (String(this.mode) === "range") {
+            const a = this._parseIso(this.rangeStart) ? this.rangeStart : "";
+            const b = this._parseIso(this.rangeEnd) ? this.rangeEnd : "";
+            if (a && b) this.displayLabel = `${a} → ${b}`;
+            else if (a) this.displayLabel = `${a} → …`;
+            else this.displayLabel = "—";
+            return;
+        }
+        this.displayLabel = this._parseIso(this.value) ? this.value : "—";
+    }
+    openPanel() {
+        this.draftStart = "";
+        this.syncFromValue(true);
+        this.open = true;
+    }
+    toggle() {
+        if (this.disabled) return;
+        if (this.open) this.close();
+        else this.openPanel();
+    }
+    close() {
+        this.open = false;
+        this.draftStart = "";
+    }
+    prevMonth() {
+        if (this.viewMonth <= 1) {
+            this.viewYear -= 1;
+            this.viewMonth = 12;
+        } else {
+            this.viewMonth -= 1;
+        }
+        this._rebuildDays();
+    }
+    nextMonth() {
+        if (this.viewMonth >= 12) {
+            this.viewYear += 1;
+            this.viewMonth = 1;
+        } else {
+            this.viewMonth += 1;
+        }
+        this._rebuildDays();
+    }
+    choose(iso: string) {
+        if (!iso || this._isOutOfRange(iso)) return;
+        if (String(this.mode) === "range") {
+            if (!this.draftStart) {
+                this.draftStart = iso;
+                this._rebuildDays();
+                return;
+            }
+            let start = this.draftStart;
+            let end = iso;
+            if (end < start) {
+                const t = start;
+                start = end;
+                end = t;
+            }
+            this.draftStart = "";
+            this.close();
+            const ev = {
+                target: {
+                    value: `${start}/${end}`,
+                    start,
+                    end,
+                },
+            };
+            this.emit("change", ev);
+            this.emit("input", ev);
+            if (typeof this.onChange === "function") this.onChange(ev);
+            if (typeof this.onInput === "function") this.onInput(ev);
+            return;
+        }
+        this.close();
+        if (iso === this.value) return;
+        const ev = {
+            target: {
+                value: iso,
+                start: iso,
+                end: iso,
+            },
+        };
+        this.emit("change", ev);
+        this.emit("input", ev);
+        if (typeof this.onChange === "function") this.onChange(ev);
+        if (typeof this.onInput === "function") this.onInput(ev);
+    }
+    onDayClick(ev: Event) {
+        const t = ev?.target as HTMLElement | null;
+        const el =
+            t && typeof t.closest === "function"
+                ? (t.closest("[data-vmz-date-iso]") as HTMLElement | null)
+                : ((ev?.currentTarget as HTMLElement | null) ?? null);
+        const iso =
+            el && typeof el.getAttribute === "function"
+                ? el.getAttribute("data-vmz-date-iso")
+                : null;
+        if (iso) this.choose(iso);
+    }
+    onTriggerKeyDown(ev: KeyboardEvent) {
+        if (!ev || this.disabled) return;
+        if ((ev.key === "ArrowDown" || ev.key === "Enter" || ev.key === " ") && !this.open) {
+            ev.preventDefault();
+            this.openPanel();
+        } else if (ev.key === "Escape" && this.open) {
+            ev.preventDefault();
+            this.close();
+        }
+    }
+    onPanelKeyDown(ev: KeyboardEvent) {
+        if (!ev) return;
+        if (ev.key === "Escape") {
+            ev.preventDefault();
+            this.close();
+            return;
+        }
+        const root = this.__vmzDomRoot;
+        const panel =
+            root && typeof root.querySelector === "function"
+                ? root.querySelector('[data-vmz-overlay="date-picker"]')
+                : null;
+        if (!panel) return;
+        const nodes = [...panel.querySelectorAll("[data-vmz-date-iso]")].filter(
+            (n) => n instanceof HTMLElement && !(n as HTMLButtonElement).disabled,
+        );
+        if (!nodes.length) return;
+        const idx = nodes.indexOf(document.activeElement as Element);
+        if (ev.key === "ArrowRight") {
+            ev.preventDefault();
+            (nodes[(idx + 1 + nodes.length) % nodes.length] as HTMLElement).focus();
+        } else if (ev.key === "ArrowLeft") {
+            ev.preventDefault();
+            (nodes[(idx - 1 + nodes.length) % nodes.length] as HTMLElement).focus();
+        } else if (ev.key === "ArrowDown") {
+            ev.preventDefault();
+            (nodes[Math.min(idx + 7, nodes.length - 1)] as HTMLElement).focus();
+        } else if (ev.key === "ArrowUp") {
+            ev.preventDefault();
+            (nodes[Math.max(idx - 7, 0)] as HTMLElement).focus();
+        } else if (ev.key === "Home") {
+            ev.preventDefault();
+            (nodes[0] as HTMLElement).focus();
+        } else if (ev.key === "End") {
+            ev.preventDefault();
+            (nodes[nodes.length - 1] as HTMLElement).focus();
+        } else if (ev.key === "Enter" || ev.key === " ") {
+            const active = document.activeElement as HTMLElement | null;
+            const iso = active?.getAttribute?.("data-vmz-date-iso");
+            if (iso) {
+                ev.preventDefault();
+                this.choose(iso);
+            }
+        }
+    }
+    _rebuildDays() {
+        const y = this.viewYear || this._todayParts().y;
+        const m = this.viewMonth || this._todayParts().m;
+        this.viewYear = y;
+        this.viewMonth = m;
+        this.monthLabel = `${this._monthName(m)} ${y}`;
+        this.panelLabel =
+            String(this.mode) === "range"
+                ? `Choose date range — ${this.monthLabel}`
+                : `Choose date — ${this.monthLabel}`;
+        const firstDow = (new Date(y, m - 1, 1).getDay() + 6) % 7;
+        const dim = new Date(y, m, 0).getDate();
+        const prevDim = new Date(y, m - 1, 0).getDate();
+        const cells: typeof this.days = [];
+        const isRange = String(this.mode) === "range";
+        let start = "";
+        let end = "";
+        if (isRange) {
+            if (this.draftStart) {
+                start = this.draftStart;
+                end = this.draftStart;
+            } else {
+                start = this._parseIso(this.rangeStart) ? this.rangeStart : "";
+                end = this._parseIso(this.rangeEnd) ? this.rangeEnd : "";
+            }
+        }
+        for (let i = 0; i < 42; i++) {
+            let cy = y;
+            let cm = m;
+            let cd = 0;
+            let inMonth = true;
+            if (i < firstDow) {
+                inMonth = false;
+                cd = prevDim - firstDow + i + 1;
+                cm = m === 1 ? 12 : m - 1;
+                cy = m === 1 ? y - 1 : y;
+            } else if (i >= firstDow + dim) {
+                inMonth = false;
+                cd = i - firstDow - dim + 1;
+                cm = m === 12 ? 1 : m + 1;
+                cy = m === 12 ? y + 1 : y;
+            } else {
+                cd = i - firstDow + 1;
+            }
+            const iso = this._toIso(cy, cm, cd);
+            let selected = iso === this.value;
+            let inRange = false;
+            let rangeEdge = false;
+            if (isRange) {
+                selected = false;
+                if (start && end) {
+                    rangeEdge = iso === start || iso === end;
+                    inRange = iso >= start && iso <= end;
+                    selected = rangeEdge;
+                } else if (start) {
+                    rangeEdge = iso === start;
+                    selected = rangeEdge;
+                }
+            }
+            cells.push({
+                key: iso,
+                iso,
+                label: String(cd),
+                inMonth,
+                selected,
+                inRange: inRange && !rangeEdge,
+                rangeEdge,
+                disabled: this._isOutOfRange(iso),
+            });
+        }
+        this.days = cells;
+        this._syncDisplay();
+    }
+    _parseIso(iso: string) {
+        const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(iso || ""));
+        if (!m) return null;
+        const y = Number(m[1]);
+        const mo = Number(m[2]);
+        const d = Number(m[3]);
+        if (mo < 1 || mo > 12 || d < 1 || d > 31) return null;
+        return {
+            y,
+            m: mo,
+            d,
+        };
+    }
+    _toIso(y: number, m: number, d: number) {
+        return `${y}-${String(m).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+    }
+    _todayParts() {
+        const now = new Date();
+        return {
+            y: now.getFullYear(),
+            m: now.getMonth() + 1,
+            d: now.getDate(),
+        };
+    }
+    _monthName(m: number) {
+        const names = [
+            "January",
+            "February",
+            "March",
+            "April",
+            "May",
+            "June",
+            "July",
+            "August",
+            "September",
+            "October",
+            "November",
+            "December",
+        ];
+        return names[m - 1] || String(m);
+    }
+    _isOutOfRange(iso: string) {
+        if (this.min && iso < this.min) return true;
+        if (this.max && iso > this.max) return true;
+        return false;
+    }
+    _syncOverlay() {
+        const root = this.__vmzDomRoot;
+        const panel =
+            root && typeof root.querySelector === "function"
+                ? root.querySelector('[data-vmz-overlay="date-picker"][data-vmz-focus="enter"]')
+                : null;
+        if (panel && this.open) this._bindDoc(panel as HTMLElement);
+        else if (!panel) this._teardownDoc();
+        this._syncDisplay();
+    }
+    _bindDoc(panel: HTMLElement) {
+        if (typeof document === "undefined") return;
+        if (!this._docKeyHandler) {
+            this._docKeyHandler = (ev: KeyboardEvent) => {
+                if (ev.key === "Escape") {
+                    ev.preventDefault();
+                    this.close();
+                }
+            };
+            document.addEventListener("keydown", this._docKeyHandler);
+        }
+        if (!this._docPointerHandler) {
+            const root = this.__vmzDomRoot;
+            this._docPointerHandler = (ev: Event) => {
+                const t = ev.target;
+                if (!(t instanceof Node)) return;
+                if (root && typeof root.contains === "function" && root.contains(t)) return;
+                this.close();
+            };
+            document.addEventListener("pointerdown", this._docPointerHandler, true);
+        }
+        const selected = panel.querySelector(
+            '[data-vmz-date-iso][aria-selected="true"]:not([disabled])',
+        );
+        const first = panel.querySelector("[data-vmz-date-iso]:not([disabled])");
+        const focusTarget = (selected || first) as HTMLElement | null;
+        if (focusTarget) focusTarget.focus();
+        else panel.focus();
+    }
+    _teardownDoc() {
+        if (typeof document !== "undefined") {
+            if (this._docKeyHandler) document.removeEventListener("keydown", this._docKeyHandler);
+            if (this._docPointerHandler) {
+                document.removeEventListener("pointerdown", this._docPointerHandler, true);
+            }
+        }
+        this._docKeyHandler = null;
+        this._docPointerHandler = null;
+    }
 }
 </script>