q2-tecton-elements 1.70.2 → 1.70.4

package/dist/bundle-report.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-04T18:17:41",
+  "timestamp": "2026-09-28T19:56:57",
   "compiler": {
     "name": "node",
     "version": "24.10.0"
@@ -1405,7 +1405,7 @@
           "component-DaQM9u3s.js",
           "index-Cps4jSQM.js"
         ],
-        "originalByteSize": 52751
+        "originalByteSize": 52995
       },
       {
         "key": "q2-chart-bar.entry",
@@ -2266,7 +2266,7 @@
           "component-DaQM9u3s.js",
           "index-Cps4jSQM.js"
         ],
-        "originalByteSize": 52751
+        "originalByteSize": 52995
       },
       {
         "key": "q2-chart-bar.entry",
@@ -3129,7 +3129,7 @@
           "component-iASoq6gx.js",
           "index-SpDCZABA.js"
         ],
-        "originalByteSize": 52839
+        "originalByteSize": 53083
       },
       {
         "key": "q2-chart-bar.entry",

package/dist/cjs/click-elsewhere_3.cjs.entry.js

@@ -511,6 +511,9 @@ const Q2OptionList = class {
             return;
         const optionRole = type === 'menu' ? 'menuitem' : 'option';
         this.allOptions.forEach(option => {
+            // iOS 26 bug: setting role="menuitem" on the q2-dropdown-item host prevents VoiceOver from announcing the option name.
+            if (type === 'menu' && option.tagName.toLowerCase() === 'q2-dropdown-item')
+                return;
             option.role = optionRole;
         });
     }
@@ -681,7 +684,7 @@ const Q2OptionList = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h(index.Host, { key: 'ea6ef8ea9e667c6d1485212ea636b23725ce9043' }, index.h("div", { key: '6bc6ffec50a40b8b8ee4cf2b66388200eb3f0d32', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, index.h("div", { key: '28b5d0460ceca2f0b9a8fd4fa018f949d04154df', class: "options", "aria-label": index$1.loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : this.multiple ? 'true' : undefined, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, index.h("slot", { key: '666147b2cd06490c883c8a01b11e9cfa209a19dd' })))));
+        return (index.h(index.Host, { key: '14f2a8ab97077ed7b93d746b75f89b98f416a55d' }, index.h("div", { key: '1184c5d8d4cf8af63a60bef1282d6442b8539cf6', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, index.h("div", { key: '5dcb6a82f1759e46d5e742e72075bf3dfa3c6d70', class: "options", "aria-label": index$1.loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : this.multiple ? 'true' : undefined, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, index.h("slot", { key: '39372ab91b081ba124ff4c4dc04fc0c84be7a4ad' })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/components/q2-option-list/q2-option-list.js

@@ -413,6 +413,9 @@ export class Q2OptionList {
             return;
         const optionRole = type === 'menu' ? 'menuitem' : 'option';
         this.allOptions.forEach(option => {
+            // iOS 26 bug: setting role="menuitem" on the q2-dropdown-item host prevents VoiceOver from announcing the option name.
+            if (type === 'menu' && option.tagName.toLowerCase() === 'q2-dropdown-item')
+                return;
             option.role = optionRole;
         });
     }
@@ -583,7 +586,7 @@ export class Q2OptionList {
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: 'ea6ef8ea9e667c6d1485212ea636b23725ce9043' }, h("div", { key: '6bc6ffec50a40b8b8ee4cf2b66388200eb3f0d32', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '28b5d0460ceca2f0b9a8fd4fa018f949d04154df', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : this.multiple ? 'true' : undefined, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '666147b2cd06490c883c8a01b11e9cfa209a19dd' })))));
+        return (h(Host, { key: '14f2a8ab97077ed7b93d746b75f89b98f416a55d' }, h("div", { key: '1184c5d8d4cf8af63a60bef1282d6442b8539cf6', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '5dcb6a82f1759e46d5e742e72075bf3dfa3c6d70', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : this.multiple ? 'true' : undefined, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '39372ab91b081ba124ff4c4dc04fc0c84be7a4ad' })))));
     }
     static get is() { return "q2-option-list"; }
     static get encapsulation() { return "shadow"; }

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 h } from "./component.js";
 
-import { l as a, n as c, o as r, i as l, w as d, t as p } from "./index2.js";
+import { l as a, n as r, o as c, i as l, w as d, t as p } from "./index2.js";
 
 import { m as u } from "./mirror-emit.js";
 
