@golemui/gui-lit 1.1.0 → 1.1.1-rc.1

package/{range-date-input-D--AqBMv.js → range-date-input-Br7XqQPK.js}

@@ -1,21 +1,21 @@
 import { LitElement as v, nothing as p, html as u } from "lit";
-import { property as s, customElement as m } from "lit/decorators.js";
+import { property as r, customElement as m } from "lit/decorators.js";
 import { classMap as y } from "lit/directives/class-map.js";
-import { G as b, b as f, c as D } from "./templates-Dk1jxLwS.js";
-import { n as _, G as P, r as h, q as E } from "./part-templates-Db871PS3.js";
-import { g as S, p as c, m as C, t as g } from "./date-Bj9mI3GU.js";
-import { r as $, f as k, b as I, a as R, c as w, s as A } from "./pill-ranges-DCqDmpkk.js";
-import { c as O, o as L } from "./range-commit-8-MmYUyo.js";
-import "./pills-Be1UrLgq.js";
-import { styleMap as B } from "lit-html/directives/style-map.js";
-var G = Object.defineProperty, q = Object.getOwnPropertyDescriptor, r = (t, e, a, n) => {
-  for (var l = n > 1 ? void 0 : n ? q(e, a) : e, o = t.length - 1, d; o >= 0; o--)
-    (d = t[o]) && (l = (n ? d(e, a, l) : d(l)) || l);
-  return n && l && G(e, a, l), l;
+import { G as b, b as f, c as _ } from "./templates-Dmr34nwp.js";
+import { n as D, G as P, r as h, q as S, P as E } from "./part-templates-VORbpgs2.js";
+import { a as A, p as c, m as L, t as g } from "./date-DBuYpvcO.js";
+import { r as C, f as $, b as k, a as I, c as R, s as w } from "./pill-ranges-DpvWwP-3.js";
+import { c as O, o as B } from "./range-commit-8-MmYUyo.js";
+import "./pills-BDMO2NiR.js";
+import { styleMap as G } from "lit-html/directives/style-map.js";
+var q = Object.defineProperty, T = Object.getOwnPropertyDescriptor, a = (t, e, l, n) => {
+  for (var s = n > 1 ? void 0 : n ? T(e, l) : e, o = t.length - 1, d; o >= 0; o--)
+    (d = t[o]) && (s = (n ? d(e, l, s) : d(s)) || s);
+  return n && s && q(e, l, s), s;
 };
 let i = class extends v {
   constructor() {
-    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = void 0, this.errors = [], this.showErrors = !0, this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.icon = "", this.hint = void 0, this.value = [], this.invalidDateMessage = void 0, this.removePillAriaLabel = void 0, this.startDateAriaLabel = void 0, this.endDateAriaLabel = void 0, this.separator = void 0, this.inputBlockClass = "gui-range-date-input", this.groups = ["start", "end"], this.partDescriptors = _(), this._validationTriggered = !1, this._parts = new P(this, {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = void 0, this.errors = [], this.showErrors = !0, this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.icon = "", this.hint = void 0, this.dayAriaLabel = void 0, this.monthAriaLabel = void 0, this.yearAriaLabel = void 0, this.value = [], this.invalidDateMessage = void 0, this.removePillAriaLabel = void 0, this.startDateAriaLabel = void 0, this.endDateAriaLabel = void 0, this.separator = void 0, this.inputBlockClass = "gui-range-date-input", this.groups = ["start", "end"], this.partDescriptors = D(), this._validationTriggered = !1, this._parts = new P(this, {
       blockClass: this.inputBlockClass,
       groups: this.groups,
       getDescriptor: (t) => this.getPartDescriptor(t),
@@ -45,12 +45,13 @@ let i = class extends v {
           errors: this.errors,
           readonly: this.readOnly,
           disabled: this.disabled,
-          touched: this.touched
+          touched: this.touched,
+          required: this.required
         }
       })
     }), this.onPillRemoveEvent = (t) => {
       if (this.disabled || this.readOnly) return;
-      const e = $(this.value, t.detail.key);
+      const e = C(this.value, t.detail.key);
       e && (this.value = e.next, this.dispatchEvent(
         new CustomEvent("change", {
           detail: { value: this.value },
@@ -63,7 +64,7 @@ let i = class extends v {
         )?.focus();
       }));
     }, this.onPillClickEvent = (t) => {
-      const e = k(this.getSortedPills(), t.detail.key);
+      const e = $(this.getSortedPills(), t.detail.key);
       e && this.onPillClick(e);
     };
   }
@@ -90,16 +91,19 @@ let i = class extends v {
     }, e = {
       blockClass: this.inputBlockClass,
       groups: this.groups,
-      formatParts: S(this.localeId),
-      getDescriptor: (l) => this.getPartDescriptor(l),
+      formatParts: A(this.localeId),
+      getDescriptor: (s) => this.getPartDescriptor(s),
       getDisplayValue: this._parts.getPartDisplay,
-      required: this.required,
+      getPartAriaLabel: (s, o) => ({
+        day: this.dayAriaLabel,
+        month: this.monthAriaLabel,
+        year: this.yearAriaLabel
+      })[o] ?? E[o],
       disabled: this.disabled,
       partsReadonly: !!this.readOnly
-    }, a = I(
+    }, l = k(
       this.getSortedPills(),
-      (l) => R(l, (o) => w(o, this.localeId)),
-      this.removePillAriaLabel ?? "Remove date"
+      (s) => I(s, (o) => R(o, this.localeId))
     ), n = {
       "gui-widget-icon": !0,
       [this.icon]: !!this.icon
@@ -113,19 +117,25 @@ let i = class extends v {
           role="group"
           aria-label=${this.label ?? "Date range input"}
         >
-          ${this.icon ? u`<span class=${y(n)} data-icon=${this.icon}></span>` : p}
+          ${this.icon ? u`<span
+                class=${y(n)}
+                data-icon=${this.icon}
+                aria-hidden="true"
+              ></span>` : p}
 
           <gui-pills
             class="gui-range-date-input__pills"
-            style=${B(a.length ? {} : { "min-width": 0 })}
-            .items=${a}
+            style=${G(l.length ? {} : { "min-width": 0 })}
+            .uid=${this.uid}
+            .toolbarAriaLabel=${"Selected date ranges"}
+            .items=${l}
             .removable=${!0}
             .clickable=${!0}
             .bubble=${!0}
             ?disabled=${this.disabled}
             ?readonly=${this.readOnly}
             .removeAriaLabel=${this.removePillAriaLabel ?? "Remove date"}
-            .compactAriaLabel=${`${a.length} date ranges`}
+            .compactAriaLabel=${`${l.length} date ranges`}
             @pillremove=${this.onPillRemoveEvent}
             @pillclick=${this.onPillClickEvent}
           ></gui-pills>
@@ -151,12 +161,12 @@ let i = class extends v {
           </div>
         </div>
 
-        ${this.showErrors && this.errors?.length ? D(this.uid, t) : p}
+        ${this.showErrors && this.errors?.length ? _(this.uid, t) : p}
       </div>
     `;
   }
   getSortedPills() {
-    return A(
+    return w(
       this.value,
       (t, e) => c(t).getTime() - c(e).getTime()
     );
@@ -171,11 +181,11 @@ let i = class extends v {
     );
   }
   validateDateParts(t) {
-    const { result: e, writeBacks: a } = E(this._parts.values[t] ?? {}, {
+    const { result: e, writeBacks: l } = S(this._parts.values[t] ?? {}, {
       descriptors: this.partDescriptors,
       invalidDateMessage: this.invalidDateMessage
     });
-    return this._parts.applyWriteBacks(t, a), e.kind === "invalid" ? { kind: "invalid", message: e.message } : e.kind === "valid" && e.instant ? { kind: "valid", value: e.instant } : { kind: "incomplete" };
+    return this._parts.applyWriteBacks(t, l), e.kind === "invalid" ? { kind: "invalid", message: e.message } : e.kind === "valid" && e.instant ? { kind: "valid", value: e.instant } : { kind: "incomplete" };
   }
   /**
    * Re-parses both endpoints so per-endpoint problems (impossible date, out of
@@ -192,16 +202,16 @@ let i = class extends v {
    * Shared by the Enter commit and by {@link revalidate}.
    */
   evaluateRange() {
-    const { start: t, end: e } = this.syncParts(), a = O(t, e, this.value, {
+    const { start: t, end: e } = this.syncParts(), l = O(t, e, this.value, {
       // Swap if end < start
-      order: (n, l) => L(n, l, (o, d) => o.getTime() - d.getTime()),
-      toRange: ({ start: n, end: l }) => {
-        const o = g(n), d = g(l);
+      order: (n, s) => B(n, s, (o, d) => o.getTime() - d.getTime()),
+      toRange: ({ start: n, end: s }) => {
+        const o = g(n), d = g(s);
         return o === d ? { start: o } : { start: o, end: d };
       },
-      merge: C
+      merge: L
     });
-    return a.kind === "invalid" && this._parts.surfaceInputError(a.message), a.kind === "incomplete" && this._parts.clearSurfacedInputError(this.value ?? []), a;
+    return l.kind === "invalid" && this._parts.surfaceInputError(l.message), l.kind === "incomplete" && this._parts.clearSurfacedInputError(this.value ?? []), l;
   }
   /**
    * Once the user has attempted a commit, every later edit re-runs validation
@@ -235,58 +245,67 @@ let i = class extends v {
     this._parts.clearGroup("start"), this._parts.clearGroup("end");
   }
 };
-r([
-  s({ type: String })
+a([
+  r({ type: String })
 ], i.prototype, "uid", 2);
-r([
-  s({ type: String })
+a([
+  r({ type: String })
 ], i.prototype, "label", 2);
-r([
-  s({ type: String, attribute: "locale-id" })
+a([
+  r({ type: String, attribute: "locale-id" })
 ], i.prototype, "localeId", 2);
-r([
-  s({ type: Array })
+a([
+  r({ type: Array })
 ], i.prototype, "errors", 2);
-r([
-  s({ type: Boolean })
+a([
+  r({ type: Boolean })
 ], i.prototype, "showErrors", 2);
-r([
-  s({ type: Boolean })
+a([
+  r({ type: Boolean })
 ], i.prototype, "touched", 2);
-r([
-  s({ type: Boolean })
+a([
+  r({ type: Boolean })
 ], i.prototype, "required", 2);
-r([
-  s({ type: Boolean })
+a([
+  r({ type: Boolean })
 ], i.prototype, "disabled", 2);
-r([
-  s({ type: Boolean, attribute: "readonly" })
+a([
+  r({ type: Boolean, attribute: "readonly" })
 ], i.prototype, "readOnly", 2);
-r([
-  s({ type: String })
+a([
+  r({ type: String })
 ], i.prototype, "icon", 2);
-r([
-  s({ type: String })
+a([
+  r({ type: String })
 ], i.prototype, "hint", 2);
-r([
-  s({ type: Array })
+a([
+  r({ type: String })
+], i.prototype, "dayAriaLabel", 2);
+a([
+  r({ type: String })
+], i.prototype, "monthAriaLabel", 2);
+a([
+  r({ type: String })
+], i.prototype, "yearAriaLabel", 2);
+a([
+  r({ type: Array })
 ], i.prototype, "value", 2);
-r([
-  s({ type: String, attribute: "invalid-date-message" })
+a([
+  r({ type: String, attribute: "invalid-date-message" })
 ], i.prototype, "invalidDateMessage", 2);
-r([
-  s({ type: String })
+a([
+  r({ type: String })
 ], i.prototype, "removePillAriaLabel", 2);
-r([
-  s({ type: String })
+a([
+  r({ type: String })
 ], i.prototype, "startDateAriaLabel", 2);
-r([
-  s({ type: String })
+a([
+  r({ type: String })
 ], i.prototype, "endDateAriaLabel", 2);
-r([
-  s({ type: String })
+a([
+  r({ type: String })
 ], i.prototype, "separator", 2);
-i = r([
+i = a([
   m("gui-range-date")
 ], i);
 typeof customElements < "u" && !customElements.get("gui-range-date") && customElements.define("gui-range-date", i);

package/{range-date-input.element-D4nIXJbw.js → range-date-input.element-BdD4SlB4.js}

@@ -1,13 +1,13 @@
-import { InputWidgetAdapter as n, formContext as o, inputContext as u } from "@golemui/lit";
-import "./range-date-input-D--AqBMv.js";
-import { consume as h, provide as m } from "@lit/context";
-import { LitElement as c, html as D } from "lit";
-import { property as b, customElement as g } from "lit/decorators.js";
+import { InputWidgetAdapter as n, formContext as o, inputContext as h } from "@golemui/lit";
+import "./range-date-input-Br7XqQPK.js";
+import { consume as u, provide as m } from "@lit/context";
+import { LitElement as c, html as b } from "lit";
+import { property as D, customElement as g } from "lit/decorators.js";
 import "rxjs";
-var v = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, d = (t, e, s, r) => {
-  for (var a = r > 1 ? void 0 : r ? $(e, s) : e, p = t.length - 1, l; p >= 0; p--)
+var $ = Object.defineProperty, v = Object.getOwnPropertyDescriptor, d = (t, e, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? v(e, s) : e, p = t.length - 1, l; p >= 0; p--)
     (l = t[p]) && (a = (r ? l(e, s, a) : l(a)) || a);
-  return r && a && v(e, s, a), a;
+  return r && a && $(e, s, a), a;
 };
 let i = class extends c {
   constructor() {
@@ -27,7 +27,7 @@ let i = class extends c {
     );
   }
   render() {
-    return super.render(), D`
+    return super.render(), b`
       <gui-range-date
         .uid=${this.widget.uid}
         .label=${this.adapter.templateData.label}
@@ -40,6 +40,9 @@ let i = class extends c {
         ?readonly=${this.adapter.templateData.readonly}
         .value=${this.adapter.templateData.value}
         .localeId=${this.adapter.templateData.lang}
+        .dayAriaLabel=${this.adapter.templateData.dayAriaLabel}
+        .monthAriaLabel=${this.adapter.templateData.monthAriaLabel}
+        .yearAriaLabel=${this.adapter.templateData.yearAriaLabel}
         .invalidDateMessage=${this.adapter.templateData.invalidDateMessage}
         .separator=${this.adapter.templateData.separator}
         .removePillAriaLabel=${this.adapter.templateData.removePillAriaLabel}
@@ -61,11 +64,11 @@ let i = class extends c {
   }
 };
 d([
-  h({ context: o }),
-  b({ attribute: !1 })
+  u({ context: o }),
+  D({ attribute: !1 })
 ], i.prototype, "formContext", 2);
 d([
-  m({ context: u })
+  m({ context: h })
 ], i.prototype, "adapter", 2);
 i = d([
   g("gui-range-date-input")

package/{range-date-picker.element-dhxPAAE6.js → range-date-picker.element-DWRHiAoC.js}

@@ -1,24 +1,24 @@
-import { InputWidgetAdapter as y, formContext as v, inputContext as $ } from "@golemui/lit";
-import { LitElement as c, html as h, nothing as D } from "lit";
-import { property as i, query as g, state as m, customElement as b } from "lit/decorators.js";
-import { classMap as f } from "lit/directives/class-map.js";
-import "./range-date-input-D--AqBMv.js";
-import "./range-calendar-CKPYeSGt.js";
-import { G as M } from "./popup.controller-eUDxE6jD.js";
-import { r as _, D as w, d as x } from "./date-Bj9mI3GU.js";
-import { a as A, b as R, c as C } from "./templates-Dk1jxLwS.js";
-import { consume as L, provide as E } from "@lit/context";
+import { InputWidgetAdapter as m, formContext as y, inputContext as v } from "@golemui/lit";
+import { LitElement as c, html as h, nothing as $ } from "lit";
+import { property as i, query as D, state as g, customElement as b } from "lit/decorators.js";
+import { classMap as A } from "lit/directives/class-map.js";
+import "./range-date-input-Br7XqQPK.js";
+import "./range-calendar-DO_woqcF.js";
+import { G as f } from "./popup.controller-B33OvX_y.js";
+import { r as L, D as M, d as _ } from "./date-DBuYpvcO.js";
+import { a as w, b as x, c as C } from "./templates-Dmr34nwp.js";
+import { consume as R, provide as S } from "@lit/context";
 import "rxjs";
-var I = Object.defineProperty, S = Object.getOwnPropertyDescriptor, a = (e, r, n, s) => {
-  for (var o = s > 1 ? void 0 : s ? S(r, n) : r, d = e.length - 1, l; d >= 0; d--)
-    (l = e[d]) && (o = (s ? l(r, n, o) : l(o)) || o);
-  return s && o && I(r, n, o), o;
+var E = Object.defineProperty, I = Object.getOwnPropertyDescriptor, a = (e, r, n, s) => {
+  for (var o = s > 1 ? void 0 : s ? I(r, n) : r, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (o = (s ? d(r, n, o) : d(o)) || o);
+  return s && o && E(r, n, o), o;
 };
 let t = class extends c {
   constructor() {
-    super(...arguments), this.uid = void 0, this.label = void 0, this.hint = void 0, this.icon = "", this.errors = [], this.showErrors = !0, this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.localeId = void 0, this.value = [], this.separator = void 0, this.removePillAriaLabel = void 0, this.startDateAriaLabel = void 0, this.endDateAriaLabel = void 0, this.prevMonthIcon = "", this.nextMonthIcon = "", this.prevMonthAriaLabel = void 0, this.nextMonthAriaLabel = void 0, this.dayFormat = void 0, this.weekdayFormat = void 0, this.monthFormat = void 0, this.minDate = void 0, this.maxDate = void 0, this.disabledRanges = void 0, this.numberOfMonths = void 0, this.invalidDateMessage = void 0, this.minDateMessage = void 0, this.maxDateMessage = void 0, this.disabledDateRangeMessage = void 0, this._focusDate = void 0, this._invalidRange = null, this._popup = new M(this, {
-      getInteriorElements: () => [this._dateRef, this._calendarRef],
+    super(...arguments), this.uid = void 0, this.label = void 0, this.hint = void 0, this.icon = "", this.toggleAriaLabel = void 0, this.dayAriaLabel = void 0, this.monthAriaLabel = void 0, this.yearAriaLabel = void 0, this.errors = [], this.showErrors = !0, this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.localeId = void 0, this.value = [], this.separator = void 0, this.removePillAriaLabel = void 0, this.startDateAriaLabel = void 0, this.endDateAriaLabel = void 0, this.prevMonthIcon = "", this.nextMonthIcon = "", this.prevMonthAriaLabel = void 0, this.nextMonthAriaLabel = void 0, this.selectYearAriaLabel = void 0, this.yearGridAriaLabel = void 0, this.dayFormat = void 0, this.weekdayFormat = void 0, this.monthFormat = void 0, this.minDate = void 0, this.maxDate = void 0, this.disabledRanges = void 0, this.numberOfMonths = void 0, this.invalidDateMessage = void 0, this.minDateMessage = void 0, this.maxDateMessage = void 0, this.disabledDateRangeMessage = void 0, this._focusDate = void 0, this._invalidRange = null, this._popup = new f(this, {
       focusRestoreSelector: "gui-range-date input",
+      focusPopupSelector: '.gui-calendar__day-button[tabindex="0"]',
       isDisabled: () => !!this.disabled,
       clickIntent: (e) => e.closest(".gui-range-date-input__part") || e.closest("gui-range-calendar") ? "open" : "toggle",
       keyToggleMode: "openClose",
@@ -27,6 +27,8 @@ let t = class extends c {
       }
     }), this.onDropdownToggle = (e) => {
       e.detail?.open && this._popup.open && this._popup.close();
+    }, this.onToggleClick = (e) => {
+      e.stopPropagation(), this._popup.open ? this._popup.close() : this._popup.openAndFocus();
     };
   }
   createRenderRoot() {
@@ -39,8 +41,10 @@ let t = class extends c {
     super.disconnectedCallback(), this.removeEventListener("dropdowntoggle", this.onDropdownToggle);
   }
   render() {
-    const e = A("datePicker", { icon: this.icon }), r = this._popup.open ? h`<gui-range-calendar
-          id="calendar-input"
+    const e = w("datePicker", { icon: this.icon }), r = this._popup.open ? h`<gui-range-calendar
+          id=${`${this.uid}_popup`}
+          role="dialog"
+          aria-label=${this.label ?? "Calendar"}
           .uid=${this.uid}
           .hint=${this.hint}
           ?touched=${this.touched}
@@ -53,6 +57,8 @@ let t = class extends c {
           .nextMonthIcon=${this.nextMonthIcon}
           .prevMonthAriaLabel=${this.prevMonthAriaLabel}
           .nextMonthAriaLabel=${this.nextMonthAriaLabel}
+          .selectYearAriaLabel=${this.selectYearAriaLabel}
+          .yearGridAriaLabel=${this.yearGridAriaLabel}
           .dayFormat=${this.dayFormat}
           .weekdayFormat=${this.weekdayFormat}
           .monthFormat=${this.monthFormat}
@@ -67,26 +73,28 @@ let t = class extends c {
           @blur=${this.onCalendarBlur}
           @change=${this.onCalendarChange}
           @inputError=${this.onCalendarInputError}
-        ></gui-range-calendar>` : D;
+        ></gui-range-calendar>` : $;
     return h`
-      ${R(this.uid ?? "", {
-      label: this.label,
-      hint: this.hint,
-      required: this.required
-    })}
+      ${x(
+      this.uid ?? "",
+      {
+        label: this.label,
+        hint: this.hint,
+        required: this.required
+      },
+      !1,
+      void 0,
+      !1
+    )}
 
       <div
-        role="button"
-        tabindex="-1"
         class="gui-widget"
-        aria-expanded=${this._popup.open}
-        @keyup=${this._popup.onAnchorKeyUp}
         @keydown=${this._popup.onAnchorKeyDown}
         @click=${this._popup.onAnchorClick}
       >
         <gui-range-date
           id="date-input"
-          class=${f(e.widgetClasses)}
+          class=${A(e.widgetClasses)}
           .uid=${this.uid}
           .hint=${this.hint}
           .showErrors=${!1}
@@ -102,18 +110,37 @@ let t = class extends c {
           .removePillAriaLabel=${this.removePillAriaLabel}
           .startDateAriaLabel=${this.startDateAriaLabel}
           .endDateAriaLabel=${this.endDateAriaLabel}
+          .dayAriaLabel=${this.dayAriaLabel}
+          .monthAriaLabel=${this.monthAriaLabel}
+          .yearAriaLabel=${this.yearAriaLabel}
           .invalidDateMessage=${this.invalidDateMessage}
           @blur=${this.onDateBlur}
           @focus=${this._popup.show}
           @change=${this.onDateChange}
           @pillClick=${this.onPillClick}
         ></gui-range-date>
-        <span class="gui-range-date-picker__arrow"
-          ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
+        <button
+          type="button"
+          class="gui-range-date-picker__arrow"
+          aria-label=${this.toggleAriaLabel ?? "Show calendar"}
+          aria-haspopup="dialog"
+          aria-expanded=${this._popup.open ? "true" : "false"}
+          aria-controls=${`${this.uid}_popup`}
+          ?disabled=${this.disabled}
+          @click=${this.onToggleClick}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 256 256"
+            aria-hidden="true"
+          >
             <path
               d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
-            ></path></svg
-        ></span>
+            ></path>
+          </svg>
+        </button>
 
         ${r}
       </div>
@@ -136,15 +163,15 @@ let t = class extends c {
   /** The message for the first constraint a range violates, or null when valid. */
   rangeError(e) {
     const r = e.start, n = e.end ?? e.start;
-    if (_(r, n, this.disabledRanges))
-      return this.disabledDateRangeMessage ?? w;
+    if (L(r, n, this.disabledRanges))
+      return this.disabledDateRangeMessage ?? M;
     const s = {
       minDateMessage: this.minDateMessage,
       maxDateMessage: this.maxDateMessage
     };
     for (const o of [r, n]) {
-      const d = x(o, this.minDate, this.maxDate, void 0, s);
-      if (d) return d;
+      const l = _(o, this.minDate, this.maxDate, void 0, s);
+      if (l) return l;
     }
     return null;
   }
@@ -180,7 +207,7 @@ let t = class extends c {
     );
   }
   onCalendarBlur() {
-    this._popup.close();
+    this._popup.closeOnFocusLeave();
   }
   onPillClick(e) {
     this._focusDate = e.detail.range.start, this._popup.show();
@@ -201,6 +228,18 @@ a([
 a([
   i({ type: String })
 ], t.prototype, "icon", 2);
+a([
+  i({ type: String, attribute: "toggle-aria-label" })
+], t.prototype, "toggleAriaLabel", 2);
+a([
+  i({ type: String })
+], t.prototype, "dayAriaLabel", 2);
+a([
+  i({ type: String })
+], t.prototype, "monthAriaLabel", 2);
+a([
+  i({ type: String })
+], t.prototype, "yearAriaLabel", 2);
 a([
   i({ type: Array })
 ], t.prototype, "errors", 2);
@@ -249,6 +288,12 @@ a([
 a([
   i({ type: String, attribute: "next-month-aria-label" })
 ], t.prototype, "nextMonthAriaLabel", 2);
+a([
+  i({ type: String, attribute: "select-year-aria-label" })
+], t.prototype, "selectYearAriaLabel", 2);
+a([
+  i({ type: String, attribute: "year-grid-aria-label" })
+], t.prototype, "yearGridAriaLabel", 2);
 a([
   i({ type: String, attribute: "day-format" })
 ], t.prototype, "dayFormat", 2);
@@ -283,29 +328,26 @@ a([
   i({ type: String, attribute: "disabled-date-range-message" })
 ], t.prototype, "disabledDateRangeMessage", 2);
 a([
-  g("#date-input")
+  D("#date-input")
 ], t.prototype, "_dateRef", 2);
 a([
-  g("#calendar-input")
-], t.prototype, "_calendarRef", 2);
-a([
-  m()
+  g()
 ], t.prototype, "_focusDate", 2);
 a([
-  m()
+  g()
 ], t.prototype, "_invalidRange", 2);
 t = a([
   b("gui-range-date-picker")
 ], t);
 typeof customElements < "u" && !customElements.get("gui-range-date-picker") && customElements.define("gui-range-date-picker", t);
 var P = Object.defineProperty, k = Object.getOwnPropertyDescriptor, u = (e, r, n, s) => {
-  for (var o = s > 1 ? void 0 : s ? k(r, n) : r, d = e.length - 1, l; d >= 0; d--)
-    (l = e[d]) && (o = (s ? l(r, n, o) : l(o)) || o);
+  for (var o = s > 1 ? void 0 : s ? k(r, n) : r, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (o = (s ? d(r, n, o) : d(o)) || o);
   return s && o && P(r, n, o), o;
 };
 let p = class extends c {
   constructor() {
-    super(...arguments), this.adapter = new y(), this.subscriptions = [];
+    super(...arguments), this.adapter = new m(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
@@ -336,6 +378,10 @@ let p = class extends c {
         .value=${e.value}
         .icon=${e.icon}
         .localeId=${e.lang}
+        .toggleAriaLabel=${e.toggleAriaLabel}
+        .dayAriaLabel=${e.dayAriaLabel}
+        .monthAriaLabel=${e.monthAriaLabel}
+        .yearAriaLabel=${e.yearAriaLabel}
         .separator=${e.separator}
         .removePillAriaLabel=${e.removePillAriaLabel}
         .startDateAriaLabel=${e.startDateAriaLabel}
@@ -344,6 +390,8 @@ let p = class extends c {
         .nextMonthIcon=${e.nextMonthIcon}
         .prevMonthAriaLabel=${e.prevMonthAriaLabel}
         .nextMonthAriaLabel=${e.nextMonthAriaLabel}
+        .selectYearAriaLabel=${e.selectYearAriaLabel}
+        .yearGridAriaLabel=${e.yearGridAriaLabel}
         .dayFormat=${e.dayFormat}
         .weekdayFormat=${e.weekdayFormat}
         .monthFormat=${e.monthFormat}
@@ -372,11 +420,11 @@ let p = class extends c {
   }
 };
 u([
-  L({ context: v }),
+  R({ context: y }),
   i({ attribute: !1 })
 ], p.prototype, "formContext", 2);
 u([
-  E({ context: $ })
+  S({ context: v })
 ], p.prototype, "adapter", 2);
 p = u([
   b("gui-range-date-picker-input")