q2-tecton-elements 1.71.4 → 1.73.0

package/dist/components/q2-modal.js

@@ -1,6 +1,6 @@
-import { proxyCustomElement as t, HTMLElement as o, createEvent as e, h as a, transformTag as i } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as o, createEvent as a, h as i, transformTag as r } from "@stencil/core/internal/client";
 
-import { f as r, w as s, b as n } from "./index2.js";
+import { g as e, w as s, b as n } from "./index2.js";
 
 import { s as c } from "./sanitize-html-string.js";
 
@@ -16,8 +16,9 @@ import { d as m } from "./q2-resize-observer2.js";
 
 const b =  t(class extends o {
   constructor(t) {
-    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.tctClick = e(this, "tctClick", 7), 
-    this.tctClose = e(this, "tctClose", 7), this.tctOpen = e(this, "tctOpen", 7), this.tctReady = e(this, "tctReady", 3), 
+    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.tctBackdropClick = a(this, "tctBackdropClick", 7), 
+    this.tctClick = a(this, "tctClick", 7), this.tctClose = a(this, "tctClose", 7), 
+    this.tctOpen = a(this, "tctOpen", 7), this.tctReady = a(this, "tctReady", 3), 
     // #region Own Properties
     // to prevent background scroll when modal scrolls
     this.bodyOverflow = "", this.scheduledAfterRender = [], 
@@ -27,11 +28,16 @@ const b =  t(class extends o {
     // #endregion
     // #region Public Property API
     /**
-         * Controls visibility of the close button in the top right corner.
+         * Controls visibility of the close button and whether the modal can be dismissed with the backdrop or Escape key.
          */
     this.closable = !0, 
+    /**
+         * Whether the action buttons should take up the full width of the modal footer.
+         */
+    this.fullWidthButton = !0, 
     // #endregion
     // #region Local Methods
+    this.hasDialogTransition = () => (getComputedStyle(this.dialogElement).transitionDuration || "0s").split(",").some((t => parseFloat(t) > 0)), 
     this.initializeModal = () => {
       // limits 4 buttons in action slot
       this.hostElement.querySelectorAll('[slot="action"]').forEach(((t, o) => {
@@ -41,125 +47,136 @@ const b =  t(class extends o {
         top: 0
       }), this.debouncedScroll();
     }, this.onCancel = t => {
-      t.preventDefault(), this.closeModal();
+      t.preventDefault(), this.closable && this.closeModal();
     }, this.onClick = t => {
       t.stopPropagation();
-      const e = t.target;
-      if (!(e instanceof o)) return;
-      if ("action" === e.getAttribute("slot")) this.tctClick.emit({
-        value: e.dataset.value
-      }), this.onCancel(t); else {
-        if (!!e.closest(".interior , q2-modal")) return;
+      const a = t.target;
+      if (!(a instanceof o)) return;
+      if ("action" === a.getAttribute("slot")) this.tctClick.emit({
+        value: a.dataset.value
+      }), t.preventDefault(), this.closeModal(); else {
+        if (!!a.closest(".interior , q2-modal")) return;
+        if (this.tctBackdropClick.emit(), !this.closable) return;
         this.onCancel(t);
       }
     }, this.onContentScroll = () => {
       var t;
-      const o = this.contentElement.scrollHeight, e = Math.ceil(this.contentElement.scrollTop), a = Math.ceil((null === (t = this.contentElement.getBoundingClientRect()) || void 0 === t ? void 0 : t.height) || 0);
+      const o = this.contentElement.scrollHeight, a = Math.ceil(this.contentElement.scrollTop), i = Math.ceil((null === (t = this.contentElement.getBoundingClientRect()) || void 0 === t ? void 0 : t.height) || 0);
       // to show bottom gradient when more contents available
-      o > a ? o <= a + e ? this.contentElement.classList.remove("more-gradient") : this.contentElement.classList.add("more-gradient") : this.contentElement.classList.remove("more-gradient");
+      o > i ? o <= i + a ? this.contentElement.classList.remove("more-gradient") : this.contentElement.classList.add("more-gradient") : this.contentElement.classList.remove("more-gradient");
     };
   }
   // #endregion
   // #region Component Lifecycle Events
   disconnectedCallback() {
     var t;
-    this.dialogElement.removeEventListener("cancel", this.onCancel), null === (t = this.contentElement) || void 0 === t || t.removeEventListener("scroll", this.debouncedScroll);
+    null === (t = this.contentElement) || void 0 === t || t.removeEventListener("scroll", this.debouncedScroll);
   }
   componentDidLoad() {
-    this.dialogElement.addEventListener("cancel", this.onCancel), this.tctReady.emit(), 
-    this.bodyOverflow = document.body.style.overflow, this.debouncedScroll = r(this.onContentScroll, 100), 
+    this.tctReady.emit(), this.bodyOverflow = document.body.style.overflow, this.debouncedScroll = e(this.onContentScroll, 100), 
     this.contentElement.addEventListener("scroll", this.debouncedScroll);
   }
   componentDidRender() {
-    var t;
-    null === (t = this.scheduledAfterRender) || void 0 === t || t.forEach((t => t())), 
+    var t, o;
+    null === (t = this.dialogElement) || void 0 === t || t.setAttribute("closedby", this.closable ? "closerequest" : "none"), 
+    null === (o = this.scheduledAfterRender) || void 0 === o || o.forEach((t => t())), 
     this.scheduledAfterRender = [];
   }
   // #endregion
   // #region Public Methods API
   async closeModal(t) {
-    this.tctClose.emit(t), this.renderStatus = "is-closing", document.body.style.overflow = this.bodyOverflow, 
-    this.dialogElement.addEventListener("transitionend", (() => {
-      "is-closing" === this.renderStatus && (this.dialogElement.close(), this.renderStatus = null);
-    }), {
-      once: !0
-    });
+    var o;
+    if (!(null === (o = this.dialogElement) || void 0 === o ? void 0 : o.open)) return;
+    const a = "is-open" === this.renderStatus && this.hasDialogTransition();
+    document.body.style.overflow = this.bodyOverflow;
+    const completeClose = () => {
+      "is-closing" === this.renderStatus && (this.dialogElement.removeEventListener("transitionend", onTransitionComplete), 
+      this.dialogElement.removeEventListener("transitioncancel", onTransitionComplete), 
+      this.dialogElement.close(), this.renderStatus = null, this.tctClose.emit(t));
+    }, onTransitionComplete = t => {
+      t.target === this.dialogElement && "transform" === t.propertyName && completeClose();
+    };
+    a && (this.dialogElement.addEventListener("transitionend", onTransitionComplete), 
+    this.dialogElement.addEventListener("transitioncancel", onTransitionComplete)), 
+    this.renderStatus = "is-closing", a || completeClose();
   }
   async openModal(t) {
     var o;
-    (null === (o = this.dialogElement) || void 0 === o ? void 0 : o.open) || (this.tctOpen.emit(t), 
-    await s(), 
+    if (null === (o = this.dialogElement) || void 0 === o ? void 0 : o.open) return;
+    if (this.tctOpen.emit(t), await s(), 
     // overwrite the properties if option provided
     t && (this.title = (null == t ? void 0 : t.title) || this.title, this.description = (null == t ? void 0 : t.description) || this.description, 
     this.imageSrc = (null == t ? void 0 : t.imageSrc) || this.imageSrc, this.icon = (null == t ? void 0 : t.icon) || this.icon, 
     this.description = (null == t ? void 0 : t.description) || this.description), this.dialogElement.showModal(), 
     this.dialogElement.open = !0, document.body.style.overflow = "hidden", this.initializeModal(), 
-    this.renderStatus = "is-opening", this.dialogElement.addEventListener("transitionend", (() => {
-      "is-opening" === this.renderStatus && (this.renderStatus = "is-open");
-    }), {
-      once: !0
-    }));
+    this.renderStatus = "is-opening", !this.hasDialogTransition()) return void (this.renderStatus = "is-open");
+    const completeOpen = t => {
+      t.target === this.dialogElement && "transform" === t.propertyName && (this.dialogElement.removeEventListener("transitionend", completeOpen), 
+      this.dialogElement.removeEventListener("transitioncancel", completeOpen), "is-opening" === this.renderStatus && (this.renderStatus = "is-open"));
+    };
+    this.dialogElement.addEventListener("transitionend", completeOpen), this.dialogElement.addEventListener("transitioncancel", completeOpen);
   }
   // #endregion
   // #region Render Methods
   render() {
     const t = "" + (this.renderStatus || "");
-    return a("dialog", {
-      key: "92dc143e4337dbe56582ec8ef8f0568dd71e3e55",
+    return i("dialog", {
+      key: "67c724b2e94aa823893cc3477ffa364bc07f3c91",
       ref: t => this.dialogElement = t,
       class: t,
+      onCancel: this.onCancel,
       onClick: this.onClick
-    }, a("div", {
-      key: "8528e0443f56c88b0e3454cc5b33e5307c93b4b3",
+    }, i("div", {
+      key: "67b97fe323985b56db793d1cf939192bbfbd424e",
       class: "interior"
-    }, this.title && a("header", {
-      key: "58082ec96ee55a2054ced1d14c71ca048a9af336"
-    }, this.title && a("h2", {
-      key: "8ac56ee9d3eb84056faaa748a9a2d69ef946eeeb",
+    }, this.title && i("header", {
+      key: "ec0c82831007887e2baeddc50f2b8c0ec24b0d97"
+    }, this.title && i("h2", {
+      key: "10bbd7f9216ce221616acc4c77984aca582eba10",
       class: "title"
-    }, this.title), !!this.closable && a("q2-btn", {
-      key: "664890ce00ec76f4f4339f1b32579cfe95f8ad40",
+    }, this.title), !!this.closable && i("q2-btn", {
+      key: "8f801bf013c9015c3ae50543067393b26941d3d4",
       class: "btn-close",
       "test-id": "btnClose",
       onClick: this.onCancel,
       label: "tecton.element.modal.close",
       "hide-label": !0
-    }, a("q2-icon", {
-      key: "3c9349bf6456c8684ac87d3c6918820081e2657b",
+    }, i("q2-icon", {
+      key: "b546a86894aa6b5dd3576a33eadfa63e21a13590",
       type: "close"
-    }))), a("div", {
-      key: "76fa2465d4d60db5e0843274348b85eaf1a49ed6",
+    }))), i("div", {
+      key: "cdc674c3cee4bca6bda0c60ca2c9f08f83ab4440",
       class: "content",
       ref: t => this.contentElement = t
-    }, this.icon && a("div", {
-      key: "d9d7ae8b43dae09abbaf3fcfec61fdf66ab0f619",
+    }, this.icon && i("div", {
+      key: "8b8ffc983cecd2ddf1f912db7f00a6ed198a6b16",
       class: "icon"
-    }, a("q2-icon", {
-      key: "3db0ae939a529933b79018a23b88a7d429658a9a",
+    }, i("q2-icon", {
+      key: "cb3430c9216268ed7e8eeea85a83168b2d72ceb1",
       type: this.icon
-    })), this.imageSrc && a("div", {
-      key: "bf295b4c233610b87b6f75557f4c4d439d757c96",
+    })), this.imageSrc && i("div", {
+      key: "eab34ebad157a6c81a0e24bc726505e3541eac05",
       class: "image"
-    }, a("img", {
-      key: "ffcd4e115096ed4e48349ba28b00a261bdd78f7b",
+    }, i("img", {
+      key: "cdf8e7a1c381a099d811241a410998e16405bda4",
       src: this.imageSrc
-    })), n(this.hostElement, "content") && a("slot", {
-      key: "09342f081d5307fe109e247a6c2de7bca0fd6b0f",
+    })), n(this.hostElement, "content") && i("slot", {
+      key: "2674f81de64e3d6069e043f4c0a0db39d70f466a",
       name: "content"
-    }), this.description && a("p", {
-      key: "892e4550e230f47e26e757b6f483c2bee0f424ce",
+    }), this.description && i("p", {
+      key: "8dc2a0b031812a6e65012df8d78e5ff3373c117e",
       class: "description"
-    }, this.description), this.customMarkup && a("p", {
-      key: "625a6ee4350fe16c3589ebed630f86be8a420609",
+    }, this.description), this.customMarkup && i("p", {
+      key: "218d120d1109cff6a1aa79e5b76befbca0ca5857",
       class: "customMarkup",
       innerHTML: c(this.customMarkup)
-    })), a("footer", {
-      key: "7663cc739e8fe908b9a916e1ddbc0a0364c8023f"
-    }, a("q2-action-group", {
-      key: "a426f7228f0f4a7ae991fc65d221795279ec2530",
-      "full-width": !0
-    }, a("slot", {
-      key: "f6862c2074f18f31a9775f2de07aaa3e8904ac76",
+    })), i("footer", {
+      key: "ffc5c49fbaabde579fda002a25ac893e798c07de"
+    }, i("q2-action-group", {
+      key: "295cde61c6e9851aab36f3903f892a5775aca76c",
+      "full-width": this.fullWidthButton
+    }, i("slot", {
+      key: "e8ece0f36c2647515d82e3cd21b9c36faf731fd2",
       name: "action"
     })))));
   }
@@ -167,12 +184,13 @@ const b =  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);--comp-border-radius:var(--tct-modal-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-modal-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-modal-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-modal-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-modal-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-modal-color, inherit);--comp-dialog-padding:var(--tct-modal-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-modal-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-modal-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-modal-max-width, 600px);--comp-dialog-max-height:var(--tct-modal-max-height, 100vh);--comp-dialog-min-height:var(--tct-modal-min-height, 40vh);--comp-dialog-box-shadow:var(--tct-modal-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-modal-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-modal-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}dialog::backdrop{opacity:0;background:var(--tct-modal-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open]{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:1}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-modal-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}.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)}.content .icon{height:var(--tct-modal-icon-size, var(--app-scale-9x, 45px));margin:var(--tct-modal-icon-margin, var(--app-scale-2x, 10px));display:flex;justify-content:center}.content .icon q2-icon{width:var(--tct-modal-icon-size, var(--app-scale-9x, 45px))}.content .image{display:flex;justify-content:center}.content .image img{width:100%;border-radius:var(--tct-modal-image-border-radius, var(--app-border-radius-2, 8px))}.content .description{font-size:var(--tct-modal-description-font-size, var(--const-px-14, 14px))}.content.more-gradient{-webkit-mask-image:linear-gradient(to bottom, red 85%, transparent 100%);mask-image:linear-gradient(to bottom, red 85%, transparent 100%)}.interior{display:grid;min-height:var(--comp-dialog-min-height);grid-template-rows:auto 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.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}header{display:flex;justify-content:space-between;align-items:center}header .title{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-align:left;font-weight:var(--tct-modal-title-font-weight, 400);margin:0}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}';
+    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);--comp-border-radius:var(--tct-modal-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-modal-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-modal-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-modal-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-modal-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-modal-color, inherit);--comp-dialog-padding:var(--tct-modal-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-modal-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-modal-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-modal-max-width, 600px);--comp-dialog-max-height:var(--tct-modal-max-height, 100vh);--comp-dialog-min-height:var(--tct-modal-min-height, inherit);--comp-dialog-box-shadow:var(--tct-modal-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-modal-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-modal-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);max-height:var(--comp-dialog-max-height);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden}dialog::backdrop{opacity:0;background:var(--tct-modal-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open]{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:1}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-modal-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}.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)}.content .icon{height:var(--tct-modal-icon-size, var(--app-scale-9x, 45px));margin:var(--tct-modal-icon-margin, var(--app-scale-2x, 10px));display:flex;justify-content:center}.content .icon q2-icon{width:var(--tct-modal-icon-size, var(--app-scale-9x, 45px))}.content .image{display:flex;justify-content:center}.content .image img{width:100%;border-radius:var(--tct-modal-image-border-radius, var(--app-border-radius-2, 8px))}.content .description{font-size:var(--tct-modal-description-font-size, var(--const-px-14, 14px))}.content.more-gradient{-webkit-mask-image:linear-gradient(to bottom, red 85%, transparent 100%);mask-image:linear-gradient(to bottom, red 85%, transparent 100%)}.interior{box-sizing:border-box;display:grid;min-height:var(--comp-dialog-min-height);grid-template-rows:auto minmax(0, 1fr) auto;gap:var(--comp-dialog-gap);max-height:min(var(--comp-dialog-max-height), 100vh - 2 * var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.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}header{display:flex;justify-content:space-between;align-items:center}header .title{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-align:left;font-weight:var(--tct-modal-title-font-weight, 400);margin:0}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}footer{--tct-action-group-margin:var(--app-scale-2x, 10px) 0 0;align-self:end}@media screen and (max-height: 400px){.content{-webkit-mask-image:none;mask-image:none;overflow-y:visible}.interior{grid-template-rows:auto auto auto;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}.interior::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.interior::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.interior::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}}';
   }
 }, [ 257, "q2-modal", {
   closable: [ 516 ],
   customMarkup: [ 1, "custom-markup" ],
   description: [ 1 ],
+  fullWidthButton: [ 516, "full-width-button" ],
   icon: [ 1 ],
   imageSrc: [ 513, "image-src" ],
   title: [ 1537 ],
@@ -182,34 +200,34 @@ const b =  t(class extends o {
   openModal: [ 64 ]
 } ]);
 
-const f = b, defineCustomElement = function() {
+const g = b, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-modal", "q2-action-group", "q2-btn", "q2-icon", "q2-loading", "q2-resize-observer" ].forEach((t => {
     switch (t) {
      case "q2-modal":
-      customElements.get(i(t)) || customElements.define(i(t), b);
+      customElements.get(r(t)) || customElements.define(r(t), b);
       break;
 
      case "q2-action-group":
-      customElements.get(i(t)) || d();
+      customElements.get(r(t)) || d();
       break;
 
      case "q2-btn":
-      customElements.get(i(t)) || l();
+      customElements.get(r(t)) || l();
       break;
 
      case "q2-icon":
-      customElements.get(i(t)) || p();
+      customElements.get(r(t)) || p();
       break;
 
      case "q2-loading":
-      customElements.get(i(t)) || h();
+      customElements.get(r(t)) || h();
       break;
 
      case "q2-resize-observer":
-      customElements.get(i(t)) || m();
+      customElements.get(r(t)) || m();
     }
   }));
 };
 
-export { f as Q2Modal, defineCustomElement }
+export { g as Q2Modal, defineCustomElement }

package/dist/components/q2-month-picker.js

@@ -2,9 +2,9 @@ import { proxyCustomElement as t, HTMLElement as e, createEvent as n, h as o, tr
 
 import { l as i, o as r } from "./index2.js";
 
-import { d as s } from "./q2-btn2.js";
+import { d as c } from "./q2-btn2.js";
 
-import { d as c } from "./q2-icon2.js";
+import { d as s } from "./q2-icon2.js";
 
 import { d } from "./q2-loading2.js";
 
@@ -81,54 +81,54 @@ const l =  t(class extends e {
   // #region Render Methods
   render() {
     return o("div", {
-      key: "b7429b5ed21f7cda666f140a9a93ee643176979c",
+      key: "6e90b90e7720649681c2e95debe81d823095ccd0",
       class: "month-container",
       onKeyDown: this.onMonthKeydown
     }, o("div", {
-      key: "802900b16d0efa602df89edb22e174329736dca4",
+      key: "d1b83fce67fec3beacb73004a02d566f77a5729f",
       class: "navigation"
     }, o("q2-btn", {
-      key: "0a318088ab2eb826620c056246599f5b7803c51e",
+      key: "0772d6553ee3a75ca829755b3abc7d75ac0fa1aa",
       class: "year-btn",
       onClick: () => this.viewChange.emit({
         view: "year",
         selectedYear: this.year
       })
     }, o("span", {
-      key: "02018f884cb7b48fb581597fc7d5a2a323497668",
+      key: "689e2643923973447a38063260943bfaf98f673c",
       class: "year"
     }, this.year), o("q2-icon", {
-      key: "9ab23a381d4fedb5aca2ecee19eb975d76ff4465",
+      key: "590dcf2cf06e4980d70644b5be9e448cfe72abdc",
       class: "year-icon off",
       type: "chevron-down"
     })), o("div", {
-      key: "79dd4cd0864d051a4252c21ebbd697e0e75b0ec3",
+      key: "3001ad6ece1c302809e27df855c921698b840c56",
       class: "month-controller"
     }, o("div", {
-      key: "d94ad2ebfc317206bfff5b16861c52507a168e09",
+      key: "23397576c55f2f5ad32c248459ce986d38f25e5d",
       class: "cal-year-prev-next"
     }, o("q2-btn", {
-      key: "4d8b12fde9825bd5dca90012d42e73453f2cb777",
+      key: "8d38dd1bc2986e6c43b66c5cf3538adea921b259",
       label: i("tecton.element.calendar.previousYear"),
       "hide-label": !0,
       class: "cal-nav-btn prev-year",
       "test-id": "previousYearButton",
       onClick: () => this.selectYear(this.year - 1)
     }, o("q2-icon", {
-      key: "428b2feb8854e145bdbc88bdd2c6a2c25a3a50ce",
+      key: "55f8e258f83c0209b76efb3798478409ee246133",
       type: "arrow-left"
     })), o("q2-btn", {
-      key: "2f7ef439402c9788ae002a199813387a370e0ed3",
+      key: "578e4c4cd87cf3e25a09d55cb2c20ef0967d44bb",
       label: i("tecton.element.calendar.nextYear"),
       "hide-label": !0,
       class: "cal-nav-btn next-year",
       "test-id": "nextYearButton",
       onClick: () => this.selectYear(this.year + 1)
     }, o("q2-icon", {
-      key: "5931c20eac7a2268c6b945b336f44e143e9fe484",
+      key: "f2814f78597a04fca5617b3b59271d6c11221a5c",
       type: "arrow-right"
     }))))), o("div", {
-      key: "9e18ae0e86a741201eb2a8c6ff04b9007899cbae",
+      key: "7843d1db40f82116c3f82f544ad045a1f7dabadb",
       class: "month-list",
       onClick: this.onMonthSelection
     }, this.months.map(((t, e) => o("div", {
@@ -140,7 +140,7 @@ const l =  t(class extends e {
       "aria-label": t.label,
       tabindex: e === this.focusedIndex ? 0 : -1
     }, t.abbr))))), this.today && o("div", {
-      key: "8dfee8bcf4ee9b4137c9c8644be7f38f5794bf4d",
+      key: "71675483d7a2d770ad8f76b3540d47c10ebb0325",
       class: "today-label"
     }, i("tecton.element.calendar.today"), ": ", this.today));
   }
@@ -168,11 +168,11 @@ const h = l, defineCustomElement = function() {
       break;
 
      case "q2-btn":
-      customElements.get(a(t)) || s();
+      customElements.get(a(t)) || c();
       break;
 
      case "q2-icon":
-      customElements.get(a(t)) || c();
+      customElements.get(a(t)) || s();
       break;
 
      case "q2-loading":

package/dist/components/q2-mutation-observer.js

@@ -75,7 +75,7 @@ const n =  t(class extends e {
   // #region Render Methods
   render() {
     return i("slot", {
-      key: "e60ef36a762c6af123a91fe6c4def64179663098",
+      key: "8e33d51e7485e5477d3cf98cde060dd87effc2f7",
       onSlotchange: this.handleSlotChange
     });
   }

package/dist/components/q2-optgroup2.js

@@ -2,13 +2,13 @@ import { proxyCustomElement as t, HTMLElement as e, h as o, transformTag as r }
 
 import { b as i } from "./component.js";
 
-import { c as n, l as a } from "./index2.js";
+import { c as a, l as n } from "./index2.js";
 
 const s =  t(class extends e {
   constructor(t) {
     super(), !1 !== t && this.__registerHost(), this.__attachShadow(), 
     // #region Own Properties
-    this.guid = n(), 
+    this.guid = a(), 
     // #endregion
     // #region State Properties
     this.hidden = !1, 
@@ -55,20 +55,20 @@ const s =  t(class extends e {
   // #region Render Methods
   render() {
     return o("div", {
-      key: "4271765f1422cd33d73e1ed66b967994395bb4e1",
+      key: "829ae5ebec150734128c98343ddb8112de0ee21e",
       class: "q2-optgroup-container",
       hidden: this.hidden,
       "aria-labelledby": this.headerId,
       role: "group"
     }, o("div", {
-      key: "f5efb564a7049f7e8d78c0b6fa5749e239ea5133",
+      key: "6683155f922a2d15349f885aabac0bf9ee6a4575",
       class: "q2-optgroup-header",
       id: this.headerId
-    }, this.label && a(this.label) || ""), o("div", {
-      key: "9f932967082554e86e8048bba66a1493258f6d06",
+    }, this.label && n(this.label) || ""), o("div", {
+      key: "b974da306256b13283183fa03e4dc8bcc8be3f44",
       class: "q2-optgroup-options"
     }, o("slot", {
-      key: "d58e647529d66c50b6e0c9a79705128f0ffdf806"
+      key: "2f0035aad12309be2c5c4ea3125077cc704e65e4"
     })));
   }
   get hostElement() {