@golemui/gui-lit 0.12.2 → 0.13.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.12.2 (2026-05-16)
+
+This was a version bump only for gui-lit to align it with other projects, there were no code changes.
+
 ## 0.12.1 (2026-05-16)
 
 This was a version bump only for gui-lit to align it with other projects, there were no code changes.

package/abstract-calendar-YDgwwbqe.js

@@ -0,0 +1,528 @@
+import { LitElement as M, nothing as _, html as u } from "lit";
+import { property as o, state as w } from "lit/decorators.js";
+import { G as S, b as $, c as A } from "./templates-Dk1jxLwS.js";
+import { repeat as D } from "lit-html/directives/repeat.js";
+import { d as I, e as k, t as v, w as B } from "./date-CG1562vW.js";
+import "@golemui/gui-shared";
+var Y = Object.defineProperty, s = (m, t, r, a) => {
+  for (var e = void 0, n = m.length - 1, l; n >= 0; n--)
+    (l = m[n]) && (e = l(t, r, e) || e);
+  return e && Y(t, r, e), e;
+};
+class i extends M {
+  constructor() {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.hint = void 0, this.localeId = void 0, this.errors = [], this.touched = void 0, this.required = !1, this.disabled = !1, this.readOnly = !1, this.prevMonthIcon = "", this.nextMonthIcon = "", this.prevMonthAriaLabel = "", this.nextMonthAriaLabel = "", this.dayFormat = "numeric", this.weekdayFormat = "narrow", this.monthFormat = "long", this.minDate = void 0, this.maxDate = void 0, this.disabledRanges = void 0, this.numberOfMonths = 1, this._currentDate = /* @__PURE__ */ new Date(), this._yearSelectorOpen = !1, this.ariaController = new S(this, {
+      getTargets: () => this.querySelectorAll(".gui-calendar-input"),
+      getState: () => ({
+        uid: this.uid,
+        templateData: {
+          hint: this.hint,
+          errors: this.errors,
+          readonly: this.readOnly,
+          disabled: this.disabled,
+          touched: this.touched
+        }
+      })
+    });
+  }
+  renderAboveCalendar() {
+    return _;
+  }
+  render() {
+    const t = {
+      uid: this.uid,
+      label: this.label,
+      hint: this.hint,
+      errors: this.errors,
+      touched: this.touched,
+      required: this.required
+    }, r = Array.from({ length: this.numberOfMonths ?? 1 }, (a, e) => e);
+    return u`
+      ${this.label ? $(this.uid, t, !1, "calendar") : _}
+
+      <div class="gui-widget" @focusout=${this.onFocusOut}>
+        <div
+          id=${this.uid}
+          class="gui-calendar-input"
+          role="group"
+          aria-labelledby=${this.label ? `${this.uid}_calendar_label` : _}
+          ?aria-disabled=${this.disabled}
+        >
+          ${this.renderAboveCalendar()}
+          <div class="gui-calendar__container">
+            <button
+              type="button"
+              tabindex="0"
+              class="gui-button gui-calendar__month-button gui-calendar__month-button--prev"
+              ?disabled=${!this.canGoPrev()}
+              @click=${this.prevMonth}
+              aria-label=${this.prevMonthAriaLabel ?? "Previous month"}
+            >
+              ${this.prevMonthIcon ? u`<span
+                    class=${`gui-widget-icon ${this.prevMonthIcon}`}
+                    data-icon=${this.prevMonthIcon}
+                  ></span>` : "<"}
+            </button>
+
+            <div class="gui-calendar__months-grid">
+              ${r.map((a) => this.renderMonthPanel(a))}
+            </div>
+
+            <button
+              type="button"
+              tabindex="0"
+              class="gui-button gui-calendar__month-button gui-calendar__month-button--next"
+              ?disabled=${!this.canGoNext()}
+              @click=${this.nextMonth}
+              aria-label=${this.nextMonthAriaLabel ?? "Next month"}
+            >
+              ${this.nextMonthIcon ? u`<span
+                    class=${`gui-widget-icon ${this.nextMonthIcon}`}
+                    data-icon=${this.nextMonthIcon}
+                  ></span>` : ">"}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      ${this.errors?.length ? A(this.uid, t) : _}
+    `;
+  }
+  /**
+   * Render a month panel
+   */
+  renderMonthPanel(t) {
+    const r = this.getDaysInMonth(t), a = this.chunkDays(r), e = I(this.localeId), n = new Date(this._currentDate);
+    return n.setDate(1), n.setMonth(n.getMonth() + t), u`
+      <div class="gui-calendar__panel">
+        ${this.renderHeader(n)}
+        ${this._yearSelectorOpen && t === 0 ? this.renderYearGrid() : u`
+              <div class="gui-calendar__days-grid" role="grid">
+                <div role="row" class="gui-calendar__rows">
+                  ${D(
+      e,
+      (l, c) => c,
+      (l) => u`<span class="gui-calendar__weekday" role="gridcell">${l}</span>`
+    )}
+                </div>
+
+                ${D(
+      a,
+      (l) => u`
+                    <div role="row" class="gui-calendar__rows">
+                      ${D(
+        l,
+        (c) => c.date.toISOString(),
+        (c) => this.renderDay(c)
+      )}
+                    </div>
+                  `
+    )}
+              </div>
+            `}
+      </div>
+    `;
+  }
+  renderHeader(t) {
+    const r = k(this.localeId, t, this.monthFormat);
+    return u`
+      <header class="gui-calendar__header">
+        <h2>
+          ${r.map(
+      (a) => a.type === "year" ? u`<button
+                  type="button"
+                  tabindex="0"
+                  class="gui-calendar__year-selector"
+                  @click=${this.toggleYearSelector}
+                  aria-expanded=${this._yearSelectorOpen}
+                  aria-label="Select year"
+                >
+                  <span class="gui-calendar__year-value">${a.value}</span>
+                  <span class="gui-calendar__year-arrow" aria-hidden="true">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 256 256"
+                    >
+                      <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>
+                </button>` : u`<span class="gui-calendar__month-name">${a.value}</span>`
+    )}
+        </h2>
+      </header>
+    `;
+  }
+  renderYearGrid() {
+    const t = this._currentDate.getFullYear(), r = this._yearList;
+    return u`
+      <div
+        class="gui-calendar__year-grid"
+        role="grid"
+        aria-label="Year selection"
+        @keydown=${this.handleYearKeydown}
+      >
+        ${this.chunkYears(r).map(
+      (a) => u`
+            <div role="row" class="gui-calendar__year-row">
+              ${a.map(
+        (e) => u`
+                  <button
+                    type="button"
+                    role="gridcell"
+                    class="gui-calendar__year-button ${e === t ? "current" : ""}"
+                    tabindex=${e === t ? 0 : -1}
+                    data-year=${e}
+                    @click=${(n) => {
+          n.stopPropagation(), this.selectYear(e);
+        }}
+                    aria-selected=${e === t}
+                  >
+                    ${e}
+                  </button>
+                `
+      )}
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+  chunkYears(t) {
+    const r = [];
+    for (let a = 0; a < t.length; a += 4)
+      r.push(t.slice(a, a + 4));
+    return r;
+  }
+  toggleYearSelector() {
+    this._yearSelectorOpen = !this._yearSelectorOpen, this._yearSelectorOpen && this.updateComplete.then(() => {
+      this.scrollToCurrentYear(), this.focusCurrentYearButton();
+    });
+  }
+  selectYear(t) {
+    this.querySelector(".gui-calendar__year-selector")?.focus();
+    const a = this._currentDate;
+    this._currentDate = new Date(t, a.getMonth(), 1), this._yearSelectorOpen = !1, this.updateComplete.then(() => {
+      this.querySelector(
+        '.gui-calendar__day-button[tabindex="0"]'
+      )?.focus();
+    });
+  }
+  scrollToCurrentYear() {
+    const t = this.querySelector(".gui-calendar__year-grid"), r = this.querySelector(".gui-calendar__year-button.current");
+    if (t && r) {
+      const a = t.getBoundingClientRect(), e = r.getBoundingClientRect(), n = t.scrollTop + (e.top - a.top) - a.height / 2 + e.height / 2;
+      t.scrollTop = Math.max(0, n);
+    }
+  }
+  focusCurrentYearButton() {
+    this.querySelector(
+      ".gui-calendar__year-button.current"
+    )?.focus();
+  }
+  handleYearKeydown(t) {
+    const r = t.target;
+    if (!r.classList.contains("gui-calendar__year-button")) return;
+    const a = Array.from(
+      this.querySelectorAll(".gui-calendar__year-button")
+    ), e = a.indexOf(r), n = window.getComputedStyle(this).direction === "rtl";
+    let l = 0;
+    switch (t.key) {
+      case "ArrowLeft":
+        l = n ? 1 : -1;
+        break;
+      case "ArrowRight":
+        l = n ? -1 : 1;
+        break;
+      case "ArrowUp":
+        l = -4;
+        break;
+      case "ArrowDown":
+        l = 4;
+        break;
+      case "Enter":
+      case " ": {
+        t.preventDefault();
+        const d = parseInt(r.dataset.year ?? "", 10);
+        isNaN(d) || this.selectYear(d);
+        return;
+      }
+      case "Escape": {
+        t.preventDefault(), this.querySelector(".gui-calendar__year-selector")?.focus(), this._yearSelectorOpen = !1;
+        return;
+      }
+      default:
+        return;
+    }
+    t.preventDefault();
+    const c = e + l;
+    c >= 0 && c < a.length && a[c].focus();
+  }
+  get _effectiveMinYear() {
+    return this.minDate ? new Date(this.minDate).getFullYear() : 1900;
+  }
+  get _effectiveMaxYear() {
+    return this.maxDate ? new Date(this.maxDate).getFullYear() : 2099;
+  }
+  get _yearList() {
+    const t = [];
+    for (let r = this._effectiveMinYear; r <= this._effectiveMaxYear; r++)
+      t.push(r);
+    return t;
+  }
+  async handleKeydown(t, r) {
+    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t.key) && t.key !== " " && t.key !== "Enter") return;
+    const e = Array.from(
+      this.querySelectorAll(".gui-calendar__day-button:not(.other-month)")
+    ), n = e.indexOf(t.target), l = window.getComputedStyle(this).direction === "rtl";
+    let c = 0;
+    switch (t.key) {
+      case "ArrowLeft":
+        c = l ? 1 : -1;
+        break;
+      case "ArrowRight":
+        c = l ? -1 : 1;
+        break;
+      case "ArrowUp":
+        c = -7;
+        break;
+      case "ArrowDown":
+        c = 7;
+        break;
+      case " ":
+      case "Enter":
+        t.preventDefault(), this.selectDate(r, t);
+        return;
+    }
+    t.preventDefault();
+    const d = this.findNextFocusableIndex(n, c, e);
+    let b = !1;
+    if (d < 0)
+      if (this.canGoPrev())
+        this.prevMonth(), b = !0;
+      else {
+        e.find((p) => !this.isButtonDisabled(p))?.focus();
+        return;
+      }
+    else if (d >= e.length)
+      if (this.canGoNext())
+        this.nextMonth(), b = !0;
+      else {
+        [...e].reverse().find((g) => !this.isButtonDisabled(g))?.focus();
+        return;
+      }
+    if (b) {
+      await this.updateComplete;
+      const h = Array.from(
+        this.querySelectorAll(".gui-calendar__day-button:not(.other-month)")
+      ), p = Array.from(this.querySelectorAll(".gui-calendar__panel"));
+      let g;
+      if (d < 0)
+        g = p[0].querySelectorAll(
+          ".gui-calendar__day-button:not(.other-month)"
+        ).length + d;
+      else {
+        const f = p[p.length - 1].querySelectorAll(
+          ".gui-calendar__day-button:not(.other-month)"
+        ).length;
+        g = h.length - f + (d - e.length);
+      }
+      if (this.isButtonDisabled(h[g])) {
+        const y = this.findNextFocusableIndex(g, c, h);
+        if (y < 0 || y >= h.length) {
+          const f = h.findIndex((x) => !this.isButtonDisabled(x));
+          f > -1 && h[f].focus();
+        } else
+          h[y]?.focus();
+      } else {
+        const y = Math.max(0, Math.min(g, h.length - 1));
+        h[y]?.focus();
+      }
+    } else
+      e[d]?.focus();
+  }
+  /**
+   * Splits an array of calendar days into chunks of weeks, with each week consisting of up to 7 days.
+   *
+   * @param {AbstractCalendarDay[]} days - An array of calendar day objects to be grouped into weeks.
+   * @return {AbstractCalendarDay[][]} A two-dimensional array where each inner array represents a week of up to 7 days.
+   */
+  chunkDays(t) {
+    const r = [];
+    for (let a = 0; a < t.length; a += 7)
+      r.push(t.slice(a, a + 7));
+    return r;
+  }
+  onFocusOut(t) {
+    t.relatedTarget && this.contains(t.relatedTarget) || (this._blurRafId !== void 0 && cancelAnimationFrame(this._blurRafId), this._blurRafId = requestAnimationFrame(() => {
+      this._blurRafId = void 0, this.contains(document.activeElement) || this.dispatchEvent(new CustomEvent("blur", { bubbles: !0, composed: !0 }));
+    }));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._blurRafId !== void 0 && cancelAnimationFrame(this._blurRafId);
+  }
+  isDisabled(t) {
+    const r = v(t);
+    if (this.minDate && r < this.minDate || this.maxDate && r > this.maxDate) return !0;
+    if (this.disabledRanges && this.disabledRanges.length > 0)
+      for (const a of this.disabledRanges) {
+        const e = a.start.split("T")[0], n = a.end ? a.end.split("T")[0] : e;
+        if (r >= e && r <= n)
+          return !0;
+      }
+    return !1;
+  }
+  prevMonth() {
+    const t = this._currentDate;
+    this._currentDate = new Date(t.getFullYear(), t.getMonth() - 1, 1);
+  }
+  nextMonth() {
+    const t = this._currentDate;
+    this._currentDate = new Date(t.getFullYear(), t.getMonth() + 1, 1);
+  }
+  generateDateGrid(t = 0) {
+    const r = this._currentDate.getFullYear(), a = this._currentDate.getMonth() + t, e = new Date(r, a, 1), n = e.getDay(), l = B(this.localeId)[0], c = (n - l + 7) % 7, d = new Date(e);
+    d.setDate(e.getDate() - c);
+    const b = [];
+    for (let h = 0; h < 42; h++) {
+      const p = new Date(d);
+      p.setDate(d.getDate() + h), b.push(p);
+    }
+    return b;
+  }
+  /**
+   * Finds the next focusable button index based on the current index and step value.
+   * This method skips disabled buttons and continues until it either finds
+   * a focusable button or goes out of bounds of the given button list.
+   *
+   * @param {number} currentIndex - The index of the currently focused button.
+   * @param {number} step - The step size to move. Can be positive or negative.
+   * @param {HTMLButtonElement[]} buttons - The list of button elements to navigate through.
+   * @return {number} - The index of the next focusable button if found; otherwise, returns out-of-bounds index.
+   */
+  findNextFocusableIndex(t, r, a) {
+    let e = t + r;
+    for (; e >= 0 && e < a.length; ) {
+      const n = a[e];
+      if (!this.isButtonDisabled(n))
+        return e;
+      e += r;
+    }
+    return e;
+  }
+  /**
+   * Determines if a button element is disabled based on its attributes.
+   *
+   * @param {HTMLButtonElement | undefined} button - The button element to check. If undefined, the button is considered disabled.
+   * @return {boolean} Returns true if the button is disabled or if no button element is provided, otherwise false.
+   */
+  isButtonDisabled(t) {
+    return t ? t.hasAttribute("disabled") : !0;
+  }
+  /**
+   * Determines whether navigation to the previous month is allowed.
+   *
+   * This method checks if the last day of the previous month exceeds the allowed minimum date.
+   * If there is no minimum date defined, navigation is always allowed.
+   *
+   * @return {boolean} Returns true if navigation to the previous month is permitted; otherwise, returns false.
+   */
+  canGoPrev() {
+    if (!this.minDate) return !0;
+    const t = new Date(
+      this._currentDate.getFullYear(),
+      this._currentDate.getMonth(),
+      0
+    );
+    return v(t) >= this.minDate;
+  }
+  /**
+   * Determines whether navigation to the next month is allowed.
+   *
+   * This method checks if the first day of the next month exceeds the allowed maximum date.
+   * If there is no maximum date defined, navigation is always allowed.
+   *
+   * @return {boolean} Returns true if navigation to the next month is permitted; otherwise, returns false.
+   */
+  canGoNext() {
+    if (!this.maxDate) return !0;
+    const t = (this.numberOfMonths ?? 1) - 1, r = new Date(
+      this._currentDate.getFullYear(),
+      this._currentDate.getMonth() + t + 1,
+      1
+    );
+    return v(r) <= this.maxDate;
+  }
+}
+s([
+  o({ type: String })
+], i.prototype, "uid");
+s([
+  o({ type: String })
+], i.prototype, "label");
+s([
+  o({ type: String })
+], i.prototype, "hint");
+s([
+  o({ type: String, attribute: "locale-id" })
+], i.prototype, "localeId");
+s([
+  o({ type: Array })
+], i.prototype, "errors");
+s([
+  o({ type: Boolean })
+], i.prototype, "touched");
+s([
+  o({ type: Boolean })
+], i.prototype, "required");
+s([
+  o({ type: Boolean })
+], i.prototype, "disabled");
+s([
+  o({ type: Boolean, attribute: "readonly" })
+], i.prototype, "readOnly");
+s([
+  o({ type: String, attribute: "prev-month-icon" })
+], i.prototype, "prevMonthIcon");
+s([
+  o({ type: String, attribute: "next-month-icon" })
+], i.prototype, "nextMonthIcon");
+s([
+  o({ type: String, attribute: "prev-month-aria-label" })
+], i.prototype, "prevMonthAriaLabel");
+s([
+  o({ type: String, attribute: "next-month-aria-label" })
+], i.prototype, "nextMonthAriaLabel");
+s([
+  o({ type: String })
+], i.prototype, "dayFormat");
+s([
+  o({ type: String })
+], i.prototype, "weekdayFormat");
+s([
+  o({ type: String })
+], i.prototype, "monthFormat");
+s([
+  o({ type: String })
+], i.prototype, "minDate");
+s([
+  o({ type: String })
+], i.prototype, "maxDate");
+s([
+  o({ type: Array })
+], i.prototype, "disabledRanges");
+s([
+  o({ type: Number })
+], i.prototype, "numberOfMonths");
+s([
+  w()
+], i.prototype, "_currentDate");
+s([
+  w()
+], i.prototype, "_yearSelectorOpen");
+export {
+  i as A
+};

