q2-tecton-elements 1.72.0 → 1.73.0

package/dist/components/q2-action-sheet.js

@@ -1,30 +1,44 @@
-import { proxyCustomElement as t, HTMLElement as o, createEvent as e, h as i, Fragment as a, transformTag as s } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as o, transformTag as a } from "@stencil/core/internal/client";
 
-import { l as r, w as n } from "./index2.js";
+import { l as s, w as r } from "./index2.js";
 
-import { s as c, a as d } from "./sanitize-html-string.js";
+import { s as n, a as c } from "./sanitize-html-string.js";
 
-import { m as l } from "./mirror-emit.js";
+import { m as d } from "./mirror-emit.js";
 
-import { d as h } from "./q2-btn2.js";
+import { d as l } from "./click-elsewhere2.js";
 
-import { d as p } from "./q2-icon2.js";
+import { d as h } from "./q2-badge2.js";
 
-import { d as m } from "./q2-loading2.js";
+import { d as p } from "./q2-btn2.js";
 
-import { d as b } from "./q2-message2.js";
+import { d as m } from "./q2-date-calendar2.js";
 
-import { d as g } from "./q2-optgroup2.js";
+import { d as b } from "./q2-date-picker2.js";
 
-import { d as u } from "./q2-option2.js";
+import { d as g } from "./q2-icon2.js";
 
-import { d as v } from "./q2-option-list2.js";
+import { d as u } from "./q2-input2.js";
 
