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

package/templates-Dmr34nwp.js

@@ -0,0 +1,88 @@
+import { filterTap as C } from "@golemui/core";
+import { html as i, nothing as o } from "lit";
+import { classMap as f } from "lit/directives/class-map.js";
+class E {
+  constructor(r, e) {
+    r.addController(this), this.getTargets = e.getTargets, this.getState = e.getState;
+  }
+  hostConnected() {
+  }
+  hostUpdated() {
+    const r = this.getTargets();
+    if (!r) return;
+    let e = [];
+    r instanceof NodeList ? e = Array.from(r) : Array.isArray(r) ? e = r : e = [r];
+    const { uid: l, templateData: n } = this.getState(), { touched: _, errors: c, readonly: v, disabled: A, hint: y, required: q } = n, d = _ && c && c.length > 0;
+    C(
+      e,
+      (t) => !!t,
+      (t) => {
+        const a = ($, u) => {
+          u ? t.setAttribute($, u) : t.removeAttribute($);
+        };
+        a("aria-describedby", y ? `${l}_hint` : null), a("aria-invalid", d ? "true" : null), a("aria-errormessage", d ? `${l}_errors` : null), a("aria-readonly", v ? "true" : null), a("aria-disabled", A ? "true" : null), a("aria-required", q ? "true" : null);
+      }
+    );
+  }
+}
+const g = (s) => s ? i`<span aria-hidden="true"> *</span>` : o, G = (s, r, e = !1, l = void 0, n = !0) => n ? r.label ? i`<label
+          class="gui-label"
+          for=${s}
+          data-cy=${`${s}_label`}
+          id=${l ? `${s}_${l}_label` : `${s}_label`}
+        >
+          ${r.label}${g(r.required)}
+          ${h(s, r)} ${e ? b(s, r) : o}
+        </label>` : o : r.label ? i`<span
+          class="gui-label"
+          data-cy=${`${s}_label`}
+          id=${l ? `${s}_${l}_label` : `${s}_label`}
+        >
+          ${r.label}${g(r.required)}
+          ${h(s, r)} ${e ? b(s, r) : o}
+        </span>` : o, h = (s, r) => r.hint ? i`<div class="gui-widget-hint" id=${`${s}_hint`}>${r.hint}</div>` : i``, I = (s, r) => {
+  const e = {
+    [`gui-${s}--icon`]: !1,
+    [`gui-${s}--icon-right`]: !1
+  };
+  if (r.icon) {
+    e[`gui-${s}--icon`] = !0;
+    const l = {
+      "gui-widget-icon": !0,
+      [r.icon]: !0
+    };
+    return {
+      widgetClasses: e,
+      html: i`<span
+        class=${f(l)}
+        data-icon=${r.icon}
+        aria-hidden="true"
+      ></span>`
+    };
+  } else
+    return { widgetClasses: e, html: i`` };
+}, b = (s, r) => {
+  const e = r.touched && r.errors && r.errors.length > 0;
+  return i`<ul
+    class=${f({
+    "gui-validator": !0,
+    "gui-validator--empty": !e
+  })}
+    id=${`${s}_errors`}
+    role="alert"
+    data-cy=${e ? `${s}_validator-errors` : o}
+  >
+    ${e ? r.errors?.map(
+    (n) => i`<li class="gui-validator__error" data-cy=${`${s}_validator-error`}>
+              ${n}
+            </li>`
+  ) : o}
+  </ul>`;
+};
+export {
+  E as G,
+  I as a,
+  G as b,
+  b as c,
+  g as r
+};

package/{textarea.element-HThYqdR_.js → textarea.element-CiNEy9uq.js}

@@ -2,12 +2,12 @@ import { InputWidgetAdapter as v, formContext as b, inputContext as $ } from "@g
 import { LitElement as m, html as n, nothing as c } from "lit";
 import { property as i, customElement as g } from "lit/decorators.js";
 import { classMap as x } from "lit/directives/class-map.js";