package/{accordion.element-81uTv6Ms.js → accordion.element-ChLmV6QT.js}

@@ -1,17 +1,19 @@
-import * as d from "@golemui/lit";
-import { consume as u, provide as h } from "@lit/context";
-import { LitElement as g, html as r, nothing as l } from "lit";
-import { property as m, customElement as v } from "lit/decorators.js";
-import { repeat as f } from "lit-html/directives/repeat.js";
-import { classMap as b } from "lit/directives/class-map.js";
-var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? _(e, i) : e, n = t.length - 1, c; n >= 0; n--)
+import { LayoutWidgetAdapter as l, formContext as u, layoutContext as h } from "@golemui/lit";
+import "@golemui/gui-shared";
+import { consume as g, provide as m } from "@lit/context";
+import { LitElement as v, html as r, nothing as p } from "lit";
+import { property as f, customElement as b } from "lit/decorators.js";
+import "rxjs";
+import { repeat as w } from "lit-html/directives/repeat.js";
+import { classMap as _ } from "lit/directives/class-map.js";
+var $ = Object.defineProperty, x = Object.getOwnPropertyDescriptor, d = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? x(e, i) : e, n = t.length - 1, c; n >= 0; n--)
     (c = t[n]) && (s = (a ? c(e, i, s) : c(s)) || s);
