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

package/{password.element-n-R9RbkB.js → password.element-CBaB8h5b.js}

@@ -2,12 +2,12 @@ import { InputWidgetAdapter as m, formContext as y, inputContext as P } from "@g
 import { LitElement as w, nothing as n, html as u } from "lit";
 import { property as o, state as g, customElement as b } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.js";
-import { G as $, a as f, b as I, c as C } from "./templates-Dk1jxLwS.js";
+import { G as $, a as f, b as I, c as C } from "./templates-Dmr34nwp.js";
 import { consume as D, provide as L } from "@lit/context";
 import "rxjs";
 var S = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, s = (t, a, i, d) => {
-  for (var r = d > 1 ? void 0 : d ? _(a, i) : a, l = t.length - 1, p; l >= 0; l--)
-    (p = t[l]) && (r = (d ? p(a, i, r) : p(r)) || r);
+  for (var r = d > 1 ? void 0 : d ? _(a, i) : a, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (r = (d ? h(a, i, r) : h(r)) || r);
   return d && r && S(a, i, r), r;
 };
 let e = class extends w {
@@ -21,7 +21,8 @@ let e = class extends w {
           errors: this.errors,
           readonly: this.readOnly,
           disabled: this.disabled,
-          touched: this.touched
+          touched: this.touched,
+          required: this.required
         }
       })
     });
