@getufy/flint-ui 0.1.0

package/dist/_shared/flint-date-picker-CmCtDBVO.js

@@ -0,0 +1,370 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, nothing as r, unsafeCSS as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+import { repeat as l } from "lit/directives/repeat.js";
+//#region src/date-picker/flint-date-picker-calendar.css?inline
+var u = ":host{font-family:var(--flint-font-family);-webkit-user-select:none;user-select:none;display:inline-block}.calendar{background:var(--flint-surface-1);border-radius:var(--flint-border-radius-xl);width:296px;overflow:hidden}.header{justify-content:space-between;align-items:center;padding:12px 8px 8px;display:flex}.header-label{color:var(--flint-text-color);cursor:pointer;border-radius:6px;padding:4px 8px;font-size:.9375rem;font-weight:600;transition:background .12s}.header-label:hover{background:var(--flint-hover-color)}.nav-btn{cursor:pointer;width:32px;height:32px;color:var(--flint-text-color-muted);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1rem;transition:background .12s;display:flex}.nav-btn:hover{background:var(--flint-hover-color)}.nav-btn:disabled{opacity:.3;cursor:default}.dow-row{grid-template-columns:repeat(7,1fr);margin-bottom:4px;padding:0 8px;display:grid}.dow-cell{text-align:center;color:var(--flint-text-color-muted);text-transform:uppercase;letter-spacing:.04em;padding:4px 0;font-size:.6875rem;font-weight:600}.day-grid{grid-template-columns:repeat(7,1fr);gap:2px 0;padding:0 8px 12px;display:grid}.day-cell{cursor:pointer;width:100%;height:36px;color:var(--flint-text-color);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:.8125rem;transition:background .1s,color .1s;display:flex;position:relative}.day-cell:hover:not(.disabled):not(.selected){background:var(--flint-hover-color)}.day-cell.other-month{color:var(--flint-text-color-muted)}.day-cell.today:not(.selected){color:var(--flint-primary-color);font-weight:700}.day-cell.today:not(.selected):after{content:\"\";background:var(--flint-primary-color);border-radius:50%;width:4px;height:4px;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.day-cell.selected{background:var(--flint-primary-color);color:var(--flint-text-color-on-primary);font-weight:700}.day-cell.selected:hover{background:var(--flint-primary-color-hover)}.day-cell.disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.year-grid{grid-template-columns:repeat(3,1fr);gap:8px;max-height:220px;padding:12px;display:grid;overflow-y:auto}.year-btn{cursor:pointer;color:var(--flint-text-color);background:0 0;border:none;border-radius:6px;padding:8px 4px;font-size:.875rem;transition:background .12s}.year-btn:hover{background:var(--flint-hover-color)}.year-btn.selected-year{background:var(--flint-primary-color);color:var(--flint-text-color-on-primary);font-weight:700}.month-grid{grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;display:grid}.month-btn{cursor:pointer;color:var(--flint-text-color);background:0 0;border:none;border-radius:6px;padding:10px 4px;font-size:.8125rem;transition:background .12s}.month-btn:hover{background:var(--flint-hover-color)}.month-btn.selected-month{background:var(--flint-primary-color);color:var(--flint-text-color-on-primary);font-weight:700}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", d = ":host{font-family:var(--flint-font-family);display:inline-block}.field-wrapper{align-items:center;display:inline-flex;position:relative}.field-label{color:var(--flint-text-color-muted);margin-bottom:4px;font-size:.75rem;font-weight:500;display:block}.field-input{color:var(--flint-text-color);background:var(--flint-input-bg);border:1.5px solid var(--flint-border-color);border-radius:var(--flint-border-radius-md);box-sizing:border-box;cursor:text;outline:none;width:180px;padding:10px 44px 10px 14px;font-family:inherit;font-size:.9375rem;transition:border-color .15s,box-shadow .15s}.field-input::placeholder{color:var(--flint-input-placeholder-color)}.field-input:focus{border-color:var(--flint-primary-color);box-shadow:0 0 0 3px var(--flint-primary-focus-ring)}:host([disabled]) .field-input{background:var(--flint-input-disabled-bg);color:var(--flint-text-color-muted);cursor:not-allowed;border-color:var(--flint-border-color)}:host([readonly]) .field-input{cursor:default}.calendar-icon-btn{cursor:pointer;width:28px;height:28px;color:var(--flint-text-color-muted);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1rem;transition:background .12s,color .12s;display:flex;position:absolute;right:10px}.calendar-icon-btn:hover{background:var(--flint-hover-color);color:var(--flint-primary-color)}:host([disabled]) .calendar-icon-btn{pointer-events:none;opacity:.4}:host([readonly]) .calendar-icon-btn{pointer-events:none}:host([error]) .field-input{border-color:var(--flint-error-color)}:host([error]) .field-input:focus{box-shadow:0 0 0 3px var(--flint-error-focus-ring)}.helper-text{color:var(--flint-text-color-muted);margin-top:4px;font-size:.75rem}:host([error]) .helper-text{color:var(--flint-error-color)}.popover-anchor{display:inline-block;position:relative}.popover{z-index:1400;background:var(--flint-surface-1);border-radius:var(--flint-border-radius-xl);box-shadow:var(--flint-shadow-lg);transform-origin:0 0;opacity:0;visibility:hidden;pointer-events:none;transition:transform .15s cubic-bezier(.4,0,.2,1),opacity .15s,visibility .15s;position:absolute;top:calc(100% + 6px);left:0;transform:scale(.94)translateY(-4px)}.popover.open{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)translateY(0)}.popover-actions{border-top:1px solid var(--flint-border-color);justify-content:flex-end;gap:8px;padding:4px 12px 12px;display:flex}.action-btn{cursor:pointer;border:none;border-radius:6px;padding:6px 14px;font-family:inherit;font-size:.875rem;font-weight:600;transition:background .12s}.action-btn.cancel{color:var(--flint-text-color-muted);background:0 0}.action-btn.cancel:hover{background:var(--flint-hover-color)}.action-btn.ok{background:var(--flint-primary-color);color:var(--flint-text-color-on-primary)}.action-btn.ok:hover{background:var(--flint-primary-color-hover)}.static-wrapper{border-radius:var(--flint-border-radius-xl);box-shadow:var(--flint-shadow-sm), 0 0 0 1px var(--flint-border-color);display:inline-block;overflow:hidden}.click-away{z-index:1399;display:none;position:fixed;inset:0}.click-away.open{display:block}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", f = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+], p = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+function m(e) {
+	if (!e) return null;
+	let [t, n, r] = e.split("-").map(Number);
+	return !t || !n || !r ? null : new Date(t, n - 1, r);
+}
+function h(e) {
+	return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+}
+function g(e) {
+	let t = m(e);
+	return t ? `${String(t.getMonth() + 1).padStart(2, "0")}/${String(t.getDate()).padStart(2, "0")}/${t.getFullYear()}` : "";
+}
+function _() {
+	return h(/* @__PURE__ */ new Date());
+}
+function v(e, t) {
+	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+}
+function y(e, t, n, r, i) {
+	let a = [], o = new Date(e, t, 1), s = m(_()), c = n ? m(n) : null, l = r ? m(r) : null, u = i ? m(i) : null, d = o.getDay();
+	for (let n = d - 1; n >= 0; n--) {
+		let r = new Date(e, t, -n), i = h(r);
+		a.push({
+			date: r,
+			iso: i,
+			day: r.getDate(),
+			isCurrentMonth: !1,
+			isToday: v(r, s),
+			isSelected: c ? v(r, c) : !1,
+			isDisabled: (l ? r < l : !1) || (u ? r > u : !1)
+		});
+	}
+	let f = new Date(e, t + 1, 0).getDate();
+	for (let n = 1; n <= f; n++) {
+		let r = new Date(e, t, n), i = h(r);
+		a.push({
+			date: r,
+			iso: i,
+			day: n,
+			isCurrentMonth: !0,
+			isToday: v(r, s),
+			isSelected: c ? v(r, c) : !1,
+			isDisabled: (l ? r < l : !1) || (u ? r > u : !1)
+		});
+	}
+	let p = 42 - a.length;
+	for (let n = 1; n <= p; n++) {
+		let r = new Date(e, t + 1, n), i = h(r);
+		a.push({
+			date: r,
+			iso: i,
+			day: n,
+			isCurrentMonth: !1,
+			isToday: v(r, s),
+			isSelected: c ? v(r, c) : !1,
+			isDisabled: (l ? r < l : !1) || (u ? r > u : !1)
+		});
+	}
+	return a;
+}
+var b = class extends t {
+	constructor(...e) {
+		super(...e), this.disabled = !1, this._viewYear = (/* @__PURE__ */ new Date()).getFullYear(), this._viewMonth = (/* @__PURE__ */ new Date()).getMonth(), this._mode = "day";
+	}
+	static {
+		this.styles = i(u);
+	}
+	connectedCallback() {
+		if (super.connectedCallback(), this.value) {
+			let e = m(this.value);
+			e && (this._viewYear = e.getFullYear(), this._viewMonth = e.getMonth());
+		}
+	}
+	navigateTo(e) {
+		let t = m(e);
+		t && (this._viewYear = t.getFullYear(), this._viewMonth = t.getMonth());
+	}
+	_prevMonth() {
+		this._viewMonth === 0 ? (this._viewMonth = 11, this._viewYear--) : this._viewMonth--;
+	}
+	_nextMonth() {
+		this._viewMonth === 11 ? (this._viewMonth = 0, this._viewYear++) : this._viewMonth++;
+	}
+	_selectDay(e) {
+		e.isDisabled || this.disabled || this.dispatchEvent(new CustomEvent("flint-date-picker-select", {
+			detail: { value: e.iso },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_selectYear(e) {
+		this._viewYear = e, this._mode = "month";
+	}
+	_selectMonth(e) {
+		this._viewMonth = e, this._mode = "day";
+	}
+	_renderDayView() {
+		let e = y(this._viewYear, this._viewMonth, this.value ?? null, this.min ?? null, this.max ?? null);
+		return n`
+      <div class="header">
+        <button class="nav-btn" @click=${this._prevMonth} aria-label="Previous month">‹</button>
+        <span class="header-label" @click=${() => this._mode = "month"} role="button" tabindex="0"
+          @keydown=${(e) => e.key === "Enter" && (this._mode = "month")}
+        >
+          ${p[this._viewMonth]} ${this._viewYear}
+        </span>
+        <button class="nav-btn" @click=${this._nextMonth} aria-label="Next month">›</button>
+      </div>
+      <div class="dow-row">${f.map((e) => n`<span class="dow-cell">${e}</span>`)}</div>
+      <div class="day-grid" role="grid" aria-label="Calendar">
+        ${l(e, (e) => e.iso, (e) => n`
+          <button
+            class=${c({
+			"day-cell": !0,
+			"other-month": !e.isCurrentMonth,
+			today: e.isToday,
+			selected: e.isSelected,
+			disabled: e.isDisabled
+		})}
+            aria-label=${e.date.toLocaleDateString(void 0, {
+			weekday: "long",
+			month: "long",
+			day: "numeric",
+			year: "numeric"
+		})}
+            aria-selected=${e.isSelected ? "true" : r}
+            aria-disabled=${e.isDisabled ? "true" : r}
+            tabindex=${e.isCurrentMonth && !e.isDisabled ? 0 : -1}
+            @click=${() => this._selectDay(e)}
+          >${e.day}</button>
+        `)}
+      </div>
+    `;
+	}
+	_renderMonthView() {
+		return n`
+      <div class="header">
+        <button class="nav-btn" @click=${() => this._viewYear--} aria-label="Previous year">‹</button>
+        <span class="header-label" @click=${() => this._mode = "year"} role="button" tabindex="0">${this._viewYear}</span>
+        <button class="nav-btn" @click=${() => this._viewYear++} aria-label="Next year">›</button>
+      </div>
+      <div class="month-grid">
+        ${p.map((e, t) => n`
+          <button class=${c({
+			"month-btn": !0,
+			"selected-month": t === this._viewMonth
+		})}
+            @click=${() => this._selectMonth(t)}>${e.slice(0, 3)}</button>
+        `)}
+      </div>
+    `;
+	}
+	_renderYearView() {
+		let e = (/* @__PURE__ */ new Date()).getFullYear();
+		return n`
+      <div class="header">
+        <span class="header-label" style="cursor:default">Select Year</span>
+      </div>
+      <div class="year-grid">
+        ${Array.from({ length: 201 }, (t, n) => e - 100 + n).map((e) => n`
+          <button class=${c({
+			"year-btn": !0,
+			"selected-year": e === this._viewYear
+		})}
+            @click=${() => this._selectYear(e)}>${e}</button>
+        `)}
+      </div>
+    `;
+	}
+	render() {
+		return n`
+      <div class="calendar">
+        ${this._mode === "day" ? this._renderDayView() : this._mode === "month" ? this._renderMonthView() : this._renderYearView()}
+      </div>
+    `;
+	}
+};
+e([o({ type: String })], b.prototype, "value", void 0), e([o({ type: String })], b.prototype, "min", void 0), e([o({ type: String })], b.prototype, "max", void 0), e([o({ type: Boolean })], b.prototype, "disabled", void 0), e([s()], b.prototype, "_viewYear", void 0), e([s()], b.prototype, "_viewMonth", void 0), e([s()], b.prototype, "_mode", void 0), b = e([a("flint-date-picker-calendar")], b);
+var x = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.label = "Date", this.placeholder = "MM/DD/YYYY", this.name = "", this.variant = "desktop", this.min = "", this.max = "", this.disabled = !1, this.readonly = !1, this.error = !1, this.helperText = "", this._open = !1, this._pendingValue = "";
+	}
+	static {
+		this.styles = i(d);
+	}
+	get _resolvedVariant() {
+		return this.variant === "auto" ? window.matchMedia("(pointer: coarse)").matches ? "mobile" : "desktop" : this.variant;
+	}
+	_openPicker() {
+		this.disabled || this._open || (this._pendingValue = this.value, this._open = !0);
+	}
+	_closePicker() {
+		this._open = !1;
+	}
+	_handleCalendarSelect(e) {
+		let t = e.detail.value;
+		this._pendingValue = t, this._resolvedVariant !== "mobile" && this._commit(t);
+	}
+	_handleStaticSelect(e) {
+		let t = e.detail.value;
+		this._commit(t);
+	}
+	_commit(e) {
+		if (e === this.value) {
+			this._closePicker();
+			return;
+		}
+		this.value = e, this.dispatchEvent(new CustomEvent("change", {
+			detail: { value: e },
+			bubbles: !0,
+			composed: !0
+		})), this._closePicker();
+	}
+	_handleMobileOk() {
+		this._commit(this._pendingValue || this.value);
+	}
+	_handleMobileCancel() {
+		this._pendingValue = this.value, this._closePicker();
+	}
+	_handleFieldInput(e) {
+		if (this.readonly) return;
+		let t = e.target.value.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+		if (t) {
+			let e = `${t[3]}-${t[1]}-${t[2]}`;
+			if (isNaN(new Date(e).getTime()) || this.min && e < this.min || this.max && e > this.max) return;
+			this._commit(e);
+		}
+	}
+	_renderField() {
+		return n`
+      ${this.label ? n`<label class="field-label" for="dp-input">${this.label}</label>` : r}
+      <div class="field-wrapper">
+        <input
+          id="dp-input"
+          class="field-input"
+          type="text"
+          .value=${g(this.value)}
+          placeholder=${this.placeholder}
+          name=${this.name || r}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          aria-label=${this.label || "Date"}
+          aria-haspopup="true"
+          aria-expanded=${this._open ? "true" : r}
+          @input=${this._handleFieldInput}
+          @focus=${() => {
+			this.readonly && this._openPicker();
+		}}
+        />
+        <button
+          class="calendar-icon-btn"
+          aria-label="Open date picker"
+          aria-haspopup="true"
+          tabindex=${this.disabled ? -1 : 0}
+          @click=${this._openPicker}
+        >
+          📅
+        </button>
+      </div>
+      ${this.helperText ? n`<p class="helper-text">${this.helperText}</p>` : r}
+    `;
+	}
+	_renderDesktop() {
+		return n`
+      <div>
+        <div class="popover-anchor">
+          ${this._renderField()}
+          <div class="click-away ${this._open ? "open" : ""}" @click=${this._closePicker}></div>
+          <div class="popover ${this._open ? "open" : ""}" role="dialog" aria-label="Date picker">
+            <flint-date-picker-calendar
+              .value=${this.value}
+              .min=${this.min}
+              .max=${this.max}
+              ?disabled=${this.disabled}
+              @flint-date-picker-select=${this._handleCalendarSelect}
+            ></flint-date-picker-calendar>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	_renderMobile() {
+		return n`
+      <div>
+        ${this._renderField()}
+        <flint-dialog
+          .open=${this._open}
+          disable-backdrop-close
+          @close=${this._closePicker}
+          style="--flint-dialog-width:320px"
+        >
+          <flint-dialog-title>Select Date</flint-dialog-title>
+          <flint-dialog-content style="padding:0 12px 4px;">
+            <flint-date-picker-calendar
+              .value=${this._pendingValue || this.value}
+              .min=${this.min}
+              .max=${this.max}
+              ?disabled=${this.disabled}
+              @flint-date-picker-select=${this._handleCalendarSelect}
+            ></flint-date-picker-calendar>
+          </flint-dialog-content>
+          <flint-dialog-actions>
+            <button class="action-btn cancel" @click=${this._handleMobileCancel}>Cancel</button>
+            <button class="action-btn ok" @click=${this._handleMobileOk}>OK</button>
+          </flint-dialog-actions>
+        </flint-dialog>
+      </div>
+    `;
+	}
+	_renderStatic() {
+		return n`
+      <div class="static-wrapper">
+        <flint-date-picker-calendar
+          .value=${this.value}
+          .min=${this.min}
+          .max=${this.max}
+          ?disabled=${this.disabled}
+          @flint-date-picker-select=${this._handleStaticSelect}
+        ></flint-date-picker-calendar>
+      </div>
+    `;
+	}
+	render() {
+		let e = this._resolvedVariant;
+		return e === "static" ? this._renderStatic() : e === "mobile" ? this._renderMobile() : this._renderDesktop();
+	}
+};
+e([o({ type: String })], x.prototype, "value", void 0), e([o({ type: String })], x.prototype, "label", void 0), e([o({ type: String })], x.prototype, "placeholder", void 0), e([o({ type: String })], x.prototype, "name", void 0), e([o({ type: String })], x.prototype, "variant", void 0), e([o({ type: String })], x.prototype, "min", void 0), e([o({ type: String })], x.prototype, "max", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], x.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], x.prototype, "readonly", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], x.prototype, "error", void 0), e([o({
+	type: String,
+	attribute: "helper-text"
+})], x.prototype, "helperText", void 0), e([s()], x.prototype, "_open", void 0), e([s()], x.prototype, "_pendingValue", void 0), x = e([a("flint-date-picker")], x);
+//#endregion
+export { b as n, x as t };

package/dist/_shared/flint-date-range-calendar-BPBdO9n3.js

@@ -0,0 +1,122 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { DAYS_SHORT as t, EMPTY_RANGE as n, MONTHS as r, buildRangeMonthGrid as i, isoToDate as a } from "../date-range-picker/date-range-helpers.js";
+import { LitElement as o, html as s, unsafeCSS as c } from "lit";
+import { customElement as l, property as u, state as d } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { repeat as p } from "lit/directives/repeat.js";
+//#region src/date-range-picker/flint-date-range-calendar.css?inline
+var m = ":host{font-family:var(--flint-font-family);-webkit-user-select:none;user-select:none;display:inline-block}.calendars{gap:0;display:flex}.month-panel{background:var(--flint-surface-1);flex-shrink:0;width:296px}.month-panel+.month-panel{border-left:1px solid var(--flint-border-color)}.header{justify-content:space-between;align-items:center;padding:12px 8px 8px;display:flex}.header-label{color:var(--flint-text-color);border-radius:6px;padding:4px 8px;font-size:.9375rem;font-weight:600}.nav-btn{cursor:pointer;width:32px;height:32px;color:var(--flint-text-color-muted);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1rem;transition:background .12s;display:flex}.nav-btn:hover{background:var(--flint-hover-color)}.nav-btn.hidden{visibility:hidden;pointer-events:none}.dow-row{grid-template-columns:repeat(7,1fr);margin-bottom:4px;padding:0 8px;display:grid}.dow-cell{text-align:center;color:var(--flint-text-color-muted);text-transform:uppercase;letter-spacing:.04em;padding:4px 0;font-size:.6875rem;font-weight:600}.day-grid{grid-template-columns:repeat(7,1fr);gap:2px 0;padding:0 8px 12px;display:grid}.day-cell{cursor:pointer;width:100%;height:36px;color:var(--flint-text-color);z-index:1;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:.8125rem;transition:background 80ms,color 80ms;display:flex;position:relative}.day-cell.in-range,.day-cell.hover-range{color:var(--flint-text-color);background:0 0}.day-cell.in-range:before,.day-cell.hover-range:before{content:\"\";background:var(--flint-primary-color-light);z-index:-1;border-radius:0;position:absolute;inset:0}.day-cell.range-start,.day-cell.range-end{background:var(--flint-primary-color);color:var(--flint-text-color-on-primary);border-radius:50%;font-weight:700}.day-cell.range-start:before{content:\"\";background:var(--flint-primary-color-light);z-index:-1;border-radius:0;position:absolute;inset:0 -50% 0 50%}.day-cell.range-end:before{content:\"\";background:var(--flint-primary-color-light);z-index:-1;border-radius:0;position:absolute;inset:0 50% 0 -50%}.day-cell.range-start.range-end:before{display:none}.day-cell.range-start:hover,.day-cell.range-end:hover{background:var(--flint-primary-color-hover)}.day-cell:hover:not(.range-start):not(.range-end):not(.disabled){background:var(--flint-hover-color)}.day-cell.other-month{color:var(--flint-text-color-muted)}.day-cell.today:not(.range-start):not(.range-end){color:var(--flint-primary-color);font-weight:700}.day-cell.today:not(.range-start):not(.range-end):after{content:\"\";background:var(--flint-primary-color);border-radius:50%;width:4px;height:4px;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.day-cell.disabled{opacity:.35;cursor:not-allowed;pointer-events:none}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", h = class extends o {
+	constructor(...e) {
+		super(...e), this.value = [...n], this.min = "", this.max = "", this.disabled = !1, this._leftYear = (/* @__PURE__ */ new Date()).getFullYear(), this._leftMonth = (/* @__PURE__ */ new Date()).getMonth(), this._hoverIso = "";
+	}
+	static {
+		this.styles = c(m);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		let [e] = this.value;
+		if (e) {
+			let t = a(e);
+			t && (this._leftYear = t.getFullYear(), this._leftMonth = t.getMonth());
+		}
+	}
+	navigateTo(e) {
+		let t = a(e);
+		t && (this._leftYear = t.getFullYear(), this._leftMonth = t.getMonth());
+	}
+	get _rightYear() {
+		return this._leftMonth === 11 ? this._leftYear + 1 : this._leftYear;
+	}
+	get _rightMonth() {
+		return this._leftMonth === 11 ? 0 : this._leftMonth + 1;
+	}
+	_prevMonth() {
+		this._leftMonth === 0 ? (this._leftMonth = 11, this._leftYear--) : this._leftMonth--;
+	}
+	_nextMonth() {
+		this._leftMonth === 11 ? (this._leftMonth = 0, this._leftYear++) : this._leftMonth++;
+	}
+	_handleCellClick(e) {
+		if (e.isDisabled || this.disabled) return;
+		this._hoverIso = "";
+		let [t, n] = this.value, r;
+		if (!t || t && n) r = [e.iso, ""];
+		else {
+			let n = a(t);
+			r = e.date < n ? [e.iso, t] : [t, e.iso];
+		}
+		this.value = r, this.dispatchEvent(new CustomEvent("flint-date-range-picker-select", {
+			detail: { value: r },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleCellHover(e) {
+		let [, t] = this.value;
+		t || (this._hoverIso = e.iso);
+	}
+	_handleMouseLeave() {
+		this._hoverIso = "";
+	}
+	_renderMonthPanel(e, n, o) {
+		let [c, l] = this.value, u = i(e, n, a(c), a(l), this._hoverIso ? a(this._hoverIso) : null, this.min || null, this.max || null);
+		return s`
+      <div class="month-panel">
+        <div class="header">
+          <button class="nav-btn ${o ? "" : "hidden"}"
+            @click=${this._prevMonth} aria-label="Previous month">‹</button>
+          <span class="header-label">${r[n]} ${e}</span>
+          <button class="nav-btn ${o ? "hidden" : ""}"
+            @click=${this._nextMonth} aria-label="Next month">›</button>
+        </div>
+
+        <div class="dow-row">
+          ${t.map((e) => s`<span class="dow-cell">${e}</span>`)}
+        </div>
+
+        <div class="day-grid" role="grid" aria-label="${r[n]} ${e}"
+          @mouseleave=${this._handleMouseLeave}>
+          ${p(u, (e) => e.iso + "_" + (o ? "L" : "R"), (e) => this._renderCell(e))}
+        </div>
+      </div>
+    `;
+	}
+	_renderCell(e) {
+		return s`
+      <button
+        class=${f({
+			"day-cell": !0,
+			"other-month": !e.isCurrentMonth,
+			today: e.isToday,
+			"range-start": e.isStart,
+			"range-end": e.isEnd,
+			"in-range": e.isInRange,
+			"hover-range": e.isHoverRange,
+			disabled: e.isDisabled
+		})}
+        aria-label=${e.date.toLocaleDateString(void 0, {
+			weekday: "long",
+			month: "long",
+			day: "numeric",
+			year: "numeric"
+		})}
+        aria-pressed=${e.isStart || e.isEnd}
+        aria-disabled=${e.isDisabled}
+        tabindex=${e.isCurrentMonth && !e.isDisabled ? 0 : -1}
+        @click=${() => this._handleCellClick(e)}
+        @mouseover=${() => this._handleCellHover(e)}
+      >${e.day}</button>
+    `;
+	}
+	render() {
+		return s`
+      <div class="calendars">
+        ${this._renderMonthPanel(this._leftYear, this._leftMonth, !0)}
+        ${this._renderMonthPanel(this._rightYear, this._rightMonth, !1)}
+      </div>
+    `;
+	}
+};
+e([u({ type: Array })], h.prototype, "value", void 0), e([u({ type: String })], h.prototype, "min", void 0), e([u({ type: String })], h.prototype, "max", void 0), e([u({ type: Boolean })], h.prototype, "disabled", void 0), e([d()], h.prototype, "_leftYear", void 0), e([d()], h.prototype, "_leftMonth", void 0), e([d()], h.prototype, "_hoverIso", void 0), h = e([l("flint-date-range-calendar")], h);
+//#endregion
+export { h as t };