@@ -42,7 +42,7 @@ const b =  t(class extends e {
           break;
         }
         "menu" === this.type ? (this.activeIndex = 0, this.openDropdownWithActiveElement(0)) : (this.setDefaultActiveElement(), 
-        c((() => this.popoverState.emit({
+        r((() => 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(), 
-        c((() => this.popoverState.emit({
+        r((() => this.popoverState.emit({
           open: !0,
           action: "open"
         }))));
@@ -112,7 +112,7 @@ const b =  t(class extends e {
     }, this.internalKeydownHandler = t => {
       t.stopPropagation();
       const {activeIndex: e, customSearch: i, allOptions: s, allVisibleOptions: n, multiple: o} = this, {key: h, shiftKey: a} = t;
-      let c;
+      let r;
       switch (h) {
        case " ":
         if (this.searchString && !this.multiple) {
@@ -120,8 +120,8 @@ const b =  t(class extends e {
           this.searchOptions(h, !1);
           break;
         }
-        if (c = s.find((t => t.active)), !c || c.disabled) break;
-        if (this.selectOption(c), o) break;
+        if (r = s.find((t => t.active)), !r || r.disabled) break;
+        if (this.selectOption(r), 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 (c = s.find((t => t.active)), !c || c.disabled) break;
-        if (this.selectOption(c), o) break;
+        if (r = s.find((t => t.active)), !r || r.disabled) break;
+        if (this.selectOption(r), 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 r = document.activeElement;
-        if (!this.allOptions.some((t => t === r))) return;
+        const c = document.activeElement;
+        if (!this.allOptions.some((t => t === c))) return;
         if (t.preventDefault(), "ArrowUp" === h) {
           if (n[0].active) break;
           if (void 0 === e) {
@@ -201,8 +201,8 @@ const b =  t(class extends e {
           });
           break;
         }
-        if (c = s.find((t => t.active)), !c || c.disabled) return;
-        this.selectOption(c);
+        if (r = s.find((t => t.active)), !r || r.disabled) return;
+        this.selectOption(r);
         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() {
-    r(this.hostElement), this.checkOptions(), this.selectedOptionsUpdated(), this.ready.emit();
+    c(this.hostElement), this.checkOptions(), this.selectedOptionsUpdated(), this.ready.emit();
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach((t => t())), this.scheduledAfterRender = [];
@@ -323,8 +323,9 @@ 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);
     }));
   }
   focusSelectedSibling(t) {
@@ -405,7 +406,7 @@ const b =  t(class extends e {
     if (!t) return;
     p(t) ? t.focus({
       preventScroll: !0
-    }) : c((() => t.focus({
+    }) : r((() => t.focus({
       preventScroll: !0
     })));
   }
@@ -426,14 +427,14 @@ const b =  t(class extends e {
   // #region Render Methods
   render() {
     return s(n, {
-      key: "ea6ef8ea9e667c6d1485212ea636b23725ce9043"
+      key: "14f2a8ab97077ed7b93d746b75f89b98f416a55d"
     }, s("div", {
-      key: "6bc6ffec50a40b8b8ee4cf2b66388200eb3f0d32",
+      key: "1184c5d8d4cf8af63a60bef1282d6442b8539cf6",
       class: "content",
       ref: t => this.contentElement = t,
       onFocusout: this.focusoutHandler
     }, s("div", {
-      key: "28b5d0460ceca2f0b9a8fd4fa018f949d04154df",
+      key: "5dcb6a82f1759e46d5e742e72075bf3dfa3c6d70",
       class: "options",
       "aria-label": a("tecton.element.optionList.label", [ this.label ]),
       "aria-multiselectable": "menu" === this.type ? void 0 : this.multiple ? "true" : void 0,
@@ -441,7 +442,7 @@ const b =  t(class extends e {
       onKeyDown: this.internalKeydownHandler,
       onClick: this.clickHandler
     }, s("slot", {
-      key: "666147b2cd06490c883c8a01b11e9cfa209a19dd"
+      key: "39372ab91b081ba124ff4c4dc04fc0c84be7a4ad"
     }))));
   }
   get hostElement() {

package/dist/esm/click-elsewhere_3.entry.js

@@ -509,6 +509,9 @@ const Q2OptionList = class {
             return;
         const optionRole = type === 'menu' ? 'menuitem' : 'option';
         this.allOptions.forEach(option => {
+            // iOS 26 bug: setting role="menuitem" on the q2-dropdown-item host prevents VoiceOver from announcing the option name.
+            if (type === 'menu' && option.tagName.toLowerCase() === 'q2-dropdown-item')
+                return;
             option.role = optionRole;
         });
     }
@@ -679,7 +682,7 @@ const Q2OptionList = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: 'ea6ef8ea9e667c6d1485212ea636b23725ce9043' }, h("div", { key: '6bc6ffec50a40b8b8ee4cf2b66388200eb3f0d32', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '28b5d0460ceca2f0b9a8fd4fa018f949d04154df', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : this.multiple ? 'true' : undefined, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '666147b2cd06490c883c8a01b11e9cfa209a19dd' })))));
+        return (h(Host, { key: '14f2a8ab97077ed7b93d746b75f89b98f416a55d' }, h("div", { key: '1184c5d8d4cf8af63a60bef1282d6442b8539cf6', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '5dcb6a82f1759e46d5e742e72075bf3dfa3c6d70', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : this.multiple ? 'true' : undefined, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '39372ab91b081ba124ff4c4dc04fc0c84be7a4ad' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/q2-tecton-elements/click-elsewhere_3.entry.js

@@ -4,7 +4,7 @@ import { m as n } from "./mirror-emit-DUjY_ucm.js";
 
 import { b as r } from "./component-DaQM9u3s.js";
 
-import { l as a, n as h, o as p, i as c, w as l, v as d, q as u, x as m, y as v, g as b } from "./index-Cps4jSQM.js";
+import { l as a, n as h, o as p, i as c, w as l, v as d, q as u, x as m, y as b, g as v } from "./index-Cps4jSQM.js";
 
 const w = class {
   constructor(o) {
@@ -388,8 +388,9 @@ const f = class {
     const {type: t} = this;
     if (!t) return;
     const i = "menu" === t ? "menuitem" : "option";
-    this.allOptions.forEach((t => {
-      t.role = i;
+    this.allOptions.forEach((o => {
+      // iOS 26 bug: setting role="menuitem" on the q2-dropdown-item host prevents VoiceOver from announcing the option name.
+      "menu" === t && "q2-dropdown-item" === o.tagName.toLowerCase() || (o.role = i);
     }));
   }
   focusSelectedSibling(t) {
@@ -491,14 +492,14 @@ const f = class {
   // #region Render Methods
   render() {
     return e(s, {
-      key: "ea6ef8ea9e667c6d1485212ea636b23725ce9043"
+      key: "14f2a8ab97077ed7b93d746b75f89b98f416a55d"
     }, e("div", {
-      key: "6bc6ffec50a40b8b8ee4cf2b66388200eb3f0d32",
+      key: "1184c5d8d4cf8af63a60bef1282d6442b8539cf6",
       class: "content",
       ref: t => this.contentElement = t,
       onFocusout: this.focusoutHandler
     }, e("div", {
-      key: "28b5d0460ceca2f0b9a8fd4fa018f949d04154df",
+      key: "5dcb6a82f1759e46d5e742e72075bf3dfa3c6d70",
       class: "options",
       "aria-label": a("tecton.element.optionList.label", [ this.label ]),
       "aria-multiselectable": "menu" === this.type ? void 0 : this.multiple ? "true" : void 0,
@@ -506,7 +507,7 @@ const f = class {
       onKeyDown: this.internalKeydownHandler,
       onClick: this.clickHandler
     }, e("slot", {
-      key: "666147b2cd06490c883c8a01b11e9cfa209a19dd"
+      key: "39372ab91b081ba124ff4c4dc04fc0c84be7a4ad"
     }))));
   }
   get hostElement() {
@@ -568,11 +569,11 @@ const g = class {
         bottom: 0,
         left: 0,
         right: 0
-      }, u = c, b = (null === (o = null === window || void 0 === window ? void 0 : window.visualViewport) || void 0 === o ? void 0 : o.width) - d, w = m(e), f = w ? 0 : window.scrollX, g = w ? 0 : window.scrollY;
-      s.style.setProperty("--comp-pop-position", w ? "fixed" : "absolute"), "right" === a ? (s.style.setProperty("--comp-pop-right", b - f + "px"), 
+      }, u = c, v = (null === (o = null === window || void 0 === window ? void 0 : window.visualViewport) || void 0 === o ? void 0 : o.width) - d, w = m(e), f = w ? 0 : window.scrollX, g = w ? 0 : window.scrollY;
+      s.style.setProperty("--comp-pop-position", w ? "fixed" : "absolute"), "right" === a ? (s.style.setProperty("--comp-pop-right", v - f + "px"), 
       s.style.setProperty("--comp-pop-left", "unset")) : (s.style.setProperty("--comp-pop-left", `${u + f}px`), 
       s.style.setProperty("--comp-pop-right", "unset")), this.block && s.style.setProperty("--comp-pop-width", `${(null == e ? void 0 : e.offsetWidth) || 0}px`);
-      const k = r && v(this.hostElement);
+      const k = r && b(this.hostElement);
       "up" === n && (r && !k ? s.style.setProperty("--comp-pop-bottom", window.innerHeight - h + "px") : s.style.setProperty("--comp-pop-bottom", window.innerHeight - h - g + "px")), 
       "down" === n && (r && !k ? s.style.setProperty("--comp-pop-top", `${p}px`) : s.style.setProperty("--comp-pop-top", `${p + g}px`)), 
       // Wait for one paint to prevent layout thrashing
@@ -670,7 +671,7 @@ const g = class {
   addViewportListeners() {
     var t;
     window.addEventListener("resize", this.viewPortOrientationChanged), null === visualViewport || void 0 === visualViewport || visualViewport.addEventListener("resize", this.viewPortChanged), 
-    v(this.hostElement) && !b() && window.addEventListener("scroll", this.viewPortChanged, {
+    b(this.hostElement) && !v() && window.addEventListener("scroll", this.viewPortChanged, {
       passive: !0,
       capture: !0
     }), null === (t = null === screen || void 0 === screen ? void 0 : screen.orientation) || void 0 === t || t.addEventListener("orientationchange", this.viewPortOrientationChanged), 
@@ -692,16 +693,16 @@ const g = class {
       bottom: 0
     };
     let c, d, u;
-    const m = a && v(this.hostElement);
+    const m = a && b(this.hostElement);
     if (a && !m) {
       const {outletOffset: t = 0, innerHeight: i = window.innerHeight, top: e = 0, bottom: s = 0} = (null === (o = window.Tecton) || void 0 === o ? void 0 : o.platformDimensions) || {}, n = window.innerHeight - p, a = i - s - (t + p - e);
       d = (t > 0 ? h : h + t - e) - r, u = n < a ? n - r : a - r;
     } else c = window.innerHeight, d = h - r, u = c - p - r;
-    const b = d > u ? "up" : "down", w = !(null == e ? void 0 : e.style.getPropertyValue("--comp-pop-max-height")) || this.orientationChanged;
+    const v = d > u ? "up" : "down", w = !(null == e ? void 0 : e.style.getPropertyValue("--comp-pop-max-height")) || this.orientationChanged;
     // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)
         // we do not want to constantly update the max-height after an orientation change, so we switch this back to false
     this.orientationChanged = !1;
-    switch (this.currentDirection || n || b) {
+    switch (this.currentDirection || n || v) {
      case "up":
       if (w && e) {
         const t = this.validatedMaxHeight || d, i = Math.min(d, t);
@@ -738,7 +739,7 @@ const g = class {
   // #region Render Methods
   render() {
     const t = [ "container", this.currentDirection, this.align ];
-    return b() && t.push("mobile"), this.show && t.push("show"), this.block && t.push("block"), 
+    return v() && t.push("mobile"), this.show && t.push("show"), this.block && t.push("block"), 
     "legacy" === this.mode && t.push("legacy"), "opening" === this.animationState && t.push("animating-open"), 
     "closing" === this.animationState && t.push("animating-close"), e("div", {
       key: "4fe0c06793144eb83fe53cfc568af81226f78345",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.70.2",
+    "version": "1.70.4",
     "description": "Q2 Tecton Custom Elements",
     "license": "MIT",
     "author": "Q2 Tecton Team",
@@ -56,7 +56,7 @@
     },
     "dependencies": {
         "@stencil/core": "~4.43.0",
-        "q2-tecton-common": "1.70.2",
+        "q2-tecton-common": "1.70.4",
         "swiper": "^12.1.2"
     },
     "devDependencies": {
@@ -78,5 +78,5 @@
         "rollup-plugin-istanbul": "^5.0.0"
     },
     "packageManager": "pnpm@10.27.0",
-    "gitHead": "66dbc0c35b0017b6c73c3c2be184b3ba17f43ce6"
+    "gitHead": "4137548f06eea1a9d43b2bc1e3aad13b61c2fc39"
 }