@@ -65,7 +66,7 @@ let e = class extends w {
           data-cy=${`${this.uid}_password`}
           class=${v(i)}
           value=${this.value}
-          ?required=${this.disabled}
+          ?required=${this.required}
           ?disabled=${this.disabled}
           ?readonly=${this.readOnly}
           placeholder=${this.placeholder || n}
@@ -78,10 +79,11 @@ let e = class extends w {
           class=${`gui-password__toggle gui-widget-icon ${this.showPassword && t.showPasswordIcon ? t.showPasswordIcon : ""} ${!this.showPassword && t.hidePasswordIcon ? t.hidePasswordIcon : ""}`}
           data-icon=${this.showPassword ? t.showPasswordIcon : t.hidePasswordIcon}
           type="button"
-          tabindex="-1"
+          ?disabled=${this.disabled}
+          aria-label=${this.showPassword ? t.hidePasswordLabel ?? "Hide password" : t.showPasswordLabel ?? "Show password"}
           @click=${() => this.showPassword = !this.showPassword}
         >
-          ${t.showPasswordIcon || t.hidePasswordIcon ? n : u`<span
+          ${t.showPasswordIcon || t.hidePasswordIcon ? n : u`<span aria-hidden="true"
                 >${this.showPassword ? t.hidePasswordLabel ?? "Hide" : t.showPasswordLabel ?? "Show"}</span
               >`}
         </button>
@@ -169,12 +171,12 @@ e = s([
   b("gui-password")
 ], e);
 typeof customElements < "u" && !customElements.get("gui-password") && customElements.define("gui-password", e);
-var x = Object.defineProperty, O = Object.getOwnPropertyDescriptor, c = (t, a, i, d) => {
-  for (var r = d > 1 ? void 0 : d ? O(a, i) : a, l = t.length - 1, p; l >= 0; l--)
-    (p = t[l]) && (r = (d ? p(a, i, r) : p(r)) || r);
-  return d && r && x(a, i, r), r;
+var O = Object.defineProperty, x = Object.getOwnPropertyDescriptor, c = (t, a, i, d) => {
+  for (var r = d > 1 ? void 0 : d ? x(a, i) : a, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (r = (d ? h(a, i, r) : h(r)) || r);
+  return d && r && O(a, i, r), r;
 };
-let h = class extends w {
+let p = class extends w {
   constructor() {
     super(...arguments), this.adapter = new m(), this.subscriptions = [];
   }
@@ -226,13 +228,13 @@ let h = class extends w {
 c([
   D({ context: y }),
   o({ attribute: !1 })
-], h.prototype, "formContext", 2);
+], p.prototype, "formContext", 2);
 c([
   L({ context: P })
-], h.prototype, "adapter", 2);
-h = c([
+], p.prototype, "adapter", 2);
+p = c([
   b("gui-password-input")
-], h);
+], p);
 export {
-  h as PasswordElement
+  p as PasswordElement
 };

package/pill-ranges-DpvWwP-3.js

@@ -0,0 +1,48 @@
+import { p as o } from "./date-DBuYpvcO.js";
+function s(t) {
+  return `${t.start}-${t.end ?? t.start}`;
+}
+function f(t, n) {
+  return !t || !Array.isArray(t) ? [] : [...t].sort((r, e) => n(r.start, e.start));
+}
+function u(t, n) {
+  return t.find((r) => s(r) === n);
+}
+function c(t, n) {
+  const r = t ?? [], e = u(r, n);
+  if (!e) return null;
+  const i = r.filter(
+    (a) => !(a.start === e.start && (a.end ?? null) === (e.end ?? null))
+  );
+  return { removed: e, next: i };
+}
+function d(t, n) {
+  const r = o(t);
+  return isNaN(r.getTime()) ? t : new Intl.DateTimeFormat(n ?? "en", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).format(r);
+}
+function m(t, n) {
+  const r = n(t.start), e = t.end ? n(t.end) : r;
+  return `${r} - ${e}`;
+}
+function y(t, n) {
+  return t.map((r) => {
+    const e = n(r);
+    return {
+      key: s(r),
+      label: e,
+      ariaLabel: e
+    };
+  });
+}
+export {
+  m as a,
+  y as b,
+  d as c,
+  u as f,
+  c as r,
+  f as s
+};

package/{pills-B66qz_KX.js → pills-BDMO2NiR.js}

@@ -1,16 +1,16 @@
-import { LitElement as m, nothing as p, html as d } from "lit";
+import { LitElement as m, nothing as d, html as a } from "lit";
 import { property as l, state as u, customElement as w } from "lit/decorators.js";
 import { classMap as c } from "lit/directives/class-map.js";
 import { repeat as b } from "lit/directives/repeat.js";
 import { c as v } from "./tabs-DzSCq_98.js";
-var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (e, t, i, s) => {
-  for (var n = s > 1 ? void 0 : s ? _(t, i) : t, a = e.length - 1, h; a >= 0; a--)
-    (h = e[a]) && (n = (s ? h(t, i, n) : h(n)) || n);
-  return s && n && y(t, i, n), n;
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (e, t, i, r) => {
+  for (var n = r > 1 ? void 0 : r ? _(t, i) : t, p = e.length - 1, h; p >= 0; p--)
+    (h = e[p]) && (n = (r ? h(t, i, n) : h(n)) || n);
+  return r && n && y(t, i, n), n;
 };
-let r = class extends m {
+let s = class extends m {
   constructor() {
-    super(...arguments), this.items = [], this.clickable = !1, this.removable = !0, this.bubble = !0, this.tabbable = !0, this.disabled = !1, this.readOnly = !1, this.removeAriaLabel = "Remove", this._isStartVisible = !0, this._isEndVisible = !0, this._showDropdown = !1, this._pendingFocusIndex = null, this.handlePillFocus = (e) => {
+    super(...arguments), this.uid = void 0, this.items = [], this.clickable = !1, this.removable = !0, this.bubble = !0, this.tabbable = !0, this.disabled = !1, this.readOnly = !1, this.removeAriaLabel = "Remove", this.toolbarAriaLabel = "Selected items", this._isStartVisible = !0, this._isEndVisible = !0, this._showDropdown = !1, this._pendingFocusIndex = null, this.handlePillFocus = (e) => {
       e.target.scrollIntoView({
         behavior: "smooth",
         block: "nearest",
@@ -19,8 +19,8 @@ let r = class extends m {
     }, this.toggleDropdown = () => {
       this._showDropdown ? this.closeDropdown() : this.openDropdown();
     }, this.handleOutsideInteraction = (e) => {
-      const t = this.querySelector(".gui-pills__compact"), i = this.querySelector(".gui-pills__dropdown"), s = e.composedPath()[0];
-      !t?.contains(s) && !i?.contains(s) && this.closeDropdown();
+      const t = this.querySelector(".gui-pills__compact"), i = this.querySelector(".gui-pills__dropdown"), r = e.composedPath()[0];
+      !t?.contains(r) && !i?.contains(r) && this.closeDropdown();
     };
   }
   createRenderRoot() {
@@ -35,8 +35,8 @@ let r = class extends m {
         this._showDropdown && this.closeDropdown();
         return;
       }
-      const s = Math.max(0, Math.min(t, i - 1));
-      this.focusPillAt(s);
+      const r = Math.max(0, Math.min(t, i - 1));
+      this.focusPillAt(r);
     }
   }
   disconnectedCallback() {
@@ -44,13 +44,13 @@ let r = class extends m {
   }
   render() {
     const e = this.items.length;
-    return e === 0 ? p : d`
-      ${this.renderStrip()} ${this.bubble ? this.renderCompact(e) : p}
-      ${this.bubble && this._showDropdown ? this.renderDropdown() : p}
+    return e === 0 ? d : a`
+      ${this.renderStrip()} ${this.bubble ? this.renderCompact(e) : d}
+      ${this.bubble && this._showDropdown ? this.renderDropdown() : d}
     `;
   }
   renderStrip() {
-    return d`
+    return a`
       <div
         class=${c({
       "gui-pills__strip-wrapper": !0,
@@ -58,7 +58,12 @@ let r = class extends m {
       "gui-pills--end-shadow": !this._isEndVisible
     })}
       >
-        <div class="gui-pills__strip" role="list" tabindex="-1">
+        <div
+          class="gui-pills__strip"
+          role="toolbar"
+          aria-label=${this.toolbarAriaLabel}
+          tabindex="-1"
+        >
           <span class="gui-sentinel gui-sentinel__start"></span>
           ${b(
       this.items,
@@ -70,14 +75,19 @@ let r = class extends m {
       </div>
     `;
   }
+  get dropdownId() {
+    return this.uid ? `${this.uid}_pills_dropdown` : void 0;
+  }
   renderCompact(e) {
-    return d`
+    return a`
       <div class="gui-pills__compact">
         <button
           type="button"
           class="gui-pills__count"
           aria-label=${this.compactAriaLabel ?? `${e} items`}
+          aria-haspopup="true"
           aria-expanded=${this._showDropdown}
+          aria-controls=${this.dropdownId ?? d}
           ?disabled=${this.disabled || this.readOnly}
           @click=${(t) => {
       t.stopPropagation(), this.toggleDropdown();
@@ -89,8 +99,14 @@ let r = class extends m {
     `;
   }
   renderDropdown() {
-    return d`
-      <div class="gui-pills__dropdown" role="list">
+    return a`
+      <div
+        id=${this.dropdownId ?? d}
+        class="gui-pills__dropdown"
+        role="toolbar"
+        aria-orientation="vertical"
+        aria-label=${this.toolbarAriaLabel}
+      >
         ${b(
       this.items,
       (e) => `dd-${e.key}`,
@@ -100,44 +116,47 @@ let r = class extends m {
     `;
   }
   renderPill(e, t, i) {
-    const s = e.ariaLabel ?? `${this.removeAriaLabel}: ${e.label}`, n = this.clickable && !this.disabled && !this.readOnly;
-    return d`
-      <div
+    const r = this.clickable && !this.disabled && !this.readOnly;
+    return a`
+      <button
+        type="button"
         class=${c({
       "gui-pills__pill": !0,
-      "gui-pills__pill--clickable": n
+      "gui-pills__pill--clickable": r
     })}
-        role="listitem"
         data-key=${e.key}
         data-index=${t}
         data-in-dropdown=${i}
         tabindex=${this.tabbable && !this.disabled && !this.readOnly ? 0 : -1}
-        aria-label=${s}
-        @click=${(a) => this.onPillClick(a, e)}
+        ?disabled=${this.disabled || this.readOnly}
+        aria-label=${e.ariaLabel ?? e.label}
+        aria-description=${this.removable && !this.disabled && !this.readOnly ? this.removeAriaLabel : d}
+        @click=${(n) => this.onPillClick(n, e)}
         @focus=${this.handlePillFocus}
-        @keydown=${(a) => this.onPillKeydown(a, e, t)}
+        @keydown=${(n) => this.onPillKeydown(n, e, t)}
       >
         <span class="gui-pills__pill-text">${e.label}</span>
-        ${this.removable ? this.renderRemoveButton(e) : p}
-      </div>
+        ${this.removable ? this.renderRemoveButton(e) : d}
+      </button>
     `;
   }
   renderRemoveButton(e) {
-    return d`
-      <button
-        type="button"
+    return a`
+      <span
         class="gui-pills__pill-remove"
-        tabindex="-1"
         aria-hidden="true"
-        ?disabled=${this.disabled || this.readOnly}
+        @mousedown=${(t) => {
+      t.stopPropagation(), t.preventDefault();
+    }}
         @click=${(t) => {
       t.stopPropagation(), this.emitRemove(e.key, this.items.indexOf(e));
     }}
       >
-        ${this.removeIcon ? d`<span
+        ${this.removeIcon ? a`<span
               class=${`gui-widget-icon ${this.removeIcon}`}
               data-icon=${this.removeIcon}
-            ></span>` : d`<svg
+              aria-hidden="true"
+            ></span>` : a`<svg
               xmlns="http://www.w3.org/2000/svg"
               width="16"
               height="16"
@@ -149,7 +168,7 @@ let r = class extends m {
                 d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
               ></path>
             </svg>`}
-      </button>
+      </span>
     `;
   }
   onPillClick(e, t) {
@@ -180,12 +199,12 @@ let r = class extends m {
       );
       return;
     }
-    const s = this._showDropdown, n = s ? "ArrowUp" : "ArrowLeft", a = s ? "ArrowDown" : "ArrowRight";
+    const r = this._showDropdown, n = r ? "ArrowUp" : "ArrowLeft", p = r ? "ArrowDown" : "ArrowRight";
     if (e.key === n) {
       i > 0 ? (e.preventDefault(), this.focusPillAt(i - 1)) : this.emitKeydown(t.key, e);
       return;
     }
-    if (e.key === a) {
+    if (e.key === p) {
       i < this.items.length - 1 ? (e.preventDefault(), this.focusPillAt(i + 1)) : this.emitKeydown(t.key, e);
       return;
     }
@@ -197,8 +216,8 @@ let r = class extends m {
       e.preventDefault(), this.focusPillAt(this.items.length - 1);
       return;
     }
-    if (e.key === "Escape" && s) {
-      e.preventDefault(), this.closeDropdown();
+    if (e.key === "Escape" && r) {
+      e.preventDefault(), e.stopPropagation(), this.closeDropdown();
       return;
     }
     this.emitKeydown(t.key, e);
@@ -232,8 +251,8 @@ let r = class extends m {
     requestAnimationFrame(() => {
       const t = this._showDropdown ? ".gui-pills__dropdown .gui-pills__pill" : ".gui-pills__strip .gui-pills__pill", i = this.querySelectorAll(t);
       if (i.length === 0) return;
-      const s = Math.max(0, Math.min(e, i.length - 1));
-      i[s].focus();
+      const r = Math.max(0, Math.min(e, i.length - 1));
+      i[r].focus();
     });
   }
   /** Open the dropdown and focus its first pill. No-op if `bubble` is false. */
@@ -278,46 +297,52 @@ let r = class extends m {
     this.startObserver?.disconnect(), this.endObserver?.disconnect(), this.startObserver = void 0, this.endObserver = void 0;
   }
 };
+o([
+  l({ type: String })
+], s.prototype, "uid", 2);
 o([
   l({ type: Array })
-], r.prototype, "items", 2);
+], s.prototype, "items", 2);
 o([
   l({ type: Boolean })
-], r.prototype, "clickable", 2);
+], s.prototype, "clickable", 2);
 o([
   l({ type: Boolean })
-], r.prototype, "removable", 2);
+], s.prototype, "removable", 2);
 o([
   l({ type: Boolean })
-], r.prototype, "bubble", 2);
+], s.prototype, "bubble", 2);
 o([
   l({ type: Boolean })
-], r.prototype, "tabbable", 2);
+], s.prototype, "tabbable", 2);
 o([
   l({ type: Boolean })
-], r.prototype, "disabled", 2);
+], s.prototype, "disabled", 2);
 o([
   l({ type: Boolean, attribute: "readonly" })
-], r.prototype, "readOnly", 2);
+], s.prototype, "readOnly", 2);
 o([
   l({ type: String, attribute: "remove-aria-label" })
-], r.prototype, "removeAriaLabel", 2);
+], s.prototype, "removeAriaLabel", 2);
 o([
   l({ type: String, attribute: "remove-icon" })
-], r.prototype, "removeIcon", 2);
+], s.prototype, "removeIcon", 2);
 o([
   l({ type: String, attribute: "compact-aria-label" })
-], r.prototype, "compactAriaLabel", 2);
+], s.prototype, "compactAriaLabel", 2);
+o([
+  l({ type: String, attribute: "toolbar-aria-label" })
+], s.prototype, "toolbarAriaLabel", 2);
 o([
   u()
-], r.prototype, "_isStartVisible", 2);
+], s.prototype, "_isStartVisible", 2);
 o([
   u()
-], r.prototype, "_isEndVisible", 2);
+], s.prototype, "_isEndVisible", 2);
 o([
   u()
-], r.prototype, "_showDropdown", 2);
-r = o([
+], s.prototype, "_showDropdown", 2);
+s = o([
   w("gui-pills")
-], r);
-typeof customElements < "u" && !customElements.get("gui-pills") && customElements.define("gui-pills", r);
+], s);
+typeof customElements < "u" && !customElements.get("gui-pills") && customElements.define("gui-pills", s);

