q2-tecton-elements 1.72.0 → 1.73.1

package/dist/cjs/q2-otp.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-BY3aao8R.js');
+var index$1 = require('./index-BqyWHpNu.js');
 
 const q2OtpCss = () => `*{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:flex;justify-content:center;margin:var(--tct-otp-margin, var(--tct-otp-margin-top, var(--app-scale-5x, 25px)) 0 var(--tct-otp-margin-bottom, var(--app-scale-5x, 25px)));font-size:var(--tct-input-font-size, var(--app-font-size, inherit))}:host([hidden]){display:none}.otp-container{--comp-otp-tween:var(--tct-otp-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));--comp-otp-vertical-gap:var(--tct-otp-vertical-gap, var(--app-scale-4x, 20px));--comp-otp-field-size:44px;--comp-otp-field-gap:var(--tct-otp-field-gap, var(--app-scale-2x, 10px));--comp-otp-field-background:var(--tct-otp-field-background, var(--t-base, #ffffff));--comp-otp-field-border-color:var(--tct-otp-field-border-color, var(--t-a11y-gray-color-AA, #404040));--comp-otp-field-border-radius:var(--tct-otp-field-border-radius, var(--tct-border-radius-2, var(--app-border-radius-2, 8px)));--comp-otp-field-border-width:var(--tct-otp-field-border-width, 1px);--comp-otp-field-font-color:var(--tct-otp-field-font-color, var(--t-text, inherit));--comp-otp-field-font-size:var(--tct-otp-field-font-size, var(--app-font-size, var(--const-px-16, 16px)));--comp-otp-field-masked-color:var(--tct-otp-field-masked-color, var(--tct-otp-field-font-color, var(--t-text, #1f1f1f)));--comp-otp-field-masked-size:var(--tct-otp-field-masked-size, var(--tct-otp-field-masked-font-size, var(--const-px-8, 8px)));--comp-otp-field-font-weight:var(--tct-otp-field-font-weight, 400);--comp-otp-field-focus-box-shadow:var(--tct-otp-field-focus-box-shadow, var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc));--comp-otp-field-error-border-color:var(--tct-otp-field-error-border-color, var(--const-stoplight-alert, #c30000));--comp-otp-field-error-focus-ring-color:var(--tct-otp-field-error-focus-ring-color, #c30000);--comp-otp-field-error-focus-box-shadow:var(--tct-otp-field-error-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-error-focus-ring-color));--comp-otp-field-success-border-color:var(--tct-otp-field-success-border-color, var(--const-stoplight-success, #0e8a00));--comp-otp-field-success-focus-ring-color:var(--tct-otp-field-success-focus-ring-color, #0e8a00);--comp-otp-field-success-focus-box-shadow:var(--tct-otp-field-success-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-success-focus-ring-color));--comp-otp-field-disabled-opacity:var(--tct-otp-field-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));--comp-otp-separator-color:var(--tct-otp-separator-color, var(--t-textA, var(--t-a11y-gray-color, #4d4d4d)));--comp-otp-separator-font-size:var(--tct-otp-separator-font-size, var(--const-px-20, 20px));--comp-otp-separator-font-weight:var(--tct-otp-separator-font-weight, 600);align-items:center;display:inline-flex;flex-direction:column;gap:var(--comp-otp-vertical-gap);max-width:100%}.otp-label{display:block;color:var(--tct-input-label-font-color, inherit);font-size:var(--tct-input-label-font-size, inherit);font-weight:var(--tct-input-label-font-weight, 600);letter-spacing:var(--tct-input-label-letter-spacing, inherit);line-height:var(--tct-input-label-line-height, inherit);text-align:center;text-transform:var(--tct-input-label-text-transform, none);transition:color var(--comp-otp-tween);width:100%}.helper-text{color:var(--tct-otp-helper-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));font-size:var(--tct-otp-helper-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));text-align:center}.otp-content{align-items:center;display:inline-flex;flex-direction:column;gap:var(--comp-otp-vertical-gap);max-width:100%}.send-code-hidden{clip:rect(0, 0, 0, 0);height:1px;overflow:hidden;position:absolute;width:1px}.otp-control-group{align-items:center;display:flex;flex-direction:column;gap:var(--comp-otp-vertical-gap);max-width:100%;width:max-content}.fields-container{align-items:center;display:flex;flex-wrap:nowrap;gap:var(--comp-otp-field-gap);justify-content:center;pointer-events:none;position:relative;width:max-content}.fields-shell{max-width:100%;padding:4px;position:relative;width:max-content}.otp-hidden-input{appearance:none;-webkit-appearance:none;background:transparent;border:0;caret-color:transparent;color:transparent;cursor:text;font-size:16px;height:100%;inset:0;margin:0;opacity:1;outline:none;padding:0;pointer-events:auto;position:absolute;width:100%;z-index:1;-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:transparent}.otp-hidden-input::selection{background:transparent;color:transparent}.otp-hidden-input:focus,.otp-hidden-input:focus-visible{outline:none;box-shadow:none}.otp-hidden-input:disabled{cursor:not-allowed}.otp-slot{align-items:center;background:var(--comp-otp-field-background);border-color:var(--comp-otp-field-border-color);border-radius:var(--comp-otp-field-border-radius);border-style:solid;border-width:var(--comp-otp-field-border-width);box-sizing:border-box;color:var(--comp-otp-field-font-color);display:flex;flex:0 0 var(--comp-otp-field-size);height:var(--comp-otp-field-size);justify-content:center;position:relative;transition:border-color var(--comp-otp-tween), box-shadow var(--comp-otp-tween), opacity var(--comp-otp-tween);width:var(--comp-otp-field-size)}.otp-slot.is-active{border-color:var(--tct-otp-field-focus-border-color, var(--comp-otp-field-border-color));box-shadow:var(--comp-otp-field-focus-box-shadow)}.otp-slot .otp-caret{animation:otp-caret-blink 1s step-end infinite;background:currentColor;display:block;height:50%;pointer-events:none;width:2px}.state-error .otp-slot{border-color:var(--comp-otp-field-error-border-color)}.state-error .otp-slot.is-active{box-shadow:var(--comp-otp-field-error-focus-box-shadow)}.state-success .otp-slot{border-color:var(--comp-otp-field-success-border-color)}.state-success .otp-slot.is-active{box-shadow:var(--comp-otp-field-success-focus-box-shadow)}:host([disabled]) .otp-slot{opacity:var(--comp-otp-field-disabled-opacity)}:host([disabled]) .otp-hidden-input{cursor:not-allowed}@keyframes otp-caret-blink{0%,100%{opacity:1}50%{opacity:0}}.otp-char{color:var(--comp-otp-field-font-color);font-family:inherit;font-size:var(--comp-otp-field-font-size);font-weight:var(--comp-otp-field-font-weight);line-height:1;pointer-events:none;user-select:none}.otp-dot{background:var(--comp-otp-field-masked-color);border-radius:50%;display:block;height:var(--comp-otp-field-masked-size);pointer-events:none;width:var(--comp-otp-field-masked-size)}.otp-separator{color:var(--comp-otp-separator-color);font-size:var(--comp-otp-separator-font-size);font-weight:var(--comp-otp-separator-font-weight)}.submit-button{width:100%}.processing-overlay{align-items:center;background:var(--tct-otp-processing-overlay-background, rgba(255, 255, 255, 0.72));border-radius:var(--comp-otp-field-border-radius);display:flex;inset:0;justify-content:center;pointer-events:auto;position:absolute;--tct-loading-spinner-size:var(--tct-otp-processing-spinner-size, 32px);z-index:1}.otp-message{margin:0;text-align:center;width:100%}`;
 