-  return a && s && w(e, i, s), s;
+  return a && s && $(e, i, s), s;
 };
-let o = class extends g {
+let o = class extends v {
   constructor() {
-    super(...arguments), this.activeSections = {}, this.adapter = new d.LayoutWidgetAdapter(), this.subscriptions = [];
+    super(...arguments), this.activeSections = {}, this.adapter = new l(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
@@ -39,7 +41,7 @@ let o = class extends g {
   render() {
     return this.adapter.templateData ? r`
       <div class="gui-widget" id=${this.widget.uid}>
-        ${this.adapter.templateData.sections ? f(
+        ${this.adapter.templateData.sections ? w(
       this.adapter.templateData.sections,
       (t) => t.uid,
       (t) => {
@@ -51,12 +53,12 @@ let o = class extends g {
                         aria-labelledby=${`accordion_button_${t.uid}`}
                       >
                         <gui-widget .widget=${this.getChild(t.uid)}></gui-widget>
-                      </section>` : l;
+                      </section>` : p;
         return r`<div class="gui-accordion__section">
                   <button
                     type="button"
                     tabindex="0"
-                    class=${b({
+                    class=${_({
           active: this.activeSections[t.uid]
         })}
                     id=${`accordion_button_${t.uid}`}
@@ -80,7 +82,7 @@ let o = class extends g {
                   ${e}
                 </div>`;
       }
-    ) : l}
+    ) : p}
       </div>
     ` : r``;
   }
@@ -88,15 +90,15 @@ let o = class extends g {
     super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
   }
 };
-p([
-  u({ context: d.formContext }),
-  m({ attribute: !1 })
+d([
+  g({ context: u }),
+  f({ attribute: !1 })
 ], o.prototype, "formContext", 2);
-p([
-  h({ context: d.layoutContext })
+d([
+  m({ context: h })
 ], o.prototype, "adapter", 2);
-o = p([
-  v("gui-accordion-layout")
+o = d([
+  b("gui-accordion-layout")
 ], o);
 export {
   o as AccordionElement

package/{alert.element-DWrS5ggK.js → alert.element-9QFlqjj9.js}

@@ -1,21 +1,23 @@
-import { LitElement as n, html as c } from "lit";
-import { property as u, customElement as h } from "lit/decorators.js";
-import { consume as m, provide as f } from "@lit/context";
-import * as l from "@golemui/lit";
-var b = Object.defineProperty, g = Object.getOwnPropertyDescriptor, d = (i, t, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? g(t, a) : t, o = i.length - 1, p; o >= 0; o--)
-    (p = i[o]) && (e = (r ? p(t, a, e) : p(e)) || e);
-  return r && e && b(t, a, e), e;
+import { LitElement as d, html as n } from "lit";
+import { property as c, customElement as u } from "lit/decorators.js";
+import { consume as m, provide as h } from "@lit/context";
+import { DisplayWidgetAdapter as f, formContext as b, displayWidgetContext as g } from "@golemui/lit";
+import "@golemui/gui-shared";
+import "rxjs";
+var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (r, t, a, i) => {
+  for (var e = i > 1 ? void 0 : i ? x(t, a) : t, o = r.length - 1, p; o >= 0; o--)
+    (p = r[o]) && (e = (i ? p(t, a, e) : p(e)) || e);
+  return i && e && v(t, a, e), e;
 };
-let s = class extends n {
+let s = class extends d {
   constructor() {
-    super(...arguments), this.adapter = new l.DisplayWidgetAdapter(), this.subscriptions = [];
+    super(...arguments), this.adapter = new f(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
-  updated(i) {
-    super.updated(i);
+  updated(r) {
+    super.updated(r);
     const t = this.adapter.templateData.size;
     t ? this.style.flex = String(t) : this.style.removeProperty("flex");
   }
@@ -25,7 +27,7 @@ let s = class extends n {
     );
   }
   render() {
-    return c`
+    return n`
       <div class="gui-widget" id=${this.widget.uid}>
         <div
           role="alert"
@@ -37,18 +39,18 @@ let s = class extends n {
     `;
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((i) => i.unsubscribe());
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((r) => r.unsubscribe());
   }
 };
-d([
-  m({ context: l.formContext }),
-  u({ attribute: !1 })
+l([
+  m({ context: b }),
+  c({ attribute: !1 })
 ], s.prototype, "formContext", 2);
-d([
-  f({ context: l.displayWidgetContext })
+l([
+  h({ context: g })
 ], s.prototype, "adapter", 2);
-s = d([
-  h("gui-alert-display")
+s = l([
+  u("gui-alert-display")
 ], s);
 export {
   s as AlertElement