q2-tecton-elements 1.46.1 → 1.46.2

package/dist/esm/q2-optgroup.entry.js

@@ -41,7 +41,7 @@ const Q2Optgroup = class {
         });
     }
     render() {
-        return (h("div", { key: '22334d6ad4d588af06d33c426442c17e517bfdff', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '82470c713ed744c41ca8a1682d78e4795e83e125', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'd246db5839936be3b0ee56eec47e7a11aa0269ee', class: "q2-optgroup-options" }, h("slot", { key: '12442af1a98a84db8023dd7572ffa3d6fba34fdc' }))));
+        return (h("div", { key: '7296e98c4ba1bf5b7d43a7a41bd71674b6a29786', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '9f6acc6efc59b09550b809b2a47b2e8680ba8857', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'b2b13e828cf5974f021047dc08006d389518c7bc', class: "q2-optgroup-options" }, h("slot", { key: 'e0eb0eb5889abb67a65c514a4fd8054625fa3901' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-option-list.entry.js

@@ -536,7 +536,7 @@ const Q2OptionList = class {
     }
     /// DOM ///
     render() {
-        return (h(Host, { key: 'c3c1aa149c1696c2025e7be8d0185a500cdc40e1' }, h("div", { key: '0788af1766ce408de56b8d56f87898c048dfd618', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '04341860dc01b4c64905bdead1125adc03c3d036', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: 'e1fa1fc07a9dd268a84491177a6c8e15632f3afa' })))));
+        return (h(Host, { key: 'd506ec65b607d11ce3131fb4084c2a9a1ae93aab' }, h("div", { key: 'a2fa4b5d44ce4c2682831a9f08ff5e2bca0bde9d', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '75f5729faf1ad67eb678903e7f77d6b26523292a', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '64fb06204cfc686108fdcbc1d395fe9d89dafd1a' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-option.entry.js

@@ -56,7 +56,7 @@ const Q2Option = class {
     render() {
         const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
-        return (h(Host, { key: '4b5001e4870ee08cbd313e029bc2fa6b15503ced', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: '652c794d376c56a8cdb116e8c9d37596dad6a4dd', type: "checkmark" }), h("div", { key: 'f39323dc5d9959daf61833a4cd8066bea83ea0c6', class: "content" }, h("slot", { key: '2107c286ec7b9ce7f94e4e3de3a0789217a56e45' }))));
+        return (h(Host, { key: 'f151dcc4f6c384ed57f161201e4f47130c9352bf', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: '999146b64cc2827794339665aa3d4a91468bb07f', type: "checkmark" }), h("div", { key: '8fe4f1e3d064ce8b2b0c834ba3b2a5896a8f3d66', class: "content" }, h("slot", { key: '4c95a66a6b32b5b388a69fd235febcefda232772' }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-pagination.entry.js

@@ -175,7 +175,7 @@ const Q2Pagination = class {
                 total,
             });
         }
-        return (h("nav", { key: '50343b3b19ac4d64966783eab66f5ce61dc1b94f', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '7ab3dafbf56de8ec12ac49b470fdb5a8d4df2f74', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: '492ad7b6180eec733d0a21266b4f21b5f032e1a7', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '30c1287dccf3a2da6a32f17529075e4ce07ec3ed', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -184,7 +184,7 @@ const Q2Pagination = class {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: 'ccac7c6ba741c00ee29a273ff95d6f1376c82114', class: "btn-group" }, h("q2-btn", { key: '995f73fe6f8b7caba3f33b26d2951d6dfdb9c8ad', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '511c412f9b64ef9c255d3bb0c3036c508041ba1e', type: "chevron-double-left" })), h("q2-btn", { key: 'b31a58e9895d6bd0a290bc878bcc90e5d05573c4', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '237e92a052c98544f5e5d3655b76a87fcbae1ffc', type: "chevron-left" }))), h("div", { key: 'c5f5dbcf26d85bf38329ca342462c097a6fdfbf2', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '744fc7c5fd66aa050e336173677c0560597773a2', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '6a51a7881d8dc25f33e882cb801dfa49e66f5624', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '9fcd3d30b4c641e428f9088c5da31fe9236af065', type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), h("span", { key: '74fb4e9dc5fb522a2a8e4d6bb079de21a75e7b8e', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'af17aff0c838a045e151651ff58c3aeae37310a4', class: "btn-group" }, h("q2-btn", { key: '6241c7d80e88ebf31dba7ac2c013174415e78860', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'c101b0a222e94f3bef8a6e878c5d507bf15bf9a7', type: "chevron-right" })), h("q2-btn", { key: '91b74767914718048301eb21ac5ddf93ce7dca5e', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'b8ce5dfd5622c941602e6439fff5e0e75b639855', type: "chevron-double-right" }))), h("div", { key: '5897095710edb3fa0fc00eaf072de8d6e1cee844', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, this.renderPerPage())));
+            })), h("div", { key: '1e255884140a5fbb7ba51cb8046727ab8cb602a5', class: "btn-group" }, h("q2-btn", { key: '48fc8c61b04e0005b98cbffbc3320e4dd4f0855e', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '9c454decc6feadc6bbd3f21044c7bebd46d5a55a', type: "chevron-double-left" })), h("q2-btn", { key: '9214aee00653c2417a284292c5df431bcf9cdceb', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '9761ca7c383a5ece9582fb07b30f0fb70eceba17', type: "chevron-left" }))), h("div", { key: 'd0749351d1ac3d1193a05a0f4b6f55860f98a220', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '2a160fdc5453904fcfb330b95ae548ab2df2a06a', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '250476d5c0e4e4bb90065764c4e27bb49bf79076', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '079e89b7938ae91ebf690d42a9ea0a6191decadc', type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), h("span", { key: 'f943840d83883da0908eed6cad0b0bbeeccee0a2', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '8aa10edcf80ce32fb0252c133f28304cfbb0ccc9', class: "btn-group" }, h("q2-btn", { key: '2b97474ae891322efd074dae86881b09dac6eb62', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '47b3882a0c232fbe6737e8633adf8f4a0ad27b8d', type: "chevron-right" })), h("q2-btn", { key: '40604303f9479091821ee3390681d22c3d4507d0', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'ecf929fe7b18bcd19c7e9045c82245d8c4764251', type: "chevron-double-right" }))), h("div", { key: '30c078a5b0224753dd5daaf0f83ca7efbe5fbaec', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, this.renderPerPage())));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-pill.entry.js