-import { G as f, b as C, c as w } from "./templates-Dk1jxLwS.js";
+import { G as f, b as C, c as w } from "./templates-Dmr34nwp.js";
 import { styleMap as D } from "lit-html/directives/style-map.js";
 import { consume as _, provide as L } from "@lit/context";
 import "rxjs";
-var S = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (t, a, d, s) => {
-  for (var e = s > 1 ? void 0 : s ? O(a, d) : a, l = t.length - 1, p; l >= 0; l--)
+var S = Object.defineProperty, q = Object.getOwnPropertyDescriptor, o = (t, a, d, s) => {
+  for (var e = s > 1 ? void 0 : s ? q(a, d) : a, l = t.length - 1, p; l >= 0; l--)
     (p = t[l]) && (e = (s ? p(a, d, e) : p(e)) || e);
   return s && e && S(a, d, e), e;
 };
@@ -22,7 +22,8 @@ let r = class extends m {
           errors: this.errors,
           readonly: this.readOnly,
           disabled: this.disabled,
-          touched: this.touched
+          touched: this.touched,
+          required: this.required
         }
       })
     });
@@ -170,10 +171,10 @@ r = o([
   g("gui-textarea")
 ], r);
 typeof customElements < "u" && !customElements.get("gui-textarea") && customElements.define("gui-textarea", r);
