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

package/{date-time-calendar-BzRfkLKU.js → date-time-calendar-DzU-FtVl.js}

@@ -1,20 +1,20 @@
-import { LitElement as g, nothing as c, html as d } from "lit";
-import { property as s, state as u, customElement as y } from "lit/decorators.js";
+import { LitElement as g, nothing as l, html as m } from "lit";
+import { property as r, state as c, customElement as y } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
-import "./time-picker-bFJ63ky8.js";
-import { G as v } from "./templates-Dk1jxLwS.js";
-import { G as _, a as D, r as M, b as T, c as f, d as S, e as C } from "./day-status-0-hJHrI7.js";
-import { G as O } from "./focus-leave.controller-2gV0pQd5.js";
-import { p, f as I, h as x, t as m, j as $ } from "./date-Bj9mI3GU.js";
-import { y as w, p as L, z as P } from "./part-templates-Db871PS3.js";
-var G = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, t, r, o) => {
-  for (var n = o > 1 ? void 0 : o ? k(t, r) : t, l = e.length - 1, h; l >= 0; l--)
-    (h = e[l]) && (n = (o ? h(t, r, n) : h(n)) || n);
-  return o && n && G(t, r, n), n;
+import "./time-picker-g337F8d0.js";
+import { G as v } from "./templates-Dmr34nwp.js";
+import { G as D, a as _, r as M, b as T, c as S, d as f, e as C } from "./day-status-CsWStVQV.js";
+import { G as I } from "./focus-leave.controller-2gV0pQd5.js";
+import { p, h as O, j as x, t as u, k as $, g as L } from "./date-DBuYpvcO.js";
+import { y as w, p as A, z as G } from "./part-templates-VORbpgs2.js";
+var P = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, t, s, o) => {
+  for (var n = o > 1 ? void 0 : o ? k(t, s) : t, h = e.length - 1, d; h >= 0; h--)
+    (d = e[h]) && (n = (o ? d(t, s, n) : d(n)) || n);
+  return o && n && P(t, s, n), n;
 };
 let i = class extends g {
   constructor() {
-    super(...arguments), this.uid = void 0, this.label = void 0, this.hint = void 0, this.localeId = void 0, this.errors = [], this.touched = void 0, this.required = !1, this.disabled = !1, this.readOnly = !1, this.prevMonthIcon = "", this.nextMonthIcon = "", this.prevMonthAriaLabel = "", this.nextMonthAriaLabel = "", this.dayFormat = "numeric", this.weekdayFormat = "narrow", this.monthFormat = "long", this.minDate = void 0, this.maxDate = void 0, this.disabledRanges = void 0, this.numberOfMonths = 1, this.value = void 0, this.hourFormat = void 0, this.minuteStep = void 0, this.minTime = void 0, this.maxTime = void 0, this.disabledTimeRanges = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.disabledTimeRangeMessage = void 0, this.noAvailableTimesMessage = void 0, this.allowCustomTime = !1, this._selectedDate = void 0, this._selectedTime = void 0, this._timeGridOpen = !1, this._internalValueChange = !1, this._nav = new _(this, {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.hint = void 0, this.localeId = void 0, this.errors = [], this.touched = void 0, this.required = !1, this.disabled = !1, this.readOnly = !1, this.prevMonthIcon = "", this.nextMonthIcon = "", this.prevMonthAriaLabel = "", this.nextMonthAriaLabel = "", this.selectYearAriaLabel = void 0, this.yearGridAriaLabel = void 0, this.dayFormat = "numeric", this.weekdayFormat = "narrow", this.monthFormat = "long", this.minDate = void 0, this.maxDate = void 0, this.disabledRanges = void 0, this.numberOfMonths = 1, this.value = void 0, this.hourFormat = void 0, this.minuteStep = void 0, this.minTime = void 0, this.maxTime = void 0, this.disabledTimeRanges = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.disabledTimeRangeMessage = void 0, this.noAvailableTimesMessage = void 0, this.allowCustomTime = !1, this._selectedDate = void 0, this._selectedTime = void 0, this._timeGridOpen = !1, this._internalValueChange = !1, this._nav = new D(this, {
       getMinDate: () => this.minDate,
       getMaxDate: () => this.maxDate,
       getNumberOfMonths: () => this.numberOfMonths,
@@ -29,32 +29,31 @@ let i = class extends g {
           errors: this.errors,
           readonly: this.readOnly,
           disabled: this.disabled,
-          touched: this.touched
+          touched: this.touched,
+          required: this.required
         }
       })
-    }), this._keyboard = new D(this, {
+    }), this._keyboard = new _(this, {
       canGoPrev: () => this._nav.canGoPrev(),
       canGoNext: () => this._nav.canGoNext(),
       goPrev: () => this._nav.prevMonth(),
       goNext: () => this._nav.nextMonth(),
-      // Enter/Space can only fire on a focused (hence enabled, in-month) day
-      // button; the `disabled`/`readOnly` host guards stay inside `selectDate`.
       onActivateDay: (e) => {
         const t = p(e);
         this.selectDate({
           date: t,
           dayLabel: x(this.localeId, t),
           isCurrentMonth: !0,
-          isToday: I(t),
+          isToday: O(t),
           isSelected: !1,
           isFocusable: !0,
-          isDisabled: !1
+          isDisabled: this.isDisabled(t)
         });
       },
       onSelectYear: (e) => this._nav.selectYear(e),
       onCloseYearGrid: () => this._nav.closeYearSelector(),
       isYearGridOpen: () => this._nav.yearSelectorOpen
-    }), this._focusLeave = new O(this, {
+    }), this._focusLeave = new I(this, {
       onLeave: () => {
         this.dispatchEvent(new CustomEvent("blur", { bubbles: !0, composed: !0 }));
       }
@@ -80,8 +79,8 @@ let i = class extends g {
         return;
       }
       if (this.value) {
-        const t = L(this.value);
-        isNaN(t.getTime()) || (this._selectedDate = m(t), this._selectedTime = P(t), $(t, this._nav.currentDate, this.numberOfMonths ?? 1) || (this._nav.currentDate = t));
+        const t = A(this.value);
+        isNaN(t.getTime()) || (this._selectedDate = u(t), this._selectedTime = G(t), $(t, this._nav.currentDate, this.numberOfMonths ?? 1) || (this._nav.currentDate = t));
       } else this._selectedTime && (this._selectedDate = void 0, this._selectedTime = void 0);
     }
   }
@@ -99,7 +98,7 @@ let i = class extends g {
   }
   selectDate(e) {
     if (!e.isCurrentMonth || e.isDisabled || this.disabled || this.readOnly) return;
-    const t = m(e.date);
+    const t = u(e.date);
     t !== this._selectedDate && (this._selectedDate = t, this._selectedTime = void 0, this.value && (this.setValueInternal(void 0), this.emitChange(null)));
   }
   commitTime(e, t = !1) {
@@ -107,12 +106,12 @@ let i = class extends g {
   }
   onTimePickerChange(e) {
     e.stopPropagation();
-    const t = e.detail.value, r = e.detail.commit === !0;
+    const t = e.detail.value, s = e.detail.commit === !0;
     if (!t) {
       this._selectedTime = void 0, this.value && (this.setValueInternal(void 0), this.emitChange(null));
       return;
     }
-    this.commitTime(t, r);
+    this.commitTime(t, s);
   }
   onListToggle(e) {
     e.stopPropagation();
@@ -137,6 +136,8 @@ let i = class extends g {
       required: this.required,
       disabled: this.disabled,
       numberOfMonths: this.numberOfMonths,
+      localeId: this.localeId,
+      currentDate: this._nav.currentDate,
       prevMonthIcon: this.prevMonthIcon,
       nextMonthIcon: this.nextMonthIcon,
       prevMonthAriaLabel: this.prevMonthAriaLabel,
@@ -146,13 +147,14 @@ let i = class extends g {
       onPrevMonthClick: this._keyboard.onPrevMonthClick,
       onNextMonthClick: this._keyboard.onNextMonthClick,
       onFocusOut: this._focusLeave.onFocusOut,
-      renderAboveCalendar: () => c,
+      renderAboveCalendar: () => l,
       renderMonthPanel: (e) => T({
         currentDate: this._nav.currentDate,
         offset: e,
         localeId: this.localeId,
         monthFormat: this.monthFormat,
         yearSelectorOpen: this._nav.yearSelectorOpen,
+        selectYearAriaLabel: this.selectYearAriaLabel,
         onToggleYearSelector: () => this.toggleYearSelector(),
         renderBelowHeader: (t) => this.renderBelowHeader(t),
         renderPanelBody: (t) => this.renderPanelBody(t)
@@ -161,7 +163,7 @@ let i = class extends g {
   }
   /** The embedded time-picker row under the first panel's header. */
   renderBelowHeader(e) {
-    return e !== 0 ? c : d`
+    return e !== 0 ? l : m`
       <div class="gui-calendar__time-input-row">
         <gui-time-picker
           class="gui-time-picker gui-field"
@@ -190,7 +192,7 @@ let i = class extends g {
     `;
   }
   renderPanelBody(e) {
-    return this._timeGridOpen && !this._nav.yearSelectorOpen && e === 0 ? d`` : f({
+    return this._timeGridOpen && !this._nav.yearSelectorOpen && e === 0 ? m`` : S({
       offset: e,
       yearSelectorOpen: this._nav.yearSelectorOpen,
       years: this._nav.yearList,
@@ -198,6 +200,8 @@ let i = class extends g {
       onSelectYear: (t) => this._keyboard.selectYear(t),
       onYearKeydown: this._keyboard.handleYearKeydown,
       localeId: this.localeId,
+      currentDate: this._nav.currentDate,
+      yearGridAriaLabel: this.yearGridAriaLabel,
       getDays: (t) => this.getDaysInMonth(t),
       renderDay: (t) => this.renderDay(t)
     });
@@ -210,16 +214,19 @@ let i = class extends g {
       disabled: e.isDisabled,
       "other-month": !e.isCurrentMonth
     };
-    return d`
+    return m`
       <button
         type="button"
         role="gridcell"
         class=${b(t)}
         tabindex=${e.isFocusable ? 0 : -1}
-        ?disabled=${!e.isCurrentMonth || e.isDisabled}
-        data-date=${m(e.date)}
+        ?disabled=${!e.isCurrentMonth}
+        aria-disabled=${e.isCurrentMonth && e.isDisabled ? "true" : l}
+        aria-label=${L(this.localeId, e.date)}
+        aria-current=${e.isToday ? "date" : l}
+        data-date=${u(e.date)}
         @click=${() => this.selectDate(e)}
-        @keydown=${(r) => this._keyboard.handleDayKeydown(r)}
+        @keydown=${(s) => this._keyboard.handleDayKeydown(s)}
         aria-selected=${e.isSelected}
       >
         ${e.dayLabel}
@@ -228,22 +235,22 @@ let i = class extends g {
   }
   getDaysInMonth(e) {
     const t = this._selectedDate;
-    return S({
+    return f({
       currentDate: this._nav.currentDate,
       offset: e,
       localeId: this.localeId,
       numberOfMonths: this.numberOfMonths ?? 1,
-      isDisabled: (r) => this.isDisabled(r),
-      toDay: (r) => {
-        const o = C(r.date, { selectedISO: t }).isSelected;
+      isDisabled: (s) => this.isDisabled(s),
+      toDay: (s) => {
+        const o = C(s.date, { selectedISO: t }).isSelected;
         return {
-          date: r.date,
-          dayLabel: r.dayLabel,
-          isCurrentMonth: r.isCurrentMonth,
-          isToday: r.isToday,
-          isDisabled: r.isDisabled,
+          date: s.date,
+          dayLabel: s.dayLabel,
+          isCurrentMonth: s.isCurrentMonth,
+          isToday: s.isToday,
+          isDisabled: s.isDisabled,
           isSelected: o,
-          isFocusable: (o || r.isToday) && r.isCurrentMonth
+          isFocusable: (o || s.isToday) && s.isCurrentMonth
         };
       },
       focusFallbackDates: [t ? p(t) : /* @__PURE__ */ new Date()]
@@ -254,106 +261,112 @@ let i = class extends g {
   }
 };
 a([
-  s({ type: String })
+  r({ type: String })
 ], i.prototype, "uid", 2);
 a([
-  s({ type: String })
+  r({ type: String })
 ], i.prototype, "label", 2);
 a([
-  s({ type: String })
+  r({ type: String })
 ], i.prototype, "hint", 2);
 a([
-  s({ type: String, attribute: "locale-id" })
+  r({ type: String, attribute: "locale-id" })
 ], i.prototype, "localeId", 2);
 a([
-  s({ type: Array })
+  r({ type: Array })
 ], i.prototype, "errors", 2);
 a([
-  s({ type: Boolean })
+  r({ type: Boolean })
 ], i.prototype, "touched", 2);
 a([
-  s({ type: Boolean })
+  r({ type: Boolean })
 ], i.prototype, "required", 2);
 a([
-  s({ type: Boolean })
+  r({ type: Boolean })
 ], i.prototype, "disabled", 2);
 a([
-  s({ type: Boolean, attribute: "readonly" })
+  r({ type: Boolean, attribute: "readonly" })
 ], i.prototype, "readOnly", 2);
 a([
-  s({ type: String, attribute: "prev-month-icon" })
+  r({ type: String, attribute: "prev-month-icon" })
 ], i.prototype, "prevMonthIcon", 2);
 a([
-  s({ type: String, attribute: "next-month-icon" })
+  r({ type: String, attribute: "next-month-icon" })
 ], i.prototype, "nextMonthIcon", 2);
 a([
-  s({ type: String, attribute: "prev-month-aria-label" })
+  r({ type: String, attribute: "prev-month-aria-label" })
 ], i.prototype, "prevMonthAriaLabel", 2);
 a([
-  s({ type: String, attribute: "next-month-aria-label" })
+  r({ type: String, attribute: "next-month-aria-label" })
 ], i.prototype, "nextMonthAriaLabel", 2);
 a([
-  s({ type: String })
+  r({ type: String, attribute: "select-year-aria-label" })
+], i.prototype, "selectYearAriaLabel", 2);
+a([
+  r({ type: String, attribute: "year-grid-aria-label" })
+], i.prototype, "yearGridAriaLabel", 2);
+a([
+  r({ type: String })
 ], i.prototype, "dayFormat", 2);
 a([
-  s({ type: String })
+  r({ type: String })
 ], i.prototype, "weekdayFormat", 2);
 a([
-  s({ type: String })
+  r({ type: String })
 ], i.prototype, "monthFormat", 2);
 a([
-  s({ type: String })
+  r({ type: String })
 ], i.prototype, "minDate", 2);
 a([
-  s({ type: String })
+  r({ type: String })
 ], i.prototype, "maxDate", 2);
 a([
-  s({ type: Array })
+  r({ type: Array })
 ], i.prototype, "disabledRanges", 2);
 a([
-  s({ type: Number })
+  r({ type: Number })
 ], i.prototype, "numberOfMonths", 2);
 a([
-  s({ type: String })
+  r({ type: String })
 ], i.prototype, "value", 2);
 a([
-  s({ type: String, attribute: "hour-format" })
+  r({ type: String, attribute: "hour-format" })
 ], i.prototype, "hourFormat", 2);
 a([
-  s({ type: Number, attribute: "minute-step" })
+  r({ type: Number, attribute: "minute-step" })
 ], i.prototype, "minuteStep", 2);
 a([
-  s({ type: String, attribute: "min-time" })
+  r({ type: String, attribute: "min-time" })
 ], i.prototype, "minTime", 2);
 a([
-  s({ type: String, attribute: "max-time" })
+  r({ type: String, attribute: "max-time" })
 ], i.prototype, "maxTime", 2);
 a([
-  s({ type: Array, attribute: "disabled-time-ranges" })
+  r({ type: Array, attribute: "disabled-time-ranges" })
 ], i.prototype, "disabledTimeRanges", 2);
 a([
-  s({ type: String, attribute: "min-time-message" })
+  r({ type: String, attribute: "min-time-message" })
 ], i.prototype, "minTimeMessage", 2);
 a([
-  s({ type: String, attribute: "max-time-message" })
+  r({ type: String, attribute: "max-time-message" })
 ], i.prototype, "maxTimeMessage", 2);
 a([
-  s({ type: String, attribute: "disabled-time-range-message" })
+  r({ type: String, attribute: "disabled-time-range-message" })
 ], i.prototype, "disabledTimeRangeMessage", 2);
 a([
-  s({ type: String, attribute: "no-available-times-message" })
+  r({ type: String, attribute: "no-available-times-message" })
 ], i.prototype, "noAvailableTimesMessage", 2);
 a([
-  s({ type: Boolean, attribute: "allow-custom-time" })
+  r({ type: Boolean, attribute: "allow-custom-time" })
 ], i.prototype, "allowCustomTime", 2);
 a([
-  u()
+  c()
 ], i.prototype, "_selectedDate", 2);
 a([
-  u()
+  c()
 ], i.prototype, "_selectedTime", 2);
 a([
-  u()
+  c()
 ], i.prototype, "_timeGridOpen", 2);
 i = a([
   y("gui-date-time-calendar")

package/{date-time-calendar.element-DC4NK0y1.js → date-time-calendar.element-BLBcVsFu.js}

@@ -1,17 +1,17 @@
-import { InputWidgetAdapter as l, formContext as m, inputContext as p } from "@golemui/lit";
-import "./date-time-calendar-BzRfkLKU.js";
+import { InputWidgetAdapter as d, formContext as m, inputContext as p } from "@golemui/lit";
+import "./date-time-calendar-DzU-FtVl.js";
 import { consume as u, provide as h } from "@lit/context";
-import { LitElement as c, html as $ } from "lit";
-import { property as b, customElement as g } from "lit/decorators.js";
+import { LitElement as c, html as b } from "lit";
+import { property as $, customElement as g } from "lit/decorators.js";
 import "rxjs";
-var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, d = (e, t, s, r) => {
+var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (e, t, s, r) => {
   for (var a = r > 1 ? void 0 : r ? x(t, s) : t, n = e.length - 1, o; n >= 0; n--)
     (o = e[n]) && (a = (r ? o(t, s, a) : o(a)) || a);
   return r && a && v(t, s, a), a;
 };
 let i = class extends c {
   constructor() {
-    super(...arguments), this.adapter = new l(), this.subscriptions = [];
+    super(...arguments), this.adapter = new d(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
@@ -29,7 +29,7 @@ let i = class extends c {
   render() {
     super.render();
     const e = this.adapter.templateData;
-    return $`
+    return b`
       <gui-date-time-calendar
         .uid=${this.widget.uid}
         .label=${e.label}
@@ -44,6 +44,8 @@ let i = 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}
@@ -78,14 +80,14 @@ let i = class extends c {
     super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
   }
 };
-d([
+l([
   u({ context: m }),
-  b({ attribute: !1 })
+  $({ attribute: !1 })
 ], i.prototype, "formContext", 2);
-d([
+l([
   h({ context: p })
 ], i.prototype, "adapter", 2);
-i = d([
+i = l([
   g("gui-date-time-calendar-input")
 ], i);
 export {

package/{date-time-input-BXxsfuyZ.js → date-time-input-DZaz2heD.js}

@@ -1,27 +1,27 @@
-import { LitElement as h, nothing as u, html as p } from "lit";
+import { LitElement as u, nothing as h, html as p } from "lit";
 import { property as i, customElement as m } from "lit/decorators.js";
-import { classMap as c } from "lit/directives/class-map.js";
-import { G as g, b as y, c as v } from "./templates-Dk1jxLwS.js";
-import { G as b, g as D, w as f, z as E, a as S, r as T, b as M } from "./part-templates-Db871PS3.js";
-import { d as x } from "./date-Bj9mI3GU.js";
-var w = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (s, r, n, a) => {
-  for (var o = a > 1 ? void 0 : a ? C(r, n) : r, l = s.length - 1, d; l >= 0; l--)
-    (d = s[l]) && (o = (a ? d(r, n, o) : d(o)) || o);
-  return a && o && w(r, n, o), o;
+import { classMap as g } from "lit/directives/class-map.js";
+import { G as y, b as c, c as b } from "./templates-Dmr34nwp.js";
+import { G as v, g as D, w as f, z as E, a as S, r as A, b as L, P as T } from "./part-templates-VORbpgs2.js";
+import { d as M } from "./date-DBuYpvcO.js";
+var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, e = (a, o, l, s) => {
+  for (var r = s > 1 ? void 0 : s ? P(o, l) : o, n = a.length - 1, d; n >= 0; n--)
+    (d = a[n]) && (r = (s ? d(o, l, r) : d(r)) || r);
+  return s && r && x(o, l, r), r;
 };
-let t = class extends h {
+let t = class extends u {
   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.hourFormat = void 0, this.minuteStep = 1, this.invalidDateMessage = void 0, this.value = void 0, this.minDate = void 0, this.maxDate = void 0, this.minTime = void 0, this.maxTime = void 0, this.minDateMessage = void 0, this.maxDateMessage = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.inputBlockClass = "gui-date-time-input", this.groups = ["default"], this._parts = new b(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.hourAriaLabel = void 0, this.minuteAriaLabel = void 0, this.dayPeriodAriaLabel = void 0, this.hourFormat = void 0, this.minuteStep = 1, this.invalidDateMessage = void 0, this.value = void 0, this.minDate = void 0, this.maxDate = void 0, this.minTime = void 0, this.maxTime = void 0, this.minDateMessage = void 0, this.maxDateMessage = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.inputBlockClass = "gui-date-time-input", this.groups = ["default"], this._parts = new v(this, {
       blockClass: this.inputBlockClass,
       groups: this.groups,
-      getDescriptor: (s) => this.getPartDescriptor(s),
-      commitGroup: (s) => this.validateAndEmit(s),
+      getDescriptor: (a) => this.getPartDescriptor(a),
+      commitGroup: (a) => this.validateAndEmit(a),
       isReadonly: () => !!this.readOnly,
       isDisabled: () => !!this.disabled,
       onEmptyPartBlur: () => this.dispatchEvent(new CustomEvent("change", { detail: { value: null }, bubbles: !0 })),
       getHourFormat: () => this.localeData.effectiveHourFormat,
       getDayPeriodLabels: () => this.localeData.dayPeriodLabels
-    }), this.ariaController = new g(this, {
+    }), this.ariaController = new y(this, {
       getTargets: () => this.querySelectorAll(`.${this.inputBlockClass}`),
       getState: () => ({
         uid: this.uid,
@@ -30,7 +30,8 @@ let t = class extends h {
           errors: this.errors,
           readonly: this.readOnly,
           disabled: this.disabled,
-          touched: this.touched
+          touched: this.touched,
+          required: this.required
         }
       })
     });
@@ -44,26 +45,26 @@ let t = class extends h {
   get localeData() {
     return D(this.localeId, this.hourFormat, this.minuteStep, !0);
   }
-  getPartDescriptor(s) {
-    return this.localeData.descriptors[s];
+  getPartDescriptor(a) {
+    return this.localeData.descriptors[a];
   }
   /**
    * Constrains the date and time axes independently: `minDate`/`maxDate` bound
    * the day, `minTime`/`maxTime` bound the time-of-day on every allowed day.
    */
-  boundsError(s, r) {
-    return x(s, this.minDate, this.maxDate, void 0, {
+  boundsError(a, o) {
+    return M(a, this.minDate, this.maxDate, void 0, {
       minDateMessage: this.minDateMessage,
       maxDateMessage: this.maxDateMessage
-    }) ?? f(E(r), {
+    }) ?? f(E(o), {
       minTime: this.minTime,
       maxTime: this.maxTime,
       minTimeMessage: this.minTimeMessage,
       maxTimeMessage: this.maxTimeMessage
     });
   }
-  willUpdate(s) {
-    (!this.hasUpdated || s.has("value") || s.has("hourFormat") || s.has("localeId")) && this._parts.setGroupFromISO(
+  willUpdate(a) {
+    (!this.hasUpdated || a.has("value") || a.has("hourFormat") || a.has("localeId")) && this._parts.setGroupFromISO(
       "default",
       this.value ?? "",
       "dateTime",
@@ -71,7 +72,7 @@ let t = class extends h {
     );
   }
   render() {
-    const s = {
+    const a = {
       uid: this.uid,
       label: this.label,
       errors: this.errors,
@@ -82,61 +83,74 @@ let t = class extends h {
       value: this.value,
       icon: this.icon,
       hint: this.hint
-    }, r = {
+    }, o = {
       blockClass: this.inputBlockClass,
       groups: this.groups,
       formatParts: S(this.localeId, this.localeData.effectiveHourFormat),
-      getDescriptor: (a) => this.getPartDescriptor(a),
+      getDescriptor: (s) => this.getPartDescriptor(s),
       getDisplayValue: this._parts.getPartDisplay,
-      required: this.required,
+      getPartAriaLabel: (s, r) => ({
+        day: this.dayAriaLabel,
+        month: this.monthAriaLabel,
+        year: this.yearAriaLabel,
+        hour: this.hourAriaLabel,
+        minute: this.minuteAriaLabel
+      })[r] ?? T[r],
+      dayPeriodAriaLabel: this.dayPeriodAriaLabel,
       disabled: this.disabled,
       partsReadonly: !!this.readOnly
-    }, n = {
+    }, l = {
       "gui-widget-icon": !0,
       [this.icon]: !0
     };
     return p`
-      ${this.label ? y(this.uid, s) : u}
+      ${this.label ? c(this.uid, a, !1, void 0, !1) : h}
 
       <div class="gui-widget">
         <div
+          id=${this.uid}
           class="gui-widget-input gui-parts gui-parts-ring gui-date-time-input ${this.icon ? "gui-calendar--icon" : ""}"
           role="group"
+          aria-labelledby=${`${this.uid}_label`}
         >
-          ${T("default", r, this._parts)}
+          ${A("default", o, this._parts)}
         </div>
-        ${this.icon ? p`<span class=${c(n)} data-icon=${this.icon}></span>` : u}
+        ${this.icon ? p`<span
+              class=${g(l)}
+              data-icon=${this.icon}
+              aria-hidden="true"
+            ></span>` : h}
       </div>
 
-      ${this.showErrors && this.errors?.length ? v(this.uid, s) : u}
+      ${this.showErrors && this.errors?.length ? b(this.uid, a) : h}
     `;
   }
-  validateAndEmit(s) {
-    const { effectiveHourFormat: r, descriptors: n } = this.localeData, { result: a, writeBacks: o } = M(this._parts.values[s] ?? {}, {
-      hourFormat: r,
-      descriptors: n,
+  validateAndEmit(a) {
+    const { effectiveHourFormat: o, descriptors: l } = this.localeData, { result: s, writeBacks: r } = L(this._parts.values[a] ?? {}, {
+      hourFormat: o,
+      descriptors: l,
       invalidDateMessage: this.invalidDateMessage
     });
-    if (this._parts.applyWriteBacks(s, o), a.kind === "incomplete") {
+    if (this._parts.applyWriteBacks(a, r), s.kind === "incomplete") {
       this.requestUpdate();
       return;
     }
-    if (a.kind === "invalid") {
+    if (s.kind === "invalid") {
       this.dispatchEvent(
-        new CustomEvent("inputError", { detail: { message: a.message }, bubbles: !0 })
+        new CustomEvent("inputError", { detail: { message: s.message }, bubbles: !0 })
       ), this.requestUpdate();
       return;
     }
-    const l = this.boundsError(a.iso, a.instant);
-    if (l) {
+    const n = this.boundsError(s.iso, s.instant);
+    if (n) {
       this.dispatchEvent(
-        new CustomEvent("change", { detail: { value: a.iso }, bubbles: !0 })
+        new CustomEvent("change", { detail: { value: s.iso }, bubbles: !0 })
       ), this.dispatchEvent(
-        new CustomEvent("inputError", { detail: { message: l }, bubbles: !0 })
+        new CustomEvent("inputError", { detail: { message: n }, bubbles: !0 })
       ), this.requestUpdate();
       return;
     }
-    this.value = a.iso, this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value }, bubbles: !0 })), this.requestUpdate();
+    this.value = s.iso, this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value }, bubbles: !0 })), this.requestUpdate();
   }
 };
 e([
@@ -172,6 +186,24 @@ e([
 e([
   i({ type: String })
 ], t.prototype, "hint", 2);
+e([
+  i({ type: String })
+], t.prototype, "dayAriaLabel", 2);
+e([
+  i({ type: String })
+], t.prototype, "monthAriaLabel", 2);
+e([
+  i({ type: String })
+], t.prototype, "yearAriaLabel", 2);
+e([
+  i({ type: String })
+], t.prototype, "hourAriaLabel", 2);
+e([
+  i({ type: String })
+], t.prototype, "minuteAriaLabel", 2);
+e([
+  i({ type: String })
+], t.prototype, "dayPeriodAriaLabel", 2);
 e([
   i({ type: String, attribute: "hour-format" })
 ], t.prototype, "hourFormat", 2);