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

package/{select.element-jcDF1h-g.js → select.element-eepcXTpL.js}

@@ -1,20 +1,20 @@
-import { InputWidgetAdapter as g, formContext as b, inputContext as y } from "@golemui/lit";
+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 s, customElement as m } 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 E } from "./templates-Dk1jxLwS.js";
-import { u as F, i as S } from "./one-of-C0ur6b_n.js";
-import { consume as x, provide as O } from "@lit/context";
+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 _ } from "@lit/context";
 import "rxjs";
-var _ = Object.defineProperty, q = Object.getOwnPropertyDescriptor, l = (t, e, r, i) => {
-  for (var o = i > 1 ? void 0 : i ? q(e, r) : e, d = t.length - 1, p; d >= 0; d--)
-    (p = t[d]) && (o = (i ? p(e, r, o) : p(o)) || o);
-  return i && o && _(e, 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 a = 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.labelField = void 0, this.valueField = void 0, this.optionsLoading = !1, this.hasMatchingValue = !1, this.ariaController = new C(this, {
+    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}"]`),
       getState: () => ({
         uid: this.uid,
@@ -23,7 +23,8 @@ let a = 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 a = class extends v {
   }
   render() {
     super.render();
-    const t = {
+    const e = {
       uid: this.uid,
       label: this.label,
       errors: this.errors,
@@ -52,37 +53,36 @@ let a = class extends v {
       placeholder: this.placeholder,
       labelField: this.labelField,
       valueField: this.valueField
-    }, e = D("select", t);
-    this.options = F(this.options, {
+    }, i = D("select", e);
+    this.options = E(this.options, {
       labelField: this.labelField,
       valueField: this.valueField
-    }), this.hasMatchingValue = this.options?.length ? this.options.find(({ value: i }) => i === this.value) !== void 0 : !1;
+    }), this.hasMatchingValue = this.options?.length ? this.options.find(({ value: l }) => l === this.value) !== void 0 : !1;
     const r = this.optionsLoading ? n`<span>Loading...</span>` : n`
           <option value="" disabled selected=${this.hasMatchingValue ? u : ""}>
             ${this.placeholder ?? "Select an option"}
           </option>
           ${f(
       this.options || [],
-      (i) => i?.value,
-      (i) => n`<option
-                value=${i.value}
-                selected=${this.hasMatchingValue && i.value === this.value ? "" : u}
+      (l) => l?.value,
+      (l) => n`<option
+                value=${l.value}
+                selected=${this.hasMatchingValue && l.value === this.value ? "" : u}
               >
-                ${i.label}
+                ${l.label}
               </option>`
     )}
         `;
     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, ...e.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,33 +90,39 @@ let a = 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>
-        ${e.html}
+        ${i.html}
       </div>
 
-      ${E(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: `Invalid selection: '${this.value}' is not a valid option.`
+          message: (this.invalidOptionMessage ?? "Invalid selection: '{value}' is not a valid option.").replace("{value}", String(this.value))
         },
         bubbles: !0
       })
     );
   }
-  valueChanged(t) {
-    if (t.stopPropagation(), !this.readOnly) {
-      const e = t.target;
+  valueChanged(e) {
+    if (e.stopPropagation(), !this.readOnly) {
+      const i = e.target;
       this.dispatchEvent(
         new CustomEvent("change", {
-          detail: { value: S(e.value, this.options) },
+          detail: { value: S(i.value, this.options) },
           bubbles: !0,
           composed: !0
         })
@@ -132,74 +138,77 @@ let a = class extends v {
     );
   }
 };
-l([
-  s({ type: String })
-], a.prototype, "uid", 2);
-l([
-  s({ type: String })
-], a.prototype, "label", 2);
-l([
-  s({ type: String, attribute: "locale-id" })
-], a.prototype, "localeId", 2);
-l([
-  s({ type: Array })
-], a.prototype, "errors", 2);
-l([
-  s({ type: Boolean })
-], a.prototype, "touched", 2);
-l([
-  s({ type: Boolean })
-], a.prototype, "required", 2);
-l([
-  s({ type: Boolean })
-], a.prototype, "disabled", 2);
-l([
-  s({ type: Boolean, attribute: "readonly" })
-], a.prototype, "readOnly", 2);
-l([
-  s({ type: String })
-], a.prototype, "value", 2);
-l([
-  s({ type: String })
-], a.prototype, "hint", 2);
-l([
-  s({ type: String })
-], a.prototype, "icon", 2);
-l([
-  s({ type: String })
-], a.prototype, "autocomplete", 2);
-l([
-  s({ type: Array })
-], a.prototype, "options", 2);
-l([
-  s({ type: String })
-], a.prototype, "placeholder", 2);
-l([
-  s({ type: String })
-], a.prototype, "labelField", 2);
-l([
-  s({ type: String })
-], a.prototype, "valueField", 2);
-a = l([
-  m("gui-select")
-], a);
-typeof customElements < "u" && !customElements.get("gui-select") && customElements.define("gui-select", a);
-var I = Object.defineProperty, P = Object.getOwnPropertyDescriptor, c = (t, e, r, i) => {
-  for (var o = i > 1 ? void 0 : i ? P(e, r) : e, d = t.length - 1, p; d >= 0; d--)
-    (p = t[d]) && (o = (i ? p(e, r, o) : p(o)) || o);
-  return i && o && I(e, r, o), o;
+s([
+  a({ type: String })
+], t.prototype, "uid", 2);
+s([
+  a({ type: String })
+], t.prototype, "label", 2);
+s([
+  a({ type: String, attribute: "locale-id" })
+], t.prototype, "localeId", 2);
+s([
+  a({ type: Array })
+], t.prototype, "errors", 2);
+s([
+  a({ type: Boolean })
+], t.prototype, "touched", 2);
+s([
+  a({ type: Boolean })
+], t.prototype, "required", 2);
+s([
+  a({ type: Boolean })
+], t.prototype, "disabled", 2);
+s([
+  a({ type: Boolean, attribute: "readonly" })
+], t.prototype, "readOnly", 2);
+s([
+  a({ type: String })
+], t.prototype, "value", 2);
+s([
+  a({ type: String })
+], t.prototype, "hint", 2);
+s([
+  a({ type: String })
+], t.prototype, "icon", 2);
+s([
+  a({ type: String })
+], t.prototype, "autocomplete", 2);
+s([
+  a({ type: Array })
+], t.prototype, "options", 2);
+s([
+  a({ type: String })
+], t.prototype, "placeholder", 2);
+s([
+  a({ type: String, attribute: "invalid-option-message" })
+], t.prototype, "invalidOptionMessage", 2);
+s([
+  a({ type: String })
+], t.prototype, "labelField", 2);
+s([
+  a({ type: String })
+], t.prototype, "valueField", 2);
+t = s([
+  g("gui-select")
+], 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() {
-    super(...arguments), this.adapter = new g(), this.subscriptions = [];
+    super(...arguments), this.adapter = new m(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
-  updated(t) {
-    super.updated(t);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : 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(
@@ -224,32 +233,33 @@ let h = class extends v {
         .options=${this.adapter.templateData.options}
         .labelField=${this.adapter.templateData.labelField}
         .valueField=${this.adapter.templateData.valueField}
+        .invalidOptionMessage=${this.adapter.templateData.invalidOptionMessage}
         @change=${this.valueChanged}
         @inputError=${this.onInputError}
         @blur=${() => this.adapter.onBlur()}
       ></gui-select>
     `;
   }
-  valueChanged(t) {
-    const e = t.detail.value;
-    this.adapter.valueChanged(e);
+  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([
-  x({ context: b }),
-  s({ attribute: !1 })
+  F({ context: b }),
+  a({ attribute: !1 })
 ], h.prototype, "formContext", 2);
 c([
-  O({ context: y })
+  _({ context: y })
 ], h.prototype, "adapter", 2);
 h = c([
-  m("gui-select-input")
+  g("gui-select-input")
 ], h);
 export {
   h as SelectElement

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-CX3vQL8L.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-B66qz_KX.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

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() {