q2-tecton-elements 1.71.1 → 1.72.0

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

@@ -1,13 +1,13 @@
 import { r as t, c as a, h as o, g as i } from "./index-Cqkz7Bnm.js";
 
-import { e, w as r, h as s } from "./index-Cps4jSQM.js";
+import { e as r, w as e, h as s } from "./index-DJw6Feh0.js";
 
 import { s as n } from "./sanitize-html-string-DPHNpMWE.js";
 
-const d = class {
+const c = class {
   constructor(o) {
-    t(this, o), this.tctClick = a(this, "tctClick", 7), this.tctClose = a(this, "tctClose", 7), 
-    this.tctOpen = a(this, "tctOpen", 7), this.tctReady = a(this, "tctReady", 3), 
+    t(this, o), 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 = [], 
@@ -17,11 +17,16 @@ const d = class {
     // #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, a) => {
@@ -31,15 +36,16 @@ const d = class {
         top: 0
       }), this.debouncedScroll();
     }, this.onCancel = t => {
-      t.preventDefault(), this.closeModal();
+      t.preventDefault(), this.closable && this.closeModal();
     }, this.onClick = t => {
       t.stopPropagation();
       const a = t.target;
       if (!(a instanceof HTMLElement)) return;
       if ("action" === a.getAttribute("slot")) this.tctClick.emit({
         value: a.dataset.value
-      }), this.onCancel(t); else {
+      }), t.preventDefault(), this.closeModal(); else {
         if (!!a.closest(".interior , q2-modal")) return;
+        if (this.tctBackdropClick.emit(), !this.closable) return;
         this.onCancel(t);
       }
     }, this.onContentScroll = () => {
@@ -53,103 +59,113 @@ const d = class {
   // #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 = e(this.onContentScroll, 100), 
+    this.tctReady.emit(), this.bodyOverflow = document.body.style.overflow, this.debouncedScroll = r(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, a;
+    null === (t = this.dialogElement) || void 0 === t || t.setAttribute("closedby", this.closable ? "closerequest" : "none"), 
+    null === (a = this.scheduledAfterRender) || void 0 === a || a.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 a;
+    if (!(null === (a = this.dialogElement) || void 0 === a ? void 0 : a.open)) return;
+    const o = "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();
+    };
+    o && (this.dialogElement.addEventListener("transitionend", onTransitionComplete), 
+    this.dialogElement.addEventListener("transitioncancel", onTransitionComplete)), 
+    this.renderStatus = "is-closing", o || completeClose();
   }
   async openModal(t) {
     var a;
-    (null === (a = this.dialogElement) || void 0 === a ? void 0 : a.open) || (this.tctOpen.emit(t), 
-    await r(), 
+    if (null === (a = this.dialogElement) || void 0 === a ? void 0 : a.open) return;
+    if (this.tctOpen.emit(t), await e(), 
     // 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 o("dialog", {
-      key: "92dc143e4337dbe56582ec8ef8f0568dd71e3e55",
+      key: "efa04c4cab9624ecc331124fbc54bba9b0b67f23",
       ref: t => this.dialogElement = t,
       class: t,
+      onCancel: this.onCancel,
       onClick: this.onClick
     }, o("div", {
-      key: "8528e0443f56c88b0e3454cc5b33e5307c93b4b3",
+      key: "81e9fa70f3c4a687fc543250d5d7c8c351968aba",
       class: "interior"
     }, this.title && o("header", {
-      key: "58082ec96ee55a2054ced1d14c71ca048a9af336"
+      key: "30eb57f4344a623ecbfa36a05f19cdbf2012cf55"
     }, this.title && o("h2", {
-      key: "8ac56ee9d3eb84056faaa748a9a2d69ef946eeeb",
+      key: "a3d880ddf32ef43e2587c47152a28b0a861a60e4",
       class: "title"
     }, this.title), !!this.closable && o("q2-btn", {
-      key: "664890ce00ec76f4f4339f1b32579cfe95f8ad40",
+      key: "90ae641a244ca09a2de917331d5669ceddef24e9",
       class: "btn-close",
       "test-id": "btnClose",
       onClick: this.onCancel,
       label: "tecton.element.modal.close",
       "hide-label": !0
     }, o("q2-icon", {
-      key: "3c9349bf6456c8684ac87d3c6918820081e2657b",
+      key: "530d9b90eb044e7eb0b52cb877ee018e859014ec",
       type: "close"
     }))), o("div", {
-      key: "76fa2465d4d60db5e0843274348b85eaf1a49ed6",
+      key: "a643bd41ea14bb6238bebaff18d608bb1116c4d5",
       class: "content",
       ref: t => this.contentElement = t
     }, this.icon && o("div", {
-      key: "d9d7ae8b43dae09abbaf3fcfec61fdf66ab0f619",
+      key: "e5d99acc00768c6f235a7108903d9992725c08f2",
       class: "icon"
     }, o("q2-icon", {
-      key: "3db0ae939a529933b79018a23b88a7d429658a9a",
+      key: "97ffba3484e2bf0901a1520a7a8e8099cc03c3ba",
       type: this.icon
     })), this.imageSrc && o("div", {
-      key: "bf295b4c233610b87b6f75557f4c4d439d757c96",
+      key: "5426e6276902a70be2b6cf64849580587dfa6368",
       class: "image"
     }, o("img", {
-      key: "ffcd4e115096ed4e48349ba28b00a261bdd78f7b",
+      key: "00bb517674151bce32307c0cae70e1cae45da7a2",
       src: this.imageSrc
     })), s(this.hostElement, "content") && o("slot", {
-      key: "09342f081d5307fe109e247a6c2de7bca0fd6b0f",
+      key: "1ca0b130e835e24b3891d7ca2870105b538ba14d",
       name: "content"
     }), this.description && o("p", {
-      key: "892e4550e230f47e26e757b6f483c2bee0f424ce",
+      key: "86d27f942231bff0754befb1abc2b1108f16f1ad",
       class: "description"
     }, this.description), this.customMarkup && o("p", {
-      key: "625a6ee4350fe16c3589ebed630f86be8a420609",
+      key: "f25747c08a3c49fe8388f1528b70490e92ee01fb",
       class: "customMarkup",
       innerHTML: n(this.customMarkup)
     })), o("footer", {
-      key: "7663cc739e8fe908b9a916e1ddbc0a0364c8023f"
+      key: "d823aa857d2f003ac671d6cf93b1a0b63dabdaff"
     }, o("q2-action-group", {
-      key: "a426f7228f0f4a7ae991fc65d221795279ec2530",
-      "full-width": !0
+      key: "31c7fa360c61861b26b26e38ffe241760f3c5cb9",
+      "full-width": this.fullWidthButton
     }, o("slot", {
-      key: "f6862c2074f18f31a9775f2de07aaa3e8904ac76",
+      key: "9988c2db9d3635d05c66c2b5e3ed6745a9bfaa1c",
       name: "action"
     })))));
   }
@@ -158,6 +174,6 @@ const d = class {
   }
 };
 
-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);--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)}';
+c.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);--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)}}';
 
