q2-tecton-elements 1.71.4 → 1.73.0

package/dist/q2-tecton-elements/q2-action-sheet.entry.js

@@ -1,16 +1,18 @@
-import { r as t, c as o, h as i, F as e, g as a } from "./index-Cqkz7Bnm.js";
+import { r as t, c as i, h as o, g as e } from "./index-Cqkz7Bnm.js";
 
-import { l as s, w as r } from "./index-Cps4jSQM.js";
+import { l as a, w as s } from "./index-CP8pXJ-l.js";
 
-import { s as n, a as c } from "./sanitize-html-string-DPHNpMWE.js";
+import { s as r, a as n } from "./sanitize-html-string-DPHNpMWE.js";
 
-import { m as d } from "./mirror-emit-DUjY_ucm.js";
+import { m as c } from "./mirror-emit-DUjY_ucm.js";
 
-const l = class {
-  constructor(a) {
-    t(this, a), this.close = o(this, "close", 7), this.ready = o(this, "ready", 3), 
-    this.tctClose = o(this, "tctClose", 7), this.initialSelectedOptions = [], this.maxHeight = .75, 
-    this.minHeight = .2, this.selectedOptions = {
+const d = class {
+  constructor(e) {
+    t(this, e), 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: ""
     }, 
@@ -27,18 +29,18 @@ const l = class {
       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 i = document.createElement("q2-optgroup");
+      return t.label && i.setAttribute("label", t.label), t.disabled && i.setAttribute("disabled", ""), 
+      t.options.length && t.options.forEach((t => i.appendChild(this.generateOption(t)))), 
+      i;
     }, this.generateOption = t => {
-      const o = document.createElement("q2-option"), {innerHTML: i, ...e} = t;
-      return i && (o.innerHTML = n(i)), Object.entries(e).forEach((([t, i]) => {
-        if (void 0 === i) return;
+      const i = document.createElement("q2-option"), {innerHTML: o, ...e} = t;
+      return o && (i.innerHTML = r(o)), Object.entries(e).forEach((([t, o]) => {
+        if (void 0 === o) return;
         // Convert component prop names to HTML attributes, e.g. someLongPropertyName to some-long-property-name.
                 const e = t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-        "boolean" == typeof i ? i && o.setAttribute(e, "") : o.setAttribute(e, i);
-      })), o;
+        "boolean" == typeof o ? o && i.setAttribute(e, "") : i.setAttribute(e, o);
+      })), i;
     }, 
     /**
          * Handles keyboard navigation within the action sheet dialog.
@@ -54,11 +56,11 @@ const l = class {
          * @param event - The keyboard event.
          */
     this.handleDialogKeydown = t => {
-      const {data: o} = this;
+      const {data: i} = this;
       // Only activate for list appearance with an option list
-            if (!o || "list" !== o.appearance || !this.optionListElement) return;
-      const {key: i, shiftKey: e} = t;
-      if ("Tab" !== i) return;
+            if (!i || "list" !== i.appearance || !this.optionListElement) return;
+      const {key: o, shiftKey: e} = t;
+      if ("Tab" !== o) 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 (e) 
       // Shift+Tab: if on close button
@@ -90,18 +92,34 @@ const l = class {
         t.preventDefault(), r.focus());
       }
     }, this.onCancel = t => {
-      var o, i;
+      var i, o;
       t.preventDefault();
       const {initialSelectedOptions: e} = this;
       this.hide({
-        value: null !== (i = null === (o = null == e ? void 0 : e[0]) || void 0 === o ? void 0 : o.value) && void 0 !== i ? i : "",
+        value: null !== (o = null === (i = null == e ? void 0 : e[0]) || void 0 === i ? void 0 : i.value) && void 0 !== o ? o : "",
         values: e,
         type: "cancel"
       });
     }, this.onClick = t => {
-      const o = t.target;
-      if (!(o instanceof HTMLElement)) return;
-      !!o.closest(".interior, q2-action-sheet") || this.onCancel(t);
+      const i = t.target;
+      if (!(i instanceof HTMLElement)) 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 i = t.detail || void 0;
+      if (null == i ? void 0 : i.error) return void this.hide({
+        error: i.error,
+        type: "confirm"
+      });
+      const o = void 0 !== this.selectedDate.value || void 0 !== this.selectedDate.rangeStart || void 0 !== this.selectedDate.rangeEnd;
+      this.hide({
+        ...this.selectedDate,
+        type: o ? "confirm" : "cancel"
+      });
     }, this.onListChange = t => {
       this.selectedOptions = t.detail;
     }, this.onListDone = () => {
@@ -111,45 +129,95 @@ const l = class {
       });
     }, 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: a, slotsHtml: r = []} = t;
-      return i(e, null, r.filter((t => "top" === t.slot)).map((t => i("div", {
-        innerHTML: c(t.html)
-      }))), i("div", {
+    this.renderDatePicker = ({data: t}) => {
+      const i = t.datePickerProps;
+      return o("div", {
+        class: "content date-picker-content",
+        ref: t => this.contentElement = t
+      }, o("q2-date-picker", {
+        _actionSheet: !0,
+        open: !0,
+        calendarLabel: i.calendarLabel,
+        closeDelay: i.closeDelay,
+        cutoffTime: i.cutoffTime,
+        daysOfWeekChecksum: i.daysOfWeekChecksum,
+        disclaimer: i.disclaimer,
+        endDate: i.endDate,
+        displayFormat: i.displayFormat,
+        invalidDates: i.invalidDates,
+        locale: i.locale,
+        mode: i.mode,
+        rangeEnd: i.rangeEnd,
+        rangeStart: i.rangeStart,
+        startDate: i.startDate,
+        validDates: i.validDates,
+        value: i.value,
+        onTctCancel: this.onDatePickerCancel,
+        onTctChange: this.onDatePickerChange,
+        onTctClose: this.onDatePickerClose
+      }));
+    }, this.renderList = ({data: t}) => {
+      var i;
+      const {listProps: e, slotsHtml: s = []} = t;
+      let r = !1;
+      const c = s.map((t => {
+        var i;
+        const o = n(t.html), e = document.createElement("div");
+        e.innerHTML = o;
+        const a = !0 === (null === (i = e.firstElementChild) || void 0 === i ? void 0 : i.hasAttribute("data-action-sheet-scroll"));
+        return "top" === t.slot && a && (r = !0), {
+          ...t,
+          html: o,
+          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 = c.length - 1; t >= 0; t--) {
+        const i = c[t];
+        "bottom" === i.slot && (i.scrolls && (d = !0), i.scrolls = d);
+      }
+      const renderSlots = (t, i) => c.filter((o => o.slot === t && o.scrolls === i)).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: a.multiple,
-        label: (null === (o = this.data) || void 0 === o ? void 0 : o.title) || this.title,
-        noSelect: a.noSelect,
+        multiple: e.multiple,
+        label: (null === (i = this.data) || void 0 === i ? void 0 : i.title) || this.title,
+        noSelect: e.noSelect,
         onChange: this.onListChange,
         onPopoverState: this.onListPopoverStateChange,
-        selectedOptions: a.selectedOptions
-      }, i("slot", null))), i("footer", null, a.multiple && i("q2-btn", {
+        selectedOptions: e.selectedOptions
+      }, o("slot", null)), renderSlots("bottom", !0)), o("footer", null, e.multiple && o("q2-btn", {
         ref: t => this.doneButtonElement = t,
         "test-id": "btnDone",
-        intent: "workflow-primary",
+        intent: "primary",
         onClick: this.onListDone
-      }, s("tecton.element.actionSheet.done"))), r.filter((t => "bottom" === t.slot)).map((t => i("div", {
-        innerHTML: c(t.html)
-      }))));
-    }, this.renderMessage = ({data: t}) => i("q2-message", {
+      }, a("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), 
@@ -163,9 +231,10 @@ const l = class {
     values: [],
     type: "confirm"
   }) {
-    d(this, [ "close", "tctClose" ], t), this.renderStatus = "is-closing", this.dialogElement.addEventListener("transitionend", (() => {
+    c(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());
@@ -174,27 +243,39 @@ const l = class {
     });
   }
   async show() {
-    this.showPreHook(), await r(), 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 s(), 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: i} = t;
+      i instanceof KeyboardEvent ? this.optionListElement.handleExternalKeydown(i) : 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 => {
@@ -211,10 +292,13 @@ const l = class {
     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, i = (null == t ? void 0 : t.title) || this.title || !this.hideClose, e = (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;
@@ -226,44 +310,45 @@ const l = class {
      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": i ? void 0 : e,
+      "aria-labelledby": i ? "title" : void 0,
+      onClick: this.onClick
+    }, o("div", {
+      key: "de6361cfa49ec69666b8b2c193dcc9cfc5ac4b0f",
       class: r
-    }, e && i("header", {
-      key: "d3bb667204c262a28363b71ffe6fba8209454391"
-    }, i("div", {
-      key: "8981cf55df99b607a49660fd6ecfe8ef827c100e",
+    }, i && 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
     })));
   }
   get hostElement() {
-    return a(this);
+    return e(this);
   }
 };
 
-l.style = '*{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}';
+d.style = '*{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}}';
 
-export { l as q2_action_sheet }
+export { d as q2_action_sheet }

package/dist/q2-tecton-elements/q2-avatar.entry.js

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