q2-tecton-elements 1.72.0 → 1.73.0

package/dist/components/q2-modal.js

@@ -1,12 +1,12 @@
 import { proxyCustomElement as t, HTMLElement as o, createEvent as a, h as i, transformTag as r } from "@stencil/core/internal/client";
 
-import { f as e, 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";
 
-import { d as l } from "./q2-action-group2.js";
+import { d } from "./q2-action-group2.js";
 
-import { d } from "./q2-btn2.js";
+import { d as l } from "./q2-btn2.js";
 
 import { d as p } from "./q2-icon2.js";
 
@@ -121,62 +121,62 @@ const b =  t(class extends o {
   render() {
     const t = "" + (this.renderStatus || "");
     return i("dialog", {
-      key: "efa04c4cab9624ecc331124fbc54bba9b0b67f23",
+      key: "67c724b2e94aa823893cc3477ffa364bc07f3c91",
       ref: t => this.dialogElement = t,
       class: t,
       onCancel: this.onCancel,
       onClick: this.onClick
     }, i("div", {
-      key: "81e9fa70f3c4a687fc543250d5d7c8c351968aba",
+      key: "67b97fe323985b56db793d1cf939192bbfbd424e",
       class: "interior"
     }, this.title && i("header", {
-      key: "30eb57f4344a623ecbfa36a05f19cdbf2012cf55"
+      key: "ec0c82831007887e2baeddc50f2b8c0ec24b0d97"
     }, this.title && i("h2", {
-      key: "a3d880ddf32ef43e2587c47152a28b0a861a60e4",
+      key: "10bbd7f9216ce221616acc4c77984aca582eba10",
       class: "title"
     }, this.title), !!this.closable && i("q2-btn", {
-      key: "90ae641a244ca09a2de917331d5669ceddef24e9",
+      key: "8f801bf013c9015c3ae50543067393b26941d3d4",
       class: "btn-close",
       "test-id": "btnClose",
       onClick: this.onCancel,
       label: "tecton.element.modal.close",
       "hide-label": !0
     }, i("q2-icon", {
-      key: "530d9b90eb044e7eb0b52cb877ee018e859014ec",
+      key: "b546a86894aa6b5dd3576a33eadfa63e21a13590",
       type: "close"
     }))), i("div", {
-      key: "a643bd41ea14bb6238bebaff18d608bb1116c4d5",
+      key: "cdc674c3cee4bca6bda0c60ca2c9f08f83ab4440",
       class: "content",
       ref: t => this.contentElement = t
     }, this.icon && i("div", {
-      key: "e5d99acc00768c6f235a7108903d9992725c08f2",
+      key: "8b8ffc983cecd2ddf1f912db7f00a6ed198a6b16",
       class: "icon"
     }, i("q2-icon", {
-      key: "97ffba3484e2bf0901a1520a7a8e8099cc03c3ba",
+      key: "cb3430c9216268ed7e8eeea85a83168b2d72ceb1",
       type: this.icon
     })), this.imageSrc && i("div", {
-      key: "5426e6276902a70be2b6cf64849580587dfa6368",
+      key: "eab34ebad157a6c81a0e24bc726505e3541eac05",
       class: "image"
     }, i("img", {
-      key: "00bb517674151bce32307c0cae70e1cae45da7a2",
+      key: "cdf8e7a1c381a099d811241a410998e16405bda4",
       src: this.imageSrc
     })), n(this.hostElement, "content") && i("slot", {
-      key: "1ca0b130e835e24b3891d7ca2870105b538ba14d",
+      key: "2674f81de64e3d6069e043f4c0a0db39d70f466a",
       name: "content"
     }), this.description && i("p", {
-      key: "86d27f942231bff0754befb1abc2b1108f16f1ad",
+      key: "8dc2a0b031812a6e65012df8d78e5ff3373c117e",
       class: "description"
     }, this.description), this.customMarkup && i("p", {
-      key: "f25747c08a3c49fe8388f1528b70490e92ee01fb",
+      key: "218d120d1109cff6a1aa79e5b76befbca0ca5857",
       class: "customMarkup",
       innerHTML: c(this.customMarkup)
     })), i("footer", {
-      key: "d823aa857d2f003ac671d6cf93b1a0b63dabdaff"
+      key: "ffc5c49fbaabde579fda002a25ac893e798c07de"
     }, i("q2-action-group", {
-      key: "31c7fa360c61861b26b26e38ffe241760f3c5cb9",
+      key: "295cde61c6e9851aab36f3903f892a5775aca76c",
       "full-width": this.fullWidthButton
     }, i("slot", {
-      key: "9988c2db9d3635d05c66c2b5e3ed6745a9bfaa1c",
+      key: "e8ece0f36c2647515d82e3cd21b9c36faf731fd2",
       name: "action"
     })))));
   }
@@ -209,11 +209,11 @@ const g = b, defineCustomElement = function() {
       break;
 
      case "q2-action-group":
-      customElements.get(r(t)) || l();
+      customElements.get(r(t)) || d();
       break;
 
      case "q2-btn":
-      customElements.get(r(t)) || d();
+      customElements.get(r(t)) || l();
       break;
 
      case "q2-icon":

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() {

package/dist/components/q2-option-list2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as s, Ho
 
 import { b as a } from "./component.js";
 
-import { l as h, n as r, o as c, i as l, w as d, t as p } from "./index2.js";
+import { l as r, n as h, o as l, i as c, w as d, t as p } from "./index2.js";
 
 import { m as u } from "./mirror-emit.js";
 
@@ -15,7 +15,7 @@ const b =  t(class extends e {
       lastPressedAt: new Date
     }, this.scheduledAfterRender = [], 
     /** Determines the label that is applied to the option list for accessibility purposes. */
-    this.label = h("tecton.element.optionList.label"), 
+    this.label = r("tecton.element.optionList.label"), 
     /** A list of the selected options on the element. */
     this.selectedOptions = [], 
     /** Translates to the role of the option list */
@@ -42,7 +42,7 @@ const b =  t(class extends e {
           break;
         }
         "menu" === this.type ? (this.activeIndex = 0, this.openDropdownWithActiveElement(0)) : (this.setDefaultActiveElement(), 
-        r((() => this.popoverState.emit({
+        h((() => this.popoverState.emit({
           open: !0,
           action: "open"
         }))));
@@ -50,7 +50,7 @@ const b =  t(class extends e {
 
        case "Enter":
         "menu" === this.type ? (this.activeIndex = 0, this.openDropdownWithActiveElement(0)) : (this.setDefaultActiveElement(), 
-        r((() => this.popoverState.emit({
+        h((() => this.popoverState.emit({
           open: !0,
           action: "open"
         }))));
@@ -111,8 +111,8 @@ const b =  t(class extends e {
       (i || s) && t.stopPropagation();
     }, this.internalKeydownHandler = t => {
       t.stopPropagation();
-      const {activeIndex: e, customSearch: i, allOptions: s, allVisibleOptions: n, multiple: o} = this, {key: a, shiftKey: h} = t;
-      let r;
+      const {activeIndex: e, customSearch: i, allOptions: s, allVisibleOptions: n, multiple: o} = this, {key: a, shiftKey: r} = t;
+      let h;
       switch (a) {
        case " ":
         if (this.searchString && !this.multiple) {
@@ -120,8 +120,8 @@ const b =  t(class extends e {
           this.searchOptions(a, !1);
           break;
         }
-        if (r = s.find((t => t.active)), !r || r.disabled) break;
-        if (this.selectOption(r), o) break;
+        if (h = s.find((t => t.active)), !h || h.disabled) break;
+        if (this.selectOption(h), o) break;
         this.hostElement.addEventListener("tctClick", (() => {
           this.popoverState.emit({
             open: !1,
@@ -133,8 +133,8 @@ const b =  t(class extends e {
         break;
 
        case "Enter":
-        if (r = s.find((t => t.active)), !r || r.disabled) break;
-        if (this.selectOption(r), o) break;
+        if (h = s.find((t => t.active)), !h || h.disabled) break;
+        if (this.selectOption(h), o) break;
         this.hostElement.addEventListener("tctClick", (() => {
           this.popoverState.emit({
             open: !1,
@@ -148,8 +148,8 @@ const b =  t(class extends e {
        case "ArrowUp":
        case "ArrowDown":
         // Guard: only process if an option is currently focused
-        const c = document.activeElement;
-        if (!this.allOptions.some((t => t === c))) return;
+        const l = document.activeElement;
+        if (!this.allOptions.some((t => t === l))) return;
         if (t.preventDefault(), "ArrowUp" === a) {
           if (n[0].active) break;
           if (void 0 === e) {
@@ -192,7 +192,7 @@ const b =  t(class extends e {
         break;
 
        case "Tab":
-        if (h) break;
+        if (r) break;
         if (this.multiple && "listbox" === this.type) break;
         if ("menu" === this.type) {
           this.popoverState.emit({
@@ -201,8 +201,8 @@ const b =  t(class extends e {
           });
           break;
         }
-        if (r = s.find((t => t.active)), !r || r.disabled) return;
-        this.selectOption(r);
+        if (h = s.find((t => t.active)), !h || h.disabled) return;
+        this.selectOption(h);
         break;
 
        case "Esc":
@@ -257,7 +257,7 @@ const b =  t(class extends e {
     this.hasOptions = !!this.hostElement.querySelectorAll("q2-option:not([separator]):not([separator=true]), q2-dropdown-item:not([separator]):not([separator=true])").length;
   }
   componentDidLoad() {
-    c(this.hostElement), this.checkOptions(), this.selectedOptionsUpdated(), this.ready.emit();
+    l(this.hostElement), this.checkOptions(), this.selectedOptionsUpdated(), this.ready.emit();
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach((t => t())), this.scheduledAfterRender = [];
@@ -268,7 +268,7 @@ const b =  t(class extends e {
     t.stopPropagation();
   }
   delegateFocus(t) {
-    if (!l(t, this.hostElement)) return;
+    if (!c(t, this.hostElement)) return;
     this.popoverState.emit({
       open: !0,
       action: "open"
@@ -323,10 +323,25 @@ const b =  t(class extends e {
     const {type: t} = this;
     if (!t) return;
     const e = "menu" === t ? "menuitem" : "option";
-    this.allOptions.forEach((t => {
-      t.role = e;
+    this.allOptions.forEach((i => {
+      // iOS 26 bug: setting role="menuitem" on the q2-dropdown-item host prevents VoiceOver from announcing the option name.
+      "menu" === t && "q2-dropdown-item" === i.tagName.toLowerCase() || (i.role = e);
     }));
   }
+  findScrollableAncestor(t) {
+    var i, s;
+    let n = t;
+    for (;n; ) {
+      if (n instanceof e && n !== t) {
+        const t = getComputedStyle(n).overflowY;
+        // Skip html/body so page-level scroll isn't treated as our container.
+                if (("auto" === t || "scroll" === t) && n !== document.documentElement && n !== document.body) return n;
+      }
+      const o = n.assignedSlot, a = n.parentNode, r = n.host;
+      n = null !== (s = null !== (i = null != o ? o : a) && void 0 !== i ? i : r) && void 0 !== s ? s : null;
+    }
+    return null;
+  }
   focusSelectedSibling(t) {
     const {allVisibleOptions: e, allOptions: i} = this;
     if (e.length < 2) return void (this.showSelected = !1);
@@ -368,10 +383,16 @@ const b =  t(class extends e {
   scrollToActiveOption() {
     const t = this.allOptions[this.activeIndex];
     if (!t) return;
-    const {scrollX: e, scrollY: i} = window;
-    t.scrollIntoView({
-      block: "center"
-    }), window.scrollTo(e, i);
+    // Do our own scroll math so `scrollIntoView` doesn't cascade to the parent window in an SDK iframe.
+        const e = this.findScrollableAncestor(t);
+    if (e) {
+      if (e.scrollHeight > e.clientHeight) {
+        const i = t.getBoundingClientRect(), s = e.getBoundingClientRect(), n = i.top - s.top + i.height / 2;
+        e.scrollTop += n - s.height / 2;
+      }
+    } else t.scrollIntoView({
+      block: "nearest"
+    });
   }
   searchOptions(t, e) {
     this.searchString = t, this.searchAndFocus(t, e);
@@ -383,15 +404,15 @@ const b =  t(class extends e {
       value: n,
       display: o
     };
-    let h = [];
+    let r = [];
     if (e) {
       const {selectedOptions: e} = this;
-      h = e.find((t => t.value === n)) ? e.filter((({value: t}) => t !== n)) : [ ...e, a ], 
+      r = e.find((t => t.value === n)) ? e.filter((({value: t}) => t !== n)) : [ ...e, a ], 
       s && this.focusSelectedSibling(t);
-    } else h = [ a ];
-    i ? this.setActiveElement(null) : this.selectedOptions = h, u(this, [ "change", "tctChange" ], {
+    } else r = [ a ];
+    i ? this.setActiveElement(null) : this.selectedOptions = r, u(this, [ "change", "tctChange" ], {
       value: n,
-      values: h
+      values: r
     });
   }
   setActiveOption() {
@@ -405,7 +426,7 @@ const b =  t(class extends e {
     if (!t) return;
     p(t) ? t.focus({
       preventScroll: !0
-    }) : r((() => t.focus({
+    }) : h((() => t.focus({
       preventScroll: !0
     })));
   }
@@ -426,22 +447,22 @@ const b =  t(class extends e {
   // #region Render Methods
   render() {
     return s(n, {
-      key: "ea6ef8ea9e667c6d1485212ea636b23725ce9043"
+      key: "19cadb5668db33a912951df4ec0e81a74b2b78ce"
     }, s("div", {
-      key: "6bc6ffec50a40b8b8ee4cf2b66388200eb3f0d32",
+      key: "1d5a8f310ee97bc2189b839ee3d87e08bf0fa269",
       class: "content",
       ref: t => this.contentElement = t,
       onFocusout: this.focusoutHandler
     }, s("div", {
-      key: "28b5d0460ceca2f0b9a8fd4fa018f949d04154df",
+      key: "24b1616962a9b544fb6215acc1e6edb4f12a5a03",
       class: "options",
-      "aria-label": h("tecton.element.optionList.label", [ this.label ]),
+      "aria-label": r("tecton.element.optionList.label", [ this.label ]),
       "aria-multiselectable": "menu" === this.type ? void 0 : this.multiple ? "true" : void 0,
       role: this.type || "listbox",
       onKeyDown: this.internalKeydownHandler,
       onClick: this.clickHandler
     }, s("slot", {
-      key: "666147b2cd06490c883c8a01b11e9cfa209a19dd"
+      key: "eeb0342b7c319f5f5af95daa54dcaa732c3159d9"
     }))));
   }
   get hostElement() {

package/dist/components/q2-otp.js

@@ -291,7 +291,7 @@ const f =  t(class extends e {
       block: !0,
       class: "send-code-button",
       disabled: this.disabled,
-      intent: "workflow-primary",
+      intent: "primary",
       label: this.localizedSendCodeLabel,
       onClick: this.handleSendCodeClick,
       ref: t => this.sendCodeRef = t
@@ -309,7 +309,7 @@ const f =  t(class extends e {
       block: !0,
       class: "submit-button",
       disabled: this.disabled || !this.isComplete,
-      intent: "workflow-primary",
+      intent: "primary",
       label: this.isVerifying ? this.localizedProcessingLabel : this.localizedSubmitLabel,
       loading: this.isVerifying,
       onClick: this.handleSubmitClick
@@ -317,7 +317,7 @@ const f =  t(class extends e {
   }
   render() {
     return i("div", {
-      key: "80f709fb9ccac37057bc3da569e4aefa6675d864",
+      key: "8f4ada9f194f1b0995995e946097b3e24a11f605",
       "aria-busy": this.isVerifying ? "true" : void 0,
       "aria-labelledby": this.label ? this.labelId : void 0,
       class: {
@@ -331,22 +331,22 @@ const f =  t(class extends e {
       },
       role: "group"
     }, this.renderSendCodeButton(), i("div", {
-      key: "1192f341199e8fbbd2c04c3fe58d69129888410c",
+      key: "099e1ef5ccc09846faf9952772e61ff7644e5085",
       class: {
         "otp-content": !0,
         "send-code-hidden": "ready" === this.state
       }
     }, this.renderLabel(), i("div", {
-      key: "f84aa0d243808206cf31e2900e633f5c5199b197",
+      key: "5ad6ff061779de6562f523148459729d73bbf53a",
       class: "otp-control-group"
     }, i("div", {
-      key: "8e01108ff520da247f80bb2204b2620a477a652f",
+      key: "d60e93f2d79d0f4b0348a5b581647ece89e9973c",
       class: "fields-shell"
     }, i("div", {
-      key: "7f942c6fb6be407f4c43cb2349614cf33c0ec62b",
+      key: "55b515c8a04e664024dcc66e4d894dcb0ddd4ca4",
       class: "fields-container"
     }, i("input", {
-      key: "5c1df9b3ff79098f47f40f2ad14165e25a59e5d8",
+      key: "b8319da6e91ea06ff5632c72326460c0e532393d",
       "aria-describedby": this.describedBy,
       "aria-invalid": "error" === this.state ? "true" : "false",
       "aria-label": this.inputAriaLabel,