@@ -364,16 +364,16 @@ const Q2Otp = class {
     renderSendCodeButton() {
         if (!this.isAwaitingSendCode)
             return;
-        return (index.h("q2-btn", { block: true, class: "send-code-button", disabled: this.disabled, intent: "workflow-primary", label: this.localizedSendCodeLabel, onClick: this.handleSendCodeClick, ref: el => (this.sendCodeRef = el) }));
+        return (index.h("q2-btn", { block: true, class: "send-code-button", disabled: this.disabled, intent: "primary", label: this.localizedSendCodeLabel, onClick: this.handleSendCodeClick, ref: el => (this.sendCodeRef = el) }));
     }
     renderSubmitArea() {
         if (this.isSuccess) {
             return (index.h("q2-btn", { block: true, class: "submit-button", intent: "neutral", onClick: this.handleSubmitClick }, index.h("q2-icon", { type: "checkmark" }), index$1.loc('Success')));
         }
-        return (index.h("q2-btn", { block: true, class: "submit-button", disabled: this.disabled || !this.isComplete, intent: "workflow-primary", label: this.isVerifying ? this.localizedProcessingLabel : this.localizedSubmitLabel, loading: this.isVerifying, onClick: this.handleSubmitClick }));
+        return (index.h("q2-btn", { block: true, class: "submit-button", disabled: this.disabled || !this.isComplete, intent: "primary", label: this.isVerifying ? this.localizedProcessingLabel : this.localizedSubmitLabel, loading: this.isVerifying, onClick: this.handleSubmitClick }));
     }
     render() {
-        return (index.h("div", { key: '80f709fb9ccac37057bc3da569e4aefa6675d864', "aria-busy": this.isVerifying ? 'true' : undefined, "aria-labelledby": this.label ? this.labelId : undefined, class: {
+        return (index.h("div", { key: '8f4ada9f194f1b0995995e946097b3e24a11f605', "aria-busy": this.isVerifying ? 'true' : undefined, "aria-labelledby": this.label ? this.labelId : undefined, class: {
                 'otp-container': true,
                 'has-focus': this.hasFocus,
                 'is-masked': this.masked,
@@ -381,7 +381,7 @@ const Q2Otp = class {
                 'state-success': this.state === 'success',
                 'state-verifying': this.isVerifying,
                 [`length-${this.normalizedLength}`]: true,
-            }, role: "group" }, this.renderSendCodeButton(), index.h("div", { key: '1192f341199e8fbbd2c04c3fe58d69129888410c', class: { 'otp-content': true, 'send-code-hidden': this.state === 'ready' } }, this.renderLabel(), index.h("div", { key: 'f84aa0d243808206cf31e2900e633f5c5199b197', class: "otp-control-group" }, index.h("div", { key: '8e01108ff520da247f80bb2204b2620a477a652f', class: "fields-shell" }, index.h("div", { key: '7f942c6fb6be407f4c43cb2349614cf33c0ec62b', class: "fields-container" }, index.h("input", { key: '5c1df9b3ff79098f47f40f2ad14165e25a59e5d8', "aria-describedby": this.describedBy, "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-label": this.inputAriaLabel, autocomplete: "one-time-code", autofocus: this.autoFocus, class: "otp-hidden-input", disabled: this.disabled || this.isVerifying || this.isSuccess, inputmode: "numeric", maxLength: this.normalizedLength, onBlur: this.handleFocusOut, onFocus: this.handleFocusIn, onInput: this.handleInputEvent, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, pattern: "[0-9]*", ref: el => (this.inputRef = el), "test-id": "q2OtpInput", type: "text", value: this.value }), this.renderFields()), this.renderProcessingOverlay()), this.renderSubmitArea(), this.renderMessage()), this.renderHelperText())));
+            }, role: "group" }, this.renderSendCodeButton(), index.h("div", { key: '099e1ef5ccc09846faf9952772e61ff7644e5085', class: { 'otp-content': true, 'send-code-hidden': this.state === 'ready' } }, this.renderLabel(), index.h("div", { key: '5ad6ff061779de6562f523148459729d73bbf53a', class: "otp-control-group" }, index.h("div", { key: 'd60e93f2d79d0f4b0348a5b581647ece89e9973c', class: "fields-shell" }, index.h("div", { key: '55b515c8a04e664024dcc66e4d894dcb0ddd4ca4', class: "fields-container" }, index.h("input", { key: 'b8319da6e91ea06ff5632c72326460c0e532393d', "aria-describedby": this.describedBy, "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-label": this.inputAriaLabel, autocomplete: "one-time-code", autofocus: this.autoFocus, class: "otp-hidden-input", disabled: this.disabled || this.isVerifying || this.isSuccess, inputmode: "numeric", maxLength: this.normalizedLength, onBlur: this.handleFocusOut, onFocus: this.handleFocusIn, onInput: this.handleInputEvent, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, pattern: "[0-9]*", ref: el => (this.inputRef = el), "test-id": "q2OtpInput", type: "text", value: this.value }), this.renderFields()), this.renderProcessingOverlay()), this.renderSubmitArea(), this.renderMessage()), this.renderHelperText())));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,10 +1,10 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-BY3aao8R.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 
-const q2PaginationCss = () => `*{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:flex;width:100%}:host([align=right]),:host([alignment=right]){justify-content:flex-end}:host([align=center]),:host([alignment=center]){justify-content:center}:host([align=left]),:host([alignment=left]){justify-content:flex-start}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px));color:var(--tct-pagination-color, inherit);font-size:var(--tct-pagination-font-size, inherit);font-weight:var(--tct-pagination-font-weight, inherit)}.container.stacked{flex-direction:column;column-gap:0;row-gap:var(--tct-pagination-row-gap, var(--app-scale-2x, 10px));height:auto;align-items:stretch}.container.stacked .description{text-align:center}.container.stacked .controls{justify-content:center}.container.stacked .per-page{display:flex;justify-content:center}.container.stacked q2-select{--tct-select-margin:0;width:var(--tct-pagination-perpage-width, 60%)}.controls{display:flex}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.input-display{white-space:nowrap}.input-display{display:grid;grid-template-columns:auto var(--tct-pagination-input-width, 50px) auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.input-display[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border));--tct-btn-icon-hover-background:var(--tct-pagination-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-pagination-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-pagination-btn-icon-stroke-secondary, var(--app-gray, #747474))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}q2-select{--tct-input-align:start;--tct-select-input-min-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));--tct-select-input-max-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));width:var(--tct-pagination-perpage-width, var(--t-pagination-perpage-width, 100%));min-width:var(--tct-pagination-perpage-min-width, var(--t-pagination-perpage-min-width, 110px))}`;
+const q2PaginationCss = () => `*{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:flex;width:100%}:host([align=right]),:host([alignment=right]){justify-content:flex-end}:host([align=center]),:host([alignment=center]){justify-content:center}:host([align=left]),:host([alignment=left]){justify-content:flex-start}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px));color:var(--tct-pagination-color, inherit);font-size:var(--tct-pagination-font-size, inherit);font-weight:var(--tct-pagination-font-weight, inherit)}.container.stacked{flex-direction:column;column-gap:0;row-gap:var(--tct-pagination-row-gap, var(--app-scale-2x, 10px));height:auto;align-items:stretch}.container.stacked .description{text-align:center}.container.stacked .controls{justify-content:center}.container.stacked .per-page{display:flex;justify-content:center}.container.stacked q2-select{--tct-select-margin:0;width:var(--tct-pagination-perpage-width, 60%)}.container.small{flex-wrap:wrap;row-gap:var(--tct-pagination-row-gap, var(--app-scale-2x, 10px));height:auto;max-width:100%}.container.small .description{flex-basis:100%;min-width:0;overflow-wrap:anywhere;text-align:center;white-space:normal;line-height:max(1.2em, var(--app-line-height, 1.428571429em))}.container.small .controls{margin-inline:auto}.controls{display:flex}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.input-display{white-space:nowrap}.input-display{display:grid;grid-template-columns:auto var(--tct-pagination-input-width, 50px) auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.input-display[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border));--tct-btn-icon-hover-background:var(--tct-pagination-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-pagination-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-pagination-btn-icon-stroke-secondary, var(--app-gray, #747474))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}q2-select{--tct-input-align:start;--tct-select-input-min-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));--tct-select-input-max-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));width:var(--tct-pagination-perpage-width, var(--t-pagination-perpage-width, 100%));min-width:var(--tct-pagination-perpage-min-width, var(--t-pagination-perpage-min-width, 110px))}`;
 
 const Q2Pagination = class {
     constructor(hostRef) {
@@ -17,7 +17,9 @@ const Q2Pagination = class {
         this.disabled = false;
         this.checkSize = () => {
             const { hostElement, containerElement } = this;
-            const isOverflowing = this.containerWidth > hostElement.clientWidth;
+            const fontSize = parseFloat(getComputedStyle(containerElement).fontSize);
+            // Reserve enough space for the full controls as the text grows.
+            const isOverflowing = this.containerWidth > hostElement.clientWidth || hostElement.clientWidth < fontSize * 42;
             this.isSmall = isOverflowing;
             index$1.nextPaint(() => {
                 const currentContainerWidth = containerElement.clientWidth;
@@ -72,7 +74,9 @@ const Q2Pagination = class {
         }
     }
     componentDidLoad() {
+        var _a;
         this.containerWidth = this.containerElement.clientWidth;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.containerElement);
         index$1.overrideFocus(this.hostElement);
     }
     // #endregion
@@ -212,6 +216,8 @@ const Q2Pagination = class {
         const classes = ['container'];
         if (this.stacked)
             classes.push('stacked');
+        if (this.isSmall)
+            classes.push('small');
         return classes;
     }
     get currentRange() {
@@ -315,7 +321,7 @@ const Q2Pagination = class {
                 total,
             });
         }
-        return (index.h("nav", { key: 'c42b191eccb70b9e3c684843cebf9f6b06f3c3b3', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": index$1.loc('tecton.element.pagination.title') }, index.h("div", { key: 'eb03cdc19938adac4a5c44887fa7d9853c9b89ab', class: "description", "test-id": "description" }, pagesOnly
+        return (index.h("nav", { key: 'a427944d7134621fe5c1cc469d554cf60ea69271', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": index$1.loc('tecton.element.pagination.title') }, index.h("div", { key: 'ab5e3a0dc0a8c3ab99c8d6754097c37ae1c10193', class: "description", "test-id": "description" }, pagesOnly
             ? index$1.loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -324,10 +330,10 @@ const Q2Pagination = class {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), index.h("div", { key: '0e9a0bcfa6545b08843423378066989cf96ad18e', class: "controls" }, index.h("div", { key: '4ea3b0a64165885dfd1bd525527e2617e4f4d748', class: "btn-group" }, index.h("q2-btn", { key: '72d72c7b974ecbca50c4259cca5028515786af5b', ref: el => (this.firstPageBtn = el), label: index$1.loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, index.h("q2-icon", { key: '26f5f8e8cf23a6d924b4a01796827fb62017809d', type: "chevron-double-left" })), index.h("q2-btn", { key: '5f7845c5917137131cc6703bb59d90c842e32a7e', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'e02ccf51de21789099e2b254019f962dbb5011dc', type: "chevron-left" }))), index.h("div", { key: 'ca201f7a4382e7f3835093c4c3877f7e2a0b5150', class: "input-display", hidden: isFullViewHidden }, index.h("span", { key: 'c690830341a15c25e4ad5a2d2a524d876c9f7cdb', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.page')), index.h("div", { key: '7d08062d6cd495d4025a82413b347ed87915cbce', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, index.h("q2-input", { key: 'e30795721d66d75dd5f349ad4d6d3ffda6023820', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${index$1.loc('tecton.element.pagination.page')} (${index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
+            })), index.h("div", { key: 'e84213e3dbeac1bb54fcd8244e486274869c5fa5', class: "controls" }, index.h("div", { key: 'f5a4cb3a4d467b2ce412afa2bb016e1843ccb364', class: "btn-group" }, index.h("q2-btn", { key: 'b4d315503de340e482ffb042d3cd4dbaff1aa3eb', ref: el => (this.firstPageBtn = el), label: index$1.loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, index.h("q2-icon", { key: '8d437e9a6b00999eee091accd8581b84a2dbe4fe', type: "chevron-double-left" })), index.h("q2-btn", { key: 'bd91788b84cbe8a55fb7e7b53342a6c9a75e3694', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'bf9285d825da06e43e330b565ecf46f72a9ad930', type: "chevron-left" }))), index.h("div", { key: '76ce1e31814ec56e7d060200ee8a87c720c5fc1e', class: "input-display", hidden: isFullViewHidden }, index.h("span", { key: 'b1768b78ca08e2f76892823a165448c298d2a5b4', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.page')), index.h("div", { key: '8909fdeaf8832ec6a104ffad86258d0d3034fbb3', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, index.h("q2-input", { key: '96e0ce1764dc542fcac5a516b608b379bd1453a9', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${index$1.loc('tecton.element.pagination.page')} (${index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page", disabled: disabled })), index.h("span", { key: 'e2f1e51306298ddf428fd4e9fa665b58b2535fc8', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), index.h("div", { key: 'c7a095aaa30743441c0c4d22f55e94801b3a823f', class: "btn-group" }, index.h("q2-btn", { key: 'c52d8837ec35b128a9d3f9c87766ed770edc9600', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'd1d802bddb426070fa1ca92a7937b8405949f01c', type: "chevron-right" })), index.h("q2-btn", { key: '357f5bf5426e6c0004b737238a3c66697fc6a672', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, index.h("q2-icon", { key: '1be92d6fa9252168baf63420271c8b8a77f41d92', type: "chevron-double-right" })))), index.h("div", { key: '96ca4bc582b1dcb830bad146fbf1233f2549f256', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page", disabled: disabled })), index.h("span", { key: '3914f78404deab10b4173df5b16c205067c7e15e', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), index.h("div", { key: 'b5b441d213d99d04b18c976628ba07142e00856f', class: "btn-group" }, index.h("q2-btn", { key: '3299b27a7d24045f2258288e86702a4b7e6d1e37', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'd63e7679e5087a1a03bb17fd0a7c24c0d07bdf87', type: "chevron-right" })), index.h("q2-btn", { key: 'f575528380b7d239db48f49353d71b88ba0e2d9e', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'c76d0fe0dff9095f893604fc41cd4d615075045e', type: "chevron-double-right" })))), index.h("div", { key: '71ad1c246e16a1c84318d7ccf75d50a37246af12', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,11 +1,11 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-BY3aao8R.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 var actionSheet = require('./action-sheet-DUBlF_x3.js');
 
-const q2PillCss = () => `*{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}`;
+const q2PillCss = () => `*{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;max-width:100%;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{min-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;min-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%;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, calc(200 * var(--t-px-1, 1px))));min-width:0;text-align:start}.btn-primary ::slotted(q2-icon[slot=decorator]){flex-shrink:0;--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))}: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)))}.pill-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;min-width:0}.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}`;
 
 const Q2Pill = class {
     constructor(hostRef) {
@@ -273,11 +273,14 @@ const Q2Pill = class {
         this.primaryBtn.focus();
     }
     async popoverStateHandler({ detail: { open } }) {
-        if (this.open !== open)
-            this.open = open;
+        var _a;
+        if (this.open === open)
+            return;
+        this.open = open;
         if (open)
             return;
         this.setOptionListActiveElement(null);
+        (_a = this.primaryBtn) === null || _a === void 0 ? void 0 : _a.focus();
     }
     // #endregion
     // #region Public Methods API
@@ -410,7 +413,7 @@ const Q2Pill = class {
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (index.h("click-elsewhere", { key: '5bbfce776dcd2ef3ac7097b37fd2df039d47c21f', onChange: this.onClickElsewhere }, index.h("div", { key: '9d8d7a4b6afb1d931d762a0e656509a2036180ba', class: wrapperClassNames.join(' ') }, index.h("div", { key: '5bbf245bd78d2ed075b9a16cc46396528f20b823', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, index.h("button", { key: '494b1555d332a62c8a2946da260a9bb5f26849d5', 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.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": text, "aria-pressed": !optionCount ? `${!!active}` : undefined, "aria-describedby": (optionCount && 'option-description') || undefined }, index.h("slot", { key: 'd26426863ec1dadfbf2049ca6b85dcdb28875858', name: "decorator" }), truncatedText)), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (index.h("q2-popover", { key: '1b06b432ce4ab98a1d1d0b70acb7074849e94999', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, index.h("div", { key: 'ea87e923fe84d94fc1f9a1b72b9fd1deef5cb5ad', class: "popover-content" }, index.h("div", { key: '53b50f438af20d4474b42511ee334391ff429fa0', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleSlotKeydown }, index.h("slot", { key: '0996ca12d288c696601919df48ef6c8784bbf8d4', name: "popover-top" })), index.h("q2-option-list", { key: '9faef4049f040e8c22b46107a7a618224cd0e82c', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]) }, index.h("slot", { key: '8f54a5eb6670b9bffb2062eeb9815834b2aa8de7' })), index.h("div", { key: '1e61e07bb5c6bdcdfd68080cc606bb1a42f48d79', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleSlotKeydown }, index.h("slot", { key: '48a8d60e3eae7de823d1e55ab9153dedda9a739d', name: "popover-bottom" })))))));
+        return (index.h("click-elsewhere", { key: '8cba59cde3746d0397305512334eb56357e9e5d4', onChange: this.onClickElsewhere }, index.h("div", { key: '391da54f9fd870e223765e6266291dff9775abe6', class: wrapperClassNames.join(' ') }, index.h("div", { key: '06431fd76c0a9d30833756407c89ff59609bc3a3', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, index.h("button", { key: '609557b9206c91511e78e26c990230e61f7e5c19', 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.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": text, "aria-pressed": !optionCount ? `${!!active}` : undefined, "aria-describedby": (optionCount && 'option-description') || undefined }, index.h("slot", { key: 'e1f4c57b7526f714cf0242e101ec0f5c39ebafa5', name: "decorator" }), index.h("span", { key: '98a770f6f4fabe04d886f66d57e76a4febb31353', class: "pill-label" }, truncatedText))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (index.h("q2-popover", { key: '30fb581a9eeb008262bbb3fc4a82537f1b78af28', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, index.h("div", { key: '6fc858b2064b78b2ccaafd35aefaa2e4c9e1ea07', class: "popover-content" }, index.h("div", { key: '75134f4a5d4296f6f69a70197bf1bd450c05a8e0', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleSlotKeydown }, index.h("slot", { key: 'f570a1a19b97bd7eb4b2ae38975db95ff1153b00', name: "popover-top" })), index.h("q2-option-list", { key: 'aca9ff86903dcf5b4e5138541ac20dac68955fb7', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]) }, index.h("slot", { key: '89c5f3739c36206ceecb06245ba3052491b89898' })), index.h("div", { key: '8f98c6b4a59c2c0675b5648aed4a1110f0136d87', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleSlotKeydown }, index.h("slot", { key: '75ef6c235c31755e0a5b9905db16e02ff8c4eea3', name: "popover-bottom" })))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-BY3aao8R.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 
 const q2RadioGroupCss = () => `*{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))}`;
@@ -198,7 +198,7 @@ const Q2RadioGroup = class {
         const showLabel = this.label || this.optional || this.readonly;
         const { hasError } = this;
         const showLabelRow = (showLabel && !this.hideLabel) || hasError;
-        return (index.h(index.Fragment, { key: '25ec8b2089b54a5d968c3cfb99a1740c5dcbd0d0' }, showLabelRow && (index.h("div", { key: '1ff216a3e27dd4284dbb2f0300e25728f376df62', class: "label-row" }, showLabel && !this.hideLabel && index.h("div", { key: '462c3833b83b524426ef2f937e0bf60c1cc841f7', class: "group-legend" }, index$1.renderLabel(this)), hasError && (index.h("q2-icon", { key: '249e09338abad9e55fa472bcc9807ce2297cd4c3', type: "error", "test-id": "iconError" })))), index.h("fieldset", { key: '2085294bc3fc10c2f3cf20e6a1a0553cb0829e7d', onChange: this.onInnerRadioChange, "aria-invalid": hasError ? `${hasError}` : undefined }, showLabel && index.h("legend", { key: 'ad2686c2e07d168a0cf1cbe0baf844121add6ecd', class: "sr-only" }, index$1.renderLabel(this)), index.h("q2-resize-observer", { key: 'e183977bae5484f38356b17b274d6e3125d4d603', onTctResize: this.handleResize, disabled: this.tileLayout || this.orientation !== 'horizontal' }, this.inputDom()))));
+        return (index.h(index.Fragment, { key: '0503a52d9cb4715cba418f445b708ad650aa5f1f' }, showLabelRow && (index.h("div", { key: '7236b03ea65a44bbfacf57944370236c9653d69c', class: "label-row" }, showLabel && !this.hideLabel && index.h("div", { key: 'fbede7f7cfbd2c0fe8364a77966009a2e14ede37', class: "group-legend" }, index$1.renderLabel(this)), hasError && (index.h("q2-icon", { key: 'b7d7456a6fd1e673d5799748a727db2babc3d2bf', type: "error", "test-id": "iconError" })))), index.h("fieldset", { key: 'cba87bdefb32eaa0cd6cc1760d874fd622146b5e', onChange: this.onInnerRadioChange, "aria-invalid": hasError ? `${hasError}` : undefined }, showLabel && index.h("legend", { key: 'c4ff0e86435564ece7e468ecd7b0e373ae9fc078', class: "sr-only" }, index$1.renderLabel(this)), index.h("q2-resize-observer", { key: 'f3bfe6941b46da58433ed959017a4383c07ce16d', onTctResize: this.handleResize, disabled: this.tileLayout || this.orientation !== 'horizontal' }, this.inputDom()))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-BY3aao8R.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 
 const q2RadioCss = () => `*{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:block;letter-spacing:var(--tct-radio-label-letter-spacing, inherit)}:host([checked]:not([checked=false])){letter-spacing:var(--tct-radio-label-letter-spacing-checked, var(--tct-radio-checked-label-letter-spacing, var(--tct-checkbox-selected-letter-spacing, var(--tct-radio-label-letter-spacing, inherit))))}:host(:active){letter-spacing:var(--tct-radio-label-letter-spacing-active, var(--tct-radio-label-letter-spacing, inherit))}.radio-container{--comp-radio-mark-track-size:36px;--comp-radio-mark-size:var(--tct-radio-mark-size, 20px);--comp-radio-mark-fill:var(--tct-radio-background-fill, transparent);--comp-radio-mark-stroke:var(--tct-radio-background-stroke, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-radio-mark-stroke-width:var(--tct-radio-background-stroke-width, var(--tct-radio-stroke-width, 2));--comp-radio-mark-color-transition:background-color var(--tct-radio-background-transition, var(--tct-checkbox-tween, var(--app-tween-1, 0.15s ease))), border-color var(--tct-radio-background-transition, var(--tct-checkbox-tween, var(--app-tween-1, 0.15s ease)));--comp-radio-mark-dot-fill:var(--tct-radio-select-fill-default, transparent);--comp-label-content-color:var(--tct-radio-label-color, inherit);--comp-label-content-font-weight:var(--tct-radio-label-font-weight, var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400)));--comp-label-content-margin-right:var(--tct-radio-label-margin-right, 0);--comp-label-content-gap:var(--tct-radio-label-gap, 0);--comp-label-hidden-columns:var(--tct-radio-hidden-columns, var(--tct-radio-label-hidden-columns, var(--comp-radio-mark-track-size) 1fr));--comp-radio-mark-transition:box-shadow var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.15s ease))), transform var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.15s ease)));--comp-radio-mark-box-shadow:var(--tct-radio-box-shadow, none);--comp-radio-mark-fill-checked:var(--tct-radio-checked-background-fill, var(--t-base, #ffffff));--comp-radio-mark-stroke-checked:var(--tct-radio-checked-stroke-color, var(--t-primary, #6a4a9e));--comp-radio-mark-dot-fill-checked:var(--tct-radio-select-fill-checked, var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-primary, #6a4a9e)))));--comp-label-content-font-weight-checked:var(--tct-radio-label-font-weight-checked, var(--tct-radio-checked-label-font-weight, var(--tct-checkbox-selected-font-weight, var(--comp-label-content-font-weight))));--comp-label-content-color-checked:var(--tct-radio-label-font-color-checked, var(--tct-radio-checked-label-font-color, var(--tct-radio-checked-label-color, inherit)));--comp-radio-mark-fill-active:var(--tct-radio-background-fill-active, #e8ddef);--comp-radio-mark-stroke-active:var(--tct-radio-background-stroke-active, var(--t-primary-d2, #553b7e));--comp-radio-mark-dot-fill-active:var(--tct-radio-selected-fill-active, var(--comp-radio-mark-dot-fill-checked));--comp-label-content-font-weight-active:var(--tct-radio-label-font-weight-active, var(--comp-label-content-font-weight));--comp-label-content-color-active:var(--tct-radio-label-color-active, var(--comp-label-content-color));--comp-radio-mark-fill-hover:var(--tct-radio-hover-background-fill, #f3eefa);--comp-radio-mark-stroke-hover:var(--tct-radio-hover-stroke-color, var(--t-primary, #6a4a9e));--comp-radio-mark-stroke-checked-hover:var(--tct-radio-checked-hover-stroke-color, var(--t-primary-d2, #553b7e));--comp-label-content-color-hover:var(--tct-radio-hover-label-color, var(--comp-label-content-color));--comp-radio-mark-fill-focus:var(--tct-radio-focus-background-fill, var(--comp-radio-mark-fill));--comp-radio-mark-stroke-focus:var(--tct-radio-focus-stroke-color, var(--comp-radio-mark-stroke));--comp-label-content-color-focus:var(--tct-radio-focus-label-color, var(--comp-label-content-color));--comp-radio-mark-box-shadow-focus-visible:var(--tct-radio-box-shadow-focus-visible, var(--tct-radio-focus-box-shadow, var(--const-double-focus-ring)))}.radio-container label[for]{color:var(--comp-label-content-color);font-weight:var(--comp-label-content-font-weight);font-size:var(--tct-radio-label-font-size, var(--const-px-14, 14px));align-items:center;cursor:pointer;margin-right:var(--comp-label-content-margin-right);display:grid;grid-template-columns:var(--comp-radio-mark-track-size) 1fr;gap:var(--comp-label-content-gap);min-height:var(--tct-radio-min-height, var(--comp-radio-mark-track-size));user-select:none}.radio-container label[for].label-hidden{grid-template-columns:var(--comp-label-hidden-columns)}.radio-container label[for] .description-content{grid-column:2}.radio-container .radio-mark{--comp-radio-mark-current-fill:var(--comp-radio-mark-fill);--comp-radio-mark-current-stroke:var(--comp-radio-mark-stroke);border-radius:50%;box-shadow:var(--comp-radio-mark-box-shadow);height:var(--comp-radio-mark-size);justify-self:center;overflow:hidden;position:relative;transition:var(--comp-radio-mark-transition);width:var(--comp-radio-mark-size)}.radio-container .radio-mark::before{background:var(--comp-radio-mark-current-fill);border-color:var(--comp-radio-mark-current-stroke);border-radius:50%;border-style:solid;border-width:calc(var(--comp-radio-mark-stroke-width) * 1px);box-sizing:border-box;content:"";height:calc(var(--comp-radio-mark-size) - 2px + var(--comp-radio-mark-stroke-width) * 1px);left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);transition:var(--comp-radio-mark-color-transition);width:calc(var(--comp-radio-mark-size) - 2px + var(--comp-radio-mark-stroke-width) * 1px)}.radio-container .radio-mark::after{background:var(--comp-radio-mark-dot-fill);border-radius:50%;content:"";height:calc(var(--comp-radio-mark-size) / 2);left:50%;position:absolute;top:50%;transform:translate(-50%, -50%) scale(0);transition:transform var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.15s ease)));width:calc(var(--comp-radio-mark-size) / 2)}.radio-container input:focus-visible{box-shadow:none}.radio-container input:checked+label .radio-mark{--comp-radio-mark-current-fill:var(--comp-radio-mark-fill-checked);--comp-radio-mark-current-stroke:var(--comp-radio-mark-stroke-checked)}.radio-container input:checked+label .radio-mark::after{background:var(--comp-radio-mark-dot-fill-checked);transform:translate(-50%, -50%) scale(1)}.radio-container input:checked+label .label-content{font-weight:var(--comp-label-content-font-weight-checked);color:var(--comp-label-content-color-checked)}.radio-container input:hover:not(:disabled)+label .radio-mark{--comp-radio-mark-current-fill:var(--comp-radio-mark-fill-hover);--comp-radio-mark-current-stroke:var(--comp-radio-mark-stroke-hover)}.radio-container input:hover:not(:disabled)+label .label-content{color:var(--comp-label-content-color-hover)}.radio-container input:active:not(:disabled)+label .radio-mark{--comp-radio-mark-current-fill:var(--comp-radio-mark-fill-active);--comp-radio-mark-current-stroke:var(--comp-radio-mark-stroke-active);transform:scale(0.9)}.radio-container input:active:not(:disabled)+label .radio-mark::after{background:var(--comp-radio-mark-dot-fill-active)}.radio-container input:active:not(:disabled)+label .label-content{font-weight:var(--comp-label-content-font-weight-active);color:var(--comp-label-content-color-active)}.radio-container input:focus+label .radio-mark{--comp-radio-mark-current-fill:var(--comp-radio-mark-fill-focus);--comp-radio-mark-current-stroke:var(--comp-radio-mark-stroke-focus)}.radio-container input:focus+label .label-content{color:var(--comp-label-content-color-focus)}.radio-container input:focus-visible+label .radio-mark{box-shadow:var(--comp-radio-mark-box-shadow-focus-visible)}.radio-container input:checked:hover:not(:disabled)+label .radio-mark{--comp-radio-mark-current-stroke:var(--comp-radio-mark-stroke-checked-hover)}.radio-tile label[for]{color:var(--tct-radio-label-font-color, var(--tct-radio-label-color, inherit));align-items:center;border:0;background:var(--tct-radio-background-fill, var(--t-base, #ffffff));cursor:pointer;display:block;font-size:var(--tct-radio-tile-label-font-size, var(--tct-radio-label-font-size, var(--const-px-14, 14px)));overflow:hidden;padding:var(--tct-radio-tile-padding, 10px 20px);position:relative;text-align:center;transition:background var(--tct-tween-1, var(--app-tween-1, 0.15s ease)), color var(--tct-tween-1, var(--app-tween-1, 0.15s ease)), box-shadow var(--tct-tween-1, var(--app-tween-1, 0.15s ease));white-space:nowrap;user-select:none}.radio-tile input:focus-visible{box-shadow:none}.radio-tile input:checked+label{background:var(--tct-radio-tile-checked-background-fill, var(--tct-radio-checked-background-fill, #f3eefa));color:var(--tct-radio-tile-checked-label-color, var(--tct-radio-checked-label-color, var(--t-primary, #6a4a9e)))}.radio-tile input:checked+label:after{background:var(--tct-radio-tile-checked-stroke-color, var(--t-primary, #6a4a9e));border-radius:var(--tct-radio-tile-indicator-border-radius, 9999px 9999px 0 0);bottom:0;content:"";height:var(--tct-radio-tile-indicator-height, 2px);left:0;position:absolute;right:0}.radio-tile input:not(:checked):hover:not(:disabled)+label{background:var(--tct-radio-tile-hover-background-fill, #fafafa);color:var(--tct-radio-hover-label-color, var(--tct-radio-label-color, inherit))}.radio-tile input:not(:checked):active:not(:disabled)+label{background:var(--tct-radio-tile-active-background-fill, var(--t-gray-14, #f2f2f2))}.radio-tile input:focus-visible+label{z-index:1;box-shadow:var(--tct-radio-tile-focus-box-shadow, var(--const-double-focus-ring))}:host(:not(:first-child)) .radio-tile label[for]{border-left:var(--tct-radio-tile-divider-width, 1px) solid var(--tct-radio-tile-divider-color, var(--t-gray-13, #e6e6e6))}:host(:first-child) .radio-tile label[for]{border-radius:var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px)) 0 0 var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px))}:host(:last-child) .radio-tile label[for]{border-radius:0 var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px)) var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px)) 0}:host(:only-child) .radio-tile label[for]{border-radius:var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px))}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}`;
@@ -93,7 +93,7 @@ const Q2Radio = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '8fbe0ad9c8b0712fd51dbac67baae6209ebf2532', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, index.h("input", { key: 'a9322154f304963731fb3d6ee99632c06938f27f', 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 ? index$1.loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), index.h("label", { key: '234f95d4c4656e4325a15853bacf888d7a4ae446', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (index.h("span", { key: 'ac98c34734a5e54b347cc2a48dc23d3ea2eb31ce', class: "radio-mark", "aria-hidden": "true" })), !this.hideLabel && (index.h("div", { key: '41dd2c195bc03dd8af8d5722e4aa2323cbeaab76', class: "label-content" }, (this.label && index$1.loc(this.label)) || '', index.h("slot", { key: '595014c6a32c2e98f7612dc51f0bd89579770988' }))))));
+        return (index.h("div", { key: '1aafcfbdb7d6e2863618d6741bc12491a109ec80', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, index.h("input", { key: '1989707753be2d6b8bc8c69098a5c9bf27af99b7', 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 ? index$1.loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), index.h("label", { key: '93a6f7f8d718c8070c4d4d88c3b48905f518e166', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (index.h("span", { key: 'f351a1aef39845bbb1bbd360037d36486de27cd9', class: "radio-mark", "aria-hidden": "true" })), !this.hideLabel && (index.h("div", { key: 'c9cb25115cffc72dfbb52024b6343f16a0744fbc', class: "label-content" }, (this.label && index$1.loc(this.label)) || '', index.h("slot", { key: '8d63e148c83fb247b60b719d3de8627c327efaa4' }))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-DUaTw_1N.js');
 var index$2 = require('./index-CgG3VNXc.js');
-var index$1 = require('./index-BY3aao8R.js');
+var index$1 = require('./index-BqyWHpNu.js');
 
 const q2RelativeTimeCss = () => `*{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}`;
 
@@ -154,7 +154,7 @@ const Q2RelativeTime = class {
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return index.h(index.Fragment, { key: '7bcf2e8d9cb391ea43664b9cf01ec6d474a1743e' }, shouldShow ? index.h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return index.h(index.Fragment, { key: 'e32fc9201354f10456368f47c0a7b6e50fd3eeb2' }, shouldShow ? index.h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-resize-observer.cjs.entry.js

@@ -78,7 +78,7 @@ const Q2ResizeObserver = class {
     // #endregion
     // #region Render Methods
     render() {
-        return index.h("slot", { key: 'f5cc2cee6e979f047d3854d243ec3560ae5cb35d', onSlotchange: this.handleSlotChange });
+        return index.h("slot", { key: '78ea06c9c3963fe4fe145d66c42b546432d10e95', onSlotchange: this.handleSlotChange });
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-search.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-BY3aao8R.js');
+var index$1 = require('./index-BqyWHpNu.js');
 
 const q2SearchCss = () => `*{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}}}.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, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));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, 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}.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{display:block;margin:var(--tct-search-margin, var(--tct-search-margin-top, var(--app-scale-5x, 25px)) 0 var(--tct-search-margin-bottom, var(--app-scale-5x, 25px)))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.q2-search-container{display:block;position:relative}.q2-search-input{--tct-input-icon-size:var(--tct-search-icon-size, var(--const-px-18, 18px));margin:0;--tct-input-min-height:var(--tct-search-input-min-height, initial);--tct-input-max-height:var(--tct-search-input-max-height, none);--tct-input-horizontal-gap:var(--tct-search-input-horizontal-gap, var(--app-scale-2x, 10px));--tct-input-icon-container-icon-min-width:var(--tct-search-icon-min-width, fit-content)}.popover-content{display:flex;flex-direction:column}.popover-content[data-loading=true]{min-height:var(--tct-search-loading-popover-height, var(--app-scale-12x, 60px));position:relative}.popover-content[data-loading=true] .loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.popover-content[data-loading=true] .loading-overlay q2-loading{--tct-loading-spinner-size:var(--tct-search-loading-spinner-size, var(--app-scale-8x, 40px));width:1em;height:1em}.popover-top-container[hidden],.popover-bottom-container[hidden]{display:none}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-search-multi-select-header-padding, var(--app-scale-2x, 10px));background:var(--tct-search-multi-select-header-background, var(--t-base, #ffffff));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-search-multi-select-option-padding, 2px 5px);font-size:var(--tct-search-multi-select-option-font-size, inherit);border-radius:var(--tct-search-multi-select-option-border-radius, var(--app-border-radius-1, 4px));background:var(--tct-search-multi-select-option-background, transparent);color:var(--tct-search-multi-select-option-font-color, inherit)}.popover-top-container .multi-select-header label:hover{background:var(--tct-search-multi-select-option-hover-background, var(--t-gray-14, #f2f2f2));color:var(--tct-search-multi-select-option-hover-font-color, var(--t-gray-5, #404040))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-search-multi-select-option-active-background, var(--t-gray-4, #333333));color:var(--tct-search-multi-select-option-active-font-color, var(--t-base, #ffffff))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-search-multi-select-option-disabled-opacity, var(--app-disabled-opacity, 0.4));cursor:not-allowed}.popover-top-container .multi-select-header input:focus-visible+label{box-shadow:var(--const-double-focus-ring)}.no-results{padding:var(--tct-search-no-results-padding, var(--app-scale-3x, 15px));color:var(--tct-search-no-results-font-color, var(--t-textA, rgba(77, 77, 77, 0.77)));text-align:center}`;
 
@@ -46,7 +46,7 @@ const Q2Search = class {
         /**
          * Hides the field's `<label>` element from view.
          * @warning
-         * Only use when a visible label is impractical.
+         * Hides the label visually. `label` text is still required for screenreader compliance.
          */
         this.hideLabel = false;
         /**
@@ -772,7 +772,7 @@ const Q2Search = class {
         return (index.h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: (_a = this.innerInputContainer) !== null && _a !== void 0 ? _a : undefined, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, align: useBlock ? undefined : this.popoverAlignment, block: useBlock }, index.h("div", { class: "popover-content", "data-loading": this.loading ? 'true' : 'false', "aria-busy": this.loading ? 'true' : null }, index.h("div", { class: "popover-top-container", hidden: !this.hasPopoverTop && !(this.multiple && this.showSelectedToggle), tabindex: "-1" }, index.h("slot", { name: "popover-top" }), !this.loading && this.renderMultiSelectHeader()), index.h("q2-option-list", { ref: el => (this.optionList = el), type: "listbox", id: this.optionListId, label: index$1.loc(this.listLabel), multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, showSelected: this.showSelected, customSearch: true, hidden: this.loading, onChange: (e) => e.stopPropagation(), onTctChange: this.onOptionListChange }, index.h("slot", null)), showEmpty && this.renderEmpty(), index.h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, index.h("slot", { name: "popover-bottom" })), this.loading && (index.h("div", { class: "loading-overlay", "aria-hidden": "true" }, index.h("q2-loading", { type: "spinner" }))))));
     }
     render() {
-        return (index.h(index.Fragment, { key: '78ce7b735d59271600debb18ab2f0f5cf315e465' }, index.h("div", { key: 'd3e9a713581842cc62969a0df9556733edf6e378', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), index.h("click-elsewhere", { key: '6912af1d8f31af8de7c7ffb28786756819c57afc', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, index.h("q2-input", { key: '95a5397765aab6d3279b3d81cc31215f235aefc2', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && index$1.loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? index$1.loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => index$1.loc(e))) ||
+        return (index.h(index.Fragment, { key: '4b3787554c37521bc3467345cdd1d733cffba3a5' }, index.h("div", { key: '696caa142cffecf1e0d62afafd826dce37f75512', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), index.h("click-elsewhere", { key: 'f8b493ec8f7da09fad48f9fa30f0e9be7fbaedf4', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, index.h("q2-input", { key: '44e0ad4b7825ac319dd4277ccb93d4dd66acef12', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && index$1.loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? index$1.loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => index$1.loc(e))) ||
                 (this.invalid && ['tecton.element.search.invalid']) ||
                 [], ariaExpanded: this.isInputOnlyMode ? undefined : `${this.open}`, ariaControls: this.isInputOnlyMode ? undefined : this.optionListId, ariaHaspopup: this.isInputOnlyMode ? undefined : 'listbox', hideMessages: true, _role: this.isInputOnlyMode ? undefined : 'combobox', onTctInput: this.inputInputHandler, onInput: (e) => e.stopImmediatePropagation(), onChange: (e) => e.stopPropagation(), onTctChange: (e) => e.stopPropagation(), badgeValue: this.badgeValue }, this.renderCustomDisplay()), this.renderOptionsDropdown())));
     }

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-BY3aao8R.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 
 const q2SectionCss = () => `*{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:block;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, inherit));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));border-width:var(--tct-section-border-width, 0);border-style:var(--tct-section-border-style, solid);border-color:var(--tct-section-border-color, none)}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:var(--tct-section-title-margin, 0);font-size:var(--tct-section-title-font-size, var(--const-px-20, 20px));font-weight:var(--tct-section-title-font-weight, 600);text-transform:var(--tct-section-title-text-transform, none);letter-spacing:var(--tct-section-title-letter-spacing, inherit)}q2-icon{--tct-icon-size:var(--tct-section-icon-size, var(--const-px-18, 18px));transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}q2-btn{--tct-btn-icon-hover-background:var(--tct-section-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-section-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-section-btn-icon-stroke-secondary, var(--app-gray, #747474))}`;
@@ -188,9 +188,9 @@ const Q2Section = class {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (index.h("section", { key: '1614590b2058a69ebaee5a59455ec5c8bfa30bde', class: "wrapper" }, index.h("header", { key: 'e52e3037b59ac3443e812299114850dd6ed8810b', class: hasHeader ? 'has-header' : '' }, index.h("div", { key: '2066c8ff48cb4c6445068207533b3b6b808e9dd7', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && index.h("h2", { key: 'a159d8b6bc29e10711b603aef2ce6c1419f4b7ae', class: "title" }, index$1.loc(this.label)), index.h("div", { key: '829f24123711551a6e3792cb66a2759386d6bec8', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, index.h("slot", { key: '22c2518c55bf5f6160917beea8ab2c523bf76169', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (index.h("q2-btn", { key: '950c09ccfad31453393a52cd21321338d53ac03b', label: index$1.loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, index.h("q2-icon", { key: 'a962ea4f0f5c0ba761d3c3eafd31a16f0338c8da', type: "chevron-up" })))), index.h("div", { key: '45a1762386b7bf88fcaa50c18c1ac059b93d2e59', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (index.h("section", { key: '5adb22a7e6cf098fa3cf2325c945c6aa1c20b2d5', class: "wrapper" }, index.h("header", { key: 'c04df6d07756c27374e4be85ad88848a0c1ac897', class: hasHeader ? 'has-header' : '' }, index.h("div", { key: '8cd09e8bf367a7510b91106b8ebd4f419faff861', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && index.h("h2", { key: '195e1523e68c83e294bd92d617b8c4d44e679494', class: "title" }, index$1.loc(this.label)), index.h("div", { key: 'e493986ee113d44bf74b11116003939f3db24bd7', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, index.h("slot", { key: '44f2dc2ca76acfd800a1435608a75bf6e3258d37', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (index.h("q2-btn", { key: 'b2602555b9282c8149780f65d2fbaa65febc1f50', label: index$1.loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, index.h("q2-icon", { key: '62728524b58cf5cf7aa2531df1218d3bf0b40b0a', type: "chevron-up" })))), index.h("div", { key: '13ef854a01937880007fb4021b1528c1b83fe937', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, index.h("div", { key: '80508c39608fa4bf3d6f1911ff592f04e5115014', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, index.h("slot", { key: 'c88062ea0a59b62143e22c8492a8d06826a27a83', ref: (el) => (this.contentSlot = el) })))));
+            } }, index.h("div", { key: '866d8b0301a9c5979f5b3bd31086d25f73373709', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, index.h("slot", { key: '36c97155aa106dc1587537066e031c7d6c032295', ref: (el) => (this.contentSlot = el) })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-BY3aao8R.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 var actionSheet = require('./action-sheet-DUBlF_x3.js');
 
@@ -412,8 +412,12 @@ const Q2Select = class {
         this.inputKeydownHandler(event);
     }
     popoverStateChanged({ detail: { open } }) {
-        if (this.open !== open)
-            this.open = open;
+        if (this.open === open)
+            return;
+        this.open = open;
+        if (open)
+            return;
+        this.focusInput();
     }
     handleTctClick() {
         const { name, version } = index$1.getBrowserInfo();
@@ -841,7 +845,7 @@ const Q2Select = class {
             ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), index.h("label", { htmlFor: "selected" }, index$1.loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
     }
     render() {
-        return (index.h("click-elsewhere", { key: '5c9a6d681aedcebfbadd6b1249f7bcd96c27809c', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
+        return (index.h("click-elsewhere", { key: 'c5ee7401b7dc4350fb01992e9a8a76e6700cb63c', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-stepper-pane.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DUaTw_1N.js');
 var component = require('./component-iASoq6gx.js');
-var index$1 = require('./index-BY3aao8R.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 
 const q2StepperPaneCss = () => `*{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:block;position:relative}`;
@@ -75,7 +75,7 @@ const Q2StepperPane = class {
     // #region Render Methods
     render() {
         const { label, isActive } = this;
-        return (index.h(index.Host, { key: '7acf643f717380c37eb25334534afbca81ac8ab6', role: "listitem" }, index.h(index.Fragment, { key: '0241a9ad68973eea81c961070d6171dab3241f79' }, index.h("div", { key: '6678cb4a7e65a3a4341ff552682c1011c588108b', role: "group", "aria-labelledby": "pane-label", tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, index.h("slot", { key: '0f8d339f894bdaa55bd5bdf94b1220da7a083dde' })), index.h("div", { key: '51e3934ad791e45486360ab8c6509b68e3a15d9d', hidden: true }, index.h("span", { key: '96fe08c826d87f86559fe2dbb586914b4065eb40', id: "pane-label" }, index.h("slot", { key: 'b4cab1594ae047f032fbaa67f75167e31cc4cdf7', name: "label", onSlotchange: () => this.contentChange.emit() }, label && index$1.loc(label))), index.h("slot", { key: '473cf6b9bc3ef5995d11e46502db1321d59baa5e', name: "description", onSlotchange: () => this.contentChange.emit() })), index.h("slot", { key: '76cb24680ed1ec8a49956f888accf3fd07da7fa0', name: "children" }))));
+        return (index.h(index.Host, { key: '3929b6bdb716394892be2bcdd933864e43f0204e', role: "listitem" }, index.h(index.Fragment, { key: 'd913741a6b71aebef92be14fd7ee541a3d5568da' }, index.h("div", { key: '038d29ac861f70ad15350da7733b39eece30e538', role: "group", "aria-labelledby": "pane-label", tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, index.h("slot", { key: '56f4c0d9edfe134886d46367f2c801348267b53d' })), index.h("div", { key: '88bf8a9e1a6124c39d9ac4ee8906f61ac026966a', hidden: true }, index.h("span", { key: 'db485a5e84ab67fe714f0861fcd05c4b0bd7722f', id: "pane-label" }, index.h("slot", { key: '940a9a3a8543fd4c64425db2b7ea7b9cf079c947', name: "label", onSlotchange: () => this.contentChange.emit() }, label && index$1.loc(label))), index.h("slot", { key: '74a78697ed1aa85fca66743023d303c7abea0116', name: "description", onSlotchange: () => this.contentChange.emit() })), index.h("slot", { key: '4fb660b547a2da7dca37de9106b20b93b72aaf83', name: "children" }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-stepper-vertical.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-BY3aao8R.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 var sanitizeHtmlString = require('./sanitize-html-string-D17Pr7-c.js');
 
@@ -328,7 +328,7 @@ const Q2StepperVertical = class {
         return (index.h("li", { role: "presentation" }, index.h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelledBy, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, label && (index.h(index.Fragment, null, index.h("span", { class: "sr-only", id: positionId }, positionLabel), index.h("span", { class: "sr-only", id: statusId }, statusLabel))), statusIcon ? (index.h("div", { class: "step-icon" }, index.h("q2-icon", { "aria-hidden": "true", type: statusIcon }))) : (index.h("div", { class: "step-bubble" }, stepNumber)), label && (index.h("div", null, index.h("div", { class: "step-label", id: labelId, innerHTML: sanitizeHtmlString.sanitizeHTMLString(stepLabel) }), description && (index.h("div", { class: "step-description", id: descriptionId, innerHTML: sanitizeHtmlString.sanitizeHTMLString(description) }))))), this.renderSpacer(pane, isExpanded, isLastStep)));
     }
     render() {
-        return (index.h(index.Fragment, { key: '9d40414e7b510493b0236568c4d6231eeacdbd80' }, index.h("ul", { key: 'b3a444833439d59be874a2bf04833f8df0ff107f', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), index.h("div", { key: '34f3841d0eb0c5fe96670ac3d5e87244682ace74', role: "list" }, index.h("slot", { key: 'e224e413162cb28eab4ec0e8b51367ed3b83fa0b' }))));
+        return (index.h(index.Fragment, { key: 'd2e82613e91ef3acf210781f807807b0fba8e7fc' }, index.h("ul", { key: '1ad1e36d0fca4b0c1cf793de43d9ea9ccb76974f', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), index.h("div", { key: 'ee710c6cb41011be7a8223ec817563cfeaeb6b71', role: "list" }, index.h("slot", { key: '0d1f6f53b73f72f163fc219de8db9736f669720d' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-stepper.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-BY3aao8R.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 var sanitizeHtmlString = require('./sanitize-html-string-D17Pr7-c.js');
 
@@ -296,7 +296,7 @@ const Q2Stepper = class {
         const containerClasses = ['step-container'];
         if (scrollEnabled)
             containerClasses.push('has-scroll');
-        return (index.h(index.Fragment, { key: 'cd7a09546e4b74cf98f5e27dbcf0efce71e02781' }, index.h("div", { key: 'aaa383584217da20fdd01174f4b136dfef0128b7', class: containerClasses.join(' ') }, scrollEnabled && (index.h(index.Fragment, { key: '6f7f38d768b274409606132cc62d36d48812f50c' }, index.h("div", { key: '98e26550803496a0edd0e7415b4ec9e16b501722', class: "gradient-left", hidden: !showScrollLeft }), index.h("div", { key: '58102ecd26dd3f6b36d530f36ecc109b287b4faa', class: "gradient-right", hidden: !showScrollRight }), index.h("q2-btn", { key: 'a475ba4a846ea5cf93a5ca46422a5473e0d266bd', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: index$1.loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, index.h("q2-icon", { key: 'b040f724a926e5c07a81438e3586e0eb7a3c063b', type: "chevron-left" })), index.h("q2-btn", { key: '119dbcd49ce282cbccd58be097f8833e22df4fb4', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: index$1.loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, index.h("q2-icon", { key: 'c656a9493134eb6a4ea0a008ee94829fc708ecfe', type: "chevron-right" })))), index.h("ul", { key: '09e1472989c7c2e6c40504072bca2790865e013a', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), index.h("div", { key: '0b25c172d585892aa9e286dac6080ce2bbb80e1a', role: "list" }, index.h("slot", { key: '507375368c8e89a94f8af0a44bf4951fd14d7466', onSlotchange: () => this.onSlotChange() }))));
+        return (index.h(index.Fragment, { key: '423f7d50f787abf21c14730ae9cd50cd3638b17b' }, index.h("div", { key: '2ffacd2f9792075956748eb6960975d9aeda28ad', class: containerClasses.join(' ') }, scrollEnabled && (index.h(index.Fragment, { key: 'da90a671295ce6702c3bc6f1ab71f671cda2c9c8' }, index.h("div", { key: '319c4a75dfafd7b03d3f7f13156f24bd1ca7b0c3', class: "gradient-left", hidden: !showScrollLeft }), index.h("div", { key: '80a08dc979685d94f6cfe20d66787d06e7d46014', class: "gradient-right", hidden: !showScrollRight }), index.h("q2-btn", { key: '43a71cb3212ddbe37c6e7d7051850efd49ced456', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: index$1.loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, index.h("q2-icon", { key: '19ee5abc690bba84016fb8c692a74b5c233aa426', type: "chevron-left" })), index.h("q2-btn", { key: 'f26bc502269a5d60308aba041a6d9a75efcf2573', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: index$1.loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, index.h("q2-icon", { key: '7f35a54468433010427213e18d213b1c227413a6', type: "chevron-right" })))), index.h("ul", { key: '0bc4eed617263c7e4a6138c3a884f6a1b8bc2ca6', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), index.h("div", { key: '87945c612fcaa70164faa50d78bb63c9b290e3f2', role: "list" }, index.h("slot", { key: '4b55529f41b4731dc1424c8be4fcd941ff2c2f33', onSlotchange: () => this.onSlotChange() }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-surface.cjs.entry.js

@@ -86,7 +86,7 @@ const Q2Surface = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h(index.Host, { key: '8dd96991bc74e2157dc256f21eb4953eaeffdd46' }, index.h("div", { key: 'a5b315fd3e6dd999cd704b3fd2c9de5ffb139033', class: "container", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, index.h("slot", { key: '4897bfe06a95bf14eddf2bb964bf4a27ed96798a' }))));
+        return (index.h(index.Host, { key: 'fba508447ca646c22aa4a14872d78e02294a2fa1' }, index.h("div", { key: '46ac755e4c071b2345be0ba4272f283ac2758a82', class: "container", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, index.h("slot", { key: '699fdd1427248cdff8ecf1b3b1ca1d4a892dd763' }))));
     }
     get hostElement() { return index.getElement(this); }
 };