@golemui/gui-lit 0.14.0 → 0.15.0

package/{range-date-picker.element-Vgj3tFlQ.js → range-date-picker.element-CA-KcQhA.js}

@@ -1,46 +1,52 @@
 import { InputWidgetAdapter as c, formContext as u, inputContext as m } from "@golemui/lit";
 import { a as g, b as D, c as C } from "./templates-Dk1jxLwS.js";
 import "@golemui/gui-shared";
-import "./range-calendar-qpakwAba.js";
-import "./range-date-input-DFnvo-KK.js";
+import "./range-calendar-CZGBBOzO.js";
+import "./range-date-input-CcPYH7P3.js";
 import { consume as $, provide as f } from "@lit/context";
-import { LitElement as v, html as p, nothing as b } from "lit";
-import { property as k, query as o, state as h, customElement as y } from "lit/decorators.js";
+import { LitElement as v, html as d, nothing as b } from "lit";
+import { property as w, query as p, state as h, customElement as y } from "lit/decorators.js";
 import "rxjs";
-import { classMap as I } from "lit/directives/class-map.js";
-var O = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? w(t, a) : t, l = e.length - 1, d; l >= 0; l--)
-    (d = e[l]) && (i = (r ? d(t, a, i) : d(i)) || i);
-  return r && i && O(t, a, i), i;
+import { classMap as O } from "lit/directives/class-map.js";
+var x = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (t, e, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? k(e, a) : e, l = t.length - 1, o; l >= 0; l--)
+    (o = t[l]) && (s = (i ? o(e, a, s) : o(s)) || s);
+  return i && s && x(e, a, s), s;
 };