@@ -260,7 +260,7 @@ const Q2Pill = class {
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: 'dcb3816548945254bc0f94439f91de299fcbffac', onChange: this.onClickElsewhere }, h("div", { key: '794452f573f49b54160b50f4423802b712e54655', class: wrapperClassNames.join(' ') }, h("div", { key: '00f931b80cfd9d2003a2e094e2963cc7d006f767', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '2c4bf905fd879d7178e084e0dcce1c47d5949fd6', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '4df639376c78dbec98e5ddf38a8dd440bd2403ac', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon(), this.generateHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: 'f1feccaa07ab59adb5dda52dadc04300da3ebc12', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '637e3da2b231bc759d416bcf26ecd43b5ca17be3', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '6d5388276f4c328299f7990a1235ad26279852e3' }))))));
+        return (h("click-elsewhere", { key: 'ca6bd41d2351dc05ba4e0ed87b69e335a11a4fe3', onChange: this.onClickElsewhere }, h("div", { key: 'cd9186c0d5f5b32f19f9221a7ba7f495c4a5a3fd', class: wrapperClassNames.join(' ') }, h("div", { key: '14d3658c8abe24567f42ffb82082ef1073326aa2', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '2e64deb6bc1caaa4f3b831060103532886f2d8a6', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '42b583abcc318ab1027f7fb5a5cbd437291f8cb4', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon(), this.generateHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '0c197bbe3f080cc5c8ef78df88d635848e7910e0', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: 'd1d84d56b201242986c8de169fce79e64dd978ab', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '4ed0fe54a2b3b2bc969bf2f2466633148ad20ad0' }))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-radio-group.entry.js

@@ -160,7 +160,7 @@ const Q2RadioGroup = class {
         const showLabel = this.label || this.optional || this.readonly;
         const { hasError } = this;
         const showLabelRow = showLabel || hasError;
-        return (h(Fragment, { key: '5fc0ba8dc6df9631a891e6997e520e663671dbf8' }, showLabelRow && (h("div", { key: 'd65d48917b4dfa90b498467baf1b0d546f57df1b', class: "label-row" }, showLabel && h("div", { key: '43e5db86c270d7e0822c1683d1eca97cb64e72c2', class: "group-legend" }, labelDOM(this)), hasError && (h("q2-icon", { key: 'f57ca3a0da21160ac81d00cac3c85a069fd3d9e5', type: "error", "test-id": "iconError" })))), h("fieldset", { key: 'e85a89714c71b43670d392ba311d436a4c73038b', onChange: this.onInnerRadioChange, "aria-invalid": `${this.hasError}` }, showLabel && h("legend", { key: '701af7a401c2871f9cbc472ffa27edac8b3e109e', class: "sr" }, labelDOM(this)), this.inputDom())));
+        return (h(Fragment, { key: '89b900da542fcef23c5b83f79a5f9d0a94c46b94' }, showLabelRow && (h("div", { key: 'c8b042825052f086c86daeea2a4785a935e89669', class: "label-row" }, showLabel && h("div", { key: '0b76b8f8da79ef43aaaac6fb9dbd55deb98ae4f0', class: "group-legend" }, labelDOM(this)), hasError && (h("q2-icon", { key: '114c828a9a38c6e967f309a9cc33e36b81c6688f', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '08ea4a163a783340e50f9cb7c89b30fb1cd1e8a7', onChange: this.onInnerRadioChange, "aria-invalid": `${this.hasError}` }, showLabel && h("legend", { key: '668f4d97c9b8e8056589260ebac95d060709f490', class: "sr" }, labelDOM(this)), this.inputDom())));
     }
     inputDom() {
         if (this.tileLayout) {

package/dist/esm/q2-radio.entry.js

@@ -73,7 +73,7 @@ const Q2Radio = class {
         }
     }
     render() {
-        return (h("div", { key: '747de74f65700a44bec6fb7fbaf6e910685897e4', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: '4727b651cdc7e2fa095c8b4a1050463ef1aeca1d', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: 'bc37d7119b83407f93dabf4d75be15e3d31be876', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { key: '197549ba1fcfe3d509a00f3c5e45f36fab4c4ff2', viewBox: "0 0 18 18" }, h("circle", { key: '206836e8921b866e27fadbdc8354b305acad2c0d', stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { key: '50ef8f9239754be1d153df0e38bc55a663e0c12c', stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { key: '5a2d36332cc8231daaa08eb5c3db99598d921f08', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: '3b3b5c2e89a82092dc8b727e5cfc15609aaba27e' }))))));
+        return (h("div", { key: '11d52f8240d6022946c837b15afb173c44eb8962', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: '640bea7973f39132323acab2877d7995110c17d7', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: 'e198013184a88d97d76997c5f6e4c6c2784639b5', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { key: 'cf8114adaf788f34a482c577c0f236e37d49e1ec', viewBox: "0 0 18 18" }, h("circle", { key: 'ccbd318974b142dc6bb8d86500c015bbb181bf6e', stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { key: '07514318a21df53b3a85714b4a6e586ca2c5ad05', stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { key: 'a77b401809a6a1f7adeb5f118efeaa2a238ebbf9', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: '884d312374997e55428215c5f302b55dded2ed0f' }))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-relative-time.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, F as Fragment, g as getElement } from './index-1e1ce94e.js';
-import { d as dateFns } from './index-c99c4cc6.js';
+import { d as dateFns } from './index-3184c760.js';
 
 const q2RelativeTimeCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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}:host{display:inline}";
 const Q2RelativeTimeStyle0 = q2RelativeTimeCss;
@@ -119,7 +119,7 @@ const Q2RelativeTime = class {
     /// DOM ///
     render() {
         const { shouldShow, displayedMessage } = this;
-        return h(Fragment, { key: '26e452a6b2cda738835ac8675aea30b50846920a' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: 'dde4907293728cbb3f1d42060293220c3d446b02' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-section.entry.js

@@ -159,9 +159,9 @@ const Q2Section = class {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: '4cae0e6f0057c318e45274cdabe74878bad2a995', class: "wrapper" }, h("header", { key: 'bb4439e069cb85a3950cabfcc08d220415229082', class: hasHeader ? 'has-header' : '' }, h("div", { key: '036bd23de5da7bd0c45a31521fdeffa240e398b0', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '2742ab3ad5654864b0951637e0b5a5a5028ea34d', class: "title" }, loc(this.label)), h("div", { key: 'b772b2028190079db060d28ebaab67723b030462', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '986a404b7a5297af31d4122ffe4daa4697b90203', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '678f61529c25ceb257cf7d26abdd46448b0f0d96', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '5494baf730dd97d54e1e50b6366dbaea3676ce16', type: "chevron-up" })))), h("div", { key: '33cdc24262ad444f8d61cd557371963e5ebf4ce0', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: 'c7bcdc8451b8ba3e80b3a4d080469d2d6a10dfa2', class: "wrapper" }, h("header", { key: 'a50b01b5e72dd0fc2fb1f28a8985bc2649a137a3', class: hasHeader ? 'has-header' : '' }, h("div", { key: 'decced634cbc774a5215dc2caf0da821ef02e3ca', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '74c14dc96e48b1a22bf771b2256afbeccb8bb809', class: "title" }, loc(this.label)), h("div", { key: 'de4984f8b38347e0d7018b2ba00cf1593e961edd', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '0889d40beeb04241e56837d99cbaa7238bed9051', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: 'ce19177afee03d711374c44557d36eacd4c93dc2', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: 'ff1400bd6cc63f20fa8e25d016ef0a877c300d2e', type: "chevron-up" })))), h("div", { key: '5449e450a0d42463e4c55d9fa5ada0d4b0027c97', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: 'f30463473a96a1e5fe8dc4f5951c147a1847d2f4', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'e41200b2ed13a0e280c223020c7b7ada8d3b6056', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: '86160c53fd5d0362c72dddfe9ab97d8f912f9e64', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '741afed909cbb5edf60dc67ce99e23aa7e749522', ref: (el) => (this.contentSlot = el) })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-select.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-1e1ce94e.js';
-import { l as loc, h as handleAriaLabel, o as overrideFocus, w as waitForNextPaint, g as isRelatedTargetWithinHost, i as isEventFromElement, j as isHostLosingFocus } from './index-0a702dd6.js';
+import { d as isMobile, l as loc, h as handleAriaLabel, o as overrideFocus, w as waitForNextPaint, g as isRelatedTargetWithinHost, i as isEventFromElement, j as isHostLosingFocus } from './index-0a702dd6.js';
 import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet-dd527168.js';
 
 const q2SelectCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--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, 3px)));--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}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-select-margin:var(--tct-select-margin, var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-4, 30px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-4, 30px))));display:block;margin:var(--comp-select-margin)}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 3px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";
@@ -12,6 +12,20 @@ const Q2Select = class {
         this.input = createEvent(this, "input", 7);
         var _a;
         this.scheduledAfterRender = [];
+        this.initEventListeners = () => {
+            var _a;
+            if (!isMobile())
+                return;
+            (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener('change', this.handleOrientationChange);
+            window.addEventListener('resize', this.handleOrientationChange);
+            visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener('resize', this.handleOrientationChange);
+        };
+        this.initMutationObserver = () => {
+            const observer = new MutationObserver(this.onMutationObserved);
+            observer.observe(this.hostElement, { childList: true, subtree: true });
+            this.mutationObserver = observer;
+            this.onMutationObserved();
+        };
         this.showSelectedOptions = () => {
             this.showSelected = true;
         };
@@ -47,6 +61,30 @@ const Q2Select = class {
                 this.showAllOptions();
             this.handleSelectionChanges(event.detail);
         };
+        this.destroyEventListeners = () => {
+            var _a;
+            if (!isMobile())
+                return;
+            (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.handleOrientationChange);
+            window.removeEventListener('resize', this.handleOrientationChange);
+            visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener('resize', this.handleOrientationChange);
+        };
+        this.handleOrientationChange = () => {
+            var _a, _b, _c;
+            if (!isMobile())
+                return;
+            let isLandscape;
+            if (this.isModule) {
+                isLandscape = (_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.platformDimensions.orientationType.includes('landscape');
+            }
+            else {
+                isLandscape = (_c = (_b = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _b === void 0 ? void 0 : _b.type) === null || _c === void 0 ? void 0 : _c.includes('landscape');
+            }
+            if (isLandscape && this.searchable)
+                this.searchable = false;
+            if (!isLandscape)
+                this.searchable = this.originalSearchable;
+        };
         /// Event handlers ///
         this.onPopoverState = ({ detail: { open, action }, }) => {
             if (!open || this.searchText) {
@@ -87,7 +125,7 @@ const Q2Select = class {
             // Prevent click event from firing when spacebar is pressed
             if (key === ' ')
                 event.preventDefault();
-            this.optionList.handleExternalKeydown(event);
+            this.handleOptionListExternalKeydown(event);
         };
         this.visibilityToggleKeyDown = (event) => {
             const key = event.key;
@@ -176,15 +214,15 @@ const Q2Select = class {
     }
     /// Lifecycle Hooks ///
     componentWillLoad() {
+        this.originalSearchable = this.searchable;
         handleAriaLabel(this);
+        this.handleOrientationChange();
         this.buildStructuredSelectedOptions();
         this.handleMultilineOptionsUpdate(this.multilineOptions, false);
     }
     componentDidLoad() {
-        const observer = new MutationObserver(this.onMutationObserved);
-        observer.observe(this.hostElement, { childList: true, subtree: true });
-        this.mutationObserver = observer;
-        this.onMutationObserved();
+        this.initMutationObserver();
+        this.initEventListeners();
         overrideFocus(this.hostElement);
         setTimeout(() => this.checkSelectedDisplay(), 0);
     }
@@ -198,8 +236,15 @@ const Q2Select = class {
         var _a;
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.mutationObserver = null;
+        this.destroyEventListeners();
     }
     /// Getters ///
+    get isModule() {
+        var _a, _b;
+        const isIframe = window !== window.top;
+        const hasPlatformDimensions = Object.keys((_b = (_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.platformDimensions) !== null && _b !== void 0 ? _b : {}).length > 0;
+        return isIframe && hasPlatformDimensions;
+    }
     get innerInputField() {
         var _a, _b;
         return (_b = (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.input-field');
@@ -510,6 +555,9 @@ const Q2Select = class {
         var _a;
         (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new FocusEvent('focus'));
     }
+    handleOptionListExternalKeydown(event) {
+        this.optionList.handleExternalKeydown(event);
+    }
     setStatusMessage(message) {
         clearTimeout(this.statusMessageTimer);
         this.statusMessage = '';
@@ -578,11 +626,11 @@ const Q2Select = class {
     render() {
         var _a;
         const showAsPseudo = !this.searchable;
-        return (h("click-elsewhere", { key: 'a3fbee9295ca05dbb4856eebf5e6fb53a9f9e2a3', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: 'a50de81a29cca3188898f6d4b6e16cbbfb6839f4', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: '6059e00c0d5b86920a9193b9bf3bd06d0de27d92', ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
+        return (h("click-elsewhere", { key: 'bf92d884bc170e5311fefe78aa72bfef380ff5d0', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: 'a2e87c13d50fea300e49f81f9b5ce1531f9459a4', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: 'fd8102b44cfdd03fcd00ef8a3b29f1276d176860', ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
                 this.errors.length > 0 &&
                 this.errors.map(error => loc(error))) ||
                 (this.invalid && ['tecton.element.select.invalid']) ||
-                [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", role: "combobox", pseudo: showAsPseudo, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox" }, this.renderCustomDisplay()), h("div", { key: '3d0564757940cb634bac20ff556e540ef455f695', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: 'dfdfcb9a0ca41f229d2b50c3b300f47cc565cace', name: "q2-select-display" })), this.optionsDropdown()));
+                [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", role: "combobox", pseudo: showAsPseudo, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox" }, this.renderCustomDisplay()), h("div", { key: '480a1934886c428e464b4785b0586c71e813858a', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: 'f174b64ec63cbd3aebb32c2a5a7f7dc7a67de853', name: "q2-select-display" })), this.optionsDropdown()));
     }
     optionsDropdown() {
         return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputContainer, open: this.open, minHeight: this.popoverMinHeight, direction: this.popDirection, mode: this.popoverMode || undefined, block: true }, h("div", { class: "popover-content" }, h("q2-option-list", { onPopoverState: this.onPopoverState, ref: el => (this.optionList = el), type: "listbox", id: "option-list", "show-selected": this.showSelected, label: this.listLabel, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: this.onOptionListChange }, h("slot", null)), h("div", { class: "popover-top-container", ref: el => (this.popoverTopContainer = el), hidden: !this.multiple && !this.hasPopoverTop, tabindex: "-1" }, h("slot", { name: "popover-top" }), this.multiple && this.visibilityToggle())), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" }))));