@golemui/gui-lit 0.16.1 → 0.17.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.16.2 (2026-05-30)
+
+This was a version bump only for gui-lit to align it with other projects, there were no code changes.
+
+## 0.16.1 (2026-05-30)
+
+This was a version bump only for gui-lit to align it with other projects, there were no code changes.
+
 ## 0.16.0 (2026-05-30)
 
 ### 🩹 Fixes

package/{abstract-calendar-YDgwwbqe.js → abstract-calendar-s67Qu3Nt.js}

@@ -1,6 +1,6 @@
-import { LitElement as M, nothing as _, html as u } from "lit";
+import { LitElement as M, nothing as _, html as d } 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 { G as S, b as A, c as $ } 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";
@@ -37,8 +37,8 @@ class i extends M {
       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") : _}
+    return d`
+      ${this.label ? A(this.uid, t, !1, "calendar") : _}
 
       <div class="gui-widget" @focusout=${this.onFocusOut}>
         <div
@@ -58,10 +58,10 @@ class i extends M {
               @click=${this.prevMonth}
               aria-label=${this.prevMonthAriaLabel ?? "Previous month"}
             >
-              ${this.prevMonthIcon ? u`<span
+              ${this.prevMonthIcon ? d`<span
                     class=${`gui-widget-icon ${this.prevMonthIcon}`}
                     data-icon=${this.prevMonthIcon}
-                  ></span>` : "<"}
+                  ></span>` : d`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"></path></svg>`}
             </button>
 
             <div class="gui-calendar__months-grid">
@@ -76,16 +76,16 @@ class i extends M {
               @click=${this.nextMonth}
               aria-label=${this.nextMonthAriaLabel ?? "Next month"}
             >
-              ${this.nextMonthIcon ? u`<span
+              ${this.nextMonthIcon ? d`<span
                     class=${`gui-widget-icon ${this.nextMonthIcon}`}
                     data-icon=${this.nextMonthIcon}
-                  ></span>` : ">"}
+                  ></span>` : d`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg>`}
             </button>
           </div>
         </div>
       </div>
 
-      ${this.errors?.length ? A(this.uid, t) : _}
+      ${this.errors?.length ? $(this.uid, t) : _}
     `;
   }
   /**
@@ -93,22 +93,22 @@ class i extends M {
    */
   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`
+    return n.setDate(1), n.setMonth(n.getMonth() + t), d`
       <div class="gui-calendar__panel">
         ${this.renderHeader(n)}
-        ${this._yearSelectorOpen && t === 0 ? this.renderYearGrid() : u`
+        ${this._yearSelectorOpen && t === 0 ? this.renderYearGrid() : d`
               <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>`
+      (l) => d`<span class="gui-calendar__weekday" role="gridcell">${l}</span>`
     )}
                 </div>
 
                 ${D(
       a,
-      (l) => u`
+      (l) => d`
                     <div role="row" class="gui-calendar__rows">
                       ${D(
         l,
@@ -125,11 +125,11 @@ class i extends M {
   }
   renderHeader(t) {
     const r = k(this.localeId, t, this.monthFormat);
-    return u`
+    return d`
       <header class="gui-calendar__header">
         <h2>
           ${r.map(
-      (a) => a.type === "year" ? u`<button
+      (a) => a.type === "year" ? d`<button
                   type="button"
                   tabindex="0"
                   class="gui-calendar__year-selector"
@@ -150,7 +150,7 @@ class i extends M {
                       ></path>
                     </svg>
                   </span>
-                </button>` : u`<span class="gui-calendar__month-name">${a.value}</span>`
+                </button>` : d`<span class="gui-calendar__month-name">${a.value}</span>`
     )}
         </h2>
       </header>
@@ -158,7 +158,7 @@ class i extends M {
   }
   renderYearGrid() {
     const t = this._currentDate.getFullYear(), r = this._yearList;
-    return u`
+    return d`
       <div
         class="gui-calendar__year-grid"
         role="grid"
@@ -166,10 +166,10 @@ class i extends M {
         @keydown=${this.handleYearKeydown}
       >
         ${this.chunkYears(r).map(
-      (a) => u`
+      (a) => d`
             <div role="row" class="gui-calendar__year-row">
               ${a.map(
-        (e) => u`
+        (e) => d`
                   <button
                     type="button"
                     role="gridcell"
@@ -246,8 +246,8 @@ class i extends M {
       case "Enter":
       case " ": {
         t.preventDefault();
-        const d = parseInt(r.dataset.year ?? "", 10);
-        isNaN(d) || this.selectYear(d);
+        const u = parseInt(r.dataset.year ?? "", 10);
+        isNaN(u) || this.selectYear(u);
         return;
       }
       case "Escape": {
@@ -298,16 +298,16 @@ class i extends M {
         return;
     }
     t.preventDefault();
-    const d = this.findNextFocusableIndex(n, c, e);
+    const u = this.findNextFocusableIndex(n, c, e);
     let b = !1;
-    if (d < 0)
+    if (u < 0)
       if (this.canGoPrev())
         this.prevMonth(), b = !0;
       else {
         e.find((p) => !this.isButtonDisabled(p))?.focus();
         return;
       }
-    else if (d >= e.length)
+    else if (u >= e.length)
       if (this.canGoNext())
         this.nextMonth(), b = !0;
       else {
@@ -320,15 +320,15 @@ class i extends M {
         this.querySelectorAll(".gui-calendar__day-button:not(.other-month)")
       ), p = Array.from(this.querySelectorAll(".gui-calendar__panel"));
       let g;
-      if (d < 0)
+      if (u < 0)
         g = p[0].querySelectorAll(
           ".gui-calendar__day-button:not(.other-month)"
-        ).length + d;
+        ).length + u;
       else {
         const f = p[p.length - 1].querySelectorAll(
           ".gui-calendar__day-button:not(.other-month)"
         ).length;
-        g = h.length - f + (d - e.length);
+        g = h.length - f + (u - e.length);
       }
       if (this.isButtonDisabled(h[g])) {
         const y = this.findNextFocusableIndex(g, c, h);
@@ -342,7 +342,7 @@ class i extends M {
         h[y]?.focus();
       }
     } else
-      e[d]?.focus();
+      e[u]?.focus();
   }
   /**
    * Splits an array of calendar days into chunks of weeks, with each week consisting of up to 7 days.
@@ -384,12 +384,12 @@ class i extends M {
     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 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, u = new Date(e);
+    u.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);
+      const p = new Date(u);
+      p.setDate(u.getDate() + h), b.push(p);
     }
     return b;
   }

package/{button.element-DxwYDdu6.js → button.element-DoQmGWze.js}

@@ -1,18 +1,18 @@
-import { ActionWidgetAdapter as f, formContext as g, actionContext as y } from "@golemui/lit";
-import { consume as v, provide as $ } from "@lit/context";
-import { LitElement as b, html as u, nothing as l } from "lit";
-import { property as a, customElement as m } from "lit/decorators.js";
+import { ActionWidgetAdapter as f, formContext as g, actionContext as v } from "@golemui/lit";
+import { consume as y, provide as $ } from "@lit/context";
+import { LitElement as b, html as u, nothing as c } from "lit";
+import { property as s, customElement as m } from "lit/decorators.js";
 import "rxjs";
 import "@golemui/gui-shared";
 import { classMap as P } from "lit/directives/class-map.js";
 var C = Object.defineProperty, x = Object.getOwnPropertyDescriptor, r = (i, t, n, o) => {
-  for (var e = o > 1 ? void 0 : o ? x(t, n) : t, p = i.length - 1, c; p >= 0; p--)
-    (c = i[p]) && (e = (o ? c(t, n, e) : c(e)) || e);
+  for (var e = o > 1 ? void 0 : o ? x(t, n) : t, p = i.length - 1, l; p >= 0; p--)
+    (l = i[p]) && (e = (o ? l(t, n, e) : l(e)) || e);
   return o && e && C(t, n, e), e;
 };
-let s = class extends b {
+let a = class extends b {
   constructor() {
-    super(...arguments), this.uid = void 0, this.label = void 0, this.disabled = !1, this.icon = void 0, this.variant = "filled", this.iconPosition = "left", this.actionType = "button";
+    super(...arguments), this.uid = void 0, this.label = void 0, this.disabled = !1, this.icon = void 0, this.variant = "filled", this.iconPosition = "left", this.actionType = "button", this.invalid = !1;
   }
   createRenderRoot() {
     return this;
@@ -25,8 +25,9 @@ let s = class extends b {
       "gui-button-with-icon": !!i,
       [`gui-button-icon-${t}`]: !0,
       "gui-button--outlined": this.variant === "outlined",
-      "gui-button--link": this.variant === "link"
-    }, o = i ? u`<span class="gui-widget-icon gui-button-icon ${i}" data-icon=${i}></span>` : l;
+      "gui-button--link": this.variant === "link",
+      "gui-button--invalid": this.invalid && this.actionType === "submit"
+    }, o = i ? u`<span class="gui-widget-icon gui-button-icon ${i}" data-icon=${i}></span>` : c;
     return u`
       <div class="gui-widget">
         <button
@@ -37,43 +38,46 @@ let s = class extends b {
           data-cy=${`${this.uid}_button`}
           ?disabled=${this.disabled}
         >
-          ${t === "left" ? o : l}
-          ${this.label ? u`<span>${this.label}</span>` : l}
-          ${t === "right" ? o : l}
+          ${t === "left" ? o : c}
+          ${this.label ? u`<span>${this.label}</span>` : c}
+          ${t === "right" ? o : c}
         </button>
       </div>
     `;
   }
 };
 r([
-  a({ type: String })
-], s.prototype, "uid", 2);
+  s({ type: String })
+], a.prototype, "uid", 2);
 r([
-  a({ type: String })
-], s.prototype, "label", 2);
+  s({ type: String })
+], a.prototype, "label", 2);
 r([
-  a({ type: Boolean })
-], s.prototype, "disabled", 2);
+  s({ type: Boolean })
+], a.prototype, "disabled", 2);
 r([
-  a({ type: String })
-], s.prototype, "icon", 2);
+  s({ type: String })
+], a.prototype, "icon", 2);
 r([
-  a({ type: String })
-], s.prototype, "variant", 2);
+  s({ type: String })
+], a.prototype, "variant", 2);
 r([
-  a({ type: String })
-], s.prototype, "iconPosition", 2);
+  s({ type: String })
+], a.prototype, "iconPosition", 2);
 r([
-  a({ type: String })
-], s.prototype, "actionType", 2);
-s = r([
+  s({ type: String })
+], a.prototype, "actionType", 2);
+r([
+  s({ type: Boolean })
+], a.prototype, "invalid", 2);
+a = r([
   m("gui-button")
-], s);
-typeof customElements < "u" && !customElements.get("gui-button") && customElements.define("gui-button", s);
-var _ = Object.defineProperty, D = Object.getOwnPropertyDescriptor, h = (i, t, n, o) => {
-  for (var e = o > 1 ? void 0 : o ? D(t, n) : t, p = i.length - 1, c; p >= 0; p--)
-    (c = i[p]) && (e = (o ? c(t, n, e) : c(e)) || e);
-  return o && e && _(t, n, e), e;
+], a);
+typeof customElements < "u" && !customElements.get("gui-button") && customElements.define("gui-button", a);
+var D = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, h = (i, t, n, o) => {
+  for (var e = o > 1 ? void 0 : o ? _(t, n) : t, p = i.length - 1, l; p >= 0; p--)
+    (l = i[p]) && (e = (o ? l(t, n, e) : l(e)) || e);
+  return o && e && D(t, n, e), e;
 };
 let d = class extends b {
   constructor() {
@@ -99,6 +103,7 @@ let d = class extends b {
         .actionType=${this.adapter.templateData.actionType ?? "button"}
         .label=${this.adapter.templateData.label}
         ?disabled=${this.adapter.templateData.disabled === !0}
+        ?invalid=${this.adapter.templateData.invalid === !0}
         .variant=${this.adapter.templateData.variant}
         .icon=${this.adapter.templateData.icon}
         .iconPosition=${this.adapter.templateData.iconPosition}
@@ -111,11 +116,11 @@ let d = class extends b {
   }
 };
 h([
-  v({ context: g }),
-  a({ attribute: !1 })
+  y({ context: g }),
+  s({ attribute: !1 })
 ], d.prototype, "formContext", 2);
 h([
-  $({ context: y })
+  $({ context: v })
 ], d.prototype, "adapter", 2);
 d = h([
   m("gui-button-interactive")

package/{calendar-P9DzVryu.js → calendar-aXb9yz-6.js}

@@ -2,7 +2,7 @@ import { html as D } from "lit";
 import { property as m, customElement as f } from "lit/decorators.js";
 import { classMap as p } from "lit/directives/class-map.js";
 import { i as h, b as g, a as v, g as M, t as w } from "./date-CG1562vW.js";
-import { A as C } from "./abstract-calendar-YDgwwbqe.js";
+import { A as C } from "./abstract-calendar-s67Qu3Nt.js";
 var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, d = (e, t, n, r) => {
   for (var i = r > 1 ? void 0 : r ? y(t, n) : t, s = e.length - 1, a; s >= 0; s--)
     (a = e[s]) && (i = (r ? a(t, n, i) : a(i)) || i);

package/{calendar.element-O2of7VBr.js → calendar.element-D7OF4QVV.js}

@@ -1,6 +1,6 @@
 import { InputWidgetAdapter as o, formContext as l, inputContext as h } from "@golemui/lit";
 import "@golemui/gui-shared";
-import "./calendar-P9DzVryu.js";
+import "./calendar-aXb9yz-6.js";
 import { consume as m, provide as u } from "@lit/context";
 import { LitElement as c, html as D } from "lit";
 import { property as b, customElement as $ } from "lit/decorators.js";

package/{date-input-D_Swskk4.js → date-input-5Heujc5X.js}

@@ -60,7 +60,10 @@ let o = class extends y {
       ${this.label ? A(this.uid, t) : u}
 
       <div class="gui-widget">
-        <div class="gui-widget-input gui-date-input ${this.icon ? "gui-calendar--icon" : ""}" role="group">
+        <div
+          class="gui-widget-input gui-date-input ${this.icon ? "gui-calendar--icon" : ""}"
+          role="group"
+        >
           ${g(
       e,
       (i) => i.type,

package/{date-picker.element-CP2_u_ZE.js → date-picker.element-DStQrD4x.js}

@@ -1,16 +1,16 @@
 import { InputWidgetAdapter as h, formContext as u, inputContext as c } from "@golemui/lit";
 import { a as m, b as g, c as C } from "./templates-Dk1jxLwS.js";
 import "@golemui/gui-shared";
-import "./date-input-D_Swskk4.js";
-import "./calendar-P9DzVryu.js";
+import "./date-input-5Heujc5X.js";
+import "./calendar-aXb9yz-6.js";
 import { consume as D, provide as $ } from "@lit/context";
-import { LitElement as v, html as l, nothing as f } from "lit";
+import { LitElement as v, html as p, nothing as f } from "lit";
 import { property as b, query as o, state as y, customElement as I } from "lit/decorators.js";
 import "rxjs";
 import { classMap as O } from "lit/directives/class-map.js";
 var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? x(t, a) : t, d = e.length - 1, p; d >= 0; d--)
-    (p = e[d]) && (r = (i ? p(t, a, r) : p(r)) || r);
+  for (var r = i > 1 ? void 0 : i ? x(t, a) : t, d = e.length - 1, l; d >= 0; d--)
+    (l = e[d]) && (r = (i ? l(t, a, r) : l(r)) || r);
   return i && r && w(t, a, r), r;
 };
 let s = class extends v {
@@ -40,7 +40,7 @@ let s = class extends v {
   }
   render() {
     super.render();
-    const e = m("datePicker", this.adapter.templateData), t = this.isCalendarOpen ? l`<gui-calendar
+    const e = m("datePicker", this.adapter.templateData), t = this.isCalendarOpen ? p`<gui-calendar
           id="calendar-input"
           .uid=${this.widget.uid}
           .hint=${this.adapter.templateData.hint}
@@ -62,9 +62,9 @@ let s = class extends v {
           .numberOfMonths=${this.adapter.templateData.numberOfMonths}
           .localeId=${this.adapter.templateData.lang}
           @blur=${this.onBlurCalendar}
-          @change=${this.valueChanged}
+          @change=${this.onCalendarChange}
         ></gui-calendar>` : f;
-    return l`
+    return p`
       ${g(this.widget.uid, {
       ...this.adapter.templateData,
       required: this.adapter.templateData.validator?.required
@@ -113,6 +113,12 @@ let s = class extends v {
   valueChanged(e) {
     this.adapter.injectValidationIssues(null), this.adapter.valueChanged(e.detail.value);
   }
+  // Selecting a day in the calendar commits a single date, so close the
+  // calendar afterwards. The range picker intentionally stays open so the user
+  // can select multiple ranges and closes it themselves.
+  onCalendarChange(e) {
+    this.valueChanged(e), this.closeCalendar();
+  }
   onBlurCalendar() {
     this.adapter.onBlur(), this.closeCalendar();
   }

package/{date.element-p6aB6OGd.js → date.element-DymfLrlq.js}

@@ -1,7 +1,7 @@
 import { InputWidgetAdapter as l, formContext as n, inputContext as u } from "@golemui/lit";
 import { a as h } from "./templates-Dk1jxLwS.js";
 import "@golemui/gui-shared";
-import "./date-input-D_Swskk4.js";
+import "./date-input-5Heujc5X.js";
 import { consume as c, provide as m } from "@lit/context";
 import { LitElement as f, html as b } from "lit";
 import { property as g, customElement as D } from "lit/decorators.js";

package/index.js

@@ -3717,27 +3717,27 @@ function Y(e, t) {
 }
 const li = {
   // ACTION
-  button: async () => (await import("./button.element-DxwYDdu6.js")).ButtonElement,
+  button: async () => (await import("./button.element-DoQmGWze.js")).ButtonElement,
   // INPUTS
-  calendar: async () => (await import("./calendar.element-O2of7VBr.js")).CalendarElement,
-  rangeCalendar: async () => (await import("./range-calendar.element-DQZXvd-L.js")).RangeCalendarElement,
-  rangeDateInput: async () => (await import("./range-date-input.element-v71P-oUp.js")).RangeDateInputElement,
-  rangeDatePicker: async () => (await import("./range-date-picker.element-CA-KcQhA.js")).RangeDatePickerElement,
+  calendar: async () => (await import("./calendar.element-D7OF4QVV.js")).CalendarElement,
+  rangeCalendar: async () => (await import("./range-calendar.element-D6FO7HpL.js")).RangeCalendarElement,
+  rangeDateInput: async () => (await import("./range-date-input.element-Cjl1vZfr.js")).RangeDateInputElement,
+  rangeDatePicker: async () => (await import("./range-date-picker.element-DqjOBKoT.js")).RangeDatePickerElement,
   currency: async () => (await import("./currency.element-ybKzwXEh.js")).CurrencyElement,
-  dateInput: async () => (await import("./date.element-p6aB6OGd.js")).DateElement,
-  datePicker: async () => (await import("./date-picker.element-CP2_u_ZE.js")).DatePickerElement,
+  dateInput: async () => (await import("./date.element-DymfLrlq.js")).DateElement,
+  datePicker: async () => (await import("./date-picker.element-DStQrD4x.js")).DatePickerElement,
   dropdown: async () => (await import("./dropdown.element-sbd3T145.js")).DropdownElement,
   list: async () => (await import("./list.element-Bgnx2CN_.js")).ListElement,
-  markdown: async () => (await import("./markdown.element-1IF3G5KX.js")).MarkdownElement,
+  markdown: async () => (await import("./markdown.element-BiAglcXP.js")).MarkdownElement,
   password: async () => (await import("./password.element-BT65mDsp.js")).PasswordElement,
   textinput: async () => (await import("./textinput.element-zI0iG-Cq.js")).TextinputElement,
   textarea: async () => (await import("./textarea.element-BTJLqnnI.js")).TextareaElement,
   toggle: async () => (await import("./toggle.element-NXRrhALB.js")).ToggleElement,
   checkbox: async () => (await import("./checkbox.element-DMmer4Jw.js")).CheckboxElement,
-  number: async () => (await import("./number.element-zgd4L5hn.js")).NumberElement,
-  radiogroup: async () => (await import("./radiogroup.element-DzHLgRh1.js")).RadiogroupElement,
-  select: async () => (await import("./select.element-CjWqp9dd.js")).SelectElement,
-  tags: async () => (await import("./tags.element-ed1_51GA.js")).TagsElement,
+  number: async () => (await import("./number.element-DlpxcOBs.js")).NumberElement,
+  radiogroup: async () => (await import("./radiogroup.element-tdHrN9V5.js")).RadiogroupElement,
+  select: async () => (await import("./select.element-Y9i1tsl-.js")).SelectElement,
+  tags: async () => (await import("./tags.element-B3JP4m0z.js")).TagsElement,
   // REPEATER
   repeater: async () => (await import("./repeater.element-Ry8HyMfW.js")).RepeaterElement,
   // LAYOUTS