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

package/{range-time-picker.element-v6nQsIPw.js → range-time-picker.element-CPIAiQPC.js}

@@ -1,25 +1,25 @@
-import { InputWidgetAdapter as v, formContext as y, inputContext as T } from "@golemui/lit";
-import { LitElement as g, html as d, nothing as _ } from "lit";
-import { property as a, query as c, state as b, customElement as $ } from "lit/decorators.js";
+import { InputWidgetAdapter as $, formContext as y, inputContext as v } from "@golemui/lit";
+import { LitElement as g, html as m, nothing as T } from "lit";
+import { property as a, query as _, state as c, customElement as b } from "lit/decorators.js";
 import { classMap as f } from "lit/directives/class-map.js";
-import "./range-time-input-3lhqR1Ku.js";
-import "./time-list-Czo48bZm.js";
-import { G as w } from "./popup.controller-eUDxE6jD.js";
-import { k as I, s as u, t as k } from "./part-templates-Db871PS3.js";
-import { a as L, b as S, c as M } from "./templates-Dk1jxLwS.js";
-import { I as C, a as A, b as x } from "./date-Bj9mI3GU.js";
-import { consume as E, provide as R } from "@lit/context";
+import "./range-time-input-BP9ZL9O8.js";
+import "./time-list-DLcq8BAp.js";
+import { G as L } from "./popup.controller-B33OvX_y.js";
+import { k as w, s as u, t as A } from "./part-templates-VORbpgs2.js";
+import { a as S, b as k, c as I } from "./templates-Dmr34nwp.js";
+import { I as C, b as M, e as x } from "./date-DBuYpvcO.js";
+import { consume as E, provide as P } from "@lit/context";
 import "rxjs";