-var E = Object.defineProperty, q = Object.getOwnPropertyDescriptor, h = (t, a, d, s) => {
-  for (var e = s > 1 ? void 0 : s ? q(a, d) : a, l = t.length - 1, p; l >= 0; l--)
+var O = Object.defineProperty, E = Object.getOwnPropertyDescriptor, h = (t, a, d, s) => {
+  for (var e = s > 1 ? void 0 : s ? E(a, d) : a, l = t.length - 1, p; l >= 0; l--)
     (p = t[l]) && (e = (s ? p(a, d, e) : p(e)) || e);
-  return s && e && E(a, d, e), e;
+  return s && e && O(a, d, e), e;
 };
 let u = class extends m {
   constructor() {

package/{textinput.element-CkXNzMUg.js → textinput.element-AL2Nr768.js}

@@ -2,13 +2,13 @@ import { InputWidgetAdapter as b, formContext as v, inputContext as g } from "@g
 import { LitElement as c, nothing as h, html as m } from "lit";
 import { property as r, customElement as y } from "lit/decorators.js";
 import { classMap as f } from "lit/directives/class-map.js";
-import { G as $, a as x, b as C, c as D } from "./templates-Dk1jxLwS.js";
+import { G as $, a as x, b as C, c as D } from "./templates-Dmr34nwp.js";
 import { consume as O, provide as _ } from "@lit/context";
 import "rxjs";
-var w = Object.defineProperty, E = Object.getOwnPropertyDescriptor, s = (t, e, o, l) => {
-  for (var a = l > 1 ? void 0 : l ? E(e, o) : e, p = t.length - 1, d; p >= 0; p--)
+var q = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (t, e, o, l) => {
+  for (var a = l > 1 ? void 0 : l ? w(e, o) : e, p = t.length - 1, d; p >= 0; p--)
     (d = t[p]) && (a = (l ? d(e, o, a) : d(a)) || a);
-  return l && a && w(e, o, a), a;
+  return l && a && q(e, o, a), a;
 };
 let i = class extends c {
   constructor() {
@@ -21,7 +21,8 @@ let i = class extends c {
           errors: this.errors,
           readonly: this.readOnly,
           disabled: this.disabled,
-          touched: this.touched
+          touched: this.touched,
+          required: this.required
         }
       })
     });
@@ -61,7 +62,7 @@ let i = class extends c {
           data-cy=${`${this.uid}_textinput`}
           class=${f(o)}
           value=${this.value}
-          ?required=${this.disabled}
+          ?required=${this.required}
           ?disabled=${this.disabled}
           ?readonly=${this.readOnly}
           placeholder=${this.placeholder || h}
@@ -139,10 +140,10 @@ i = s([
   y("gui-textinput")
 ], i);
 typeof customElements < "u" && !customElements.get("gui-textinput") && customElements.define("gui-textinput", i);
-var S = Object.defineProperty, P = Object.getOwnPropertyDescriptor, u = (t, e, o, l) => {
-  for (var a = l > 1 ? void 0 : l ? P(e, o) : e, p = t.length - 1, d; p >= 0; p--)
+var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, u = (t, e, o, l) => {
+  for (var a = l > 1 ? void 0 : l ? S(e, o) : e, p = t.length - 1, d; p >= 0; p--)
     (d = t[p]) && (a = (l ? d(e, o, a) : d(a)) || a);
-  return l && a && S(e, o, a), a;
+  return l && a && E(e, o, a), a;
 };
 let n = class extends c {
   constructor() {

package/{time-input-BOhlBGJZ.js → time-input-5dkSm8UW.js}

@@ -1,20 +1,20 @@
-import { LitElement as d, nothing as h, html as p } from "lit";
-import { property as s, customElement as m } from "lit/decorators.js";
+import { LitElement as p, nothing as n, html as d } 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 f, u as E, r as D, v as T, w } from "./part-templates-Db871PS3.js";
-var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, e = (i, o, l, r) => {
-  for (var a = r > 1 ? void 0 : r ? S(o, l) : o, u = i.length - 1, n; u >= 0; u--)
-    (n = i[u]) && (a = (r ? n(o, l, a) : n(a)) || a);
-  return r && a && C(o, l, a), a;
+import { G as g, b as y, c as b } from "./templates-Dmr34nwp.js";
+import { G as v, g as f, u as L, r as E, v as D, w as T, P as A } from "./part-templates-VORbpgs2.js";
+var S = Object.defineProperty, P = Object.getOwnPropertyDescriptor, e = (s, o, l, r) => {
+  for (var a = r > 1 ? void 0 : r ? P(o, l) : o, u = s.length - 1, h; u >= 0; u--)
+    (h = s[u]) && (a = (r ? h(o, l, a) : h(a)) || a);
+  return r && a && S(o, l, a), a;
 };
-let t = class extends d {
+let t = class extends p {
   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 = void 0, this.hourFormat = void 0, this.minuteStep = 1, this.minTime = void 0, this.maxTime = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.inputBlockClass = "gui-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.hourAriaLabel = void 0, this.minuteAriaLabel = void 0, this.dayPeriodAriaLabel = void 0, this.value = void 0, this.hourFormat = void 0, this.minuteStep = 1, this.minTime = void 0, this.maxTime = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.inputBlockClass = "gui-time-input", this.groups = ["default"], this._parts = new v(this, {
       blockClass: this.inputBlockClass,
       groups: this.groups,
-      getDescriptor: (i) => this.getPartDescriptor(i),
-      commitGroup: (i) => this.validateAndEmit(i),
+      getDescriptor: (s) => this.getPartDescriptor(s),
+      commitGroup: (s) => this.validateAndEmit(s),
       isReadonly: () => !!this.readOnly,
       isDisabled: () => !!this.disabled,
       onEmptyPartBlur: () => this.dispatchEvent(new CustomEvent("change", { detail: { value: null }, bubbles: !0 })),
@@ -29,7 +29,8 @@ let t = class extends d {
           errors: this.errors,
           readonly: this.readOnly,
           disabled: this.disabled,
-          touched: this.touched
+          touched: this.touched,
+          required: this.required
         }
       })
     });
@@ -43,11 +44,11 @@ let t = class extends d {
   get timeLocaleData() {
     return f(this.localeId, this.hourFormat, this.minuteStep);
   }
-  getPartDescriptor(i) {
-    return this.timeLocaleData.descriptors[i];
+  getPartDescriptor(s) {
+    return this.timeLocaleData.descriptors[s];
   }
-  willUpdate(i) {
-    (!this.hasUpdated || i.has("value") || i.has("hourFormat") || i.has("localeId")) && this._parts.setGroupFromISO(
+  willUpdate(s) {
+    (!this.hasUpdated || s.has("value") || s.has("hourFormat") || s.has("localeId")) && this._parts.setGroupFromISO(
       "default",
       this.value ?? "",
       "time",
@@ -55,7 +56,7 @@ let t = class extends d {
     );
   }
   render() {
-    const i = {
+    const s = {
       uid: this.uid,
       label: this.label,
       errors: this.errors,
@@ -69,42 +70,52 @@ let t = class extends d {
     }, o = {
       blockClass: this.inputBlockClass,
       groups: this.groups,
-      formatParts: E(this.localeId, this.timeLocaleData.effectiveHourFormat),
+      formatParts: L(this.localeId, this.timeLocaleData.effectiveHourFormat),
       getDescriptor: (r) => this.getPartDescriptor(r),
       getDisplayValue: this._parts.getPartDisplay,
-      required: this.required,
+      getPartAriaLabel: (r, a) => ({
+        hour: this.hourAriaLabel,
+        minute: this.minuteAriaLabel
+      })[a] ?? A[a],
+      dayPeriodAriaLabel: this.dayPeriodAriaLabel,
       disabled: this.disabled,
       partsReadonly: !!this.readOnly
     }, l = {
       "gui-widget-icon": !0,
       [this.icon]: !0
     };
-    return p`
-      ${this.label ? y(this.uid, i) : h}
+    return d`
+      ${this.label ? y(this.uid, s, !1, void 0, !1) : n}
 
       <div class="gui-widget">
         <div
+          id=${this.uid}
           class="gui-widget-input gui-parts gui-parts-ring gui-time-input ${this.icon ? "gui-calendar--icon" : ""}"
           role="group"
+          aria-labelledby=${`${this.uid}_label`}
         >
-          ${D("default", o, this._parts)}
+          ${E("default", o, this._parts)}
         </div>
-        ${this.icon ? p`<span class=${c(l)} data-icon=${this.icon}></span>` : h}
+        ${this.icon ? d`<span
+              class=${c(l)}
+              data-icon=${this.icon}
+              aria-hidden="true"
+            ></span>` : n}
       </div>
 
-      ${this.showErrors && this.errors?.length ? v(this.uid, i) : h}
+      ${this.showErrors && this.errors?.length ? b(this.uid, s) : n}
     `;
   }
-  validateAndEmit(i) {
-    const { effectiveHourFormat: o, descriptors: l } = this.timeLocaleData, { result: r, writeBacks: a } = T(this._parts.values[i] ?? {}, {
+  validateAndEmit(s) {
+    const { effectiveHourFormat: o, descriptors: l } = this.timeLocaleData, { result: r, writeBacks: a } = D(this._parts.values[s] ?? {}, {
       hourFormat: o,
       descriptors: l
     });
-    if (this._parts.applyWriteBacks(i, a), r.kind !== "valid") {
+    if (this._parts.applyWriteBacks(s, a), r.kind !== "valid") {
       this.requestUpdate();
       return;
     }
-    const u = w(r.iso, {
+    const u = T(r.iso, {
       minTime: this.minTime,
       maxTime: this.maxTime,
       minTimeMessage: this.minTimeMessage,
@@ -122,58 +133,67 @@ let t = class extends d {
   }
 };
 e([
-  s({ type: String })
+  i({ type: String })
 ], t.prototype, "uid", 2);
 e([
-  s({ type: String })
+  i({ type: String })
 ], t.prototype, "label", 2);
 e([
-  s({ type: String, attribute: "locale-id" })
+  i({ type: String, attribute: "locale-id" })
 ], t.prototype, "localeId", 2);
 e([
-  s({ type: Array })
+  i({ type: Array })
 ], t.prototype, "errors", 2);
 e([
-  s({ type: Boolean })
+  i({ type: Boolean })
 ], t.prototype, "showErrors", 2);
 e([
-  s({ type: Boolean })
+  i({ type: Boolean })
 ], t.prototype, "touched", 2);
 e([
-  s({ type: Boolean })
+  i({ type: Boolean })
 ], t.prototype, "required", 2);
 e([
-  s({ type: Boolean })
+  i({ type: Boolean })
 ], t.prototype, "disabled", 2);
 e([
-  s({ type: Boolean, attribute: "readonly" })
+  i({ type: Boolean, attribute: "readonly" })
 ], t.prototype, "readOnly", 2);
 e([
-  s({ type: String })
+  i({ type: String })
 ], t.prototype, "icon", 2);
 e([
-  s({ type: String })
+  i({ type: String })
 ], t.prototype, "hint", 2);
 e([
-  s({ type: String })
+  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 })
 ], t.prototype, "value", 2);
 e([
-  s({ type: String, attribute: "hour-format" })
+  i({ type: String, attribute: "hour-format" })
 ], t.prototype, "hourFormat", 2);
 e([
-  s({ type: Number, attribute: "minute-step" })
+  i({ type: Number, attribute: "minute-step" })
 ], t.prototype, "minuteStep", 2);
 e([
-  s({ type: String, attribute: "min-time" })
+  i({ type: String, attribute: "min-time" })
 ], t.prototype, "minTime", 2);
 e([
-  s({ type: String, attribute: "max-time" })
+  i({ type: String, attribute: "max-time" })
 ], t.prototype, "maxTime", 2);
 e([
-  s({ type: String, attribute: "min-time-message" })
+  i({ type: String, attribute: "min-time-message" })
 ], t.prototype, "minTimeMessage", 2);
 e([
-  s({ type: String, attribute: "max-time-message" })
+  i({ type: String, attribute: "max-time-message" })
 ], t.prototype, "maxTimeMessage", 2);
 t = e([
   m("gui-time")

package/{time-list-Czo48bZm.js → time-list-DLcq8BAp.js}

@@ -2,7 +2,7 @@ import { LitElement as v, html as p, nothing as b } from "lit";
 import { property as l, customElement as _ } from "lit/decorators.js";
 import { classMap as S } from "lit/directives/class-map.js";
 import { g as O, l as x, n as f, c as T } from "./focus-leave.controller-2gV0pQd5.js";
-import { e as $, A as w, l as I, s as E, N as R } from "./part-templates-Db871PS3.js";
+import { e as $, A as w, l as I, s as E, N as R } from "./part-templates-VORbpgs2.js";
 var A = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (t, e, i, o) => {
   for (var n = o > 1 ? void 0 : o ? C(e, i) : e, a = t.length - 1, u; a >= 0; a--)
     (u = t[a]) && (n = (o ? u(e, i, n) : u(n)) || n);

package/{time-picker-bFJ63ky8.js → time-picker-g337F8d0.js}

@@ -1,29 +1,31 @@
-import { LitElement as u, html as m } from "lit";
-import { property as s, query as p, customElement as d } from "lit/decorators.js";
+import { LitElement as h, html as u } from "lit";
+import { property as s, query as m, customElement as d } from "lit/decorators.js";
 import { classMap as g } from "lit/directives/class-map.js";
-import "./time-input-BOhlBGJZ.js";
-import "./time-list-Czo48bZm.js";
-import { G as c } from "./popup.controller-eUDxE6jD.js";
-import { h as y, A as b } from "./part-templates-Db871PS3.js";
-import { a as v, b as f, c as T } from "./templates-Dk1jxLwS.js";
-import { b as $ } from "./date-Bj9mI3GU.js";
-var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, i = (e, o, a, r) => {
-  for (var l = r > 1 ? void 0 : r ? _(o, a) : o, n = e.length - 1, h; n >= 0; n--)
-    (h = e[n]) && (l = (r ? h(o, a, l) : h(l)) || l);
-  return r && l && w(o, a, l), l;
+import "./time-input-5dkSm8UW.js";
+import "./time-list-DLcq8BAp.js";
+import { G as c } from "./popup.controller-B33OvX_y.js";
+import { w as b, h as y, A as v } from "./part-templates-VORbpgs2.js";
+import { a as T, b as f, c as $ } from "./templates-Dmr34nwp.js";
+import { e as w } from "./date-DBuYpvcO.js";
+var _ = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (e, o, r, a) => {
+  for (var l = a > 1 ? void 0 : a ? A(o, r) : o, p = e.length - 1, n; p >= 0; p--)
+    (n = e[p]) && (l = (a ? n(o, r, l) : n(l)) || l);
+  return a && l && _(o, r, l), l;
 };
-let t = class extends u {
+let t = class extends h {
   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 = void 0, this.hourFormat = void 0, this.minuteStep = void 0, this.minTime = void 0, this.maxTime = void 0, this.disabledRanges = void 0, this.allowCustomTime = !1, this.height = void 0, this.itemHeight = void 0, this.columns = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.disabledRangeMessage = void 0, this.noAvailableTimesMessage = void 0, this._popup = new c(this, {
-      getInteriorElements: () => [this._timeRef, this._listRef],
+    super(...arguments), this.uid = void 0, this.label = void 0, this.hint = void 0, this.icon = "", this.toggleAriaLabel = void 0, this.hourAriaLabel = void 0, this.minuteAriaLabel = void 0, this.dayPeriodAriaLabel = 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 = void 0, this.hourFormat = void 0, this.minuteStep = void 0, this.minTime = void 0, this.maxTime = void 0, this.disabledRanges = void 0, this.allowCustomTime = !1, this.height = void 0, this.itemHeight = void 0, this.columns = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.disabledRangeMessage = void 0, this.noAvailableTimesMessage = void 0, this._popup = new c(this, {
       focusRestoreSelector: "gui-time input, gui-time button",
+      focusPopupSelector: '.gui-time-list__option[tabindex="0"]',
       isDisabled: () => !!this.disabled,
       clickIntent: (e) => e.closest(".gui-time-list__option") ? "ignore" : e.closest("gui-time") || e.closest("gui-time-list") ? "open" : "toggle",
       keyToggleMode: "openClose",
       onOpenChanged: (e) => {
         this.dispatchListToggle(e), e && this.updateComplete.then(() => this._listRef?.scrollToSelectedValue());
       }
-    }), this.onKeyDown = (e) => {
+    }), this.onToggleClick = (e) => {
+      e.stopPropagation(), this._popup.open ? this._popup.close() : this._popup.openAndFocus();
+    }, this.onKeyDown = (e) => {
       if (this._popup.onAnchorKeyDown(e)) return;
       if (e.key === "Enter" && e.target.closest("gui-time")) {
         this._popup.open && this._popup.close(), this.commitValue(this.value, !0);
@@ -39,23 +41,21 @@ let t = class extends u {
     e.has("value") && this._listRef && this._listRef.value !== this.value && (this._listRef.value = this.value);
   }
   render() {
-    const e = v("timePicker", { icon: this.icon });
-    return m`
-      ${f(this.uid ?? "", {
-      label: this.label,
-      hint: this.hint,
-      required: this.required
-    })}
+    const e = T("timePicker", { icon: this.icon });
+    return u`
+      ${f(
+      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.onKeyDown}
-        @click=${this._popup.onAnchorClick}
-      >
+      <div class="gui-widget" @keydown=${this.onKeyDown} @click=${this._popup.onAnchorClick}>
         <gui-time
           id="time-input"
           class=${g(e.widgetClasses)}
@@ -74,20 +74,42 @@ let t = class extends u {
           .minuteStep=${this.minuteStep}
           .minTime=${this.minTime}
           .maxTime=${this.maxTime}
+          .hourAriaLabel=${this.hourAriaLabel}
+          .minuteAriaLabel=${this.minuteAriaLabel}
+          .dayPeriodAriaLabel=${this.dayPeriodAriaLabel}
           .minTimeMessage=${this.minTimeMessage}
           .maxTimeMessage=${this.maxTimeMessage}
           @blur=${this.onTimeBlur}
           @focus=${this._popup.show}
           @change=${this.onTimeChange}
         ></gui-time>
-        <span class="gui-time-picker__arrow"
-          ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
+        <button
+          type="button"
+          class="gui-time-picker__arrow"
+          aria-label=${this.toggleAriaLabel ?? "Show time list"}
+          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>
 
         <gui-time-list
+          id=${`${this.uid}_popup`}
+          role="dialog"
+          aria-label=${this.label ?? "Time list"}
           .uid=${this.uid}
           .value=${this.value}
           .label=${this.label}
@@ -107,7 +129,7 @@ let t = class extends u {
         ></gui-time-list>
       </div>
 
-      ${this.showErrors ? T(this.uid ?? "", { errors: this.errors, touched: this.touched }) : ""}
+      ${this.showErrors ? $(this.uid ?? "", { errors: this.errors, touched: this.touched }) : ""}
     `;
   }
   onTimeChange(e) {
@@ -127,37 +149,44 @@ let t = class extends u {
    */
   commitValue(e, o = !1) {
     this.value = e ?? void 0;
-    const a = this.validateBounds(this.value);
+    const r = this.validateBounds(this.value);
     this.dispatchEvent(
       new CustomEvent("change", {
         detail: { value: e ?? null, commit: o },
         bubbles: !0,
         composed: !0
       })
-    ), a && this.dispatchEvent(
+    ), r && this.dispatchEvent(
       new CustomEvent("inputError", {
-        detail: { message: a },
+        detail: { message: r },
         bubbles: !0,
         composed: !0
       })
     );
   }
   validateBounds(e) {
-    return e && y(e, this.disabledRanges) ? this.disabledRangeMessage ?? $ : null;
+    if (!e) return null;
+    const o = b(e, {
+      minTime: this.minTime,
+      maxTime: this.maxTime,
+      minTimeMessage: this.minTimeMessage,
+      maxTimeMessage: this.maxTimeMessage
+    });
+    return o || (y(e, this.disabledRanges) ? this.disabledRangeMessage ?? w : null);
   }
   selectAdjacentOption(e) {
-    const o = b({
+    const o = v({
       minTime: this.minTime,
       maxTime: this.maxTime,
       minuteStep: this.minuteStep,
       disabledRanges: this.disabledRanges
     });
     if (!o.length) return;
-    const a = o.findIndex((l) => l.value === this.value);
-    let r = a === -1 ? e === 1 ? 0 : o.length - 1 : a + e;
-    for (; r >= 0 && r < o.length && o[r].disabled; )
-      r += e;
-    r < 0 || r >= o.length || (this.commitValue(o[r].value), this._popup.show(), this.updateComplete.then(() => this._listRef?.scrollToSelectedValue()));
+    const r = o.findIndex((l) => l.value === this.value);
+    let a = r === -1 ? e === 1 ? 0 : o.length - 1 : r + e;
+    for (; a >= 0 && a < o.length && o[a].disabled; )
+      a += e;
+    a < 0 || a >= o.length || (this.commitValue(o[a].value), this._popup.show(), this.updateComplete.then(() => this._listRef?.scrollToSelectedValue()));
   }
   /** Public close hook kept for the date-time calendars, which close the
    * embedded time-picker's list imperatively. */
@@ -186,6 +215,18 @@ i([
 i([
   s({ type: String })
 ], t.prototype, "icon", 2);
+i([
+  s({ type: String, attribute: "toggle-aria-label" })
+], t.prototype, "toggleAriaLabel", 2);
+i([
+  s({ type: String })
+], t.prototype, "hourAriaLabel", 2);
+i([
+  s({ type: String })
+], t.prototype, "minuteAriaLabel", 2);
+i([
+  s({ type: String })
+], t.prototype, "dayPeriodAriaLabel", 2);
 i([
   s({ type: Array })
 ], t.prototype, "errors", 2);
@@ -250,10 +291,7 @@ i([
   s({ type: String, attribute: "no-available-times-message" })
 ], t.prototype, "noAvailableTimesMessage", 2);
 i([
-  p("gui-time")
-], t.prototype, "_timeRef", 2);
-i([
-  p("gui-time-list")
+  m("gui-time-list")
 ], t.prototype, "_listRef", 2);
 t = i([
   d("gui-time-picker")