q2-tecton-elements 1.66.2 → 1.67.0

package/dist/q2-tecton-elements/q2-select.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2SelectCss","Q2Select","constructor","hostRef","this","guid","createGuid","lastTouchWasInPopover","scheduledAfterRender","hasCustomDisplay","hasPopoverBottom","hasPopoverTop","inputFocused","open","prioritizeSearch","searchText","showSelected","structuredSelectedOptions","disabled","hoist","_a","window","Tecton","useActionSheets","listLabel","loc","minRows","multilineOptions","multiple","optional","popoverMode","readonly","searchable","selectedOptions","addTouchEventListeners","isMobile","popoverElement","addEventListener","handleTouchMove","passive","clickedElsewhere","event","target","localName","stopPropagation","hostElement","getRootNode","nodeName","destroyEventListeners","screen","orientation","removeEventListener","handleOrientationChange","visualViewport","removeTouchEventListeners","isLandscape","isModule","_b","platformDimensions","orientationType","includes","_d","_c","type","originalSearchable","document","activeElement","focus","initEventListeners","initMutationObserver","observer","MutationObserver","onMutationObserved","observe","childList","subtree","mutationObserver","inputBlurHandler","inputChangeHandler","inputClickHandler","async","focusInput","shouldShowActionSheet","executeActionSheet","toggleDropdown","inputFocusHandler","inputInputHandler","eventValue","detail","value","shouldClearValue","clearValue","openDropdownWithoutActiveElement","mirrorEmit","query","inputKeydownHandler","key","shiftKey","isShiftTab","hasSlot","keysForOptionListToHandle","inputField","preventDefault","shouldClearSearchText","clearSearchText","handleOptionListExternalKeydown","onCustomDisplayClick","displaySlot","shadowRoot","querySelector","assignedNodes","length","popTopSlot","topSlotHasNode","popBottomSlot","bottomSlotHasNode","handleMultilineOptionsUpdate","checkSelectedOptions","onOptionListChange","values","showAllOptions","handleSelectionChanges","onPopoverState","action","optionList","setActiveElement","showSelectedOptions","visibilityToggleKeyDown","isRadioControlKey","setDefaultActiveElement","disconnectedCallback","disconnect","componentWillLoad","handleAriaLabel","buildStructuredSelectedOptions","componentDidLoad","overrideFocus","setTimeout","checkSelectedDisplay","setCustomLabel","componentDidRender","forEach","fn","onHostElementChange","onchange","onClearHandler","source","handleSelectedDisplay","display","delegateFocus","fromHost","isRelatedTargetWithinHost","clearSelectedDisplay","isEventFromElement","innerInputField","handleFocusout","relatedTarget","isLeavingHost","contains","closeDropdown","keydownHandler","popoverStateChanged","handleTctClick","name","version","getBrowserInfo","majorVersion","Number","split","isNaN","push","blur","onHostElementInput","oninput","options","optionElements","trim","toLocaleLowerCase","matchedCount","option","hidden","title","firstElementChild","tagName","innerText","searchParams","matched","some","text","statusMessageLocString","count","setStatusMessage","closePopover","_togglePopover","openPopover","searchOptions","dispatchEvent","FocusEvent","InputEvent","setValue","valuesSet","Set","Array","isArray","waitForNextPaint","find","click","ariaLabelObserver","newValue","oldValue","element","multiline","openChanged","isOpen","popoverTopContainer","height","offsetHeight","style","setProperty","removeProperty","map","valueUpdated","badgeValue","optionsLength","firstSelectedOptionElement","firstSelectedValue","innerInputContainer","inputId","isIframe","top","hasPlatformDimensions","Object","keys","from","querySelectorAll","popoverMinHeight","firstOption","minHeight","getComputedStyle","parseInt","selectedDisplay","calculateMultiSelectSelectedDisplay","calculateSingleSelectSelectedDisplay","selectedDisplaySlot","wrapperClasses","errors","classes","join","textContent","namedSlot","hasNoValue","selectionClone","cloneNode","remove","clientHeight","outerHTML","replaceChild","createElement","slot","appendChild","checkSelectedDisplayHeight","selected","undefined","tctVModel","result","showActionSheetList","handleExternalKeydown","changeDetails","selectedOptionValues","customLabel","removeChild","message","clearTimeout","statusMessageTimer","statusMessage","renderCustomDisplay","hasSelectedDisplay","h","renderOptionsDropdown","ref","el","controlElement","popoverMaxHeight","direction","popDirection","mode","block","class","id","label","onChange","e","onTctChange","tabindex","renderVisibilityToggle","renderSelectField","Fragment","role","clearable","error","invalid","placeholder","hideLabel","ariaExpanded","ariaControls","ariaHaspopup","iconRight","onClick","onInput","stopImmediatePropagation","onTctInput","onKeyDown","onFocus","onBlur","badgeTheme","_role","_preventEntry","selectedOptionsCount","checked","htmlFor","render"],"sources":["src/components/q2-select/q2-select.scss?tag=q2-select&encapsulation=shadow","src/components/q2-select/q2-select.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../../styles/dropdowns';\n\n:host {\n    --comp-default-select-margin: #{var-list(var-prefixer(select-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(select-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-select-margin, --comp-default-select-margin);\n}\n\n.q2-select-container {\n    position: relative;\n    display: block;\n}\n\n.q2-select-input {\n    margin: 0;\n\n    --tct-input-min-height: #{var-list(var-prefixer(select-input-min-height))};\n    --tct-input-max-height: #{var-list(var-prefixer(select-input-max-height), none)};\n}\n\n::slotted([slot='_selected-display']) {\n    width: 100%;\n    min-height: var(--comp-selected-display-height, 44px);\n}\n\n.custom-display-content {\n    position: absolute;\n    bottom: 0;\n    left: calc(var-list(--tct-scale-2, --app-scale-2x, 10px) + 1px);\n    height: 44px;\n    width: calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n    overflow: hidden;\n    cursor: pointer;\n    transition: left var-list(--tct-tween-2, --app-tween-1, unquote('0.2s ease'));\n}\n\n.custom-display-content:not([hidden]) {\n    display: flex;\n    align-items: center;\n}\n\n.is-searchable.is-focused .custom-display-content,\n.is-searchable .custom-display-content:active {\n    left: calc(var-list(--tct-scale-3, --app-scale-3x, 15px) + 1px);\n}\n\n.has-error .custom-display-content {\n    width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n}\n\n.popover-content {\n    display: flex;\n    flex-direction: column-reverse;\n}\n\n.popover-bottom-container {\n    position: sticky;\n    bottom: 0;\n    z-index: 5;\n}\n\n.popover-top-container {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n    .multi-select-header {\n        padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));\n        background: var(--app-white);\n        display: flex;\n        gap: var-list(--app-scale-2x, 10px);\n        align-items: center;\n\n        fieldset {\n            margin: 0;\n            padding: 0;\n            border: 0;\n            display: flex;\n            gap: var-list(--app-scale-2x, 10px);\n        }\n\n        legend {\n            padding: 0;\n            float: left;\n        }\n\n        label {\n            cursor: pointer;\n            padding: var-list(\n                var-prefixer(select-multi-select-option-padding),\n                var-prefixer(btn-badge-padding),\n                unquote('2px 5px')\n            );\n            font-size: var-list(\n                var-prefixer(select-multi-select-option-font-size),\n                var-prefixer(btn-badge-font-size),\n                inherit\n            );\n            border-radius: var-list(\n                var-prefixer(select-multi-select-option-radius),\n                var-prefixer(btn-badge-border-radius),\n                --app-border-radius-1,\n                4px\n            );\n            background: var-list(\n                --tct-select-multi-select-option-background,\n                var-prefixer(select-multi-select-option-bg),\n                --tct-badge-background,\n                var-prefixer(btn-badge-bg),\n                transparent\n            );\n            color: var-list(\n                var-prefixer(select-multi-select-option-color),\n                var-prefixer(btn-badge-font-color),\n                inherit\n            );\n\n            &:hover {\n                background: var-list(\n                    --tct-select-multi-select-option-hover-background,\n                    var-prefixer(select-multi-select-option-hover-background-color),\n                    var-prefixer(btn-badge-hover-bg),\n                    var-prefixer(gray-14),\n                    --app-gray-l3,\n                    #f2f2f2\n                );\n                color: var-list(\n                    --tct-select-multi-select-option-hover-color,\n                    var-prefixer(select-multi-select-option-color),\n                    var-prefixer(btn-badge-hover-font-color),\n                    var-prefixer(gray-5),\n                    --app-gray-d2,\n                    #404040\n                );\n            }\n        }\n\n        input {\n            &:checked + label {\n                &,\n                &:enabled:hover {\n                    background: var-list(\n                        --tct-select-multi-select-option-active-background,\n                        var-prefixer(select-multi-select-option-active-background-color),\n                        var-prefixer(btn-primary-bg),\n                        #2e2e2e\n                    );\n                    color: var-list(\n                        var-prefixer(select-multi-select-option-active-color),\n                        var-prefixer(btn-primary-font-color),\n                        --app-white,\n                        #ffffff\n                    );\n                }\n            }\n\n            &:disabled + label {\n                opacity: var-list(\n                    var-prefixer(select-multi-select-option-disabled-opacity),\n                    var-prefixer(btn-disabled-opacity),\n                    --app-disabled-opacity,\n                    0.4\n                );\n                cursor: not-allowed;\n            }\n\n            &:focus-visible + label {\n                box-shadow: var(--const-double-focus-ring);\n            }\n        }\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    State,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n    Fragment,\n} from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent, Q2OptionListCustomEvent } from 'src/components';\nimport {\n    createGuid,\n    getBrowserInfo,\n    handleAriaLabel,\n    isEventFromElement,\n    isMobile,\n    isRelatedTargetWithinHost,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from '../../utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n/**\n * @name Select\n * @category Forms\n * @summary Use for choosing from a list of options with single-select, multi-select, or search.\n * @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is **not** compatible with the action sheet workflow.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is **not** compatible with the action sheet workflow.\n * @slot q2-select-display - An optional slot to display custom HTML content in the display area.\n */\n@Component({ tag: 'q2-select', shadow: true, styleUrl: 'q2-select.scss' })\nexport class Q2Select implements ComponentInterface {\n    // #region Own Properties\n\n    guid = createGuid();\n    inputField?: HTMLQ2InputElement;\n    lastTouchWasInPopover: boolean = false;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    originalSearchable: boolean;\n    popoverElement?: HTMLQ2PopoverElement;\n    popoverTopContainer?: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n    statusMessageTimer: NodeJS.Timeout;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasCustomDisplay: boolean = false;\n\n    @State()\n    hasPopoverBottom: boolean = false;\n\n    @State()\n    hasPopoverTop: boolean = false;\n\n    @State()\n    inputFocused: boolean = false;\n\n    @State()\n    open: boolean = false;\n\n    /**\n     * Determines what text to show in the input field.\n     * When `true`, the component will display the search text in the input field\n     * When `false`, the component will display the selected option(s) in the input field\n     */\n    @State()\n    prioritizeSearch: boolean = false;\n\n    @State()\n    searchText: string = '';\n\n    @State()\n    showSelected: boolean = false;\n\n    @State()\n    statusMessage: string;\n\n    @State()\n    structuredSelectedOptions: IOptionValue[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** Renders an icon button when the field is non-empty. Pressing the button clears all input from the field. */\n    @Prop({ reflect: true })\n    clearable: boolean;\n\n    /** Disables all interaction with the field and leverages the disabled visual style of `q2-input`. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * The presence of `errors` will mark the field as invalid, putting it into an error state.\n     * @localizable\n     */\n    @Prop()\n    errors: string[];\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     * @warning\n     * If your `q2-select` renders inside of an iframe, and you are using multiline/robust content options,\n     * any custom CSS you apply to your options will not get passed up to the platform which displays the action sheet.\n     * For this reason, we strongly suggest using the [q2-card](https://tecton.q2developer.com/design-system/q2-card/) component since its styling is managed by Tecton.\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** Determines whether to show an error state. Its primary use-case is for an unfilled field. */\n    @Prop({ reflect: true })\n    invalid: boolean;\n\n    /**\n     * The text that will be used as the label for the field.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Determines the label that is applied to the option list for accessibility purposes.\n     * @localizable\n     */\n    @Prop()\n    listLabel: string = loc('tecton.element.select.listLabel');\n\n    /** The minimum number of rows the component will try to display below or above the component when opened. */\n    @Prop()\n    minRows: number = 3;\n\n    /** Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap. */\n    @Prop({ reflect: true })\n    multilineOptions: boolean = false;\n\n    /** Enables multi-select functionality. */\n    @Prop({ reflect: true })\n    multiple: boolean = false;\n\n    /** Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean = false;\n\n    /**\n     * Text that appears within the field when it is blurred and empty.\n     * Placeholder text disappears when the user selects an option.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    placeholder: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true })\n    popoverMode: 'legacy' = null;\n\n    /**\n     * Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n     * Takes priority over `optional` if both are `true`.\n     */\n    @Prop({ reflect: true })\n    readonly: boolean = false;\n\n    /** Enables search functionality. */\n    @Prop({ reflect: true, mutable: true })\n    searchable: boolean = false;\n\n    /**\n     * Each item in this array should correspond to the value of a `q2-option` element.\n     * This property is only relevant for `multiple` (i.e., multi-select) implementations.\n     */\n    @Prop({ mutable: true })\n    selectedOptions: string[] = [];\n\n    /**\n     * The current value for the select. This should correspond to the value of a nested q2-option element.\n     * This property is only relevant for single-select implementations.\n     */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when an option is selected or deselected.\n     *\n     * When the multi-select is enabled, the `value` property will be\n     * `undefined` and the `selectedOptions` property will contain the selected\n     * option values. Ignore the `tctVModel` property it's only included for Vue\n     * v-model compatibility.\n     *\n     * @deprecated Use 'tctChange' instead\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; selectedOptions: string[]; tctVModel: string | string[] }>;\n\n    /**\n     * Emitted when the input value changes.\n     *\n     * Requires the `searchable` prop to be set to `true`.\n     *\n     * @deprecated Use 'tctInput' instead\n     */\n    @Event()\n    input: EventEmitter<{ query: string }>;\n\n    /**\n     * Emitted when an option is selected or deselected.\n     *\n     * When the multi-select is enabled, the `value` property will be\n     * `undefined` and the `selectedOptions` property will contain the selected\n     * option values. Ignore the `tctVModel` property it's only included for Vue\n     * v-model compatibility.\n     *\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string; selectedOptions: string[]; tctVModel: string | string[] }>;\n\n    /**\n     * Emitted when the input value changes.\n     *\n     * Requires the `searchable` prop to be set to `true`.\n     */\n    @Event()\n    tctInput: EventEmitter<{ query: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n        this.destroyEventListeners();\n    }\n\n    componentWillLoad() {\n        this.originalSearchable = this.searchable;\n        handleAriaLabel(this);\n        this.handleOrientationChange();\n        this.buildStructuredSelectedOptions();\n        this.handleMultilineOptionsUpdate(this.multilineOptions, false);\n    }\n\n    componentDidLoad() {\n        this.initMutationObserver();\n        this.initEventListeners();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.checkSelectedDisplay(), 0);\n        this.setCustomLabel();\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent<{ value: string; selectedOptions: string[] }>) {\n        if (this.readonly || this.disabled) return;\n        if (event.target !== this.hostElement || this.hostElement.onchange) return;\n        if (this.multiple) {\n            this.value = null;\n            this.selectedOptions = event.detail.selectedOptions;\n        } else {\n            this.value = event.detail.value;\n            this.selectedOptions = [];\n        }\n    }\n\n    @Listen('clear')\n    onClearHandler(event: CustomEvent) {\n        // when multiple & searchable, it should not fire clearValue() if the type is `input` (cleared by key input) which is emitted from q2-input's handleDataInput\n        if (this.multiple && this.searchable && event?.detail?.source === 'input') return;\n        this.clearValue();\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay(event: CustomEvent) {\n        if (!this.multiple && !!this.value && this.value === event.detail.value) {\n            this.inputField.value = event.detail.display;\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        const fromHost = isRelatedTargetWithinHost(event, this.hostElement);\n        const prioritizeSearch = (this.prioritizeSearch = fromHost && this.searchable);\n        if (prioritizeSearch) {\n            this.clearSelectedDisplay();\n        } else if (isEventFromElement(event, this.hostElement)) {\n            this.innerInputField.focus();\n        }\n    }\n\n    @Listen('focusout')\n    handleFocusout(event: FocusEvent) {\n        const relatedTarget = event.relatedTarget as HTMLElement;\n        const isLeavingHost =\n            !this.popoverElement?.contains(relatedTarget) && !this.hostElement.contains(relatedTarget);\n        if (isLeavingHost) this.closeDropdown();\n        this.prioritizeSearch = !isLeavingHost && this.searchable;\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        this.inputKeydownHandler(event);\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateChanged({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n    }\n\n    @Listen('tctClick')\n    handleTctClick() {\n        const { name, version } = getBrowserInfo();\n        const majorVersion = Number(version.split('.')[0]);\n        // Only Safari under iOS 18 having issue when searchable\n        if (this.searchable && name === 'Safari' && !isNaN(majorVersion) && majorVersion < 18) {\n            this.scheduledAfterRender.push(() => this.innerInputField.blur());\n        }\n    }\n\n    @Listen('tctInput')\n    onHostElementInput(event: CustomEvent) {\n        if (!this.searchable || event.target !== this.hostElement || this.hostElement.oninput) return;\n        const options = this.optionElements;\n        const query = this.searchText.trim().toLocaleLowerCase();\n        let matchedCount = 0;\n        options.forEach(option => {\n            if (query === '') {\n                option.hidden = false;\n                return;\n            }\n\n            const title =\n                option.firstElementChild?.tagName === 'Q2-CARD'\n                    ? (option.firstElementChild as HTMLQ2CardElement).title\n                    : null;\n            const { display = '', innerText = '' } = option;\n            const searchParams = [display, title, innerText];\n            const matched = searchParams.some(text => text?.toLocaleLowerCase().includes(query) ?? false);\n\n            option.hidden = !matched;\n            if (matched) matchedCount++;\n        });\n\n        const statusMessageLocString = query\n            ? 'tecton.element.select.searchable.results'\n            : 'tecton.element.select.allOptions';\n        const count = query ? matchedCount : options.length;\n        this.setStatusMessage(loc(statusMessageLocString, [count]));\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<input>` to hide the popover if it is visible.\n     *\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<input>` to display the popover if it is hidden.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.\n     *\n     * @warning\n     * Only applicable when the input is searchable.\n     *\n     * @testOnly\n     */\n    @Method()\n    searchOptions(query: string) {\n        if (!this.searchable) return;\n\n        const { innerInputField } = this;\n        innerInputField.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n        innerInputField.value = query;\n        innerInputField.dispatchEvent(new InputEvent('input'));\n    }\n\n    /**\n     * Emulates clicking the `<input>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If the multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n     * after the option(s) are selected.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valuesSet.forEach(value => {\n            this.optionElements.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('multilineOptions')\n    handleMultilineOptionsUpdate(newValue, oldValue) {\n        if (newValue === oldValue) return;\n        this.optionElements.forEach(element => (element.multiline = newValue));\n    }\n\n    @Watch('open')\n    openChanged(isOpen: boolean) {\n        if (isOpen) {\n            this.addTouchEventListeners();\n        } else {\n            this.removeTouchEventListeners();\n        }\n        this.scheduledAfterRender.push(async () => {\n            await waitForNextPaint();\n            const { popoverTopContainer, popoverElement } = this;\n            const height = (isOpen && popoverTopContainer?.offsetHeight) || 0;\n            if (height) {\n                popoverElement.style.setProperty('--comp-popover-top-container-height', `${height}px`);\n            } else {\n                popoverElement.style.removeProperty('--comp-popover-top-container-height');\n            }\n        });\n    }\n\n    @Watch('value')\n    @Watch('selectedOptions')\n    buildStructuredSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        if (multiple) {\n            this.structuredSelectedOptions = !!selectedOptions?.length\n                ? selectedOptions.map(option => (typeof option === 'string' ? { value: option } : option))\n                : [];\n        } else {\n            this.structuredSelectedOptions = value ? [{ value }] : [];\n        }\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.multiple) return;\n        this.clearSearchText();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get badgeValue(): string {\n        if (!this.multiple) return null;\n        const optionsLength = this.selectedOptions?.length ?? 0;\n        if (this.open && this.searchable) return optionsLength ? `${optionsLength}` : null;\n        else return optionsLength > 1 ? `+${optionsLength - 1}` : null;\n    }\n\n    get firstSelectedOptionElement() {\n        const { firstSelectedValue } = this;\n        return firstSelectedValue ? this.optionElements.find(({ value }) => value === firstSelectedValue) : null;\n    }\n\n    get firstSelectedValue() {\n        return this.multiple ? this.selectedOptions?.[0] : this.value;\n    }\n\n    get innerInputContainer(): HTMLElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-container');\n    }\n\n    get innerInputField(): HTMLInputElement | HTMLButtonElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-field');\n    }\n\n    get inputId() {\n        return `select-guid-${this.guid}`;\n    }\n\n    get isModule() {\n        const isIframe = window !== window.top;\n        const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n        return isIframe && hasPlatformDimensions;\n    }\n\n    get optionElements() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2OptionElement>('q2-option'));\n    }\n\n    get popoverMinHeight() {\n        const { minRows } = this;\n        const firstOption = this.hostElement.querySelector<HTMLQ2OptionElement>('q2-option:not([hidden])');\n        let minHeight = firstOption && window.getComputedStyle(firstOption).minHeight;\n\n        // Safari doesn't return a min-height for non-visible items\n        if (!minHeight || minHeight === '0px') minHeight = '44px';\n\n        return minRows * parseInt(minHeight);\n    }\n\n    get selectedDisplay() {\n        if (this.prioritizeSearch || this.searchText) return this.searchText;\n        if (this.hasCustomDisplay) return '';\n        return this.multiple ? this.calculateMultiSelectSelectedDisplay() : this.calculateSingleSelectSelectedDisplay();\n    }\n\n    get selectedDisplaySlot() {\n        return this.hostElement.querySelector<HTMLElement>('[slot=\"_selected-display\"]');\n    }\n\n    get wrapperClasses() {\n        const { errors } = this;\n        const classes = ['q2-select-container'];\n        if (Array.isArray(errors) && errors.length > 0) classes.push('has-error');\n        if (this.inputFocused) classes.push('is-focused');\n        if (this.searchable) classes.push('is-searchable');\n        return classes.join(' ');\n    }\n\n    _togglePopover() {\n        const { innerInputField } = this;\n        innerInputField?.click();\n        innerInputField?.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    addTouchEventListeners = () => {\n        if (!isMobile() || !this.popoverElement) return;\n\n        this.popoverElement.addEventListener('touchmove', this.handleTouchMove, { passive: true });\n    };\n\n    calculateMultiSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;\n        if (!firstSelectedValue) return '';\n        if (firstSelectedOptionElement?.display) return loc(firstSelectedOptionElement.display);\n        if (multilineOptions && this.searchable) return this.searchText;\n        if (multilineOptions) return '';\n        return (\n            firstSelectedOptionElement?.textContent?.trim() ?? firstSelectedOptionElement?.value ?? firstSelectedValue\n        );\n    }\n\n    calculateSingleSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, multilineOptions } = this;\n        if (multilineOptions) {\n            return (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) || this.value || '';\n        } else {\n            return (\n                (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) ||\n                firstSelectedOptionElement?.textContent?.trim() ||\n                this.value ||\n                ''\n            );\n        }\n    }\n\n    checkSelectedDisplay() {\n        // This prevents an undefined property error when the spec tests are run\n        try {\n            this.hostElement;\n        } catch (error) {\n            return null;\n        }\n        let namedSlot = this.selectedDisplaySlot;\n        const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } =\n            this;\n        const hasNoValue = !value && multiple && !selectedOptions?.length;\n        if (prioritizeSearch || !multilineOptions || hasNoValue) return this.clearSelectedDisplay();\n\n        if (!firstSelectedOptionElement || firstSelectedOptionElement.display) return this.clearSelectedDisplay();\n\n        // Clone selected option and remove elements with hide-on-select attribute\n        const selectionClone = firstSelectedOptionElement.firstElementChild.cloneNode(true) as HTMLElement;\n        selectionClone.querySelectorAll('[hide-on-select]').forEach(element => element.remove());\n\n        if (namedSlot) {\n            const height = namedSlot.clientHeight === 0 ? 'auto' : `${namedSlot.clientHeight}px`;\n            namedSlot.style.setProperty('--comp-selected-display-height', height);\n            if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {\n                namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);\n            }\n        } else {\n            namedSlot = document.createElement('div');\n            namedSlot.slot = '_selected-display';\n            namedSlot.appendChild(selectionClone);\n            this.hostElement.appendChild(namedSlot);\n        }\n        return namedSlot;\n    }\n\n    checkSelectedDisplayHeight() {\n        const { selectedDisplaySlot } = this;\n        if (!selectedDisplaySlot) return;\n        selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');\n    }\n\n    checkSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        this.optionElements.forEach(option => {\n            if (multiple) {\n                option.selected = selectedOptions.includes(option.value);\n            } else {\n                option.selected = option.value === value;\n            }\n        });\n    }\n\n    clearSearchText() {\n        if (!this.searchText) return;\n        this.searchText = '';\n        mirrorEmit(this, ['input', 'tctInput'], { query: '' });\n    }\n\n    clearSelectedDisplay() {\n        this.selectedDisplaySlot?.remove();\n    }\n\n    clearValue() {\n        const { multiple } = this;\n        this.value = '';\n        this.selectedOptions = [];\n        mirrorEmit(this, ['change', 'tctChange'], {\n            value: multiple ? undefined : '',\n            selectedOptions: multiple ? [] : undefined,\n            tctVModel: multiple ? [] : '',\n        });\n    }\n\n    clickedElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName !== 'click-elsewhere') return;\n        event.stopPropagation();\n        const { popoverElement } = this;\n        if (!popoverElement) return;\n\n        // close popover only if not nested in a shadow dom\n        if (this.hostElement.getRootNode().nodeName !== '#document-fragment') {\n            popoverElement.open = false;\n        }\n    };\n\n    closeDropdown() {\n        this.open = false;\n        this.lastTouchWasInPopover = false;\n        this.clearSearchText();\n    }\n\n    destroyEventListeners = () => {\n        if (!isMobile()) return;\n        screen?.orientation?.removeEventListener('change', this.handleOrientationChange);\n        window.removeEventListener('resize', this.handleOrientationChange);\n        visualViewport?.removeEventListener('resize', this.handleOrientationChange);\n        this.removeTouchEventListeners();\n    };\n\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.focusInput();\n        this.handleSelectionChanges(result);\n    }\n\n    focusInput() {\n        this.inputField?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    // Helps with checking for calls to handleExternalKeydown in spec tests\n    handleOptionListExternalKeydown(event: KeyboardEvent) {\n        this.optionList.handleExternalKeydown(event);\n    }\n\n    handleOrientationChange = () => {\n        if (!isMobile()) return;\n\n        let isLandscape: boolean;\n        if (this.isModule) {\n            isLandscape = window.Tecton?.platformDimensions.orientationType?.includes('landscape');\n        } else {\n            isLandscape = screen?.orientation?.type?.includes('landscape');\n        }\n        if (isLandscape && this.searchable) this.searchable = false;\n        if (!isLandscape) this.searchable = this.originalSearchable;\n    };\n\n    handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n        const { value = '', values = [] } = changeDetails;\n        const selectedOptionValues = values.map(value => value.value);\n        const { multiple } = this;\n        if (!this.hostElement.onchange) {\n            this.selectedOptions = selectedOptionValues;\n        }\n\n        mirrorEmit(this, ['change', 'tctChange'], {\n            value: multiple ? undefined : value,\n            selectedOptions: multiple ? selectedOptionValues : undefined,\n            tctVModel: multiple ? selectedOptionValues : value,\n        });\n    }\n\n    handleTouchMove = (event: TouchEvent) => {\n        if (document.activeElement === this.hostElement) {\n            const target = event.target as HTMLElement;\n            if (target && target !== this.hostElement) {\n                this.inputFocused = false;\n                this.lastTouchWasInPopover = true;\n                target.focus();\n            }\n        }\n    };\n\n    initEventListeners = () => {\n        if (!isMobile()) return;\n        screen?.orientation?.addEventListener('change', this.handleOrientationChange);\n        window.addEventListener('resize', this.handleOrientationChange);\n        visualViewport?.addEventListener('resize', this.handleOrientationChange);\n    };\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    };\n\n    inputBlurHandler = () => {\n        this.inputFocused = false;\n    };\n\n    inputChangeHandler = (event: Event) => {\n        event.stopPropagation();\n    };\n\n    inputClickHandler = async (event: MouseEvent) => {\n        event.stopPropagation();\n\n        // Check if the last interaction was a touch within the popover\n        // If so, don't toggle the dropdown as the user is likely continuing to interact\n        if (this.lastTouchWasInPopover && this.open && this.searchable) {\n            // Reset the flag and don't toggle\n            this.lastTouchWasInPopover = false;\n            this.focusInput();\n            return;\n        }\n\n        // Reset the flag for any other click\n        this.lastTouchWasInPopover = false;\n\n        if (shouldShowActionSheet(this)) {\n            return this.executeActionSheet(event);\n        }\n        this.toggleDropdown();\n        this.focusInput();\n    };\n\n    inputFocusHandler = () => {\n        this.inputFocused = true;\n    };\n\n    inputInputHandler = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        const eventValue = event.detail.value;\n        const shouldClearValue = !!this.value;\n\n        if (shouldClearValue) this.clearValue();\n        if (!this.open) this.openDropdownWithoutActiveElement();\n\n        this.prioritizeSearch = true;\n        this.searchText = eventValue;\n        mirrorEmit(this, ['input', 'tctInput'], { query: eventValue });\n    };\n\n    inputKeydownHandler = (event: KeyboardEvent) => {\n        if (this.readonly || this.disabled) return;\n        const { key, shiftKey } = event;\n        const isShiftTab = key === 'Tab' && shiftKey;\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n        if ((hasSlot || this.multiple) && (key === 'Tab' || isShiftTab)) return;\n\n        // slots are incompatible with action sheet\n        if (shouldShowActionSheet(this, event) && !hasSlot) {\n            return this.executeActionSheet(event);\n        }\n\n        const keysForOptionListToHandle = [\n            'ArrowDown',\n            'ArrowUp',\n            'PageDown',\n            'PageUp',\n            'Home',\n            'End',\n            'Escape',\n            'Tab',\n        ];\n\n        if (this.searchable && (key === ' ' || key === 'Enter') && this.inputField.value == '') {\n            event.preventDefault();\n            if (!this.open) this.openDropdownWithoutActiveElement();\n        }\n\n        if (this.searchable && !keysForOptionListToHandle.includes(key)) return;\n        if (this.shouldClearSearchText(event)) this.clearSearchText();\n\n        // Prevent click event from firing when spacebar is pressed\n        if (key === ' ') event.preventDefault();\n\n        this.handleOptionListExternalKeydown(event);\n    };\n\n    onCustomDisplayClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.focusInput();\n        this.toggleDropdown();\n    };\n\n    onMutationObserved = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const displaySlot = hostElement.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"q2-select-display\"]');\n        const hasCustomDisplay = displaySlot?.assignedNodes().length > 0;\n\n        if (this.hasCustomDisplay !== hasCustomDisplay) {\n            this.hasCustomDisplay = hasCustomDisplay;\n        }\n\n        const popTopSlot = hostElement.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n        if (hasPopoverTop !== topSlotHasNode) {\n            this.hasPopoverTop = topSlotHasNode;\n        }\n\n        const popBottomSlot = hostElement.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n        if (hasPopoverBottom !== bottomSlotHasNode) {\n            this.hasPopoverBottom = bottomSlotHasNode;\n        }\n\n        if (this.multilineOptions) this.handleMultilineOptionsUpdate(this.multilineOptions, null);\n        this.checkSelectedOptions();\n    };\n\n    onOptionListChange = (event: Q2OptionListCustomEvent<{ value: string; values: IOptionValue[] }>) => {\n        event.stopPropagation();\n        const { values } = event.detail;\n\n        if (values.length === 0) this.showAllOptions();\n        this.handleSelectionChanges(event.detail);\n    };\n\n    onPopoverState = ({\n        detail: { open, action },\n    }: CustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>) => {\n        if (!open || this.searchText) {\n            if (action !== 'select') {\n                this.optionList.setActiveElement(null);\n            }\n            this.inputField.focus();\n        }\n\n        if (this.open === open) return;\n        this.open = open;\n    };\n\n    openDropdownWithoutActiveElement() {\n        if (this.readonly || this.disabled) return;\n        this.optionList.setActiveElement(null);\n        this.open = true;\n    }\n\n    removeTouchEventListeners = () => {\n        if (!isMobile() || !this.popoverElement) return;\n\n        this.popoverElement.removeEventListener('touchmove', this.handleTouchMove);\n    };\n\n    setCustomLabel() {\n        const customLabel = this.hostElement.querySelector('[slot=\"label\"]');\n        if (customLabel) {\n            this.inputField?.appendChild(customLabel.cloneNode(true));\n            this.hostElement.removeChild(customLabel);\n        }\n    }\n\n    setStatusMessage(message) {\n        clearTimeout(this.statusMessageTimer);\n        this.statusMessage = '';\n        this.statusMessageTimer = setTimeout(() => {\n            this.statusMessage = message;\n        }, 1000);\n    }\n\n    shouldClearSearchText(event: KeyboardEvent) {\n        return this.searchable && !!this.searchText && event.key === 'Escape';\n    }\n\n    showAllOptions = () => {\n        this.showSelected = false;\n    };\n\n    showSelectedOptions = () => {\n        this.showSelected = true;\n    };\n\n    toggleDropdown() {\n        if (this.readonly || this.disabled) return;\n\n        if (this.open && !this.searchText) {\n            this.closeDropdown();\n        } else {\n            this.openDropdownWithoutActiveElement();\n        }\n    }\n\n    visibilityToggleKeyDown = (event: KeyboardEvent) => {\n        const key = event.key;\n        const isShiftTab = key === 'Tab' && event.shiftKey;\n        const isRadioControlKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key);\n        if (isRadioControlKey) event.stopPropagation();\n        if (isShiftTab) {\n            event.stopPropagation();\n            // allows shift+tab keys to select the top slot when present\n            if (this.hasPopoverTop) return;\n\n            this.optionList.setDefaultActiveElement();\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderCustomDisplay() {\n        const hasSelectedDisplay = this.checkSelectedDisplay();\n        if (!hasSelectedDisplay) return;\n        this.checkSelectedDisplayHeight();\n\n        return (\n            <slot\n                name=\"_selected-display\"\n                slot=\"custom-display\"\n            />\n        );\n    }\n\n    renderOptionsDropdown() {\n        return (\n            <q2-popover\n                ref={el => (this.popoverElement = el)}\n                controlElement={this.innerInputContainer}\n                open={this.open}\n                max-height={this.popoverMaxHeight}\n                minHeight={this.popoverMinHeight}\n                direction={this.popDirection}\n                mode={this.popoverMode || undefined}\n                block\n            >\n                <div class=\"popover-content\">\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        ref={el => (this.optionList = el)}\n                        type=\"listbox\"\n                        id=\"option-list\"\n                        show-selected={this.showSelected}\n                        label={this.listLabel}\n                        multiple={this.multiple}\n                        selectedOptions={this.structuredSelectedOptions}\n                        onChange={e => e.stopPropagation()}\n                        onTctChange={this.onOptionListChange}\n                    >\n                        <slot />\n                    </q2-option-list>\n                    <div\n                        class=\"popover-top-container\"\n                        ref={el => (this.popoverTopContainer = el)}\n                        hidden={!this.multiple && !this.hasPopoverTop}\n                        tabindex=\"-1\"\n                    >\n                        <slot name=\"popover-top\"></slot>\n                        {this.multiple && this.renderVisibilityToggle()}\n                    </div>\n                </div>\n                <div\n                    class=\"popover-bottom-container\"\n                    hidden={!this.hasPopoverBottom}\n                    tabindex=\"-1\"\n                >\n                    <slot name=\"popover-bottom\" />\n                </div>\n            </q2-popover>\n        );\n    }\n\n    renderSelectField() {\n        return (\n            <Fragment>\n                <div\n                    aria-live=\"polite\"\n                    aria-atomic=\"true\"\n                    role=\"status\"\n                    class=\"sr\"\n                >\n                    {this.statusMessage}\n                </div>\n                <q2-input\n                    ref={el => (this.inputField = el)}\n                    class=\"q2-select-input\"\n                    label={(this.label && loc(this.label)) || ''}\n                    value={this.selectedDisplay}\n                    clearable={(this.clearable && (!!this.value || !!this.selectedOptions?.length)) || undefined}\n                    errors={\n                        (Array.isArray(this.errors) &&\n                            this.errors.length > 0 &&\n                            this.errors.map(error => loc(error))) ||\n                        (this.invalid && ['tecton.element.select.invalid']) ||\n                        []\n                    }\n                    disabled={this.disabled}\n                    optional={this.optional}\n                    readonly={!!this.readonly}\n                    placeholder={this.placeholder || undefined}\n                    hideLabel={this.hideLabel}\n                    ariaExpanded={`${this.open}`}\n                    ariaControls=\"option-list\"\n                    ariaHaspopup=\"listbox\"\n                    test-id=\"toggleDropdown\"\n                    hide-messages\n                    iconRight=\"chevron-down\"\n                    onClick={this.inputClickHandler}\n                    onInput={e => e.stopImmediatePropagation()}\n                    onTctInput={this.inputInputHandler}\n                    onKeyDown={this.inputKeydownHandler}\n                    onFocus={this.inputFocusHandler}\n                    onBlur={this.inputBlurHandler}\n                    onChange={e => e.stopPropagation()}\n                    onTctChange={this.inputChangeHandler}\n                    badgeValue={this.badgeValue}\n                    badgeTheme={this.inputFocused ? 'primary' : undefined}\n                    _role=\"combobox\"\n                    _preventEntry={!this.searchable}\n                >\n                    {this.renderCustomDisplay()}\n                </q2-input>\n                <div\n                    class=\"custom-display-content\"\n                    hidden={!this.hasCustomDisplay || !!this.searchText}\n                    onClick={this.onCustomDisplayClick}\n                >\n                    <slot name=\"q2-select-display\" />\n                </div>\n                {this.renderOptionsDropdown()}\n            </Fragment>\n        );\n    }\n\n    renderVisibilityToggle() {\n        const selectedOptionsCount = this.selectedOptions?.length ?? 0;\n        const { showSelected } = this;\n        return (\n            <div class=\"multi-select-header\">\n                <fieldset>\n                    <legend aria-label={loc('tecton.element.select.multiHeader.showing')}>\n                        {loc('tecton.element.select.multiHeader.showing')}\n                    </legend>\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"all\"\n                            name=\"viewDisplay\"\n                            value=\"all\"\n                            checked={!showSelected}\n                            aria-label={loc('tecton.element.select.multiHeader.allAriaLabel')}\n                            test-id=\"allOptionsButton\"\n                            onClick={this.showAllOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"all\">{loc('tecton.element.select.multiHeader.all')}</label>\n                    </div>\n\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"selected\"\n                            disabled={selectedOptionsCount === 0}\n                            name=\"viewDisplay\"\n                            value=\"selected\"\n                            aria-label={loc('tecton.element.select.multiHeader.selectedAriaLabel', [\n                                selectedOptionsCount,\n                            ])}\n                            checked={showSelected}\n                            test-id=\"selectedOptionsButton\"\n                            onClick={this.showSelectedOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"selected\">\n                            {loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount])}\n                        </label>\n                    </div>\n                </fieldset>\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <click-elsewhere\n                class={this.wrapperClasses}\n                role=\"presentation\"\n                onChange={this.clickedElsewhere}\n            >\n                {this.renderSelectField()}\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n\n// #endregion\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2SelectCss","Q2Select","constructor","hostRef","this","guid","createGuid","isOrientationUpdate","lastTouchWasInPopover","scheduledAfterRender","hasCustomDisplay","hasPopoverBottom","hasPopoverTop","inputFocused","open","prioritizeSearch","searchText","showSelected","structuredSelectedOptions","disabled","hoist","_a","window","Tecton","useActionSheets","listLabel","loc","minRows","multilineOptions","multiple","optional","popoverMode","readonly","searchable","selectedOptions","addTouchEventListeners","isMobile","popoverElement","addEventListener","handleTouchMove","passive","clickedElsewhere","event","target","localName","stopPropagation","hostElement","getRootNode","nodeName","destroyEventListeners","screen","orientation","removeEventListener","handleOrientationChange","visualViewport","removeTouchEventListeners","isLandscape","isModule","_b","platformDimensions","orientationType","includes","_d","_c","type","originalSearchable","document","activeElement","focus","initEventListeners","initMutationObserver","observer","MutationObserver","onMutationObserved","observe","childList","subtree","mutationObserver","inputBlurHandler","inputChangeHandler","inputClickHandler","async","focusInput","shouldShowActionSheet","executeActionSheet","toggleDropdown","inputFocusHandler","inputInputHandler","eventValue","detail","value","shouldClearValue","clearValue","openDropdownWithoutActiveElement","mirrorEmit","query","inputKeydownHandler","key","shiftKey","isShiftTab","hasSlot","keysForOptionListToHandle","inputField","preventDefault","shouldClearSearchText","clearSearchText","handleOptionListExternalKeydown","onCustomDisplayClick","displaySlot","shadowRoot","querySelector","assignedNodes","length","popTopSlot","topSlotHasNode","popBottomSlot","bottomSlotHasNode","handleMultilineOptionsUpdate","checkSelectedOptions","onOptionListChange","values","showAllOptions","handleSelectionChanges","onPopoverState","action","optionList","setActiveElement","showSelectedOptions","visibilityToggleKeyDown","isRadioControlKey","setDefaultActiveElement","disconnectedCallback","disconnect","componentWillLoad","handleAriaLabel","buildStructuredSelectedOptions","componentDidLoad","overrideFocus","setTimeout","checkSelectedDisplay","setCustomLabel","componentDidRender","forEach","fn","onHostElementChange","onchange","onClearHandler","source","handleSelectedDisplay","display","delegateFocus","isEventFromElement","innerInputField","fromHost","isRelatedTargetWithinHost","clearSelectedDisplay","handleFocusout","relatedTarget","isLeavingHost","contains","closeDropdown","keydownHandler","popoverStateChanged","handleTctClick","name","version","getBrowserInfo","majorVersion","Number","split","isNaN","push","blur","onHostElementInput","oninput","options","optionElements","trim","toLocaleLowerCase","matchedCount","option","hidden","title","firstElementChild","tagName","innerText","searchParams","matched","some","text","statusMessageLocString","count","setStatusMessage","closePopover","_togglePopover","openPopover","searchOptions","dispatchEvent","FocusEvent","InputEvent","setValue","valuesSet","Set","Array","isArray","waitForNextPaint","find","click","ariaLabelObserver","newValue","oldValue","element","multiline","openChanged","isOpen","popoverTopContainer","height","offsetHeight","style","setProperty","removeProperty","searchableChanged","newVal","map","valueUpdated","badgeValue","optionsLength","firstSelectedOptionElement","firstSelectedValue","innerInputContainer","inputId","isIframe","top","hasPlatformDimensions","Object","keys","from","querySelectorAll","popoverMinHeight","firstOption","minHeight","getComputedStyle","parseInt","selectedDisplay","calculateMultiSelectSelectedDisplay","calculateSingleSelectSelectedDisplay","replace","selectedDisplaySlot","wrapperClasses","errors","classes","join","textContent","namedSlot","hasNoValue","selectionClone","cloneNode","remove","clientHeight","outerHTML","replaceChild","createElement","slot","appendChild","checkSelectedDisplayHeight","selected","undefined","tctVModel","result","showActionSheetList","handleExternalKeydown","changeDetails","selectedOptionValues","customLabel","removeChild","message","clearTimeout","statusMessageTimer","statusMessage","renderCustomDisplay","hasSelectedDisplay","h","renderOptionsDropdown","ref","el","controlElement","popoverMaxHeight","direction","popDirection","mode","block","class","id","label","onChange","e","onTctChange","tabindex","renderVisibilityToggle","renderSelectField","Fragment","role","clearable","error","invalid","placeholder","hideLabel","ariaExpanded","ariaControls","ariaHaspopup","iconRight","onClick","onInput","stopImmediatePropagation","onTctInput","onKeyDown","onFocus","onBlur","badgeTheme","_role","_preventEntry","selectedOptionsCount","checked","htmlFor","render"],"sources":["src/components/q2-select/q2-select.scss?tag=q2-select&encapsulation=shadow","src/components/q2-select/q2-select.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../../styles/dropdowns';\n\n:host {\n    --comp-default-select-margin: #{var-list(var-prefixer(select-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(select-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-select-margin, --comp-default-select-margin);\n}\n\n.q2-select-container {\n    position: relative;\n    display: block;\n}\n\n.q2-select-input {\n    margin: 0;\n\n    --tct-input-min-height: #{var-list(var-prefixer(select-input-min-height))};\n    --tct-input-max-height: #{var-list(var-prefixer(select-input-max-height), none)};\n}\n\n::slotted([slot='_selected-display']) {\n    width: 100%;\n    min-height: var(--comp-selected-display-height, 44px);\n}\n\n.custom-display-content {\n    position: absolute;\n    bottom: 0;\n    left: calc(var-list(--tct-scale-2, --app-scale-2x, 10px) + 1px);\n    height: 44px;\n    width: calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n    overflow: hidden;\n    cursor: pointer;\n    transition: left var-list(--tct-tween-2, --app-tween-1, unquote('0.2s ease'));\n}\n\n.custom-display-content:not([hidden]) {\n    display: flex;\n    align-items: center;\n}\n\n.is-searchable.is-focused .custom-display-content,\n.is-searchable .custom-display-content:active {\n    left: calc(var-list(--tct-scale-3, --app-scale-3x, 15px) + 1px);\n}\n\n.has-error .custom-display-content {\n    width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n}\n\n.popover-content {\n    display: flex;\n    flex-direction: column-reverse;\n}\n\n.popover-bottom-container {\n    position: sticky;\n    bottom: 0;\n    z-index: 5;\n}\n\n.popover-top-container {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n    .multi-select-header {\n        padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));\n        background: var(--app-white);\n        display: flex;\n        gap: var-list(--app-scale-2x, 10px);\n        align-items: center;\n\n        fieldset {\n            margin: 0;\n            padding: 0;\n            border: 0;\n            display: flex;\n            gap: var-list(--app-scale-2x, 10px);\n        }\n\n        legend {\n            padding: 0;\n            float: left;\n        }\n\n        label {\n            cursor: pointer;\n            padding: var-list(\n                var-prefixer(select-multi-select-option-padding),\n                var-prefixer(btn-badge-padding),\n                unquote('2px 5px')\n            );\n            font-size: var-list(\n                var-prefixer(select-multi-select-option-font-size),\n                var-prefixer(btn-badge-font-size),\n                inherit\n            );\n            border-radius: var-list(\n                var-prefixer(select-multi-select-option-radius),\n                var-prefixer(btn-badge-border-radius),\n                --app-border-radius-1,\n                4px\n            );\n            background: var-list(\n                --tct-select-multi-select-option-background,\n                var-prefixer(select-multi-select-option-bg),\n                --tct-badge-background,\n                var-prefixer(btn-badge-bg),\n                transparent\n            );\n            color: var-list(\n                var-prefixer(select-multi-select-option-color),\n                var-prefixer(btn-badge-font-color),\n                inherit\n            );\n\n            &:hover {\n                background: var-list(\n                    --tct-select-multi-select-option-hover-background,\n                    var-prefixer(select-multi-select-option-hover-background-color),\n                    var-prefixer(btn-badge-hover-bg),\n                    var-prefixer(gray-14),\n                    --app-gray-l3,\n                    #f2f2f2\n                );\n                color: var-list(\n                    --tct-select-multi-select-option-hover-color,\n                    var-prefixer(select-multi-select-option-color),\n                    var-prefixer(btn-badge-hover-font-color),\n                    var-prefixer(gray-5),\n                    --app-gray-d2,\n                    #404040\n                );\n            }\n        }\n\n        input {\n            &:checked + label {\n                &,\n                &:enabled:hover {\n                    background: var-list(\n                        --tct-select-multi-select-option-active-background,\n                        var-prefixer(select-multi-select-option-active-background-color),\n                        var-prefixer(btn-primary-bg),\n                        #2e2e2e\n                    );\n                    color: var-list(\n                        var-prefixer(select-multi-select-option-active-color),\n                        var-prefixer(btn-primary-font-color),\n                        --app-white,\n                        #ffffff\n                    );\n                }\n            }\n\n            &:disabled + label {\n                opacity: var-list(\n                    var-prefixer(select-multi-select-option-disabled-opacity),\n                    var-prefixer(btn-disabled-opacity),\n                    --app-disabled-opacity,\n                    0.4\n                );\n                cursor: not-allowed;\n            }\n\n            &:focus-visible + label {\n                box-shadow: var(--const-double-focus-ring);\n            }\n        }\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    State,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n    Fragment,\n} from '@stencil/core';\nimport type { EventDetail } from 'q2-tecton-common/lib/types/elements';\nimport { Q2InputCustomEvent, Q2OptionListCustomEvent } from 'src/components';\nimport {\n    createGuid,\n    getBrowserInfo,\n    handleAriaLabel,\n    isEventFromElement,\n    isMobile,\n    isRelatedTargetWithinHost,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from '../../utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { OptionValue } from '../q2-option-list/q2-option-list';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n/**\n * @name Select\n * @category Forms\n * @summary Use for choosing from a list of options with single-select, multi-select, or search.\n * @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is **not** compatible with the action sheet workflow.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is **not** compatible with the action sheet workflow.\n * @slot q2-select-display - An optional slot to display custom HTML content in the display area.\n */\n@Component({ tag: 'q2-select', shadow: true, styleUrl: 'q2-select.scss' })\nexport class Q2Select implements ComponentInterface {\n    // #region Own Properties\n\n    guid = createGuid();\n    inputField?: HTMLQ2InputElement;\n    isOrientationUpdate: boolean = false;\n    lastTouchWasInPopover: boolean = false;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    originalSearchable: boolean;\n    popoverElement?: HTMLQ2PopoverElement;\n    popoverTopContainer?: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n    statusMessageTimer: NodeJS.Timeout;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasCustomDisplay: boolean = false;\n\n    @State()\n    hasPopoverBottom: boolean = false;\n\n    @State()\n    hasPopoverTop: boolean = false;\n\n    @State()\n    inputFocused: boolean = false;\n\n    @State()\n    open: boolean = false;\n\n    /**\n     * Determines what text to show in the input field.\n     * When `true`, the component will display the search text in the input field\n     * When `false`, the component will display the selected option(s) in the input field\n     */\n    @State()\n    prioritizeSearch: boolean = false;\n\n    @State()\n    searchText: string = '';\n\n    @State()\n    showSelected: boolean = false;\n\n    @State()\n    statusMessage: string;\n\n    @State()\n    structuredSelectedOptions: OptionValue[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** Renders an icon button when the field is non-empty. Pressing the button clears all input from the field. */\n    @Prop({ reflect: true })\n    clearable: boolean;\n\n    /** Disables all interaction with the field and leverages the disabled visual style of `q2-input`. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * The presence of `errors` will mark the field as invalid, putting it into an error state.\n     * @localizable\n     */\n    @Prop()\n    errors: string[];\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     * @warning\n     * If your `q2-select` renders inside of an iframe, and you are using multiline/robust content options,\n     * any custom CSS you apply to your options will not get passed up to the platform which displays the action sheet.\n     * For this reason, we strongly suggest using the [q2-card](https://tecton.q2developer.com/design-system/q2-card/) component since its styling is managed by Tecton.\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** Determines whether to show an error state. Its primary use-case is for an unfilled field. */\n    @Prop({ reflect: true })\n    invalid: boolean;\n\n    /**\n     * The text that will be used as the label for the field.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Determines the label that is applied to the option list for accessibility purposes.\n     * @localizable\n     */\n    @Prop()\n    listLabel: string = loc('tecton.element.select.listLabel');\n\n    /** The minimum number of rows the component will try to display below or above the component when opened. */\n    @Prop()\n    minRows: number = 3;\n\n    /** Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap. */\n    @Prop({ reflect: true })\n    multilineOptions: boolean = false;\n\n    /** Enables multi-select functionality. */\n    @Prop({ reflect: true })\n    multiple: boolean = false;\n\n    /** Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean = false;\n\n    /**\n     * Text that appears within the field when it is blurred and empty.\n     * Placeholder text disappears when the user selects an option.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    placeholder: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true })\n    popoverMode: 'legacy' = null;\n\n    /**\n     * Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n     * Takes priority over `optional` if both are `true`.\n     */\n    @Prop({ reflect: true })\n    readonly: boolean = false;\n\n    /** Enables search functionality. */\n    @Prop({ reflect: true, mutable: true })\n    searchable: boolean = false;\n\n    /**\n     * Each item in this array should correspond to the value of a `q2-option` element.\n     * This property is only relevant for `multiple` (i.e., multi-select) implementations.\n     */\n    @Prop({ mutable: true })\n    selectedOptions: string[] = [];\n\n    /**\n     * The current value for the select. This should correspond to the value of a nested q2-option element.\n     * This property is only relevant for single-select implementations.\n     */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when an option is selected or deselected.\n     *\n     * When the multi-select is enabled, the `value` property will be\n     * `undefined` and the `selectedOptions` property will contain the selected\n     * option values. Ignore the `tctVModel` property it's only included for Vue\n     * v-model compatibility.\n     *\n     * @deprecated Use 'tctChange' instead\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; selectedOptions: string[]; tctVModel: string | string[] }>;\n\n    /**\n     * Emitted when the input value changes.\n     *\n     * Requires the `searchable` prop to be set to `true`.\n     *\n     * @deprecated Use 'tctInput' instead\n     */\n    @Event()\n    input: EventEmitter<{ query: string }>;\n\n    /**\n     * Emitted when an option is selected or deselected.\n     *\n     * When the multi-select is enabled, the `value` property will be\n     * `undefined` and the `selectedOptions` property will contain the selected\n     * option values. Ignore the `tctVModel` property it's only included for Vue\n     * v-model compatibility.\n     *\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string; selectedOptions: string[]; tctVModel: string | string[] }>;\n\n    /**\n     * Emitted when the input value changes.\n     *\n     * Requires the `searchable` prop to be set to `true`.\n     */\n    @Event()\n    tctInput: EventEmitter<{ query: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n        this.destroyEventListeners();\n    }\n\n    componentWillLoad() {\n        this.originalSearchable = this.searchable;\n        handleAriaLabel(this);\n        this.handleOrientationChange();\n        this.buildStructuredSelectedOptions();\n        this.handleMultilineOptionsUpdate(this.multilineOptions, false);\n    }\n\n    componentDidLoad() {\n        this.initMutationObserver();\n        this.initEventListeners();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.checkSelectedDisplay(), 0);\n        this.setCustomLabel();\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent<{ value: string; selectedOptions: string[] }>) {\n        if (this.readonly || this.disabled) return;\n        if (event.target !== this.hostElement || this.hostElement.onchange) return;\n        if (this.multiple) {\n            this.value = null;\n            this.selectedOptions = event.detail.selectedOptions;\n        } else {\n            this.value = event.detail.value;\n            this.selectedOptions = [];\n        }\n    }\n\n    @Listen('clear')\n    onClearHandler(event: CustomEvent) {\n        // when multiple & searchable, it should not fire clearValue() if the type is `input` (cleared by key input) which is emitted from q2-input's handleDataInput\n        if (this.multiple && this.searchable && event?.detail?.source === 'input') return;\n        this.clearValue();\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay(event: CustomEvent) {\n        if (!this.multiple && !!this.value && this.value === event.detail.value) {\n            this.inputField.value = event.detail.display;\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        // Always delegate focus from host to inner input (fixes programmatic focus)\n        if (isEventFromElement(event, this.hostElement)) {\n            this.innerInputField?.focus();\n        }\n\n        // Manage display state for searchable selects (preserves existing behavior)\n        const fromHost = isRelatedTargetWithinHost(event, this.hostElement);\n        this.prioritizeSearch = fromHost && this.searchable;\n\n        if (this.prioritizeSearch) {\n            this.clearSelectedDisplay();\n        }\n    }\n\n    @Listen('focusout')\n    handleFocusout(event: FocusEvent) {\n        const relatedTarget = event.relatedTarget as HTMLElement;\n        const isLeavingHost =\n            !this.popoverElement?.contains(relatedTarget) && !this.hostElement.contains(relatedTarget);\n        if (isLeavingHost) this.closeDropdown();\n        this.prioritizeSearch = !isLeavingHost && this.searchable;\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        this.inputKeydownHandler(event);\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateChanged({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n    }\n\n    @Listen('tctClick')\n    handleTctClick() {\n        const { name, version } = getBrowserInfo();\n        const majorVersion = Number(version.split('.')[0]);\n        // Only Safari under iOS 18 having issue when searchable\n        if (this.searchable && name === 'Safari' && !isNaN(majorVersion) && majorVersion < 18) {\n            this.scheduledAfterRender.push(() => this.innerInputField.blur());\n        }\n    }\n\n    @Listen('tctInput')\n    onHostElementInput(event: CustomEvent) {\n        if (!this.searchable || event.target !== this.hostElement || this.hostElement.oninput) return;\n        const options = this.optionElements;\n        const query = this.searchText.trim().toLocaleLowerCase();\n        let matchedCount = 0;\n        options.forEach(option => {\n            if (query === '') {\n                option.hidden = false;\n                return;\n            }\n\n            const title =\n                option.firstElementChild?.tagName === 'Q2-CARD'\n                    ? (option.firstElementChild as HTMLQ2CardElement).title\n                    : null;\n            const { display = '', innerText = '' } = option;\n            const searchParams = [display, title, innerText];\n            const matched = searchParams.some(text => text?.toLocaleLowerCase().includes(query) ?? false);\n\n            option.hidden = !matched;\n            if (matched) matchedCount++;\n        });\n\n        const statusMessageLocString = query\n            ? 'tecton.element.select.searchable.results'\n            : 'tecton.element.select.allOptions';\n        const count = query ? matchedCount : options.length;\n        this.setStatusMessage(loc(statusMessageLocString, [count]));\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<input>` to hide the popover if it is visible.\n     *\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<input>` to display the popover if it is hidden.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.\n     *\n     * @warning\n     * Only applicable when the input is searchable.\n     *\n     * @testOnly\n     */\n    @Method()\n    searchOptions(query: string) {\n        if (!this.searchable) return;\n\n        const { innerInputField } = this;\n        innerInputField.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n        innerInputField.value = query;\n        innerInputField.dispatchEvent(new InputEvent('input'));\n    }\n\n    /**\n     * Emulates clicking the `<input>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If the multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n     * after the option(s) are selected.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valuesSet.forEach(value => {\n            this.optionElements.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('multilineOptions')\n    handleMultilineOptionsUpdate(newValue, oldValue) {\n        if (newValue === oldValue) return;\n        this.optionElements.forEach(element => (element.multiline = newValue));\n    }\n\n    @Watch('open')\n    openChanged(isOpen: boolean) {\n        if (isOpen) {\n            this.addTouchEventListeners();\n        } else {\n            this.removeTouchEventListeners();\n        }\n        this.scheduledAfterRender.push(async () => {\n            await waitForNextPaint();\n            const { popoverTopContainer, popoverElement } = this;\n            const height = (isOpen && popoverTopContainer?.offsetHeight) || 0;\n            if (height) {\n                popoverElement.style.setProperty('--comp-popover-top-container-height', `${height}px`);\n            } else {\n                popoverElement.style.removeProperty('--comp-popover-top-container-height');\n            }\n        });\n    }\n\n    @Watch('searchable')\n    searchableChanged(newVal: boolean) {\n        if (!this.isOrientationUpdate) {\n            this.originalSearchable = newVal;\n        }\n    }\n\n    @Watch('value')\n    @Watch('selectedOptions')\n    buildStructuredSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        if (multiple) {\n            this.structuredSelectedOptions = !!selectedOptions?.length\n                ? selectedOptions.map(option => (typeof option === 'string' ? { value: option } : option))\n                : [];\n        } else {\n            this.structuredSelectedOptions = value ? [{ value }] : [];\n        }\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.multiple) return;\n        this.clearSearchText();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get badgeValue(): string {\n        if (!this.multiple) return null;\n        const optionsLength = this.selectedOptions?.length ?? 0;\n        if (this.open && this.searchable) return optionsLength ? `${optionsLength}` : null;\n        else return optionsLength > 1 ? `+${optionsLength - 1}` : null;\n    }\n\n    get firstSelectedOptionElement() {\n        const { firstSelectedValue } = this;\n        return firstSelectedValue ? this.optionElements.find(({ value }) => value === firstSelectedValue) : null;\n    }\n\n    get firstSelectedValue() {\n        return this.multiple ? this.selectedOptions?.[0] : this.value;\n    }\n\n    get innerInputContainer(): HTMLElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-container');\n    }\n\n    get innerInputField(): HTMLInputElement | HTMLButtonElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-field');\n    }\n\n    get inputId() {\n        return `select-guid-${this.guid}`;\n    }\n\n    get isModule() {\n        const isIframe = window !== window.top;\n        const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n        return isIframe && hasPlatformDimensions;\n    }\n\n    get optionElements() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2OptionElement>('q2-option'));\n    }\n\n    get popoverMinHeight() {\n        const { minRows } = this;\n        const firstOption = this.hostElement.querySelector<HTMLQ2OptionElement>('q2-option:not([hidden])');\n        let minHeight = firstOption && window.getComputedStyle(firstOption).minHeight;\n\n        // Safari doesn't return a min-height for non-visible items\n        if (!minHeight || minHeight === '0px') minHeight = '44px';\n\n        return minRows * parseInt(minHeight);\n    }\n\n    get selectedDisplay() {\n        if (this.prioritizeSearch || this.searchText) return this.searchText;\n        if (this.hasCustomDisplay) return '';\n        return (\n            this.multiple ? this.calculateMultiSelectSelectedDisplay() : this.calculateSingleSelectSelectedDisplay()\n        )\n            .trim()\n            .replace(/\\t/g, ' ');\n    }\n\n    get selectedDisplaySlot() {\n        return this.hostElement.querySelector<HTMLElement>('[slot=\"_selected-display\"]');\n    }\n\n    get wrapperClasses() {\n        const { errors } = this;\n        const classes = ['q2-select-container'];\n        if (Array.isArray(errors) && errors.length > 0) classes.push('has-error');\n        if (this.inputFocused) classes.push('is-focused');\n        if (this.searchable) classes.push('is-searchable');\n        return classes.join(' ');\n    }\n\n    _togglePopover() {\n        const { innerInputField } = this;\n        innerInputField?.click();\n        innerInputField?.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    addTouchEventListeners = () => {\n        if (!isMobile() || !this.popoverElement) return;\n\n        this.popoverElement.addEventListener('touchmove', this.handleTouchMove, { passive: true });\n    };\n\n    calculateMultiSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;\n        if (!firstSelectedValue) return '';\n        if (firstSelectedOptionElement?.display) return loc(firstSelectedOptionElement.display);\n        if (multilineOptions && this.searchable) return this.searchText;\n        if (multilineOptions) return '';\n        return (\n            firstSelectedOptionElement?.textContent?.trim() ?? firstSelectedOptionElement?.value ?? firstSelectedValue\n        );\n    }\n\n    calculateSingleSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, multilineOptions } = this;\n        if (multilineOptions) {\n            return (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) || this.value || '';\n        } else {\n            return (\n                (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) ||\n                firstSelectedOptionElement?.textContent?.trim() ||\n                this.value ||\n                ''\n            );\n        }\n    }\n\n    checkSelectedDisplay() {\n        // This prevents an undefined property error when the spec tests are run\n        try {\n            this.hostElement;\n        } catch (error) {\n            return null;\n        }\n        let namedSlot = this.selectedDisplaySlot;\n        const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } =\n            this;\n        const hasNoValue = !value && multiple && !selectedOptions?.length;\n        if (prioritizeSearch || !multilineOptions || hasNoValue) return this.clearSelectedDisplay();\n\n        if (!firstSelectedOptionElement || firstSelectedOptionElement.display) return this.clearSelectedDisplay();\n\n        // Clone selected option and remove elements with hide-on-select attribute\n        const selectionClone = firstSelectedOptionElement.firstElementChild.cloneNode(true) as HTMLElement;\n        selectionClone.querySelectorAll('[hide-on-select]').forEach(element => element.remove());\n\n        if (namedSlot) {\n            const height = namedSlot.clientHeight === 0 ? 'auto' : `${namedSlot.clientHeight}px`;\n            namedSlot.style.setProperty('--comp-selected-display-height', height);\n            if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {\n                namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);\n            }\n        } else {\n            namedSlot = document.createElement('div');\n            namedSlot.slot = '_selected-display';\n            namedSlot.appendChild(selectionClone);\n            this.hostElement.appendChild(namedSlot);\n        }\n        return namedSlot;\n    }\n\n    checkSelectedDisplayHeight() {\n        const { selectedDisplaySlot } = this;\n        if (!selectedDisplaySlot) return;\n        selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');\n    }\n\n    checkSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        this.optionElements.forEach(option => {\n            if (multiple) {\n                option.selected = selectedOptions.includes(option.value);\n            } else {\n                option.selected = option.value === value;\n            }\n        });\n    }\n\n    clearSearchText() {\n        if (!this.searchText) return;\n        this.searchText = '';\n        mirrorEmit(this, ['input', 'tctInput'], { query: '' });\n    }\n\n    clearSelectedDisplay() {\n        this.selectedDisplaySlot?.remove();\n    }\n\n    clearValue() {\n        const { multiple } = this;\n        this.value = '';\n        this.selectedOptions = [];\n        mirrorEmit(this, ['change', 'tctChange'], {\n            value: multiple ? undefined : '',\n            selectedOptions: multiple ? [] : undefined,\n            tctVModel: multiple ? [] : '',\n        });\n    }\n\n    clickedElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName !== 'click-elsewhere') return;\n        event.stopPropagation();\n        const { popoverElement } = this;\n        if (!popoverElement) return;\n\n        // close popover only if not nested in a shadow dom\n        if (this.hostElement.getRootNode().nodeName !== '#document-fragment') {\n            popoverElement.open = false;\n        }\n    };\n\n    closeDropdown() {\n        this.open = false;\n        this.lastTouchWasInPopover = false;\n        this.clearSearchText();\n    }\n\n    destroyEventListeners = () => {\n        if (!isMobile()) return;\n        screen?.orientation?.removeEventListener('change', this.handleOrientationChange);\n        window.removeEventListener('resize', this.handleOrientationChange);\n        visualViewport?.removeEventListener('resize', this.handleOrientationChange);\n        this.removeTouchEventListeners();\n    };\n\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.focusInput();\n        this.handleSelectionChanges(result);\n    }\n\n    focusInput() {\n        this.inputField?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    // Helps with checking for calls to handleExternalKeydown in spec tests\n    handleOptionListExternalKeydown(event: KeyboardEvent) {\n        this.optionList.handleExternalKeydown(event);\n    }\n\n    handleOrientationChange = () => {\n        if (!isMobile()) return;\n\n        let isLandscape: boolean;\n        if (this.isModule) {\n            isLandscape = window.Tecton?.platformDimensions.orientationType?.includes('landscape');\n        } else {\n            isLandscape = screen?.orientation?.type?.includes('landscape');\n        }\n        this.isOrientationUpdate = true;\n        if (isLandscape && this.searchable) this.searchable = false;\n        if (!isLandscape) this.searchable = this.originalSearchable;\n        this.isOrientationUpdate = false;\n    };\n\n    handleSelectionChanges(changeDetails: { value?: string; values?: OptionValue[] }) {\n        const { value = '', values = [] } = changeDetails;\n        const selectedOptionValues = values.map(value => value.value);\n        const { multiple } = this;\n        if (!this.hostElement.onchange) {\n            this.selectedOptions = selectedOptionValues;\n        }\n\n        mirrorEmit(this, ['change', 'tctChange'], {\n            value: multiple ? undefined : value,\n            selectedOptions: multiple ? selectedOptionValues : undefined,\n            tctVModel: multiple ? selectedOptionValues : value,\n        });\n    }\n\n    handleTouchMove = (event: TouchEvent) => {\n        if (document.activeElement === this.hostElement) {\n            const target = event.target as HTMLElement;\n            if (target && target !== this.hostElement) {\n                this.inputFocused = false;\n                this.lastTouchWasInPopover = true;\n                target.focus();\n            }\n        }\n    };\n\n    initEventListeners = () => {\n        if (!isMobile()) return;\n        screen?.orientation?.addEventListener('change', this.handleOrientationChange);\n        window.addEventListener('resize', this.handleOrientationChange);\n        visualViewport?.addEventListener('resize', this.handleOrientationChange);\n    };\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    };\n\n    inputBlurHandler = () => {\n        this.inputFocused = false;\n    };\n\n    inputChangeHandler = (event: Event) => {\n        event.stopPropagation();\n    };\n\n    inputClickHandler = async (event: MouseEvent) => {\n        event.stopPropagation();\n\n        // Check if the last interaction was a touch within the popover\n        // If so, don't toggle the dropdown as the user is likely continuing to interact\n        if (this.lastTouchWasInPopover && this.open && this.searchable) {\n            // Reset the flag and don't toggle\n            this.lastTouchWasInPopover = false;\n            this.focusInput();\n            return;\n        }\n\n        // Reset the flag for any other click\n        this.lastTouchWasInPopover = false;\n\n        if (shouldShowActionSheet(this)) {\n            return this.executeActionSheet(event);\n        }\n        this.toggleDropdown();\n        this.focusInput();\n    };\n\n    inputFocusHandler = () => {\n        this.inputFocused = true;\n    };\n\n    inputInputHandler = (event: Q2InputCustomEvent<EventDetail> & InputEvent) => {\n        event.stopPropagation();\n        const eventValue = event.detail.value;\n        const shouldClearValue = !!this.value;\n\n        if (shouldClearValue) this.clearValue();\n        if (!this.open) this.openDropdownWithoutActiveElement();\n\n        this.prioritizeSearch = true;\n        this.searchText = eventValue;\n        mirrorEmit(this, ['input', 'tctInput'], { query: eventValue });\n    };\n\n    inputKeydownHandler = (event: KeyboardEvent) => {\n        if (this.readonly || this.disabled) return;\n        const { key, shiftKey } = event;\n        const isShiftTab = key === 'Tab' && shiftKey;\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n        if ((hasSlot || this.multiple) && (key === 'Tab' || isShiftTab)) return;\n\n        // slots are incompatible with action sheet\n        if (shouldShowActionSheet(this, event) && !hasSlot) {\n            return this.executeActionSheet(event);\n        }\n\n        const keysForOptionListToHandle = [\n            'ArrowDown',\n            'ArrowUp',\n            'PageDown',\n            'PageUp',\n            'Home',\n            'End',\n            'Escape',\n            'Tab',\n        ];\n\n        if (this.searchable && (key === ' ' || key === 'Enter') && this.inputField.value == '') {\n            event.preventDefault();\n            if (!this.open) this.openDropdownWithoutActiveElement();\n        }\n\n        if (this.searchable && !keysForOptionListToHandle.includes(key)) return;\n        if (this.shouldClearSearchText(event)) this.clearSearchText();\n\n        // Prevent click event from firing when spacebar is pressed\n        if (key === ' ') event.preventDefault();\n\n        this.handleOptionListExternalKeydown(event);\n    };\n\n    onCustomDisplayClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.focusInput();\n        this.toggleDropdown();\n    };\n\n    onMutationObserved = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const displaySlot = hostElement.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"q2-select-display\"]');\n        const hasCustomDisplay = displaySlot?.assignedNodes().length > 0;\n\n        if (this.hasCustomDisplay !== hasCustomDisplay) {\n            this.hasCustomDisplay = hasCustomDisplay;\n        }\n\n        const popTopSlot = hostElement.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n        if (hasPopoverTop !== topSlotHasNode) {\n            this.hasPopoverTop = topSlotHasNode;\n        }\n\n        const popBottomSlot = hostElement.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n        if (hasPopoverBottom !== bottomSlotHasNode) {\n            this.hasPopoverBottom = bottomSlotHasNode;\n        }\n\n        if (this.multilineOptions) this.handleMultilineOptionsUpdate(this.multilineOptions, null);\n        this.checkSelectedOptions();\n    };\n\n    onOptionListChange = (event: Q2OptionListCustomEvent<{ value: string; values: OptionValue[] }>) => {\n        event.stopPropagation();\n        const { values } = event.detail;\n\n        if (values.length === 0) this.showAllOptions();\n        this.handleSelectionChanges(event.detail);\n    };\n\n    onPopoverState = ({\n        detail: { open, action },\n    }: CustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>) => {\n        if (!open || this.searchText) {\n            if (action !== 'select') {\n                this.optionList.setActiveElement(null);\n            }\n            this.inputField.focus();\n        }\n\n        if (this.open === open) return;\n        this.open = open;\n    };\n\n    openDropdownWithoutActiveElement() {\n        if (this.readonly || this.disabled) return;\n        this.optionList.setActiveElement(null);\n        this.open = true;\n    }\n\n    removeTouchEventListeners = () => {\n        if (!isMobile() || !this.popoverElement) return;\n\n        this.popoverElement.removeEventListener('touchmove', this.handleTouchMove);\n    };\n\n    setCustomLabel() {\n        const customLabel = this.hostElement.querySelector('[slot=\"label\"]');\n        if (customLabel) {\n            this.inputField?.appendChild(customLabel.cloneNode(true));\n            this.hostElement.removeChild(customLabel);\n        }\n    }\n\n    setStatusMessage(message) {\n        clearTimeout(this.statusMessageTimer);\n        this.statusMessage = '';\n        this.statusMessageTimer = setTimeout(() => {\n            this.statusMessage = message;\n        }, 1000);\n    }\n\n    shouldClearSearchText(event: KeyboardEvent) {\n        return this.searchable && !!this.searchText && event.key === 'Escape';\n    }\n\n    showAllOptions = () => {\n        this.showSelected = false;\n    };\n\n    showSelectedOptions = () => {\n        this.showSelected = true;\n    };\n\n    toggleDropdown() {\n        if (this.readonly || this.disabled) return;\n\n        if (this.open && !this.searchText) {\n            this.closeDropdown();\n        } else {\n            this.openDropdownWithoutActiveElement();\n        }\n    }\n\n    visibilityToggleKeyDown = (event: KeyboardEvent) => {\n        const key = event.key;\n        const isShiftTab = key === 'Tab' && event.shiftKey;\n        const isRadioControlKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key);\n        if (isRadioControlKey) event.stopPropagation();\n        if (isShiftTab) {\n            event.stopPropagation();\n            // allows shift+tab keys to select the top slot when present\n            if (this.hasPopoverTop) return;\n\n            this.optionList.setDefaultActiveElement();\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderCustomDisplay() {\n        const hasSelectedDisplay = this.checkSelectedDisplay();\n        if (!hasSelectedDisplay) return;\n        this.checkSelectedDisplayHeight();\n\n        return (\n            <slot\n                name=\"_selected-display\"\n                slot=\"custom-display\"\n            />\n        );\n    }\n\n    renderOptionsDropdown() {\n        return (\n            <q2-popover\n                ref={el => (this.popoverElement = el)}\n                controlElement={this.innerInputContainer}\n                open={this.open}\n                max-height={this.popoverMaxHeight}\n                minHeight={this.popoverMinHeight}\n                direction={this.popDirection}\n                mode={this.popoverMode || undefined}\n                block\n            >\n                <div class=\"popover-content\">\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        ref={el => (this.optionList = el)}\n                        type=\"listbox\"\n                        id=\"option-list\"\n                        show-selected={this.showSelected}\n                        label={this.listLabel}\n                        multiple={this.multiple}\n                        selectedOptions={this.structuredSelectedOptions}\n                        onChange={e => e.stopPropagation()}\n                        onTctChange={this.onOptionListChange}\n                    >\n                        <slot />\n                    </q2-option-list>\n                    <div\n                        class=\"popover-top-container\"\n                        ref={el => (this.popoverTopContainer = el)}\n                        hidden={!this.multiple && !this.hasPopoverTop}\n                        tabindex=\"-1\"\n                    >\n                        <slot name=\"popover-top\"></slot>\n                        {this.multiple && this.renderVisibilityToggle()}\n                    </div>\n                </div>\n                <div\n                    class=\"popover-bottom-container\"\n                    hidden={!this.hasPopoverBottom}\n                    tabindex=\"-1\"\n                >\n                    <slot name=\"popover-bottom\" />\n                </div>\n            </q2-popover>\n        );\n    }\n\n    renderSelectField() {\n        return (\n            <Fragment>\n                <div\n                    aria-live=\"polite\"\n                    aria-atomic=\"true\"\n                    role=\"status\"\n                    class=\"sr\"\n                >\n                    {this.statusMessage}\n                </div>\n                <q2-input\n                    ref={el => (this.inputField = el)}\n                    class=\"q2-select-input\"\n                    label={(this.label && loc(this.label)) || ''}\n                    value={this.selectedDisplay}\n                    clearable={(this.clearable && (!!this.value || !!this.selectedOptions?.length)) || undefined}\n                    errors={\n                        (Array.isArray(this.errors) &&\n                            this.errors.length > 0 &&\n                            this.errors.map(error => loc(error))) ||\n                        (this.invalid && ['tecton.element.select.invalid']) ||\n                        []\n                    }\n                    disabled={this.disabled}\n                    optional={this.optional}\n                    readonly={!!this.readonly}\n                    placeholder={this.placeholder || undefined}\n                    hideLabel={this.hideLabel}\n                    ariaExpanded={`${this.open}`}\n                    ariaControls=\"option-list\"\n                    ariaHaspopup=\"listbox\"\n                    test-id=\"toggleDropdown\"\n                    hide-messages\n                    iconRight=\"chevron-down\"\n                    onClick={this.inputClickHandler}\n                    onInput={e => e.stopImmediatePropagation()}\n                    onTctInput={this.inputInputHandler}\n                    onKeyDown={this.inputKeydownHandler}\n                    onFocus={this.inputFocusHandler}\n                    onBlur={this.inputBlurHandler}\n                    onChange={e => e.stopPropagation()}\n                    onTctChange={this.inputChangeHandler}\n                    badgeValue={this.badgeValue}\n                    badgeTheme={this.inputFocused ? 'primary' : undefined}\n                    _role=\"combobox\"\n                    _preventEntry={!this.searchable}\n                >\n                    {this.renderCustomDisplay()}\n                </q2-input>\n                <div\n                    class=\"custom-display-content\"\n                    hidden={!this.hasCustomDisplay || !!this.searchText}\n                    onClick={this.onCustomDisplayClick}\n                >\n                    <slot name=\"q2-select-display\" />\n                </div>\n                {this.renderOptionsDropdown()}\n            </Fragment>\n        );\n    }\n\n    renderVisibilityToggle() {\n        const selectedOptionsCount = this.selectedOptions?.length ?? 0;\n        const { showSelected } = this;\n        return (\n            <div class=\"multi-select-header\">\n                <fieldset>\n                    <legend aria-label={loc('tecton.element.select.multiHeader.showing')}>\n                        {loc('tecton.element.select.multiHeader.showing')}\n                    </legend>\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"all\"\n                            name=\"viewDisplay\"\n                            value=\"all\"\n                            checked={!showSelected}\n                            aria-label={loc('tecton.element.select.multiHeader.allAriaLabel')}\n                            test-id=\"allOptionsButton\"\n                            onClick={this.showAllOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"all\">{loc('tecton.element.select.multiHeader.all')}</label>\n                    </div>\n\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"selected\"\n                            disabled={selectedOptionsCount === 0}\n                            name=\"viewDisplay\"\n                            value=\"selected\"\n                            aria-label={loc('tecton.element.select.multiHeader.selectedAriaLabel', [\n                                selectedOptionsCount,\n                            ])}\n                            checked={showSelected}\n                            test-id=\"selectedOptionsButton\"\n                            onClick={this.showSelectedOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"selected\">\n                            {loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount])}\n                        </label>\n                    </div>\n                </fieldset>\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <click-elsewhere\n                class={this.wrapperClasses}\n                role=\"presentation\"\n                onChange={this.clickedElsewhere}\n            >\n                {this.renderSelectField()}\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n\n// #endregion\n"],"mappings":"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","ignoreList":[]}

package/dist/q2-tecton-elements/q2-stepper-pane.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-stepper-pane.entry.esm.js","sources":["src/components/q2-stepper-pane/q2-stepper-pane.scss?tag=q2-stepper-pane&encapsulation=shadow","src/components/q2-stepper-pane/q2-stepper-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n","import { hasValidAncestor } from '@/utils/component';\nimport {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    Fragment,\n    Event,\n    Host,\n    Watch,\n    EventEmitter,\n    Listen,\n    State,\n} from '@stencil/core';\nimport { createGuid, loc, nextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\nexport interface IStepperPaneEvent {\n    status: string;\n    isActive: boolean;\n    id: string;\n    host: HTMLElement;\n}\n\n/**\n * @name Stepper Pane\n * @category Display\n * @summary Use as a single step within a Stepper or Vertical Stepper.\n * @slot label - An optional slot to replace the label attribute with custom content as the stepper pane's label.\n * @slot description - An optional slot to replace the description attribute with custom content as the stepper pane's description.\n * If you would like to ellipsize any part of the description, Tecton exposes an `ellipsize` class for you to use.\n * @slot children - A slot specifically for [Vertical Stepper](https://tecton.q2developer.com/design-system/q2-stepper-vertical) to display child `q2-stepper-pane` elements within a stepper pane.\n */\n@Component({ tag: 'q2-stepper-pane', shadow: true, styleUrl: 'q2-stepper-pane.scss' })\nexport class Q2StepperPane implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isChildActive: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * The description for the pane.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Used by q2-stepper and q2-stepper-vertical to determine which pane is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    isActive: boolean;\n\n    /**\n     * The label for the pane.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Indicates to display the content of the pane when one of its children is selected.\n     * @info\n     * Currently only supported in the `<q2-stepper-vertical>` component.\n     */\n    @Prop({ reflect: true })\n    showWithChildren: boolean;\n\n    /** The status of the pane. */\n    @Prop({ reflect: true })\n    status: 'complete' | 'error' | 'locked';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the active state of the pane changes.\n     * @deprecated Use 'tctActiveChange' instead\n     */\n    @Event()\n    activeChange: EventEmitter<IStepperPaneEvent>;\n\n    /**\n     * Emitted when the content of the pane changes.\n     * @private\n     */\n    @Event({ bubbles: true })\n    contentChange: EventEmitter<undefined>;\n\n    /**\n     * Emitted when the status of the pane changes.\n     * @deprecated Use 'tctStatusChange' instead\n     */\n    @Event()\n    statusChange: EventEmitter<IStepperPaneEvent>;\n\n    /**\n     * Emitted when the active state of the pane changes.\n     */\n    @Event()\n    tctActiveChange: EventEmitter<IStepperPaneEvent>;\n\n    /**\n     * Emitted when the status of the pane changes.\n     */\n    @Event()\n    tctStatusChange: EventEmitter<IStepperPaneEvent>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    connectedCallback() {\n        if (!this.hostElement.id) this.hostElement.id = `step-${createGuid()}`;\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        hasValidAncestor(this.hostElement, 'q2-stepper, q2-stepper-vertical');\n        this.checkForActiveChildren();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(() => {\n            this.contentChange.emit();\n        });\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('isActive')\n    isActiveChanged(isActive) {\n        mirrorEmit(this, ['activeChange', 'tctActiveChange'], {\n            status: this.status || '',\n            isActive,\n            id: this.hostElement.id,\n            host: this.hostElement,\n        });\n    }\n\n    @Watch('label')\n    @Watch('description')\n    labelOrDescriptionChanged() {\n        this.contentChange.emit();\n    }\n\n    @Watch('showWithChildren')\n    @Listen('activeChange')\n    checkForActiveChildren() {\n        if (!this.showWithChildren) return;\n        nextPaint(() => {\n            setTimeout(() => {\n                this.isChildActive = !!this.hostElement.querySelector<HTMLQ2StepperPaneElement>(\n                    \"[slot='children'] > q2-stepper-pane[is-active]\"\n                );\n            });\n        });\n    }\n\n    @Watch('status')\n    statusChanged(status) {\n        mirrorEmit(this, ['statusChange', 'tctStatusChange'], {\n            status,\n            isActive: !!this.isActive,\n            id: this.hostElement.id,\n            host: this.hostElement,\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { label, isActive } = this;\n        return (\n            <Host role=\"listitem\">\n                <Fragment>\n                    <div\n                        aria-label={label && loc(label)}\n                        tabindex=\"0\"\n                        hidden={!isActive && !(this.isChildActive && this.showWithChildren)}\n                    >\n                        <slot />\n                    </div>\n                    <div hidden>\n                        <slot\n                            name=\"label\"\n                            onSlotchange={() => this.contentChange.emit()}\n                        ></slot>\n                        <slot\n                            name=\"description\"\n                            onSlotchange={() => this.contentChange.emit()}\n                        ></slot>\n                    </div>\n                    <slot name=\"children\"></slot>\n                </Fragment>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-stepper-pane.entry.esm.js","sources":["src/components/q2-stepper-pane/q2-stepper-pane.scss?tag=q2-stepper-pane&encapsulation=shadow","src/components/q2-stepper-pane/q2-stepper-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n","import { hasValidAncestor } from '@/utils/component';\nimport {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    Fragment,\n    Event,\n    Host,\n    Watch,\n    EventEmitter,\n    Listen,\n    State,\n} from '@stencil/core';\nimport { createGuid, loc, nextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport type { StepperPaneEvent } from 'q2-tecton-common/lib/types/elements';\n\n/**\n * @name Stepper Pane\n * @category Display\n * @summary Use as a single step within a Stepper or Vertical Stepper.\n * @slot label - An optional slot to replace the label attribute with custom content as the stepper pane's label.\n * @slot description - An optional slot to replace the description attribute with custom content as the stepper pane's description.\n * If you would like to ellipsize any part of the description, Tecton exposes an `ellipsize` class for you to use.\n * @slot children - A slot specifically for [Vertical Stepper](https://tecton.q2developer.com/design-system/q2-stepper-vertical) to display child `q2-stepper-pane` elements within a stepper pane.\n */\n@Component({ tag: 'q2-stepper-pane', shadow: true, styleUrl: 'q2-stepper-pane.scss' })\nexport class Q2StepperPane implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isChildActive: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * The description for the pane.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /** Disables the pane's step button in the stepper, preventing user interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by q2-stepper and q2-stepper-vertical to determine which pane is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    isActive: boolean;\n\n    /**\n     * The label for the pane.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Indicates to display the content of the pane when one of its children is selected.\n     * @info\n     * Currently only supported in the `<q2-stepper-vertical>` component.\n     */\n    @Prop({ reflect: true })\n    showWithChildren: boolean;\n\n    /** The status of the pane. */\n    @Prop({ reflect: true })\n    status: 'complete' | 'error' | 'locked';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the active state of the pane changes.\n     * @deprecated Use 'tctActiveChange' instead\n     */\n    @Event()\n    activeChange: EventEmitter<StepperPaneEvent>;\n\n    /**\n     * Emitted when the content of the pane changes.\n     * @private\n     */\n    @Event({ bubbles: true })\n    contentChange: EventEmitter<undefined>;\n\n    /**\n     * Emitted when the status of the pane changes.\n     * @deprecated Use 'tctStatusChange' instead\n     */\n    @Event()\n    statusChange: EventEmitter<StepperPaneEvent>;\n\n    /**\n     * Emitted when the active state of the pane changes.\n     */\n    @Event()\n    tctActiveChange: EventEmitter<StepperPaneEvent>;\n\n    /**\n     * Emitted when the status of the pane changes.\n     */\n    @Event()\n    tctStatusChange: EventEmitter<StepperPaneEvent>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    connectedCallback() {\n        if (!this.hostElement.id) this.hostElement.id = `step-${createGuid()}`;\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        hasValidAncestor(this.hostElement, 'q2-stepper, q2-stepper-vertical');\n        this.checkForActiveChildren();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(() => {\n            this.contentChange.emit();\n        });\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    @Watch('label')\n    @Watch('description')\n    labelOrDescriptionChanged() {\n        this.contentChange.emit();\n    }\n\n    @Watch('isActive')\n    isActiveChanged(isActive) {\n        mirrorEmit(this, ['activeChange', 'tctActiveChange'], {\n            status: this.status || '',\n            isActive,\n            id: this.hostElement.id,\n            host: this.hostElement,\n        });\n    }\n\n    @Watch('showWithChildren')\n    @Listen('activeChange')\n    checkForActiveChildren() {\n        if (!this.showWithChildren) return;\n        nextPaint(() => {\n            setTimeout(() => {\n                this.isChildActive = !!this.hostElement.querySelector<HTMLQ2StepperPaneElement>(\n                    \"[slot='children'] > q2-stepper-pane[is-active]\"\n                );\n            });\n        });\n    }\n\n    @Watch('status')\n    statusChanged(status) {\n        mirrorEmit(this, ['statusChange', 'tctStatusChange'], {\n            status,\n            isActive: !!this.isActive,\n            id: this.hostElement.id,\n            host: this.hostElement,\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { label, isActive } = this;\n        return (\n            <Host role=\"listitem\">\n                <Fragment>\n                    <div\n                        aria-label={label && loc(label)}\n                        tabindex=\"0\"\n                        hidden={!isActive && !(this.isChildActive && this.showWithChildren)}\n                    >\n                        <slot />\n                    </div>\n                    <div hidden>\n                        <slot\n                            name=\"label\"\n                            onSlotchange={() => this.contentChange.emit()}\n                        ></slot>\n                        <slot\n                            name=\"description\"\n                            onSlotchange={() => this.contentChange.emit()}\n                        ></slot>\n                    </div>\n                    <slot name=\"children\"></slot>\n                </Fragment>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/q2-tecton-elements/q2-stepper-pane.entry.js

@@ -2,7 +2,7 @@ import { r as t, c as e, h as i, F as s, H as a, g as n } from "./index-CGkHOjh1
 
 import { b as o } from "./component-DVxzK3WH.js";
 
-import { c as h, n as c, l as r } from "./index-B4WYBDS9.js";
+import { c as h, n as c, l as r } from "./index-C4PILj1_.js";
 
 import { m as d } from "./mirror-emit-DUjY_ucm.js";
 
@@ -47,6 +47,9 @@ const b = class {
   }
   // #endregion
   // #region Watchers
+  labelOrDescriptionChanged() {
+    this.contentChange.emit();
+  }
   isActiveChanged(t) {
     d(this, [ "activeChange", "tctActiveChange" ], {
       status: this.status || "",
@@ -55,9 +58,6 @@ const b = class {
       host: this.hostElement
     });
   }
-  labelOrDescriptionChanged() {
-    this.contentChange.emit();
-  }
   checkForActiveChildren() {
     if (!this.showWithChildren) return;
     c((() => {
@@ -79,30 +79,30 @@ const b = class {
   render() {
     const {label: t, isActive: e} = this;
     return i(a, {
-      key: "92b69f37a2f62352700edac4aead4015bc4e32e9",
+      key: "69b27313eda3276e7041c2813b2a56a53efc104b",
       role: "listitem"
     }, i(s, {
-      key: "56885c0b815a4f4526c9d0a93a82412dfeb26889"
+      key: "c7c5d0fd3ad3dc8650832d6e2f32ff59ee28b1a6"
     }, i("div", {
-      key: "686936fb5947933f7a20e948609506b4af882a7a",
+      key: "a07608df6dc48453a00b72e501d23f28b72ab5cb",
       "aria-label": t && r(t),
       tabindex: "0",
       hidden: !e && !(this.isChildActive && this.showWithChildren)
     }, i("slot", {
-      key: "a7b8fe995e01b385454e475b9cf7fd263fafcfb3"
+      key: "68cef0c9131cf432fa9d48500f62fc88ebba198b"
     })), i("div", {
-      key: "43d7a942a02bfe8b8e3a0b64b297ffcc34b4429e",
+      key: "0b9f7a3e34565490acd91747b047f9802bf9ac49",
       hidden: true
     }, i("slot", {
-      key: "6a0e1ea729ac690f6e8f6f2d9dd7d9c64884be23",
+      key: "ca7f10c02501ba44b75640d6f6a67d1f4d5dcf92",
       name: "label",
       onSlotchange: () => this.contentChange.emit()
     }), i("slot", {
-      key: "9c450fee9479ed1085eee4a07cf409e517fa41b5",
+      key: "f1cd0547c27b3f869fc245d6eba144cf85c3e17f",
       name: "description",
       onSlotchange: () => this.contentChange.emit()
     })), i("slot", {
-      key: "91e8fcbbcbfacf633fc66cb814d27735fddac14a",
+      key: "bf21a7e7f578f58649edfa9ebf34849385b712a4",
       name: "children"
     })));
   }
@@ -111,9 +111,10 @@ const b = class {
   }
   static get watchers() {
     return {
-      isActive: [ "isActiveChanged" ],
+      disabled: [ "labelOrDescriptionChanged" ],
       label: [ "labelOrDescriptionChanged" ],
       description: [ "labelOrDescriptionChanged" ],
+      isActive: [ "isActiveChanged" ],
       showWithChildren: [ "checkForActiveChildren" ],
       status: [ "statusChanged" ]
     };

package/dist/q2-tecton-elements/q2-stepper-pane.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2StepperPaneCss","Q2StepperPane","constructor","hostRef","this","isChildActive","connectedCallback","hostElement","id","createGuid","disconnectedCallback","_a","mutationObserver","disconnect","componentWillLoad","hasValidAncestor","checkForActiveChildren","componentDidLoad","observer","MutationObserver","contentChange","emit","observe","childList","subtree","characterData","isActiveChanged","isActive","mirrorEmit","status","host","labelOrDescriptionChanged","showWithChildren","nextPaint","setTimeout","querySelector","statusChanged","render","label","h","Host","key","role","Fragment","loc","tabindex","hidden","name","onSlotchange"],"sources":["src/components/q2-stepper-pane/q2-stepper-pane.scss?tag=q2-stepper-pane&encapsulation=shadow","src/components/q2-stepper-pane/q2-stepper-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n","import { hasValidAncestor } from '@/utils/component';\nimport {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    Fragment,\n    Event,\n    Host,\n    Watch,\n    EventEmitter,\n    Listen,\n    State,\n} from '@stencil/core';\nimport { createGuid, loc, nextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\nexport interface IStepperPaneEvent {\n    status: string;\n    isActive: boolean;\n    id: string;\n    host: HTMLElement;\n}\n\n/**\n * @name Stepper Pane\n * @category Display\n * @summary Use as a single step within a Stepper or Vertical Stepper.\n * @slot label - An optional slot to replace the label attribute with custom content as the stepper pane's label.\n * @slot description - An optional slot to replace the description attribute with custom content as the stepper pane's description.\n * If you would like to ellipsize any part of the description, Tecton exposes an `ellipsize` class for you to use.\n * @slot children - A slot specifically for [Vertical Stepper](https://tecton.q2developer.com/design-system/q2-stepper-vertical) to display child `q2-stepper-pane` elements within a stepper pane.\n */\n@Component({ tag: 'q2-stepper-pane', shadow: true, styleUrl: 'q2-stepper-pane.scss' })\nexport class Q2StepperPane implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isChildActive: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * The description for the pane.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Used by q2-stepper and q2-stepper-vertical to determine which pane is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    isActive: boolean;\n\n    /**\n     * The label for the pane.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Indicates to display the content of the pane when one of its children is selected.\n     * @info\n     * Currently only supported in the `<q2-stepper-vertical>` component.\n     */\n    @Prop({ reflect: true })\n    showWithChildren: boolean;\n\n    /** The status of the pane. */\n    @Prop({ reflect: true })\n    status: 'complete' | 'error' | 'locked';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the active state of the pane changes.\n     * @deprecated Use 'tctActiveChange' instead\n     */\n    @Event()\n    activeChange: EventEmitter<IStepperPaneEvent>;\n\n    /**\n     * Emitted when the content of the pane changes.\n     * @private\n     */\n    @Event({ bubbles: true })\n    contentChange: EventEmitter<undefined>;\n\n    /**\n     * Emitted when the status of the pane changes.\n     * @deprecated Use 'tctStatusChange' instead\n     */\n    @Event()\n    statusChange: EventEmitter<IStepperPaneEvent>;\n\n    /**\n     * Emitted when the active state of the pane changes.\n     */\n    @Event()\n    tctActiveChange: EventEmitter<IStepperPaneEvent>;\n\n    /**\n     * Emitted when the status of the pane changes.\n     */\n    @Event()\n    tctStatusChange: EventEmitter<IStepperPaneEvent>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    connectedCallback() {\n        if (!this.hostElement.id) this.hostElement.id = `step-${createGuid()}`;\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        hasValidAncestor(this.hostElement, 'q2-stepper, q2-stepper-vertical');\n        this.checkForActiveChildren();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(() => {\n            this.contentChange.emit();\n        });\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('isActive')\n    isActiveChanged(isActive) {\n        mirrorEmit(this, ['activeChange', 'tctActiveChange'], {\n            status: this.status || '',\n            isActive,\n            id: this.hostElement.id,\n            host: this.hostElement,\n        });\n    }\n\n    @Watch('label')\n    @Watch('description')\n    labelOrDescriptionChanged() {\n        this.contentChange.emit();\n    }\n\n    @Watch('showWithChildren')\n    @Listen('activeChange')\n    checkForActiveChildren() {\n        if (!this.showWithChildren) return;\n        nextPaint(() => {\n            setTimeout(() => {\n                this.isChildActive = !!this.hostElement.querySelector<HTMLQ2StepperPaneElement>(\n                    \"[slot='children'] > q2-stepper-pane[is-active]\"\n                );\n            });\n        });\n    }\n\n    @Watch('status')\n    statusChanged(status) {\n        mirrorEmit(this, ['statusChange', 'tctStatusChange'], {\n            status,\n            isActive: !!this.isActive,\n            id: this.hostElement.id,\n            host: this.hostElement,\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { label, isActive } = this;\n        return (\n            <Host role=\"listitem\">\n                <Fragment>\n                    <div\n                        aria-label={label && loc(label)}\n                        tabindex=\"0\"\n                        hidden={!isActive && !(this.isChildActive && this.showWithChildren)}\n                    >\n                        <slot />\n                    </div>\n                    <div hidden>\n                        <slot\n                            name=\"label\"\n                            onSlotchange={() => this.contentChange.emit()}\n                        ></slot>\n                        <slot\n                            name=\"description\"\n                            onSlotchange={() => this.contentChange.emit()}\n                        ></slot>\n                    </div>\n                    <slot name=\"children\"></slot>\n                </Fragment>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;;;;;AAAA,MAAMA,IAAmB;;MCmCZC,IAAa;EAD1B,WAAAC,CAAAC;;;;;;;;;QAgBIC,KAAaC,gBAAY;AA6K5B;;;EAhGG,iBAAAC;IACI,KAAKF,KAAKG,YAAYC,IAAIJ,KAAKG,YAAYC,KAAK,QAAQC;;EAG5D,oBAAAC;;KACIC,IAAAP,KAAKQ,sBAAkB,QAAAD,WAAA,aAAAA,EAAAE;IACvBT,KAAKQ,mBAAmB;;EAG5B,iBAAAE;IACIC,EAAiBX,KAAKG,aAAa;IACnCH,KAAKY;;EAGT,gBAAAC;IACI,MAAMC,IAAW,IAAIC,kBAAiB;MAClCf,KAAKgB,cAAcC;AAAM;IAE7BH,EAASI,QAAQlB,KAAKG,aAAa;MAAEgB,WAAW;MAAMC,SAAS;MAAMC,eAAe;;IACpFrB,KAAKQ,mBAAmBM;;;;EAO5B,eAAAQ,CAAgBC;IACZC,EAAWxB,MAAM,EAAC,gBAAgB,qBAAoB;MAClDyB,QAAQzB,KAAKyB,UAAU;MACvBF;MACAnB,IAAIJ,KAAKG,YAAYC;MACrBsB,MAAM1B,KAAKG;;;EAMnB,yBAAAwB;IACI3B,KAAKgB,cAAcC;;EAKvB,sBAAAL;IACI,KAAKZ,KAAK4B,kBAAkB;IAC5BC,GAAU;MACNC,YAAW;QACP9B,KAAKC,kBAAkBD,KAAKG,YAAY4B,cACpC;AACH;AACH;;EAKV,aAAAC,CAAcP;IACVD,EAAWxB,MAAM,EAAC,gBAAgB,qBAAoB;MAClDyB;MACAF,YAAYvB,KAAKuB;MACjBnB,IAAIJ,KAAKG,YAAYC;MACrBsB,MAAM1B,KAAKG;;;;;EAOnB,MAAA8B;IACI,OAAMC,OAAEA,GAAKX,UAAEA,KAAavB;IAC5B,OACImC,EAACC,GAAK;MAAAC,KAAA;MAAAC,MAAK;OACPH,EAACI,GAAQ;MAAAF,KAAA;OACLF,EACgB;MAAAE,KAAA;MAAA,cAAAH,KAASM,EAAIN;MACzBO,UAAS;MACTC,SAASnB,OAAcvB,KAAKC,iBAAiBD,KAAK4B;OAElDO,EAAA;MAAAE,KAAA;SAEJF,EAAA;MAAAE,KAAA;MAAKK,QAAM;OACPP,EAAA;MAAAE,KAAA;MACIM,MAAK;MACLC,cAAc,MAAM5C,KAAKgB,cAAcC;QAE3CkB,EAAA;MAAAE,KAAA;MACIM,MAAK;MACLC,cAAc,MAAM5C,KAAKgB,cAAcC;SAG/CkB,EAAA;MAAAE,KAAA;MAAMM,MAAK","ignoreList":[]}
+{"version":3,"names":["q2StepperPaneCss","Q2StepperPane","constructor","hostRef","this","isChildActive","connectedCallback","hostElement","id","createGuid","disconnectedCallback","_a","mutationObserver","disconnect","componentWillLoad","hasValidAncestor","checkForActiveChildren","componentDidLoad","observer","MutationObserver","contentChange","emit","observe","childList","subtree","characterData","labelOrDescriptionChanged","isActiveChanged","isActive","mirrorEmit","status","host","showWithChildren","nextPaint","setTimeout","querySelector","statusChanged","render","label","h","Host","key","role","Fragment","loc","tabindex","hidden","name","onSlotchange"],"sources":["src/components/q2-stepper-pane/q2-stepper-pane.scss?tag=q2-stepper-pane&encapsulation=shadow","src/components/q2-stepper-pane/q2-stepper-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n","import { hasValidAncestor } from '@/utils/component';\nimport {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    Fragment,\n    Event,\n    Host,\n    Watch,\n    EventEmitter,\n    Listen,\n    State,\n} from '@stencil/core';\nimport { createGuid, loc, nextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport type { StepperPaneEvent } from 'q2-tecton-common/lib/types/elements';\n\n/**\n * @name Stepper Pane\n * @category Display\n * @summary Use as a single step within a Stepper or Vertical Stepper.\n * @slot label - An optional slot to replace the label attribute with custom content as the stepper pane's label.\n * @slot description - An optional slot to replace the description attribute with custom content as the stepper pane's description.\n * If you would like to ellipsize any part of the description, Tecton exposes an `ellipsize` class for you to use.\n * @slot children - A slot specifically for [Vertical Stepper](https://tecton.q2developer.com/design-system/q2-stepper-vertical) to display child `q2-stepper-pane` elements within a stepper pane.\n */\n@Component({ tag: 'q2-stepper-pane', shadow: true, styleUrl: 'q2-stepper-pane.scss' })\nexport class Q2StepperPane implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isChildActive: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * The description for the pane.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /** Disables the pane's step button in the stepper, preventing user interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by q2-stepper and q2-stepper-vertical to determine which pane is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    isActive: boolean;\n\n    /**\n     * The label for the pane.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Indicates to display the content of the pane when one of its children is selected.\n     * @info\n     * Currently only supported in the `<q2-stepper-vertical>` component.\n     */\n    @Prop({ reflect: true })\n    showWithChildren: boolean;\n\n    /** The status of the pane. */\n    @Prop({ reflect: true })\n    status: 'complete' | 'error' | 'locked';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the active state of the pane changes.\n     * @deprecated Use 'tctActiveChange' instead\n     */\n    @Event()\n    activeChange: EventEmitter<StepperPaneEvent>;\n\n    /**\n     * Emitted when the content of the pane changes.\n     * @private\n     */\n    @Event({ bubbles: true })\n    contentChange: EventEmitter<undefined>;\n\n    /**\n     * Emitted when the status of the pane changes.\n     * @deprecated Use 'tctStatusChange' instead\n     */\n    @Event()\n    statusChange: EventEmitter<StepperPaneEvent>;\n\n    /**\n     * Emitted when the active state of the pane changes.\n     */\n    @Event()\n    tctActiveChange: EventEmitter<StepperPaneEvent>;\n\n    /**\n     * Emitted when the status of the pane changes.\n     */\n    @Event()\n    tctStatusChange: EventEmitter<StepperPaneEvent>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    connectedCallback() {\n        if (!this.hostElement.id) this.hostElement.id = `step-${createGuid()}`;\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        hasValidAncestor(this.hostElement, 'q2-stepper, q2-stepper-vertical');\n        this.checkForActiveChildren();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(() => {\n            this.contentChange.emit();\n        });\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    @Watch('label')\n    @Watch('description')\n    labelOrDescriptionChanged() {\n        this.contentChange.emit();\n    }\n\n    @Watch('isActive')\n    isActiveChanged(isActive) {\n        mirrorEmit(this, ['activeChange', 'tctActiveChange'], {\n            status: this.status || '',\n            isActive,\n            id: this.hostElement.id,\n            host: this.hostElement,\n        });\n    }\n\n    @Watch('showWithChildren')\n    @Listen('activeChange')\n    checkForActiveChildren() {\n        if (!this.showWithChildren) return;\n        nextPaint(() => {\n            setTimeout(() => {\n                this.isChildActive = !!this.hostElement.querySelector<HTMLQ2StepperPaneElement>(\n                    \"[slot='children'] > q2-stepper-pane[is-active]\"\n                );\n            });\n        });\n    }\n\n    @Watch('status')\n    statusChanged(status) {\n        mirrorEmit(this, ['statusChange', 'tctStatusChange'], {\n            status,\n            isActive: !!this.isActive,\n            id: this.hostElement.id,\n            host: this.hostElement,\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { label, isActive } = this;\n        return (\n            <Host role=\"listitem\">\n                <Fragment>\n                    <div\n                        aria-label={label && loc(label)}\n                        tabindex=\"0\"\n                        hidden={!isActive && !(this.isChildActive && this.showWithChildren)}\n                    >\n                        <slot />\n                    </div>\n                    <div hidden>\n                        <slot\n                            name=\"label\"\n                            onSlotchange={() => this.contentChange.emit()}\n                        ></slot>\n                        <slot\n                            name=\"description\"\n                            onSlotchange={() => this.contentChange.emit()}\n                        ></slot>\n                    </div>\n                    <slot name=\"children\"></slot>\n                </Fragment>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;;;;;AAAA,MAAMA,IAAmB;;MC6BZC,IAAa;EAD1B,WAAAC,CAAAC;;;;;;;;;QAgBIC,KAAaC,gBAAY;AAkL5B;;;EAjGG,iBAAAC;IACI,KAAKF,KAAKG,YAAYC,IAAIJ,KAAKG,YAAYC,KAAK,QAAQC;;EAG5D,oBAAAC;;KACIC,IAAAP,KAAKQ,sBAAkB,QAAAD,WAAA,aAAAA,EAAAE;IACvBT,KAAKQ,mBAAmB;;EAG5B,iBAAAE;IACIC,EAAiBX,KAAKG,aAAa;IACnCH,KAAKY;;EAGT,gBAAAC;IACI,MAAMC,IAAW,IAAIC,kBAAiB;MAClCf,KAAKgB,cAAcC;AAAM;IAE7BH,EAASI,QAAQlB,KAAKG,aAAa;MAAEgB,WAAW;MAAMC,SAAS;MAAMC,eAAe;;IACpFrB,KAAKQ,mBAAmBM;;;;EAS5B,yBAAAQ;IACItB,KAAKgB,cAAcC;;EAIvB,eAAAM,CAAgBC;IACZC,EAAWzB,MAAM,EAAC,gBAAgB,qBAAoB;MAClD0B,QAAQ1B,KAAK0B,UAAU;MACvBF;MACApB,IAAIJ,KAAKG,YAAYC;MACrBuB,MAAM3B,KAAKG;;;EAMnB,sBAAAS;IACI,KAAKZ,KAAK4B,kBAAkB;IAC5BC,GAAU;MACNC,YAAW;QACP9B,KAAKC,kBAAkBD,KAAKG,YAAY4B,cACpC;AACH;AACH;;EAKV,aAAAC,CAAcN;IACVD,EAAWzB,MAAM,EAAC,gBAAgB,qBAAoB;MAClD0B;MACAF,YAAYxB,KAAKwB;MACjBpB,IAAIJ,KAAKG,YAAYC;MACrBuB,MAAM3B,KAAKG;;;;;EAOnB,MAAA8B;IACI,OAAMC,OAAEA,GAAKV,UAAEA,KAAaxB;IAC5B,OACImC,EAACC,GAAK;MAAAC,KAAA;MAAAC,MAAK;OACPH,EAACI,GAAQ;MAAAF,KAAA;OACLF,EACgB;MAAAE,KAAA;MAAA,cAAAH,KAASM,EAAIN;MACzBO,UAAS;MACTC,SAASlB,OAAcxB,KAAKC,iBAAiBD,KAAK4B;OAElDO,EAAA;MAAAE,KAAA;SAEJF,EAAA;MAAAE,KAAA;MAAKK,QAAM;OACPP,EAAA;MAAAE,KAAA;MACIM,MAAK;MACLC,cAAc,MAAM5C,KAAKgB,cAAcC;QAE3CkB,EAAA;MAAAE,KAAA;MACIM,MAAK;MACLC,cAAc,MAAM5C,KAAKgB,cAAcC;SAG/CkB,EAAA;MAAAE,KAAA;MAAMM,MAAK","ignoreList":[]}