package/popup.controller-B33OvX_y.js

@@ -0,0 +1,86 @@
+import "lit";
+import { G as n } from "./focus-leave.controller-2gV0pQd5.js";
+class c {
+  constructor(e, i) {
+    this._open = !1, this._restoringFocus = !1, this._suppressNextFocusOut = !1, this._pointerDownInside = !1, this._pointerDownTarget = null, this.show = () => {
+      this.options.isDisabled() || this._restoringFocus || (this.options.beforeOpen?.(this), this.setOpen(!0));
+    }, this.close = () => {
+      this.setOpen(!1);
+    }, this.openAndFocus = () => {
+      this.show(), !(!this._open || !this.options.focusPopupSelector) && Promise.resolve(this.host.updateComplete).then(() => {
+        this.host.querySelector(this.options.focusPopupSelector)?.focus();
+      });
+    }, this.toggle = () => {
+      this.options.isDisabled() || (this.options.keyToggleMode === "toggle" ? this.setOpen(!this._open) : this._open ? this.close() : this.show());
+    }, this.onAnchorClick = (t) => {
+      if (this.options.isDisabled()) return;
+      const s = this._pointerDownTarget ?? t.target, o = this.options.clickIntent(s);
+      if (o !== "ignore") {
+        if (o === "open") {
+          this.show();
+          return;
+        }
+        this.toggle();
+      }
+    }, this.onAnchorKeyDown = (t) => this.options.isDisabled() ? !1 : t.key === "Escape" && this._open ? (t.preventDefault(), t.stopPropagation(), this.restoreFocusToInput(), this.close(), !0) : !1, this.onDocumentClick = (t) => {
+      if (!this._open) return;
+      !t.composedPath().includes(this.host) && !this._pointerDownInside && this.close();
+    }, this.onDocumentPointerDown = (t) => {
+      const s = t.composedPath();
+      this._pointerDownInside = s.includes(this.host), this._pointerDownTarget = s[0] ?? null;
+    }, this.onDocumentKeyDown = (t) => {
+      t.key !== "Tab" && t.key !== "Escape" || (this._pointerDownInside = !1, this._pointerDownTarget = null);
+    }, this.closeOnFocusLeave = () => {
+      this._pointerDownInside || this.close();
+    }, this.onHostFocusOut = (t) => {
+      if (this._suppressNextFocusOut) {
+        this._suppressNextFocusOut = !1;
+        return;
+      }
+      if (!this._open) return;
+      const s = t.relatedTarget;
+      this._pointerDownInside && (!s || s.contains(this.host)) || this.focusLeave.handleFocusOut(t);
+    }, this.host = e, this.options = i, this.focusLeave = new n(e, {
+      onLeave: () => {
+        this.close();
+      }
+    }), e.addController(this);
+  }
+  get open() {
+    return this._open;
+  }
+  /**
+   * Swallows exactly the next focusout pass — even one that arrives while
+   * the popup is closed — then re-arms normal behavior. Used around
+   * operations that transiently move focus (pills dropdown coordination).
+   */
+  suppressNextFocusOut() {
+    this._suppressNextFocusOut = !0;
+  }
+  setOpen(e) {
+    this._open !== e && (this._open = e, this.host.requestUpdate(), this.options.onOpenChanged?.(e));
+  }
+  /**
+   * Focuses the `focusRestoreSelector` element, arming the restoring-focus
+   * flag (reset via setTimeout(0)) so the resulting focus event does not
+   * re-open the popup through show().
+   */
+  restoreFocusToInput() {
+    const e = this.host.querySelector(this.options.focusRestoreSelector);
+    e && (this._restoringFocus = !0, e.focus(), setTimeout(() => {
+      this._restoringFocus = !1;
+    }));
+  }
+  hostUpdated() {
+    this._open && this.options.isDisabled() && this.close();
+  }
+  hostConnected() {
+    document.addEventListener("click", this.onDocumentClick), document.addEventListener("pointerdown", this.onDocumentPointerDown, !0), document.addEventListener("keydown", this.onDocumentKeyDown, !0), this.host.addEventListener("focusout", this.onHostFocusOut);
+  }
+  hostDisconnected() {
+    document.removeEventListener("click", this.onDocumentClick), document.removeEventListener("pointerdown", this.onDocumentPointerDown, !0), document.removeEventListener("keydown", this.onDocumentKeyDown, !0), this.host.removeEventListener("focusout", this.onHostFocusOut);
+  }
+}
+export {
+  c as G
+};