-const f =  t(class extends o {
+import { d as v } from "./q2-loading2.js";
+
+import { d as f } from "./q2-message2.js";
+
+import { d as x } from "./q2-optgroup2.js";
+
+import { d as k } from "./q2-option2.js";
+
+import { d as w } from "./q2-option-list2.js";
+
+import { d as y } from "./q2-popover2.js";
+
+const q =  t(class extends e {
   constructor(t) {
-    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.close = e(this, "close", 7), 
-    this.ready = e(this, "ready", 3), this.tctClose = e(this, "tctClose", 7), this.initialSelectedOptions = [], 
-    this.maxHeight = .75, this.minHeight = .2, this.selectedOptions = {
+    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.close = i(this, "close", 7), 
+    this.ready = i(this, "ready", 3), this.tctClose = i(this, "tctClose", 7), 
+    // #region Own Properties
+    this.bodyOverflow = "", this.initialSelectedOptions = [], this.maxHeight = .75, 
+    this.minHeight = .2, this.rootOverflow = "", this.selectedDate = {}, this.selectedOptions = {
       values: [],
       value: ""
     }, 
@@ -41,18 +55,18 @@ const f =  t(class extends o {
       const t = (await this.optionListElement.getOptions()).slice().reverse().find((t => !t.hidden && !t.disabled));
       t && t.focus();
     }, this.generateOptgroup = t => {
-      const o = document.createElement("q2-optgroup");
-      return t.label && o.setAttribute("label", t.label), t.disabled && o.setAttribute("disabled", ""), 
-      t.options.length && t.options.forEach((t => o.appendChild(this.generateOption(t)))), 
-      o;
+      const e = document.createElement("q2-optgroup");
+      return t.label && e.setAttribute("label", t.label), t.disabled && e.setAttribute("disabled", ""), 
+      t.options.length && t.options.forEach((t => e.appendChild(this.generateOption(t)))), 
+      e;
     }, this.generateOption = t => {
-      const o = document.createElement("q2-option"), {innerHTML: e, ...i} = t;
-      return e && (o.innerHTML = c(e)), Object.entries(i).forEach((([t, e]) => {
-        if (void 0 === e) return;
+      const e = document.createElement("q2-option"), {innerHTML: i, ...o} = t;
+      return i && (e.innerHTML = n(i)), Object.entries(o).forEach((([t, i]) => {
+        if (void 0 === i) return;
         // Convert component prop names to HTML attributes, e.g. someLongPropertyName to some-long-property-name.
-                const i = t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-        "boolean" == typeof e ? e && o.setAttribute(i, "") : o.setAttribute(i, e);
-      })), o;
+                const o = t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+        "boolean" == typeof i ? i && e.setAttribute(o, "") : e.setAttribute(o, i);
+      })), e;
     }, 
     /**
          * Handles keyboard navigation within the action sheet dialog.
@@ -68,13 +82,13 @@ const f =  t(class extends o {
          * @param event - The keyboard event.
          */
     this.handleDialogKeydown = t => {
-      const {data: o} = this;
+      const {data: e} = this;
       // Only activate for list appearance with an option list
-            if (!o || "list" !== o.appearance || !this.optionListElement) return;
-      const {key: e, shiftKey: i} = t;
-      if ("Tab" !== e) return;
+            if (!e || "list" !== e.appearance || !this.optionListElement) return;
+      const {key: i, shiftKey: o} = t;
+      if ("Tab" !== i) return;
       const a = this.hostElement.shadowRoot.activeElement, s = this.closeButtonElement, r = this.doneButtonElement, n = a === s, c = a === r, d = document.activeElement, l = !!d && ("Q2-OPTION" === d.tagName || "Q2-DROPDOWN-ITEM" === d.tagName) && this.hostElement.contains(d);
-      if (i) 
+      if (o) 
       // Shift+Tab: if on close button
       if (n) {
         // With a done button (multi-select): allow default to exit to browser.
@@ -104,18 +118,34 @@ const f =  t(class extends o {
         t.preventDefault(), r.focus());
       }
     }, this.onCancel = t => {
-      var o, e;
+      var e, i;
       t.preventDefault();
-      const {initialSelectedOptions: i} = this;
+      const {initialSelectedOptions: o} = this;
       this.hide({
-        value: null !== (e = null === (o = null == i ? void 0 : i[0]) || void 0 === o ? void 0 : o.value) && void 0 !== e ? e : "",
-        values: i,
+        value: null !== (i = null === (e = null == o ? void 0 : o[0]) || void 0 === e ? void 0 : e.value) && void 0 !== i ? i : "",
+        values: o,
         type: "cancel"
       });
     }, this.onClick = t => {
-      const e = t.target;
-      if (!(e instanceof o)) return;
-      !!e.closest(".interior, q2-action-sheet") || this.onCancel(t);
+      const i = t.target;
+      if (!(i instanceof e)) return;
+      !!i.closest(".interior, q2-action-sheet") || this.onCancel(t);
+    }, this.onDatePickerCancel = t => {
+      t.stopPropagation(), this.onCancel(t);
+    }, this.onDatePickerChange = t => {
+      t.stopPropagation(), this.selectedDate = t.detail;
+    }, this.onDatePickerClose = t => {
+      t.stopPropagation();
+      const e = t.detail || void 0;
+      if (null == e ? void 0 : e.error) return void this.hide({
+        error: e.error,
+        type: "confirm"
+      });
+      const i = void 0 !== this.selectedDate.value || void 0 !== this.selectedDate.rangeStart || void 0 !== this.selectedDate.rangeEnd;
+      this.hide({
+        ...this.selectedDate,
+        type: i ? "confirm" : "cancel"
+      });
     }, this.onListChange = t => {
       this.selectedOptions = t.detail;
     }, this.onListDone = () => {
@@ -125,45 +155,95 @@ const f =  t(class extends o {
       });
     }, this.onListPopoverStateChange = t => {
       t.detail.open || ("close" === t.detail.action ? this.onCancel(t) : this.onListDone());
+    }, this.onViewportResize = () => {
+      requestAnimationFrame((() => this.updateDialogMinMaxHeight()));
     }, 
     // #endregion
     // #region Render Methods
-    this.renderList = ({data: t}) => {
-      var o;
-      const {listProps: e, slotsHtml: s = []} = t;
-      return i(a, null, s.filter((t => "top" === t.slot)).map((t => i("div", {
-        innerHTML: d(t.html)
-      }))), i("div", {
+    this.renderDatePicker = ({data: t}) => {
+      const e = t.datePickerProps;
+      return o("div", {
+        class: "content date-picker-content",
+        ref: t => this.contentElement = t
+      }, o("q2-date-picker", {
+        _actionSheet: !0,
+        open: !0,
+        calendarLabel: e.calendarLabel,
+        closeDelay: e.closeDelay,
+        cutoffTime: e.cutoffTime,
+        daysOfWeekChecksum: e.daysOfWeekChecksum,
+        disclaimer: e.disclaimer,
+        endDate: e.endDate,
+        displayFormat: e.displayFormat,
+        invalidDates: e.invalidDates,
+        locale: e.locale,
+        mode: e.mode,
+        rangeEnd: e.rangeEnd,
+        rangeStart: e.rangeStart,
+        startDate: e.startDate,
+        validDates: e.validDates,
+        value: e.value,
+        onTctCancel: this.onDatePickerCancel,
+        onTctChange: this.onDatePickerChange,
+        onTctClose: this.onDatePickerClose
+      }));
+    }, this.renderList = ({data: t}) => {
+      var e;
+      const {listProps: i, slotsHtml: a = []} = t;
+      let r = !1;
+      const n = a.map((t => {
+        var e;
+        const i = c(t.html), o = document.createElement("div");
+        o.innerHTML = i;
+        const a = !0 === (null === (e = o.firstElementChild) || void 0 === e ? void 0 : e.hasAttribute("data-action-sheet-scroll"));
+        return "top" === t.slot && a && (r = !0), {
+          ...t,
+          html: i,
+          scrolls: "top" === t.slot ? r : a
+        };
+      }));
+      // Bottom content joins the scroll area from the options through the last marker.
+            let d = !1;
+      for (let t = n.length - 1; t >= 0; t--) {
+        const e = n[t];
+        "bottom" === e.slot && (e.scrolls && (d = !0), e.scrolls = d);
+      }
+      const renderSlots = (t, e) => n.filter((i => i.slot === t && i.scrolls === e)).map((t => o("div", {
+        class: "list-slot",
+        innerHTML: t.html
+      })));
+      return o("div", {
+        class: "list-body"
+      }, renderSlots("top", !1), o("div", {
         class: "content",
         ref: t => this.contentElement = t
-      }, i("q2-option-list", {
+      }, renderSlots("top", !0), o("q2-option-list", {
         ref: t => this.optionListElement = t,
-        multiple: e.multiple,
-        label: (null === (o = this.data) || void 0 === o ? void 0 : o.title) || this.title,
-        noSelect: e.noSelect,
+        multiple: i.multiple,
+        label: (null === (e = this.data) || void 0 === e ? void 0 : e.title) || this.title,
+        noSelect: i.noSelect,
         onChange: this.onListChange,
         onPopoverState: this.onListPopoverStateChange,
-        selectedOptions: e.selectedOptions
-      }, i("slot", null))), i("footer", null, e.multiple && i("q2-btn", {
+        selectedOptions: i.selectedOptions
+      }, o("slot", null)), renderSlots("bottom", !0)), o("footer", null, i.multiple && o("q2-btn", {
         ref: t => this.doneButtonElement = t,
         "test-id": "btnDone",
-        intent: "workflow-primary",
+        intent: "primary",
         onClick: this.onListDone
-      }, r("tecton.element.actionSheet.done"))), s.filter((t => "bottom" === t.slot)).map((t => i("div", {
-        innerHTML: d(t.html)
-      }))));
-    }, this.renderMessage = ({data: t}) => i("q2-message", {
+      }, s("tecton.element.actionSheet.done"))), renderSlots("bottom", !1));
+    }, this.renderMessage = ({data: t}) => o("q2-message", {
       type: t.type
-    }, t.title && i("h2", null, t.title), t.description && i("p", null, t.description)), 
-    this.renderSlot = () => i("div", {
+    }, t.title && o("h2", null, t.title), t.description && o("p", null, t.description)), 
+    this.renderSlot = () => o("div", {
       class: "content",
       ref: t => this.contentElement = t
-    }, i("slot", null));
+    }, o("slot", null));
   }
   // #endregion
   // #region Component Lifecycle Events
   disconnectedCallback() {
-    this.dialogElement.removeEventListener("cancel", this.onCancel), this.dialogElement.removeEventListener("keydown", this.handleDialogKeydown, !0);
+    this.dialogElement.removeEventListener("cancel", this.onCancel), this.dialogElement.removeEventListener("keydown", this.handleDialogKeydown, !0), 
+    window.removeEventListener("resize", this.onViewportResize), this.dialogElement.open && this.restorePageScroll();
   }
   componentDidLoad() {
     this.dialogElement.addEventListener("cancel", this.onCancel), 
@@ -177,9 +257,10 @@ const f =  t(class extends o {
     values: [],
     type: "confirm"
   }) {
-    l(this, [ "close", "tctClose" ], t), this.renderStatus = "is-closing", this.dialogElement.addEventListener("transitionend", (() => {
+    d(this, [ "close", "tctClose" ], t), this.renderStatus = "is-closing", window.removeEventListener("resize", this.onViewportResize), 
+    this.restorePageScroll(), this.dialogElement.addEventListener("transitionend", (() => {
       "is-closing" === this.renderStatus && (this.dialogElement.close(), this.renderStatus = null, 
-      this.data = void 0, this.initialSelectedOptions = [], this.selectedOptions = {
+      this.data = void 0, this.initialSelectedOptions = [], this.selectedDate = {}, this.selectedOptions = {
         values: [],
         value: ""
       }, this.hidePostHook());
@@ -188,27 +269,39 @@ const f =  t(class extends o {
     });
   }
   async show() {
-    this.showPreHook(), await n(), this.updateDialogMinMaxHeight(), this.storeInitialValues(), 
-    this.dialogElement.open || (this.dialogElement.showModal(), this.renderStatus = "is-opening", 
-    this.dialogElement.addEventListener("transitionend", (() => {
-      "is-opening" === this.renderStatus && (this.renderStatus = "is-open", this.focusContent());
-    }), {
-      once: !0
-    }));
+    if (!this.dialogElement.open) {
+      this.showPreHook(), await r(), this.updateDialogMinMaxHeight(), this.storeInitialValues(), 
+      this.dialogElement.showModal(), window.addEventListener("resize", this.onViewportResize), 
+      this.bodyOverflow = document.body.style.overflow, this.rootOverflow = document.documentElement.style.overflow, 
+      document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden";
+      try {
+        this.renderStatus = "is-opening", this.dialogElement.addEventListener("transitionend", (() => {
+          "is-opening" === this.renderStatus && (this.renderStatus = "is-open", this.focusContent());
+        }), {
+          once: !0
+        });
+      } catch (t) {
+        throw window.removeEventListener("resize", this.onViewportResize), this.restorePageScroll(), 
+        t;
+      }
+    }
   }
   // #endregion
   // #region Local Methods
   focusContent() {
     const {data: t} = this;
     if (t && "list" === t.appearance) {
-      const {event: o} = t;
-      o instanceof KeyboardEvent ? this.optionListElement.handleExternalKeydown(o) : this.optionListElement.focus();
+      const {event: e} = t;
+      e instanceof KeyboardEvent ? this.optionListElement.handleExternalKeydown(e) : this.optionListElement.focus();
     }
   }
   hidePostHook() {
     const {data: t} = this;
     t && "list" === t.appearance && (this.hostElement.innerHTML = null);
   }
+  restorePageScroll() {
+    document.body.style.overflow = this.bodyOverflow, document.documentElement.style.overflow = this.rootOverflow;
+  }
   showPreHook() {
     const {data: t} = this;
     t && "list" === t.appearance && (this.hostElement.innerHTML = null, t.options.forEach((t => {
@@ -225,10 +318,13 @@ const f =  t(class extends o {
     this.dialogElement.style.setProperty("--comp-action-sheet-computed-max-height", Math.floor(t * this.maxHeight) + "px");
   }
   render() {
-    var t;
-    const {data: o} = this, e = (null == o ? void 0 : o.title) || this.title || !this.hideClose, a = this.renderStatus || "";
+    const {data: t} = this, e = (null == t ? void 0 : t.title) || this.title || !this.hideClose, i = (null == t ? void 0 : t.title) || this.title, a = this.renderStatus || "";
     let s = null;
-    switch (null == o ? void 0 : o.appearance) {
+    switch (null == t ? void 0 : t.appearance) {
+     case "date-picker":
+      s = this.renderDatePicker;
+      break;
+
      case "message":
       s = this.renderMessage;
       break;
@@ -240,36 +336,37 @@ const f =  t(class extends o {
      default:
       s = this.renderSlot;
     }
-    const r = "interior is-" + ((null == o ? void 0 : o.appearance) || "slot");
-    return i("dialog", {
-      key: "840635222baf3ed3f7193c550bb73675d0b466d4",
+    const r = "interior is-" + ((null == t ? void 0 : t.appearance) || "slot");
+    return o("dialog", {
+      key: "a2594cad0378cf9bf045ed3ec1022afc58e34dbb",
       ref: t => this.dialogElement = t,
       class: a,
-      onClick: this.onClick,
-      "aria-labelledby": e ? "title" : void 0
-    }, i("div", {
-      key: "c09338fde8ba753281162bd75714e29e6a8cc936",
+      "aria-label": e ? void 0 : i,
+      "aria-labelledby": e ? "title" : void 0,
+      onClick: this.onClick
+    }, o("div", {
+      key: "de6361cfa49ec69666b8b2c193dcc9cfc5ac4b0f",
       class: r
-    }, e && i("header", {
-      key: "d3bb667204c262a28363b71ffe6fba8209454391"
-    }, i("div", {
-      key: "8981cf55df99b607a49660fd6ecfe8ef827c100e",
+    }, e && o("header", {
+      key: "c5a1ddd1f414027e3f75d2a7048c1ccd349cba78"
+    }, o("div", {
+      key: "3d4e7472f5c55ed96eec5ad8909d6ada7a5aa5b2",
       id: "title"
-    }, (null == o ? void 0 : o.title) || this.title), !this.hideClose && i("q2-btn", {
-      key: "b4d175a3e7d0382ae9e4630a4fe0f85403af5888",
+    }, (null == t ? void 0 : t.title) || this.title), !this.hideClose && o("q2-btn", {
+      key: "c5e4c952b308e2571a6e90017e4f8010b4a580fe",
       ref: t => this.closeButtonElement = t,
       class: "btn-close",
       "test-id": "btnClose",
       onClick: this.onCancel,
       label: "tecton.element.actionSheet.close",
       "hide-label": !0
-    }, i("q2-icon", {
-      key: "95624ea4bcb5a9897a2b09326de718205a32e346",
+    }, o("q2-icon", {
+      key: "10383e6b8d6ab899648208bbada3c18f47fb5bd3",
       type: "close"
-    }))), (null === (t = this.data) || void 0 === t ? void 0 : t.description) && i("p", {
-      key: "4f599b2645c604bde96747af50f8d7344db60e11"
-    }, o.description), s && i(s, {
-      key: "0878d252923c4c3a8b82cc89f8a88fc3bace794d",
+    }))), t && "description" in t && t.description && o("p", {
+      key: "a1de7256a6f497270866f076d7697226a8bea946"
+    }, t.description), s && o(s, {
+      key: "3f5a57d706b4066c036bb4710a612bd34268b78e",
       data: this.data
     })));
   }
@@ -277,7 +374,7 @@ const f =  t(class extends o {
     return this;
   }
   static get style() {
-    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;--comp-border-radius:var(--tct-action-sheet-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-action-sheet-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-action-sheet-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-action-sheet-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-action-sheet-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-action-sheet-color, inherit);--comp-dialog-padding:var(--tct-action-sheet-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-action-sheet-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-action-sheet-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-action-sheet-max-width, 400px);--comp-dialog-max-height:var(--tct-action-sheet-max-height, var(--comp-action-sheet-computed-max-height, 75vh));--comp-dialog-min-height:var(--tct-action-sheet-min-height, var(--comp-action-sheet-computed-min-height, 20vh));--comp-dialog-box-shadow:var(--tct-action-sheet-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden;min-height:var(--comp-dialog-min-height);max-height:var(--comp-dialog-max-height)}dialog::backdrop{opacity:0;background:var(--tct-action-sheet-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open].is-opening,dialog[open].is-open{transform:translateY(-100%)}@media screen and (min-width: 1200px){dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}@media screen and (min-width: 1200px){dialog{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:0}}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.interior{display:grid;grid-template-rows:44px 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding);margin-bottom:env(safe-area-inset-bottom, 0px)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:"";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}.interior [slot=popover-top]{padding:var(--tct-dropdown-popover-top-slot-padding, 0);border-bottom:var(--tct-dropdown-slot-border-top)}.interior [slot=popover-bottom]{padding:var(--tct-dropdown-popover-bottom-slot-padding, 0);border-top:var(--tct-dropdown-slot-border-bottom)}header{display:grid;grid-template-columns:var(--comp-close-button-size) 1fr var(--comp-close-button-size);grid-template-areas:". title close";gap:var(--comp-dialog-gap)}header #title{grid-area:title;text-align:center;line-height:var(--comp-header-height)}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}footer{display:flex;justify-content:end}';
+    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;--comp-border-radius:var(--tct-action-sheet-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-action-sheet-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-action-sheet-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-action-sheet-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-action-sheet-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-action-sheet-color, inherit);--comp-dialog-padding:var(--tct-action-sheet-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-action-sheet-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-action-sheet-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-action-sheet-max-width, 400px);--comp-dialog-max-height:var(--tct-action-sheet-max-height, var(--comp-action-sheet-computed-max-height, 75vh));--comp-dialog-min-height:var(--tct-action-sheet-min-height, var(--comp-action-sheet-computed-min-height, 20vh));--comp-dialog-box-shadow:var(--tct-action-sheet-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden;overscroll-behavior:contain;min-height:var(--comp-dialog-min-height);max-height:var(--comp-dialog-max-height)}dialog::backdrop{opacity:0;background:var(--tct-action-sheet-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open].is-opening,dialog[open].is-open{transform:translateY(-100%)}@media screen and (min-width: 1200px){dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}@media screen and (min-width: 1200px){dialog{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:0}}.content{overflow-y:auto;overscroll-behavior:contain;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.date-picker-content{padding:var(--tct-action-sheet-date-picker-padding, var(--app-scale-1x, 5px))}.interior{display:grid;grid-template-rows:44px 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding);margin-bottom:env(safe-area-inset-bottom, 0px)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:"";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}.interior [slot=popover-top]{padding:var(--tct-dropdown-popover-top-slot-padding, 0);border-bottom:var(--tct-dropdown-slot-border-top)}.interior [slot=popover-bottom]{padding:var(--tct-dropdown-popover-bottom-slot-padding, 0);border-top:var(--tct-dropdown-slot-border-bottom)}.list-body{display:contents}.interior.is-list{display:flex;flex-direction:column}.interior.is-list>header,.interior.is-list .list-body>.list-slot,.interior.is-list .list-body>footer{flex-shrink:0}.interior.is-list .list-body>.content{flex:1 1 auto;min-height:0}.interior.is-list .list-body>.content>.list-slot{margin-block:var(--comp-dialog-gap)}header{display:grid;grid-template-columns:var(--comp-close-button-size) 1fr var(--comp-close-button-size);grid-template-areas:". title close";gap:var(--comp-dialog-gap)}header #title{grid-area:title;text-align:center;line-height:var(--comp-header-height)}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}footer{display:flex;justify-content:end}@media screen and (max-width: 1199px) and (orientation: portrait){dialog:has(.date-picker-content){--comp-dialog-max-height:100dvh}.interior:has(.date-picker-content){max-height:calc(100dvh - var(--comp-dialog-padding) - var(--comp-dialog-padding))}.content.date-picker-content{overflow-y:visible}}@media screen and (max-width: 1199px) and (orientation: landscape){dialog:has(.date-picker-content){--comp-dialog-max-height:100dvh;height:100dvh}.interior:has(.date-picker-content){height:calc(100dvh - var(--comp-dialog-padding) - var(--comp-dialog-padding))}.content.date-picker-content{min-height:0}}';
   }
 }, [ 257, "q2-action-sheet", {
   data: [ 1040 ],
@@ -289,42 +386,66 @@ const f =  t(class extends o {
   show: [ 64 ]
 } ]);
 
-const x = f, defineCustomElement = function() {
+const z = q, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
-  [ "q2-action-sheet", "q2-btn", "q2-icon", "q2-loading", "q2-message", "q2-optgroup", "q2-option", "q2-option-list" ].forEach((t => {
+  [ "q2-action-sheet", "click-elsewhere", "q2-badge", "q2-btn", "q2-date-calendar", "q2-date-picker", "q2-icon", "q2-input", "q2-loading", "q2-message", "q2-optgroup", "q2-option", "q2-option-list", "q2-popover" ].forEach((t => {
     switch (t) {
      case "q2-action-sheet":
-      customElements.get(s(t)) || customElements.define(s(t), f);
+      customElements.get(a(t)) || customElements.define(a(t), q);
+      break;
+
+     case "click-elsewhere":
+      customElements.get(a(t)) || l();
+      break;
+
+     case "q2-badge":
+      customElements.get(a(t)) || h();
       break;
 
      case "q2-btn":
-      customElements.get(s(t)) || h();
+      customElements.get(a(t)) || p();
+      break;
+
+     case "q2-date-calendar":
+      customElements.get(a(t)) || m();
+      break;
+
+     case "q2-date-picker":
+      customElements.get(a(t)) || b();
       break;
 
      case "q2-icon":
-      customElements.get(s(t)) || p();
+      customElements.get(a(t)) || g();
+      break;
+
+     case "q2-input":
+      customElements.get(a(t)) || u();
       break;
 
      case "q2-loading":
-      customElements.get(s(t)) || m();
+      customElements.get(a(t)) || v();
       break;
 
      case "q2-message":
-      customElements.get(s(t)) || b();
+      customElements.get(a(t)) || f();
       break;
 
      case "q2-optgroup":
-      customElements.get(s(t)) || g();
+      customElements.get(a(t)) || x();
       break;
 
      case "q2-option":
-      customElements.get(s(t)) || u();
+      customElements.get(a(t)) || k();
       break;
 
      case "q2-option-list":
-      customElements.get(s(t)) || v();
+      customElements.get(a(t)) || w();
+      break;
+
+     case "q2-popover":
+      customElements.get(a(t)) || y();
     }
   }));
 };
 
-export { x as Q2ActionSheet, defineCustomElement }
+export { z as Q2ActionSheet, defineCustomElement }

package/dist/components/q2-avatar2.js

@@ -69,16 +69,16 @@ const o =  a(class extends t {
   render() {
     const {computedInitials: a} = this, t = this.src && !this.badSrc, e = this.isLoaded, i = (this.name || this.initials) && (!this.src || this.badSrc), o = !this.name && !this.initials && (!this.src || this.badSrc);
     return r("div", {
-      key: "bdce1116b87a48c861e7ba66e0dccd13829d3819",
+      key: "2a10f13b2ca606dab3563d026910d909e37ddcb0",
       class: `avatar-wrapper size-${this.size}`
     }, this.hasDecorator && r("div", {
-      key: "461db5f2062faa3c4d7f43105c84c51aabc179d8",
+      key: "e5deb3da74508a5731238724895ca9f1ab8b7a50",
       class: "decorator"
     }, r("slot", {
-      key: "673a93a53a752514bce15687f5791682fdf3b0b7",
+      key: "3cc01e88891a09f7917416a0acd0940e79decf26",
       name: "decorator"
     })), t && r("img", {
-      key: "fa881cb161c7f2bf64dabc1cf888d465e4698cb9",
+      key: "cbed4e936072bca7bd23bd18b8679d0539c3fbd2",
       class: "" + (e ? "avatar-img" : "avatar-img-default"),
       "test-id": "userImage",
       src: this.src,
@@ -86,7 +86,7 @@ const o =  a(class extends t {
       onLoad: this.onLoad,
       alt: this.name || ""
     }), i && r("svg", {
-      key: "6d8707c833fed056813f81b9014e82584444fa54",
+      key: "f1876a7748d3806e21e48f3de7b70c6faea499ca",
       viewBox: "0 0 100 100",
       preserveAspectRatio: "xMidYMid meet",
       "test-id": "userInitials",
@@ -94,18 +94,18 @@ const o =  a(class extends t {
       "aria-label": this.name,
       "aria-hidden": !this.name && "true"
     }, r("text", {
-      key: "ae99c0b68abaa70e9517dee3dfe6dfdccdad13d6",
+      key: "a120d991968334f383efcb9d5ef920c7ee542880",
       x: "50",
       y: "50",
       "dominant-baseline": "central",
       "text-anchor": "middle",
       "aria-hidden": "true"
     }, a)), o && r("div", {
-      key: "df92213216e69c7d933fdfcd4ba1664cee793e14",
+      key: "598457dc937327172221fab317246d1085a57b02",
       "test-id": "fallbackIcon",
       class: "fallback"
     }, r("q2-icon", {
-      key: "373a344abc59c1e8ea07472d932d5417265582d3",
+      key: "578836c985252ea19c06d5499e6ad8f9c311e09f",
       type: this.icon
     })));
   }