-export { d as q2_modal }
+export { c as q2_modal }

package/dist/q2-tecton-elements/q2-month-picker.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as n, h as e, g as o } from "./index-Cqkz7Bnm.js";
 
-import { l as a, o as i } from "./index-Cps4jSQM.js";
+import { l as a, o as i } from "./index-DJw6Feh0.js";
 
 const r = class {
   constructor(e) {

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

@@ -1,12 +1,12 @@
-import { r as t, h as o, g as e } from "./index-Cqkz7Bnm.js";
+import { r as t, h as e, g as o } from "./index-Cqkz7Bnm.js";
 
 import { b as r } from "./component-DaQM9u3s.js";
 
-import { c as i, l as a } from "./index-Cps4jSQM.js";
+import { c as i, l as a } from "./index-DJw6Feh0.js";
 
 const n = class {
-  constructor(o) {
-    t(this, o), 
+  constructor(e) {
+    t(this, e), 
     // #region Own Properties
     this.guid = i(), 
     // #endregion
@@ -39,8 +39,8 @@ const n = class {
   // #endregion
   // #region Watchers
   disabledWatcher(t) {
-    this.options.forEach((o => {
-      o.disabledGroup = !!t;
+    this.options.forEach((e => {
+      e.disabledGroup = !!t;
     }));
   }
   // #endregion
@@ -54,25 +54,25 @@ const n = class {
   // #endregion
   // #region Render Methods
   render() {
-    return o("div", {
+    return e("div", {
       key: "4271765f1422cd33d73e1ed66b967994395bb4e1",
       class: "q2-optgroup-container",
       hidden: this.hidden,
       "aria-labelledby": this.headerId,
       role: "group"
-    }, o("div", {
+    }, e("div", {
       key: "f5efb564a7049f7e8d78c0b6fa5749e239ea5133",
       class: "q2-optgroup-header",
       id: this.headerId
-    }, this.label && a(this.label) || ""), o("div", {
+    }, this.label && a(this.label) || ""), e("div", {
       key: "9f932967082554e86e8048bba66a1493258f6d06",
       class: "q2-optgroup-options"
-    }, o("slot", {
+    }, e("slot", {
       key: "d58e647529d66c50b6e0c9a79705128f0ffdf806"
     })));
   }
   get hostElement() {
-    return e(this);
+    return o(this);
   }
   static get watchers() {
     return {

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

@@ -1,6 +1,6 @@
 import { r as t, c as i, h as e, H as o, g as a } from "./index-Cqkz7Bnm.js";
 
-import { m as s, l as n } from "./index-Cps4jSQM.js";
+import { m as s, l as n } from "./index-DJw6Feh0.js";
 
 import { b as r } from "./component-DaQM9u3s.js";
 

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

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, g as o } from "./index-Cqkz7Bnm.js";
 
-import { c as s, o as r, i as a, l as n } from "./index-Cps4jSQM.js";
+import { c as s, o as r, i as a, l as n } from "./index-DJw6Feh0.js";
 
 const c = class {
   constructor(i) {

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

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, g as n } from "./index-Cqkz7Bnm.js";
 
-import { n as a, o as s, i as o, b as r, l as c } from "./index-Cps4jSQM.js";
+import { n as a, o as s, i as o, b as r, l as c } from "./index-DJw6Feh0.js";
 
 import { m as h } from "./mirror-emit-DUjY_ucm.js";
 

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

@@ -1,6 +1,6 @@
 import { r as t, c as o, h as i, g as e } from "./index-Cqkz7Bnm.js";
 
-import { a, o as r, i as n, w as c, l as s } from "./index-Cps4jSQM.js";
+import { a, o as r, i as n, w as c, l as s } from "./index-DJw6Feh0.js";
 
 import { m as l } from "./mirror-emit-DUjY_ucm.js";
 
@@ -381,6 +381,6 @@ const v = class {
   }
 };
 
-v.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}}}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.popover-top-container{position:sticky;top:0;z-index:5}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-btn-box-shadow:var(--tct-pill-btn-box-shadow, none);--comp-btn-backdrop-filter:var(--tct-pill-btn-backdrop-filter, none);--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-letter-spacing:var(--tct-pill-btn-letter-spacing, inherit);--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--tct-pill-active-btn-color, var(--comp-btn-background));--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-box-shadow:var(--tct-pill-active-btn-box-shadow, var(--tct-pill-btn-box-shadow, none));--comp-active-btn-backdrop-filter:var(--tct-pill-active-btn-backdrop-filter, none);--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}.btn-wrapper.has-options,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]:not([active=false])) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #0079c1));--comp-active-btn-box-shadow:var(--tct-pill-primary-active-btn-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-primary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #0079c1));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #b3c2cc));--comp-active-btn-box-shadow:var(--tct-pill-secondary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-secondary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #b3c2cc));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #e8f5fc));--comp-active-btn-box-shadow:var(--tct-pill-tertiary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-tertiary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #e8f5fc));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);box-shadow:var(--comp-btn-box-shadow);backdrop-filter:var(--comp-btn-backdrop-filter);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));letter-spacing:var(--comp-btn-letter-spacing);padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, var(--const-px-14, 14px))));font-weight:var(--tct-pill-btn-font-weight, 400);color:var(--comp-btn-color);display:flex;align-items:center;gap:var(--app-scale-1x, 5px);width:100%;text-align:start}.btn-primary ::slotted(q2-icon[slot=decorator]){--tct-icon-size:1em;--tct-icon-stroke-primary:var(--tct-pill-decorator-icon-primary-stroke, var(--comp-btn-color));--tct-icon-stroke-secondary:var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-btn-color))}.btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}.btn-primary:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}.btn-primary:hover{background:var(--comp-hover-btn-background)}.has-options .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]:not([active=false])) .btn-primary{background:var(--comp-active-btn-background);box-shadow:var(--comp-active-btn-box-shadow);backdrop-filter:var(--comp-active-btn-backdrop-filter);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]:not([active=false])) .btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}:host([active]:not([active=false])) .btn-primary ::slotted(q2-icon[slot=decorator]){--tct-icon-stroke-primary:var(--tct-pill-active-decorator-icon-primary-stroke, var(--tct-pill-decorator-icon-primary-stroke, var(--comp-active-btn-color)));--tct-icon-stroke-secondary:var(--tct-pill-active-decorator-icon-secondary-stroke, var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-active-btn-color)))}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}.btn-close:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-close{color:var(--comp-active-btn-color)}.has-options .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--tct-icon-stroke-primary:var(--tct-pill-icon-stroke, currentcolor);--tct-icon-stroke-width:var(--tct-pill-icon-stroke-width, inherit);width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]:not([active=false])) button.btn-close:focus,:host([active]:not([active=false])) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}:host([borderless]:not([borderless=false])) button{border-style:none}';
+v.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}}}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.popover-top-container{position:sticky;top:0;z-index:5}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-btn-box-shadow:var(--tct-pill-btn-box-shadow, none);--comp-btn-backdrop-filter:var(--tct-pill-btn-backdrop-filter, none);--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-letter-spacing:var(--tct-pill-btn-letter-spacing, inherit);--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--tct-pill-active-btn-color, var(--comp-btn-background));--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-box-shadow:var(--tct-pill-active-btn-box-shadow, var(--tct-pill-btn-box-shadow, none));--comp-active-btn-backdrop-filter:var(--tct-pill-active-btn-backdrop-filter, none);--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}.btn-wrapper.has-options,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]:not([active=false])) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #0079c1));--comp-active-btn-box-shadow:var(--tct-pill-primary-active-btn-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-primary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #0079c1));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #b3c2cc));--comp-active-btn-box-shadow:var(--tct-pill-secondary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-secondary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #b3c2cc));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #e8f5fc));--comp-active-btn-box-shadow:var(--tct-pill-tertiary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-tertiary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #e8f5fc));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);box-shadow:var(--comp-btn-box-shadow);backdrop-filter:var(--comp-btn-backdrop-filter);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));letter-spacing:var(--comp-btn-letter-spacing);padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, var(--const-px-14, 14px))));font-weight:var(--tct-pill-btn-font-weight, 400);color:var(--comp-btn-color);display:flex;align-items:center;gap:var(--app-scale-1x, 5px);width:100%;text-align:start}.btn-primary ::slotted(q2-icon[slot=decorator]){--tct-icon-size:1em;--tct-icon-stroke-primary:var(--tct-pill-decorator-icon-primary-stroke, var(--comp-btn-color));--tct-icon-stroke-secondary:var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-btn-color))}.btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}.btn-primary:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}.btn-primary:hover{background:var(--comp-hover-btn-background)}.has-options .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]:not([active=false])) .btn-primary{background:var(--comp-active-btn-background);box-shadow:var(--comp-active-btn-box-shadow);backdrop-filter:var(--comp-active-btn-backdrop-filter);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]:not([active=false])) .btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}:host([active]:not([active=false])) .btn-primary ::slotted(q2-icon[slot=decorator]){--tct-icon-stroke-primary:var(--tct-pill-active-decorator-icon-primary-stroke, var(--tct-pill-decorator-icon-primary-stroke, var(--comp-active-btn-color)));--tct-icon-stroke-secondary:var(--tct-pill-active-decorator-icon-secondary-stroke, var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-active-btn-color)))}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}.btn-close:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-close{color:var(--comp-active-btn-color)}.has-options .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--tct-icon-stroke-primary:var(--tct-pill-icon-stroke, currentcolor);--tct-icon-stroke-width:var(--tct-pill-icon-stroke-width, inherit);width:var(--tct-pill-icon-size, var(--t-pill-icon-size, var(--const-px-18, 18px)));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, var(--const-px-18, 18px)));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]:not([active=false])) button.btn-close:focus,:host([active]:not([active=false])) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}:host([borderless]:not([borderless=false])) button{border-style:none}';
 
 export { v as q2_pill }

package/dist/q2-tecton-elements/q2-radio-group.entry.js

@@ -1,20 +1,31 @@
-import { r as t, c as r, h as a, F as o, g as i } from "./index-Cqkz7Bnm.js";
+import { r as t, c as r, h as o, F as i, g as a } from "./index-Cqkz7Bnm.js";
 
-import { c as e, o as n, i as s, r as d } from "./index-Cps4jSQM.js";
+import { c as e, o as n, i as s, r as d } from "./index-DJw6Feh0.js";
 
 import { m as l } from "./mirror-emit-DUjY_ucm.js";
 
-const p = class {
-  constructor(a) {
-    t(this, a), this.change = r(this, "change", 7), this.tctChange = r(this, "tctChange", 7), 
+const c = class {
+  constructor(o) {
+    t(this, o), this.change = r(this, "change", 7), this.tctChange = r(this, "tctChange", 7), 
     // #region Own Properties
     this._id = `radio-group-${e()}`, 
     // #endregion
+    // #region State Properties
+    this.responsiveOrientation = "vertical", 
+    // #endregion
     // #region Public Property API
     /** Determines if all radios in the group are put into a `disabled` state. */
     this.disabled = !1, 
     /** Determines if the component should display in an errant state. */
     this.hasError = !1, 
+    /** The layout direction of radio options when `tileLayout` is not enabled. */
+    this.orientation = "vertical", 
+    /**
+         * The width, in pixels, below which a horizontal non-tile layout displays vertically.
+         *
+         * @info The component determines this based on its own width, not the browser window.
+         */
+    this.orientationThreshold = 440, 
     /** Provides alignment direction for tile-style radio group. */
     this.tileAlignment = "center", this.checkedRadioExists = () => {
       // Returns first checked individual q2-radio or undefined if none are set to checked={true}
@@ -23,6 +34,9 @@ const p = class {
             !this.value && t ? this.value = t.value : this.value || t || 
       // if no radios are meant to be checked, then assign first radio tabIndex of 0
       this.radioElements.length && (this.radioElements[0].tabIndex = 0);
+    }, this.handleResize = t => {
+      const r = t.detail.entries[0].contentRect.width;
+      this.responsiveOrientation = r < this.orientationThreshold ? "vertical" : "horizontal";
     }, this.onInnerRadioChange = t => {
       t.stopImmediatePropagation(), this.readonly || l(this, [ "change", "tctChange" ], {
         value: t.detail.value
@@ -55,20 +69,20 @@ const p = class {
   }
   keydownHandler(t) {
     const r = t.target.getAttribute("value") || this.value;
-    let a = this.radioElements.findIndex((a => a === t.target || a.getAttribute("value") === r)), o = 0;
+    let o = this.radioElements.findIndex((o => o === t.target || o.getAttribute("value") === r)), i = 0;
     switch (t.key) {
      case "ArrowLeft":
      case "ArrowUp":
-      o = -1;
+      i = -1;
       break;
 
      case "ArrowRight":
      case "ArrowDown":
-      o = 1;
+      i = 1;
     }
-    -1 !== a && 0 !== o && (a += o, a = o < 0 ? Math.max(0, a) : Math.min(this.radioElements.length - 1, a), 
-    t.preventDefault(), this.readonly || (this.value = this.radioElements[a].value), 
-    this.radioElements[a].dispatchEvent(new FocusEvent("focus")));
+    -1 !== o && 0 !== i && (o += i, o = i < 0 ? Math.max(0, o) : Math.min(this.radioElements.length - 1, o), 
+    t.preventDefault(), this.readonly || (this.value = this.radioElements[o].value), 
+    this.radioElements[o].dispatchEvent(new FocusEvent("focus")));
   }
   // #endregion
   // #region Public Methods API
@@ -115,6 +129,9 @@ const p = class {
   }
   // #endregion
   // #region Local Methods
+  get computedOrientation() {
+    return "horizontal" === this.orientation ? this.responsiveOrientation : "vertical";
+  }
   get inputId() {
     return this._id;
   }
@@ -124,43 +141,47 @@ const p = class {
   inputDom() {
     if (this.tileLayout) {
       const {tileAlignment: t} = this, r = [ "left", "center", "right" ].includes(t) ? t : "center";
-      return a("div", {
+      return o("div", {
         class: `tile-container ${r}`
-      }, a("div", {
+      }, o("div", {
         class: "options-container"
-      }, a("slot", null)));
+      }, o("slot", null)));
     }
-    return a("div", {
-      class: "options-container"
-    }, a("slot", null));
+    return o("div", {
+      class: `options-container ${this.computedOrientation}`
+    }, o("slot", null));
   }
   // #endregion
   // #region Render Methods
   render() {
-    const t = this.label || this.optional || this.readonly, {hasError: r} = this, i = t && !this.hideLabel || r;
-    return a(o, {
-      key: "9aadfcdafda1190aac1d1d23f02d73d9d0982cfb"
-    }, i && a("div", {
-      key: "80ffd1095a810f95e89b839bd4c9e9b10b10c56a",
+    const t = this.label || this.optional || this.readonly, {hasError: r} = this, a = t && !this.hideLabel || r;
+    return o(i, {
+      key: "25ec8b2089b54a5d968c3cfb99a1740c5dcbd0d0"
+    }, a && o("div", {
+      key: "1ff216a3e27dd4284dbb2f0300e25728f376df62",
       class: "label-row"
-    }, t && !this.hideLabel && a("div", {
-      key: "82663c3dc58235e5a15c6a96d61c0f899e51b34c",
+    }, t && !this.hideLabel && o("div", {
+      key: "462c3833b83b524426ef2f937e0bf60c1cc841f7",
       class: "group-legend"
-    }, d(this)), r && a("q2-icon", {
-      key: "75aab19da924c83a43c311c8718213e554e1e41d",
+    }, d(this)), r && o("q2-icon", {
+      key: "249e09338abad9e55fa472bcc9807ce2297cd4c3",
       type: "error",
       "test-id": "iconError"
-    })), a("fieldset", {
-      key: "df81b71c57ac1c2b7812b1e12dc4f85b95563895",
+    })), o("fieldset", {
+      key: "2085294bc3fc10c2f3cf20e6a1a0553cb0829e7d",
       onChange: this.onInnerRadioChange,
       "aria-invalid": r ? `${r}` : void 0
-    }, t && a("legend", {
-      key: "c3aff2496cb12cfaa774aac545f399508f0a679c",
+    }, t && o("legend", {
+      key: "ad2686c2e07d168a0cf1cbe0baf844121add6ecd",
       class: "sr-only"
-    }, d(this)), this.inputDom()));
+    }, d(this)), o("q2-resize-observer", {
+      key: "e183977bae5484f38356b17b274d6e3125d4d603",
+      onTctResize: this.handleResize,
+      disabled: this.tileLayout || "horizontal" !== this.orientation
+    }, this.inputDom())));
   }
   get hostElement() {
-    return i(this);
+    return a(this);
   }
   static get watchers() {
     return {
@@ -186,6 +207,6 @@ const p = class {
   }
 };
 
-p.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}}}:host{--comp-default-radio-group-margin:var(--tct-radio-group-margin-top, var(--t-radio-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-radio-group-margin-bottom, var(--t-radio-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-radio-group-margin, var(--comp-default-radio-group-margin))}fieldset{padding:var(--tct-radio-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";column-gap:var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));color:var(--tct-radio-group-label-font-color, inherit);font-size:var(--tct-radio-group-label-font-size, inherit);font-weight:var(--tct-radio-group-label-font-weight, 600);text-transform:var(--tct-radio-group-label-text-transform, none);letter-spacing:var(--tct-radio-group-label-letter-spacing, inherit)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-radio-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-radio-group-label-optional-color, var(--t-radio-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-radio-group-label-optional-font-size, var(--t-radio-group-label-optional-font-size, var(--const-px-12, 12px)));font-weight:var(--tct-radio-group-label-optional-font-weight, var(--t-radio-group-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-0x, 0px)));border-width:var(--tct-radio-group-border-width, 1px);border-color:transparent;border-style:solid;border-radius:var(--tct-radio-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .options-container{border-color:var(--tct-radio-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .options-container{border-color:transparent}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{gap:var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));justify-content:inherit}';
+c.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}}}:host{--comp-default-radio-group-margin:var(--tct-radio-group-margin-top, var(--t-radio-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-radio-group-margin-bottom, var(--t-radio-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-radio-group-margin, var(--comp-default-radio-group-margin))}fieldset{padding:var(--tct-radio-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";column-gap:var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));color:var(--tct-radio-group-label-font-color, inherit);font-size:var(--tct-radio-group-label-font-size, inherit);font-weight:var(--tct-radio-group-label-font-weight, 600);text-transform:var(--tct-radio-group-label-text-transform, none);letter-spacing:var(--tct-radio-group-label-letter-spacing, inherit);line-height:var(--tct-radio-group-label-line-height, inherit)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-radio-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-radio-group-label-optional-color, var(--t-radio-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-radio-group-label-optional-font-size, var(--t-radio-group-label-optional-font-size, var(--const-px-12, 12px)));font-weight:var(--tct-radio-group-label-optional-font-weight, var(--t-radio-group-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-0x, 0px)));border-width:var(--tct-radio-group-border-width, 1px);border-color:transparent;border-style:solid;border-radius:var(--tct-radio-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .options-container{border-color:var(--tct-radio-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .options-container{border-color:transparent}.options-container.horizontal,.options-container.vertical{display:flex;flex-wrap:wrap;justify-content:var(--tct-radio-group-justify-content, start)}.options-container.horizontal{flex-direction:row;column-gap:var(--tct-radio-group-horizontal-gap, var(--app-scale-4x, 20px))}.options-container.vertical{flex-direction:column}.options-container.vertical ::slotted(q2-radio:not(:first-child)){position:relative}.options-container.vertical ::slotted(q2-radio:not(:first-child))::before{border-block-start:var(--tct-radio-group-separator-width, 0) solid var(--tct-radio-group-separator-color, var(--t-gray-12, #d9d9d9));content:"";inset-block-start:calc(var(--tct-radio-group-separator-width, 0) / -2);inset-inline:0;pointer-events:none;position:absolute}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{border-color:var(--tct-radio-group-tile-border-color, var(--t-gray-13, #e6e6e6));border-radius:var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px));flex-grow:0;flex-wrap:nowrap;justify-content:inherit;overflow:visible}:host([has-error]) .tile-container .options-container{border-color:var(--tct-radio-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}';
 
-export { p as q2_radio_group }
+export { c as q2_radio_group }