-var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, i = (e, s, o, n) => {
-  for (var r = n > 1 ? void 0 : n ? P(s, o) : s, l = e.length - 1, p; l >= 0; l--)
+var O = Object.defineProperty, R = Object.getOwnPropertyDescriptor, i = (e, s, o, n) => {
+  for (var r = n > 1 ? void 0 : n ? R(s, o) : s, l = e.length - 1, p; l >= 0; l--)
     (p = e[l]) && (r = (n ? p(s, o, r) : p(r)) || r);
   return n && r && O(s, o, r), r;
 };
 let t = class extends g {
   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.startTimeAriaLabel = void 0, this.endTimeAriaLabel = void 0, this.startTimeLabel = void 0, this.endTimeLabel = 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.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.rangeOrderMessage = void 0, this.disabledRangeMessage = void 0, this.noAvailableTimesMessage = void 0, this._workingIn = void 0, this._workingOut = void 0, this._popup = new w(this, {
-      getInteriorElements: () => [this._inputRef, this._panelRef],
+    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 = [], this.separator = void 0, this.removePillAriaLabel = void 0, this.startTimeAriaLabel = void 0, this.endTimeAriaLabel = void 0, this.startTimeLabel = void 0, this.endTimeLabel = 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.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.rangeOrderMessage = void 0, this.disabledRangeMessage = void 0, this.noAvailableTimesMessage = void 0, this._workingIn = void 0, this._workingOut = void 0, this._popup = new L(this, {
       focusRestoreSelector: "gui-range-time input, gui-range-time button",
+      focusPopupSelector: '.gui-time-list__option[tabindex="0"]',
       isDisabled: () => !!this.disabled,
       clickIntent: (e) => e.closest(".gui-time-list__option") ? "ignore" : e.closest(".gui-range-time-input__part") || e.closest(".gui-range-time-picker__panel") ? "open" : "toggle",
       keyToggleMode: "openClose",
@@ -31,6 +31,8 @@ let t = class extends g {
       }
     }), 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() {
@@ -50,11 +52,16 @@ let t = class extends g {
    */
   get outListBounds() {
     if (!this._workingIn) return { minTime: this.minTime, maxTime: this.maxTime };
-    const e = I(this._workingIn, this.minuteStep);
+    const e = w(this._workingIn, this.minuteStep);
     return e ? { minTime: e, maxTime: this.maxTime } : { minTime: "23:59:59", maxTime: "00:00:00" };
   }
   render() {
-    const e = L("rangeTimePicker", { icon: this.icon }), s = this.outListBounds, o = this.startTimeLabel ?? "Start time", n = this.endTimeLabel ?? "End time", r = this._popup.open ? d`<div class="gui-range-time-picker__panel" id="list-panel" role="group">
+    const e = S("rangeTimePicker", { icon: this.icon }), s = this.outListBounds, o = this.startTimeLabel ?? "Start time", n = this.endTimeLabel ?? "End time", r = this._popup.open ? m`<div
+          class="gui-range-time-picker__panel"
+          id=${`${this.uid}_popup`}
+          role="dialog"
+          aria-label=${this.label ?? "Time list"}
+        >
           <div class="gui-range-time-picker__column">
             <span class="gui-range-time-picker__column-label">${o}</span>
             <gui-time-list
@@ -97,20 +104,22 @@ let t = class extends g {
               @change=${this.onOutListChange}
             ></gui-time-list>
           </div>
-        </div>` : _;
-    return d`
-      ${S(this.uid ?? "", {
-      label: this.label,
-      hint: this.hint,
-      required: this.required
-    })}
+        </div>` : T;
+    return m`
+      ${k(
+      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}
       >
@@ -142,23 +151,42 @@ let t = class extends g {
           .removePillAriaLabel=${this.removePillAriaLabel}
           .startTimeAriaLabel=${this.startTimeAriaLabel}
           .endTimeAriaLabel=${this.endTimeAriaLabel}
+          .hourAriaLabel=${this.hourAriaLabel}
+          .minuteAriaLabel=${this.minuteAriaLabel}
+          .dayPeriodAriaLabel=${this.dayPeriodAriaLabel}
           @blur=${this.onInputBlur}
           @focus=${this._popup.show}
           @change=${this.onInputChange}
           @partsChange=${this.onPartsChange}
           @pillClick=${this.onPillClick}
         ></gui-range-time>
-        <span class="gui-range-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-range-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>
 
         ${r}
       </div>
 
-      ${this.showErrors ? M(this.uid ?? "", { errors: this.errors, touched: this.touched }) : ""}
+      ${this.showErrors ? I(this.uid ?? "", { errors: this.errors, touched: this.touched }) : ""}
     `;
   }
   onInputChange(e) {
@@ -218,9 +246,9 @@ let t = class extends g {
           if (this.minTime && u(o, this.minTime) < 0)
             return this.minTimeMessage ?? C;
           if (this.maxTime && u(o, this.maxTime) > 0)
-            return this.maxTimeMessage ?? A;
+            return this.maxTimeMessage ?? M;
         }
-      if (k(s.start, s.end, this.disabledRanges))
+      if (A(s.start, s.end, this.disabledRanges))
         return this.disabledRangeMessage ?? x;
     }
     return null;
@@ -244,6 +272,18 @@ i([
 i([
   a({ type: String })
 ], t.prototype, "icon", 2);
+i([
+  a({ type: String, attribute: "toggle-aria-label" })
+], t.prototype, "toggleAriaLabel", 2);
+i([
+  a({ type: String })
+], t.prototype, "hourAriaLabel", 2);
+i([
+  a({ type: String })
+], t.prototype, "minuteAriaLabel", 2);
+i([
+  a({ type: String })
+], t.prototype, "dayPeriodAriaLabel", 2);
 i([
   a({ type: Array })
 ], t.prototype, "errors", 2);
@@ -326,19 +366,16 @@ i([
   a({ type: String, attribute: "no-available-times-message" })
 ], t.prototype, "noAvailableTimesMessage", 2);
 i([
-  c("#time-input")
+  _("#time-input")
 ], t.prototype, "_inputRef", 2);
 i([
-  c("#list-panel")
-], t.prototype, "_panelRef", 2);
-i([
-  b()
+  c()
 ], t.prototype, "_workingIn", 2);
 i([
-  b()
+  c()
 ], t.prototype, "_workingOut", 2);
 t = i([
-  $("gui-range-time-picker")
+  b("gui-range-time-picker")
 ], t);
 typeof customElements < "u" && !customElements.get("gui-range-time-picker") && customElements.define("gui-range-time-picker", t);
 var D = Object.defineProperty, B = Object.getOwnPropertyDescriptor, h = (e, s, o, n) => {
@@ -346,9 +383,9 @@ var D = Object.defineProperty, B = Object.getOwnPropertyDescriptor, h = (e, s, o
     (p = e[l]) && (r = (n ? p(s, o, r) : p(r)) || r);
   return n && r && D(s, o, r), r;
 };
-let m = class extends g {
+let d = class extends g {
   constructor() {
-    super(...arguments), this.adapter = new v(), this.subscriptions = [];
+    super(...arguments), this.adapter = new $(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
@@ -366,7 +403,7 @@ let m = class extends g {
   render() {
     super.render();
     const e = this.adapter.templateData;
-    return d`
+    return m`
       <gui-range-time-picker
         .uid=${this.widget.uid}
         .label=${e.label}
@@ -379,6 +416,10 @@ let m = class extends g {
         .value=${e.value}
         .icon=${e.icon}
         .localeId=${e.lang}
+        .toggleAriaLabel=${e.toggleAriaLabel}
+        .hourAriaLabel=${e.hourAriaLabel}
+        .minuteAriaLabel=${e.minuteAriaLabel}
+        .dayPeriodAriaLabel=${e.dayPeriodAriaLabel}
         .separator=${e.separator}
         .removePillAriaLabel=${e.removePillAriaLabel}
         .startTimeAriaLabel=${e.startTimeAriaLabel}
@@ -417,13 +458,13 @@ let m = class extends g {
 h([
   E({ context: y }),
   a({ attribute: !1 })
-], m.prototype, "formContext", 2);
+], d.prototype, "formContext", 2);
 h([
-  R({ context: T })
-], m.prototype, "adapter", 2);
-m = h([
-  $("gui-range-time-picker-input")
-], m);
+  P({ context: v })
+], d.prototype, "adapter", 2);
+d = h([
+  b("gui-range-time-picker-input")
+], d);
 export {
-  m as RangeTimePickerElement
+  d as RangeTimePickerElement
 };

package/{repeater.element-CtNgB4F5.js → repeater.element-BM1Keckd.js}

@@ -6,7 +6,7 @@ import { LitElement as b, nothing as n, html as s } from "lit";
 import { repeat as f } from "lit-html/directives/repeat.js";
 import { property as _, state as $, query as v, customElement as I } from "lit/decorators.js";
 import "rxjs";
-import "./errors-QjKhr6mA.js";
+import "./errors-Byb2dIhK.js";
 function w(e, t) {
   if (e != null && typeof e == "object" && "__rid" in e)
     return e.__rid;

package/{select.element-C0V-Bv3L.js → select.element-eepcXTpL.js}

@@ -1,18 +1,18 @@
 import { InputWidgetAdapter as m, formContext as b, inputContext as y } from "@golemui/lit";
 import { LitElement as v, html as n, nothing as u } from "lit";
 import { repeat as f } from "lit-html/directives/repeat.js";
-import { property as i, customElement as g } from "lit/decorators.js";
+import { property as a, customElement as g } from "lit/decorators.js";
 import { classMap as $ } from "lit/directives/class-map.js";
-import { G as C, a as D, b as w, c as O } from "./templates-Dk1jxLwS.js";
+import { G as C, a as D, b as w, c as O } from "./templates-Dmr34nwp.js";
 import { u as E, i as S } from "./one-of-C0ur6b_n.js";
-import { consume as F, provide as x } from "@lit/context";
+import { consume as F, provide as _ } from "@lit/context";
 import "rxjs";
-var _ = Object.defineProperty, M = Object.getOwnPropertyDescriptor, s = (t, a, r, l) => {
-  for (var o = l > 1 ? void 0 : l ? M(a, r) : a, p = t.length - 1, d; p >= 0; p--)
-    (d = t[p]) && (o = (l ? d(a, r, o) : d(o)) || o);
-  return l && o && _(a, r, o), o;
+var x = Object.defineProperty, q = Object.getOwnPropertyDescriptor, s = (e, i, r, l) => {
+  for (var o = l > 1 ? void 0 : l ? q(i, r) : i, d = e.length - 1, p; d >= 0; d--)
+    (p = e[d]) && (o = (l ? p(i, r, o) : p(o)) || o);
+  return l && o && x(i, r, o), o;
 };
-let e = class extends v {
+let t = class extends v {
   constructor() {
     super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.hint = void 0, this.icon = void 0, this.autocomplete = void 0, this.options = [], this.placeholder = void 0, this.invalidOptionMessage = void 0, this.labelField = void 0, this.valueField = void 0, this.optionsLoading = !1, this.hasMatchingValue = !1, this.ariaController = new C(this, {
       getTargets: () => this.querySelectorAll(`select[id="${this.uid}"]`),
@@ -23,7 +23,8 @@ let e = class extends v {
           errors: this.errors,
           readonly: this.readOnly,
           disabled: this.disabled,
-          touched: this.touched
+          touched: this.touched,
+          required: this.required
         }
       })
     });
@@ -36,7 +37,7 @@ let e = class extends v {
   }
   render() {
     super.render();
-    const t = {
+    const e = {
       uid: this.uid,
       label: this.label,
       errors: this.errors,
@@ -52,7 +53,7 @@ let e = class extends v {
       placeholder: this.placeholder,
       labelField: this.labelField,
       valueField: this.valueField
-    }, a = D("select", t);
+    }, i = D("select", e);
     this.options = E(this.options, {
       labelField: this.labelField,
       valueField: this.valueField
@@ -73,16 +74,15 @@ let e = class extends v {
     )}
         `;
     return n`
-      ${w(this.uid, t)}
+      ${w(this.uid, e)}
 
       <div class="gui-widget">
         <select
           id=${this.uid}
-          tabindex="0"
           data-cy=${`${this.uid}_select`}
-          class=${$({ "gui-widget-input": !0, ...a.widgetClasses })}
-          ?required=${t.required}
-          ?disabled=${t.disabled || t.readonly}
+          class=${$({ "gui-widget-input": !0, ...i.widgetClasses })}
+          ?required=${e.required}
+          ?disabled=${e.disabled || e.readonly}
           autocomplete=${this.autocomplete || u}
           @change=${this.valueChanged}
           @blur=${this.onBlur}
@@ -90,19 +90,25 @@ let e = class extends v {
           ${r}
         </select>
         <span class="gui-select__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>
-        ${a.html}
+        ${i.html}
       </div>
 
-      ${O(this.uid, t)}
+      ${O(this.uid, e)}
     `;
   }
-  updated(t) {
-    t.has("value") && !this.hasMatchingValue && this.value && this.dispatchEvent(
+  updated(e) {
+    e.has("value") && !this.hasMatchingValue && this.value && this.dispatchEvent(
       new CustomEvent("inputError", {
         detail: {
           message: (this.invalidOptionMessage ?? "Invalid selection: '{value}' is not a valid option.").replace("{value}", String(this.value))
@@ -111,12 +117,12 @@ let e = class extends v {
       })
     );
   }
-  valueChanged(t) {
-    if (t.stopPropagation(), !this.readOnly) {
-      const a = t.target;
+  valueChanged(e) {
+    if (e.stopPropagation(), !this.readOnly) {
+      const i = e.target;
       this.dispatchEvent(
         new CustomEvent("change", {
-          detail: { value: S(a.value, this.options) },
+          detail: { value: S(i.value, this.options) },
           bubbles: !0,
           composed: !0
         })
@@ -133,64 +139,64 @@ let e = class extends v {
   }
 };
 s([
-  i({ type: String })
-], e.prototype, "uid", 2);
+  a({ type: String })
+], t.prototype, "uid", 2);
 s([
-  i({ type: String })
-], e.prototype, "label", 2);
+  a({ type: String })
+], t.prototype, "label", 2);
 s([
-  i({ type: String, attribute: "locale-id" })
-], e.prototype, "localeId", 2);
+  a({ type: String, attribute: "locale-id" })
+], t.prototype, "localeId", 2);
 s([
-  i({ type: Array })
-], e.prototype, "errors", 2);
+  a({ type: Array })
+], t.prototype, "errors", 2);
 s([
-  i({ type: Boolean })
-], e.prototype, "touched", 2);
+  a({ type: Boolean })
+], t.prototype, "touched", 2);
 s([
-  i({ type: Boolean })
-], e.prototype, "required", 2);
+  a({ type: Boolean })
+], t.prototype, "required", 2);
 s([
-  i({ type: Boolean })
-], e.prototype, "disabled", 2);
+  a({ type: Boolean })
+], t.prototype, "disabled", 2);
 s([
-  i({ type: Boolean, attribute: "readonly" })
-], e.prototype, "readOnly", 2);
+  a({ type: Boolean, attribute: "readonly" })
+], t.prototype, "readOnly", 2);
 s([
-  i({ type: String })
-], e.prototype, "value", 2);
+  a({ type: String })
+], t.prototype, "value", 2);
 s([
-  i({ type: String })
-], e.prototype, "hint", 2);
+  a({ type: String })
+], t.prototype, "hint", 2);
 s([
-  i({ type: String })
-], e.prototype, "icon", 2);
+  a({ type: String })
+], t.prototype, "icon", 2);
 s([
-  i({ type: String })
-], e.prototype, "autocomplete", 2);
+  a({ type: String })
+], t.prototype, "autocomplete", 2);
 s([
-  i({ type: Array })
-], e.prototype, "options", 2);
+  a({ type: Array })
+], t.prototype, "options", 2);
 s([
-  i({ type: String })
-], e.prototype, "placeholder", 2);
+  a({ type: String })
+], t.prototype, "placeholder", 2);
 s([
-  i({ type: String, attribute: "invalid-option-message" })
-], e.prototype, "invalidOptionMessage", 2);
+  a({ type: String, attribute: "invalid-option-message" })
+], t.prototype, "invalidOptionMessage", 2);
 s([
-  i({ type: String })
-], e.prototype, "labelField", 2);
+  a({ type: String })
+], t.prototype, "labelField", 2);
 s([
-  i({ type: String })
-], e.prototype, "valueField", 2);
-e = s([
+  a({ type: String })
+], t.prototype, "valueField", 2);
+t = s([
   g("gui-select")
-], e);
-typeof customElements < "u" && !customElements.get("gui-select") && customElements.define("gui-select", e);
-var q = Object.defineProperty, I = Object.getOwnPropertyDescriptor, c = (t, a, r, l) => {
-  for (var o = l > 1 ? void 0 : l ? I(a, r) : a, p = t.length - 1, d; p >= 0; p--)
-    (d = t[p]) && (o = (l ? d(a, r, o) : d(o)) || o);
-  return l && o && q(a, r, o), o;
+], t);
+typeof customElements < "u" && !customElements.get("gui-select") && customElements.define("gui-select", t);
+var M = Object.defineProperty, I = Object.getOwnPropertyDescriptor, c = (e, i, r, l) => {
+  for (var o = l > 1 ? void 0 : l ? I(i, r) : i, d = e.length - 1, p; d >= 0; d--)
+    (p = e[d]) && (o = (l ? p(i, r, o) : p(o)) || o);
+  return l && o && M(i, r, o), o;
 };
 let h = class extends v {
   constructor() {
@@ -199,10 +205,10 @@ let h = class extends v {
   createRenderRoot() {
     return this;
   }
-  updated(t) {
-    super.updated(t);
-    const a = this.adapter.templateData.size;
-    a ? this.style.flex = String(a) : this.style.removeProperty("flex");
+  updated(e) {
+    super.updated(e);
+    const i = this.adapter.templateData.size;
+    i ? this.style.flex = String(i) : this.style.removeProperty("flex");
   }
   connectedCallback() {
     super.connectedCallback(), this.classList.add("gui-select", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
@@ -234,23 +240,23 @@ let h = class extends v {
       ></gui-select>
     `;
   }
-  valueChanged(t) {
-    const a = t.detail.value;
-    this.adapter.valueChanged(a);
+  valueChanged(e) {
+    const i = e.detail.value;
+    this.adapter.valueChanged(i);
   }
-  onInputError(t) {
-    this.adapter.injectValidationIssues([t.detail.message]);
+  onInputError(e) {
+    this.adapter.injectValidationIssues([e.detail.message]);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
   }
 };
 c([
   F({ context: b }),
-  i({ attribute: !1 })
+  a({ attribute: !1 })
 ], h.prototype, "formContext", 2);
 c([
-  x({ context: y })
+  _({ context: y })
 ], h.prototype, "adapter", 2);
 h = c([
   g("gui-select-input")

package/{tabs.element-BvAyI71N.js → tabs.element-CvcIA8P3.js}

@@ -89,6 +89,7 @@ let n = class extends y {
       (e) => e?.uid,
       (e, t) => d`<section
             role="tabpanel"
+            tabindex="0"
             data-cy=${`tabpanel_${this.widget.uid}_${t}`}
             id=${`tabpanel_${this.widget.uid}_${t}`}
             ?hidden=${e.uid !== this.activeTab && this.adapter.templateData.renderMode !== "activeOnly"}

package/{tags.element-DvwEpxpK.js → tags.element-CPHgotb0.js}

@@ -1,16 +1,16 @@
 import { InputWidgetAdapter as D, formContext as w, inputContext as C } from "@golemui/lit";
 import { LitElement as y, nothing as c, html as m } from "lit";
-import { property as o, customElement as v } from "lit/decorators.js";
+import { property as o, customElement as b } from "lit/decorators.js";
 import { classMap as f } from "lit/directives/class-map.js";
-import { G as A, b as P, c as S } from "./templates-Dk1jxLwS.js";
-import "./pills-Be1UrLgq.js";
+import { G as A, b as P, c as S } from "./templates-Dmr34nwp.js";
+import "./pills-BDMO2NiR.js";
 import { styleMap as _ } from "lit-html/directives/style-map.js";
-import { consume as E, provide as O } from "@lit/context";
+import { consume as E, provide as L } from "@lit/context";
 import "rxjs";
-var I = Object.defineProperty, L = Object.getOwnPropertyDescriptor, n = (t, e, r, a) => {
-  for (var i = a > 1 ? void 0 : a ? L(e, r) : e, s = t.length - 1, p; s >= 0; s--)
+var O = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (t, e, r, a) => {
+  for (var i = a > 1 ? void 0 : a ? I(e, r) : e, s = t.length - 1, p; s >= 0; s--)
     (p = t[s]) && (i = (a ? p(e, r, i) : p(i)) || i);
-  return a && i && I(e, r, i), i;
+  return a && i && O(e, r, i), i;
 };
 const x = ["Enter", ",", "Tab", "blur"];
 let l = class extends y {
@@ -24,7 +24,8 @@ let l = class extends y {
           errors: this.errors,
           readonly: this.readOnly,
           disabled: this.disabled,
-          touched: this.touched
+          touched: this.touched,
+          required: this.required
         }
       })
     }), this.onPillRemove = (t) => {
@@ -87,11 +88,17 @@ let l = class extends y {
           role="group"
           aria-label=${this.label ?? "Tags input"}
         >
-          ${this.icon ? m`<span class=${f(r)} data-icon=${this.icon}></span>` : c}
+          ${this.icon ? m`<span
+                class=${f(r)}
+                data-icon=${this.icon}
+                aria-hidden="true"
+              ></span>` : c}
 
           <gui-pills
             class="gui-tags__pills"
             style=${_(a.length ? {} : { "min-width": 0 })}
+            .uid=${this.uid}
+            .toolbarAriaLabel=${"Selected tags"}
             .items=${a}
             .removable=${!0}
             .clickable=${!1}
@@ -179,8 +186,8 @@ let l = class extends y {
     );
     if (!i.test(e)) return;
     t.preventDefault();
-    const s = t.target instanceof HTMLInputElement ? t.target : null, d = ((s?.value ?? "") + e).split(i), b = d.slice(0, -1), $ = d[d.length - 1] ?? "";
-    this.commitDraftBatch(b) && s && (s.value = $);
+    const s = t.target instanceof HTMLInputElement ? t.target : null, d = ((s?.value ?? "") + e).split(i), v = d.slice(0, -1), $ = d[d.length - 1] ?? "";
+    this.commitDraftBatch(v) && s && (s.value = $);
   }
   commitDraft(t) {
     const e = this.trim ? t.trim() : t;
@@ -289,7 +296,7 @@ n([
   o({ type: String, attribute: "remove-icon" })
 ], l.prototype, "removeIcon", 2);
 l = n([
-  v("gui-tags")
+  b("gui-tags")
 ], l);
 typeof customElements < "u" && !customElements.get("gui-tags") && customElements.define("gui-tags", l);
 var q = Object.defineProperty, R = Object.getOwnPropertyDescriptor, g = (t, e, r, a) => {
@@ -352,10 +359,10 @@ g([
   o({ attribute: !1 })
 ], h.prototype, "formContext", 2);
 g([
-  O({ context: C })
+  L({ context: C })
 ], h.prototype, "adapter", 2);
 h = g([
-  v("gui-tags-input")
+  b("gui-tags-input")
 ], h);
 export {
   h as TagsElement