@lekoala/date-picker 0.5.1 → 0.5.2

package/dist/date-picker.js

@@ -1,4 +1,4 @@
-/*** @lekoala/date-picker v0.5.1 - https://github.com/lekoala/date-picker ***/
+/*** @lekoala/date-picker v0.5.2 - https://github.com/lekoala/date-picker ***/
 (() => {
   var __defProp = Object.defineProperty;
   var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -44,6 +44,9 @@
     defineDatePicker: () => defineDatePicker
   });
 
+  // src/activation-intents.js
+  var activationIntents = new WeakMap;
+
   // src/date.js
   var DATE_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
   var MONTH_RE = /^(\d{4})-(\d{2})$/;
@@ -848,6 +851,7 @@
       this._connected = false;
       this._rendering = false;
       this._source = null;
+      this._hostIntent = null;
       this._sourceStates = new Map;
       this._loadedRanges = new Set;
       this._loadController = null;
@@ -1284,6 +1288,15 @@
         this.focusGrid();
       }
     }
+    _syncRovingDom(date) {
+      for (const cell of this.querySelectorAll('.dp-day[tabindex="0"]')) {
+        if (cell instanceof HTMLElement && cell.dataset.date !== date)
+          cell.tabIndex = -1;
+      }
+      const cell = this.querySelector(`.dp-day[data-date="${CSS.escape(date)}"]`);
+      if (cell instanceof HTMLElement)
+        cell.tabIndex = 0;
+    }
     _moveSelectionDom(previousValue, nextValue) {
       if (previousValue) {
         const prev = this.querySelector(`.dp-day[data-date="${CSS.escape(previousValue)}"]`);
@@ -1344,17 +1357,24 @@
         target.focus();
     }
     async activateDate(date) {
+      const hostIntent = this._hostIntent?.date === date ? this._hostIntent.intent : undefined;
+      this._hostIntent = null;
+      const tagged = (event) => {
+        if (hostIntent !== undefined)
+          activationIntents.set(event, hostIntent);
+        return event;
+      };
       const confirmed = await this.ensureDate(date);
       const state = this.getDateState(date);
       if (!confirmed || state.disabled) {
-        this.dispatchEvent(new CustomEvent("dateinvalid", { detail: { date, state }, bubbles: true }));
+        this.dispatchEvent(tagged(new CustomEvent("dateinvalid", { detail: { date, state }, bubbles: true })));
         return false;
       }
-      const accepted = this.dispatchEvent(new CustomEvent("dateactivate", {
+      const accepted = this.dispatchEvent(tagged(new CustomEvent("dateactivate", {
         detail: { date, state },
         bubbles: true,
         cancelable: true
-      }));
+      })));
       if (!accepted)
         return false;
       if (this.selection === "single") {
@@ -1399,6 +1419,8 @@
       this._reflect("display", this._model.display);
       if (previousDisplay !== this.display)
         this._emitDisplayChange();
+      else
+        this._syncRovingDom(this._model.focused);
       this.activateDate(date);
     }
     _onChange(event) {
@@ -1409,7 +1431,7 @@
       }
       if (target instanceof HTMLInputElement && target.matches(".dp-year-input")) {
         const year = Number(target.value);
-        if (!Number.isInteger(year) || year < 1 || year > 9998) {
+        if (!Number.isInteger(year) || year < 1 || year > 9999) {
           if (this._connected)
             this.render(false);
           return;
@@ -1425,6 +1447,7 @@
       if (!isDate(date))
         return;
       this._model.focused = date;
+      this._syncRovingDom(date);
       this.dispatchEvent(new CustomEvent("datefocus", { detail: { date, state: this.getDateState(date) }, bubbles: true }));
     }
     _onKeyDown(event) {
@@ -1487,8 +1510,8 @@
       const nextKey = stepMonthKey(display, 1);
       const prevDisabled = Boolean(minMonth && prevKey !== null && prevKey < minMonth);
       const nextDisabled = Boolean(maxMonth && nextKey !== null && nextKey > maxMonth);
-      const minYearAttr = this.min ? ` min="${Number(this.min.slice(0, 4))}"` : "";
-      const maxYearAttr = this.max ? ` max="${Number(this.max.slice(0, 4))}"` : "";
+      const minYearAttr = ` min="${this.min ? Number(this.min.slice(0, 4)) : 1}"`;
+      const maxYearAttr = ` max="${this.max ? Number(this.max.slice(0, 4)) : 9999}"`;
       const showWeeks = this.showWeekNumbers && this.firstDay === 1;
       const weekHeader = showWeeks ? `<th scope="col" class="dp-week-heading" abbr="${escapeHtml(this.messages.week)}">#</th>` : "";
       const monthOptions = names.map((name, index) => {
@@ -1946,6 +1969,10 @@
   }
 
   // src/date-field.js
+  function isEditable(input) {
+    return !input.matches(":disabled") && !input.readOnly;
+  }
+
   class DateFieldController {
     constructor(input, options = {}) {
       this.input = input;
@@ -1959,9 +1986,22 @@
       this._attributeObserver = null;
       this.onAttributesChanged = null;
       this.confirm = null;
+      this._generatedDefault = null;
     }
     setLocale(locale) {
+      const generated = this._generatedDefault;
+      const previous = generated ? this.adapter.format(generated) : null;
       this.adapter = createDateAdapter(locale || "");
+      if (generated && this.input.defaultValue === previous) {
+        this.input.defaultValue = this.adapter.format(generated);
+      }
+    }
+    adoptDefault() {
+      const input = this.input;
+      if (input.getAttribute("value") != null || input.defaultValue !== "")
+        return;
+      input.defaultValue = input.value;
+      this._generatedDefault = this.canonical && input.value ? this.canonical : null;
     }
     setMessages(messages) {
       this.messages = messages || {};
@@ -1976,7 +2016,7 @@
       return this.adapter.placeholder;
     }
     get isDisabled() {
-      return this.input.disabled;
+      return this.input.matches(":disabled");
     }
     get isReadOnly() {
       return this.input.readOnly;
@@ -2163,8 +2203,7 @@
       this._timeFields = [null, null];
       this._timeOrderOwned = new Set;
       this._lastFocusEndpoint = "";
-      this._rangeCommitId = 0;
-      this._pendingIntents = new Map;
+      this._activationId = 0;
       this._previewDate = "";
       this._drag = null;
       this._suppressGridClick = false;
@@ -2219,6 +2258,7 @@
           if (this._messages === null)
             this._refreshMessages();
         });
+        this.validate();
       }
     }
     _connectSingle() {
@@ -2248,9 +2288,7 @@
         input.setCustomValidity(this.messages.invalidDate);
       if (this._field.hidden)
         this._field.hidden.defaultValue = this._value;
-      if (input.getAttribute("value") == null && input.defaultValue === "") {
-        input.defaultValue = input.value;
-      }
+      this._field.adoptDefault();
     }
     _discoverTimeFields() {
       this._timeFields = [null, null];
@@ -2307,21 +2345,24 @@
       const adapter = this._adapter();
       const initialStart = isDate(startInput.value) ? startInput.value : adapter.parse(startInput.value);
       const initialEnd = isDate(endInput.value) ? endInput.value : adapter.parse(endInput.value);
+      const startText = startInput.value;
+      const endText = endInput.value;
       this._setRange(initialStart || "", initialEnd || "", { emit: false });
-      if (startInput.value.trim() && !isDate(initialStart))
-        startInput.setCustomValidity(this.messages.invalidDate);
-      if (endInput.value.trim() && !isDate(initialEnd))
-        endInput.setCustomValidity(this.messages.invalidDate);
+      for (const [input, text, initial] of [
+        [startInput, startText, initialStart],
+        [endInput, endText, initialEnd]
+      ]) {
+        if (!text.trim() || isDate(initial))
+          continue;
+        input.value = text;
+        input.setCustomValidity(this.messages.invalidDate);
+      }
       if (this._fields[0].hidden)
         this._fields[0].hidden.defaultValue = this._range.start;
       if (this._fields[1].hidden)
         this._fields[1].hidden.defaultValue = this._range.end;
-      if (startInput.getAttribute("value") == null && startInput.defaultValue === "") {
-        startInput.defaultValue = startInput.value;
-      }
-      if (endInput.getAttribute("value") == null && endInput.defaultValue === "") {
-        endInput.defaultValue = endInput.value;
-      }
+      for (const field of this._fields)
+        field.adoptDefault();
     }
     disconnectedCallback() {
       this._stopDefaultMessages?.();
@@ -2372,8 +2413,10 @@
       if (name === "value") {
         if (this._rangeMode())
           return;
-        if (!newValue || isDate(newValue))
+        if (!newValue || isDate(newValue)) {
+          this._supersedeActivations();
           this._setValue(newValue || "", { emit: false, format: true, reflect: false });
+        }
         return;
       }
       if (name === "locale")
@@ -2398,6 +2441,7 @@
       }
       if (value && !isDate(value))
         throw new TypeError(`Invalid date-picker value: ${value}`);
+      this._supersedeActivations();
       this._setValue(value || "", { emit: false, format: true });
     }
     get range() {
@@ -2407,6 +2451,7 @@
       if (!this._rangeMode())
         throw new TypeError("range is only available on <date-picker range>");
       const { start, end } = normalizeRange(value);
+      this._supersedeActivations();
       this._setRange(start, end);
     }
     get locale() {
@@ -2547,7 +2592,7 @@
       const button = this._buttons[0]?.button;
       if (button)
         button.disabled = input.disabled || input.readOnly;
-      if (this._open && (input.disabled || input.readOnly))
+      if (this._open && !isEditable(input))
         this.hide(false);
     }
     _syncRangeFields() {
@@ -2562,9 +2607,9 @@
       }
       this._syncDragAffordance();
       const active = this._range?.activeEndpoint === "end" ? 1 : 0;
-      if (this._open && (this._fields[active]?.input.disabled || this._fields[active]?.input.readOnly)) {
+      const activeInput = this._fields[active]?.input;
+      if (this._open && activeInput && !isEditable(activeInput))
         this.hide(false);
-      }
     }
     _setRangeAria() {
       if (!this._fields || !this._panel || !this._formatHint)
@@ -2701,15 +2746,23 @@
         this.show({ returnFocus: button });
       }, { signal });
       button.addEventListener("keydown", (event) => this._onTriggerKeyDown("", event), { signal });
+      calendar.addEventListener("click", (event) => this._captureGridIntent(event), { capture: true, signal });
+      calendar.addEventListener("keydown", (event) => this._captureGridIntent(event), {
+        capture: true,
+        signal
+      });
       calendar.addEventListener("dateactivate", (event) => {
         const custom = event;
         const date = custom.detail?.date;
         if (!isDate(date))
           return;
+        const intent = activationIntents.get(custom);
         queueMicrotask(() => {
           if (custom.defaultPrevented || !this._connected)
             return;
-          if (this._input?.disabled || this._input?.readOnly)
+          if (intent && intent.id !== this._activationId)
+            return;
+          if (!this._input || !isEditable(this._input))
             return;
           this._field?.dirty();
           this._setValue(date, { emit: true, format: true });
@@ -2729,7 +2782,12 @@
       const { signal } = controller;
       for (const [index, field] of this._fields.entries()) {
         const endpoint = index === 1 ? "end" : "start";
-        field.input.addEventListener("input", () => field.handleInput(), { signal });
+        field.input.addEventListener("input", () => {
+          field.handleInput();
+          this._orderTags.delete(index);
+          if (!field.isDirty)
+            this._revalidateRange(endpoint);
+        }, { signal });
         field.input.addEventListener("change", () => void this._commitFieldText(endpoint), { signal });
         field.input.addEventListener("blur", () => void this._commitFieldText(endpoint), { signal });
         field.input.addEventListener("focus", (event) => this._onFieldFocus(endpoint, event), { signal });
@@ -2767,10 +2825,9 @@
         queueMicrotask(() => {
           if (custom.defaultPrevented || !this._connected || !this._range)
             return;
-          const intent = this._pendingIntents.get(date);
-          if (intent === undefined || intent.id !== this._rangeCommitId)
+          const intent = activationIntents.get(custom);
+          if (intent === undefined || intent.id !== this._activationId)
             return;
-          this._pendingIntents.delete(date);
           const editable = (bound) => this._boundEditable(bound);
           const result = intent.endpoint ? this._range.moveEndpoint(date, intent.endpoint, editable) : this._range.activate(date, editable);
           if (result.status === "refused") {
@@ -2805,8 +2862,7 @@
       if (!this._range || !calendar)
         return;
       this._range.focus(endpoint);
-      this._rangeCommitId++;
-      this._pendingIntents.clear();
+      this._activationId++;
       this._lastFocusEndpoint = endpoint;
       const target = this._boundCanonical(endpoint) || todayISO();
       calendar.display = monthKey(target);
@@ -2868,8 +2924,7 @@
       this._lastFocusEndpoint = endpoint;
       this._range?.focus(endpoint);
       if (switched) {
-        this._rangeCommitId++;
-        this._pendingIntents.clear();
+        this._activationId++;
       }
       if (!this.openOnFocus || this._suppressFocusOpen)
         return;
@@ -2880,25 +2935,34 @@
         this.show({ moveFocus: false });
     }
     _captureGridIntent(event) {
-      if (!this._rangeMode() || !this._range)
+      if (this._rangeMode() ? !this._range : !this._field)
         return;
       if (event.type === "keydown") {
         const key = event.key;
         if (key !== "Enter" && key !== " ")
           return;
       }
+      if (event.type === "click" && this._suppressGridClick)
+        return;
       if (!(event.target instanceof Element))
         return;
       const cell = event.target.closest(".dp-day[data-date]");
       const date = cell?.getAttribute("data-date") || "";
       if (!isDate(date))
         return;
-      this._pendingIntents.clear();
-      this._pendingIntents.set(date, { id: ++this._rangeCommitId, endpoint: "" });
+      this._attachIntent(date, "");
+    }
+    _attachIntent(date, endpoint) {
+      if (!this._calendar)
+        return;
+      this._calendar._hostIntent = { date, intent: { id: ++this._activationId, endpoint } };
+    }
+    _supersedeActivations() {
+      this._activationId++;
     }
     _boundEditable(bound) {
       const field = this._fields?.[bound === "end" ? 1 : 0];
-      return field != null && !field.input.disabled && !field.input.readOnly;
+      return field != null && isEditable(field.input);
     }
     _applyRangeTransition(transition) {
       const fields = this._fields;
@@ -3046,8 +3110,7 @@
         return;
       }
       const target = drag.endpoint === "start" ? transition.range.start : transition.range.end;
-      this._pendingIntents.clear();
-      this._pendingIntents.set(target, { id: ++this._rangeCommitId, endpoint: drag.endpoint });
+      this._attachIntent(target, drag.endpoint);
       this._calendar?.activateDate(target);
     }
     _onGridPointerCancel(event) {
@@ -3253,7 +3316,7 @@
       const field = fields[index];
       if (!field)
         return false;
-      if (options.user === true && (field.input.disabled || field.input.readOnly))
+      if (options.user === true && !isEditable(field.input))
         return false;
       const next = value || "";
       const previous = field.canonical;
@@ -3337,8 +3400,8 @@
       const [startInput, endInput] = this._timeFields;
       const bounds = ["start", "end"];
       const inputs = [startInput, endInput];
-      const startValue = startInput && !startInput.disabled ? startInput.value.trim() : "";
-      const endValue = endInput && !endInput.disabled ? endInput.value.trim() : "";
+      const startValue = startInput && !startInput.matches(":disabled") ? startInput.value.trim() : "";
+      const endValue = endInput && !endInput.matches(":disabled") ? endInput.value.trim() : "";
       const inverted = Boolean(startInput && endInput && startValue && endValue) && isTime(startValue) && isTime(endValue) && compareTimes(endValue, startValue) < 0;
       for (const [index, bound] of bounds.entries()) {
         const input = inputs[index];
@@ -3417,12 +3480,12 @@
         return "";
       const preferred = this._lastFocusEndpoint || "start";
       const preferredIndex = preferred === "end" ? 1 : 0;
-      if (!this._fields[preferredIndex].input.disabled && !this._fields[preferredIndex].input.readOnly) {
+      if (isEditable(this._fields[preferredIndex].input)) {
         return preferred;
       }
       const alternative = preferred === "end" ? "start" : "end";
       const alternativeIndex = alternative === "end" ? 1 : 0;
-      if (!this._fields[alternativeIndex].input.disabled && !this._fields[alternativeIndex].input.readOnly) {
+      if (isEditable(this._fields[alternativeIndex].input)) {
         return alternative;
       }
       return "";
@@ -3434,6 +3497,8 @@
           return true;
         for (const [index, field] of fields.entries()) {
           const result = await field.commit({ moveDisplay: false });
+          if (result.status === "invalid")
+            this._orderTags.delete(index);
           if (result.status === "ok" || result.status === "clear") {
             const which = index === 1 ? "end" : "start";
             this._setBound(which, result.value || "", { format: result.status === "ok" });
@@ -3446,11 +3511,7 @@
       const input = this._field?.input;
       if (!input)
         return true;
-      if (!input.value.trim()) {
-        input.setCustomValidity("");
-      } else {
-        await this._commitText(false, { force: true, moveDisplay: false });
-      }
+      await this._commitText(false, { force: true, moveDisplay: false });
       this._revalidateTimeOrder("start");
       this._revalidateTimeOrder("end");
       const timesValid = this._timeFields.every((timeInput) => timeInput?.checkValidity() ?? true);
@@ -3468,7 +3529,7 @@
         this._activateRangeEndpoint(endpoint);
       } else {
         const input = this._input;
-        if (!input || input.disabled || input.readOnly)
+        if (!input || !isEditable(input))
           return;
         const target = this._value || this._adapter().parse(input.value) || todayISO();
         calendar.display = monthKey(target);
@@ -3510,8 +3571,7 @@
       } catch {}
       this._open = false;
       this._setExpanded(false);
-      this._rangeCommitId++;
-      this._pendingIntents.clear();
+      this._supersedeActivations();
       this._suppressGridClick = false;
       if (this._drag) {
         this._releaseDragCapture(this._drag.pointerId);
@@ -3534,7 +3594,7 @@
       if (active) {
         const index = active === "end" ? 1 : 0;
         const field = this._fields?.[index];
-        if (field && !field.input.disabled && !field.input.readOnly)
+        if (field && isEditable(field.input))
           return active;
       }
       return this._resolveRangeEndpoint();

package/dist/date-picker.min.css

@@ -1 +1 @@
-:where(date-calendar,date-picker){--dp-bg:#fff;--dp-fg:#1f2328;--dp-muted:color-mix(in srgb,var(--dp-fg)58%,var(--dp-bg));--dp-border:color-mix(in srgb,var(--dp-fg)16%,var(--dp-bg));--dp-hover:color-mix(in srgb,var(--dp-fg)5%,var(--dp-bg));--dp-accent:#2563eb;--dp-accent-fg:#fff;--dp-focus:var(--dp-accent);--dp-focus-width:2px;--dp-radius:.5rem;--dp-day-size:2.75rem;--dp-gap:.375rem;--dp-header-control-size:2.25rem;--dp-header-block-gap:.75rem;--dp-row-gap:.375rem;--dp-picker-button-size:2.5rem;--dp-year-inline-size:5.5rem;--dp-day-radius:calc(var(--dp-radius)*.75);color:var(--dp-fg);font:inherit}.dp-visually-hidden{position:absolute!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;block-size:1px!important;inline-size:1px!important;margin:-1px!important;padding:0!important}date-calendar{display:block;inline-size:max-content;max-inline-size:100%}.dp-calendar-shell{inline-size:max-content;max-inline-size:100%}.dp-calendar-header{display:grid;grid-template-columns:minmax(0,1fr)var(--dp-year-inline-size)auto auto;align-items:stretch;gap:var(--dp-gap);margin-block-end:var(--dp-header-block-gap)}date-calendar[data-year-first] .dp-calendar-header{grid-template-columns:var(--dp-year-inline-size)minmax(0,1fr)auto auto}.dp-calendar-header :where(button,select,input){box-sizing:border-box;min-inline-size:0}.dp-calendar-header .dp-skin{min-block-size:var(--dp-header-control-size);border:1px solid var(--dp-border);border-radius:calc(var(--dp-radius)*.75);background:var(--dp-bg);color:var(--dp-fg);font:inherit;padding-block-start:.15rem;padding-block-end:.15rem;line-height:1.2}.dp-calendar-header input.dp-skin{padding-inline-start:.45rem;padding-inline-end:.45rem}.dp-month-select{overflow:hidden;text-overflow:ellipsis;inline-size:100%}.dp-month-select.dp-skin{appearance:none;background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:calc(100% - .9rem),calc(100% - .65rem);background-repeat:no-repeat;background-size:.3rem .3rem;padding-inline-start:.45rem;padding-inline-end:2rem}[dir=rtl] .dp-month-select.dp-skin,html[dir=rtl] .dp-month-select.dp-skin{background-position:.9rem,.65rem}.dp-year-input{inline-size:100%}.dp-nav.dp-skin{display:grid;inline-size:var(--dp-header-control-size);cursor:pointer;place-items: center;padding:0;font-size:1.35rem;line-height:1}.dp-nav svg{display:block;pointer-events:none;block-size:1rem;inline-size:1rem}.dp-calendar-header .dp-skin:disabled,.dp-picker-button:disabled{cursor:not-allowed;opacity:.45}.dp-nav.dp-skin:hover:not(:disabled){background:var(--dp-hover)}.dp-calendar-header .dp-skin:focus-visible{outline:var(--dp-focus-width)solid var(--dp-focus);outline-offset:calc(var(--dp-focus-width)*-1)}date-picker>input:not([type=hidden]):focus-visible{outline:var(--dp-focus-width)solid var(--dp-focus);outline-offset:calc(var(--dp-focus-width)*-1)}.dp-day:focus-visible{outline:var(--dp-focus-width)solid var(--dp-focus);outline-offset:calc(var(--dp-focus-width)*-1)}.dp-day:hover:not([data-disabled=true]):not([data-selected=true]):not([data-range-start=true]):not([data-range-end=true]){background:var(--dp-hover)}.dp-grid{border-collapse:separate;border-spacing:0 var(--dp-row-gap);table-layout:fixed}.dp-grid :where(th,td){box-sizing:border-box;inline-size:var(--dp-day-size);block-size:var(--dp-day-size);text-align:center;padding:0}.dp-grid thead th{color:var(--dp-muted);block-size:1.5rem;font-size:.72rem;font-weight:500}.dp-day{position:relative;border-radius:var(--dp-day-radius);cursor:pointer;outline:none;vertical-align:middle;border:1px solid #0000;font-size:.875rem}.dp-day:-webkit-any([data-selected=true],[data-range-start=true],[data-range-end=true]):focus-visible{outline-color:var(--dp-accent-fg)}.dp-day:-moz-any([data-selected=true],[data-range-start=true],[data-range-end=true]):focus-visible{outline-color:var(--dp-accent-fg)}.dp-day:is([data-selected=true],[data-range-start=true],[data-range-end=true]):focus-visible{outline-color:var(--dp-accent-fg)}.dp-day[data-outside-month=true]{color:var(--dp-muted)}.dp-day[data-selected=true]{background:var(--dp-accent);color:var(--dp-accent-fg)}.dp-day[data-today=true]:not(:-webkit-any([data-selected=true],[data-range-start=true],[data-range-end=true])){border-color:var(--dp-accent)}.dp-day[data-today=true]:not(:-moz-any([data-selected=true],[data-range-start=true],[data-range-end=true])){border-color:var(--dp-accent)}.dp-day[data-today=true]:not(:is([data-selected=true],[data-range-start=true],[data-range-end=true])){border-color:var(--dp-accent)}.dp-day[data-disabled=true]{cursor:not-allowed;opacity:.42}.dp-day[data-range-start=true],.dp-day[data-range-end=true]{background:var(--dp-accent);color:var(--dp-accent-fg)}.dp-day[data-in-range=true]{background:color-mix(in srgb,var(--dp-accent)18%,var(--dp-bg));border-radius:0}.dp-day[data-range-start=true]:has(+[data-in-range=true],+[data-range-end=true]):not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-top-right-radius:0;border-bottom-right-radius:0}.dp-day[data-range-start=true]:has(+[data-in-range=true],+[data-range-end=true]):not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-top-right-radius:0;border-bottom-right-radius:0}.dp-day[data-range-start=true]:has(+[data-in-range=true],+[data-range-end=true]):not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-top-right-radius:0;border-bottom-right-radius:0}.dp-day[data-range-start=true]:has(+[data-in-range=true],+[data-range-end=true]):-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-top-left-radius:0;border-bottom-left-radius:0}.dp-day[data-range-start=true]:has(+[data-in-range=true],+[data-range-end=true]):-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-top-left-radius:0;border-bottom-left-radius:0}.dp-day[data-range-start=true]:has(+[data-in-range=true],+[data-range-end=true]):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-top-left-radius:0;border-bottom-left-radius:0}.dp-day:-webkit-any([data-in-range=true],[data-range-start=true])+.dp-day[data-range-end=true]:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-top-left-radius:0;border-bottom-left-radius:0}.dp-day:-moz-any([data-in-range=true],[data-range-start=true])+.dp-day[data-range-end=true]:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-top-left-radius:0;border-bottom-left-radius:0}.dp-day:is([data-in-range=true],[data-range-start=true])+.dp-day[data-range-end=true]:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-top-left-radius:0;border-bottom-left-radius:0}.dp-day:-webkit-any([data-in-range=true],[data-range-start=true])+.dp-day[data-range-end=true]:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-top-right-radius:0;border-bottom-right-radius:0}.dp-day:-moz-any([data-in-range=true],[data-range-start=true])+.dp-day[data-range-end=true]:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-top-right-radius:0;border-bottom-right-radius:0}.dp-day:is([data-in-range=true],[data-range-start=true])+.dp-day[data-range-end=true]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-top-right-radius:0;border-bottom-right-radius:0}.dp-day[data-in-range=true]:first-of-type:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-top-left-radius:var(--dp-day-radius);border-bottom-left-radius:var(--dp-day-radius)}.dp-day[data-in-range=true]:first-of-type:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-top-left-radius:var(--dp-day-radius);border-bottom-left-radius:var(--dp-day-radius)}.dp-day[data-in-range=true]:first-of-type:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-top-left-radius:var(--dp-day-radius);border-bottom-left-radius:var(--dp-day-radius)}.dp-day[data-in-range=true]:first-of-type:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-top-right-radius:var(--dp-day-radius);border-bottom-right-radius:var(--dp-day-radius)}.dp-day[data-in-range=true]:first-of-type:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-top-right-radius:var(--dp-day-radius);border-bottom-right-radius:var(--dp-day-radius)}.dp-day[data-in-range=true]:first-of-type:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-top-right-radius:var(--dp-day-radius);border-bottom-right-radius:var(--dp-day-radius)}.dp-day[data-in-range=true]:last-of-type:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-top-right-radius:var(--dp-day-radius);border-bottom-right-radius:var(--dp-day-radius)}.dp-day[data-in-range=true]:last-of-type:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-top-right-radius:var(--dp-day-radius);border-bottom-right-radius:var(--dp-day-radius)}.dp-day[data-in-range=true]:last-of-type:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-top-right-radius:var(--dp-day-radius);border-bottom-right-radius:var(--dp-day-radius)}.dp-day[data-in-range=true]:last-of-type:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-top-left-radius:var(--dp-day-radius);border-bottom-left-radius:var(--dp-day-radius)}.dp-day[data-in-range=true]:last-of-type:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-top-left-radius:var(--dp-day-radius);border-bottom-left-radius:var(--dp-day-radius)}.dp-day[data-in-range=true]:last-of-type:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-top-left-radius:var(--dp-day-radius);border-bottom-left-radius:var(--dp-day-radius)}[data-range-preview] .dp-day:-webkit-any([data-range-start=true],[data-range-end=true]){background:color-mix(in srgb,var(--dp-accent)58%,var(--dp-bg))}[data-range-preview] .dp-day:-moz-any([data-range-start=true],[data-range-end=true]){background:color-mix(in srgb,var(--dp-accent)58%,var(--dp-bg))}[data-range-preview] .dp-day:is([data-range-start=true],[data-range-end=true]){background:color-mix(in srgb,var(--dp-accent)58%,var(--dp-bg))}[data-range-preview] .dp-day[data-in-range=true]{background:color-mix(in srgb,var(--dp-accent)11%,var(--dp-bg))}[data-range-drag] .dp-day:-webkit-any([data-range-start=true],[data-range-end=true]){cursor:grab}[data-range-drag] .dp-day:-moz-any([data-range-start=true],[data-range-end=true]){cursor:grab}[data-range-drag] .dp-day:is([data-range-start=true],[data-range-end=true]){cursor:grab}[data-range-drag=active],[data-range-drag=active] .dp-day{cursor:grabbing}.dp-day-number{display:block;font-variant-numeric:tabular-nums}.dp-day[data-disabled=true]:focus-visible{opacity:1}.dp-day[data-disabled=true]:focus-visible .dp-day-number{color:var(--dp-muted)}.dp-day-extra{position:absolute;display:flex;pointer-events:none;justify-content:center;gap:2px;min-block-size:.35rem;font-size:.55rem;line-height:1;bottom:1px;left:2px;right:2px}.dp-week-number,.dp-week-heading{color:var(--dp-muted);font-size:.65rem;font-weight:500;inline-size:1.6rem!important}date-picker{position:relative;display:inline-grid;grid-template-columns:minmax(0,1fr);align-items:stretch;max-inline-size:100%}date-picker>input:not([type=hidden]){min-inline-size:0}date-picker>input:not([type=hidden]):not([type=time]){grid-column:1;grid-row:1;box-sizing:border-box;inline-size:100%;padding-inline-end:calc(var(--dp-picker-button-size) + .5rem)}.dp-picker-button{display:grid;grid-column:1;grid-row:1;inline-size:var(--dp-picker-button-size);color:var(--dp-fg);font:inherit;cursor:pointer;background:0 0;border:0;place-self:stretch end;place-items: center;min-inline-size:0}.dp-picker-button:focus-visible{outline:var(--dp-focus-width)solid var(--dp-focus);outline-offset:-5px;border-radius:var(--dp-radius)}date-picker:has(>[data-time-start],>[data-time-end]){grid-template-columns:minmax(0,1fr)minmax(0,1fr);column-gap:var(--dp-gap)}date-picker:has(>[data-time-start]):has(>[data-time-end]){grid-template-columns:minmax(0,1fr)minmax(0,1fr)minmax(0,1fr)}date-picker>input[data-time-start]{grid-column:2;grid-row:1;min-inline-size:0}date-picker>input[data-time-end]{grid-column:3;grid-row:1;min-inline-size:0}date-picker[range]{row-gap:var(--dp-gap)}date-picker[range]>input[data-range-start]{grid-row:1}date-picker[range]>input[data-range-end]{grid-row:2}date-picker[range]>.dp-picker-button[data-endpoint=start]{grid-row:1}date-picker[range]>.dp-picker-button[data-endpoint=end]{grid-row:2}.dp-picker-panel[popover]{position:fixed;border:1px solid var(--dp-border);border-radius:var(--dp-radius);background:var(--dp-bg);color:var(--dp-fg);max-block-size:var(--available-height,90svh);overflow:auto;max-inline-size:calc(100vi - 1rem);margin:0;padding:.875rem 1rem;inset:auto;box-shadow:0 .5rem 1.5rem #0f172a1f}.dp-picker-panel:not(:popover-open){display:none}@media (forced-colors:active){.dp-month-select.dp-skin,[dir=rtl] .dp-month-select.dp-skin{appearance:auto;background-image:none;padding-inline-start:.45rem;padding-inline-end:.45rem}.dp-day:-webkit-any([data-selected=true],[data-range-start=true],[data-range-end=true]){color:canvastext;background-color:canvas;border:2px solid highlight}.dp-day:-moz-any([data-selected=true],[data-range-start=true],[data-range-end=true]){color:canvastext;background-color:canvas;border:2px solid highlight}.dp-day:is([data-selected=true],[data-range-start=true],[data-range-end=true]){color:canvastext;background-color:canvas;border:2px solid highlight}.dp-day[data-in-range=true]{color:canvastext}.dp-day[data-in-range=true]:after{content:"";position:absolute;background-color:highlight;block-size:1px;bottom:4px;left:3px;right:3px}.dp-day[data-today=true]{border-color:highlight}.dp-day-extra{color:canvastext;forced-color-adjust:none}}
+:where(date-calendar,date-picker){--dp-bg: #ffffff;--dp-fg: #1f2328;--dp-muted: color-mix(in srgb,var(--dp-fg) 58%,var(--dp-bg));--dp-border: color-mix(in srgb,var(--dp-fg) 16%,var(--dp-bg));--dp-hover: color-mix(in srgb,var(--dp-fg) 5%,var(--dp-bg));--dp-accent: #2563eb;--dp-accent-fg: #fff;--dp-focus: var(--dp-accent);--dp-focus-width: 2px;--dp-radius: 0.5rem;--dp-day-size: 2.75rem;--dp-gap: 0.375rem;--dp-header-control-size: 2.25rem;--dp-header-block-gap: 0.75rem;--dp-row-gap: 0.375rem;--dp-picker-button-size: 2.5rem;--dp-year-inline-size: 5.5rem;--dp-day-radius: calc(var(--dp-radius) * 0.75);color: var(--dp-fg);font: inherit}.dp-visually-hidden{position: absolute !important;inline-size: 1px !important;block-size: 1px !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;clip: rect(0 0 0 0) !important;white-space: nowrap !important;border: 0 !important}date-calendar{display: block;inline-size: max-content;max-inline-size: 100%}.dp-calendar-shell{inline-size: max-content;max-inline-size: 100%}.dp-calendar-header{display: grid;grid-template-columns: minmax(0,1fr) var(--dp-year-inline-size) auto auto;align-items: stretch;gap: var(--dp-gap);margin-block-end: var(--dp-header-block-gap)}date-calendar[data-year-first] .dp-calendar-header{grid-template-columns: var(--dp-year-inline-size) minmax(0,1fr) auto auto}.dp-calendar-header :where(button,select,input){box-sizing: border-box;min-inline-size: 0}.dp-calendar-header .dp-skin{min-block-size: var(--dp-header-control-size);padding-block: 0.15rem;border: 1px solid var(--dp-border);border-radius: calc(var(--dp-radius) * 0.75);background: var(--dp-bg);color: var(--dp-fg);font: inherit;line-height: 1.2}.dp-calendar-header input.dp-skin{padding-inline: 0.45rem}.dp-month-select{inline-size: 100%;overflow: hidden;text-overflow: ellipsis}.dp-month-select.dp-skin{appearance: none;padding-inline: 0.45rem 2rem;background-image: linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position: calc(100% - 0.9rem) 50%,calc(100% - 0.65rem) 50%;background-size: 0.3rem 0.3rem;background-repeat: no-repeat}[dir="rtl"] .dp-month-select.dp-skin,html[dir="rtl"] .dp-month-select.dp-skin{background-position: 0.9rem 50%,0.65rem 50%}.dp-year-input{inline-size: 100%}.dp-nav.dp-skin{display: grid;place-items: center;inline-size: var(--dp-header-control-size);padding: 0;font-size: 1.35rem;line-height: 1;cursor: pointer}.dp-nav svg{display: block;inline-size: 1rem;block-size: 1rem;pointer-events: none}.dp-calendar-header .dp-skin:disabled,.dp-picker-button:disabled{cursor: not-allowed;opacity: 0.45}.dp-nav.dp-skin:hover:not(:disabled){background: var(--dp-hover)}.dp-calendar-header .dp-skin:focus-visible,date-picker>input:not([type="hidden"]):focus-visible,.dp-day:focus-visible{outline: var(--dp-focus-width) solid var(--dp-focus);outline-offset: calc(var(--dp-focus-width) * -1)}.dp-day:hover:not([data-disabled="true"]):not([data-selected="true"]):not([data-range-start="true"]):not( [data-range-end="true"] ){background: var(--dp-hover)}.dp-grid{border-collapse: separate;border-spacing: 0 var(--dp-row-gap);table-layout: fixed}.dp-grid :where(th,td){box-sizing: border-box;inline-size: var(--dp-day-size);block-size: var(--dp-day-size);padding: 0;text-align: center}.dp-grid thead th{block-size: 1.5rem;color: var(--dp-muted);font-size: 0.72rem;font-weight: 500}.dp-day{position: relative;border: 1px solid transparent;border-radius: var(--dp-day-radius);cursor: pointer;outline: none;vertical-align: middle;font-size: 0.875rem}.dp-day:is([data-selected="true"],[data-range-start="true"],[data-range-end="true"]):focus-visible{outline-color: var(--dp-accent-fg)}.dp-day[data-outside-month="true"]{color: var(--dp-muted)}.dp-day[data-selected="true"]{background: var(--dp-accent);color: var(--dp-accent-fg)}.dp-day[data-today="true"]:not([data-selected="true"],[data-range-start="true"],[data-range-end="true"]){border-color: var(--dp-accent)}.dp-day[data-disabled="true"]{cursor: not-allowed;opacity: 0.42}.dp-day[data-range-start="true"],.dp-day[data-range-end="true"]{background: var(--dp-accent);color: var(--dp-accent-fg)}.dp-day[data-in-range="true"]{border-radius: 0;background: color-mix(in srgb,var(--dp-accent) 18%,var(--dp-bg))}.dp-day[data-range-start="true"]:has(+ [data-in-range="true"],+ [data-range-end="true"]){border-start-end-radius: 0;border-end-end-radius: 0}.dp-day:is([data-in-range="true"],[data-range-start="true"]) + .dp-day[data-range-end="true"]{border-start-start-radius: 0;border-end-start-radius: 0}.dp-day[data-in-range="true"]:first-of-type{border-start-start-radius: var(--dp-day-radius);border-end-start-radius: var(--dp-day-radius)}.dp-day[data-in-range="true"]:last-of-type{border-start-end-radius: var(--dp-day-radius);border-end-end-radius: var(--dp-day-radius)}[data-range-preview] .dp-day:is([data-range-start="true"],[data-range-end="true"]){background: color-mix(in srgb,var(--dp-accent) 58%,var(--dp-bg))}[data-range-preview] .dp-day[data-in-range="true"]{background: color-mix(in srgb,var(--dp-accent) 11%,var(--dp-bg))}[data-range-drag] .dp-day:is([data-range-start="true"],[data-range-end="true"]){cursor: grab}[data-range-drag="active"],[data-range-drag="active"] .dp-day{cursor: grabbing}.dp-day-number{display: block;font-variant-numeric: tabular-nums}.dp-day[data-disabled="true"]:focus-visible{opacity: 1}.dp-day[data-disabled="true"]:focus-visible .dp-day-number{color: var(--dp-muted)}.dp-day-extra{position: absolute;inset-inline: 2px;inset-block-end: 1px;display: flex;justify-content: center;gap: 2px;min-block-size: 0.35rem;font-size: 0.55rem;line-height: 1;pointer-events: none}.dp-week-number,.dp-week-heading{inline-size: 1.6rem !important;color: var(--dp-muted);font-size: 0.65rem;font-weight: 500}date-picker{position: relative;display: inline-grid;grid-template-columns: minmax(0,1fr);align-items: stretch;max-inline-size: 100%}date-picker>input:not([type="hidden"]){min-inline-size: 0}date-picker>input:not([type="hidden"]):not([type="time"]){grid-column: 1;grid-row: 1;box-sizing: border-box;inline-size: 100%;padding-inline-end: calc(var(--dp-picker-button-size) + 0.5rem)}.dp-picker-button{display: grid;place-items: center;grid-column: 1;grid-row: 1;justify-self: end;align-self: stretch;inline-size: var(--dp-picker-button-size);min-inline-size: 0;border: 0;background: transparent;color: var(--dp-fg);font: inherit;cursor: pointer}.dp-picker-button:focus-visible{outline: var(--dp-focus-width) solid var(--dp-focus);outline-offset: -5px;border-radius: var(--dp-radius)}date-picker:has(>[data-time-start],>[data-time-end]){grid-template-columns: minmax(0,1fr) minmax(0,1fr);column-gap: var(--dp-gap)}date-picker:has(>[data-time-start]):has(>[data-time-end]){grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}date-picker>input[data-time-start]{grid-column: 2;grid-row: 1;min-inline-size: 0}date-picker>input[data-time-end]{grid-column: 3;grid-row: 1;min-inline-size: 0}date-picker[range]{row-gap: var(--dp-gap)}date-picker[range]>input[data-range-start]{grid-row: 1}date-picker[range]>input[data-range-end]{grid-row: 2}date-picker[range]>.dp-picker-button[data-endpoint="start"]{grid-row: 1}date-picker[range]>.dp-picker-button[data-endpoint="end"]{grid-row: 2}.dp-picker-panel[popover]{position: fixed;inset: auto;margin: 0;padding: 0.875rem 1rem;border: 1px solid var(--dp-border);border-radius: var(--dp-radius);background: var(--dp-bg);color: var(--dp-fg);box-shadow: 0 0.5rem 1.5rem rgb(15 23 42 / 0.12);max-block-size: var(--available-height,90svh);max-inline-size: calc(100vi - 1rem);overflow: auto}.dp-picker-panel:not(:popover-open){display: none}@media (forced-colors: active){.dp-month-select.dp-skin,[dir="rtl"] .dp-month-select.dp-skin{appearance: auto;background-image: none;padding-inline: 0.45rem}.dp-day:is([data-selected="true"],[data-range-start="true"],[data-range-end="true"]){border: 2px solid Highlight;background-color: Canvas;color: CanvasText}.dp-day[data-in-range="true"]{color: CanvasText}.dp-day[data-in-range="true"]::after{content: "";position: absolute;inset-inline: 3px;inset-block-end: 4px;block-size: 1px;background-color: Highlight}.dp-day[data-today="true"]{border-color: Highlight}.dp-day-extra{color: CanvasText;forced-color-adjust: none}}