-let s = class extends v {
+let r = class extends v {
   constructor() {
-    super(...arguments), this.adapter = new c(), this.isCalendarOpen = !1, this.focusDate = void 0, this.subscriptions = [], this.onFocusOut = (e) => {
+    super(...arguments), this.adapter = new c(), this.isCalendarOpen = !1, this.focusDate = void 0, this.subscriptions = [], this._ignoreNextFocusOut = !1, this.onFocusOut = (t) => {
+      if (this._ignoreNextFocusOut) {
+        this._ignoreNextFocusOut = !1;
+        return;
+      }
       if (!this.isCalendarOpen) return;
-      const t = e.relatedTarget;
-      t && this.contains(t) || this.closeCalendar();
-    }, this.onDocumentClick = (e) => {
+      const e = t.relatedTarget;
+      e && this.contains(e) || this.closeCalendar();
+    }, this.onDocumentClick = (t) => {
       if (!this.isCalendarOpen) return;
-      const t = e.composedPath(), a = this.dateInput && t.includes(this.dateInput), r = this.calendarInput && t.includes(this.calendarInput);
-      !a && !r && this.closeCalendar();
+      const e = t.composedPath(), a = this.dateInput && e.includes(this.dateInput), i = this.calendarInput && e.includes(this.calendarInput);
+      !a && !i && this.closeCalendar();
+    }, this.onDropdownToggle = (t) => {
+      t.detail?.open && this.isCalendarOpen && this.closeCalendar();
     };
   }
   createRenderRoot() {
     return this;
   }
-  updated(e) {
-    super.updated(e);
-    const t = this.adapter.templateData.size;
-    t ? this.style.flex = String(t) : this.style.removeProperty("flex");
+  updated(t) {
+    super.updated(t);
+    const e = this.adapter.templateData.size;
+    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this.onDocumentClick), this.addEventListener("focusout", this.onFocusOut), this.classList.add("gui-range-date-picker", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+    super.connectedCallback(), document.addEventListener("click", this.onDocumentClick), this.addEventListener("focusout", this.onFocusOut), this.addEventListener("dropdowntoggle", this.onDropdownToggle), this.classList.add("gui-range-date-picker", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
       this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
     );
   }
   render() {
     super.render();
-    const e = g("datePicker", this.adapter.templateData), t = this.isCalendarOpen ? p`<gui-range-calendar
+    const t = g("datePicker", this.adapter.templateData), e = this.isCalendarOpen ? d`<gui-range-calendar
           id="calendar-input"
           .uid=${this.widget.uid}
           .hint=${this.adapter.templateData.hint}
@@ -66,7 +72,7 @@ let s = class extends v {
           @blur=${this.onBlurCalendar}
           @change=${this.valueChanged}
         ></gui-range-calendar>` : b;
-    return p`
+    return d`
       ${D(this.widget.uid, {
       ...this.adapter.templateData,
       required: this.adapter.templateData.validator?.required
@@ -82,7 +88,7 @@ let s = class extends v {
       >
         <gui-range-date
           id="date-input"
-          class=${I(e.widgetClasses)}
+          class=${O(t.widgetClasses)}
           .uid=${this.widget.uid}
           .hint=${this.adapter.templateData.hint}
           .showErrors=${!1}
@@ -111,64 +117,67 @@ let s = class extends v {
             ></path></svg
         ></span>
 
-        ${t}
+        ${e}
       </div>
 
       ${C(this.widget.uid, this.adapter.templateData)}
     `;
   }
-  valueChanged(e) {
-    this.adapter.injectValidationIssues(null), this.adapter.valueChanged(e.detail.value);
+  valueChanged(t) {
+    this.adapter.injectValidationIssues(null), this.adapter.valueChanged(t.detail.value);
   }
   onBlurCalendar() {
     this.adapter.onBlur(), this.closeCalendar();
   }
-  onInputError(e) {
-    this.adapter.injectValidationIssues([e.detail.message]);
+  onInputError(t) {
+    this.adapter.injectValidationIssues([t.detail.message]);
   }
-  onPillClick(e) {
-    this.focusDate = e.detail.range.start, this.openCalendar();
+  onPillClick(t) {
+    this.focusDate = t.detail.range.start, this.openCalendar();
   }
-  onKeyUp(e) {
-    const t = e;
-    t.target === t.currentTarget && (t?.key === "Enter" || t?.key === " ") && (this.isCalendarOpen = !this.isCalendarOpen, this.requestUpdate());
+  onKeyUp(t) {
+    const e = t;
+    e.target === e.currentTarget && (e?.key === "Enter" || e?.key === " ") && (this.isCalendarOpen ? this.closeCalendar() : this.openCalendar());
   }
-  toggleCalendar(e) {
-    const t = e.target, a = t.closest(".gui-range-date-input__part"), r = t.closest("gui-range-calendar"), i = t.closest(".gui-range-date-input__pill"), l = t.closest(".gui-range-date-input__pill--count");
-    a || r || i ? this.openCalendar() : l ? this.closeCalendar() : (this.isCalendarOpen = !this.isCalendarOpen, this.requestUpdate());
+  toggleCalendar(t) {
+    const e = t.target, a = e.closest(".gui-range-date-input__part"), i = e.closest("gui-range-calendar");
+    a || i ? this.openCalendar() : this.isCalendarOpen ? this.closeCalendar() : this.openCalendar();
   }
   openCalendar() {
-    this.isCalendarOpen || (this.isCalendarOpen = !0, this.requestUpdate());
+    !!this.querySelector(".gui-pills__dropdown") && (this._ignoreNextFocusOut = !0), this.closePillsDropdown(), this.isCalendarOpen || (this.isCalendarOpen = !0, this.requestUpdate());
   }
   closeCalendar() {
     this.isCalendarOpen = !1, this.requestUpdate();
   }
+  closePillsDropdown() {
+    this.querySelector("gui-pills")?.closeDropdown?.();
+  }
   disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this.onDocumentClick), this.removeEventListener("focusout", this.onFocusOut), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+    super.disconnectedCallback(), document.removeEventListener("click", this.onDocumentClick), this.removeEventListener("focusout", this.onFocusOut), this.removeEventListener("dropdowntoggle", this.onDropdownToggle), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
   }
 };
 n([
   $({ context: u }),
-  k({ attribute: !1 })
-], s.prototype, "formContext", 2);
+  w({ attribute: !1 })
+], r.prototype, "formContext", 2);
 n([
   f({ context: m })
-], s.prototype, "adapter", 2);
+], r.prototype, "adapter", 2);
 n([
-  o("#date-input")
-], s.prototype, "dateInput", 2);
+  p("#date-input")
+], r.prototype, "dateInput", 2);
 n([
-  o("#calendar-input")
-], s.prototype, "calendarInput", 2);
+  p("#calendar-input")
+], r.prototype, "calendarInput", 2);
 n([
   h()
-], s.prototype, "isCalendarOpen", 2);
+], r.prototype, "isCalendarOpen", 2);
 n([
   h()
-], s.prototype, "focusDate", 2);
-s = n([
+], r.prototype, "focusDate", 2);
+r = n([
   y("gui-range-date-picker-input")
-], s);
+], r);
 export {
-  s as RangeDatePickerElement
+  r as RangeDatePickerElement
 };

