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

package/{day-status-0-hJHrI7.js → day-status-CsWStVQV.js}

@@ -1,37 +1,37 @@
-import { nothing as S, html as c } from "lit";
-import { g as C, n as O, c as T } from "./focus-leave.controller-2gV0pQd5.js";
-import { t as v, p as M, j as k, i as E, k as R, l as I, w as A, f as L, h as N, n as y } from "./date-Bj9mI3GU.js";
+import { nothing as m, html as c } from "lit";
+import { g as C, n as Y, c as k } from "./focus-leave.controller-2gV0pQd5.js";
+import { t as v, p as M, k as A, i as R, l as x, n as I, o as L, w as N, h as P, j as q, q as y } from "./date-DBuYpvcO.js";
 import { repeat as w } from "lit-html/directives/repeat.js";
-import { b as P, c as q } from "./templates-Dk1jxLwS.js";
-const m = ".gui-calendar__day-button:not(.other-month)", F = ".gui-calendar__panel", G = "gui-calendar__year-button", U = ".gui-calendar__year-button", $ = ".gui-calendar__year-button.current", K = ".gui-calendar__year-grid", Y = ".gui-calendar__year-selector", H = '.gui-calendar__day-button[tabindex="0"]';
-class te {
+import { b as F, c as G } from "./templates-Dmr34nwp.js";
+const S = ".gui-calendar__day-button:not(.other-month)", U = ".gui-calendar__panel", K = "gui-calendar__year-button", H = ".gui-calendar__year-button", O = ".gui-calendar__year-button.current", j = ".gui-calendar__year-grid", B = ".gui-calendar__year-selector", V = '.gui-calendar__day-button[tabindex="0"]';
+class re {
   constructor(e, r) {
     this.handleDayKeydown = async (n) => {
       if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(n.key) && n.key !== " " && n.key !== "Enter") return;
-      const a = n.target, u = Array.from(this.host.querySelectorAll(m)), p = u.indexOf(a), f = window.getComputedStyle(this.host).direction === "rtl";
+      const o = n.target, u = Array.from(this.host.querySelectorAll(S)), p = u.indexOf(o), f = window.getComputedStyle(this.host).direction === "rtl";
       if (n.key === " " || n.key === "Enter") {
-        n.preventDefault(), this.options.onActivateDay(a.dataset.date ?? "", n);
+        n.preventDefault(), this.options.onActivateDay(o.dataset.date ?? "", n);
         return;
       }
       const d = C(n.key, { columns: 7, isRTL: f });
       if (d.kind !== "delta") return;
       const h = d.delta;
       n.preventDefault();
-      const s = O(
+      const i = Y(
         p,
         h,
         u.length,
-        (o) => this.isButtonDisabled(u[o])
+        (a) => this.isButtonDisabled(u[a])
       );
       let l = !1;
-      if (s < 0)
+      if (i < 0)
         if (this.options.canGoPrev())
           this.options.goPrev(), l = !0;
         else {
           u.find((g) => !this.isButtonDisabled(g))?.focus();
           return;
         }
-      else if (s >= u.length)
+      else if (i >= u.length)
         if (this.options.canGoNext())
           this.options.goNext(), l = !0;
         else {
@@ -40,53 +40,53 @@ class te {
         }
       if (l) {
         await this.host.updateComplete;
-        const o = Array.from(
-          this.host.querySelectorAll(m)
-        ), g = Array.from(this.host.querySelectorAll(F));
+        const a = Array.from(
+          this.host.querySelectorAll(S)
+        ), g = Array.from(this.host.querySelectorAll(U));
         let b;
-        if (s < 0)
-          b = g[0].querySelectorAll(m).length + s;
+        if (i < 0)
+          b = g[0].querySelectorAll(S).length + i;
         else {
-          const _ = g[g.length - 1].querySelectorAll(m).length;
-          b = o.length - _ + (s - u.length);
+          const _ = g[g.length - 1].querySelectorAll(S).length;
+          b = a.length - _ + (i - u.length);
         }
-        if (this.isButtonDisabled(o[b])) {
-          const D = O(
+        if (this.isButtonDisabled(a[b])) {
+          const D = Y(
             b,
             h,
-            o.length,
-            (_) => this.isButtonDisabled(o[_])
+            a.length,
+            (_) => this.isButtonDisabled(a[_])
           );
-          if (D < 0 || D >= o.length) {
-            const _ = o.findIndex((x) => !this.isButtonDisabled(x));
-            _ > -1 && o[_].focus();
+          if (D < 0 || D >= a.length) {
+            const _ = a.findIndex((E) => !this.isButtonDisabled(E));
+            _ > -1 && a[_].focus();
           } else
-            o[D]?.focus();
+            a[D]?.focus();
         } else {
-          const D = Math.max(0, Math.min(b, o.length - 1));
-          o[D]?.focus();
+          const D = Math.max(0, Math.min(b, a.length - 1));
+          a[D]?.focus();
         }
       } else
-        u[s]?.focus();
+        u[i]?.focus();
     }, this.handleYearKeydown = (n) => {
-      const i = n.target;
-      if (!i.classList.contains(G)) return;
-      const a = Array.from(this.host.querySelectorAll(U)), u = a.indexOf(i), p = window.getComputedStyle(this.host).direction === "rtl";
+      const s = n.target;
+      if (!s.classList.contains(K)) return;
+      const o = Array.from(this.host.querySelectorAll(H)), u = o.indexOf(s), p = window.getComputedStyle(this.host).direction === "rtl";
       if (n.key === "Enter" || n.key === " ") {
         n.preventDefault();
-        const h = parseInt(i.dataset.year ?? "", 10);
+        const h = parseInt(s.dataset.year ?? "", 10);
         isNaN(h) || this.selectYear(h);
         return;
       }
       if (n.key === "Escape") {
-        n.preventDefault(), n.stopPropagation(), this.host.querySelector(Y)?.focus(), this.options.onCloseYearGrid();
+        n.preventDefault(), n.stopPropagation(), this.host.querySelector(B)?.focus(), this.options.onCloseYearGrid();
         return;
       }
       const f = C(n.key, { columns: 4, isRTL: p });
       if (f.kind !== "delta") return;
       n.preventDefault();
       const d = u + f.delta;
-      d >= 0 && d < a.length && a[d].focus();
+      d >= 0 && d < o.length && o[d].focus();
     }, this.onPrevMonthClick = () => {
       this.options.goPrev(), this.keepNavFocusInside("prev", "next");
     }, this.onNextMonthClick = () => {
@@ -97,9 +97,9 @@ class te {
   }
   selectYear(e) {
     this.host.querySelector(
-      Y
+      B
     )?.focus(), this.options.onSelectYear(e), this.host.updateComplete.then(() => {
-      this.host.querySelector(H)?.focus();
+      this.host.querySelector(V)?.focus();
     });
   }
   /**
@@ -112,14 +112,14 @@ class te {
     });
   }
   scrollToCurrentYear() {
-    const e = this.host.querySelector(K), r = this.host.querySelector($);
+    const e = this.host.querySelector(j), r = this.host.querySelector(O);
     if (e && r) {
-      const n = e.getBoundingClientRect(), i = r.getBoundingClientRect(), a = e.scrollTop + (i.top - n.top) - n.height / 2 + i.height / 2;
-      e.scrollTop = Math.max(0, a);
+      const n = e.getBoundingClientRect(), s = r.getBoundingClientRect(), o = e.scrollTop + (s.top - n.top) - n.height / 2 + s.height / 2;
+      e.scrollTop = Math.max(0, o);
     }
   }
   focusCurrentYearButton() {
-    this.host.querySelector($)?.focus();
+    this.host.querySelector(O)?.focus();
   }
   /**
    * After a nav click lands on a min/max boundary, the clicked button renders
@@ -134,16 +134,20 @@ class te {
     if (!n || !n.disabled) return;
     (this.host.querySelector(
       `.gui-calendar__month-button--${r}:not([disabled])`
-    ) ?? this.host.querySelector(".gui-calendar__day-button:not([disabled])"))?.focus();
+    ) ?? this.host.querySelector(
+      '.gui-calendar__day-button:not([disabled]):not([aria-disabled="true"])'
+    ))?.focus();
   }
   /**
-   * Whether a queried button is disabled; a missing button counts as disabled
+   * Whether a queried button is disabled; a missing button counts as disabled.
+   * Blocked in-month days carry `aria-disabled` instead of the native
+   * attribute (they stay in the accessibility tree) — skip both alike.
    */
   isButtonDisabled(e) {
-    return e ? e.hasAttribute("disabled") : !0;
+    return e ? e.hasAttribute("disabled") || e.getAttribute("aria-disabled") === "true" : !0;
   }
 }
-class ne {
+class se {
   constructor(e, r) {
     this._currentDate = /* @__PURE__ */ new Date(), this._yearSelectorOpen = !1, this.host = e, this.options = r, e.addController(this);
   }
@@ -241,11 +245,11 @@ class ne {
    * dates already inside the visible months.
    */
   navigateToDate(e) {
-    !isNaN(e.getTime()) && !k(e, this._currentDate, this.options.getNumberOfMonths() ?? 1) && (this.currentDate = e);
+    !isNaN(e.getTime()) && !A(e, this._currentDate, this.options.getNumberOfMonths() ?? 1) && (this.currentDate = e);
   }
   /** Whether a day is outside min/max or inside a disabled range. */
   isDisabled(e) {
-    return E(
+    return R(
       v(e),
       this.options.getMinDate(),
       this.options.getMaxDate(),
@@ -253,7 +257,11 @@ class ne {
     );
   }
 }
-function re(t) {
+function $(t, e) {
+  const r = new Date(t);
+  return r.setDate(1), r.setMonth(r.getMonth() + e), r;
+}
+function oe(t) {
   const e = {
     uid: t.uid,
     label: t.label,
@@ -261,21 +269,22 @@ function re(t) {
     errors: t.errors,
     touched: t.touched,
     required: t.required
-  }, r = Array.from({ length: t.numberOfMonths ?? 1 }, (n, i) => i);
+  }, r = Array.from({ length: t.numberOfMonths ?? 1 }, (s, o) => o), n = r.map((s) => x(t.localeId, $(t.currentDate, s))).join(", ");
   return c`
-    ${t.label ? P(t.uid, e, !1, "calendar") : S}
+    ${t.label ? F(t.uid, e, !1, "calendar") : m}
 
     <div class="gui-widget" @focusout=${t.onFocusOut}>
       <div
-        id=${t.uid}
+        id=${`${t.uid}_calendar`}
         class="gui-calendar-input"
         role="group"
-        aria-labelledby=${t.label ? `${t.uid}_calendar_label` : S}
-        ?aria-disabled=${t.disabled}
+        aria-labelledby=${t.label ? `${t.uid}_calendar_label` : m}
+        aria-disabled=${t.disabled ? "true" : m}
       >
+        <div class="gui-visually-hidden" aria-live="polite">${n}</div>
         ${t.renderAboveCalendar()}
         <div class="gui-calendar__container">
-          ${B("prev", {
+          ${T("prev", {
     icon: t.prevMonthIcon,
     ariaLabel: t.prevMonthAriaLabel,
     disabled: !t.canGoPrev,
@@ -283,10 +292,10 @@ function re(t) {
   })}
 
           <div class="gui-calendar__months-grid">
-            ${r.map((n) => t.renderMonthPanel(n))}
+            ${r.map((s) => t.renderMonthPanel(s))}
           </div>
 
-          ${B("next", {
+          ${T("next", {
     icon: t.nextMonthIcon,
     ariaLabel: t.nextMonthAriaLabel,
     disabled: !t.canGoNext,
@@ -296,24 +305,28 @@ function re(t) {
       </div>
     </div>
 
-    ${t.errors?.length ? q(t.uid, e) : S}
+    ${t.errors?.length ? G(t.uid, e) : m}
   `;
 }
-function B(t, e) {
+function T(t, e) {
   return t === "prev" ? c`
       <button
         type="button"
-        tabindex="0"
         class="gui-button gui-calendar__month-button gui-calendar__month-button--prev"
         ?disabled=${e.disabled}
         @click=${e.onClick}
         aria-label=${e.ariaLabel ?? "Previous month"}
       >
-        ${e.icon ? c`<span class=${`gui-widget-icon ${e.icon}`} data-icon=${e.icon}></span>` : c`<svg
+        ${e.icon ? c`<span
+              class=${`gui-widget-icon ${e.icon}`}
+              data-icon=${e.icon}
+              aria-hidden="true"
+            ></span>` : c`<svg
               xmlns="http://www.w3.org/2000/svg"
               width="16"
               height="16"
               viewBox="0 0 256 256"
+              aria-hidden="true"
             >
               <path
                 d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"
@@ -323,13 +336,22 @@ function B(t, e) {
     ` : c`
     <button
       type="button"
-      tabindex="0"
       class="gui-button gui-calendar__month-button gui-calendar__month-button--next"
       ?disabled=${e.disabled}
       @click=${e.onClick}
       aria-label=${e.ariaLabel ?? "Next month"}
     >
-      ${e.icon ? c`<span class=${`gui-widget-icon ${e.icon}`} data-icon=${e.icon}></span>` : c`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
+      ${e.icon ? c`<span
+            class=${`gui-widget-icon ${e.icon}`}
+            data-icon=${e.icon}
+            aria-hidden="true"
+          ></span>` : c`<svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 256 256"
+            aria-hidden="true"
+          >
             <path
               d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"
             ></path>
@@ -337,54 +359,56 @@ function B(t, e) {
     </button>
   `;
 }
-function V(t) {
-  const e = new Date(t.currentDate);
-  return e.setDate(1), e.setMonth(e.getMonth() + t.offset), c`
+function W(t) {
+  const e = $(t.currentDate, t.offset);
+  return c`
     <div class="gui-calendar__panel">
       ${t.renderHeader(e)} ${t.renderBelowHeader(t.offset)}
       ${t.renderPanelBody(t.offset)}
     </div>
   `;
 }
-function se(t) {
-  return V({
+function ie(t) {
+  return W({
     currentDate: t.currentDate,
     offset: t.offset,
-    renderHeader: (e) => W(e, {
+    renderHeader: (e) => Z(e, {
       localeId: t.localeId,
       monthFormat: t.monthFormat,
       yearSelectorOpen: t.yearSelectorOpen,
+      selectYearAriaLabel: t.selectYearAriaLabel,
       onToggleYearSelector: t.onToggleYearSelector
     }),
-    renderBelowHeader: t.renderBelowHeader ?? (() => S),
+    renderBelowHeader: t.renderBelowHeader ?? (() => m),
     renderPanelBody: t.renderPanelBody
   });
 }
-function oe(t) {
-  return t.yearSelectorOpen && t.offset === 0 ? Z({
+function ae(t) {
+  return t.yearSelectorOpen && t.offset === 0 ? J({
     years: t.years,
     currentYear: t.currentYear,
     onSelectYear: t.onSelectYear,
-    onKeydown: t.onYearKeydown
-  }) : j(
-    T(t.getDays(t.offset), 7),
-    R(t.localeId),
-    (e) => t.renderDay(e)
+    onKeydown: t.onYearKeydown,
+    ariaLabel: t.yearGridAriaLabel
+  }) : z(
+    k(t.getDays(t.offset), 7),
+    I(t.localeId),
+    (e) => t.renderDay(e),
+    x(t.localeId, $(t.currentDate, t.offset))
   );
 }
-function W(t, e) {
-  const r = I(e.localeId, t, e.monthFormat);
+function Z(t, e) {
+  const r = L(e.localeId, t, e.monthFormat);
   return c`
     <header class="gui-calendar__header">
       <h2>
         ${r.map(
     (n) => n.type === "year" ? c`<button
                 type="button"
-                tabindex="0"
                 class="gui-calendar__year-selector"
                 @click=${e.onToggleYearSelector}
                 aria-expanded=${e.yearSelectorOpen}
-                aria-label="Select year"
+                aria-label=${`${e.selectYearAriaLabel ?? "Select year"}, ${n.value}`}
               >
                 <span class="gui-calendar__year-value">${n.value}</span>
                 <span class="gui-calendar__year-arrow" aria-hidden="true">
@@ -405,25 +429,25 @@ function W(t, e) {
     </header>
   `;
 }
-function j(t, e, r) {
+function z(t, e, r, n) {
   return c`
-    <div class="gui-calendar__days-grid" role="grid">
+    <div class="gui-calendar__days-grid" role="grid" aria-label=${n ?? m}>
       <div role="row" class="gui-calendar__rows">
         ${w(
     e,
-    (n, i) => i,
-    (n) => c`<span class="gui-calendar__weekday" role="gridcell">${n}</span>`
+    (s, o) => o,
+    (s) => c`<span class="gui-calendar__weekday" role="columnheader">${s}</span>`
   )}
       </div>
 
       ${w(
     t,
-    (n) => c`
+    (s) => c`
           <div role="row" class="gui-calendar__rows">
             ${w(
-      n,
-      (i) => i.date.toISOString(),
-      (i) => r(i)
+      s,
+      (o) => o.date.toISOString(),
+      (o) => r(o)
     )}
           </div>
         `
@@ -431,16 +455,16 @@ function j(t, e, r) {
     </div>
   `;
 }
-function Z(t) {
+function J(t) {
   const e = t.currentYear;
   return c`
     <div
       class="gui-calendar__year-grid"
       role="grid"
-      aria-label="Year selection"
+      aria-label=${t.ariaLabel ?? "Year selection"}
       @keydown=${t.onKeydown}
     >
-      ${T(t.years, 4).map(
+      ${k(t.years, 4).map(
     (r) => c`
           <div role="row" class="gui-calendar__year-row">
             ${r.map(
@@ -451,8 +475,8 @@ function Z(t) {
                   class="gui-calendar__year-button ${n === e ? "current" : ""}"
                   tabindex=${n === e ? 0 : -1}
                   data-year=${n}
-                  @click=${(i) => {
-        i.stopPropagation(), t.onSelectYear(n);
+                  @click=${(s) => {
+        s.stopPropagation(), t.onSelectYear(n);
       }}
                   aria-selected=${n === e}
                 >
@@ -466,26 +490,26 @@ function Z(t) {
     </div>
   `;
 }
-function ie(t, e) {
+function le(t, e) {
   const r = t.getTime();
-  let n = !1, i = !1, a = !1, u = !1, p = !1, f = !1, d = !1, h = !1;
+  let n = !1, s = !1, o = !1, u = !1, p = !1, f = !1, d = !1, h = !1;
   if (e.selectedISO && (n = y(t, M(e.selectedISO))), e.invalidRange) {
-    const s = e.invalidRange.start, l = e.invalidRange.end;
-    f = y(t, s), d = y(t, l), r > s.getTime() && r < l.getTime() && (h = !0);
+    const i = e.invalidRange.start, l = e.invalidRange.end;
+    f = y(t, i), d = y(t, l), r > i.getTime() && r < l.getTime() && (h = !0);
   }
   if (e.selectingSpan && (p = r >= e.selectingSpan.start.getTime() && r <= e.selectingSpan.end.getTime()), e.ranges)
-    for (const s of e.ranges)
-      y(t, s.start) && (i = !0, a = !s.end), s.end && (y(t, s.end) && (a = !0), r > s.start.getTime() && r < s.end.getTime() && (u = !0));
+    for (const i of e.ranges)
+      y(t, i.start) && (s = !0, o = !i.end), i.end && (y(t, i.end) && (o = !0), r > i.start.getTime() && r < i.end.getTime() && (u = !0));
   if (e.workingRange) {
-    const { start: s, end: l } = e.workingRange;
-    y(t, s) && (i = !0), y(t, l) && (a = !0), r > s.getTime() && r < l.getTime() && (u = !0);
+    const { start: i, end: l } = e.workingRange;
+    y(t, i) && (s = !0), y(t, l) && (o = !0), r > i.getTime() && r < l.getTime() && (u = !0);
   }
   return {
     isSelected: n,
-    isRangeStart: i,
-    isRangeEnd: a,
+    isRangeStart: s,
+    isRangeEnd: o,
     isInRange: u,
-    isOneDayRange: i && a,
+    isOneDayRange: s && o,
     isAnchor: e.anchor ? y(t, e.anchor) : !1,
     isSelecting: p,
     isInvalidStart: f,
@@ -493,38 +517,38 @@ function ie(t, e) {
     isInvalidInRange: h
   };
 }
-function ae(t) {
-  const { currentDate: e, offset: r = 0, localeId: n, numberOfMonths: i = 1 } = t, a = new Date(e.getFullYear(), e.getMonth() + r, 1), u = a.getMonth(), p = a.getDay(), f = A(n)[0], d = (p - f + 7) % 7, h = new Date(a);
-  h.setDate(a.getDate() - d);
-  let s = [];
+function ce(t) {
+  const { currentDate: e, offset: r = 0, localeId: n, numberOfMonths: s = 1 } = t, o = new Date(e.getFullYear(), e.getMonth() + r, 1), u = o.getMonth(), p = o.getDay(), f = N(n)[0], d = (p - f + 7) % 7, h = new Date(o);
+  h.setDate(o.getDate() - d);
+  let i = [];
   for (let l = 0; l < 42; l++) {
-    const o = new Date(h);
-    o.setDate(h.getDate() + l), s.push(
+    const a = new Date(h);
+    a.setDate(h.getDate() + l), i.push(
       t.toDay({
-        date: o,
-        dayLabel: N(n, o),
-        isCurrentMonth: o.getMonth() === u,
-        isToday: L(o),
-        isDisabled: t.isDisabled(o)
+        date: a,
+        dayLabel: q(n, a),
+        isCurrentMonth: a.getMonth() === u,
+        isToday: P(a),
+        isDisabled: t.isDisabled(a)
       })
     );
   }
   for (let l = 0; l < 2; l++)
-    s.slice(-7).every((g) => !g.isCurrentMonth) && (s = s.slice(0, -7));
-  if (r === 0 && !s.some((l) => l.isFocusable) && !(t.focusFallbackDates ?? []).some(
-    (o) => k(o, e, i)
+    i.slice(-7).every((g) => !g.isCurrentMonth) && (i = i.slice(0, -7));
+  if (r === 0 && !i.some((l) => l.isFocusable) && !(t.focusFallbackDates ?? []).some(
+    (a) => A(a, e, s)
   )) {
-    const o = s.find((g) => g.isCurrentMonth && !g.isDisabled);
-    o && (o.isFocusable = !0);
+    const a = i.find((g) => g.isCurrentMonth && !g.isDisabled);
+    a && (a.isFocusable = !0);
   }
-  return s;
+  return i;
 }
 export {
-  ne as G,
-  te as a,
-  se as b,
-  oe as c,
-  ae as d,
-  ie as e,
-  re as r
+  se as G,
+  re as a,
+  ie as b,
+  ae as c,
+  ce as d,
+  le as e,
+  oe as r
 };

package/{dropdown.element-WsD61Qel.js → dropdown.element-CXpMwJsU.js}

@@ -1,10 +1,10 @@
 import { InputWidgetAdapter as w, formContext as y, inputContext as F } from "@golemui/lit";
 import { consume as x, provide as C } from "@lit/context";
 import { LitElement as D, nothing as f, html as g } from "lit";
-import { property as L, state as c, query as $, customElement as R } from "lit/decorators.js";
+import { property as L, state as c, query as I, customElement as R } from "lit/decorators.js";
 import { Subject as V, debounceTime as k } from "rxjs";
-import { d as j } from "./list-CrLIL4by.js";
-import "./errors-QjKhr6mA.js";
+import { d as j } from "./list-D730tmGN.js";
+import "./errors-Byb2dIhK.js";
 var O = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (e, t, i, s) => {
   for (var r = s > 1 ? void 0 : s ? S(t, i) : t, d = e.length - 1, h; d >= 0; d--)
     (h = e[d]) && (r = (s ? h(t, i, r) : h(r)) || r);
@@ -126,13 +126,10 @@ let a = class extends D {
         .native=${!1}
       ></gui-label>
 
-      <div
-        class="gui-widget"
-        aria-expanded=${this._isListVisible}
-        @keydown=${this._onWidgetKeyDown}
-      >
+      <div class="gui-widget" @keydown=${this._onWidgetKeyDown}>
         <input
           type="text"
+          role="combobox"
           id=${this.widget.uid}
           data-cy=${`${this.widget.uid}_textinput`}
           class="gui-widget-input"
@@ -146,18 +143,27 @@ let a = class extends D {
           @input=${this._onInput}
           @focusout=${this._onFocusOutInput}
           @focus=${this._onFocus}
+          aria-expanded=${this._isListVisible ? "true" : "false"}
+          aria-controls=${`${this.widget.uid}-list`}
+          aria-autocomplete="list"
           aria-labelledby=${e.label ? `${this.widget.uid}_label` : f}
           aria-describedby=${e.hint ? `${this.widget.uid}_hint` : f}
         />
         <span class="gui-dropdown__arrow"
-          ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
+          ><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>
 
         <gui-list
-          id=${this.widget.uid}
+          id=${`${this.widget.uid}-list`}
           .uid=${this.widget.uid}
           .value=${e.value ?? ""}
           .valueField=${e.valueField}
@@ -177,7 +183,7 @@ let a = class extends D {
           @change=${this._onValueChange}
         >
           ${i.map((o, _) => {
-      const u = this._range.start + _, p = e.value === o.value, m = this._focusedIndex === u, b = !!e.disabled || !!o.disabled, I = e.labelField ?? "label", v = o.template !== null && typeof o.template == "object" && I && !e.itemRenderer ? o.template[I] : o.template;
+      const u = this._range.start + _, p = e.value === o.value, m = this._focusedIndex === u, b = !!e.disabled || !!o.disabled, $ = e.labelField ?? "label", v = o.template !== null && typeof o.template == "object" && $ && !e.itemRenderer ? o.template[$] : o.template;
       return g`
               <div
                 role="option"
@@ -240,10 +246,10 @@ l([
   c()
 ], a.prototype, "_selectedItem", 2);
 l([
-  $("input")
+  I("input")
 ], a.prototype, "_inputRef", 2);
 l([
-  $("gui-list")
+  I("gui-list")
 ], a.prototype, "_listRef", 2);
 a = l([
   R("gui-dropdown-input")

package/{errors-QjKhr6mA.js → errors-Byb2dIhK.js}

@@ -1,6 +1,6 @@
 import { LitElement as h, html as y } from "lit";
 import { property as r, customElement as c } from "lit/decorators.js";
-import { G as m, b as f, c as g } from "./templates-Dk1jxLwS.js";
+import { G as m, b as f, c as g } from "./templates-Dmr34nwp.js";
 var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (u, s, n, i) => {
   for (var e = i > 1 ? void 0 : i ? b(s, n) : s, l = u.length - 1, a; l >= 0; l--)
     (a = u[l]) && (e = (i ? a(s, n, e) : a(e)) || e);
@@ -17,7 +17,8 @@ let t = class extends h {
           errors: this.errors,
           readonly: this.readOnly,
           disabled: this.disabled,
-          touched: this.touched
+          touched: this.touched,
+          required: this.required
         }
       })
     });