package/{select.element-DuGZjlZY.js → select.element-CjWqp9dd.js}

@@ -81,7 +81,7 @@ let a = class extends m {
           id=${this.uid}
           tabindex="0"
           data-cy=${`${this.uid}_select`}
-          class=${$(e.widgetClasses)}
+          class=${$({ "gui-widget-input": !0, ...e.widgetClasses })}
           ?required=${t.required}
           ?disabled=${t.disabled || t.readonly}
           autocomplete=${this.autocomplete || u}

package/tags.element-ed1_51GA.js

@@ -0,0 +1,365 @@
+import { InputWidgetAdapter as D, formContext as w, inputContext as C } from "@golemui/lit";
+import "@golemui/gui-shared";
+import { LitElement as y, nothing as c, html as m } from "lit";
+import { property as o, customElement as v } 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-D0yyi-op.js";
+import { styleMap as _ } from "lit-html/directives/style-map.js";
+import { consume as E, provide as O } 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--)
+    (p = t[s]) && (i = (a ? p(e, r, i) : p(i)) || i);
+  return a && i && I(e, r, i), i;
+};
+const x = ["Enter", ",", "Tab", "blur"];
+let l = class extends y {
+  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 = [], this.hint = void 0, this.placeholder = void 0, this.icon = void 0, this.separators = void 0, this.allowDuplicates = !0, this.trim = !0, this.limit = void 0, this.removeAriaLabel = void 0, this.removeIcon = void 0, this.ariaController = new A(this, {
+      getTargets: () => this.querySelectorAll(".gui-tags-input"),
+      getState: () => ({
+        uid: this.uid,
+        templateData: {
+          hint: this.hint,
+          errors: this.errors,
+          readonly: this.readOnly,
+          disabled: this.disabled,
+          touched: this.touched
+        }
+      })
+    }), this.onPillRemove = (t) => {
+      if (this.disabled || this.readOnly) return;
+      const e = this.getValue(), r = e.findIndex((i, s) => this.pillKey(i, s) === t.detail.key);
+      if (r < 0) return;
+      const a = e.filter((i, s) => s !== r);
+      this.emitChange(a), a.length === 0 && requestAnimationFrame(() => this.focusInput());
+    }, this.onPillKeydown = (t) => {
+      t.detail.event.key === "ArrowRight" && !this.isDropdownOpen() && this.focusInput();
+    };
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  getSeparators() {
+    return this.separators && this.separators.length > 0 ? this.separators : x;
+  }
+  getValue() {
+    return Array.isArray(this.value) ? this.value : [];
+  }
+  getRemoveAriaLabel() {
+    return this.removeAriaLabel ?? "Remove tag";
+  }
+  pillKey(t, e) {
+    return `${e}-${t}`;
+  }
+  render() {
+    const t = this.getValue(), e = {
+      uid: this.uid,
+      label: this.label,
+      hint: this.hint,
+      errors: this.errors,
+      touched: this.touched,
+      required: this.required,
+      disabled: this.disabled,
+      readonly: this.readOnly,
+      placeholder: this.placeholder,
+      icon: this.icon
+    }, r = {
+      "gui-widget-icon": !0,
+      [this.icon]: !!this.icon
+    }, a = t.map((i, s) => ({
+      key: this.pillKey(i, s),
+      label: i
+    }));
+    return m`
+      ${this.label ? P(this.uid, e, !1, void 0, !1) : c}
+
+      <div class="gui-widget">
+        <div
+          class=${f({
+      "gui-widget-input": !0,
+      "gui-tags-input": !0,
+      "gui-tags-input--icon": !!this.icon
+    })}
+          role="group"
+          aria-label=${this.label ?? "Tags input"}
+        >
+          ${this.icon ? m`<span class=${f(r)} data-icon=${this.icon}></span>` : c}
+
+          <gui-pills
+            class="gui-tags__pills"
+            style=${_(a.length ? {} : { "min-width": 0 })}
+            .items=${a}
+            .removable=${!0}
+            .clickable=${!1}
+            .bubble=${!0}
+            .tabbable=${!1}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readOnly}
+            .removeAriaLabel=${this.getRemoveAriaLabel()}
+            .removeIcon=${this.removeIcon}
+            .compactAriaLabel=${`${t.length} tags`}
+            @pillremove=${this.onPillRemove}
+            @pillkeydown=${this.onPillKeydown}
+          ></gui-pills>
+
+          <input
+            type="text"
+            id=${this.uid}
+            data-cy=${`${this.uid}_tags-input`}
+            class="gui-tags__input"
+            ?disabled=${this.disabled}
+            ?readonly=${this.readOnly}
+            placeholder=${this.placeholder || c}
+            @keydown=${this.onInputKeydown}
+            @blur=${this.onInputBlur}
+            @paste=${this.onPaste}
+            @change=${(i) => i.stopPropagation()}
+          />
+        </div>
+
+        ${S(this.uid, e)}
+      </div>
+    `;
+  }
+  onInputKeydown(t) {
+    if (this.disabled || this.readOnly) return;
+    const e = t.target, r = this.getSeparators(), a = e.value, i = e.selectionStart === 0 && e.selectionEnd === 0;
+    if (t.key === "Enter" && r.includes("Enter")) {
+      t.preventDefault(), this.commitDraft(a) && (e.value = "");
+      return;
+    }
+    if (t.key === "," && r.includes(",")) {
+      t.preventDefault(), this.commitDraft(a) && (e.value = "");
+      return;
+    }
+    if (t.key === "Tab" && r.includes("Tab") && a.length > 0) {
+      this.commitDraft(a) && (e.value = "");
+      return;
+    }
+    if (t.key === "Escape") {
+      t.preventDefault(), e.value = "";
+      return;
+    }
+    const s = this.getValue(), p = this.isCompactMode();
+    if (t.key === "ArrowDown" && p && s.length > 0) {
+      t.preventDefault(), this.enterPillList(0);
+      return;
+    }
+    if (t.key === "ArrowLeft" && !p && i && s.length > 0) {
+      t.preventDefault(), this.enterPillList(s.length - 1);
+      return;
+    }
+    if (t.key === "Backspace" && a === "" && s.length > 0) {
+      t.preventDefault(), this.enterPillList(s.length - 1);
+      return;
+    }
+  }
+  onInputBlur(t) {
+    const e = t.target, r = this.getSeparators(), a = e.value;
+    a.length > 0 && r.includes("blur") && !this.disabled && !this.readOnly && this.commitDraft(a) && (e.value = ""), this.dispatchEvent(
+      new CustomEvent("blur", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  onPaste(t) {
+    if (this.disabled || this.readOnly) return;
+    const e = t.clipboardData?.getData("text") ?? "";
+    if (!e) return;
+    const a = this.getSeparators().filter(
+      (u) => u !== "Enter" && u !== "Tab" && u !== "blur"
+    );
+    if (a.length === 0) return;
+    const i = new RegExp(
+      `[${a.map((u) => u.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("")}
+]`
+    );
+    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 = $);
+  }
+  commitDraft(t) {
+    const e = this.trim ? t.trim() : t;
+    if (e.length === 0) return !1;
+    const r = this.getValue();
+    return this.allowDuplicates === !1 && r.includes(e) ? !0 : this.limit !== void 0 && r.length >= this.limit ? !1 : (this.emitChange([...r, e]), !0);
+  }
+  commitDraftBatch(t) {
+    const e = this.getValue(), r = [...e];
+    for (const a of t) {
+      const i = this.trim ? a.trim() : a;
+      if (i.length !== 0 && !(this.allowDuplicates === !1 && r.includes(i))) {
+        if (this.limit !== void 0 && r.length >= this.limit) break;
+        r.push(i);
+      }
+    }
+    return r.length === e.length ? !1 : (this.emitChange(r), !0);
+  }
+  emitChange(t) {
+    this.value = t, this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  focusInput() {
+    this.querySelector(`input[id="${this.uid}"]`)?.focus();
+  }
+  getPills() {
+    return this.querySelector("gui-pills");
+  }
+  isDropdownOpen() {
+    return !!this.getPills()?.querySelector(".gui-pills__dropdown");
+  }
+  /** True when the host wrapper has shrunk past the compact threshold and
+   *  gui-pills is displaying the bubble instead of the strip. */
+  isCompactMode() {
+    const t = this.getPills();
+    if (!t) return !1;
+    const e = t.querySelector(".gui-pills__strip-wrapper");
+    return e ? getComputedStyle(e).display === "none" : !1;
+  }
+  /**
+   * Enter the pill list at `index`. In compact mode the strip is hidden, so
+   * we open the dropdown overlay first so the user can see the focused pill.
+   */
+  enterPillList(t) {
+    const e = this.getPills();
+    e && (this.isCompactMode() ? (e.openDropdown(), requestAnimationFrame(() => e.focusPillAt(t))) : e.focusPillAt(t));
+  }
+};
+n([
+  o({ type: String })
+], l.prototype, "uid", 2);
+n([
+  o({ type: String })
+], l.prototype, "label", 2);
+n([
+  o({ type: String, attribute: "locale-id" })
+], l.prototype, "localeId", 2);
+n([
+  o({ type: Array })
+], l.prototype, "errors", 2);
+n([
+  o({ type: Boolean })
+], l.prototype, "touched", 2);
+n([
+  o({ type: Boolean })
+], l.prototype, "required", 2);
+n([
+  o({ type: Boolean })
+], l.prototype, "disabled", 2);
+n([
+  o({ type: Boolean, attribute: "readonly" })
+], l.prototype, "readOnly", 2);
+n([
+  o({ type: Array })
+], l.prototype, "value", 2);
+n([
+  o({ type: String })
+], l.prototype, "hint", 2);
+n([
+  o({ type: String })
+], l.prototype, "placeholder", 2);
+n([
+  o({ type: String })
+], l.prototype, "icon", 2);
+n([
+  o({ type: Array })
+], l.prototype, "separators", 2);
+n([
+  o({ type: Boolean })
+], l.prototype, "allowDuplicates", 2);
+n([
+  o({ type: Boolean })
+], l.prototype, "trim", 2);
+n([
+  o({ type: Number })
+], l.prototype, "limit", 2);
+n([
+  o({ type: String, attribute: "remove-aria-label" })
+], l.prototype, "removeAriaLabel", 2);
+n([
+  o({ type: String, attribute: "remove-icon" })
+], l.prototype, "removeIcon", 2);
+l = n([
+  v("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) => {
+  for (var i = a > 1 ? void 0 : a ? R(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 && q(e, r, i), i;
+};
+let h = class extends y {
+  constructor() {
+    super(...arguments), this.adapter = new D(), 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");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-tags", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
+  render() {
+    return super.render(), m`
+      <gui-tags
+        .uid=${this.widget.uid}
+        .label=${this.adapter.templateData.label}
+        .hint=${this.adapter.templateData.hint}
+        .errors=${this.adapter.templateData.errors}
+        ?touched=${this.adapter.templateData.touched}
+        ?required=${this.adapter.templateData.validator?.required}
+        ?disabled=${this.adapter.templateData.disabled}
+        ?readonly=${this.adapter.templateData.readonly}
+        .value=${this.adapter.templateData.value}
+        .placeholder=${this.adapter.templateData.placeholder}
+        .icon=${this.adapter.templateData.icon}
+        .separators=${this.adapter.templateData.separators}
+        .allowDuplicates=${this.adapter.templateData.allowDuplicates ?? !0}
+        .trim=${this.adapter.templateData.trim ?? !0}
+        .limit=${this.adapter.templateData.limit}
+        .removeAriaLabel=${this.adapter.templateData.removeAriaLabel}
+        .removeIcon=${this.adapter.templateData.removeIcon}
+        @change=${this.valueChanged}
+        @blur=${() => this.adapter.onBlur()}
+      ></gui-tags>
+    `;
+  }
+  valueChanged(t) {
+    const e = t.detail.value;
+    this.adapter.valueChanged(e);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+  }
+};
+g([
+  E({ context: w }),
+  o({ attribute: !1 })
+], h.prototype, "formContext", 2);
+g([
+  O({ context: C })
+], h.prototype, "adapter", 2);
+h = g([
+  v("gui-tags-input")
+], h);
+export {
+  h as TagsElement
+};

package/{textarea.element-C8yx2u0o.js → textarea.element-BTJLqnnI.js}

@@ -1,6 +1,6 @@
 import { InputWidgetAdapter as v, formContext as b, inputContext as x } from "@golemui/lit";
 import "@golemui/gui-shared";
-import { LitElement as c, html as n, nothing as m } from "lit";
+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 $ } from "lit/directives/class-map.js";
 import { G as f, b as C, c as w } from "./templates-Dk1jxLwS.js";
@@ -12,7 +12,7 @@ var S = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (t, a, d
     (p = t[l]) && (e = (s ? p(a, d, e) : p(e)) || e);
   return s && e && S(a, d, e), e;
 };
-let r = class extends c {
+let r = class extends m {
   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.placeholder = void 0, this.autocomplete = void 0, this.minimumHeight = void 0, this.autoGrow = !1, this.maxLength = void 0, this.ariaController = new f(this, {
       getTargets: () => this.querySelectorAll(`textarea[id="${this.uid}"]`),
@@ -79,12 +79,13 @@ let r = class extends c {
         <textarea
           id=${this.uid}
           data-cy=${`${this.uid}_textarea`}
+          class="gui-widget-input"
           style=${D(d)}
           ?required=${t.required}
           ?disabled=${t.disabled}
           ?readonly=${t.readonly}
-          placeholder=${t.placeholder || m}
-          autocomplete=${this.autocomplete || m}
+          placeholder=${t.placeholder || c}
+          autocomplete=${this.autocomplete || c}
           @input=${this.valueChanged}
           @blur=${this.onBlur}
         ></textarea>
@@ -174,7 +175,7 @@ var E = Object.defineProperty, q = Object.getOwnPropertyDescriptor, h = (t, a, d
     (p = t[l]) && (e = (s ? p(a, d, e) : p(e)) || e);
   return s && e && E(a, d, e), e;
 };
-let u = class extends c {
+let u = class extends m {
   constructor() {
     super(...arguments), this.adapter = new v(), this.subscriptions = [];
   }

package/{textinput.element-DKuplF1A.js → textinput.element-zI0iG-Cq.js}

@@ -6,10 +6,10 @@ 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 { consume as O, provide as _ } from "@lit/context";
 import "rxjs";
-var E = 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--)
+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--)
     (d = t[p]) && (a = (l ? d(e, o, a) : d(a)) || a);
-  return l && a && E(e, o, a), a;
+  return l && a && w(e, o, a), a;
 };
 let i = class extends c {
   constructor() {
@@ -49,6 +49,7 @@ let i = class extends c {
       placeholder: this.placeholder,
       autocomplete: this.autocomplete
     }, e = x("textinput", t), o = {
+      "gui-widget-input": !0,
       "gui-textinput--icon": !!this.icon
     };
     return m`